@charset "UTF-8";
/*------------------------------------
全体設定　ここから
-------------------------------------*/
/* 初期設定 */
html {
  font-size: 62.5%!important;
}
body {
  width: 100%!important;
  font-size: 1.6rem!important;
  color: #333333!important;
  background: #f7f7f7!important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif!important;
}
body,
header,
nav,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
li,
a,
dl,
dd,
dt,
div,
span,
time,
figure,
figcaption,
article,
section,
aside {
  margin: 0px!important;
  padding: 0px!important;
  box-sizing: border-box!important;
  font-weight: normal!important;
  letter-spacing: .1px!important;
}
h1{
  font-size: 5rem!important;
  letter-spacing: .2px!important;
  font-weight: 700!important;
}
h2 {
  font-size: 3.584rem!important;
  font-weight: 700!important;
  line-height: 1.6!important;
  text-align: left!important;
}
h3{
  font-size: 3.328rem!important;
  font-weight: 700!important;
  margin-bottom: 0.3em!important;
}
h3 span{
  font-size: 0.63em!important;
  font-weight: 700!important;
  line-height: 1!important;
}
p{
  line-height: 1.6!important;
  font-size: 0.9em!important;
}
img,
svg,
video {
  width: 100%!important;
  height: 100%!important;
  max-width: 100%!important;
}
a {
  text-decoration: none!important;
  color: #333!important;
  display: inline-block!important;
  vertical-align: middle!important;
}
ul li {
  list-style-type: none!important;
}

.flex-container{
  display: flex!important;
  justify-content: space-between!important;
  flex-wrap: wrap!important;
}
.sp-newline,
.sp-only{
  display: none!important;
}

@media screen and (max-width: 959px){
  h1{
    font-size: 3.584rem!important;
  }
  .pc-newline,
  .pc-only{
    display: none!important;
  }
  .sp-newline,
  .sp-only{
    display: block!important;
  }
}
@media screen and (max-width: 599px){
  body {
    font-size: 1.5rem!important;
  }
  h1{
    font-size: 2.88rem!important;
  }
  h2 {
    font-size: 2.88rem!important;
  }
  h3{
    font-size: 2.64rem!important;
  }
}
/* 初期設定----------------------------------------------- */

/* セクション設定 */
.section-wrapper {
  padding: 6rem 4rem!important;
}
.lp-width{
  width: 100%!important;
  max-width: 950px!important;
  margin: 0 auto!important;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 959px){
  .section-wrapper {
    padding: 3rem 4rem!important;
  }
  .lp-width{
    max-width: 740px!important;
  }
}
@media screen and (max-width: 599px){
  .section-wrapper {
    padding: 3rem 1.5rem!important;
  }
}

/** -----------------------------------
ボタン
-------------------------------------**/
.button {
  display: block!important;
  background-color: #d64191!important;
  color: #FFf!important;
  border-radius: 30px!important;
  padding: 1.5rem 3rem!important;
  font-weight: 700!important;
  margin-bottom: 0.5rem!important;
  text-align: center!important;
}
.button.shadow{
  box-shadow: 0 4px 0 rgba(161, 49, 109, 1)!important;
  transition: transform .25s, box-shadow .25s, -webkit-transform .25s!important;
}
.button.shadow:hover{
  box-shadow: 0 0 0 transparent !important;
  transform: translate3d(0, 4px, 0)!important;
}

.button.__yerrow {
  background-color: #ffe402!important;
  color: #000!important;
  margin-bottom: 0.8rem!important;
}
.button.__yerrow.shadow {
  box-shadow: 0 4px 0 rgba(191, 171, 2, 1)!important;
  transition: transform .25s, box-shadow .25s, -webkit-transform .25s!important;
}

.button.__normal {
  background-color: #fff!important;
  color: #000!important;
  margin-bottom: 0.8rem!important;
  margin-top: 1em!important;
  border: 1px solid #000!important;
  transition: background-color .25s!important;
}
.button.__normal:hover{
  background-color: #000!important;
  color: #fff!important;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 959px){
  .button.__normal {
    margin-top: 0!important;
  }
}
@media screen and (max-width: 768px){
  .button {
    font-size: 1.4rem!important;
    padding: 1rem 1.5rem!important;
  }
}

