@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;}
  .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: 6% !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);
    }
  }

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

.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: #6B605A;
}

.lp_block p{ word-break: break-all;}

@media (max-width: 767px) {
.lp_block {
    padding-top: 0px;
	min-width: 360px;
  }
}
	
.mvSec { margin-bottom: 50px;}
.mvSec p {
  font-family: "Lato", 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  margin-top: 31px;
}
	
.mvSec p.h1 {
font-family: "Noto Serif JP", serif;
font-weight: normal;
font-size: 2rem;
line-height: 1.5;
text-align: center;
  margin-top: 30px;
  margin-bottom: 20px;
	  letter-spacing: 0.1rem;
}

.lp_block section h3{ font-family: 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; font-weight: 500; line-height: 1.5;}
.lp_block section h4{ font-size: 1.65rem; margin-bottom: 20px; font-family: 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; font-weight: 500; line-height: 1.5; letter-spacing: 1px;}
.lp_block section h4 span{ font-size: 80%;}
.lp_block section h5{ font-size: 1.6rem; margin-bottom: 10px; line-height: 1.5; font-weight: 700;}

.lp_block section h6{ font-size: 1.6rem; margin-bottom: 10px; font-weight: 500; letter-spacing: 1px; line-height: 1.8;}
.lp_block section.artidaoud_pf p{ line-height: 1.8;/* font-weight: 300;*/}
.lp_block section.scent h4{ color: #BE906E;}

@media (max-width: 767px) {
.mvSec p.h1 { font-size: 1.4rem; text-align: center; margin-top: 24px; margin-bottom: 13px; padding: 0 3vw;}
  .mvSec { margin-bottom: 0;}
  .mvSec .container { padding: 0;}
  .mvSec p { margin-top: 21px;}
}
	
.container-min {
  max-width: 890px;
  margin: auto;
}
.container-mid {
  max-width: 900px;
  margin: auto;
}

@media (max-width: 767px) {
  .container-min {
    padding: 0 15px;
  }
  .container-mid {
    padding: 0 15px;
  }

}

.conceptSec {
  margin-bottom: 100px;
}
.conceptbox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}


/*.conceptSec p {
  font-family: 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}*/
@media (max-width: 767px) {
  .conceptSec {
    margin-bottom: 50px;
  }
  .conceptSec p {
    font-size: 12px;
  }
  .conceptbox {
    margin-bottom: 33px;
  }	
}

@media (max-width: 767px) {
.lp_block {
    margin-top: 0px!important;
	min-width: 360px;
  }
div.cont_block{ padding: 0 3vw;}
}

