@charset "UTF-8";
/* CSS Document */

.mb5p{ margin-bottom: 5% !important;}
.mb10p{ margin-bottom: 10% !important;}
.mb15p{ margin-bottom: 15% !important;}
.mb20p{ margin-bottom: 20% !important;}

  .mb100 { margin-bottom: 100px !important;}
  .mb60 { margin-bottom: 60px !important;}
.mb40 { margin-bottom: 40px !important;}
  .mb30 { margin-bottom: 30px !important;}
  .mb20 { margin-bottom: 20px !important;}
  .mb15 { margin-bottom: 15px !important;}
  .mb10 { margin-bottom: 10px !important;}
  .mb8 { margin-bottom: 8px !important;}
  .mb0 { margin-bottom: 0px !important;}
  .center { text-align: center;}
.left { text-align: left !important;}

  @media screen and (max-width: 767px) {
    .mb100 { margin-bottom: 20% !important;}
    .mb60 { margin-bottom: 25% !important;}
    .mb30 { margin-bottom: 10% !important;}
    .mb20 { margin-bottom: 8% !important;}
    .mb15 { margin-bottom: 3% !important;}
    .mb10 { margin-bottom: 2% !important;}
    .mb8 { margin-bottom: 1% !important;}
    .sp_mb10 { margin-bottom: 10px !important;}
	.sp_mb20 { margin-bottom: 20px !important;}
    .sp_mb30 { margin-bottom: 10% !important;}
    .sp_mb40 { margin-bottom: 40px !important;}
    .sp_mb60 { margin-bottom: 18% !important;}
	.sp-left { text-align: left !important;}
	  }

  /*col-set*/
  .col-set {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(100% + 30px);
    -webkit-box-lines: multiple;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .col1-2 { width: calc(50% - 30px);}
  .col1-3 { width: calc(33.33333333% - 30px);}
  .col2-3 { width: calc(66.66666666% - 30px);}
  .col1-4 { width: calc(25% - 30px);}
  .col3-4 { width: calc(75% - 30px);}
  .col1-5 { width: calc(20% - 30px);}
  .col1-6 { width: calc(16.66666666% - 30px);}
  .col1000-2618 { width: calc(38.2% - 30px);}
  .col1618-2618 { width: calc(61.8% - 30px);}

  .col1-2,
  .col1-3,
  .col2-3,
  .col1-4,
  .col3-4,
  .col1-5,
  .col1-6,
  .col1000-2618,
  .col1618-2618 {
    margin-right: 30px;
  }

  @media screen and (max-width: 767px) {
    .col-set {
      width: calc(100% + 5px);
    }

    .col1-2,
    .col1-3,
    .col2-3,
    .col1-4,
    .col3-4,
    .col1-5,
    .col1-6,
    .col1000-2618,
    .col1618-2618 {
      width: calc(100% - 5px);
      margin-right: 5px;
    }

    .sp-col1-2 {
      width: calc(50% - 5px);
    }
  }


.col_center{ display: flex; justify-content: center;}
.flex{ display: flex;}

.fade-in {
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition: opacity 0.6s ease-out, transform 1.2s ease-out;
  will-change: opacity, visibility;
}

.fade-in.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
}
.fade-in.--2 {
  transition-delay: 300ms;
}
.fade-in.--3 {
  transition-delay: 500ms;
}