/** -----------------------------------
ヘッダー
-------------------------------------**/
#header {
  width: 100%!important;
  position: fixed!important;
  top: 0!important;
  left: 0!important;
  z-index: 11!important;
  background: #f4eb63!important;
  padding: 0.5rem 2rem!important;
  box-shadow: 0 0 20px rgba(0, 0, 0, .16)!important;
}
#header .header-wrapper{
  display: flex!important;
  justify-content: space-between!important;
  align-items: center!important;
  max-width: 1130px!important;
  width: 100%!important;
  margin: 0 auto!important;
}
#header .header-logo {
  max-width: 20rem!important;
}
#header .header-logo img{
  vertical-align: middle!important;
}
#header .gnav-pc-wrap ul.gnav-pc{
  display: flex!important;
  align-items: center!important;
  gap: 1.5em!important;
}
#header .gnav-pc-wrap ul.gnav-pc li a img{
  height: 23px!important;
  display: block!important;
   width: auto!important;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 959px){
  #header .gnav-pc-wrap{
    display: none!important;
  }
}

/*	ハンバーガーメニュー（ボタン）	*/
.openbtn,
.closebtn{
  position: relative!important;
  cursor: pointer!important;
  width: 20px!important;
  height: 40px!important;
  transition: all .2s!important;
  display: flex!important;
  justify-content: center!important;
  padding-top: 32px!important;
}
.openbtn span,
.closebtn span{
  display: inline-block!important;
  position: absolute!important;
  left: 0px!important;
  height: 2px!important;
  border-radius: 2px!important;
  background: #000!important;
  width: 100%!important;
}
.openbtn span:nth-of-type(1) {
  top:13px!important;
}
.openbtn span:nth-of-type(2) {
  top:18px!important;
}
.openbtn span:nth-of-type(3) {
  top:23px!important;
}
.openbtn span:nth-of-type(4) {
  top:28px!important;
}
.closebtn{
  position: absolute!important;
  top: 0!important;
  right: 0!important;
}
.closebtn span:nth-of-type(1) {
  top: 18px!important;
  left: 16px!important;
  transform: translateY(6px) rotate(-45deg)!important;
}
.closebtn span:nth-of-type(2) {
  top: 30px!important;
  left: 16px!important;
  transform: translateY(-6px) rotate(45deg)!important;
}

/*	ハンバーガーメニュー（メニュー）	*/
.gnav-sp-wrap{
  display: none!important;
  width: 100%!important;
  z-index: 7!important;
}
.gnav-sp-list{
  display: block!important;
  background: #f4eb63!important;
  position: fixed!important;
  width: 100%!important;
  top: 0!important;
  right: 0!important;
  transition: all 0.3s!important;
  z-index: 10!important;
  padding: 12rem 2rem 6rem!important;
  overflow: auto!important;
  transform: translateY(-100%)!important;
}
.gnav-sp-list.is-active{
  transform: translateY(0%)!important;
}
.gnav-sp-list ul.gnav-sp li:not(:last-child){
  margin-bottom: 2em!important;
}
.gnav-sp-list ul.gnav-sp li a{
  color: #1176d4!important;
  font-weight: bold!important;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 959px){
  .gnav-sp-wrap{
    display: flex!important;
    justify-content: flex-end!important;
    align-items: center!important;
  }
  .gnav-sp-list ul.gnav-sp{
    display: block!important;
  }
}

/** -----------------------------------
トップメニュー
-------------------------------------**/
#topmenu{
  background: #f4eb63!important;
  padding: 2em 4rem!important;
  margin-top: 82px!important;
}
#topmenu .flex-container .flex-item{
  width: 23%!important;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 959px){
  #topmenu{
    margin-top: 61px!important;
    padding: 1em 4rem!important;
    position: fixed!important;
    z-index: 5!important;
    width: 100%!important;
  }
  #topmenu .lp-width{
    max-width: 100%!important;
  }
}
@media screen and (max-width: 599px){
  #topmenu{
    padding: 1em 1rem 0.5em!important;
    margin-top: 50px!important;
  }
}