p span.app{ font-size: 80%;}
section.bracelet,
section.pre_block{ background: #FFFAF7; padding: 5% 0;}
section.bracelet div.col1-2{ position: relative;}
section.bracelet p.photo.left_p{ position: absolute; width: 65%;}
section.bracelet p.photo.right_p{ position: absolute; right: 0; width: 50%; bottom: 0;}
p.icon_01{ background: #CA9173; color: #ffffff; padding: 0 5px; display: inline-block;}
p.icon_02{ border: 1px solid #585858; display: inline-block; padding: 0 5px;}
p.icon_03{ background: #CA9173; color: #ffffff; padding: 0 5px; display: inline-block;}
p.icon_04{ padding: 0 5px; display: inline-block; color: #333333; border: 1px solid #333333; margin-right: 10px; border-radius: 1px;}
p.icon_05{  padding: 0 5px; display: inline-block; color:#BE906E; border: 1px solid #BE906E; border-radius: 1px;}
div.cont_block ul{ font-size: 1.4rem;}


p.bay_btn { text-align: center; font-size: 1.6rem; background: #CA9173; max-width: 400px; margin: 0 auto;}
p.bay_btn a{ display: inline-block; text-align: center; text-decoration: none; padding: 5px; color: #ffffff;}

p.bay_btn:hover{ opacity: 0.7;}

.col1-2 div.text_b{ padding: 0 3vw;}
@media (max-width: 767px) {
.col1-2 div.text_b{ padding: 0;}
}

section.item_block{ background: #FFFAF7; padding: 8% 0;}
section.item_block div.osusume{ background: #ffffff; padding: 3%;}
section.item_block ul.spade li:before{ display:inline-block; vertical-align: middle; content:'◇'; margin-right: 5px;}
section.item_block div.osusume ul{ padding: 0 5%;}
section.item_block div.osusume ul li:before{ display:inline-block; vertical-align: middle; content:'\02611'; margin-right: 5px;} 

section.item_block div.osusume hr{ border-top: 1px solid; margin-bottom: 10px;}

div.back_serum{ background: url(https://osaji.net/special_products/2025holidaycoffret_enrich/img/photo02.jpg) no-repeat; background-size: contain; background-position-x: right; padding: 15% 10%;}
div.back_serum h4{ font-family: 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;} 

h3.title_serum{ font-family: 'Crimson Text'; color: #CA9173; font-size: 2.5rem; letter-spacing: 2px;}


.insta{ background: #f3eae2; padding: 20px;}
.insta p{ text-align: center;}
.insta img{ width: 300px;}

hr.line{ border-bottom: 1px solid #BE906E; max-width: 890px; margin: auto;}

.artidaoud_pf .col1618-2618{ display: flex; flex-direction: column;}
.artidaoud_pf .col1618-2618 div{margin-top: auto;}
.artidaoud_pf div h3{ font-family: "Lato", Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-weight: 800; line-height: 1.5; letter-spacing: 2px;}
.artidaoud_pf .col1618-2618 div p{ line-height: 2.5;}

.map label { display: block; margin:0; padding :8px 15px; line-height: 1; cursor :pointer; border-top: solid 1px #dcdcdc;}
.map input { display: none;}
.map ul { padding: 0; list-style: circle; margin: auto 20px;}
.map li {
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

#map01:checked ~ #mapbox01 li,
#map02:checked ~ #mapbox02 li,
#map03:checked ~ #mapbox03 li,
#map04:checked ~ #mapbox04 li,
#map05:checked ~ #mapbox05 li,
#map06:checked ~ #mapbox06 li,
#map07:checked ~ #mapbox07 li,
#map08:checked ~ #mapbox08 li,
#map09:checked ~ #mapbox09 li {
    height: auto;
    opacity: 1;
}

div.map label:first-child{ border: none;}
.map{ border-bottom: solid 1px #dcdcdc;} 


#map01:checked ~ #mapbox01 li:last-child,
#map02:checked ~ #mapbox02 li:last-child,
#map03:checked ~ #mapbox03 li:last-child,
#map04:checked ~ #mapbox04 li:last-child,
#map05:checked ~ #mapbox05 li:last-child,
#map06:checked ~ #mapbox06 li:last-child,
#map07:checked ~ #mapbox07 li:last-child,
#map08:checked ~ #mapbox08 li:last-child,
#map09:checked ~ #mapbox09 li:last-child{ margin-bottom: 10px;}

.banner_title{ color: #BE906E; font-family: 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;}

@media (max-width: 767px) {
	div.back_serum{ background: none; padding: 0 7vw;}
	div.back_serum h4{ text-align: center;}
	h3.title_serum{ text-align: center; padding-top: 5%; margin-bottom: 10px;}
	hr.line{ margin: 0 3vw;}
}
    
.bnrSec {
  margin-bottom: 60px;
}
.bnrSec h3 {
  font-size: 18px;
  font-weight: 300;
  line-height: 26.06px;
  text-align: left;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .bnrSec {
    margin-bottom: 30px;
  }
  .bnrSec h3 {
    font-size: 14px;
    margin-bottom: 15px;
  }
}


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





@media (max-width: 767px) {

div.days p{ font-size: 1.5rem;}
.lp_block p,
div.cont_block ul,
.lp_block .map label{  font-size: 1.25rem;}
p.bay_btn { font-size: 1.5rem; width: 100%;}
.banner_title{font-size: 1.5rem;}

.set p.photo{width: 50%; margin: 10px auto 0 auto;}
.pre_block p.photo{width: 60%; margin: 10px auto 0 auto;}
}


@media (max-width: 500px) {

	
#wapper { padding-top: 0px !important; }
}



.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: 4s; }
.photo_fade img:nth-child(3) { animation-delay: 8s; }

@keyframes fadeLoop { 
  0%   { opacity: 0; }
  10%  { opacity: 1; }   /* フェードイン */
  40%  { opacity: 1; }   /* 表示キープ */
  60%  { opacity: 0; }   /* フェードアウト */
  100% { opacity: 0; }
}
@media (max-width: 767px) {
.photo_fade { max-width: none;}
.sp_center{ text-align: center;}
}