@charset "UTF-8";
:root { --header-h-pc: 10px; --header-h-sp: 70px; }     /* PC/SPで違うならメディアクエリで切替 */
html { scroll-padding-top: var(--header-h-pc); }
[id] { scroll-margin-top: var(--header-h-pc); }

.newcatgory{ background: #F7F7F1; padding: 120px 20px; text-align: center;}
.newcatgory .newcatIn{ text-align: center; max-width: 1310px; margin: 0 auto 95px auto;}
@media screen and (max-width: 900px) {
    .newcatgory .newcatIn{
        margin: 0 auto 52px auto;
    }
}
.newcatgory .newcatIn:last-child{
    margin-bottom: 0;
}
/* .newcatgory .newcatIn ul{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 15px 13px;
} */

.newctListWrap{
    text-align: left;
    max-width: 1072px;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    padding: 0 20px;
    flex-wrap: wrap;
    gap: 15px 13px;
}
@media screen and (max-width: 900px) {
    .newctListWrap{
        padding: 0;
        flex-wrap: nowrap;
        gap: 0;
    }
}
@media screen and (max-width: 900px) {
    .newCatSwiperOralCare .newctListWrap{
        display: flex;
        justify-content: center;
    }
}


.newcatgory ul li{
    width: 100%;
    /* width: 196px; */
    /* width: 239px; */
    /* width: calc(100% / 5 - 11px); */
    display: inline-block;
    padding:20px 10px;
    /* margin: 6px 3px; */
    text-align: center;
    color: #444;
    /* margin-bottom: 34px; */
    vertical-align: top;
}
#newcatSwiper{
    width: 100%;
}

@media screen and (min-width: 900px) {
    #newcatSwiper{
        background-color: pink;
    }
}

/*スライドが非アクティブのとき,スライドをgridレイアウトに変更*/
#newcatSwiper:not(.swiper-initialized) .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 15px 13px;
}

@media screen and (max-width: 900px) {
    #newcatSwiper:not(.swiper-initialized) .swiper-wrapper {
    display: block;
    }
}