/** -----------------------------------
メインビジュアル
-------------------------------------**/
#mainvisual{
  background-color: #7ca6db!important;
  overflow: hidden!important;
  text-align: left!important;
}
#mainvisual .flex-container{
  flex-wrap: nowrap!important;
  align-items: center!important;
}
#mainvisual .flex-container .flex-item{
  width: 47%!important;
  z-index: 2!important;
}
#mainvisual .flex-container .flex-item.bg{
  z-index: 1!important;
}
#mainvisual .flex-container .flex-item.bg figure{
  left: calc(50% - 41vw)!important;
  width: 84vw!important;
  position: relative!important;
}
#mainvisual .flex-container .flex-item.bg figure img{
  display: block!important;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 959px){
  #mainvisual{
    background-color: #f2b7cb!important;
    padding-top: 38vw!important;
  }
  #mainvisual .lp-width{
    max-width: 1000px!important;
  }
  #mainvisual .flex-container .flex-item{
    width: 100%!important;
  }
  #mainvisual .flex-container .flex-item.bg figure {
    left: 0!important;
    width: 100%!important;
  }
}
@media screen and (max-width: 599px){
  #mainvisual{
    padding-top: 45vw!important;
  }
}

/** -----------------------------------
feature
-------------------------------------**/
#feature{
  background-color: #f2b7cb!important;
  position: relative!important;
  text-align: left!important;
}
#feature .feature_topbg{
  position: absolute!important;
  width: 100%!important;
  top: -3.8vw!important;
  left: 0!important;
  z-index: 2!important;
}
#feature p{
  color: #002045!important;
  font-weight: 700!important;
  margin-bottom: 1em!important;
  font-size: 1em!important;
}
#feature p:last-of-type{
  margin-bottom: 0!important;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 959px){
  #feature{
    background-color: #7ca6da!important;
  }
  #feature p{
    color: #fff!important;
  }
}
@media screen and (max-width: 599px){
  #feature p{
    font-size: 4vw!important;
  }
}


/** -----------------------------------
カテゴリーエリア共通
-------------------------------------**/
.category-wrapper{
  text-align: left!important;
}
.category-wrapper .category-title{
  padding-top: 3rem!important;
  padding-bottom: 3rem!important;
}
.category-wrapper .category-title figure{
  width: 225px!important;
}
.category-wrapper .category-title figure img{
  filter: brightness(0) invert(1)!important;
}

.category-wrapper .category-contents{
  position: relative!important;
  padding-bottom: 0!important;
  padding-top: 1rem!important;
}
.category-wrapper .category-contents .category-topBg{
  position: absolute!important;
  width: 100%!important;
  top: -3.9vw!important;
  left: 0!important;
  z-index: 2!important;
}
.category-wrapper .category-contents .flex-container{
  align-items: center!important;
}
.category-wrapper .category-contents .flex-container .flex-item{
  width: 48%!important;
}
.category-wrapper .category-contents .flex-container .flex-item img{
  object-fit: contain!important;
  display: block!important;
  object-position: bottom center!important;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 959px){
  .category-wrapper .category-title figure{
    margin: 0 auto!important;
  }
  .category-wrapper .category-contents{
    padding-bottom: 4rem!important;
  }
  .category-wrapper .category-contents .flex-container{
    flex-direction: column-reverse!important;
  }
  .category-wrapper .category-contents .flex-container .flex-item{
    width: 100%!important;
  }
  .category-wrapper .category-contents .flex-container .flex-item h2{
    text-align: center!important;
    padding-bottom: .5em!important;
  }
  .category-wrapper .category-contents .flex-container .flex-item p.sp-only{
    margin-top: 1em!important;
  }
}