.lp_block * {
  font-family:"Lato", 'Noto Sans JP', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.lp_block {
  color: #333333;
}

.lp_block p{ word-break: break-all; color: #333333; line-height: 2.3; font-size: 1.6rem; font-family: "Noto Sans JP", serif;}

.container-min {
  max-width: 860px;
  margin: auto;
}
div.cont_block{ padding: 0 3vw;}

section.mvSec{ background: #f6f6ee;}
@media (max-width: 767px) {
.lp_block {
    margin-top: 0px!important;
	min-width: 360px;
  }
div.cont_block{ padding: 0 7vw;}
}

section.conceptSec{ padding: 8% 0;}

section.creator{ border-top: 1px solid #CAD89A; background:url(https://osaji.net/special_products/2025holidaymakeupcollection/img/greeen_haikei.jpg); padding: 8% 0;}

section.creator div.box{ border: 1px solid #CAD89A; background: #ffffff; width: 80%; margin: 0 auto; max-width: 1000px;}
section.creator p{ line-height: 1.8; font-weight: 300;}
section.creator p.c_text{ display: table; margin: 0 auto;}
section.creator div.box h3{ margin: 20px 0!important; font-weight: 400; font-size: 2rem!important;}
section.creator div.box .col-set{ padding: 3vw;}
section.creator div.box a img { width: 40px;}

.lp_block h3{ font-size: 2.5rem; margin: 40px 0 20px 0; color: #333333; font-family: "Noto Sans JP", serif;}
.lp_block h3 span{ background: #DCE8C9; padding: 8px 13px;}
.lp_block h4{ font-size: 1.35rem; color: #333333; font-family: "Noto Sans JP", serif;}

p.sub_text{ font-size: 70%; text-align: center; line-height: 1.3;}
p.sub_text02{ font-size: 90%;}
p.sub_title{ font-size: 1.5rem; font-weight: 400!important;}



section#makeup_lineup{ background: #ffffff;}
section#makeup_lineup hr{ border-bottom: 1px solid #DCE8C9; margin-bottom: 13%;}
section#makeup_lineup h4{ font-size: 2.3rem; margin-bottom: 20px;}
section#makeup_lineup h5{ font-size: 1.8rem; color: #333333; margin-bottom: 30px; font-weight: 300; letter-spacing: 1.5px;}
section#makeup_lineup h5 span{ font-size: 80%;}
section#makeup_lineup h6{ font-size: 1.6rem; margin-bottom: 10px; font-weight: 300; letter-spacing: 1px; line-height: 1.8;}
section#makeup_lineup p{ line-height: 1.8; font-weight: 300;}
section#makeup_lineup .col-set{ align-items: flex-end;}

p.bay_btn { text-align: center; font-size: 1.6rem;}
p.bay_btn a{ width: 60%; display: inline-block; text-align: center; text-decoration: none; border: 1px solid #333333; padding: 5px; color: #333333; max-width: 200px;}

p.bay_btn:hover{ opacity: 0.7;}


.photo_fade { position: relative; width: 100%; max-width: 600px; aspect-ratio: 4 / 3.3; overflow: hidden;}
.photo_fade img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: fadeLoop 12s infinite ease-in-out;}
.photo_fade img:nth-child(1) { animation-delay: 0s;}
.photo_fade img:nth-child(2) { animation-delay: 6s;}

@keyframes fadeLoop {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  40%  { opacity: 1; }
  60%  { opacity: 0; }
  100% { opacity: 0; }
}



div.product h4{ line-height: 1.5; font-size: 1.75rem;}
div.product h5{ font-size: 1.5rem; line-height: 1.6; font-weight: 600;}
div.product p.sub_text{ line-height: 1;}
div.product p.limited{ border: 1px solid #0C3349; display:table; color: #0C3349;  padding: 4px 8px; line-height: 1; margin: -5px auto 20px;}

div.product p{ line-height: 2;}
div.product p.bay_btn a{ font-size: 1.5rem; letter-spacing: 1px;}
	
.lp_block .novelty em{ font-size: 50%;}
.lp_block .novelty span{display: inline-block;}

.lp_block .novelty p,
.lp_block .novelty dl{ font-size:1.4rem; font-weight: 300;}

.lp_block .novelty dl { display:grid; grid-template-columns: 70px 1fr; column-gap: 16px; row-gap: 12px; align-items:start;}
.lp_block .novelty dl dt { margin:0; border: 1px solid; text-align: center; letter-spacing: 1px;}
.lp_block .novelty dl dd { margin:0; }
.lp_block .novelty p span.line{ background: linear-gradient(transparent 80%, #DCE8C9 80%); line-height: 1; font-weight: 600;}

.lp_block .footer_Sec .col-set h3{ font-size: 1.2rem; letter-spacing: 1px; color: #c56774; margin: 10px 0 20px 0;}
.lp_block .footer_Sec .col-set h4 { font-size: 2rem; font-family: 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;}
.lp_block .footer_Sec .col-set hr{ border-bottom: 1px solid; width: 40%; margin: 20px 0;}
.lp_block .footer_Sec .col-set p{font-weight: 300; font-size: 1.4rem; line-height: 2;}

.lp_block .footer_Sec p.sub_text { font-size: 70%; line-height: 2; text-align: left;}

@media (max-width: 767px) {
  .pcOnly{
      display: none !important;
    }
}
@media (min-width: 767px) {
  .spOnly{
    display: none !important;
  }
}


@media (max-width: 767px) {
.lp_block p{  font-size: 1.25rem;}
.sp-col1-2 { width: calc(50% - 20px); margin-right: 20px; display: flex; flex-direction: column; justify-content: space-between;}
section.creator div.box img{ width: 50%; margin: 0 auto; display: block;}
section.creator div.box div.col-set{padding: 0 3vw;}
p.sub_title{ font-size: 1.5rem;}	

p.sub_text{ font-size: 70%;}


p.sub_text span.tax,
p.sub_text02 span.tax{ font-size: 80%;}
	
.lp_block h3{ font-size: 2rem;}
section#makeup_lineup h4{ font-size: 2rem; margin-bottom: 10px;}
section#makeup_lineup h5{ font-size: 1.5rem;}
section#makeup_lineup h6{ font-size: 1.3rem; }
section#makeup_lineup .col-set{ align-items:stretch;}
}


@media (max-width: 500px) {	
#wapper { padding-top: 0px !important; }
}




/* PC */

#Wrap { width: 100%;}

  .lp_block {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    z-index: 0;
  }

  /* layout */
  .lp_contents_inner {
    grid-column: 2;
    margin-inline: auto;
    width: 37.8rem;
	  background: #ffffff;
  }





@media (max-width: 769px) { 
.lp_contents {
  width: 100%;
  max-width: calc(750 * 37.8rem/750);
}
	
.lp_contents_inner { width: 100%;}
}




/**/
.profileSec {
  max-width: 1000px;
  margin: 0 auto;
  padding: 57px 70px;
	border: 1px solid #c56774;
  display: flex;
}
.profileSec .img {
  flex: 0 0 160px;
}
.profileSec .text {
  padding-left: 44px;
}
.profileSec .text h2 {
  margin-bottom: 23px;
  color: #333333;
  font-family: Lato;
font-size: 17px;
  font-weight: 400;
  line-height: 28.8px;
  text-align: left;
  text-indent: -.5em;
}
.profileSec .text h3 {
  color: #333333;
  margin-bottom: 0;
  font-family: Lato;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
    line-height: 1.5;
  margin: 0;
}
.profileSec .text h3 a {
  display: inline-block;
  margin-left: 20px;
  vertical-align: bottom;
}
.profileSec .text h3 a img {
  width: 18px;
}
.profileSec .text h4 {
  margin-bottom: 19px;
  color: #333333;
  font-family: Lato;
  font-size: 15px;
  font-weight: 300;
  line-height: 18px;
  text-align: left;
}
.profileSec .text p {
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 24px;
  text-align: left;
  color: #333333;
}

@media (max-width: 767px) {
  .profileSec {
    padding: 40px 15px;
    margin-bottom: 30px;
    display: block;
  }
  .profileSec .img {
    width: 140px;
    margin: 0 auto 20px;
  }
  .profileSec .text {
    padding: 0;
  }
  .profileSec .text h2 {
        text-indent: inherit;
        margin-bottom: 13px;
        font-size: 14px;
        line-height: 0;
  }
  .profileSec .text h3 {
    margin-bottom: 7px;
    font-size: 16px;
    line-height: 19px;
  }
  .profileSec .text h4 {
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 14px;
  }
  .profileSec .text p {
    font-size: 12px;
    line-height: 1.8;
  }
	
	p.sp_text_c{ padding: 0 3vw; font-size: 1.2rem!important;}	
}

/*gallery*/

/* ラジオボタン非表示 */
.gallery input { display: none; }

/* メイン画像を重ねる */
.gallery .main {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
aspect-ratio: 4 / 3.3;
}
.gallery .main img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none; /* クリックできないように */
  user-select: none; /* 選択もできないように */
}

/* 切替 */
#img1:checked ~ .main .pic1 { opacity: 1; }
#img2:checked ~ .main .pic2 { opacity: 1; }
#img3:checked ~ .main .pic3 { opacity: 1; }
#img4:checked ~ .main .pic4 { opacity: 1; }
#img5:checked ~ .main .pic5 { opacity: 1; }
#img6:checked ~ .main .pic6 { opacity: 1; }
#img7:checked ~ .main .pic7 { opacity: 1; }
/* サムネイル */
.gallery .thumbs {
}
.gallery .thumbs img {
/*  width: 60px;*/
  cursor: pointer;
  border: 2px solid transparent;
  transition: border 0.2s;
}
.gallery .thumbs label:hover img {
  border-color: #999;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .gallery .thumbs img {
/*    width: 20vw;*/
/*    max-width: 70px;*/
  }
}