.newcatgory ul li img{ width: 100%; height: auto;}
.newctListin{ width: calc(100% / 5 - 11px);         min-width: 157px;
     background: #fff; padding: 0; box-sizing: border-box; position: relative; display: flex; flex-direction: column; text-align: center; min-height: 157px; justify-content: center;}
@media screen and  (min-width:501px) and ( max-width:900px) {
    .newctListin{
        width: 100%;
        /* min-height: 128px; */
        min-height: 180px;
        padding: 0 0 20px 0;
        min-width: 157px;
    }
}
@media screen and  (min-width:391px) and ( max-width:500px) {
    .newctListin{
        min-height: 150px;
    }
}

@media screen and (max-width: 390px) {
    .newctListin{
        min-height: 128px;
    }
}

.newctListin.new:before{
    content: "";
    width: 35px;
    height: 35px;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    background-image: url(/lab/imgs/newcat-icon-new.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width: 900px) {
.newctListin.new:before{

    top: 5px;
    left: 5px;
}
}

.newctListin::after{
    content: "";
    position: absolute;
    bottom: 3px;
    right: -14px;
    background-color: #E5E5D5;
    display: block;
    height: calc(34px / 2);
    width: 34px;
    clip-path: polygon(50% 0, 50% 100%, 0 100%);
}

.newctListin dt{ font-size: 16px; margin-bottom: 15px; text-align: center;}
.newctListin dd{ font-size: 12px;}
.newctListin dd sup{ font-size: 10px;}

/* new - page category */
.p-catList{
    display: flex;
    align-items: flex-start;
}
@media screen and (max-width: 900px) {
    .p-catList{
        flex-direction: column;
    align-items: center;

    }
}
.p-catList.three{
    gap: 24px;
}
.p-catList.three .p-catItem{
    width: calc(100% / 3);
    padding: 0;
}
@media screen and (max-width: 900px) {
.p-catList.three .p-catItem{
    width: 100%;
    max-width: 400px;
}
}
.p-catItemBody{
    background-color: #fff;
    position: relative;
}

.newcatimg img{
    width: 100%;
}
.newcatname{
    font-feature-settings: "palt";
}
@media screen and (max-width: 900px) {
    .newcatname{
        line-height: 1;
        font-size: 11px;
    }
}

.newcatsup{
    font-size: 8px;
    margin-block-start: 7px;
    text-align: left;
}


.newcatgory .secTits {
    margin-bottom: 25px;
    font-size: 20px;
	text-align: center;
}

.newcatgory .adtxt{ text-align: right; padding-top: 20px; margin-bottom: 30px;}

.slick-dotted.slick-slider{ margin-bottom: 0;}
.slides{width: 100%; height: 100%;}

/*.slides li.slid01{ background: url("../img/main.jpg") center top no-repeat; background-size: cover; width: 100%; height: calc(100vh - 70px);}
.slides li.slid02{ background: url("../img/main2.jpg") center top no-repeat; background-size: cover; width: 100%; height: calc(100vh - 70px);}
*/
.slides li img{ width: 100%; height: auto}
	.ckList.sp{ display: none !important;}
.slick-dotted.slick-slider{ margin-bottom: 0;}

sup{ font-size: 10px; vertical-align: top; line-height: 1;}
.bgDttxt ul li dd sup{ font-size: 10px; vertical-align: top;}
.bgDttxt h3 .smtxt{ font-size: 12px;}
.main {
	position: relative;
	/*height: calc(100vh - 70px);*/
	/*height: 100vh;*/
	width: 100%;
	background-size: cover;
	background: #fff;
	overflow: hidden;
/*	background: url("../img/main.jpg") center bottom no-repeat;*/
	background-size: cover;
	margin-top: 70px;
}

.mainWrapp{ position: relative; /*padding-top: 90px;*/}

/* 商品カテゴリ一覧 */

.contentW{ max-width: 1020px; margin: 0 auto; position: relative; box-sizing: border-box; padding: 0 20px;}
.maintxt {
    position: absolute;
    left: 0;
    top: 143px;
    text-align: center;
	width: 100%;}
.maintxt dt{ font-size: 16px; color: #444444; margin-bottom: 20px;}
.maintxt dt sup{ font-size: 10px; vertical-align: top; }
.maintxt dd{ font-size: 41px; line-height: 53px; color: #222222; font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-weight: normal; letter-spacing: 0.025em;}
.maintxt dd sup{ font-size: 14px; vertical-align: top; padding-top: -10px;}


.mainunderTxt{ font-size: 8px; color: #444444; position: absolute; right: 5px; bottom: 5px; letter-spacing: 0.05em;}




.sideCp{ color: #282A29; font-size: 8px;-ms-writing-mode: tb-rl; writing-mode: vertical-rl;
  writing-mode: vertical-rl; position: absolute; right: 25px; top: 50%; letter-spacing: 0.18em;}




.scroll {
  position: absolute;
  z-index: 1;
  bottom: 40px;
  left: 40px;
  width: 2px;
  height: 62px;
  letter-spacing: 0.08em;
  margin-left: -2px;

}
.scrolltext {
  position: absolute;
  font-weight: 500;
  font-size: 9px;
  bottom: 135px;
  color: #444444;
	right: auto;
  left: 16px;
  letter-spacing: 0.18em;
  text-align: center;
	z-index: 2;
	line-height: 2;

}
.scrolltext{ opacity: 1; transform:translateY(0) rotate(90deg); height: 16px; }
.on .scroll{ opacity: 1; transform:translateY(0);}
.scrolltext:before{content: "";
background: #E4EDF2;
position: absolute;
left: 66px;
z-index: 100;
width: 8px;
height: 8px;
border-radius: 6px 6px 0 0;
margin-left: -3px;
top: 7px;}

::-webkit-full-page-media, :future, :root .scrolltext:before{
top: 5px;}

.scroll:after{background: #818181; width: 2px;}
.scroll:after, .scroll:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1px;
  height: 80%;
  content: ''
}
.scroll:before {
  z-index: 10;
  -webkit-animation: scroll 2.4s infinite normal;
  animation: scroll 2.4s infinite normal;
  background: #ccc;
  width: 8px;
  height: 8px;
  content: '';
width: 7px; height: 7px; border-radius: 50%; background: #1CB5C1;  margin-left: -3px;
}
.spscrBG{ width: 30px; height: 168px; left: 0; bottom: 0; position: absolute; z-index: 1; background: #fff;}

@-webkit-keyframes scroll {
0% {
-webkit-transform:translate3d(0, 0, 0)
}

100% {
-webkit-transform:translate3d(0, 43px, 0)
}
}


.secvitmin{ background: #F4F4EC; box-sizing: border-box; padding: 25px; }
.secvitminIn{ border: 10px solid #fff; width: 100%; height: 100%; box-sizing: border-box;}


.secvtit .vttit{ font-size: 10px; letter-spacing: 0.18em; margin-bottom: 20px;}
.secvtit .vttit:before{ content: ""; display: inline-block; width: 7px; height: 7px; background: #EECA2D; border-radius: 50%; margin-right: 8px;}
.pt02 .secvtit .vttit:before{ background: #1CB5C1}
.pt03 .secvtit .vttit:before{ background: #e62f60}
.pt04 .secvtit .vttit:before{ background: #2c901b}
.p2ptn .secvtit .vttit:before {
    background: #EECA2D;
}

.secvtit dt{font-size: 16px; font-weight: 500;  margin-bottom: 15px;}

.secvtit dt sup{ font-size: 10px; vertical-align: top;}

.secvtit dd{font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-size: 35px; color: #444444; line-height: 37px;}
.secvtit dd.namemins{ font-size: 28px;}

.secvtit dd.sab{ font-size: 24px;}
.secvtit dd.sab.sabpt2{ font-size: 20px;}

.secvtit dd  sup{ font-size: 14px; vertical-align: top;}


.secvBtn a{ border: 1px solid}

/*.vtm01{ background: url("../img/product01.png") left center no-repeat; background-size: 240px;}*/
.secvitmin{ overflow: hidden;}

.secvitminImg{ width: 240px; position: absolute; left: 20px; top: -260px;}
/*.secvitminImg:before{ content: ""; display: block; width: 13px; height: 13px; border-radius: 50%; border: 1px solid #707070; position: absolute; top: 50%; right: 40px;}
.secvitminImg:after{ content: "";
    display: block;
    width: 71%;
    height: 1px;
    background: #707070;
    position: absolute;
    top: 51%;
    right: -125px;}*/

.harfconterapp{ font-size: 0; letter-spacing: 0;}
.harfservitin{ background: #F8F8E1; display: inline-block;}
.harfservitin{ width: 50%;}

.balackwaps .harfservitin{ background: #E8E8E8; }

.balackwaps .secvtit dd.sab {
    font-size: 16px;
}

.balackwaps .secvtit dd {
    font-size: 22px;
	line-height: 30px;
}

.balackwaps .secvtit .vttit:before{ background: #000;}


.harfservitin .vtcontent {
    width: 52%;
}

.harfservitin .ckList {
    display: block !important;
    width: 100%;
	margin-top: 20px;
}


.harfservitin .secvtit {
    display: block;
    width: 100%;
    vertical-align: top;
    padding-right: 40px;
}

.vtm02_1 .secvitminImg {
    width: 240px;
    position: absolute;
    left: 20px;
    top: 150px;
}

/*vtm02_1 .secvitminImg:after {
    content: "";
    display: block;
    width: 140px;
    height: 1px;
    background: #707070;
    position: absolute;
    top: 53%;
    right: -91px;
}*/

.secvitmin.pt05{ background: #EEECF4}

.pt05 .secvtit .vttit:before {
    background: #5B50BE;
}

.pt05 .secvitminImg {
    width: 240px;
    position: absolute;
    left: 20px;
    top: 81px;
}

.pt05 .secvitminImg:before { top: 48%;}


.pt02 .secvitminImg:before{  left: 40px;}
.pt02 .secvitminImg:after{ content: "";
    top: 51%;
	right: auto;
    left: -125px;}

.pt04 .secvitminImg:before{  left: 40px;}
.pt04 .secvitminImg:after{ content: "";
    top: 51%;
	right: auto;
    left: -125px;}

.secvitminImg img{ width: 100%; height: auto;}
.secvtit{  display: inline-block ;  width: 52%; vertical-align: top; padding-right: 40px; box-sizing: border-box;}
.ckList{display: inline-block !important; width: 48%; vertical-align: top; background: #F0EFE4; box-sizing: border-box; border: 1px solid #fff;}
.vtcontent{ width: 64%; margin-left: auto; padding: 70px 0; font-size: 0; letter-spacing: 0;}
.secvBtn a { width: 100%; background: #fff; display: block; text-align: center; font-size: 12px; letter-spacing: 0.18em; padding: 12px 0; margin-top: 25px;}

.ckList h3{ font-size: 14px; letter-spacing: 0.06em; padding: 15px; border-bottom: 1px solid #fff;}
.ckList h3:before{content: "CHECK"; font-size: 8px; font-weight: 600; background: #fff; border-radius: 6px; padding: 10px; margin-right: 7px;}
.ckList ul{ padding: 15px; box-sizing: border-box; }
.ckList ul.taLeft{ text-align: left; padding-left: 50px;}
.ckList ul.taLeft li{ width: 46%;}

.ckList li{ font-size: 16px; color: #444444; margin-bottom: 15px;}
.ckList li:before{ content: ""; display: inline-block; width: 21px; height: 21px; display: inline-block; background: #fff; vertical-align: middle; border-radius: 50%; margin-right: 10px;}


.secvitmin.pt02{ background: #ECF2F4;}
.secvitmin.pt03{ background: #f4ecec;}
.secvitmin.pt04{ background: #eff4ec;}

.secvitmin.p2ptn{ background: #FAFAEA;}

.pt02 .secvitminImg {
    position: absolute;
    left: auto;
	right: 20px;
}

.pt02 .vtcontent{ margin-left: 0;}

.pt04 .secvitminImg {
    position: absolute;
    left: auto;
	right: 20px;
}

.pt04 .vtcontent{ margin-left: 0;}

.pt02 .ckList{ background: #E4EDF0;}
.pt03 .ckList{ background: #fbe8e8;}
.pt04 .ckList{ background: #dce4d8;}
.p2ptn .ckList {
    background: #F0EFE4;
}
/* ピックアップ */
.pickup{
    box-sizing: border-box;
    margin-top: 27px;
    margin-bottom: 64px;
}
@media screen and (max-width: 900px) {
    .pickup{
        margin-top: 72px;
    }
}
@media screen and (max-width: 900px) {
    .pickup .contentW{
        padding: 0 30px;
    }
}
.pickup .secTits{
    margin-bottom: 50px;
}
@media screen and (max-width: 900px) {
    .pickup .secTits{
        margin-bottom: 26px;
    }
}
.pickup__content{
    background-color: #F8F8F8;
    padding: 50px 100px;
}
@media screen and (max-width: 900px) {
    .pickup__content{
        padding: 30px 14px;
    }
}

.pickup__inner{
    position: relative;
    display: flex;
    gap: 53px;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 900px) {
    .pickup__inner{
        flex-direction: column;
        gap: 25px;
    }
}

.pickup__image{
    flex-shrink: 0;
}
.pickup__image img{
    max-width: 200px;
    width: 100%;
}

@media screen and (max-width: 900px) {
    .pickup__image img{
        max-width: none;
    }
}

.pickup__body{
    position: relative;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media screen and (max-width: 900px) {
    .pickup__body{
        gap: 25px;
    }
}

@media screen and (max-width: 900px) {
    .pickup__detail{
        gap: 25px;
        text-align: center;
    }
}
.pickup__title{
    font-size: clamp(16px, 1.38vw, 20px);
    text-align: left;
    position: relative;
    line-height: 1;
}
@media screen and (max-width: 900px) {
    .pickup__title{
        display: flex;
        align-items: center;
        gap: 8px;
    }
}
.pickup__new{
    position: absolute;
    top: 50%;
    left: -102px;
    transform: translateY(-50%);
}

@media screen and (max-width: 900px) {
    .pickup__new{
        position: static;
        transform: translateY(0);

    }
}
.pickup__new img{
    max-width: clamp(40px, 5.2vw, 76px);
}
.pickup__text{
    font-size: clamp(13px, 1.0vw, 15px);
    text-align: left;
    line-height: 2;
}
@media screen and (max-width: 900px) {
    .pickup__text{
        line-height: 1.7;

    }
}
.pickup__detail{
    font-size: 10px;
    text-align: left;
    line-height: 1.5;
}

.pickup__link{
    position: absolute;
    right: 0;
    bottom: -54px;
    font-size: 12px;
    line-height: 2.5;
    padding: 0.2em 0;
    border: solid 1px #919190;
    display: inline-block;
    width: 146px;
    /* max-width: 146px; */
    margin-left: auto;
    text-align: center;
}
@media screen and (max-width: 901px) {
    .pickup__link{
        position: static;
        margin: 0 auto;
    }
}
.pickup__button{
    position: relative;
    overflow: hidden;
    transition: letter-spacing 0.3s ease;
}
.pickup__button:hover{
    letter-spacing: 0.1em;
}
.pickup__button:after{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -55px;
    width: 35px;
    height: 1px;
    background-color: #919190;
    transform-origin: left center;
    animation: line-draw 1.5s linear infinite;
}

@keyframes line-draw {
    0% {
        transform: translateY(-50%) scaleX(0);
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      100% {
        transform: translateY(-50%) scaleX(1);
        opacity: 0;
      }
  }

.consept{ box-sizing: border-box; border: 30px solid #fff;
	background: url("../img/bg_cp.png") center bottom no-repeat #fff; background-size: cover;  padding: 90px 0 85px;  }

    .lab .consept{
        padding: 90px 0 191px;
    }
    @media screen and (max-width: 900px) {
        .lab .consept{
            padding: 90px 0 85px;
        }
    }
    .lab .consept .secTits{
        margin-bottom: 63px;
    }

    @media screen and (max-width: 900px) {
        .lab .consept .secTits{
            margin-bottom: 30px;
        }
    }

.lab .conceptLabel{
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.2em;
    text-align: center;
    margin-bottom: 6px;
    color: #444444;
    font-weight: 500;
}

.secTits{ font-size: 28px; letter-spacing: 0.18em; text-align: center; color: #444444; margin-bottom: 40px;}
.secTitsSub{font-size: 15px;}
@media screen and (max-width: 900px) {
    .secTitsSub{
        font-size: 17px;
        margin-bottom: 30px;
    }
}
.consepttit{ font-size: 24px; color: #444444; text-align: center; font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;  margin-bottom: 60px;}
.lab .consept .consepttit{
    margin-bottom: 30px;
    line-height: 2;
    padding-top: 0;
}

.sabtitTxt{ background: #fff; color: #444444; text-align: center; max-width: 700px; border-radius: 10px; margin: 0 auto; padding: 25px 0; letter-spacing: 0.06em;  }
.lab .sabtitTxt{
    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 2;
    border-radius: 12px;
    padding: 26px 0 25px;
}
.lab .atdtxtft{
    margin-bottom: 0;
    letter-spacing: 0.04em;
}
.sabtitTxt dt{ font-size: 15px;}
.sabtitTxt dd{ font-size: 18px;}

.consepttit{padding-top: 45px;}

.cpdtTxt{ text-align: center; color: #444444; font-size: 15px; line-height: 30px; letter-spacing: 0.06em; padding-top: 40px;}
.lab .cpdtTxt{
    font-size: 15px;
    line-height: 2;
    padding-top: 34px;
    letter-spacing: 0.04em;
}
.consept sup{ font-size: 12px; vertical-align: top;}
.lab .consepttit sup,
.lab .cpdtTxt sup{
    font-size: 0.645em;
    position: relative;
    top: 0.70em;
}

.contits{ position: relative;}
/*.contits:before{}


.contits:before{ content: ""; display: block; width: 13px; height: 13px; border-radius: 50%; border: 1px solid #707070; margin: 0 auto; position: absolute; left: 50%; margin-left: -7px; top: 95px;}
.contits:after{ content: "";
    display: block;
    width: 1px;
    height: 55px;
    background: #707070;
	margin: 0 auto;
	margin-top: 25px;

    }*/


.featuresCon{ background: #FAFAFA; padding: 80px 0;}
.lab .featuresCon{
    padding: 70px 0;
}
.fttit{ font-size: 28px; text-align: center; letter-spacing: 0.06em; }

.fttit span{border-bottom: 1px dashed #666666; padding-bottom: 20px;}
.bltxtc{ font-weight: 600;}

.fttxts{ text-align: center; font-size: 15px; line-height: 30px; letter-spacing: 0.06em; padding-top: 40px; margin-bottom: 40px;}
.lab .fttxts{
    margin-bottom: 0;
}

.pointtit{ max-width: 690px; margin: 0 auto; position: relative; z-index: 1;}
.pointtit img{ width: 100%; height: auto;}
.pointList{ display: flex; margin-top: -10px;}
.pointList li{ width: 33%; border-radius: 20px; border: 4px solid #fff; padding-bottom: 20px; margin-right: 40px;}
.pointList li img{ width: 100%; height: auto;}

.pointList li dt{ font-size: 20px; text-align: center; padding: 20px 0; border-bottom: 4px solid #fff;}
.pointList li dd{ padding: 30px 25px; box-sizing: border-box; font-size: 13px; line-height: 21px; letter-spacing: 0.06em;}

.pointList li dd:first-child{ padding-bottom: 25px;}

.pointList li:last-child{ margin-right: 0;}

.pointatdtxt{ background: url( "../img/aftertit.svg") center top no-repeat; text-align: right; padding: 50px 0 10px; height: 42px;}


.pointfoot{ background: #FAFAFA; padding-top: 40px;}
.lab .pointfoot{
    padding: 0;
}
.imgmount{ background: #E6E6E6; padding: 75px 0 80px; position: relative;}
.imgmount:before{ content: ""; display: block; width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 16px solid #fafafa; position: absolute; top: 0; left: 50%; margin-left: -17px;}


.mtimgpc img{ width: 100%; height: auto;}

.vitminDetail{ background: #F8F8F5}


.vitminDetail.pnnkbgpt .icnpdimg{
    position: relative;
}
.products__logo{
position: absolute;
    width: 74px;
    left: 12px;
}
.products__logo--first{
    top: 12px;
}




.fitImg{
    position: absolute;
}
.box{
	margin-bottom: 120px;
	overflow: hidden;
	position: relative;
}

.fitMovie{
	position: absolute;
}

.box__centered{
	left: 50%;
	position: absolute;
	top: 50%;
}

.box__contents{
	text-align: center;
	transform: translate(-50%,-50%);
}

	.video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.mvtxt{ max-width: 995px; margin: 0 auto; position: relative; z-index: 100; padding-top: 35vh; }
.mvtxt p {font-size: 130px; color: #ff4b46; /*mix-blend-mode: screen;*/ line-height: 1; font-weight: 700; opacity: 0.7; font-style: italic; letter-spacing: 0.05em;}
.mvtxt p:nth-child(2){ text-align: right;}
.mvtxt p.reads{ text-align: center; padding-top: 40px; font-size: 29px; opacity: 1; color: #fff; font-weight: 400; font-style: normal;}



.massege{ margin-bottom: 95px;}
.massege .inner{ padding-top: 100px; position: relative;}
.inner{ max-width: 1035px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
.sectit{ color: #ff4b46; font-size: 16px; letter-spacing: 0.185em; font-weight: 500; border-left: 3px solid #ff4b46; height: 50px; line-height: 50px; padding-left: 40px; margin-bottom: 45px;}

.messsTxt{ width: 64%; margin-left: 40px; }
.messsTxt dt{ font-size: 26px; line-height: 41px; font-weight: 400; margin-bottom: 50px; letter-spacing: 0.025em;}
.messsTxt dd{ font-size: 14px; line-height: 26px; font-weight: 500; letter-spacing: 0.185em;}


.massImg{width: 83%;  margin-top: 50px;}
.massImg img{ width: 100%; height: auto;}
.massImgsab{ position: absolute; right: 40px; bottom: 200px; width: 26.6%;}
.massImgsab img{ width: 100%; height: auto;}


.sidesstits{  writing-mode: vertical-rl;
font-size: 107px;
    color: #ff4b46;
    line-height: 1;
    font-weight: 700;
    opacity: 0.7;
    letter-spacing: 0.05em;
white-space: nowrap;
position: absolute; right: -90px; top: 100px;
word-break: break-word}



.about .inner{ max-width: 1346px; margin: 0 auto; box-sizing: border-box; padding: 0 20px; margin-top: -130px;}
.aboutmain img{ width: 100%; height: auto;}

.aboutreadImg{ width:33%; display: inline-block; vertical-align: top;}

.aboutreadImg img{ width: 100%; height: auto;}
.abouttxtwrapp{ width: 62%; display: inline-block; vertical-align: top; box-sizing: border-box; padding-left: 40px; padding-top: 80px; }
.aboutreadImg{ margin-left: 40px;}

.abouttits{font-size: 107px;
    color: #ff4b46;
    line-height: 1;
    font-weight: 700;
    opacity: 0.7;
    letter-spacing: 0.05em;
/*white-space: nowrap;*/
    margin-bottom: 45px;
}

.aboutList{ font-size: 0; letter-spacing: 0;}
.aboutList li{ display: inline-block; font-size: 24px; font-weight: 600; width: 50%;}
.aboutList li:nth-child(1):before{ content: "01"; display: inline-block; font-size: 34px; vertical-align: middle; margin-right: 20px;}
.aboutList li:nth-child(2):before{ content: "02"; display: inline-block; font-size: 34px; vertical-align: middle; margin-right: 20px;}
.aboutList li:nth-child(3):before{ content: "03"; display: inline-block; font-size: 34px; vertical-align: middle; margin-right: 20px;}
.aboutList li:nth-child(4):before{ content: "04"; display: inline-block; font-size: 34px; vertical-align: middle; margin-right: 20px;}

.aboutlistIn{ position: relative; overflow: hidden;}
.listIMh{ width: 52%; position: absolute; right: 0; bottom: 0;}
.listIMh img{ width: 100%; height: auto;}

.aboutlistIn .aboutTxt{ background: #fff; box-sizing: border-box; padding: 80px 12% 0 0;}

.aboutlist{ margin-top: 90px;}

.aboutinner{ padding-top: 100px;}

.aboutinner{ max-width: 1035px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; position: relative; z-index: 10; padding-top: 100px;}
.aboutTxt{ background: #fff; padding: 40px 80px; box-sizing: border-box; width: 61%;}
.aboutTxt dt{ font-size: 36px; margin-bottom: 30px; color: #ff4b46; font-weight: 600; letter-spacing: 0.025em;}
.aboutTxt dd{ font-size: 14px; line-height: 30px; letter-spacing: 0.018em;}

.aboutlistIn{ margin-bottom: 70px;}


.secondlist .listIMh{ width: 52%; position: absolute; right: auto; left: 0; bottom: 0;}

.secondlist .aboutTxt{ margin-left: auto;}

.career{ background: #ff8581; padding-top: 86px; position: relative; padding-bottom: 80px; margin-bottom: 70px;}

.career .sectit {
    color: #fff;
    font-size: 16px;
    letter-spacing: 0.185em;
    font-weight: 500;
    border-left: 3px solid #fff;
    height: 50px;
    line-height: 50px;
    padding-left: 40px;
    margin-bottom: 45px;
}

.careerread{ font-size: 27px; line-height: 48px; font-weight: 600; margin-bottom: 45px;}



.career .sidesstits {
    writing-mode: vertical-rl;
    font-size: 107px;
    color: #fff;
    line-height: 1;
    font-weight: 700;
    opacity: 0.7;
    letter-spacing: 0.05em;
    white-space: nowrap;
    position: absolute;
    right: auto;
    left: -15px;;
    top: 100px;
}

.careercontent{ font-size: 0;  margin-bottom: 60px; letter-spacing: 0;}
.careerimgs{ width: 46%; display: inline-block; vertical-align: top;}
.careerimgs img{ width: 100%; height: autol}

.careerconTxt{ font-size: 16px; line-height: 36px; display: inline-block; vertical-align: top; width: 54%; box-sizing: border-box; padding-left: 60px;}



.careertxt{ width: 100%; background: #fff; border-radius: 20px; font-size: 24px; text-align: center; padding: 45px 0; font-weight: 600; letter-spacing: 0.018em; position: relative; margin-bottom: 130px;}

.careertxt:after{content: ""; display: block; width: 118px; height: 98px; background: url("../imgs/arrow.svg") left center no-repeat; position: absolute; left: 50%; margin-left: -59px; bottom: -110px;}

.careertxt.pt2{ background: transparent; border: 2px solid #cccccc;}

.careertxtdl {
    font-size: 18px;
    margin-top: -100px;
    margin-bottom: 50px;
}

.careertxtdl dl{ margin-bottom: 5px;}
.careertxtdl dt{ display: inline-block; vertical-align: top; font-weight: bold; margin-right: 30px;}
.careertxtdl dd{ display: inline-block; vertical-align: top;}


.txtwrapp{ position: relative;}

.list{ font-size: 0; letter-spacing: 0;}
.list li{ display: inline-block; width: 50%; font-size: 24px; vertical-align: top; padding-right: 10px; box-sizing: border-box; font-weight: 600;}
.list li span{ background: #fff; vertical-align: top; text-align: center; border-radius: 20px; height: 114px; display: block; padding-top: 10px; box-sizing: border-box;}
.list li.listsecond  span{ line-height: 114px;}

.list li.listsecond { padding-left: 10px;}
.dtwrapps{ font-size: 0; letter-spacing: 0;}
.deimgcon{ width: 37%; display: inline-block; vertical-align: top;}
.dttxtcon{ width: 63%; display: inline-block; vertical-align: top; box-sizing: border-box; padding-left: 50px;}
.deimgcon img{ width: 100%; height: auto;}

.vitminDetail{ padding: 80px 0;}
.vitminDetail .howTit{ margin-bottom: 80px;}
.deimgcon dl{ margin-top: 30px;}
.deimgcon dl dt{ color: #666; font-size: 12px; border: 1px solid #666; box-sizing: border-box; padding: 10px; margin-bottom: 5px;}
.deimgcon dl dd{ font-size: 10px; line-height: 16px; color: #888888;}

.dttxtcon h2{ font-size: 20px; color: #222; border-bottom: 1px dashed #666666; padding-bottom: 15px; margin-bottom: 15px;}

.dtread{ font-size: 14px; line-height: 22px; letter-spacing: 0.06em; color: #444; margin-bottom: 20px;}

.dtpointtxt{ font-size: 18px; letter-spacing: 0.025em; color: #444444; vertical-align: middle; }
.dtpointtxt span{ background: #F0EFE4; border: 1px solid #fff; border-radius: 10px; padding: 10px 15px; margin-right: 10px;}

.pplBg .dtpointtxt span{ background: #E2CBF4; border: none;}

.dtpointtxt span.dtxtxnoBg{ display: inline-block; padding: 0; background: none; border: none; vertical-align: top; line-height: 1;}

.dtsabTxt{ font-size: 13px; line-height: 20px; letter-spacing: 0.06em; padding-top: 20px; margin-bottom: 20px;}

.bgDttxt{ background: #fff; box-sizing: border-box; padding: 30px 40px; font-size: 0; letter-spacing: 0; margin-bottom: 30px;}
.bgDttxt h3{ font-size: 18px; text-align: center; margin-bottom: 40px}

.bgDttxt ul li{ width: 50%; display: inline-block; vertical-align: top;}
.bgDttxt ul li dt{ display: inline-block; width: 50%; vertical-align: top; padding-right: 20px; box-sizing: border-box;}
.bgDttxt ul li dt img{ width: 100%; height: auto;}
.bgDttxt ul li dd{ display: inline-block; width: 50%; vertical-align: top; font-size: 13px; line-height: 20px;}

.dtsatd{font-size: 10px; color: #888888; padding-top: 20px;}

.dttxtcon .ckList{ width: 100%;}
.dttxtcon .ckList li{ display: inline-block; margin-right: 20px;}


#plaenta{ background: #F5F5F5;}
#plaenta .dtpointtxt span{background: #E4EDF0}
#plaenta .ckList{background: #E4EDF0;}

#r_essence{ background: #FFF9FA;}
#r_essence .dtpointtxt span{background: #E4EDF0}
#r_essence .ckList{background: #fbe8e8;}

#cm_essence{ background: #eff5ef;}
#cm_essence .dtpointtxt span{background: #E4EDF0}
#cm_essence .ckList{background: #dce4d8;}


.pplBg .ckList{background: #E2CBF4;}
.pnnkbgpt .dtpointtxt span{ background: #FFBABB}


.dtimgs { font-size: 0; letter-spacing: 0;}
.dtimgs dt{ width: 35%; display: inline-block; vertical-align: top; font-size: 13px; text-align: right; margin-right: 5%;}
.dtimgs dd{ width: 60%; display: inline-block; vertical-align: top;}
.dtimgs dd img{ width: 100%; height: auto;}
.howto{ padding: 80px 0 70px;}
.howto .adtxt{
    text-align: center;
}
@media screen and (max-width: 500px) {
    .howto .adtxt{
        text-align: left;
        margin-top: 20px;
    }
}

.howTit{ font-size: 28px; text-align: center; letter-spacing: 0.18em; margin-bottom: 20px;}
.howread{ font-size: 15px; text-align: center; letter-spacing: 0.06em;}

.howtoin dl{ width: 43%; display: inline-block; vertical-align: top;}
.howtoin dl img{ width: 100%; height: auto;}
.howtoin { font-size: 0; padding-top: 80px; letter-spacing: 0;}
@media screen and (max-width: 500px) {
    .howtoin{
        padding-top: 33px;
    }
}
.howtoin .txtcontent{ width: 57%; display: inline-block; vertical-align: top; box-sizing: border-box; padding-left: 60px;}
.howtoin .txtcontent h3{ font-size: 20px; margin-bottom: 40px;}
.howtoin .txtcontent li dt{ font-size: 12px; vertical-align: middle;}
.howtoin .txtcontent li dd{ font-size: 16px; vertical-align: middle; padding-top: 10px;}

.txtcontent h3{ background: #F8F8F0; border-radius: 10px; padding: 15px; width: 100%; text-align: center; vertical-align: middle;}
.txtcontent h3:before{ content: "POINT"; display: inline-block; width: 61px; height: 61px; background: #fff; border-radius: 50%; border: 1px solid #444; font-size: 11px; line-height: 60px; margin-right: 25px;}
.txtcontent li dt{ font-size: 12px;}
.txtcontent li dd{ font-size: 18px;}
.txtcontent li{ border-bottom: 1px dashed #444;}
.txtcontent li .steplistIn:before{ content: ""; display: inline-block; width: 62px; height: 50px; margin-right: 20px; vertical-align: middle;  vertical-align: middle;}

.txtlinecon{ padding-left: 45px; position: relative;}
.txtlinecon:before{ content: ""; display: block; width: 13px; height: 100%; background: url("../img/line.svg") left bottom no-repeat; position: absolute; left: 0; bottom: 0;}
.txtlinecon:after{content: "STEP"; display: block; position: absolute; left: 0; top: 0; font-size: 10px;     -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl; letter-spacing: 0.18em;}

.txtcontent li{ padding: 5px 0;}
.txtcontent li.setep01 .steplistIn:before{ background: url( "../img/steimg01.png") center center no-repeat; background-size: contain;}
.txtcontent li.setep02 .steplistIn:before{ background: url( "../img/steimg02.png") center center no-repeat; background-size: contain;}
.txtcontent li.setep03 .steplistIn:before{ background: url( "../img/steimg03.svg") center center no-repeat; background-size: contain;}
.txtcontent li.setep04 .steplistIn:before{ background: url( "../img/steimg04.svg") center center no-repeat; background-size: contain;}


.txtcontent li .steplistIn{  padding: 15px 5px; border-radius: 10px;}
.steplistIn dl{ width: calc(100% - 90px);}

.txtcontent li.setep02 .steplistIn{background: #F8F8F0;}
.hoetoatd{ color: #888888; font-size: 11px; padding-top: 5px;}

.expertTalk{ background: #FAF8F4; padding: 80px 0;}

.wptsabtit{ background: #fff; border-radius: 20px; padding: 25px 35px; box-sizing: border-box; margin-top: 60px; margin-bottom: 30px;}
.wptsabtit dl{ color: #444; display: inline-block; vertical-align: middle; margin-left: 40px;}
.wptsabtit dt{ font-size: 17px; margin-bottom: 10px;}
.wptsabtit dd{ font-size: 26px; }

.exTits{ width: 76px; height: 76px; border: 1px solid #888; border-radius: 50%; text-align: center; color: #888; padding-top: 15px; box-sizing: border-box; display: inline-block; vertical-align: middle;}


.uvtsabtit{ background: #F2F0EC; border: 1px solid #fff; margin-bottom: 40px;}
.uvredtxt{ font-size: 15px; line-height: 26px; letter-spacing: 0.06em; width: calc(100% - 150px); display: inline-block; vertical-align: middle; padding-left: 30px; box-sizing: border-box;}
.uvTits { padding: 25px 35px; border-right: 1px solid #fff; width: 120px; display: inline-block; box-sizing: border-box;}
.uvTits img{ width: 50px; height: auto;}

.profcoment{ font-size: 0; letter-spacing: 0;}
.prof{ width: 45%; display: inline-block; vertical-align: top; font-size: 0; box-sizing: border-box; padding-right: 35px; letter-spacing: 0; }
.profImg{ width: 37%; display: inline-block; vertical-align: top; padding-right: 20px; box-sizing: border-box;}
.profImg img{ width: 100%; height: auto;}
.proftxt{ width: 63%; display: inline-block; vertical-align: top;}

.proftxt dt{ font-size: 22px; letter-spacing: 0.06em; margin-bottom: 20px;}
.proftxt .yakusyoku{ font-size: 14px; line-height: 22px;}
.proftxt .name{ font-size: 18px; }
.prfTxts{ font-size: 13px; line-height: 20px; letter-spacing: 0.06em; padding-top: 30px;}

.coments{ width: 55%; display: inline-block; vertical-align:top; padding-left: 40px; box-sizing: border-box; border-left: 1px dashed #BABABA}
.coments dt{ font-size: 26px; line-height: 40px; margin-bottom: 40px;}
.coments dd{ font-size: 15px; line-height: 26px;}
.coments dd.comentAtd{ font-size: 11px; color: #888888; padding-top: 31px;}


.shopList{ background: #F5F5F5; padding: 80px 0;}
.shopLIsts{ font-size: 0; letter-spacing: 0;  width: calc(100% + 20px); padding-top: 60px; letter-spacing: 0;}
.shopLIsts li{ width: 25%; display: inline-block; vertical-align: top; padding-right: 20px; margin-bottom: 20px; box-sizing: border-box;}
.shopLIsts li img{ width: 100%; height: auto;}

.navfootList{ text-align: center; font-size: 0; letter-spacing: 0;}
.navfootList li{ display: inline-block; width: 25%; vertical-align: middle; font-size: 11px; letter-spacing: 0.18em; border-right: 1px solid #E2E2E2; box-sizing: border-box;}
.navfootList li:last-child{ border-right: none;}

.contactcon{ padding: 60px 0;}
.navfootList{ border-bottom: 1px solid #E2E2E2; padding-bottom: 60px; margin-bottom: 60px;}

.contactbtn{ text-align: center;}
.contactbtn dt{ font-size: 13px; letter-spacing: 0.06em; margin-bottom: 20px;}

.contactbtn a{ border: 1px solid #444444; font-size: 13px; box-sizing: border-box; padding: 25px 95px; display: block; max-width: 274px; margin: 0 auto; box-sizing: border-box;
}

.footer{ background: #F2F4F8; padding: 60px 0; position: relative;}
.footer h3{ width: 116px;}
.footer h3 img{ width: 100%; height: auto}
.footer p{ font-size: 9px; text-align: right; }
.iscpcon{ position: absolute; right: 0; top: 0;}

.secvBtn a span:after{ content: ""; display: inline-block; width: 6px; height: 3px; background: url("../img/arw.svg") left center no-repeat; margin-left: 20px; background-size: cover;transform: rotateZ(-95deg);
    vertical-align: middle;}
.howtoin .txtcontent h3{ position: relative;}
	.howtoin .txtcontent h3:after{content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 16px solid #F8F8F0;
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -17px;}
.imgWpc{ position: relative;}

.ckList{ position: relative}
.notxts{ font-size: 12px; position: absolute; bottom: -50px; width: 100%; text-align: center;}
.fukidasitxts{ position: relative;}
/*.fukidasitxts:before{ content: "";   border-right: 50px solid transparent;
  border-bottom: 86.6025px solid #FAF4F4;
  border-left: 50px solid transparent; position: absolute; right: 0; top: -20px;}*/
.bnimg{ display: inline-block; vertical-align: bottom; width: 40%; margin-top: 30px;}
.bnimg img{ width: 100%; height: auto;}
.bntxtxs{ display: inline-block; width: 55%; font-size: 10px;}

@media screen and (min-width:901px) {
.imgWpc:before{ content: ""; display: block; width: 218px; height: 105px; background: url( "../img/fukidashi.svg") left top no-repeat; position: absolute; right: 20px; bottom: 20px; z-index: 10;}


}

.atdrtdtx{ background: #FAF4F4; border-radius: 10px; color: #C94646; font-size: 13px; text-align: center; padding: 5px 0; margin-top: 5px;}
.adgbgt{ font-size: 20px;}

@media screen and (max-width:900px) {
	.slick-dots{ display: none;}
	.scrolltext {
    position: absolute;
    font-weight: 500;
    font-size: 9px;
    bottom: 107px;
    color: #444444;
    right: auto;
    left: -11px;
    letter-spacing: 0.18em;
    text-align: center;
    z-index: 2;
		height: 17px;
}
.scroll {
    position: absolute;
    z-index: 2;
    bottom: 16px;
	left: 15px;}


	.ckList.sp{ display: block !important;}
	.pc{ display: none !important;}
	.sp{ display: block !important;}
	.spmain{ width: 100%;}
	.spmain img{ width: 100%; height: auto;}
	.main {
    /*position: relative;
    height: auto;
    width: 100%;
    background: none;*/
		/*background: url("../img/mainsp.jpg") center bottom no-repeat;
		background-size: cover;*/
		margin-top: 70px;
		height: auto;
}
.mainWrapp {
    position: relative;
    /*padding-top: 66px;*/
}
.mainread {
    font-size: 10px;
    line-height: 16px;
    left: 113px;
    top: 20px;
	line-height: 12px;
	color: #fff;
}
.mainlogo {
    width: 66px;
    left: 20px;
    margin-left: 0;
    top: 130px;
}

	#maincon .contentW{ position: static;}
	.maintxt {
    position: absolute;
    left: 0;;
    top: 135px;
		width: 100%;
		text-align: center;
}
.maintxt dt {
    font-size: 14px;
    color: #000;
    margin-bottom: 15px;
}
.maintxt dd {
    font-size: 34px;
    line-height: 36px;
	color: #000;
}
.secvitminImg {
    width: 164px;
    position: absolute;
    left: -80px;
    top: -70px;
}
	.secvtit .vttit {
    margin-bottom: 10px;
}
.secvtit {
    width: 100%;
    padding-right: 0;
}
.secvitminImg:before {
    display: none
}
.secvitminImg:after {
    display: none
}
.vtcontent {
    width: 70%;
    margin-left: auto;
    padding: 30px 0;
}
.secvtit dt {
    font-size: 12px;
    margin-bottom: 15px;
}
.secvtit dd {
    font-size: 23px;
    line-height: 30px;
}
.secvtit dd.sab {
    font-size: 16px;
}

.ckList {
    display: block;
    width: 100%;
    vertical-align: top;
	margin-top: 20px
}
.ckList h3 {
    font-size: 12px;
    padding: 10px;
}
.ckList h3:before {
    border-radius: 6px;
    padding: 5px;
    margin-right: 5px;
}
.ckList li {
    font-size: 12px;
    margin-bottom: 10px;
}
.ckList li:before {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}
.secvitmin {
    padding: 20px;
}
.pt02 .secvitminImg {
    right: -60px;
}
.pt04 .secvitminImg {
    right: -60px;
}

.consept {
    box-sizing: border-box;
    border: 16px solid #fff;
    background: url("../img/bg_cp_sp.png") center bottom no-repeat;
    background-size: cover;
    padding: 90px 0 85px;
}
.contits:before {
	display: none;}
.contits:after {
	display: none;}


	.secTits {
    font-size: 22px;
}

.lab .conceptLabel{
    font-size: 13px;
    letter-spacing: 0.2em;
    margin-bottom: 4px;
}

.consepttit {
    font-size: 18px;
    margin-bottom: 30px;
	padding-top: 0;
    line-height: 2;
}
	.sabtitTxt dt {
    font-size: 12px;
}
.sabtitTxt dd {
    font-size: 14px;
}

.sabtitTxt {
    padding: 20px 0;

}
.lab .sabtitTxt{
    max-width: 303px;
    padding: 20px 16px;
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0;
}
.cpdtTxt {
    text-align: left;
    color: #444444;
    font-size: 15px;
    line-height: 2;
    padding-top: 34px;
}
.lab .cpdtTxt{
    letter-spacing: 0.04em;
}
.lab .atdtxtft{
    font-size: 10px;
    line-height: 2;
    letter-spacing: 0.04em;
}
.fttit {
    font-size: 22px;
    text-align: center;
    letter-spacing: 0.06em;
}
.featuresCon {
    padding: 60px 0;
}
.fttxts {
    text-align: center;
    font-size: 13px;
    line-height: 22px;
    letter-spacing: 0.06em;
    padding-top: 40px;
    margin-bottom: 40px;
}
.pointList {
    display: block;
    margin-top: 0;
	position: relative;
}
.pointList li {
    width: 100%;
    border-radius: 20px;
    border: 4px solid #fff;
    padding-bottom: 20px;
    margin-right: 0;
}
	.pointList:before{ content: ""; display: block; width:139px; height: 139px; background: url("../img/pointsp.svg") left top no-repeat; background-size: cover; margin: 0 auto; margin-bottom: 36px;}

.pointList:after{ content: ""; display: block; width: 12px; height: 78px; position: absolute; margin-left: -6px; left: 50%; top: 115px; background: url("../img/linesp.svg") left top no-repeat;}

	.pointList li dt {
    font-size: 16px;
    text-align: center;
    padding: 18px 0 14px;
    border-bottom: 4px solid #fff;
}
	.pointList li{ position: relative; margin-bottom: 58px;}
	.pointList li:nth-child(1):before{ content: ""; display: block; width: 85px; height: 85px; background: url("../img/point01sp.svg") left top no-repeat; background-size: contain; position: absolute; left: 0; top: -40px;}

		.pointList li:nth-child(2):before{ content: ""; display: block; width: 85px; height: 85px; background: url("../img/point02sp.svg") left top no-repeat; background-size: contain; position: absolute; left: 0; top: -40px;}

			.pointList li:nth-child(3):before{ content: ""; display: block; width: 85px; height: 85px; background: url("../img/point03sp.svg") left top no-repeat; background-size: contain; position: absolute; left: 0; top: -40px;}

	.pointList li dd {
    padding: 20px 25px 10px;;
    font-size: 12px;
    line-height: 21px;
}
	.featuresCon .contentW{ padding: 0 30px; box-sizing: border-box;}

	.pointList li:after{ content: ""; display: block; width: 12px; height: 78px; position: absolute; margin-left: -6px; left: 50%; top: auto; bottom: -73px;
    background: url(../img/linesp.svg) left top no-repeat;
    z-index: 10;
 }
	.pointList li:last-child:after{ display: none;}
	.pointatdtxt {
    background: none;
    text-align: right;
    padding: 0;
    text-align: center;
		color: #888888;
}
	.pointList li:last-child{ margin-bottom: 20px}

	.pointatdtxt:after{ content: ""; display: block; width: 1px ; height: 60px; border-left: 1px dotted #666; margin: 15px auto 0;}
	.imgmount .contentW{ padding: 0;}

	.imgmount {
    padding: 60px 0;
}
.vitminDetail {
    padding: 60px 0;
}
	.sptxttt sup{ font-size: 10px;}
	.vitminDetail .contentW{ padding: 0 30px;}
	.spvttit{ font-size: 16px; line-height: 26px; border-bottom: 1px dashed #666; padding-bottom: 20px; margin-bottom: 20px;}
	.dtpointtxt span {
    padding: 10px ;
    margin-right: 0;
    display: block;
    margin-bottom: 10px;
}
.dtread {
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 10px;
}
	.bgDttxt h3.spdtttitds{ margin-bottom: 37px;}
	.dtpointtxt {
    font-size: 14px;
    text-align: center;
}
	.bgDttxt ul li:last-child{ position: relative;}
	.atdrtdtxsps{ font-size: 11px; color: #C94646;  position: absolute; top: -20px;}
	.atdrtdtxsps span{ font-size: 13px; }
	.ckList li{ display: inline-block; width: 80%;}

	.deimgcon.sp{ width: 100%;}
	.bgDttxt ul li{ box-sizing: border-box;}
	.bgDttxt ul li:first-child{ padding-right: 15px;}
	.bgDttxt ul li:last-child{ padding-left: 15px;}

	.bgDttxt ul li dt {
    width: 100%;
    padding-right: 0;
}
.bgDttxt ul li dd {
    width: 100%;
    font-size: 13px;
    line-height: 20px;
	margin-top: 10px;
}

.bgDttxt h3 {
    font-size: 14px;
    text-align: center;
    margin-bottom: 20px;
}
	.spimgtt{ width: 100%;}
	.spimgtt img{ width: 100%; height: auto; margin-bottom: 20px}
	.sptxttt{ width: 100%; font-size: 12px; color: #666666;}
	.howto {
    padding: 60px 0 60px;
}

.howtoin dl {
    width: 50%;
}
.howtoin .txtcontent {
    width: 50%;
    padding-left: 20px;
}
.howtoin .txtcontent h3 {
    font-size: 13px;
    margin-bottom: 40px;
	width: auto;
	position: relative;
}

	.howtoin{ position: relative;}
.txtcontent h3:before {
    position: absolute;
    left: 34%;
    top: 52px;
}
	.howTit {
		font-size: 22px;}
	.howread {
    font-size: 14px;
    line-height: 22px;
}
	.txthotdt{ font-size: 12px; line-height: 20px; letter-spacing: 0.06em;}
	.txtlinecon:after {
    display: none;
}
	.txtconlist li .steplistIn {
    padding: 15px 5px;
    border-radius: 1
}
	.txtcontent li .steplistIn:before{ display: none;}
	.txtcontent li dl{ font-size: 0; letter-spacing: 0;}
		.txtcontent li dt {
    font-size: 12px;
		display: inline-block;
			width: 35%;
			vertical-align: middle;
}

	.txtcontent li dd {
    font-size: 16px;
		display: inline-block;
		width: 65%;
					vertical-align: middle;

}
	.steplistIn dl {
    width: 100%;
}
	.txtconlist li .steplistIn {
    padding: 22px 5px;

}
.hoetoatd {
    text-align: center;
    padding-top: 40px;
}
.howto .contentW {
    padding: 0 30px;
}
.expertTalk {
    padding: 60px 0;
}
.exTits {
    width: 100%;
    height: auto;
    border: none;
    border-radius: 0;
    text-align: center;
    color: #888;
    padding-top: 0;
    box-sizing: border-box;
    display: block;
    vertical-align: middle;
    position: absolute;
    top: -10px;
    left: 0;
}
.wptsabtit {
    background: #fff;
    border-radius: 20px;
    padding: 25px 35px;
    box-sizing: border-box;
    margin-top: 60px;
    margin-bottom: 30px;
    position: relative;
}
	.wptsabtit{ text-align: left;}
.wptsabtit dt {
    font-size: 14px;
    margin-bottom: 10px;
}
.wptsabtit dd {
    font-size: 16px;
}
.wptsabtit dl {
    margin-left: 0;
}
.uvTits {
    padding: 25px 35px;
    border-right: 0;
    width: 120px;
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: -47px;
    margin-left: -60px;
}
.uvtsabtit {
    margin-bottom: 40px;
    position: relative;
}
.uvredtxt {
    font-size: 15px;
    line-height: 26px;
    letter-spacing: 0.06em;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    padding-left: 30px;
    box-sizing: border-box;
    padding: 50px;
}
.prof {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    font-size: 0; letter-spacing: 0;
    box-sizing: border-box;
    padding-right: 0;
}
.coments {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    padding-left: 0;
    box-sizing: border-box;
    border-left: 0;
}
.coments dt {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 20px;
    padding-top: 20px;
}
.coments dd {
    font-size: 12px;
    line-height: 18px;
}
.shopList {
    padding: 60px 0;
}
.shopLIsts li {
    width: 50%;
}
.navfootList li {
    display: inline-block;
    width: 50%;
    vertical-align: middle;
    font-size: 11px;
    letter-spacing: 0.18em;
    border-right: 1px solid #E2E2E2;
    box-sizing: border-box;

	padding-bottom: 20px;
	padding-top: 20px
}
	.navfootList li:nth-child(1),.navfootList li:nth-child(2) {
    border-bottom: 1px solid #E2E2E2;
}

	.navfootList li:nth-child(2){ border-right: 0;}
	.navfootList {
		border-bottom: 0;}
	.navfootList{ padding-bottom: 0;}
	.footer h3 {
    width: 116px;
		margin: 0 auto;
}
.footer p {
    font-size: 9px;
    text-align: center;
    position: relative;
    right: auto;
    top: auto;
    padding-top: 55px;
}
	.fttit span {
    display: block;
}
.txtcontent h3:before {
    position: absolute;
    left: -16%;
    top: -38px;
}

	.vtcontent .ckList li{ width: 100%; display: block;}
}
.instag {
    right: 0;
    width: 151px;
    margin-left: auto;
	margin-bottom: 10px;
}
.instag a{ background: #fff; font-size: 9px; letter-spacing: 0.18em; width: 151px; height: 30px;  display: inline-block; margin-left: auto;}
.instag a:before{ content: ""; width: 15px; height: 15px; background: url("../../img/isticon.svg") left center no-repeat; display: inline-block; margin-right: 18px; padding: 10px; box-sizing: border-box; margin: 6px; vertical-align: middle; margin-right: 18px;}

.atdtxtft{ font-size: 10px; color: #888; line-height: 16px; margin-bottom: 60px; vertical-align: middle;}


@media screen and (max-width:900px) {

.scrolltext:before {
    left: 63px;
    top: 7px;
}
.scroll:after {
    height: 100%;
}
.bottomin dl{ position: relative; z-index: 0;}
.iscpcon {
    position: relative;
    right: auto;
    top: auto;
    margin: 0 auto;
    text-align: center;
}
	.instag {
    right: 0;
    width: 151px;
    margin-left: auto;
		margin-right: auto;
    margin-bottom: 10px;
}
.footer p {
    top: auto;
    padding-top: 10px;
}
	.footer h3{ margin-bottom: 32px;}

	.pointList li:nth-child(1){ z-index: 3;}
	.pointList li:nth-child(2){ z-index: 2;}
	.pointList li:nth-child(3){ z-index: 1;}
	.pointList:after{ z-index: 2;}
	.secTits{ margin-bottom: 20px;}
}

.maintxt dt{ opacity: 0;
  transform: translateY(15px);
  transition: all 0.6s 0.2s ease-out;}

.maintxt dd{ opacity: 0;
  transform: translateY(15px);
  transition: all 0.6s 0.4s ease-out;}

.intno .maintxt dt,.intno .maintxt dd{ opacity: 1;
  transform: translateY(0);
}

.secvitminImg:before{ opacity: 0;
  transform: translateX(-15px);
  transition: all 0.6s 0.2s ease-in;}

.secvitminImg:after{ opacity: 0;
  transform: translateX(-15px);
  transition: all 0.6s 0.4s ease-in;}


.active .secvitminImg:before{ opacity: 1;
  transform: translateX(0);}
.active .secvitminImg:after{ opacity: 1;
  transform: translateX(0);}


.secvtit{ opacity: 0;
  transform: translateY(15px);
  transition: all 0.6s 0.2s ease-out;}

.ckList{opacity: 0;
  transform: translateY(15px);
  transition: all 0.6s 0.4s ease-out;}

.ckList.active,.secvtit.active{ opacity: 1;
  transform: translateY(0);
}


.leftin {
  opacity: 0;
  transform: translateX(-15px);
  transition: all 0.6s 0.2s ease-in;
}
.leftin.active {
  opacity: 1;
  transform: translateX(0);
}
.bottomin {
  opacity: 0;
  transform: translateY(25px);
  transition: all 1.4s 0.2s ease-out;
}
.bottomin.active {
  opacity: 1;
  transform: translateY(0);
}
.bottomindly {
  opacity: 0;
  transform: translateY(25px);
  transition: all 1.8s 1.2s ease-out;
}
.bottomindly.active {
  opacity: 1;
  transform: translateY(0);
}
.shopLIsts li{ height: 120px;}
.shopLIsts a{ background: #fff; color: #444; font-size: 12px; text-align: center; display: block; height: 120px; vertical-align: middle; line-height: 120px;}



.hedcp {
    height: 70px;
    background: #fff;
    position: fixed;
    top: 0;
    z-index: 10000;
    width: 100%;
    left: 0;
}
.hedcp h2 {
    left: 30px;
    top: 30px;
    position: absolute;
}

#menu-btn_sp {
    position: fixed;
    right: 0;
    top: 0;
    width: 70px;
    height: 70px;
    box-sizing: border-box;
    z-index: 150;
    cursor: pointer;
    padding: 20px;
    box-sizing: border-box;
    background: #EFEFEF;
}


.spmenuins {
    width: 100%;
    position: relative;
    height: 100%;
}



.menu-trigger, .menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.menu-trigger {
	position: relative;
	width: 20px;
	height: 20px;
}
.menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #000;
	border-radius: 2px;
}
.menu-trigger span:nth-of-type(1) {
	top: 8px;
}
.menu-trigger span:nth-of-type(2) {
	top: 14px;
	display: none;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 9px;
}
.menu-trigger.close span:nth-of-type(1) {
	-webkit-transform: translateY(13px) rotate(-45deg);
	transform: translateY(13px) rotate(-45deg);
	top: 2px;
}
.menu-trigger.close span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger.close span:nth-of-type(3) {
	-webkit-transform: translateY(-4px) rotate(45deg);
	transform: translateY(-4px) rotate(45deg);
}

.menuWrapp{  position:fixed; position:fixed; right:auto; top:0; z-index:110; width:0;
height:auto;
transition: all 0.3s ease;
	font-weight: 700;
	/*top: -70vh;*/
	top:calc(-110vh - 500px);
	width: 100%;
}

.menuWrapp.on{     position: fixed;
    right: 0;
    top: 0;
    z-index: 110;
    width: 100%;
    /*background: #000;*/
    height: auto;
    top: 70px;
}



.sp_menu {
    height: 100%;
    background-color: #F5F5F5;
    /* padding-left: 50px; */
    /*display: table;*/
    width: 100%;
	padding: 60px 0 110px;
}.sp_menuWrap{

	/*display:table-cell;*/
	vertical-align:middle;

	}
.sp_menu ul li {
    font-size: 14px;
    text-align: left;
    font-weight: 600;
    margin-bottom: 40px;
    letter-spacing: 0.18em;
}.sp_menu ul li a {
	display: block;
	text-decoration: none;
	color:#000;
}


.sppagenavs {
    position: fixed;
    top: 70px;
    z-index: 100;
    width: 100%;
    background: #fff;
}
	.sppagenavs p{ height: 40px; line-height: 40px; font-size: 14px; box-sizing: border-box; padding: 0 20px; border-bottom: 1px solid #F4F4F4; background: #f2f2f2;}

.sppagenavs p:after{ content: ""; display: inline-block; width: 10px; height: 7px; background: url("../img/arw_spnav.svg") left top no-repeat; margin-left: 10px;}

	.sppagenavs p.on:after{transform: scale(1, -1);}


	.sppagenavs ul{ background:#f4f4f4; box-sizing: border-box; padding: 20px;}
	.sppagenavs ul a{ color: #000; font-size: 14px;}
	.sppagenavs ul li{ margin-bottom: 30px;}


	.hedcp{ border-bottom: 1px solid #F4F4F4;}

	.sppagenavs ul{ display: none;}
	.sppagenavs ul.on{ display: block;}

.buybtn{ border: 1px solid #000; font-size: 16px; width: 100%; height: 63px; box-sizing: border-box; line-height: 63px; text-align: center; margin-top: 40px; background: #fff;
}
.buybtn a{ position: relative; display: block; color: #000 }
.buybtn a:after{ content: ""; display: inline-block; width: 12px; height: 9px; background: url("../img/arrow.svg") left center no-repeat; position: absolute; right: 14px; top: 45%;}


.shopListatd {
    font-size: 12px;
    text-align: center;
}

/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 100000; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
	width: 90%;
  max-width: 1200px;
  padding: 40px 60px ;
  background-color: #fff;
	max-height: 85%;
	overflow: auto;
	box-sizing: border-box;
}

.closeModal {
 position: fixed;
    top: 20px;
    right: 20px;
  cursor: pointer;
}

.popbtns{ width: 100%; background: #EFEFEF; padding: 30px 0; box-sizing: border-box; }
#openModal{ color: #444444; font-size: 14px; text-align: center; letter-spacing: 0.06em; width: 495px; margin: 0 auto; height: 60px; background: #fff; border: 1px solid #444; line-height: 60px; position: relative; cursor: pointer;}
#openModal:hover{ opacity: 0.7;}

#openModal:after {
    content: "";
    display: block;
    width: 6px;
    height: 3px;
    background: url(../img/arw.svg) left center no-repeat;
    margin-left: 20px;
    background-size: cover;
	transform:rotate(-90deg);
	position: absolute;
	right: 20px; top: 30px;
}
.modalTit{ font-size: 28px; letter-spacing: 0.18em; text-align: center; margin-bottom: 5px;}
.modalread{ font-size: 24px; letter-spacing: 0.18em; text-align: center; margin-bottom: 25px;}

.step{ width: 48%; display: inline-block; vertical-align: top; text-align: center; font-size: 0; letter-spacing: 0;}
.step dl{ border-bottom: 2px solid #000; display: inline-block;}
.step dt{ font-size: 16px; letter-spacing: 0.18em; line-height: 1; margin-bottom: 10px;}
.step dd{ font-size: 30px; letter-spacing: 0.18em; line-height: 1; padding-bottom: 13px;}
.step h3{ font-size: 18px; font-weight: bold; margin-top: 20px; margin-bottom: 15px;}
.stepImg { margin-bottom: 20px;}
.stepImg img{ width: 100%; height: auto; max-width: 310px;}
.step p{ font-size: 14px;}
.atdtxt{ text-align: center; font-size: 13px; padding-top: 30px;}

@media screen and (max-width:900px) {
.modalTit{ font-size: 20px; margin-bottom: 15px;}
.modalread{ font-size: 16px; margin-bottom: 45px;}
	.step {
    width: 100%;
    display: inline-block;
	margin-bottom: 30px;}
	.modalWrapper {
    max-width: 1200px;
    padding: 60px 20px 20px 20px;;
    background-color: #fff;
    max-height: 80%;
    overflow: auto;
    box-sizing: border-box;
}
.step dt {
    font-size: 11px;}
.step dd {
    font-size: 28px;}
	.stepImg img {
    max-width: 100%;
}
	.atdtxt {
    font-size: 13px;
    padding-top: 30px;
}
	#openModal {
    width: 100%;
}
	.popbtns{ padding: 30px 20px;}


/*	.slides li.slid01{ background: url("../img/mainsp.jpg") center top no-repeat; background-size: cover; }
.slides li.slid02{ background: url("../img/main02_sp.jpg") center top no-repeat; background-size: cover;}*/
	.slides li img{ width: 100%; height: auto;}
}

.slides.pc .slick-slide,
.slides.sp .slick-slide { pointer-events: none; }

.slides.pc .slick-slide.slick-active,
.slides.sp .slick-slide.slick-active { pointer-events: auto; }



.newiconswrapp{ position: relative;}
.newiconswrapp:after{ content: ""; display: block; width: 52px; height: 52px; background: url("../img/icon_new.svg") center top no-repeat; background-size: cover; position: absolute; left: 35px; top: 35px;}
.p2ptn .newiconswrapp:after {
    left: auto;
    top: 35px;
    right: 215px;
}

@media screen and (max-width:900px) {

/* header */

.scroll {
    left: 13px;
}


@-webkit-keyframes scroll {
0% {
-webkit-transform:translate3d(0, 0, 0)
}

100% {
-webkit-transform:translate3d(0, 60px, 0)
}
}

}


@media screen and (max-width:800px) {
}

.imgitemcon dt span{ color: #fff; font-size: 18px; letter-spacing: 0.02em; background: #C94646; text-align: center; padding: 5px 10px; border-radius: 9px;}

@media screen and (min-width:901px) {
	.imgitem01{ background: url("../img/bg_item01.jpg") left top no-repeat; background-size: cover;}
	.imgitemcon{padding: 30px 0;}
	.imgitem02{ background: url("../img/bg_item02.jpg") left top no-repeat; background-size: cover; padding: 140px 0;}
	.itemcontit{ position: absolute; left: 0; top: 70px;}
}


.itemcontent{ width: 50%; margin-left: auto; }

.itemsTits{  position: relative; margin-bottom: 20px}
.itemsTits:before{ content: ""; display: block;  width: 12px; height: 12px; background: #F5DD55; border-radius: 50%; position: absolute; left: 0; top: 0;}
.itemsTits:after{ content: ""; display: block;  width: 12px; height: 12px; background: #5544B8; border-radius: 50%; position: absolute; left: 14px; top: 0;}
.imgitemcon dd {
    font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size: 30px; line-height: 50px; margin-top: 25px;
}
.imgitem02 .itemsTits:after{ display: none;}
.imgitem02 .itemsTits {
    padding-left: 20px;
}

.itemcontent h2{ background: url("../img/lineitem.svg") left bottom repeat-x; }

.itemsTits{ padding-left: 40px;}
.itemimgs{ margin-bottom: 20px;}
.itemimgs img{ width: 100%; height: auto;}
.itemcontent{ background: #fff; padding: 30px;}
.itemcontent h2{ font-size: 28px; line-height: 35px; font-weight: 400; padding-bottom: 20px; margin-bottom: 20px;}

.grflist { font-size: 0; letter-spacing: 0; vertical-align: top;}
.grflist dt{ background: #F5DD55; border-radius: 15px; font-size: 14px; padding: 5px; text-align: center;}

.grflist li{ display: inline-block; vertical-align: top; width: 50%; text-align: center; padding-right: 12px; box-sizing: border-box;}
.grflist li:nth-child(2) dt{ background: #5544B8; color: #fff; padding-right: 0; padding-left: 12px;}
.pointTxts{ background: #FAF4F4; border-radius: 10px; padding: 15px; box-sizing: border-box;}
.pointTxts h3{ color: #C94646; font-size: 16px; font-weight: 600; margin-bottom: 15px;}
.pointTxts p{  font-size: 14px; line-height: 20px; margin-bottom: 15px;}
.pointTxts li{ font-size: 14px; color: #C94646; margin-bottom: 10px;}
@media screen and (min-width:901px) {
.fukidasitxts:before {
    content: "";
    border-right: 30px solid transparent;
    border-bottom: 40.6025px solid #FAF4F4;
    border-left: 30px solid transparent;
    position: absolute;
    right: 100px;
    top: -22px;
}
}


#cleansing_balm{ background:#FFFFEF;}
#cleansing_powder{ background:#FAFAEA; }
#cleansing_balmbk{background:#F3F1F7;}
#cleansing_jelbk{background:#F3F1F7;}

#cleansing_balmbk .ckList {
    background: #E4EDF0;
}
.slick-dots {
    position: absolute;
    bottom: 108px;
    text-align: left;
    right: 0;
    left: auto;
    width: 204px;
}
.dtnewtxt{ width: 50%; display: inline-block; vertical-align: middle;}
.dtnewtxt dt{ width: 40%; display: inline-block; vertical-align: middle;}
.dtnewtxt dt img{ width: 100%; height: auto;}
.dtnewtxt dd{ width: 60%; display: inline-block; font-size: 13px; vertical-align: middle; line-height: 20px;}
.dtnewtxt ul{ font-size: 0; letter-spacing: 0;}
.dtnewtxt ul li{ width: 48%; background: #E4EDF2; border-radius: 10px; vertical-align: top; font-size: 13px; height: 60px; text-align: center; margin: 1%;}
.dtnewtxt03 ul li{ height: auto; padding: 10px 0}

.bgDttxt .dtnewtxt:first-child{ box-sizing: border-box; padding-right: 18px; width: 60%;}
.bgDttxt .dtnewtxt:last-child{ box-sizing: border-box; padding-right: 0; width: 40%;}
.dtnewtxt dt{ box-sizing: border-box; padding-right: 10px;}

.dtnewtxt li span{ position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
display: block}

.dtstxt{ font-size: 13px; line-height: 20px; margin-bottom: 20px;}

.slick-dots li button:before{ opacity: 1; background: #ccc; width: 7px; height: 7px; border-radius: 50%;}
.slick-dots li.slick-active button:before{ opacity: 1; background: #fff; width: 7px; height: 7px; border-radius: 50%;}

.dtnewtxt02{ width: 25%; margin-right: 5%;}
.dtnewtxt02 img{ width: 100%; height: auto;}
.bgDttxt .dtnewtxt:last-child.dtnewtxt03{ width: 70%;}

.dtnewtxt03 ul li dt{ width: 100%; padding-right: 0; font-size: 17px; margin-bottom: 5px;}
.dtnewtxt03 ul li dd{ font-size: 10px;}
.f17txt{font-size: 17px;}
	.slick-dots {
    position: absolute;
    bottom: 108px;
    text-align: right;
    right: 40px;
    left: auto;
    width: 204px;
}
@media screen and (max-width:900px) {
	.slick-dots{ display: none !important;}
	.mainread{ display: none;}

.bgDttxt .dtnewtxt:first-child {
    box-sizing: border-box;
    padding-right: 0;
    width: 100%;
}
.bgDttxt .dtnewtxt:last-child {
    box-sizing: border-box;
    padding-right: 0;
    width: 100%;
}
	.bgDttxt .dtnewtxt:first-child{ margin-bottom: 20px;}

	.harfservitin {
    width: 100%;
}

	.harfservitin .secvtit {
    padding-right: 0;
}
	.harfservitin .vtcontent {
    width: 70%;
}

	.vtm02_1 .secvitminImg {
    width: 157px;
    position: absolute;
    right: -50px;
    top: 150px;
		left: auto;
}
	.harfservitin .vtcontent{ margin-left: 0;}
	.vtm02_1 .secvitminImg:after{ display: none;}
.newiconswrapp:after {
    left: auto;
    right: 5px;
    top: 70px;
}
.newiconswrapp.ops002:after {
    left: 20px;
    right: auto;
    top: 31px;
}

	.harfservitin .osp02 .vtcontent {
    margin-left: auto;
}

	.vtm02_1.osp02 .secvitminImg {
    width: 157px;
    position: absolute;
    right: auto;
    top: 89px;
    left: -41px;
}
.pt05 .secvitminImg {
    width: 200px;
    position: absolute;
    left: -100px;
    top: 101px;
}

	.pt05 .newiconswrapp:after {
    left: 30px;
    right: auto;
    top: 30px;
}

	.imgpd{ position: relative; left: -20px; width: calc(100% + 40px)}
	.imgpd img{ width: 100%; height: auto;}
	.imgitem01{ position: relative;}
	.itemcontit{ position: absolute; z-index: 2; top: 40px;}
	.itemcontit{ text-align: center; width: 100%; width: calc(100% - 40px)}
	.imgitemcon dt span {
		font-size: 13px;}
	.imgitemcon dd{ font-size: 27px;}
	.itemcontent {
    width: 100%;
    margin-left: 0;
		box-sizing: border-box;


}
	.grflist li {
    display: block;
    width: 100%;
    text-align: center;
    padding-right: 0;
    box-sizing: border-box;
		margin-bottom: 20px;
}

	.itemcontent h2 {
    font-size: 21px;
    line-height: 31px;
	}

	.pointTxts li {
    font-size: 12px;
}

	#cleansing_balm .dtpointtxt,#cleansing_powder .dtpointtxt{ text-align: left; line-height: 20px;}
	.dtnewtxt02 {
    width: 35%;
    margin-right: 0;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}
	.bgDttxt .dtnewtxt:last-child.dtnewtxt03 {
    width: 100%;
}
.bgDttxt .dtnewtxt03 li:last-child {
    padding-left: 0;
}

	.bgDttxt .dtnewtxt03 li:first-child {
    padding-right: 0;
}

	#cleansing_balm .bgDttxt ul li:last-child {
    padding-left: 0;
}

	#cleansing_balm .bgDttxt ul li:last-child {
    padding-left: 0;
}

/*	.fukidasitxts:before {
    content: "";
    border-right: 35px solid transparent;
    border-bottom: 55.6025px solid #FAF4F4;
    border-left: 35px solid transparent;
    position: absolute;
    right: 0;
    top: -24px;
}*/
	.bnimg {
    display: inline-block;
    vertical-align: bottom;
    width: 100%;
    margin-top: 30px;
}
	.bntxtxs {
    display: inline-block;
    width: 85%;
    font-size: 10px;
}　

}
.iconimgs img{ width: 100%; height: auto;}
.imgitem01 {
    width: 100%;
	overflow: hidden;}




@media screen and (max-width: 900px){
	.imgitemcon dd {
    font-size: 20px; line-height: 40px;
}
	}
/* =================
clearfix
================= */
.clearfix:after, .cfx:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* =================*/



.vtm02_1 .secvitminImg.tubeimgs{

	width: 125px;
    position: absolute;
    left: 110px;
    top: 150px;
}

.newiteminner{ font-size: 0;}
.newimghf{ }
img.newimghf { width: 50%; height: 100%; object-fit: cover; display: inline-block; vertical-align: middle;}
.imgnewimgs{ background: #FAFAEA; position: relative;}
.newitemstxt{ width: 50%; margin-left: auto; display: inline-block; vertical-align: middle;}
@media screen and (min-width: 901px){
	img.newimghf { width: 50%;  display: inline-block !important;}
	.newitemstxt{ width: 50%;  display: inline-block !important;}
	img.newimghf.sp{ display: none !important;}
}
.newitemstxt .itemcontit {
    position: relative;
    left: auto;
    top: auto;
	margin-bottom: 30px;
}

.newitemstxt dt span {
    color: #fff;
    font-size: 18px;
    letter-spacing: 0.02em;
    background: #C94646;
    text-align: center;
    padding: 5px 10px;
    border-radius: 9px;
}

.newitemstxt dd {
    font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    font-size: 30px;
    line-height: 50px;
    margin-top: 25px;
}

.newtctwarapps{ background: #FAFAFA;  box-sizing: border-box; padding: 30px;}

.newitemstxtin{  width: 72%; margin: 0 auto; vertical-align: middle; box-sizing: border-box;}
.newtxttitls{ font-size: 28px; line-height: 35px; background: url(../img/lineitem.svg) left bottom repeat-x;
	font-weight: 400;
    padding-bottom: 20px;
    margin-bottom: 20px;
}


.pointTxts p span{ font-size: 10px; margin-top: 20px;}

.newtxttitls sup{ font-size: 16px; margin-top: -10px;}

.pointTxts li{ margin-bottom: 5px;}
.dttxtcon h2{ position: relative;}
.vnamb{ border: 2px solid #444444; font-size: 29px; position: absolute; bottom: 25px; right: 0; line-height: 1
; box-sizing: border-box; padding: 15px; border-radius: 6px;}
.bgDttxt2{ margin-bottom: 20px;}
.bgDttxt2 img{ width: 100%; height: auto;}

#spotcream,#seatmusk,#forma{ background: #FAFAEA}
.hoetoimg img{ width: 100%; height: auto;}

.hoetoimg{ margin-bottom: 40px;}

@media screen and (max-width: 900px) {
    .hoetoimg{
        max-width: 400px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 900px){
	.vnambtit{ padding-right: 75px;}
	/*.vtpdtit{ padding-right: 75px;}*/
.vtm02_1 .secvitminImg.tubeimgs {
    width: 66px;
    position: absolute;
    left: 15px;
    top: auto;
    bottom: 30px;
}
	img.newimghf {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    vertical-align: middle;
}

	.newitemstxt {
    width: 100%;
    margin-left: auto;
    display: block;
    vertical-align: middle;
}

	.newitemstxt .itemcontit {
    position: relative;
    left: auto;
    top: auto;
    margin-bottom: 0;
    position: absolute;
    top: 40px;
    width: 100%;
    left: 0;
}

	.newitemstxt dd {
    font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    font-size: 22px;
    line-height: 38px;
    margin-top: 25px;
}

	.newtctwarapps {
    background: none;
    box-sizing: border-box;
    padding: 0;
}

	.newitemstxtin {
    width: 100%;
    margin: 0 auto;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 0 30px;
}

	.newtxttitls {
    font-size: 21px;
    line-height: 35px;
    background: url(../img/lineitem.svg) left bottom repeat-x;
    font-weight: 400;
    padding-bottom: 20px;
    margin-bottom: 20px;
    padding-top: 30px;
}

	.imgnewimgs {
    background: #FAFAEA;
    position: relative;
    padding-bottom: 40px;
}

	.dtpointtxt{ text-align: left;}
}


@media screen and (min-width:901px) {
.secvtit dt.rdtits{ color: #C94646;}
}

.iconrer{ position: relative;}
.iconskoudohaigou{ width: 78px; position: absolute; right: 7%; top: 8%; z-index: 10;}
.iconskoudohaigou img{ width: 100%; height: auto;}

@media screen and (max-width: 900px){

	.iconskoudohaigou{ width: 78px; position: absolute; right: 0; top: 0; z-index: 10;}

}

.p2ptn .secvitminImg {
    position: absolute;
    left: auto;
    right: 20px;
    top: 0;
    width: 208px;
}

.p2ptn .secvitminImg:before {
    left: 15px;
    margin-top: -3px;
}
.newtxttitls .stxtxs{ font-size: 20px;}

@media screen and (max-width: 900px){
.p2ptn .secvitminImg {
    position: absolute;
    left: -30px;
    right: auto;
    top: auto;
    width: 135px;
    bottom: 10px;
}

.p2ptn .vtcontent {
    margin-left: auto;
}

	.p2ptn .newiconswrapp:after {
    left: 7px;
    top: 116px;
    right: auto;
}
}

.newblackcon img{  width: 100%; height: auto;}
.newblackcon{ font-size: 0; letter-spacing: 0;}
.newblackcon .harf{ width: 50%; display: inline-block; background: #FFFEE5; padding: 57px 0 175px;}
.hcin{ max-width: 388px; margin-right: auto; margin-left: 100px;}

.newblackcon .harf.blkbg{ background: #E9E9EA;}
.newblackcon .harf.pplbg{ background: #EBE9F1}
.blkbg .hcin{  margin-left: auto; margin-right: 100px;}
.ylwbg .hcin{  margin-left: auto; margin-right: 100px;}
.blackDetail{ background: #EFEFEF;}

.newblackcon .harf.pplbg{ background: #EBE9F1}

@media screen and (max-width: 900px){

	.newblackcon .harf{ width: 100%;}
	.newblackcon .harf{ padding: 0;}
	 .hcin{ margin: 0; padding: 45px 30px 25px; max-width: 100%;}
	.blkbg .hcin{ margin: 0; }
	.ylwbg .hcin{ margin: 0; }

}



.harfservitin .vtm02_1 .secvitminImg:after{ width: 75px; right: -30px;}

@media screen and (max-width: 1200px){

	.harfservitin .vtm02_1 .secvitminImg:after{ display: none;}
}






.balackwaps.harfservitin {
    background: #E8E8E8;
}

.secvtit dd.sab.ssab{
	font-size: 16px;
}



@media screen and (min-width:901px) {

	.allinone .secvitminImg {
    position: absolute;
    left: auto;
    right: 20px;
    top: 90px;
    width: 204px;
}

.allinone  .secvitminImg:before {
    left: 15px;
    margin-top: -5px;
}
	.newwraps .vtm02_1 .secvitminImg {
    width: 204px;
    position: absolute;
    left: 20px;
    top: 140px;
}

.vtm02_1 .secvitminImg:after { top: 52%}
}



@media screen and (max-width: 900px){
.p2ptn .allinone .secvitminImg {
    position: absolute;
    left: -30px;
    right: auto;
    top: auto;
    width: 135px;
    bottom: 140px;
}

	.newitemstxt .itemcontit {
    position: relative;
    left: auto;
    top: auto;
    margin-bottom: 0;
    position: relative;
    top: auto;
    width: 100%;
    left: 0;
    padding-top: 40px;
}

	.newitemstxt dd {
    margin-top: 15px;
    margin-bottom: 20px;
}

	.secvtit dd.namemins{ font-size: 22px;}
}

.newitemimg{ max-width: 1034px; margin: 0 auto; text-align:center; padding: 60px 0 80px 0;}
.lab .newitemimg{
    margin-top: 0;
    padding-bottom: 42px;
}
.newitemimg ul{ letter-spacing: 0; font-size: 0; display: flex; gap: 30px; flex-wrap: wrap;}
.newitemimg li{ width: calc(100% / 3 - 20px); display: inline-block; box-sizing: border-box;}
/* .newitemimg li{ width: 33%; display: inline-block; box-sizing: border-box; padding: 0 15px;} */
/*.newitemimg li{ width: 50%; display: inline-block; box-sizing: border-box; padding: 0 15px;}*/
/*.newitemimg li:first-child{ padding-right: 30px;}
.newitemimg li:last-child{ padding-left: 30px;}*/
.newitemimg img{ width: 100%; height: auto;}

.secvitminIn{ position: relative;}
.newitemimg h2{ margin-bottom: 40px; font-size: 28px;}
.iconsimg{width: 93px; position:  absolute; left: 12px; top: 33px;}
.iconsimg.pt02icon{ width: 188px; top: 20px;}
.iconsimg img{ width: 100%; height: auto;}

.sxtxtsppl{ font-size:
12px; font-weight: normal;}

@media screen and (max-width: 900px){

.newitemimg h2 {
    margin-bottom: 20px;
    font-size: 22px;
}
	.newitemimg{ max-width: 240px;}

	.iconsimg {
    width: 67px;
    position: absolute;
    left: auto;
    top: 13px;
    right: 10px;
}

	.iconsimg.pt02icon {
    width: 122px;
    top: 20px;
}

	.pt05 .iconsimg{ right: auto;
		left: 10px;
    top: 13px;}

	.newcatgory {
    background: #F7F7F1;
    /* padding: 50px 0; */
    padding: 78px 0;
}
	.newcatgory .secTits {
    margin-bottom: 34px;
    font-size: 20px;
    text-align: center;
}
	/* .newcatgory h2 {
    margin-bottom: 40px;
    font-size: 22px;
    text-align: center;
} */
	.newcatgory .adtxt {
    text-align: left;
    padding-top: 20px;
    margin-bottom: 30px;
    padding: 10px 20px 0;
}

	.newitemimg{ max-width: 100%;}
	.newitemimg li{width: 100%; padding: 0;}
	/* .newitemimg li:first-child{ padding-right: 0 ; margin-bottom: 20px;} */
	.newitemimg li:last-child {
    padding-left: 0;
}
	.newitemimg{ padding: 40px 0 70px}
}

.ctgmainIn{ max-width: 980px; margin: 0 auto; font-size: 0; letter-spacing: 0;}

.ctgmainIn .ctgmimg{ width: 50%; display: inline-block; vertical-align: middle;}
.ctgmainIn .ctgmimg img{ width: 80%; margin: 0 auto; display: block;}
.ctgeye .ctgmainIn .ctgmimg img{ width: 51%; margin: 0 auto; display: block;}
.ctgmainIn .ctgmainTxt{ width: 50%;  display: inline-block; vertical-align: middle}
.ctgmainTxt dt{ font-size: 30px; margin-bottom: 20px}
.ctgmainTxt dd{ font-size: 18px;}
.ctgmain{ padding: 60px 0;  box-sizing: border-box;}
.ctgmainTxt .atdtxt{ text-align: left; font-size: 10px;}

.ctg01{ background: url("../imgs/meinbg_c1.png") center top no-repeat; background-size: cover;}
.ctg02{ background: url("../imgs/meinbg_c2.png") center top no-repeat; background-size: cover;}
.ctg03{ background: url("../imgs/meinbg_c3.png") center top no-repeat; background-size: cover;}
.ctg04{ background: url("../imgs/meinbg_c4.png") center top no-repeat; background-size: cover;}
.ctg05{ background: url("../imgs/meinbg_c5.png") center top no-repeat; background-size: cover;}
.ctg06{ background: url("../imgs/meinbg_c6.png") center top no-repeat; background-size: cover;}
.ctg07{ background: url("../imgs/meinbg_c7.png") center top no-repeat; background-size: cover;}
.ctg08{ background: url("../imgs/meinbg_c8.png") center top no-repeat; background-size: cover;}
.ctg09{ background: url("../imgs/meinbg_c9.png") center top no-repeat; background-size: cover;}
.ctg10{ background: none; padding: 0; max-height: none; }
.ctg10-kv{ display: block; width: 100%; height: auto; }
.ctgCVS{ background: url("../imgs/meinbg_UVS.png") center top no-repeat; background-size: cover;}
.ctgCVSr{ background: url("../imgs/meinbg_UVSR.png") center top no-repeat; background-size: cover;}
.ctgbody{ background: url("../imgs/meinbg_body.png") center top no-repeat; background-size: cover;}
.ctgeye{ background: url("../imgs/meinbg_eye.png") center top no-repeat; background-size: cover; color: #fff;}
.ctgMistToner{ background: url("../imgs/mainbg_mist_toner.webp") center top no-repeat; background-size: cover;}
@media screen and (max-width: 900px) {.ctgMistToner{ background: url("../imgs/mainbg_mist_toner_sp.webp") center top no-repeat; background-size:cover; }}

.ctg03 .ctgmainIn .ctgmimg img{ width: 50%;}
.ctg04 .ctgmainIn .ctgmimg img{ width: 50%;}
.ctg06 .ctgmainIn .ctgmimg img{ width: 50%;}
.ctg08 .ctgmainIn .ctgmimg img{ width: 50%;}
.ctg10 .ctgmainIn .ctgmimg img{ width: 50%;}
.ctgCVS .ctgmainIn  img{ width: 50%;}
.ctgCVSr .ctgmainIn  img{ width: 50%;}

.ctgCVS .ctgmainIn .stimgw  img{ width: 60%;}

@media screen and (min-width: 901px){.ctgmain{ max-height: 400px; }}
@media screen and (min-width: 901px){.ctgmain.ctg10{ max-height: none; }}
/* PC 1021〜1400px: KV高さ固定・画像幅1400px維持で左右をクリップ */
@media screen and (min-width: 1021px) and (max-width: 1400px){
	.ctgmain.ctg10{
		overflow-x: clip;
		display: flex;
		justify-content: center;
		height: calc(1400px * 800 / 2732);
		padding: 0;
	}
	.ctgmain.ctg10 picture{
		display: block;
		flex: 0 0 1400px;
		width: 1400px;
		height: 100%;
	}
	.ctgmain.ctg10 .ctg10-kv{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}
/* PC 901〜1020px: 1020px時点のクリップ状態を縦横比維持のまま縮小 */
@media screen and (min-width: 901px) and (max-width: 1020px){
	.ctgmain.ctg10{
		--kv-scale: calc(100vw / 1020px);
		overflow-x: clip;
		display: flex;
		justify-content: center;
		height: calc(1400px * 800 / 2732 * var(--kv-scale));
		padding: 0;
	}
	.ctgmain.ctg10 picture{
		display: block;
		flex: 0 0 calc(1400px * var(--kv-scale));
		width: calc(1400px * var(--kv-scale));
		height: 100%;
	}
	.ctgmain.ctg10 .ctg10-kv{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}

@media screen and (max-width: 900px){
	.ctgmainIn{ padding: 0 30px;}
	.ctgmainIn .ctgmimg{ width: 100%; display: block;}
	.ctgmainIn .ctgmainTxt{ width: 100%;  display: block;}

	.ctgmainTxt dt{ font-size: 18px; margin-top: 20px; margin-bottom: 10px;}
	.ctgmainTxt dd{ font-size: 16px;}

	.ctgmainTxt .atdtxt {
    font-size: 13px;
    padding-top: 10px;
}


}

/* 共通 */

@media screen and (max-width: 900px) {
    .contents.awItem .wide .contentW{
    padding-left: 0;
    padding-right: 0;
}
}

.contents.awItem .ctgmain{
    height: 374px;
    display: flex;
    align-items: center;
}
@media screen and (max-width: 900px) {
    .contents.awItem .ctgmain{
        height: auto;
        padding: 60px 0 104px 0;
    }
}
.contents.awItem .ctgMistToner .ctgmimg{
    max-width: 271px;
}
@media screen and (max-width: 900px) {
    .contents.awItem .ctgMistToner .ctgmimg{
    max-width: 241px;
}
}
@media screen and (max-width: 900px) {
    .contents.awItem .ctgmainTxt .atdtxt{
    font-size: 9px;
}
}

.contents.awItem .ctgmainIn .ctgmimg img{
    width: 100%;
}

@media screen and (max-width: 900px) {
.contents.awItem .ctgmainIn .ctgmimg img{
    width: 70%;
}
}
.contents.awItem .ctgmainIn{
   display: flex;
   gap: 60px;
   justify-content: flex-end;
   align-items: flex-end;
}
@media screen and (max-width: 900px) {
.contents.awItem .ctgmainIn{
    flex-direction: column;
    gap: 0;
    align-items: center;
}
}

.contents.awItem .modalOpenButton{
    position: relative;
    font-size: 12px;
    line-height: 2.5;
    padding: 0.2em 0;
    border: solid 1px #919190;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 146px;
    height: 35px;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
}
.contents.awItem .modalOpenButton:after{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -19px;
    width: 35px;
    height: 1px;
    background-color: #919190;
    transform-origin: left center;
    animation: line-draw 1.5s linear infinite;
}

.contents.awItem .modalWrapper{
    text-align: center;
}

.contents.awItem.homme .featuresCon{
    padding-top: 0;
}
.contents.awItem.homme .pointfoot{
    padding-top: 32px;
}

.productTitle {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(20px, 3.2vw, 47px);
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #5b5452;
    font-weight: 500;
    text-transform:uppercase;
    display: flex;
    align-items: center;
    gap: clamp(10px, 2.6vw, 38px);
    justify-content: center;
}

.productTitle::before,
.productTitle::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: currentColor;
  opacity: 0.5;
  width: clamp(60px, 13.1vw, 190px);
  flex: 0 0 auto;
}
.productSubTitle{
    font-family: "Montserrat", sans-serif;
    font-size: clamp(16px, 1.3vw, 20px);
}

.sectionTitle{
    font-family: "Montserrat", sans-serif;
    font-size: clamp(20px, 1.9vw, 28px);
    letter-spacing: 0.05em;
    text-transform:uppercase;
}


.Point{
    text-align: center;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}
.Point img{
    width: 100%;
}

.productDetailInner{
    display: grid;
    justify-content: start;
    grid-template-columns: 368px auto;
    grid-template-rows: auto auto auto auto;
    gap: 0 45px;
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    padding: 81px 0 123px 0;
}

@media screen and (max-width: 900px) {
    .productDetailInner{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto;
        padding: 60px 30px;
    }
}

.productSpec{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

@media screen and (max-width: 900px) {
    .productSpec{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
}

.ProductImage{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    position: relative;
}
@media screen and (max-width: 900px) {
    .ProductImage{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    width: clamp(19.688rem, -3.75rem + 100vw, 52.5rem);
}
}

.ProductImage .products__logo{
    position: absolute;
    left: 4px;
    width: 95px;
}
.ProductImage .products__logo--first{
    top: 10px;
}

@media screen and (max-width: 900px) {
    .ProductImage .products__logo{
        width: 85px;
    }
}
@media screen and (max-width: 900px) {
    .ProductImage .container {
  width: 100%;
}
}
.ProductImage img{
    width: 100%;
    height: auto;
}

.ProductImage .thumbnail{
    margin-top: 10px;
}

.ProductImage .thumbnail .slick-track:before,.slick-track:after{
    display: none;
}
.ProductImage .thumbnail .slick-track{
    display: flex;
    gap: 10px;
    justify-content: space-between;}

.ProductImage .thumbnail .slick-track .thumbnail-img{
    margin: 0;
}

.ProductImage .thumbnail .slick-track .thumbnail-img img{
    width: 100%;

}


.ProductItem {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    width: 100%;
    padding-top: 15px;
}

@media screen and (max-width: 900px) {
    .ProductItem{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}
}



.ProductTitle{
    font-size: clamp(16px, 1.38vw, 20px);
    line-height: 1.8;
    border-bottom: dotted 1px #2b2a29;
    margin-bottom: 25px;
    font-feature-settings: "palt";
}

.ProductName .dtread{
    margin-bottom: 0;
}

.ProductText > .dtsabTxt{
    font-size: 16px;
    line-height: 1.7;
    font-feature-settings: "palt";
}
.ProductText > .dtsabTxt .bold{
    font-weight: bold;
}

.ProductShops{
    grid-column: 1/3;
    grid-row: 3/4;
    margin-top: 70px;
}

@media screen and (max-width: 900px) {
    .ProductShops{
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}
}

.ProductShops .buybtnwrapp{
    background-color: #f7f7f7;
    position: relative;
    /* height: 50px; */
}
/*
.ProductShops .buybtnwrapp:before{
    content: 'coming soon';
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
} */


@media screen and (max-width: 900px) {
.ProductShops .buybtnwrapp{
    padding: 14px 0;
}
.ProductShops .buybtns {
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
}
.ProductShops .buybtns li {
    width: calc(100% / 2 - 2px);
}
}


.ProductAnnotation {
    grid-column: 1/3;
    grid-row: 4/5;
}


@media screen and (max-width: 900px) {
    .ProductAnnotation{
    grid-column: 1 / 2;
    grid-row: 5 / 6;
}
}

.ProductAnnotation .atdtxtft{
    margin-bottom: 0;
}
.productBanner{
    padding: 100px 0;
    text-align: center;
}
.productBannerTitle{
    font-size: clamp(20px, 2.7vw, 40px);
    margin-bottom: 32px;
}

.productBannerImage img{
    max-width: 686px;
}

@media screen and (max-width: 900px) {
    .productBannerImage img{
        width: 100%;
    }
}


/* 共通 */

/* ミスト化粧水 */

.mistToner{
    background-color: #FAFAEA;
}

.mistTonerContent{
    background-color: #FFFEF4;
    padding-top: 137px;
    font-family: "Noto Sans JP", sans-serif;
}

@media screen and (max-width: 900px) {
    .mistTonerContent{
       padding-top: 0;
    }
}

.mistTonerContent .headImage{
    text-align: center;
    display: block;
}

@media screen and (max-width: 900px) {
    .mistTonerContent .headImage{
        padding: 60px 30px;
    }
}

.mistTonerContent .headImage img{
    max-width: 1050px;
    width: 100%;
}


.mistTonerPoint01{
    padding-top: 154px;
    padding-bottom: 74px;
}

@media screen and (max-width: 900px) {
    .mistTonerPoint01{
        padding-top: 60px;
        padding-bottom: 0;
    }
}
.mistTonerDirect img{
    margin-top: -9%;
}

@media screen and (max-width: 900px) {
    .mistTonerDirect img{
        margin-top: 0;
    }
}

.mistTonerPoint02{
    padding-top: 154px;
    padding-bottom: 63px;
    background-image: url(/lab/imgs/skin_care/mist_toner/mistTonerPoint_02_bg_pc.webp);
}

@media screen and (max-width: 900px) {
    .mistTonerPoint02{
        padding: 60px 0;
    }
}
.mistTonerPoint02 .productTitle{
    margin-bottom: 62px;
}

@media screen and (max-width: 900px) {
    .mistTonerPoint02 .productTitle{
        margin-bottom: 20px;
    }
}

.mistTonerPoint02 .mistTonerCeramide{
    width: 85%;
    margin: 0 auto;
    display: block;
}


@media screen and (max-width: 900px) {
    .mistTonerPoint02 .mistTonerCeramide{
        width: 98%;
    }
}
.mistTonerPoint03{
    padding-top: 160px;
    background-color: #fff;
}

@media screen and (max-width: 900px) {
    .mistTonerPoint03{
        padding: 60px 0;
}
}

.mistTonerPoint03 .productTitle{
    margin-bottom: 60px;
}

@media screen and (max-width: 900px) {
    .mistTonerPoint03 .productTitle{
        margin-bottom: 20px;
    }
}
.mistTonerPoint03 .mistTonerApproach{
    width: 100vw;
    margin: 0 auto;
    max-width: 1088px;
    margin-left: -31px;
    display: block;
}

@media screen and (max-width: 767px) {

.mistTonerPoint03 .mistTonerApproach{
    margin-left: 0;
    width: 100%;
}
}

.mistTonerPoint04{
    padding-top: 138px;
    padding-bottom: 63px;
    background-color: #fff;
}
@media screen and (max-width: 900px) {
    .mistTonerPoint04{
        padding-top: 40px;
    }
}

.mistTonerPoint04 .productTitle{
    margin-bottom: 76px;
}


.mistTonerPoint04 .mistTonerSpray{
    width: 100vw;
    margin: 0 auto;
    max-width: 1153px;
    margin-left: -101px;
    display: block;
}

@media screen and (max-width: 900px) {
    .mistTonerPoint04 .mistTonerSpray{
        margin-left: auto;
        width: 100%;
    }
}

.mistTonerPoint05{
    padding-top: 121px;
    padding-bottom: 144px;
    background-image: url(/lab/imgs/skin_care/mist_toner/mistTonerPoint_05_bg_pc.23bp);
}

@media screen and (max-width: 900px) {
    .mistTonerPoint05{
        padding-top: 40px;
    }
}

.mistTonerPoint05 .productTitle{
    margin-bottom: 62px;
}


.mistTonerPoint05 .mistTonerFree{
    width: 77%;
    margin: 0 auto;
    display: block;
}

.mistTonerPoint06{
    background-color: #FFFFED;
    padding-top: 153px;
    padding-bottom: 166px;
}

@media screen and (max-width: 900px) {
    .mistTonerPoint06{
        padding-top: 40px;
    }
}


.mistTonerPoint06 .productTitle{
    margin-bottom: 76px;
}

.mistTonerPoint06 .mistTonerUse{
    width: 100vw;
    max-width: 1050px;
    margin-left: -35px;
    display: block;
}

@media screen and (max-width: 900px) {
    .mistTonerPoint06 .mistTonerUse{
        margin-left: auto;
        width: 100%;
    }
}

.mistTonerPoint07{
    padding-top: 111px;
    font-family: 'Noto Serif JP';
    padding-bottom: 36px;
    background-image: url(/lab/imgs/skin_care/mist_toner/mistTonerPoint_07_bg_pc.webp);
}

@media screen and (max-width: 900px) {
    .mistTonerPoint07{
    background-image: url(/lab/imgs/skin_care/mist_toner/mistTonerPoint_07_bg_sp.webp);
    }
}
.mistTonerPoint07 .productTitle{
    margin-bottom: 68px;
}

.mistTonerPoint07 .title{
    font-size: clamp(42px, 4.5vw, 65px);
    line-height: 1.3;
    letter-spacing: 0.06em;
    margin-bottom: 64px;
    font-feature-settings: "palt";
}

.mistTonerPoint07 .title .sup{
    font-size: 27px;
    vertical-align: super;
}

.mistTonerPoint07 .text{
    font-size: clamp(19px, 1.7vw, 25px);
    line-height: 2;
    letter-spacing: 0.06em;
    padding-bottom: 94px;
}

.mistTonerPoint07 .text sup{
    vertical-align: super;
}

.mistTonerPoint07 .detail{
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 0.06em;
    position: absolute;
    bottom: 0;
    right: 0;
}

.productDetail.mistToner .buybtnwrapp{
    /* height: 50px; */
    position: relative;
}

/* .productDetail.mistToner .buybtnwrapp:after{
    content: "coming soon";
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 50%;
} */


/* ミスト化粧水 */
/* コスメライン */
.cosme{
    background-color: #FCF6FE;
}

.cosmeContent{
    background-color: #F9F7FE;
    padding-top: 137px;
    font-family: "Noto Sans JP", sans-serif;
}

@media screen and (max-width: 900px) {
    .cosmeContent{
        padding-top: 0;
    }
}

.cosmeContent .headImage{
    text-align: center;
    display: block;
}
@media screen and (max-width: 900px) {
    .cosmeContent .headImage{
        padding: 60px 30px 30px 30px;
    }
}
.cosmeContent .headImage img{
    max-width: 1050px;
    width: 100%;
}


.cosmePoint01{
    padding-top: 58px;
    padding-bottom: 74px;
    background-color: #F9F7FE;
}

@media screen and (max-width: 900px) {
    .cosmePoint01{
        padding-top: 60px;
        padding-bottom: 0;
    }
}
.cosmePoint01 .productTitle{
    margin-bottom: 71px;
}

@media screen and (max-width: 900px) {
    .cosmePoint01 .productTitle{
        margin-bottom: 21px;
    }
}

.cosmePoint01 .cosmePoint01Image{
    width: 80%;
    margin: 0 auto;
    display: block;
}

@media screen and (max-width: 900px) {
    .cosmePoint01 .cosmePoint01Image{
        width: 94%;
    }
}

.cosmePoint02{
    padding-top: 24px;
    padding-bottom: 99px;
    background-image: url(/lab/imgs/cosme/cosmePoint_02_bg_pc.webp);
    background-position: bottom;
    background-color: #F9F7FE;

}

@media screen and (max-width: 900px) {
    .cosmePoint02{
        padding-top: 53px;
        padding-bottom: 121px;
    background-image: url(/lab/imgs/cosme/cosmePoint_02_bg_sp.webp);
    }
}

.cosmePoint02 .productTitle{
    margin-bottom: 64px;
}

@media screen and (max-width: 900px) {
    .cosmePoint02 .productTitle{
        margin-bottom: 24px;
    }
}
.cosmePoint02 .cosmePoint02Image{
    width: 80%;
    margin: 0 auto;
    display: block;
}

@media screen and (max-width: 900px) {
    .cosmePoint02 .cosmePoint02Image{
        width: 101%;
    }
}
.cosmePoint03{
    padding-top: 150px;
    padding-bottom: 74px;
    background: linear-gradient(107.13deg, #FAF9FF 0.46%, #DFDAFE 96.73%, #FAF9FF 193%);
}

@media screen and (max-width: 900px) {
    .cosmePoint03{
        padding-top: 55px;
        padding-bottom: 60px;
    }
}
.cosmePoint03 .productTitle{
    margin-bottom: 88px;
}

@media screen and (max-width: 900px) {
    .cosmePoint03 .productTitle{
        margin-bottom: 23px;
    }
}

.cosmePoint04{
    padding-top: 134px;
    padding-bottom: 90px;
}
@media screen and (max-width: 900px) {
    .cosmePoint04{
        padding-top: 57px;
        padding-bottom: 28px;
    }
}

.cosmePoint04 .productTitle{
    margin-bottom: 49px;
}

@media screen and (max-width: 900px) {
    .cosmePoint04 .productTitle{
    margin-bottom: 24px;
}
}
.cosmePoint04 .cosmePoint04Image{
    width: 73%;
    margin: 0 auto;
    display: block;
}

@media screen and (max-width: 900px) {
    .cosmePoint04 .cosmePoint04Image{
        width: 100%;
    }
}

.cosmePoint05{
    padding-top: 144px;
    padding-bottom: 99px;
    background-image: url(/lab/imgs/cosme/cosmePoint_05_bg_pc.webp);
    background-position: bottom;
}

@media screen and (max-width: 900px) {
    .cosmePoint05{
    padding-top: 54px;
    padding-bottom: 57px;
    background-image: url(/lab/imgs/cosme/cosmePoint_05_bg_sp.webp);
    }
}

.cosmePoint05 .productTitle{
    margin-bottom: 90px;
}

@media screen and (max-width: 900px) {
.cosmePoint05 .productTitle{
    margin-bottom: 29px;
}
}

.cosmePoint05 .cosmePoint05Image{
    width: 65%;
    margin: 0 auto;
    display: block;
}

@media screen and (max-width: 900px) {
    .cosmePoint05 .cosmePoint05Image{
        width: 100%;
    }
}
/* コスメライン */

/* バスタブレット */
.bath-tabletContent{
    font-family: "Noto Sans JP", sans-serif;
}

.bath-tabletAbout{
    padding-top: 196px;
    padding-bottom: 124px;
    background-image: url(/lab/imgs/body_care/bath_tablet/bath-tabletAbout_bg_pc.webp);
    background-position: top;
    color: #5B5452;
}
@media screen and (max-width: 900px) {
    .bath-tabletAbout{
        padding-top: 57px;
        padding-bottom: 18px;
    }
}

.bath-tabletContentInner{
    max-width: 1018px;
    margin: 0 auto;
}
.bath-tabletAbout img{
    width: 100%;
    height: auto;
    margin-bottom: 50px;
}
@media screen and (max-width: 900px) {
    .bath-tabletAbout img{
        width: 85%;
        margin-bottom: 20px;
    }
}
.bath-tabletAboutTitle{
    max-width: 613px;
    margin: 0 auto 44px auto;
}

@media screen and (max-width: 900px) {
    .bath-tabletAboutTitle{
    margin: 0 auto 26px auto;
    width: 83%;
    }
}


h2.mtTitle{
    font-size: clamp(26px, 3.19vw, 46px);
    line-height: 2;
    margin-bottom: 36px;
    color: #2B2A29;
}

@media screen and (max-width: 900px) {
    h2.mtTitle{
        margin-bottom: 18px;
    }
}
.bath-tabletMtimg{
    max-width: 968px;
}

.bath-tabletAbout .lead{
    font-size: clamp(16px, 2vw, 30px);
    line-height: 2;
    letter-spacing: 0.06em;
    margin-bottom: 195px;
}

@media screen and (max-width: 900px) {
    .bath-tabletAbout .lead{
        margin-bottom: 61px;
    }
}

.bath-tabletAbout .lead .sup{
    vertical-align: super;
}

.bath-tabletAbout .ingredient{
    display: flex;
    gap: 61px;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    margin-bottom: 114px;
}

@media screen and (max-width: 900px) {
    .bath-tabletAbout .ingredient{
        padding: 0 30px;
    grid-template-columns: 135px auto;
        gap: 34px 10px;
        margin-bottom: 39px;
    }
}

.bath-tabletAbout .ingredientImage{
    /* max-width: 382px; */
    max-width: clamp(135px, 26.5vw, 382px);
    flex-shrink: 0;
    grid-column: 1/2;
    grid-row: 1/3;
}

.bath-tabletAbout .ingredientTitle{
    /* font-size: 46px; */
    font-size: clamp(26px, 3.1vw, 46px);
    letter-spacing: 0.06em;
    line-height: 1.37;
    font-family: 'Noto Serif JP';
    font-feature-settings: "palt";
    margin-bottom: -8px;
    margin-top: -11px;
    font-weight: bold;
    grid-column: 2/3;
    grid-row: 1/2;
}
@media screen and (max-width: 900px) {
    .bath-tabletAbout .ingredientTitle{
        margin-top: 11px;
    }
}

.bath-tabletAbout .ingredientText{
    font-size: 16px;
    line-height: 1.87;
    text-align: left;
    grid-column: 2/3;
    grid-row: 2/3;
}

@media screen and (max-width: 900px) {
    .bath-tabletAbout .ingredientText{
    grid-column: 1/3;
    font-size: 14px;
    line-height: 2.1;

}
}

.bath-tabletAbout .ingredientText p:first-of-type{
    margin-bottom: 80px;
}

@media screen and (max-width: 900px) {
    .bath-tabletAbout .ingredientText p:first-of-type{
        margin-bottom: 0;
    }
}

.bath-tabletAbout .detail{
    font-size: 16px;
    line-height: 1.8;
    margin: 36px 0 24px 0;
    text-align: left;
}

@media screen and (max-width: 900px) {
    .bath-tabletAbout .detail{
        font-size: 14px;
        line-height: 2.1;
        padding: 0 30px;
        margin: 21px 0 49px 0;
    }
}
.bath-tabletAbout .annotation{
    font-size: 12px;
    letter-spacing: 0.06em;
    text-align: left;
}
@media screen and (max-width: 900px) {
.bath-tabletAbout .annotation{
        font-size: 10px;
        line-height: 1.8;
        padding: 0 30px;
    }
}

.bath-tabletChoice{
    text-align: center;
    position: relative;
    display: flex;
    height: 784px;
        background-position: bottom;
     background-image: url(/lab/imgs/body_care/bath_tablet/bath-tabletChoice_bg_pc.webp);
     background-size: cover;
     background-repeat: no-repeat;

}

@media screen and (max-width: 900px) {
    .bath-tabletChoice{
     background-image: url(/lab/imgs/body_care/bath_tablet/bath-tabletChoice_bg_sp.webp);
     height: 433px;

    }

}

.bath-tabletChoice h2{
    font-size: clamp(28px, 3.1vw, 46px);
    line-height: 2;
    letter-spacing: 0.06em;
    font-weight: bold;
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 100%;
}
@media screen and (max-width: 900px) {
    .bath-tabletChoice h2{
        top: 59px;
    }
}

.bath-tabletChoice .supCollagen{
    position: absolute;
    bottom: 18px;
    font-size: clamp(10px, 0.8vw, 12px);
    right: 10px;
    letter-spacing: 0.05em;
}

.bath-tabletChoice h3{
    font-size: clamp(23px, 2vw, 30px);
    line-height: 2;
    font-weight: bold;
}

@media screen and (max-width: 900px) {
    .bath-tabletChoice h3{
        line-height: 1.5;
    }
}

.bath-tabletChoice .productName{
    font-family: 'Montserrat';
    /* font-size: 25px; */
    font-size: clamp(14px, 1.7vw, 25px);
    line-height: 2.1;
    letter-spacing: 0.02em;
    display: inline;

}

@media screen and (max-width: 900px) {
    .bath-tabletChoice .productName{
        display: block;
    }
}

.bath-tabletChoice .productNameText{
    margin-left: 22px;
    font-size: 16px;
    display: inline;
}

@media screen and (max-width: 900px) {
.bath-tabletChoice .productNameText{
    font-size: 11px;
    margin-left: 0;
    line-height: 1.5;
    display: block;
}
}

.bath-tabletChoiceItem{
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%,-50%);
}

@media screen and (max-width: 900px) {
    .bath-tabletChoiceItem{
        top: 46%;
    }
}

.bath-tabletChoiceItem img{
    max-width: 209px;
}
@media screen and (max-width: 900px) {
    .bath-tabletChoiceItem img{
        max-width: 76px;
    }
}
.bath-tabletProduct{
    margin-bottom: 93px;
}
@media screen and (max-width: 900px) {
    .bath-tabletProduct{
        margin-bottom: 53px;
    }
}

.bath-tabletProductInner{
    max-width: 1018px;
    margin: 0 auto;
}

@media screen and  (min-width:901px) and ( max-width:1280px) {
    .bath-tabletProductInner{
    width: 90%;
    padding: 0 30px;
    }
}

@media screen and (max-width: 900px) {
    .bath-tabletProductInner{
        margin: 0 30px;
    }
}

.bath-tabletProduct.vitamin{
    padding-top: 140px;
    position: relative;
}

@media screen and (max-width: 900px) {
    .bath-tabletProduct.vitamin{
        padding-top: 50px;
    }
}
.bath-tabletProduct.vitamin:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #fff 71.39%);
    width: 100%;
    height: 180px;
}

@media screen and (max-width: 900px) {
    .bath-tabletProduct.vitamin:before{
        display: none;
    }
}

.bath-tabletProduct.vitamin .bath-tabletProductHead img{
    /* margin-top: -100px; */
    margin-top: clamp(-85px, 6.9vw, -100px);
}


.bath-tabletProduct .sectionTitle{
    text-align: center;
    letter-spacing: 0.15em;
    /* font-size: 28px; */
    font-size: clamp(19px, 1.9vw, 28px);
    position: relative;
}

.bath-tabletButton{
    position: relative;
    width: 50%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 90px;
}
@media screen and (max-width: 900px) {
    .bath-tabletButton{
        padding-bottom: 41px;
    }
}

.bath-tabletButton:after{
    content: "";
    width: 100%;
    height: 15px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.bath-tabletButton.vitamin:after{
    background: linear-gradient(90deg, #F5D511 -0.31%, #F5EC1A 33.69%, #F5E517 43.69%, #F5D711 73.69%, #F5D310 99.69%);
}

.bath-tabletButton.vitamin h3{
    color: #DDB23C;
}

.bath-tabletButton.collagen:after{
    background: linear-gradient(90deg, #153263 -0.93%, #164477 10.07%, #1971AA 31.07%, #165389 59.07%, #143F73 83.07%, #14386C 99.07%);
}

.bath-tabletButton.collagen h3{
    color: #5F8AB4;
}

.bath-tabletButton.collagen h3 sup{
    vertical-align: super;
    font-size: 14px;
}


.bath-tabletProductHead img{
    width: 100%;
    height: auto;
}
/* .productDetail.vitamin .ProductShops{
    border: solid 1px ;
} */

.productDetail.vitamin .ProductShops,
.productDetail.collagen .ProductShops{
    /* border: solid 1px #5b5452; */
    color: #5b5452;
    font-family: 'Montserrat';
    font-size: 20px;
    position: relative;
    /* line-height: 50px; */
    /* height: 50px; */
    width: 100%;
    margin: 18px 0 5px 0;
    /* background-color: #fff; */
}
/* .productDetail.vitamin .ProductShops:before,
.productDetail.collagen .ProductShops:before{
    content: "coming soon";
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    font-size: 24px;
    width: 100%;
    height: 50px;
} */

.productDetail.vitamin .productDetailInner:first-child,
.productDetail.collagen .productDetailInner:first-child{
    padding-bottom: 35px;
}

.productDetail.vitamin{
    background-color: #FAFAEA;
}

.productDetail.collagen{
    background-color: #EFF5FF;
}

.bath-tabletProduct.vitamin .bath-tabletPoint{
    box-shadow: 0px 0px 18px #E4DBA3;
}
.bath-tabletProduct.collagen .bath-tabletPoint{
    box-shadow: 0px 0px 18px #A3D2E4;
}
.bath-tabletPointWrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 38px;
    margin-top: 93px;
    margin-bottom: 61px;
}
@media screen and (max-width: 900px) {
    .bath-tabletPointWrap{
    grid-template-columns: 1fr;
    margin-top: 120px;
    gap: 16px;
    margin-bottom: 45px;
    }
}


.bath-tabletPoint{
    text-align: center;
}

.bath-tabletPoint .bath-tabletPointInner{
    display: flex;
    flex-direction: column;
}
@media screen and  (min-width:901px) and ( max-width:1280px) {
        .bath-tabletPoint .bath-tabletPointInner{
        padding-left: 30px;
        padding-right: 30px;
        }
}
@media screen and (max-width: 900px) {
    .bath-tabletPoint .bath-tabletPointInner{
        padding-left: 15px;
        padding-right: 15px;
    }
}

.bath-tabletPoint img{
    width: 100%;
    height: auto;
}

.bath-tabletPoint.Point01{
    grid-row: 1/2;
    grid-column: 1/3;
}

@media screen and (max-width: 900px) {
.bath-tabletPoint.Point01{
    grid-column: 1/2;
    }
}


.bath-tabletPoint.Point01 img{
    max-width: 810px;
}

.bath-tabletPoint.Point01 .bath-tabletPointInner{
    gap: 59px;
    padding-top: 68px;
    padding-bottom: 83px;
}

@media screen and (max-width: 900px) {
    .bath-tabletPoint.Point01 .bath-tabletPointInner{
        gap: 32px;
        padding-top: 25px;
        padding-bottom: 28px;
    }
}

.bath-tabletPoint.Point02{
    grid-row: 2/3;
    grid-column: 1/3;
}


@media screen and (max-width: 900px) {
.bath-tabletPoint.Point02{
    grid-column: 1/2;
    }
}
/* .bath-tabletPoint.Point02 .productTitle{
    margin-bottom: 47px;
} */

.bath-tabletPoint.Point02 img{
    max-width: 675px;
}

.bath-tabletPoint.Point02 .bath-tabletPointInner{
    padding-top: 68px;
    padding-bottom: 79px;
    gap: 17px;
}

@media screen and (max-width: 900px) {
    .bath-tabletPoint.Point02 .bath-tabletPointInner{
        padding-top: 25px;
        padding-bottom: 30px;
        gap: 23px;
    }
}

.bath-tabletPoint.Point03{
    grid-row: 3/4;
    grid-column: 1/2;
}
@media screen and (max-width: 900px) {
.bath-tabletPoint.Point03{
    grid-column: 1/2;
    }
}

.bath-tabletPoint.Point03 .bath-tabletPointInner{
    padding-top: 69px;
    gap: 10px;
}

@media screen and (max-width: 900px) {
    .bath-tabletPoint.Point03 .bath-tabletPointInner{
        padding-top: 26px;
        padding-bottom: 30px;
    }
}


.bath-tabletPoint.Point03 img{
    max-width: 383px;
}

@media screen and (max-width: 900px) {
    .bath-tabletProduct.collagen .bath-tabletPoint.Point03 img{
    max-width: 263px;
}
}
.bath-tabletPoint.Point04{
    grid-row: 3/4;
    grid-column: 2/3;
}
@media screen and (max-width: 900px) {
.bath-tabletPoint.Point04{
    grid-row: 4/5;
    grid-column: 1/2;
    }
}

.bath-tabletPoint.Point04 .bath-tabletPointInner{
    padding-top: 68px;
    gap: 10px;
}
@media screen and (max-width: 900px) {
    .bath-tabletPoint.Point04 .bath-tabletPointInner{
        padding-top: 24px;
        gap: 0;
        padding-bottom: 30px;
    }
}

.bath-tabletPoint.Point04 .productTitle{
    margin-bottom: 27px;
}

.bath-tabletPoint.Point04 img{
    max-width: 413px;
}

.bath-tabletPoint.Point03,
.bath-tabletPoint.Point04{
    height: 597px;
}
@media screen and (max-width: 900px) {
    .bath-tabletPoint.Point03,
.bath-tabletPoint.Point04{
    height: max-content;
}
}
/* .bath-tabletPoint.Point03 .productTitle,
.bath-tabletPoint.Point04 .productTitle{
        gap: 20px;

} */


.bath-tabletPoint.Point03 .productTitle:before,
.bath-tabletPoint.Point03 .productTitle:after,
.bath-tabletPoint.Point04 .productTitle:before,
.bath-tabletPoint.Point04 .productTitle:after{
    width: 115px;
}
@media screen and (max-width: 900px) {
.bath-tabletPoint.Point03 .productTitle:before,
.bath-tabletPoint.Point03 .productTitle:after,
.bath-tabletPoint.Point04 .productTitle:before,
.bath-tabletPoint.Point04 .productTitle:after{
    width: 60px;
}
}

.bath-tabletPoint .productTitle{
    font-size: clamp(20px, 1.9vw, 28px);
}


.bath-tabletHowtoInner{
    display: flex;
    gap: 42px;
    max-width: 870px;
    margin: 0 auto 10px auto;
}

@media screen and (max-width: 900px) {
    .bath-tabletHowtoInner{
        flex-direction: column;
        align-items: flex-end;
    }
}

.bath-tabletHowtoImage{
    position: relative;
}

.bath-tabletHowtoImage img{
    /* max-width: 263px; */
    max-width: clamp(125px, 18.2vw, 263px);
    flex-shrink: 0;
}

@media screen and (max-width: 900px) {
    .bath-tabletHowtoImage img{
        margin-right: 35px;
    }
}

.bath-tabletHowtoText{
    margin: 44px 0 44px 0;
    padding: 28px 50px;
}

@media screen and (max-width: 900px) {
    .bath-tabletHowtoText{
        margin-top: -77px;
        padding: 26px 15px;
        line-height: 1.5;
        margin-bottom: 5px;

    }
}

.bath-tabletHowtoText p{
    font-size: clamp(14px, 1.25vw, 18px);
}
.bath-tabletHowtoText p .bold{
    font-weight: bold;
}
@media screen and (max-width: 900px) {
    .bath-tabletHowtoAnnotation{
    font-size: 10px;
}
}
.bath-tabletProduct.vitamin .bath-tabletHowtoText{
    background-color: #FDF6CF;
}
.bath-tabletProduct.collagen .bath-tabletHowtoText{
    background-color: #E8EDF2;
}

.premiumProductIngredientList{
    display: flex;
    gap: 20px;
    margin:  100px 35px 0 35px;
    position: relative;
    display: none;
}

@media screen and (max-width: 900px) {
    .premiumProductIngredientList{
        flex-direction: column;
    margin:  40px 0 0 0;
    gap: 38px;

    }
}

.premiumProductIngredientList::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: linear-gradient(278.58deg, #9FB7DA 5.84%, #E7EDF5 56.23%, #9FB7DA 112.78%);
    filter: blur(2.5px);
    width: 100%;
    height: 31px;
    z-index: 1;
}

@media screen and (max-width: 900px) {
    .premiumProductIngredientList::before{
        width: 31px;
        height: 1200px;
    }
}

.premiumProductIngredientItem{
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    max-height: 324px;
    gap: 25px;
    background: #FFFFFF;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    width: calc(100% / 4);
    position: relative;
    z-index: 2;
}
@media screen and (max-width: 900px) {
    .premiumProductIngredientItem{
        width: auto;
        padding: 50px 35px;
        justify-content: flex-start;
        height: max-content;
        gap: 36px;
        max-height:none;

    }
}

.premiumProductIngredientItem img{
    max-width: 92px;
}

@media screen and (max-width: 900px) {
    .premiumProductIngredientItem img{
        max-width: 138px;
    }
}

.premiumProductIngredientItem .title{
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #6876A9;
    min-height: 50px;
    display: flex;
    align-items: center;
}
@media screen and (max-width: 900px) {
    .premiumProductIngredientItem .title{
        font-size: 26px;
        min-height: auto;
        display: block;
    }
}

.premiumProductIngredientItem .text{
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: left;
}

@media screen and (max-width: 900px) {
    .premiumProductIngredientItem .text{
        font-size: 17px;
        margin-top: -16px;
    }
}

/* バスタブレット */

/* ヘアケア - プレミアム */

.contents.awItem.premium{
    overflow-x: clip;
}
.premium img{
    width: 100%;
    height: auto;
}

.premiumContent{
    font-family: "Noto Sans JP", sans-serif;
    color: #5B5452;
}

.premiumAbout{
    padding-top: 117px;
    padding-bottom: 93px;
    background-image: url(/lab/imgs/hair_care/premium/premiumAbout_bg_pc.webp);
    background-position: top;
    color: #5B5452;
}

@media screen and (max-width: 900px) {
    .premiumAbout{
        padding-bottom: 53px;
    background-image: url(/lab/imgs/hair_care/premium/premiumAbout_bg_sp.webp);

    }
}


.premiumAboutTitle{
    max-width: 744px;
    margin: 0 auto 37px auto;
}


.premiumContentInner{
    max-width: 1018px;
    margin: 0 auto;
}
@media screen and (max-width: 900px) {
    .premiumContentInner{
        padding-right: 30px;
        padding-left: 30px;
    }
}

.premiumProductLinkInner{
    display: flex;
    justify-content: space-between;
}
@media screen and (max-width: 900px) {
    .premiumProductLinkInner{
        flex-direction: column;
        gap: 65px;
        align-items: center;
    }
}

.premiumProductLink{
    margin-top: 71px;
}

@media screen and (max-width: 900px) {
    .premiumProductLink{
        margin-top: 30px;
    }
}

.premiumProductBanner{
    max-width: 490px;
    filter: drop-shadow(0px 0px 20px rgba(104, 118, 169, 0.4));
    position: relative;
}

.premiumProductBanner.hair_mask:after{
    content: "*1 なめらかさ、うるおい感などの髪の手触りのこと";
    font-size: 10px;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    width: 100%;

}

.premiumProductBanner h2{
    position: relative;
    font-size: clamp(13px,1.38vw, 20px);
    line-height: 1.5;
    display: inline-block;
    margin-bottom: 26px;
    font-weight: bold;
}

@media screen and (max-width: 900px) {
    .premiumProductBanner h2{
        margin-bottom: 18px;
    }
}

.premiumProductBanner h2:before,
.premiumProductBanner h2:after{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 0px;
    border: 2px solid #6876A9;
}

@media screen and (max-width: 900px) {
    .premiumProductBanner h2:before,
    .premiumProductBanner h2:after{
        width: 20px;
        border: 1px solid #6876A9;
}
}

.premiumProductBanner h2:before{
    transform: rotate(60deg);
    /* left: -45px; */
    left: clamp(-35px, 3.1vw, -45px);
}



.premiumProductBanner h2:after{
    transform: rotate(-60deg);
    right: clamp(-35px, 3.1vw, -45px);
}

.premiumPoint.hair_mask{
    background-image: url(/lab/imgs/hair_care/premium/premiumPoint_hairmask_pc.webp);
    background-position: top;
    background-repeat: no-repeat;
    overflow: hidden;
}
.premiumPoint.hair_mask .premiumPointInner{
    padding-top: 158px;
    padding-bottom: 28px;
}
@media screen and (max-width: 900px) {
    .premiumPoint.hair_mask .premiumPointInner{
    padding-top: 56px;
    padding-bottom: 57px;
    }
}
.premiumPoint.hair_mask .productTitle{
    margin-bottom: 81px;
}
@media screen and (max-width: 900px) {
    .premiumPoint.hair_mask .productTitle{
        margin-bottom: 24px;
    }
}
.premiumPointHead{
    font-family: 'Noto Serif JP';
    font-size: clamp(25px, 4.5vw, 65px);
    line-height: 1;
    text-align: center;
    margin-bottom: 81px;
    font-weight: 600;
}
@media screen and (max-width: 900px) {
    .premiumPointHead{
        line-height: 1.3;
        margin-bottom: 40px;
    }
}

.premiumPointHead .sup{
    font-size: clamp(10px, 0.9vw, 14px);
}

.premiumPointList{
    margin-left: -70px;
    display: flex;
    flex-direction: column;
    gap: 129px;
    margin-bottom: 50px;
}

@media screen and (max-width: 900px) {
    .premiumPointList{
        margin-left: 0;
        gap: 49px;
        margin-bottom: 43px;
    }
}

.premiumPointItem{
    display: flex;
    gap: 49px;
    align-items: center;
    position: relative;
}

@media screen and (max-width: 900px) {
    .premiumPointItem{
        flex-direction: column;
        gap: 46px;
    }
}

.premiumPointText p{
    font-size: 16px;
    line-height: 2;
}

.premiumPointItem:nth-child(even){
    flex-direction: row-reverse;
    margin-left: 70px;
}
.premiumPointItem:nth-child(even) .premiumPointImage img{
    margin-right: -70px;
}

@media screen and (max-width: 900px) {
    .premiumPointItem:nth-child(even){
        flex-direction: column;
        margin: 0;
    }
    .premiumPointItem:nth-child(even) .premiumPointImage img{
        margin-left: -10px;
        margin-right: 0;
    }
}
.premiumPointItem:first-child .image img{
    max-width: 186px;
}

.premiumPointItem:first-child .image{
    position: absolute;
    top: -128%;
    right: -12%;
}
.premiumPointItem:last-child .image img{
    max-width: 109px;
}

.premiumPointItem:last-child .image{
    position: absolute;
    top: -80%;
    left: -7%;
}
@media screen and (max-width: 900px) {
    .premiumPointItem .image{
        display: none;
    }
}

.premiumPointImage{
    filter: drop-shadow(13px 18px 17px #C5CFE5);
    flex-shrink: 0;
}
.premiumPointImage img{
    max-width: 580px;
    min-width: 580px;
}
@media screen and (max-width: 900px) {
    .premiumPointImage img{
        width: 111%;
        margin-left: -35px;
        min-width: auto;
    }
}

.premiumPointItemTitle{
    /* font-size: 30px; */
    font-size: clamp(18px, 2vw, 30px);
    line-height: 1.5;
    color: #6876A9;
    font-weight: bold;
    margin-bottom: 35px;
    font-feature-settings: "palt";
}
@media screen and (max-width: 900px) {
    .premiumPointItemTitle{
        margin-bottom: 25px;
    }
}

.premiumPointAnnotation{
    font-size: 10px;
    line-height: 1.8;
}

.premiumProducts.hair_mask{
    padding-top: 135px;
    padding-bottom: 80px;
    text-align: center;
    background-image: url(/lab/imgs/hair_care/premium/premiumProduct_hairmask_pc.webp);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}
@media screen and (max-width: 900px) {
    .premiumProducts.hair_mask{
    background-image: url(/lab/imgs/hair_care/premium/premiumProduct_hairmask_sp.webp);
    padding-top: 48px;
    padding-bottom: 55px;
    }
}

.premiumProducts.hair_mask .productTitle{
    font-size: clamp(20px, 2.2vw, 32px);
}
.premiumProducts.hair_mask .productTitle:before,
.premiumProducts.hair_mask .productTitle:after{
    display: none;
}

.premiumProducts.hair_mask .productSubTitle{
    /* font-size: 26px; */
    font-size: clamp(15px, 1.8vw, 26px);
    margin-bottom: 39px;
    letter-spacing: 0.2em;
}

@media screen and (max-width: 900px) {
    .premiumProducts.hair_mask .productSubTitle{
        margin-bottom: 27px;
    }
}

.premiumProducts.hair_mask .premiumProductsHead{
    /* font-size: 38px; */
    font-size: clamp(23px, 2.6vw, 38px);
    line-height: 1;
    margin-bottom: 71px;
    font-family: 'Noto Serif JP';
    font-weight: 400;
}

@media screen and (max-width: 900px) {
    .premiumProducts.hair_mask .premiumProductsHead{
        margin-bottom: 29px;
    }
}

.premiumProducts.hair_mask .premiumProductsHead .large{
    font-size: 65px;
    font-size: clamp(25px, 4.5vw, 65px);
}
.premiumProducts.hair_mask .premiumProductsHead .color{
    color: #6876A9;
    font-size: clamp(27px, 4.5vw, 63px);
    font-weight: 600;
    display: block;
    margin: 20px 0;

}

/* .premiumProducts.hair_mask .premiumProductsHeadImage img{
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}

@media screen and (max-width: 900px) {
    .premiumProducts.hair_mask .premiumProductsHeadImage img{
        width: 100%;
        margin: 0;
    }
} */

.premiumProducts.hair_mask .premiumProductsHowto img{
    max-width: 870px;
    margin: 100px auto;
    display: block;
}
.premiumProducts.hair_mask .premiumProductsFree img{
    max-width: 578px;
    margin: 0 auto;
}
@media screen and (max-width: 900px) {
    .premiumProducts.hair_mask .premiumProductsFree img{
        width: 100%;
}
}

.productDetail.hair_mask{
    background-color: #F7F9FA;
}
.productDetail.hair_stick{
    background-color: #F8F7FA;
}
.productDetail.hair_mask .ProductShops .buybtnwrapp,
.productDetail.hair_stick .ProductShops .buybtnwrapp{
    background: linear-gradient(225deg, #EFE3F6 0%, #D7F5F1 50%, #D2DDF9 100%);
    /* position: relative;
    height: 50px; */
}

.productDetail.hair_mask .ProductShops .buybtnwrapp:before{
    color: #6876A9;
}
.productDetail.hair_stick .ProductShops .buybtnwrapp:before{
    color: #9B68A9;
}
/* .productDetail.hair_mask .ProductShops .buybtnwrapp:before,
.productDetail.hair_stick .ProductShops .buybtnwrapp:before{
    content: "coming soon";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    line-height: 50px;
    height: 50px;
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 20px;

} */



.productDetail.hair_mask .ProductFree,
.productDetail.hair_stick .ProductFree{
    grid-column: 1/2;
    grid-row: 3/4;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 12px;
}

@media screen and (max-width: 900px) {
.productDetail.hair_mask .ProductItem,
.productDetail.hair_stick .ProductItem{
    grid-row: 4/5;
}
}


@media screen and (max-width: 900px) {
    .productDetail.hair_mask .ProductShops,
.productDetail.hair_stick .ProductShops{
    grid-row: 5/6;
}
}

    .productDetail.hair_mask .ProductFree,
    .productDetail.hair_stick .ProductFree{
        color: #6C6C6C;
}
@media screen and (max-width: 900px) {
    .productDetail.hair_mask .ProductAnnotation,
    .productDetail.hair_stick .ProductAnnotation{
    grid-row: 6/7;
}

}



.premiumProducts.hair_stick{
    background-image: url(/lab/imgs/hair_care/premium/premiumPoint_hairstick_pc.webp);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 144px;
    padding-bottom: 107px;
}
@media screen and (max-width: 900px) {
    .premiumProducts.hair_stick{
    background-image: url(/lab/imgs/hair_care/premium/premiumPoint_hairstick_sp.webp);
    padding-top: 46px;
    padding-bottom: 66px;
    }
}

.premiumProducts.hair_stick .premiumPointInner{
    text-align: center;
}

.premiumProducts.hair_stick .productTitle{
    margin-bottom: -2px;
    /* font-size: 32px; */
    font-size: clamp(20px, 2.2vw, 32px);
}
@media screen and (max-width: 900px) {
    .premiumProducts.hair_stick .productTitle{
        margin-bottom: 30px;
    }
}

.premiumProducts.hair_stick .productSubTitle{
    font-size: clamp(18px, 1.6vw, 24px);
    letter-spacing: 0.1em;
    margin-bottom: 46px;
}

@media screen and (max-width: 900px) {
    .premiumProducts.hair_stick .productSubTitle{
        margin-bottom: 14px;
        font-size: 15px;
    }
}

.premiumProducts.hair_stick .productTitle:before,
.premiumProducts.hair_stick .productTitle:after{
    display: none;
}

.premiumProducts.hair_stick .premiumProductsHead{
    font-weight: 500;
    font-size: clamp(20px, 2.4vw, 35px);
    line-height: 1.5;
    margin-bottom: 75px;
    font-family: 'Noto Serif JP';
    margin-bottom: 49px;
}

@media screen and (max-width: 900px) {
    .premiumProducts.hair_stick .premiumProductsHead{
        margin-bottom: 30px;
    }
}

.premiumProducts.hair_stick .premiumProductsHead .large{
    /* font-size: 71px; */
    font-size: clamp(28px, 4.9vw, 71px);
}
.premiumProducts.hair_stick .premiumProductsHead .color{
    color: #9B68A9;
}
.premiumProducts.hair_stick .premiumProductsHeadImage{
    margin-bottom: 63px;
}
.premiumProducts.hair_stick .premiumProductsHeadImage img{
    max-width: 915px;
    margin-bottom: 49px;
}
@media screen and (max-width: 900px) {
    .premiumProducts.hair_stick .premiumProductsHeadImage img{
        margin-bottom: 34px;
    }
}

.premiumProducts.hair_stick .premiumProductsFeaturesImage{
    margin-bottom: 63px;
}
.premiumProducts.hair_stick .premiumProductsFeaturesImage img{
    max-width: 971px;
    margin-bottom: 63px;
}
@media screen and (max-width: 900px) {
    .premiumProducts.hair_stick .premiumProductsFeaturesImage img{
        margin-bottom: 88px;
    }
}

.premiumProductsHowto .productTitle{
    margin-bottom: 18px !important;
}
/* .premiumProductsHowto .productSubTitle{
    font-size: 19px !important;
} */
/* @media screen and (max-width: 900px) {
    .premiumProductsHowto .productSubTitle{
        font-size: 15px;
    }
} */

.premiumProductsHowtoList{
    max-width: 700px;
    display: flex;
    flex-wrap: wrap;
    margin: 32px auto 83px auto;
    gap: 29px 32px;
}

@media screen and (max-width: 900px) {
    .premiumProductsHowtoList{
    margin: 54px auto;
    }
}

.premiumProducts.hair_stick .premiumProductsFree{
    margin-top: 114px;
}

@media screen and (max-width: 900px) {
    .premiumProducts.hair_stick .premiumProductsFree{
        margin-top: 80px;
    }
}

.premiumProducts.hair_stick .premiumProductsFree img{
    max-width: 578px;
    margin: 0 auto;
}
@media screen and (max-width: 900px) {
    .premiumProducts.hair_stick .premiumProductsFree img{
        width: 100%;
}
}

.premiumProductsHowto .premiumProductsHowtoItem{
    position: relative;
    border-radius: 100vw 100vw 0 0;
    background-color: #fff;
    box-shadow: 0px 1px 20px #EADBEF;
    width: calc(100% / 2 - 66px);
    padding:  55px 25px 46px 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
@media screen and (max-width: 900px) {
    .premiumProductsHowto .premiumProductsHowtoItem{
    width: 100%;
    }
}

.premiumProductsHowto .premiumProductsHowtoItem:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #9B68A9;
    bottom: 0;
    left: 0;
}

.premiumProductsHowto .premiumProductsHowtoItem .title{
    font-family: 'Noto Serif JP';
    color: #9B68A9;
    font-size: 23px;
}
.premiumProductsHowto .premiumProductsHowtoItem .image{
    max-width: 170px;
}
.premiumProductsHowto .premiumProductsHowtoItem .text{
    font-size: 15px;
    text-align: left;
}
.linksLists{
    display: flex;
    flex-wrap: wrap;
    max-width: 861px;
    margin: 0 auto;
    gap: 20px 5px;
}
.linksLists li{
    width: calc(100% / 2 - 3px);
    text-align: left;
    color: #888;
}
@media screen and (max-width: 900px) {
    .linksLists li{
        width: 100%;
    }
}

.linksLists li img{
    margin-bottom: 15px;
}

/* ヘアケア - プレミアム */

/* メンズケア - オム */
.homme img{
    width: 100%;
    height: auto;
}
.hommeModal .modalWrapper{
    padding-top: 100px;
    padding-bottom: 100px;
}

.hommeModal .modalTit{
    font-weight: bold;
    background: linear-gradient(97.55deg, #251E1B -24.68%, #68AE94 32.7%, #72BFA9 56.61%, #42754E 97.25%, #538755 123.55%, #4D7E51 140.29%, #426E4A 159.41%, #41623A 188.1%, #415D33 212.01%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 70px;
    font-size: clamp(16px, 1.938vw, 20px);
}
.hommeModal .modalTit .sup{
    vertical-align: super;
}

.hommeModal .modalLead{
    color: #444;
    font-size: clamp(10px, 0.9vw, 13px);
    text-align: left;
    position: relative;
    padding-left: 120px;
    padding-left: clamp(70px, 8.3vw, 120px);
    margin-bottom: 70px;
}
.hommeModal .modalLead:before{
    content: "";
    background-color: #444;
    position: absolute;
    display: block;
    width: 100px;
    width: clamp(50px, 6.9vw, 100px);
    height: 1px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.hommeModal .modalLead .en{
    font-family: 'Montserrat';
}
.hommeModal .modalText{
    color: #444;
    line-height: 2;
    font-size: 14px;
    padding-bottom: 40px;

}
.hommeModal .modalText .sup{
    vertical-align: super;
}
@media screen and (max-width: 900px) {
.hommeModal .modalText{
    text-align: left;
}
}

.modalAnnotationText{
    font-size: 10px;
    text-align: center;
}
@media screen and (max-width: 900px) {
.modalAnnotationText{
    padding-bottom: 80px;
    text-align: left;

}
}


.hommeModal .modalContents{
    position: relative;
}
.hommeModal .homme_logo{
    position: absolute;
    bottom: 0;
    right: 0;
}

.hommeSkincare{
    margin-bottom: 94px;
}
@media screen and (max-width: 900px) {
    .hommeSkincare{
        margin-bottom: 0;
    }
}
.hommeInner{
    max-width: 1037px;
    margin: 0 auto;
}

@media screen and (max-width: 900px) {
    .hommeInner{
        margin: 0 30px;
    }
}

.hommeConceptInner{
    display: flex;
    gap: 38px;
    align-items: flex-start;
    justify-content: space-between;
}
@media screen and (max-width: 900px) {
    .hommeConceptInner{
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

.hommeConceptInner.philosophy{
    flex-direction: row-reverse;
    position: relative;
}
@media screen and (max-width: 900px) {
    .hommeConceptInner.philosophy{
        flex-direction: column;
    }
}
.hommeConceptInner.philosophy:before{
    content: "＊肌を整えること";
    font-size: 10px;
    position: absolute;
    bottom: 0;
    right: 0;
}

.hommeConcept{
    margin: 138px 0 80px 0;
    color: #444;
    text-align: center;
}

@media screen and (max-width: 900px) {
    .hommeConcept{
    margin: 90px 0 80px 0;
    }
}

.hommeConcept.philosophy{
    margin-bottom: 174px;
}
@media screen and (max-width: 900px) {
    .hommeConcept.philosophy{
        margin-bottom: 50px;
    }
}

.hommeConceptImage{
    flex-shrink: 0;
    max-width: 482px;
}
@media screen and (max-width: 900px) {
    .hommeConceptImage{
        padding-bottom: 20px;
    }
}
.hommeConceptText{
    text-align: center;
}
.hommeConceptTitle{
    font-size: clamp(24px, 1.9vw, 28px);
    line-height: 1.78;
    letter-spacing: 0.1em;
    font-family: 'Montserrat';
    margin-bottom: 20px;
}
@media screen and (max-width: 900px) {
    .hommeConceptTitle{
        margin-bottom: 28px;
    }
}

.hommeConceptText .logo{
    max-width: 60px;
    display: inline-block;
    margin-bottom: 30px;
}
.hommeConceptText .lead{
    font-size: clamp(17px, 1.6vw, 24px);
    line-height: 1.7;
    letter-spacing: 0.1em;
    font-family: 'Montserrat';
    margin-bottom: 30px;
}

@media screen and (max-width: 900px) {
    .hommeConceptText .lead{
        margin-bottom: 14px;
    }
}

.hommeConceptText .text{
    font-size: clamp(13px, 1.39vw, 20px);
    line-height: 1.5;
    letter-spacing: 0.02em;
    padding-bottom: 34px;
}

@media screen and (max-width: 900px) {
    .hommeConceptText .text{
        padding-bottom: 26px;
    }
}



.hommeSwiper img{
    width: 100%;
    height: auto;
}

.hommeHead{
    position: relative;
    max-width: 720px;
    margin: 76px auto 85px auto;
}

@media screen and (max-width: 1024px) {
    .hommeHead{
        max-width: none;
        width: 85%;
        max-width: 500px;
        margin: 76px auto 50px auto;

    }
}
.hommeHead .productTitle{
    letter-spacing: 0.3em;
    margin-bottom: 50px;
}
@media screen and (max-width: 900px) {
    .hommeHead .productTitle{
        margin-bottom: 30px;
    }
}

.hommeHead .productTitle:before,
.hommeHead .productTitle:after{
    display: none;
}

.hommeHead .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: -25px;
  z-index: 1;
}

.hommeHead .swiper-pagination .swiper-pagination-bullet {
  background-color: #000 ;
}

/* 前への矢印 */
.hommeHead .swiper-button-prev {
  left: -45px;
}
/* 次への矢印 */
.hommeHead .swiper-button-next {
  right: -45px;
}

@media screen and (max-width: 900px) {
    /* 前への矢印 */
.hommeHead .swiper-button-prev {
  left: -25px;
}
/* 次への矢印 */
.hommeHead .swiper-button-next {
  right: -25px;
}
}

@media screen and (max-width: 1024px) {
.hommeHead .swiper-button-prev::after,
.hommeHead .swiper-button-next::after{
    font-size: 20px;
}
}

.hommeHead .swiper-button-next,
.hommeHead .swiper-button-prev {
    --swiper-navigation-color: #000;
    z-index: 1;
}

.hommeFeaturesConLink{
    font-size: 14px;
    color: #444444;
    display: block;
    border: solid 1px #444444;
    padding: 1rem 0;
    max-width: 497px;
    margin: 40px auto 0 auto;
    position: relative;
    text-align: center;
}
@media screen and (max-width: 900px) {
    .hommeFeaturesConLink{
        font-size: 12px;
        padding: 0.4rem 0;
        width: 67%;

    }
}

.hommeFeaturesConLink::after{
    content: "";
    position: absolute;
    width: 6px;
    height: 3px;
    background: url(/lab/img/arw.svg) left center no-repeat;
    background-size: cover;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}


.hommeSkincare h2{
    /* font-size: 28px; */
    font-size: clamp(22px, 1.9vw, 28px);
    line-height: 1.78;
    text-align: center;
    margin-bottom: 66px;
}
@media screen and (max-width: 900px) {
    .hommeSkincare h2{
        margin-bottom: 83px;
    }
}


.hommeSkincare .tab-list {
  display: flex;
  gap: 24px;
}
@media screen and (max-width: 900px) {
    .hommeSkincare .tab-list{
        gap: 5px;
    }
}

.hommeSkincare .tab-item {
  border-radius: 5px 5px 0 0;
  background-color: #fff;
  border: solid 1px #2C2C2C;
  width: 50%;
  cursor: pointer;
  border-radius: 15px 15px 0px 0px;
  position: relative;
  height: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 900px) {
    .hommeSkincare .tab-item{
        height: 70px;
    }
}


.hommeSkincare .tab-content {
  border: solid 1px #2C2C2C;
  padding-top: 70px;
  padding-bottom: 50px;
}

@media screen and (max-width: 900px) {
    .hommeSkincare .tab-content{
        padding-top: 21px;
    }
}

.hommeSkincare .tab-panel {
  display: none;
}

.hommeSkincare .tab-item.active {
    color: #fff;
    border-bottom: solid 1px #538755;
    background: linear-gradient(97.55deg, #251E1B -24.68%, #68AE94 32.7%, #72BFA9 56.61%, #42754E 97.25%, #538755 123.55%, #4D7E51 140.29%, #426E4A 159.41%, #41623A 188.1%, #415D33 212.01%);
    justify-content: center;
}

@media screen and (max-width: 900px) {
    .hommeSkincare .tab-item.active{
        min-width: 168px;
    }
}


.hommeSkincare .tab-item.tabIcon:before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
}
@media screen and (max-width: 900px) {
    .hommeSkincare .tab-item.tabIcon:before{
        bottom: 71px;
        left: 50%;
        transform: translateX(-50%);
    }
}
/* 未押下 */
.hommeSkincare .tab-item.left.tabIcon:before{
    width: 174px;
    height: 159px;
    background-image: url(/lab/imgs/homme/hommeTabIcon_01_pc.webp);
}
@media screen and (max-width: 900px) {
    .hommeSkincare .tab-item.left.tabIcon:before{
    width: 97px;
    height: 71px;
    background-image: url(/lab/imgs/homme/hommeTabIcon_01_sp.webp);
    }
}

/* 押下済 */
.hommeSkincare .tab-item.active.left.tabIcon:before{
    width: 174px;
    height: 159px;
    background-image: url(/lab/imgs/homme/hommeTabIcon_01_active_pc.webp);
}
@media screen and (max-width: 900px) {
    .hommeSkincare .tab-item.active.left.tabIcon:before{
    width: 97px;
    height: 71px;
    background-image: url(/lab/imgs/homme/hommeTabIcon_01_active_sp.webp);
}
}

/* 未押下 */
.hommeSkincare .tab-item.right.tabIcon:before{
    width: 174px;
    height: 159px;
    background-image: url(/lab/imgs/homme/hommeTabIcon_02_pc.webp);
}
@media screen and (max-width: 900px) {
    .hommeSkincare .tab-item.right.tabIcon:before{
    width: 97px;
    height: 71px;
    background-image: url(/lab/imgs/homme/hommeTabIcon_02_sp.webp);
    }
}

/* 押下済 */
.hommeSkincare .tab-item.active.right.tabIcon:before{
    width: 174px;
    height: 159px;
    background-image: url(/lab/imgs/homme/hommeTabIcon_02_active_pc.webp);
}
@media screen and (max-width: 900px) {
    .hommeSkincare .tab-item.active.right.tabIcon:before{
    width: 97px;
    height: 71px;
    background-image: url(/lab/imgs/homme/hommeTabIcon_02_active_sp.webp);
}
}






.hommeSkincare .tab-panel.active {
    display: block;
}
.hommeProduct{
    margin-bottom: 206px;
}
@media screen and (max-width: 900px) {
    .hommeProduct{
        margin-bottom: 100px;
    }
}

.hommeProductInner{
    padding-top: 87px;
}

@media screen and (max-width: 900px) {
    .hommeProductInner{
        padding-top: 53px;
    }
}

.hommeProductInner > h2{
    /* font-size: 28px; */
    font-size: clamp(20px, 1.9vw, 28px);
    line-height: 1.78;
    letter-spacing: 0.05em;
    color: #444;
    margin-bottom: 71px;
    text-align: center;
}
@media screen and (max-width: 900px) {
    .hommeProductInner > h2{
        margin-bottom: 101px;
    }
}

.hommeProductItem{
    position: relative;
    border: solid 1px #000;
    padding: 0 80px;
    margin-bottom: 184px;
}
@media screen and (max-width: 900px) {
    .hommeProductItem{
        padding: 0 15px;
    }
}

.hommeProductItem:last-child{
    margin-bottom: 0;
}

.hommeProductItem:before{
    position: absolute;
    top: 29px;
    left: 15px;
    writing-mode: vertical-rl;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 67px;
    font-size: clamp(45px, 4.6vw, 67px);
    color: #D5D4D4;
    letter-spacing: 0.05em;
}
@media screen and (max-width: 900px) {
    .hommeProductItem:before{
        left: 3px;
    }
}

.hommeProductItemInner{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 94px;
    width: 100vw;
    max-width: 919px;
}

@media screen and (max-width: 900px) {
    .hommeProductItemInner{
        flex-direction: column;
        width: 100%;
        align-items: center;
        margin-bottom: 50px;
    }
}
.hommeProductItem.facewash{
    margin-bottom: 142px;
}

@media screen and (max-width: 900px) {
    .hommeProductItem.facewash{
        margin-bottom: 104px;
    }
}



.hommeProductItem.facewash .hommeContents.buy{
    margin-bottom: 119px;
}

@media screen and (max-width: 900px) {
    .hommeProductItem.facewash .hommeContents.buy{
        margin-bottom: 59px;
    }
}


.hommeProductItem.lotion{
    margin-bottom: 218px;
}
@media screen and (max-width: 900px) {
    .hommeProductItem.lotion{
        margin-bottom: 60px;
    }
}

.hommeProductItem.lotion .hommeContents.buy{
    margin-bottom: 105px;
}

@media screen and (max-width: 900px) {
    .hommeProductItem.lotion .hommeContents.buy{
        margin-bottom: 81px;
    }
}


.hommeProductItem.facewash:before{
    content: "FACE WASH";
}
.hommeProductItem.essence:before{
    content: "ESSENCE";
    top: 56px;
}
@media screen and (max-width: 900px) {
    .hommeProductItem.essence:before{
        top: 33px;
    }
}
.hommeProductItem.lotion:before{
    content: "LOTION";
    top: 56px;
}
@media screen and (max-width: 900px) {
    .hommeProductItem.lotion:before{
        top: 29px;
    }
}

.hommeProductItem.serum:before{
    content: "ALL IN ONE SERUM";
    height: 373px;
    /* font-size: 55px; */
    font-size: clamp(44px, 3.8vw, 55px);
    line-height: 1.1;
    top: 57px;
    left: 23px;
}
@media screen and (max-width: 900px) {
    .hommeProductItem.serum:before{
        height: 300px;
        top: 30px;
        left: 17px;
    }
}

.hommeProductItem.facewash .hommeProductHead{
    margin-top: -74px;
}
@media screen and (max-width: 900px) {
    .hommeProductItem.facewash .hommeProductHead{
        margin-top: -52px;
    }
}
.hommeProductItem.essence .hommeProductHead{
    margin-top: -43px;
}
@media screen and (max-width: 900px) {
    .hommeProductItem.essence .hommeProductHead{
        margin-top: -20px;
    }
}

.hommeProductItem.lotion .hommeProductHead{
    margin-top: -47px;
}

@media screen and (max-width: 900px) {
    .hommeProductItem.lotion .hommeProductHead{
        margin-top: -40px;
    }
}
.hommeProductItem.serum .hommeProductHead{
    margin-top: -33px;
}

.hommeProductItem.facewash .hommeProductHead img{
    /* max-width: 200px; */
    max-width: clamp(123px, 13.8vw, 200px);
}

.hommeProductItem.essence .hommeProductHead img{
    max-width: 159px;
}
@media screen and (max-width: 900px) {
    .hommeProductItem.essence .hommeProductHead img{
        max-width: 90px;
    }
}

.hommeProductItem.lotion .hommeProductHead img{
    max-width: 157px;
}
@media screen and (max-width: 900px) {
    .hommeProductItem.lotion .hommeProductHead img{
        max-width: 92px;
    }
}

.hommeProductItem.serum .hommeProductHead img{
    max-width: 157px;
}
@media screen and (max-width: 900px) {
    .hommeProductItem.serum .hommeProductHead img{
        max-width: 98px;
    }
}

.hommeProductItem.facewash .hommeProductItemInner{
    gap: 73px;
}
@media screen and (max-width: 900px) {
    .hommeProductItem.facewash .hommeProductItemInner{
    gap: 25px;
}

}
.hommeProductItem.essence .hommeProductItemInner{
    gap: 94px;
    margin-bottom: 84px;
}
@media screen and (max-width: 900px) {
    .hommeProductItem.essence .hommeProductItemInner{
        gap: 55px;
        margin-bottom: 46px;
    }
}
.hommeProductItem.essence .hommeContents.ingredient .hommeContentsTitle{
    background-color: transparent;
}
@media screen and (max-width: 900px) {
    .hommeProductItem .hommeContents.ingredient .hommeContentsTitle img{
    width: 111%;
    margin-left: -20px;
    margin-bottom: 9px;
}

}

.hommeProductItem.essence .hommeContents.ingredient .hommeContentsTitle.large{
    margin-left: -20px;
    width: 100%;
    padding: 0;
}
@media screen and (max-width: 900px) {
    .hommeProductItem.essence .hommeContents.ingredient,
    .hommeContentsTitle.large{
        margin-left: 0;
    }
}

.hommeProductItem.essence .hommeContentsTitle sup{
   margin-left: -10px;
}

.hommeProductItem.lotion .hommeProductItemInner{
    gap: 96px;
    margin-bottom: 84px;
}
@media screen and (max-width: 900px) {
    .hommeProductItem.lotion .hommeProductItemInner{
        gap: 55px;
        margin-bottom: 47px;
    }
}

.hommeProductItem.serum .hommeProductItemInner{
    gap: 96px;
    margin-bottom: 86px;
}

@media screen and (max-width: 900px) {
    .hommeProductItem.serum .hommeProductItemInner{
        gap: 59px;
    }
}


.hommeProductText{
    max-width: 589px;
    padding-top: 80px;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 900px) {
    .hommeProductText{
        padding-top: 0;
    }
}

.hommeProductTitle{
    font-size: 20px;
    border-bottom: solid 1px #000;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

@media screen and (max-width: 900px) {
    .hommeProductTitle{
    line-height: 1.4;
    padding-bottom: 30px;
    letter-spacing: 0;
    margin-bottom: 33px;
    }
}

.hommeProductTitle .large{
    /* font-size: 32px; */
    font-size: clamp(27px, 2.2vw, 32px);
}

.hommeProductName{
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin-bottom: 26px;
    letter-spacing: 0.07em;
}



.hommeContents{
    margin-bottom: 82px;
}
@media screen and (max-width: 767px) {
}
.hommeContentsTitle{
    background-color: #000;
    color: #fff;
    display: inline-block;
    padding: 0 0.8rem;
    font-weight: bold;
    transform: skewX(-10deg);
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    position: relative;
}

@media screen and (max-width: 900px) {
    .hommeContentsTitle{
        margin-left: 6px;
    }
}

.hommeContentsTitle .sup{
    position: absolute;
    top: 8px;
}

.hommeContentsTitle.large{
    font-size: clamp(18px, 2vw, 30px);
    padding: 0 1.5rem;
    margin-left: -37px;
    transform: skewX(-19deg);
}

@media screen and (max-width: 900px) {
    .hommeContentsTitle.large{
        margin-left: 0;
    }
}

.hommeContents.way{
    width: 100vw;
    max-width: 921px;
}

@media screen and (max-width: 900px) {
    .hommeContents.way{
        width: 100%;
        margin-bottom: 52px;
    }
}
.hommeContents.skincare_step{
    margin-bottom: 90px;
}

@media screen and (max-width: 900px) {
    .hommeContents.skincare_step{
        margin-top: 0;
    }
}

.hommeContentsInner.way{
    display: flex;
    align-items: stretch;
    gap: 21px;
    margin-top: 30px;
    margin-left: -22px;
}
@media screen and (max-width: 900px) {
    .hommeContentsInner.way{
        flex-direction: column;
        margin-left: 0;
        gap: 53px;
    }
}

.hommeContentsInner.way .hommeContentsTitle.large{
    margin-left: -20px;
}

@media screen and (max-width: 900px) {
    .hommeContentsInner.way .hommeContentsTitle.large{
    margin-left: 0;
}
}

.hommeProductList{
    margin-bottom: 36px;
    margin-top: 10px;
}
@media screen and (max-width: 900px) {
    .hommeProductList{
        margin-top: 22px;
        margin-left: 8px;
        margin-bottom: 21px;
    }
}
.hommeProductListItem{
    position: relative;
    display: flex;
    align-items: flex-start;
    /* font-size: 18px; */
    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 2;
    gap: 20px;
    font-feature-settings: "halt";
}
@media screen and (max-width: 900px) {
    .hommeProductListItem{
        gap: 9px;
    }
}
.hommeProductListItem:before{
    content: "";
    margin-top: 5px;
    width: 25px;
    height: 20px;
    flex-shrink: 0;
    background-image: url(/lab/imgs/homme/icon-check.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* .wayItem{
    width: 50%;
} */
.wayItem{
    position: relative;
    max-width: 450px;
}

@media screen and (max-width: 900px) {
    .wayItem{
        width: 100%;
        max-width: none;
    }
}

.wayItem h3{
    /* font-size: 20px; */
    font-size: clamp(15px, 1.38vw, 20px);
    padding-left: 58px;
    position: relative;
    z-index: 2;
    font-weight: bold;
}

@media screen and (max-width: 900px) {
    .wayItem h3{
        padding-left: 0;
    }
}

.wayItem h3:after{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #000;
    position: absolute;
    bottom: -10px;
    left: 0;
}
@media screen and (max-width: 900px) {
    .wayItem h3:after{
        background-origin: -5px;
    }
}
.wayItem h3:before{
    /* font-size: 48px; */
    font-size: clamp(32px, 3.3vw, 48px);
    line-height: 1;
    color: #EBE9E9;
    font-family: "Montserrat", sans-serif;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
    z-index: -1;
}

@media screen and (max-width: 900px) {
    .wayItem h3:before{
        top: 0;
        left: -2px;
    }
}


.wayItem p{
    /* font-size: 18px; */
    font-size: clamp(12px, 1/25vw, 18px);
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin-bottom: -5px;
}

.wayItem.first h3:before{
    content: "01";
}

.wayItem.first h3{
    margin-bottom: 41px;
}
@media screen and (max-width: 900px) {
    .wayItem.first h3{
        margin-bottom: 27px;
    }
}

.wayItem.second h3:before{
    content: "02";
}
.wayItem.second h3{
    margin-bottom: 15px;
}

@media screen and (max-width: 900px) {
    .wayItem.second h3{
    margin-bottom: 29px;
}
    .wayItem.second p{
        margin-bottom: 18px;
    }

}


.wayItem figure{
    max-width: 394px;
    margin: 0 auto;
}
@media screen and (max-width: 900px) {
    .wayItem figure{
        max-width: none;
        width: 90%;
    }
}
.wayItem .swiper-slide,
.wayItem.second{
    display: flex;
    flex-direction: column;
    height: -webkit-fill-available;
    justify-content: space-between;
}

/* 前への矢印 */
.wayItem .swiper-button-prev {
  left: 0;
}
@media screen and (max-width: 900px) {
    .wayItem .swiper-button-prev{
        left: -13px;
    }
}
/* 次への矢印 */
.wayItem .swiper-button-next {
  right: 0;
}

@media screen and (max-width: 900px) {
    .wayItem .swiper-button-next{
        right: -13px;
    }
}

.wayItem .swiper-button-prev::after,
.wayItem .swiper-button-next::after{
    font-size: 18px;
}

.wayItem .swiper-button-next,
.wayItem .swiper-button-prev {
    --swiper-navigation-color: #000;
    top: 72%;
}

.hommeStepList{
    display: flex;
    gap: 23px;
    margin-top: 60px;
}

@media screen and (max-width: 900px) {
    .hommeStepList{
        flex-direction: column;
        margin-top: 21px;
        max-width: 350px;
        margin: 20px auto 0 auto;
    }
}

.hommeStepItem{
    border: solid 1px #CFCFCF;
    padding: 27px 20px 4px 20px;
    position: relative;
    width: calc(100% / 4);
    display: block;
}
@media screen and (max-width: 900px) {
    .hommeStepItem{
        width: auto;
        padding:  22px 0;
        align-items: center;
        display: flex;
        gap: 20px;
    }
}

.hommeStepItem.active:before{
    content: "";
    width: 100%;
    height: 9px;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;

}

.hommeStepItem:after{
    content: "";
    position: absolute;
    top: 50%;
    right: -19px;
    transform: translateY(-50%);
    width: 12px;
    height: 28px;
    background-color: #000;
    clip-path: polygon(12px 50%, 0% 0%, 0% 28px);
}
@media screen and (max-width: 900px) {
    .hommeStepItem:after{
        bottom: -18%;
        top: auto;
        right: auto;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }
}

.hommeStepItem:last-child::after{
    display: none;
}
.hommeStepItem figure{
    margin: 0 auto;
    flex-shrink: 0;
}

@media screen and (max-width: 900px) {
    .hommeStepItem figure{
        margin: 0;
    }
}
.hommeStepItem.step1 figure{
    width: 40px;
}
@media screen and (max-width: 900px) {
    .hommeStepItem.step1 figure{
        width: 34px;
    }
}

.hommeStepItem.step1 .hommeStepItemHead{
    gap: 31px;
}
@media screen and (max-width: 900px) {
.hommeStepItem.step1 .hommeStepItemHead{
        gap: 13px;
    }
}
.hommeStepItem.step2 figure{
    width: 34px;
}

@media screen and (max-width: 900px) {
    .hommeStepItem.step2 figure{
        width: 27px;
    }
}

.hommeStepItem.step2 .hommeStepItemHead{
    gap: 28px;
}

@media screen and (max-width: 900px) {
.hommeStepItem.step2 .hommeStepItemHead{
        gap: 0;
    }
}

.hommeStepItem.step3 figure{
    width: 34px;
}
@media screen and (max-width: 900px) {
    .hommeStepItem.step3 figure{
        width: 26px;
    }
}

.hommeStepItem.step3 .hommeStepItemHead{
    gap: 20px;
}
@media screen and (max-width: 900px) {
.hommeStepItem.step3 .hommeStepItemHead{
        gap: 0;
    }
}
@media screen and (max-width: 900px) {
.hommeStepItem.step3 .hommeStepItemHead .title{
       font-size: 18px;
    }
}

.hommeStepItem.step4 figure{
    width: 36px;
}
@media screen and (max-width: 900px) {
    .hommeStepItem.step4 figure{
    width: 26px;
}
}

.hommeStepItem.step4 .hommeStepItemHead{
    gap: 34px;
}

@media screen and (max-width: 900px) {
.hommeStepItem.step4 .hommeStepItemHead{
        gap: 0;
    }
}

.hommeStepItem .text{
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.5;
    width: 100%;
}
@media screen and (max-width: 900px) {
    .hommeStepItem .text{
    margin-top: 0;
    max-width: 133px;
}

}

.hommeStepItem.step4 .text{
    margin-top: 26px;
}

@media screen and (max-width: 900px) {
    .hommeStepItem.step4 .text{
        margin-top: 0;
    }
}

.hommeStepItemHead{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: solid 1px #CFCFCF;
    margin-bottom: 30px;
}
@media screen and (max-width: 900px) {
    .hommeStepItemHead{
        flex-direction: column;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
        padding-left: 0;
        width: 90px;
    }
}

.hommeStepItemHead .number{
    width: 56px;
    height: 56px;
    background-color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    font-family: "Montserrat", sans-serif;
    color: #fff;
    font-size: 19px;
    font-weight: 900;
    line-height: 1;
}

.hommeStepItemHead .number .small{
    font-size: 10px;
}

.hommeStepItemHead .title{
    font-size: 20px;
    font-weight: bold;
}

.productDetail.homme .productDetailInner{
    padding: 0;
    grid-template-columns: 294px auto;
    grid-template-rows: auto auto;
    justify-content: normal;
    gap: 37px 65px;
    max-width: 920px;
    width: 100vw;
}
@media screen and (max-width: 900px) {
    .productDetail.homme .productDetailInner{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    width: 100%;
    gap: 10px;

    }
}

.productDetail.homme{
    margin-top: 36px;
}
@media screen and (max-width: 900px) {
    .productDetail.homme{
        margin-top: 21px;
    }
}

.productDetail.homme .ProductTitle{
    border-bottom: solid 1px #666666;
    padding-bottom: 12px;
    letter-spacing: 0.05em;
    margin-bottom: 21px;
}
@media screen and (max-width: 900px) {
    .productDetail.homme .ProductTitle{
        font-size: 19px;
        margin-bottom: 15px;
    }
}

.productDetail.homme .ProductImage{
    border: solid 1px #CFCFCF;
    flex-shrink: 0;
    max-width: 294px;
    grid-column: 1/2;
    grid-row: 1/2;
}

@media screen and (max-width: 900px) {
    .productDetail.homme .ProductImage{
        margin: 0 auto;
    }
}


.productDetail.homme .ProductText > .dtsabTxt{
    font-size: 12px;
    line-height: 1.4;
    border: solid 1px #888888;
    padding: 10px 15px;
    display: inline-block;
    min-width: 387px;
    margin-bottom: 60px;
    max-width: 423px;
}
@media screen and (max-width: 900px) {
    .productDetail.homme .ProductText > .dtsabTxt{
        min-width: auto;
        max-width: none;
        margin-bottom: 30px;
    }
}

.productDetail.homme .ProductItem{
    padding-top: 6px;
    grid-column: 2/3;
    grid-row: 1/2;
}

@media screen and (max-width: 900px) {
    .productDetail.homme .ProductItem{
    grid-column: 1/2;
    grid-row: 2/3;
    }
}


.productDetail.homme .ProductAnnotation{
    grid-column: 1/3;
    grid-row: 2/3;
}
@media screen and (max-width: 900px) {
.productDetail.homme .ProductAnnotation{
    grid-column: 1/2;
    grid-row: 3/4;
    }
}

.productDetail.homme .ProductName{
    margin-bottom: 25px;
}
.productDetail.homme .ProductShops{
    margin-top: 0;
}
/* .productDetail.homme .ProductShops.coming-soon{
    position: relative;
    height: 50px;
}

.productDetail.homme .ProductShops.coming-soon:before{
    content: "coming soon";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    text-align: center;
    font-size: 20px;
    background-color: #000;
    color: #fff;
    width: 100%;
    height: 50px;
    line-height: 50px;
} */

@media screen and (max-width: 900px) {
    .productDetail.homme .ProductShops{
        width: 100%;
        margin: 0;
    }
}

.productDetail.homme .ProductShops .buybtnwrapp{
    background-color: transparent;
    margin: 0;
    padding: 0;
}
.productDetail.homme .ProductShops .buybtns{
    width: 100%;
}

@media screen and (max-width: 900px) {
    .productDetail.homme .ProductShops .buybtns{
        padding: 0;
    }
}

.productDetail.homme .buybtns li:is(.rakuten, .amazon, .yahoo, .qoo10) a {
    color: #fff;
    border: none;
    background-color: #000;
}


.hommeContentsInner.ingredient{
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 18px auto 0 auto;
    max-width: 667px;
    padding-left: 22px;
}
@media screen and (max-width: 900px) {
    .hommeContentsInner.ingredient{
        flex-direction: column;
        padding-left: 0;
        gap: 8px;
    }
}

.hommeContentsInner.ingredient p{
    font-size: 18px;
    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 1.9;
    letter-spacing: 0.06em;
    max-width: 321px;
}

@media screen and (max-width: 900px) {
    .hommeContentsInner.ingredient p{
        line-height: 1.5;
        max-width: none;
    }
}

.hommeContentsInner.ingredient figure{
    max-width: 322px;
    flex-shrink: 0;
}

.hommeContentsInner.features img{
    max-width: 881px;
    margin:  47px auto 0 auto;
}
@media screen and (max-width: 900px) {
    .hommeContentsInner.features img{
    margin:  21px auto 0 auto;
    }
}

.hommeApproach{
    background-image: url(/lab/imgs/homme/hommeApproach_bg_pc.webp);
    background-size: cover;
}

.hommeApproachInner{
    padding-top: 139px;
    padding-bottom: 54px;
    color: #fff;
    text-align: center;
}

@media screen and (max-width: 900px) {
    .hommeApproachInner{
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

.hommeApproachInner h2{
    font-family: 'Noto Serif JP';
    /* font-size: 30px; */
    font-size: clamp(19px, 2vw, 30px);
    font-weight: bold;
    margin-bottom: 37px;
    line-height: 3.4;
}
@media screen and (max-width: 1440px) {
    .hommeApproachInner h2{
        line-height: 1.5;
        margin-bottom: 29px;
    }
}

.hommeApproachInner h2 sup{
    vertical-align: super;
    /* font-size: 18px; */
    font-size: clamp(10px, 1.25vw, 18px);
}
.hommeApproachHead img{
    max-width: 818px;
}

@media screen and (max-width: 900px) {
    .hommeApproachHead img{
        width: 69%;
        margin-bottom: 10px;
    }
}

.hommeApproachContentsWrap{
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: flex-start;
    margin-bottom: 63px;
}
@media screen and (max-width: 900px) {
    .hommeApproachContentsWrap{
        gap: 53px;
        margin-bottom: 42px;
    }
}

.hommeApproachAnnotation{
    font-size: 10px;
    line-height: 1.6;
    text-align: left;
}

.hommeApproachContents{
    display: flex;
    gap: 54px;
    justify-content: center;
}
@media screen and (max-width: 900px) {
    .hommeApproachContents{
        flex-direction: column;
        gap: 20px;
    }
}

.hommeApproachContents h3 sup{
    vertical-align: super;
}

.hommeApproachContents:first-child{
    max-width: 1032px;
    margin-left: 10px;
}
@media screen and (max-width: 900px) {
    .hommeApproachContents:first-child{
        margin-left: 0;
    }
}

.hommeApproachContents:last-child{
    max-width: 1083px;
    flex-direction: row-reverse;
    width: 100vw;
}

@media screen and (max-width: 900px) {
    .hommeApproachContents:last-child{
        flex-direction: column;
        width: 100%;
    }
}
.hommeApproachText{
    padding-top: 38px;
    text-align: left;
}
@media screen and (max-width: 900px) {
    .hommeApproachText{
        padding-top: 0;
    }
}

.hommeApproachText h3{
    text-shadow: 0px 0px 13px #FFFFFF;
    /* font-size: 30px; */
    font-size: clamp(18px, 2vw, 30px);
    line-height: 2;
    position: relative;
}
@media screen and (max-width: 900px) {
    .hommeApproachText h3{
        margin-bottom: 8px;
    }
}

.hommeApproachText h3 sup{
    position: absolute;
    top: 15px;
    font-size: 18px;
}
@media screen and (max-width: 900px) {
    .hommeApproachText h3 sup{
        position: static;
        font-size: 10px;
    }
}

.hommeApproachText p{
    /* font-size: 20px; */
    font-size: clamp(14px, 1.38vw, 20px);
    line-height: 2.75;
    position: relative;
}
@media screen and (max-width: 900px) {
    .hommeApproachText p{
        line-height: 1.75;
    }
}
.hommeApproachText p sup{
    vertical-align: super;
}

.hommeApproachImage{
    max-width: 450px;
    flex-shrink: 0;
}
@media screen and (max-width: 900px) {
    .hommeApproachImage{
        max-width: none;
        width: 100%;
    }
}

.hommeProductItem.essence .hommeProductText{
    padding-top: 83px;
}

@media screen and (max-width: 900px) {
    .hommeProductItem.essence .hommeProductText{
        padding-top: 0;
    }
}
.hommeProductItem.essence .hommeProductTitle{
    margin-bottom: 13px;
}
@media screen and (max-width: 900px) {
    .hommeProductItem.essence .hommeProductTitle{
        margin-bottom: 33px;
    }
}

.hommeProductItem.essence .hommeProductName{
    margin-bottom: 11px;
}
@media screen and (max-width: 900px) {
    .hommeProductItem.essence .hommeProductName{
        margin-bottom: 32px;
    }
}

.hommeProductItem.essence .hommeProductList{
    margin-bottom: 13px;
}
@media screen and (max-width: 900px) {
    .hommeProductItem.essence .hommeProductList{
        margin-bottom: 24px;
    }
}
.hommeContents.ingredient{
    margin-bottom: 50px;
}

.hommeContents.ingredient .hommeContentsTitle{
    background-color: transparent;
    padding: 0;
    margin-left: -37px;
    width: 106%;
}

@media screen and (max-width: 900px) {
    .hommeContents.ingredient .hommeContentsTitle{
    margin-left: 21px;
    width: 90%;
    }
}

.hommeContents.features{
    margin-bottom: 75px;
}
@media screen and (max-width: 900px) {
    .hommeContents.features{
        margin-bottom: 48px;
    }
}

.hommeProductItem.essence .hommeContents.buy{
    margin-bottom: 121px;
}

@media screen and (max-width: 900px) {
    .hommeProductItem.essence .hommeContents.buy{
        margin-bottom: 64px;
    }
}

.hommeProductItem.essence{
    margin-bottom: 144px;
}

@media screen and (max-width: 900px) {
    .hommeProductItem.essence{
        margin-bottom: 95px;
    }
}
.hommeProductItem.lotion .hommeProductTitle{
    margin-bottom: 14px;
}

@media screen and (max-width: 900px) {
    .hommeProductItem.lotion .hommeProductTitle{
        margin-bottom: 34px;
    }
}
.hommeProductItem.lotion .hommeProductName{
    margin-bottom: 14px;
}
@media screen and (max-width: 900px) {
    .hommeProductItem.lotion .hommeProductName{
        margin-bottom: 48px;
    }
}

.hommeProductItem.lotion .hommeProductList{
    margin-bottom: 31px;
}

@media screen and (max-width: 900px) {
    .hommeProductItem.lotion .hommeProductList{
        margin-bottom: 28px;
    }
}

.hommeProductItem.lotion .hommeContents.features{
    margin-bottom: 52px;
}
.hommeProductItem.serum .hommeProductName{
    margin-bottom: 10px;
}
.hommeProductItem.serum .hommeProductList{
    margin-top: 28px;
    margin-bottom: 12px;
}

.hommeContentsInner.functions{
    text-align: center;
}

.hommeFunctionsList img{
    max-width: 787px;
    margin: -7px auto 0 auto;
}

@media screen and (max-width: 900px) {
    .hommeFunctionsList img{
        width: 87%;
        margin-top: 21px;
    }
}

.hommeProductItem.serum .hommeContents.buy{
    margin-bottom: 89px;
}

@media screen and (max-width: 900px) {
    .hommeProductItem.serum .hommeContents.buy{
        margin-bottom: 71px;
    }
}


/* メンズケア - オム */

.dtaddtxts{ font-size: 12px; padding-top: 20px;}
.vitminDetail.orgbg{ background: #FCEEDF}
.orgbg .dtpointtxt span{ background: #FFEDC6;}
.orgbg .ckList{ background: #FFEDC6;}
.vitminDetail.pplBg{ background: #FCF5FF}


.vitminDetail.eyeibg{ background: #FCF5FF;}

.vitminDetail.eybg{ background: #FCF5FF;}

.vitminDetail.bgblu{ background: #EAFAFD;}

.bgblu .ckList{background: #E4EDF0}
.bgblu .dtpointtxt span{ background: #E4EDF0;}
.bgblu .ckList{ background: #E4EDF0;}


.vitminDetail.pnkbg{ background: #FFEBEB;}
.pnkbg .ckList{background: #FFBABB}
.pnkbg .dtpointtxt span{ background: #FFBABB;}

.vitminDetail.ylwbg{ background: #FAFAEA}
.collagenDetail.bluebg{ background: #EFF5FF}
.bodyCareDetail{
    padding: 80px 0 116px;
}

.bgblu .ckList{background: #E4EDF0}
.ylwbg .dtpointtxt span{ background: #FFF500;}
.bgblu .ckList{ background: #E4EDF0;}



.buybtnwrapp{ width: 63%; margin-left: auto; margin-right: auto; box-sizing: border-box; padding-top: 20px; margin-bottom: 30px;}
.buybtns{display: flex;}
.buybtns li{ width:25%; box-sizing: border-box; padding: 0 3px;}
.buybtns li a{  border: 1px solid #000; background: #fff; font-size: 12px; font-weight: 600; display: block; text-align: center; line-height: 14px;  padding: 10px; border-radius: 7px; transition: all 0.4s 0.1s ease-out; letter-spacing: 0.18em;}
.buybtns li.rakuten a{ color: #C40011; border: 1px solid #C40011;}
.buybtns li.rakuten a:hover{ background: #C40011; color: #fff; opacity: 1; }
.buybtns li.amazon a{ color: #FF9900; border: 1px solid #FF9900;}
.buybtns li.amazon a:hover{ background: #FF9900; color: #fff; opacity: 1; }
.buybtns li.yahoo a{ color: #EB3335; border: 1px solid #EB3335;}
.buybtns li.yahoo a:hover{ background: #EB3335; color: #fff; opacity: 1; }
.buybtns li.qoo10 a{ color: #1262AE; border: 1px solid #1262AE;}
.buybtns li.qoo10 a:hover{ background: #1262AE; color: #fff; opacity: 1; }
.buybtns li a span{ font-size: 16px;}


@media screen and (max-width: 900px){
	.buybtnwrapp{ width: 100%;  padding-left: 0; box-sizing: border-box; padding-top: 20px; margin-bottom: 30px;}
	.buybtns{ display: block;}
	.buybtns li{ width:50%; box-sizing: border-box; margin-bottom: 10px; padding: 0; display: inline-block;}
	.buybtns li:nth-child(odd){ padding-right: 5px;}
	.buybtns li:nth-child(even){ padding-left: 5px;}
	.buybtns li.rakuten a{ background: #C40011; color: #fff; opacity: 1; }
	.buybtns li.amazon a{ background: #FF9900; color: #fff; opacity: 1; }
	.buybtns li.yahoo a{ background: #EB3335; color: #fff; opacity: 1; }
	.buybtns li.qoo10 a{ background: #1262AE; color: #fff; opacity: 1; }
}

@media screen and (min-width: 901px){

	.buybtnwrapp{  box-sizing: border-box; padding-top: 20px; padding-bottom: 20px; margin-top: 30px; margin-bottom: 30px; width: 100%; background: #f7f7f7;}
.buybtns{display: flex; width: 63%; margin-left: auto; margin-right: auto; justify-content: center;}
}

.ckList{ text-align: center;}

.orgbgatdtxt{ text-align: right; font-size: 10px; padding: 0 10px 10px; margin-top: -20px;
 }
.spectxt{ font-size: 10px; margin-bottom: 20px; font-weight: 600; letter-spacing: 0.18em;}
.spectxt.vtmspec:before{ content: ""; display: inline-block; vertical-align: middle; width: 7px; height: 7px; border-radius: 50%; background: #EECA2D; font-size: 10px; margin-right: 10px; }

.spectxt.pnspec:before{ content: ""; display: inline-block; vertical-align: middle; width: 7px; height: 7px; border-radius: 50%; background: #1CB5C1; font-size: 10px; margin-right: 10px; }

.spectxt.pemspec:before{ content: ""; display: inline-block; vertical-align: middle; width: 7px; height: 7px; border-radius: 50%; background: #D44262; font-size: 10px; margin-right: 10px; }

.spectxt.cerspec:before{ content: ""; display: inline-block; vertical-align: middle; width: 7px; height: 7px; border-radius: 50%; background: #4B8D31; font-size: 10px; margin-right: 10px; }

.spectxt.nirespec:before{ content: ""; display: inline-block; vertical-align: middle; width: 7px; height: 7px; border-radius: 50%; background: #E42527; font-size: 10px; margin-right: 10px; }

.spectxt.bklspec:before{ content: ""; display: inline-block; vertical-align: middle; width: 7px; height: 7px; border-radius: 50%; background: #5B50BE; font-size: 10px; margin-right: 10px; }

.spectxt.blkspec:before{ content: ""; display: inline-block; vertical-align: middle; width: 7px; height: 7px; border-radius: 50%; background: #000; font-size: 10px; margin-right: 10px; }

.spectxt.exoc:before{ content: ""; display: inline-block; vertical-align: middle; width: 7px; height: 7px; border-radius: 50%; background: #520F69; font-size: 10px; margin-right: 10px; }

.spectxt.collagen:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2A4DA3;
    font-size: 10px;
    margin-right: 10px;
}

.spectxt.collagenBodycare:before{ content: ""; display: inline-block; vertical-align: middle; width: 7px; height: 7px; border-radius: 50%; background: #002060; font-size: 10px; margin-right: 10px; }
.contactbtn2 {
    text-align: center;
    padding-top: 30px;
}
.cpdtTxt.ptoo{ padding-top: 0;}

.contactbtn2 a {
    border: 1px solid #444444;
    background-color: #fff;
    font-size: 13px;
    box-sizing: border-box;
    padding: 25px 95px;
    display: block;
    max-width: 274px;
    margin: 0 auto;
    box-sizing: border-box;
}


@media screen and (max-width: 900px){
	.ckList { text-align: left;}
.ckList li {
    display: inline-block;
    width: 50%;
}
	.orgbgatdtxt{ text-align: left; font-size: 10px; margin-top: -10px; padding-bottom: 15px;}
	.dtpointtxt span { text-align: center;}
	.dtaddtxts {
    font-size: 10px;
    padding-top: 10px;
}
}


.icnpdimg{ position: relative;}
.deimgcon img.pdicons{ position: absolute; width: 93px; left: 10px; top: 10px; height: auto;}


.bodertxt{ display: inline-block; border: 1px solid #444; padding: 3px;}
@media screen and (max-width: 900px){
	.deimgcon img.pdicons{ position: relative; margin: 0 auto; display: block;}
	.ckList li.wide100w{ width: 100%;}
	.pcatstxtss{ padding-left: 30px;}
}

.dtpointtxt span.underline{background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-right: 0;
text-decoration: underline; display: inline-block;}

.ctg02 .ctgmimg img{ width: 50%;}


@media screen and (min-width: 901px){
	.pcatstxtss{text-align: left;
    display: block;
    padding-left: 29px;
	font-size: 10px;
    color: #888;
    line-height: 16px;}
	.ddcenter{ text-align: center;}

	.ckList ul.lefttxtUls{ text-align: left; padding-left: 10%}
	.ckList ul.lefttxtUls li{ vertical-align: top;}
		.dttxtcon .ckList .vtlist li{ vertical-align: top}

}

.ddcenter{ margin-top: 30px;}

.imguvhead {
    background-color: #F7F7F1;
    padding: 75px 0 80px;
    position: relative;
}
.uvimgpc img{ width: 100%; height: auto;}
@media screen and (max-width: 900px){
    .uvimgpc {
        margin-bottom:10px;
    }

	.slideImagPtn .deimgcon{ width: 100%}
	.slideImagPtn .dttxtcon{ width: 100%; padding-left: 0;}
	.slideImagPtn .dtpointtxt span {
        display: inline-block;
        width: 49%;
		box-sizing: border-box;
    }
	.slideImagPtn .dtpointtxt span:first-child{ margin-right: 2%;}
	.slideImagPtn .dtpointtxt span:last-child{ margin-left: 2%;}
	.icnpdimg{ margin-bottom: 10px;}


}
#UVmilkR {
    background-color: #FFFCFC;
}
#UVmilkC {
    background-color: #FAFAEA;
}
.bgDttxt3{ margin-bottom: 20px!important; width: 70%; height: auto; margin-left:56px; }
.bgDttxt3 img{ width: 100%; height: auto;}


.main a:hover{ opacity: 1 !important;}
.uvimgsp img{ width:100%; height:auto;}
.uvtext { font-size:16px; color:#444444; font-weight: bold;}

.ctgtxtdayey.specalco{ font-size: 11px; color: #B29000; border: 2px solid #B29000; border-radius: 3px; background: #fff; display: inline-block; padding: 5px 10px; margin-bottom: 25px;}
.ctgtxtdayey{}

.slick-track .thumbnail-img img{ width: 110px;}
.slick-track .thumbnail-img{ margin-right: 15px; margin-top: 15px;}

.pnnkbgpt{background: #FFF8F8}

.thumbnail-img{ cursor: pointer;}
.atdtxts{ font-size: 10px; line-height: 14px; padding-top: 20px; text-align: left;}
@media screen and (max-width: 900px){
	.ctgtxtdayey {
    margin-bottom: -15px;
}
	.ctgtxtdayey.specalco{
    margin-bottom: -15px;
}
	.ckList ul.taLeft{ text-align: left; padding-left: 20px;}
	.ckList ul.taLeft li.spsingle{ width: 100%}
	.ckList ul.taLeft li {
    width: 50%;
    padding-left: 5px;
    box-sizing: border-box;
}
	.spw100{ width: 100%;}

	.spw100 .slick-track .thumbnail-img img {
    width: 100%;
}
}
/* ================================
ヘッダー
================================ */
button{
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}

  .header__button {
    margin-left: -20px;
  }
  @media screen and (max-width: 900px) {
    .header__button{
        margin-left: 0;
        display: none;
    }
  }
  .header {
    height: 70px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 5;
    background-color: #fff;
  }
  .header__logo{
    padding-left: 20px;
  }
  .header__logo img{
    max-width: 134px;
  }
  .no-scroll {
    overflow: hidden;
  }

  .header__inner {
    height: inherit;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header__list {
    display: none;
    height: inherit;
    padding: 0 20px;
    cursor: pointer;
  }
  @media screen and (min-width: 901px) {
    .header__list {
      display: block;
    }
  }
  .header__list.active {
    background-color: #F5F5F5;
    display: block;
    width: -webkit-fill-available;
    height: calc(100dvh - 190px);
    padding: 0;
    position: fixed;
    z-index: 5;
    top: 70px;
    padding: 60px 20px;
    transform: translateY(0);
    overflow-y: auto;
  }
  @media screen and (max-width: 900px) {
    .header__list.active > ul {
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
    }
  }
  .header__list.active .header__button {
    margin-top: 20px;
  }


.mega-menu__item{
    list-style-type: disc;
    list-style-position: inside;
}


@media screen and (max-width: 900px) {
    .header__list.active .header__item--product .mega-menu__item{
        width: calc(100% / 2 - 5px);
    }
    .header__list.active .header__item--product .mega-menu__item img{
    width: 100%;
    max-width: none;
    }

}
.mega-menu__item img{
    max-width: 150px;
}



.mega-menu__unlabel{
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding-left: 20px;
    margin-top: 25px;
}

.mega-menu__unlabel li{
position: relative;
cursor: pointer;
}
.mega-menu__unlabel li:before{
content: "∟";
display: block;
position: absolute;
font-size: 12px;
left: -14px;
top: 50%;
transform: translateY(-50%);
}




  .header__list > ul {
    font-size: 20px;
    font-weight: bold;
    height: inherit;
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: flex-end;
  }
  @media screen and  (min-width:901px) and ( max-width:1160px) {
    .header__list > ul {
        gap: 20px;
    }
  }
  .header__item{
    font-size: clamp(11px, 0.9vw, 13px);
    letter-spacing: 0.18em;
    cursor: pointer;
    position: relative;
  }

  @media screen and (max-width: 900px) {
    .header__item{
        font-size: 20px;
        font-weight: 600;
        width: 100%;

    }
    .header__item.header__item--arrow > a{
        display: inline-block;

        position: relative;
        width: 100%;
    }
    .header__item.header__item--arrow > a::after{
        content:"";
        width: 7px;
        height: 13px;
        display: block;
        background-image: url(../common/img/arw_sp.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        right: 0;
        top: 0;
        top: 50%;
        transform: translateY(-50%);
    }
  }

  .header__item:before{
    content: "";
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background-color: #282A29;
  }
  @media screen and  (min-width:901px) and ( max-width:1160px) {
    .header__item:before{
        left: -10px;
    }
  }
@media screen and (max-width: 900px) {
    .header__item:before{
        background-color: unset;
    }
}

@media screen and (max-width: 900px) {
    .header__item.header__item--product{
        order: -1;
    }
}
  .header__item:last-child:before{
    background-color: transparent;
  }

  /* メガメニュー */
  .mega-menu__wrap{
    display: none;
    background-color: #EFEFEF;
    position: absolute;
    top: 37px;
    left: 50%;
    transform: translateX(-50%);
  }
@media screen and (max-width: 900px) {
    .mega-menu__wrap{
        display: block;
        position:relative;
        top: auto;
        left: auto;
        transform: none;
        background-color: transparent;
    }
}

.mega-menu__wrap--medium{
    width: 520px;
}
  .mega-menu__wrap--large{
    width: 840px;
  }

  @media screen and (max-width: 900px) {
    .mega-menu__wrap--large,
    .mega-menu__wrap--medium{
        width: 100%;
    }
  }
.mega-menu__wrap--large .mega-menu__item,
.mega-menu__wrap--small .mega-menu__item,
.mega-menu__wrap--medium .mega-menu__item{
    list-style: none;
}
  .mega-menu__wrap--small{
    width: 255px;
  }
  @media screen and (max-width: 900px) {
    .mega-menu__wrap--small{
        width: 100%;
    }
  }

  /* 各ブランドメニュー */
.header__item--brand .mega-menu__wrap--small{
    left: auto;
    right: -20px;
    transform: translateX(0);
    letter-spacing: normal;

}

@media screen and (max-width: 900px) {
    .header__item--brand .mega-menu__wrap--small{
        right: 0;
    }
}

.header__item--brand .mega-menu__title{
    position: relative;
    margin-bottom: 33px;
    padding-top: 25px;
}

@media screen and (max-width: 900px) {
    .header__item--brand .mega-menu__title{
        position: relative;
        margin-bottom: 20px;
        padding-top: 24px;
    }
}
.header__item--brand .mega-menu__title:before{
    content: "";
    display: block;
    width: 15px;
    height: 1px;
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
}


  .mega-menu__inner{
    position: relative;
    padding: 30px 20px;
}

  @media screen and (max-width: 900px) {
    .mega-menu__inner{
        padding: 0;
        margin-top: 20px;
    }
  }

  .mega-menu__inner:before{
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #EFEFEF;
    display: block;
    height: calc(34px / 2);
    width: 20px;
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
  }
  @media screen and (max-width: 900px) {
    .mega-menu__inner:before{
        display: none;
    }
  }
  .mega-menu__title{
    font-size: 14px;
  }

  @media screen and (max-width: 900px) {
    .mega-menu__title{
        font-size: 16px;
      }
  }

  .mega-menu__list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }


  .header__item--brand .mega-menu__list{
    flex-direction: column;
    gap: 20px;
    font-size: 15px;
    font-feature-settings: "palt";
  }
@media screen and (max-width: 900px) {
    .header__item--brand .mega-menu__list{
gap: 20px;
      }

}
@media screen and (min-width: 1600px) {
    .header__item--brand .mega-menu__list{
    gap: 25px;
    }
  }

.mega-menu__item--corporate{
    position: relative;
    padding-top: 25px;
    margin-bottom: 25px;

}


.mega-menu__item--corporate::before{
   content: "";
   display: block;
   width: 100%;
   height: 1px;
   background-color: #333;
   position: absolute;
   left: 0;
   top: 0;

}

@media screen and (min-width: 1600px) {
    .mega-menu__item--corporate{
        padding-top: 41px;
        margin-bottom: 41px;    }
  }

.mega-menu__item--sns{
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 70px;
    margin: 0 auto;
}

.sns__icon{
    width: 20px;
    height: 20px;
}

  .hamburger {
    display: none;
    position: relative;
    cursor: pointer;
    width: 40px;
    height: 40px;
  }
  @media screen and (max-width: 900px) {
    .hamburger {
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0;
      width: 70px;
      height: 70px;
      background-color: #EFEFEF;
      z-index: 2;
    }
  }
  .hamburger span {
    display: block;
    position: absolute;
    width: inherit;
    transition: 0.4s ease;
    background-color: #000;
    border-radius: 2px;
    height: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
  }
  .hamburger span:nth-child(1) {
    top: 28px;

  }

  .hamburger span:nth-child(2) {
    bottom: 28px;


  }
  .hamburger.open span:nth-child(1) {
    transform: rotate(45deg);
    top: 36px;
    left: 18px;
  }
  .hamburger.open span:nth-child(2) {
    transform: rotate(-45deg);
    bottom: 33px;
    left: 18px;
  }