#makeup .category-title{
  background-color: #4e8780!important;
}
#makeup .category-contents{
  background-color: #8ccdc6!important;
}
#makeup .category-contents .flex-container .flex-item.img{
  padding: 0 8%!important;
}

#skincare .category-title{
  background-color: #e78069!important;
}
#skincare .category-contents{
  background-color: #f2bfb3!important;
}
#skincare .category-contents .flex-container .flex-item.img{
  padding: 0 2%!important;
}

#haircare .category-title{
  background-color: #e48ca9!important;
}
#haircare .category-contents{
  background-color: #f2b7cb!important;
}
#haircare .category-contents .flex-container .flex-item.img{
  padding: 0 8%!important;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 959px){
  #makeup .category-contents .flex-container .flex-item.img,
  #skincare .category-contents .flex-container .flex-item.img,
  #haircare .category-contents .flex-container .flex-item.img{
    padding: 0!important;
  }
  #makeup .category-contents .flex-container .flex-item.img img{
    max-width: 225px!important;
    margin: 0 auto!important;
  }
  #skincare .category-contents .flex-container .flex-item.img img{
    max-width: 325px!important;
    margin: 0 auto!important;
  }
  #haircare .category-contents .flex-container .flex-item.img img{
    max-width: 225px!important;
    margin: 0 auto!important;
  }
}


/** -----------------------------------
マツキヨココカラBeについて
-------------------------------------**/
#about{
  text-align: left!important;
}
#about h2{
  font-size: 2.8rem!important;
  font-weight: 500!important;
}
#about h3{
  font-size: 2rem!important;
  border-left: 5px solid!important;
  padding: 0.3em 1.0em!important;
  font-weight: 500!important;
  margin-top: 1.5em!important;
  margin-bottom: 2em!important;
}
#about a:not([class]){
  color: #1176d4!important;
  text-decoration: underline!important;
}
#about .service-logo-top{
  max-width: 20rem!important;
  margin-bottom: 1.5rem!important;
}
#about p{
  margin-bottom: 1em!important;
}
#about .flex-container .flex-item{
  background: #fff!important;
  width: 23%!important;
  padding: 2rem!important;
  border-radius: 1rem!important;
}
#about .button{
  font-size: 0.8em!important;
  font-weight: 500!important;
  padding: 1.0em!important;
  letter-spacing: 0.05em!important;
}
#about .service-logo{
  height: 2rem!important;
  margin: 1.5rem 0 1.7rem!important;
}
/** -------- スマホ -------- **/
@media screen and (max-width: 781px){
  #about .flex-container .flex-item{
    width: 48%!important;
  }
  #about .flex-container .flex-item:nth-of-type(1),
  #about .flex-container .flex-item:nth-of-type(2){
    margin-bottom: 2rem!important;
  }
}
@media screen and (max-width: 599px){
  #about h2{
    font-size: 2.25rem!important;
  }
  #about h3{
    font-size: 1.65rem!important;
    border-left: 4px solid!important;
    padding: 0.2em 0.8em!important;
    font-weight: 500!important;
  }
}

/** -----------------------------------
関連するお役立ち情報
-------------------------------------**/
#useful{
  background: #fff!important;
}
#useful h2{
  font-size: 2.8rem!important;
  font-weight: 500!important;
}
#useful .flex-container{
  max-width: 75rem!important;
  margin: 0 auto!important;
  justify-content: flex-start!important;
  gap:1.5em!important;
}
#useful .flex-container .flex-item{
  width: calc(33.3333% - 1em)!important;
}
#useful .flex-container .flex-item a{
  text-align: left!important;
  color: #717dff!important;
  line-height: 1.6!important;
  text-decoration: underline!important;
  font-size: 0.8em!important;
  margin-bottom: 1.1em!important;
}
#useful .flex-container .flex-item a figure{
  margin-bottom: 1em!important;
}
/** -------- スマホ -------- **/
@media screen and (max-width: 781px){
  #useful .flex-container .flex-item{
    width: 100%!important;
  }
  #useful .flex-container .flex-item:not(:last-of-type){
    margin-bottom: 2rem!important;
  }
}
@media screen and (max-width: 599px){
  #useful h2{
    font-size: 2.25rem!important;
  }
}


