@charset "UTF-8";
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* 
font-family: "source-han-serif-japanese", serif;
font-weight: 500;
font-style: normal; */


picture{
  display: block;
}
.main-area.lp {
  background-size: 100% auto;
  background-position: top center;
}

.header {
  background: rgb(245, 239, 234) !important;
  background: linear-gradient(rgba(252,229,151,1), rgba(0, 0, 0, 0))!important;
}

.header .header-logo svg path,
.header .header-nav a svg path{
  fill: var(--color-main) !important;
}

.header .header-nav__menuBtn--border span {
  background-color: var(--color-main) !important;
}

.header .header-logo.active a path,
.header .header-nav__user.active a path,
.header .header-nav__search.active a path,
.header .header-nav__cart.active a path{
  fill: var(--color-main) !important;
}

.header .header-nav__user.active a path,
.header .header-nav__search.active a path,
.header .header-nav__cart.active a path{
  fill: var(--color-main) !important;
}

.header .header-nav__menuBtn.open span{
  background-color: var(--color-main) !important;
}

#Foot,
#footer {
  position: relative;
  z-index: 10;
}

.main-area.lp {
  position: relative;
}

@media screen and (max-width: 767px) {
  .main-area.lp{
    padding-top: calc(174*(100vw / 375));
  }
}

.header .menu-ttl a{
  color: var(--color-txt) !important;
}

.toggle-arrow::before, .toggle-arrow::after {
  background: var(--color-txt) !important;
}

.header .svgPath-logo{
  fill: var(--color-txt)!important;
}


.MC250410LILY{
  font-family: "the-seasons", "ryo-text-plusn", serif;
  font-weight: 400;
  font-style: normal;
  overflow-x: hidden;
  --color-yellow-bg1: #FFFCED;
  --color-yellow-bg2: #FEF7DB;
  --color-yellow-bg3: #FCE597;
  --color-yellow-bg4: #FEF7DB;
  --color-ttl: #CCA967;
  --color-txt: #250D00;
  --font-ttl: "forevs", sans-serif;
  --font-copywrite: "adobe-garamond-pro", serif;
  --font-jp_txt: "a-otf-ryumin-pr6n", serif;
  --font-crdt: "yu-gothic-pr6n", sans-serif;

  font-weight: 400;
  font-style: normal;
  background: #fff;
  color: var(--color-txt);
  text-align: center;
}

.MC250410LILY p,
.MC250410LILY a,
.MC250410LILY h3,
.MC250410LILY h4{
  letter-spacing: 0.07em;
}

/*
forevs
font-weight: 400;
font-style: normal;

"adobe-garamond-pro"
font-weight: 400;
font-style: normal;

"a-otf-ryumin-pr6n", serif;
font-weight: 300;
font-style: normal;

"yu-gothic-pr6n", sans-serif;
font-weight: 400;
font-style: normal;
*/

/* -----------------------------
  font
  -----------------------------*/
.jp_txt{
  font-family: var(--font-jp_txt);
  font-weight: 300;
  font-style: normal;
}
.intro_txt{
  line-height: 2;
}

.sec_txt{
  line-height: 1.5;
}

.MC250410LILY .sec_ttl{
  font-family: var(--font-ttl);
  color: var(--color-ttl);
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: left;
}

.crdt{
  font-family: var(--font-crdt);
  line-height: 1.6;
}

.clip_txt{
  line-height: 1.75;
  text-align: left;
}

.css-hover_text{
  line-height: 1.75;
}