/** -----------------------------------
フッター
-------------------------------------**/
#footer > div{
  padding: 4rem!important;
}
#footer .footer-menu{
  background: #f4eb63!important;
  text-align: left!important;
}
#footer .footer-menu .flex-container{
  max-width: 1200px!important;
  margin: 0 auto!important;
}
#footer .footer-menu dl dt p big {
  font-size: 1em!important;
  font-weight: bold!important;
  color: #D84190!important;
  line-height: 1.6!important;
}
#footer .footer-menu dl + dl {
  margin-top: 1em!important;
}
#footer .footer-menu dl dt + dd {
  margin-top: 1em!important;
}
#footer .footer-menu dl dd .p-textlink ul li big {
  font-size: 1em!important;
  line-height: 1.6!important;
}

#footer .footer-info{
  position: relative!important;
}
#footer .footer-info ul{
  display: flex!important;
  gap: 10px 0px!important;
  margin: 0 auto!important;
  max-width: 800px!important;
  flex-wrap: wrap!important;
  justify-content: center!important;
  align-items: center!important;
}
#footer .footer-info ul li a {
  padding: 0 1em!important;
  display: inline-block!important;
  position: relative!important;
  line-height: 1!important;
}
#footer .footer-info ul li a big{
  font-size: inherit!important;
}
#footer .footer-info ul li a::after {
  display: inline-block!important;
  content: ""!important;
  width: 1px!important;
  height: 1em!important;
  background: #4E4E4E!important;
  position: absolute!important;
  top: 0!important;
  right: -1.5px!important;
}

#footer .footer-copyright{
  background: #fff!important;
  padding-bottom: 15rem!important;
}
#footer .footer-copyright .lp-width{
  max-width: 1260px!important;
}
#footer .footer-copyright .flex-container{
  flex-wrap:nowrap!important;
}

#footer .p-footer__pagetop_btn {
  margin-left: auto!important;
  position: absolute!important;
  top: -10px!important;
  right: 5.1282051282vw!important;
  z-index: 3!important;
  width: 50px!important;
  height: 50px!important;
  border-radius: 50px!important;
  background: #fff!important;
  border: 1px solid #CFCFD0!important;
  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1)!important;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1)!important;
}
#footer .p-footer__pagetop_btn::after{
  position: absolute!important;
  content: ""!important;
  width: 20%!important;
  height: 20%!important;
  border-top:1px solid #D84190!important;
  border-left:1px solid #D84190!important;
  top: 55%!important;
  left: 50%!important;
  transform: translate(-50%,-50%) rotate(45deg)!important;
  transform-origin: center!important;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px){
  #footer .footer-menu{
    display: none!important;
  }
}
@media screen and (max-width: 599px){
  #footer > div{
    padding: 4rem 2rem!important;
  }
  #footer .footer-info ul li a big{
    font-size: 15px!important;
  }
  #footer .footer-info ul li a {
    padding: 0 0.5em!important;
  }
  #footer .footer-copyright .flex-container{
    justify-content: center!important;
    flex-wrap:wrap!important;
  }
  #footer .footer-copyright .flex-container > div{
    margin-bottom: 2rem!important;
  }
}




.cmp-lpfooter {
    font-family: Hiragino Sans, system-ui, Meiryo, sans-serif;
    .cmp-lpfooter-nav-links {
        margin: 0 auto !important;
        margin-bottom: 0 !important;
    }
    .cmp-lpfooter-copyright {
        p {
            font-size: 3vw !important;
        }
    }
    @media screen and (min-width: 768px) {
        .cmp-lpfooter-nav-links {
            margin-bottom: 10px !important;
        }
        .cmp-lpfooter-copyright {
            p {
                font-size: 16px !important;
            }
        }
    }
}