.MC250410LILY .copywrite_txt{
  font-family: var(--font-copywrite);
  color: var(--color-txt);
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

.fregrance-area__wrapper .jp_txt{
  text-align: left;
}

@media screen and (min-width: 768px) {
  .intro_txt{
    font-size: 1.5rem;
    width: 52rem;
    margin: 0 auto 3.2rem;
  }

  .sales-info_ttl{
    font-size: 2.2rem;
    text-align: center;
  }

  .sales-info_txt{
    font-size: 1.8rem;
    text-align: center;
  }

  .sec_txt{
    font-size: 2rem;
  }

  .clip_txt{
    font-size: 1.4rem;
  }

  .sec_ttl{
    font-size: 4.6rem;
  }

  .crdt{
    font-size: 1.5rem;
  }

  .css-hover_text{
    font-size: 1.4rem;
  }

  .copywrite_txt{
    font-size: 1rem;
  }
}

@media screen and (max-width: 767px) {
  .intro_txt{
    font-size: calc(13* (100vw / 375));
    width: calc(252* (100vw / 375));
    margin: 0 auto calc(23 * (100vw /375));
  }

  .sales-info_ttl{
    font-size: calc(18* (100vw /375));
    text-align: center;
  }

  .sales-info_txt{
    font-size: calc(15* (100vw /375));
    text-align: center;
  }

  .sec_txt{
    font-size: calc(17* (100vw /375));
  }

  .clip_txt{
    font-size: calc(12* (100vw /375));
  }

  .accordion__buttonText{
    font-family: var(--color-ttl);
    color: var(--color-txt);
    font-size: calc(15* (100vw /375));
    line-height: 1;
  }

  .sec_ttl{
    font-size: calc(32* (100vw /375));
  }

  .crdt{
    font-size: calc(13* (100vw /375));
  }

  .css-hover_text{
    font-size: calc(12* (100vw /375));
  }

  .copywrite_txt{
    font-size: calc(10* (100vw /375));
  }
}

/* ============================
　共通
============================*/
@media screen and (max-width: 767px) {
  .sec__wrapper{
    padding: calc(50* (100vw /375)) 0;
  }

  .main-area.lp {
    margin-bottom: 0;
  }

  .landing_content{
    overflow: visible;
    position: relative;
  }

  .landing_content {
    overflow: hidden;
    position: relative;
  }

  .pcOnly {
    display: none;
  }

  img {
    width: 100%;
    height: auto;
    max-width: 100%;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

@media screen and (min-width: 768px) {
  .s-view,
  .spOnly {
    display: none;
  }

  img {
    width: 100%;
    height: auto;
    max-width: 100%;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  .sec__wrapper{
    padding: 10rem 0;
  }
}


/* -----------------------------
.fv__wrapper
-----------------------------*/
.fv__wrapper{
  position: relative;
  overflow-x: clip;
  z-index: 10;
}

.fv__wrapper::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}

@media screen and (max-width: 767px) {
  .fv__wrapper::after{
    background-image: url(../img/fv-bg_sp.png);
    width: calc(490* (100vw / 375));
    height: calc(352* (100vw /375));
    top: calc(41* (100vw /375));
  }

  .ttl__cont{
    width: calc(295.76* (100vw /375));
    margin: 0 auto calc(50* (100vw /375));
  }

  .fv-img__cont{
    width: calc(161* (100vw /375));
    margin: 0 auto calc(84* (100vw /375));
  }
}

@media screen and (min-width: 768px) {
  .fv__wrapper::after{
    background-image: url(../img/fv-bg_pc.png);
    width: 100.419rem;
    height: 66.779rem;
    top: 6.9rem;
  }

  .ttl__cont{
    width: 48.59rem;
    margin: 0 auto 9.5rem;
  }

  .fv-img__cont{
    width: 30.5rem;
    margin: 0 auto 13.5rem;
  }
}

/* -----------------------------
.intro__wrapper
-----------------------------*/

.intro__wrapper{
  background-image: url(../img/svg/bg01.svg);
}

.intro__cont{
  background-color: rgba(255, 252, 237, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin: 0 auto;
}

.sales-info__cont{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  border: 1px solid var(--color-txt);
}


.sales-info_ttl{
  position: relative;
  align-self: center;
}

.sales-info_ttl::before,
.sales-info_ttl::after{
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/svg/dec.svg);
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
  .intro__wrapper{
    background-repeat: repeat-y;
    background-size: calc(400*(100vw / 375));
    padding: calc(50* (100vw / 375)) 0 calc(60* (100vw / 375));
  }

  .intro__cont{
    width: calc(335* (100vw / 375));
    padding: calc(42* (100vw / 375)) 0;
  }

  .sales-info__cont{
    width: calc(235* (100vw / 375));
    height: calc(88* (100vw / 375));
    row-gap: calc(15* (100vw /375));
    margin: 0 auto;
  }

  .sales-info_ttl{
    width: calc(100* (100vw /375));
  }

  .sales-info_ttl::before,
  .sales-info_ttl::after{
    width: calc(12* (100vw / 375));
    height: calc(12* (100vw / 375));
  }

  .sales-info_ttl::before{
    left: 0;
  }

  .sales-info_ttl::after{
    right: 0;
  }
}

@media screen and (min-width: 768px) {
  .intro__wrapper{
    background-size: 90rem;
    background-repeat: repeat-x;
    padding: 8rem 0;
  }

  .intro__cont{
    width: 100rem;
    padding: 9.5rem 0;
  }

  .sales-info__cont{
    width: 32rem;
    height: 11.8rem;
    row-gap: 2.2rem;
    margin: 0 auto;
    padding-bottom: 0.2rem;
  }

  .sales-info_ttl{
    width: 12.6rem;
  }

  .sales-info_ttl::before,
  .sales-info_ttl::after{
    width: 1.8rem;
    height: 1.8rem;
    transform: translateY(-40%);
  }

  .sales-info_ttl::before{
    left: 0;
  }

  .sales-info_ttl::after{
    right: 0;
  }
}

/* -----------------------------
.fregrance-area__wrapper
-----------------------------*/

.fregrance-area__wrapper{
  background-color: var(--color-yellow-bg2);
}

.fregrance-area__cont{
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .fregrance-area__cont{
    width: calc(285* (100vw /375));
  }

  .fregrance-area__cont .sec_ttl{
    margin-bottom: calc(20* (100vw / 375));
  }

  .fregrance-area__cont .piramid-img__cont{
    width: 100%;
  }

}

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

  .fregrance-area__wrapper{
    padding: 11rem 0 9.5rem;
  }

  .fregrance-area__cont{
    width: 64rem;
  }

  .fregrance-area__cont .accordion{
    margin-bottom: 4.7rem;
  }

  .fregrance-area__cont .sec_ttl{
    margin-bottom: 3rem;
  }

  .fregrance-area__cont .sec_txt{
    margin-bottom: 1.8rem;
  }

  .fregrance-area__cont .piramid-img__cont{
    width: 41.8rem;
    margin: 0 auto;
  }
}


/* -----------------------------
.css-section1
-----------------------------*/
.css-section1 {
  position: relative;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background-color: var(--color-yellow-bg3);
}


.css-section1 .js-hover--active {
  background-color: var(--color-yellow-bg3);
  opacity: 0.85;
}

.css-section1 .css-image {
  position: relative;
  overflow: hidden;
}

.css-section1 .css-section1_wrapper .css-credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .css-section1{
    row-gap: calc(30* (100vw / 375));
  }

  .css-section1_bg__wrappper,
  .css-section2_bg__wrappper{
    width: calc(281* (100vw / 375));
    margin: 0 auto;
  }
}

@media screen and (min-width: 768px) {
  .css-section1{
    row-gap: 3rem;
  }

  .css-section1_bg__wrappper,
  .css-section2_bg__wrappper{
    width: 45rem;
    margin: 0 auto;
  }

  .css-section1_wrapper .js-hover{
    height: 81.7rem;;
  }

  .css-section1 .css-section1_wrapper .img-cont{
    width: 100%;
  }

  .css-section1 .js-hover{
    width: 45rem;
    height: 81.7rem;
  }
}

/* -----------------------------
.art-piece__wrapper
-----------------------------*/
.art-piece__wrapper {
  background-color: var(--color-yellow-bg4);
}

.art-piece__wrapper .js-hover--active{
  background-color: var(--color-yellow-bg4);
}

.art-piece_bg__wrappper .css-image{
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .art-piece__wrapper {
    padding-top: calc(51* (100vw / 375));

  }

  .art-piece__wrapper .sec_ttl{
    padding-left: calc(45* (100vw / 375));
    margin-bottom: calc(14*(100vw / 375));
  }

  .art-piece_bg__wrappper{
    width: 100%;
  }

  .art-piece__wrapper .css-hover_text{
    padding-top: calc(25* (100vw /375));
  }

}

@media screen and (min-width: 768px) {
  .art-piece__wrapper{
    padding-top: 10.3rem;
  }

  .art-piece__cont{
    display: flex;
    flex-direction: column;
    row-gap: 1.4rem;
    width: 100rem;
    margin: 0 auto;
  }

  .art-piece__wrapper .sec_ttl{
    padding-left: 18rem;
  }

  .art-piece__wrapper .css-hover_text{
    padding-top: 3.5rem;
  }

  .art-piece_wrapper .js-hover{
    width: 100rem;
    height: 63.2rem;
  }
}


/* -----------------------------
.last-sec__wrapper
-----------------------------*/
.last-sec__wrapper {
  background-image: url(../img/svg/bg02.svg);
  background-repeat: repeat;
}


@media screen and (max-width: 767px) {
  .last-sec__wrapper{
    background-size: calc(400*(100vw / 375));
    padding: calc(49*(100vw / 375)) 0 calc(35*(100vw / 375));
  }

  .cai_btn{
    width: calc(240* (100vw /375));
    margin: 0 auto calc(47* (100vw /375));
  }
}

@media screen and (min-width: 768px) {
  .last-sec__wrapper {
    padding: 12rem 0 4rem;
  }

  .cai_btn{
    width: 27rem;
    margin: 0 auto 6rem;
  }
}


/*================================
  animation
================================*/
/*------------------ js-fade */
.js-fade {
  opacity: 0;
  transition-duration: 1s;
  transition: ease-in, opacity 2500ms, transform 1000ms;
}

.js-fade.active {
  opacity: 1;
}

/*------------------ js-hover */
.js-hover {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  transition: ease-in, background-color 0.5s, opacity 0.5s;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.js-hover--active {
  background-color: var(--color-bg-blue);
  opacity: 0.85;
}

.js-hover .css-hover_text {
  z-index: 2;
  display: inline-block;
  position: relative;
}

.js-hover .css-credit {
  display: flex;
  /* position: relative; */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 2;
}

.js-hover .css-bk_credit .css-credit_link,
.js-hover .css-credit .css-credit_link {
  position: relative;
  display: inline-block;
  z-index: 5;
  pointer-events: all;
}

.css-credit_all {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}

/*------------------ accordion */
@media screen and (max-width: 767px) {
  /* .accordion__button{
    width: calc(106* (100vw /375));
    margin: calc(27*(100vw / 375)) auto calc(30*(100vw / 375));
  } */


  .accordion__accordionMoreContent {
    display: none;
    padding-top: calc(20*(100vw / 375));
  }

  .spOnly.accordion__buttonText {
    position: relative;
    font-family: var(--font-ttl);
    text-align: left;
    width: calc(106* (100vw /375));
    margin: calc(27*(100vw / 375)) auto calc(30*(100vw / 375));
  }

  .accordion__buttonText.close_btn.is-active{
    width: calc(64* (100vw /375));
  }

  .accordion__buttonText {
    display: none;
    cursor: pointer;
  }

  .accordion__buttonText.is-active {
    display: block;
  }

  .accordion__buttonText::after,
  .accordion__buttonText::before{
    content: "";
    position: absolute;
    width: calc(12* (100vw /375));
    height: 1px;
    background-color: var(--color-txt);
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transition: all .6s;
  }

  .accordion__buttonText.close_btn.is-active::before{
    transform: rotate(0);
  }

  .accordion__buttonText.is-active::before{
    transform: rotate(90deg);
  }



}