@charset "UTF-8";

/* 
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;
}

body.on .header {
  background: rgb(19, 42, 94) !important;
  background: linear-gradient(180deg, rgba(19, 42, 94, 1), rgba(0, 0, 0, 0))!important;
}

body.on2 .header {
  background: rgb(184, 214, 190) !important;
  background: linear-gradient(180deg, rgb(184, 214, 190), rgba(0, 0, 0, 0))!important;
}

.header {
  background: rgb(249, 240, 178) !important;
  background: linear-gradient(rgba(249, 240, 178,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(115*(100vw / 375));
    padding-bottom: calc(25*(100vw / 375));
  }
}

@media screen and (min-width: 768px) {
  .main-area.lp{
    padding-top: calc(70*(100vw / 1400));
    padding-bottom: calc(94*(100vw / 1400));
  }
}

.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;
}


#MC250515hyacinth{
  --color-yellow-bg1: #F9F0B2;
  --color-navy-bg2: #132A5E;
  --color-green-bg3: #B8D6BE;
  --color-txt: #35393A;
  --color-txt-blue: #28314C;
  --color-txt-purple: #5959A5;
  --color-white: #ffffff;
  --color-black: #000000;
  --font-jp_txt: "zen-kaku-gothic-antique", sans-serif;
  --font-futura: "futura-pt-bold", sans-serif;

  font-family: var(--font-jp_txt);
  font-style: normal;
  text-align: center;
  font-weight: 700;
  color: var(--color-txt);
  overflow-x: clip;
}

/* ▼ -----------可変設定---------- ▼ */
.landing_content {
  --pc-width: 1400;/*PCデザイン幅*/
  --sp-width: 375;/*SPデザイン幅*/
  --pc-artboard-width: 550;/*SP共通デザイン幅*/
  --sp-artboard-width: 375;/*PC共通デザイン幅*/
}

/* PC画面幅 1400px以上 可変しない */
@media (min-width: 1400px) {
  .landing_content {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
  /*--variable: calc(100vw / var(--pc-width)); 画面幅に基づく可変値 */
  --variable: 1px; /* 固定値（可変しない） */
  }
}

 /* PC画面幅 768～1400px 可変 */
@media (min-width: 768px) and (max-width: 1400px) {
  .landing_content {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
  --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}

 /* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  .landing_content {
  --ratio: 1; /* 比率は1（変わらない） */
  --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}
/* ▲ -----------可変設定---------- ▲ */

#MC250515hyacinth p,
#MC250515hyacinth a,
#MC250515hyacinth h3,
#MC250515hyacinth h4{
  letter-spacing: 0.05em;
  font-weight: 700;
}

/*
font-family: "futura-pt-bold", sans-serif;
font-weight: 700;
font-style: normal;

Zen Kaku Gothic Antique Bold
font-family: "zen-kaku-gothic-antique", sans-serif;
font-weight: 700;
font-style: normal;
*/

/* -----------------------------
  font
  -----------------------------*/
#MC250515hyacinth .intro_txt{
  line-height: 2.06666666667;
  letter-spacing: -0.025em;
}

#MC250515hyacinth .sales-info_txt{
  line-height: 1;
  letter-spacing: -0.01em;
}

#MC250515hyacinth .sec_ttl{
  line-height: 1.7333333333;
  letter-spacing: -0.04em;
  font-feature-settings: "palt";
}

#MC250515hyacinth .crdt{
  display: block;
  letter-spacing: 0;
}

#MC250515hyacinth .crdt .price-adjust{
  margin-left: calc(10* var(--variable)* var(--ratio));
}

/* .accordion__buttonText{
  font-family: var(--font-futura);
  font-weight: 700;
  line-height: 1;
} */

.sec_txt{
  line-height: 1.5;
}

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

  #MC250515hyacinth .intro_txt{
    font-size: calc(15* var(--variable)* var(--ratio));
    margin-top: calc(56* var(--variable)* var(--ratio));
  }

  #MC250515hyacinth .mv-txt{
    font-size: calc(17* var(--variable)* var(--ratio));
    letter-spacing: -0.05em;
  }


  #MC250515hyacinth .sales-info_txt{
    font-size: calc(15* var(--variable)* var(--ratio));
    padding-left: calc(12* var(--variable)* var(--ratio));
  }

  #MC250515hyacinth .sales-info_txt .colon-adjust{
    margin-left: calc(4* var(--variable)* var(--ratio));
    margin-right: calc(4* var(--variable)* var(--ratio));
  }

  #MC250515hyacinth .sec_ttl{
    font-size: calc(15* var(--variable)* var(--ratio));
    margin-bottom: 0;
  }

  #MC250515hyacinth .crdt{
    font-size: calc(12* var(--variable)* var(--ratio));
  }

  .sec_txt{
    font-size: calc(17* var(--variable)* var(--ratio));
  }

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


/* ============================
　共通
============================*/
@media screen and (max-width: 767px) {

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

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

  #MC250515hyacinth .landing_content {
    overflow: clip;
    position: relative;
  }

  #MC250515hyacinth .pcOnly {
    display: none;
  }

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

@media screen and (min-width: 768px) {
  #MC250515hyacinth .spOnly {
    display: none;
  }

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


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

@media screen and (max-width: 767px) {
  .fv__wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(375* var(--variable)* var(--ratio));
    margin: 0 auto;
    height: fit-content;
  }

  .mv-img_box{
    width: 100%;
    position: relative;
  }
  .mv-img_box .mv-img01{
    width: calc(249* var(--variable)* var(--ratio));
    position: absolute;
    top: calc(16* var(--variable)* var(--ratio));
    left: calc(3* var(--variable)* var(--ratio));
    z-index: 11;
  }
  .mv-img_box .mv-img01_sha{
    width: calc(263* var(--variable)* var(--ratio));
    position: absolute;
    top: calc(306* var(--variable)* var(--ratio));
    left: calc(15* var(--variable)* var(--ratio));
    z-index: 11;
    mix-blend-mode: multiply;
  }
  .mv-img_box .mv-img02{
    width: calc(210* var(--variable)* var(--ratio));
    position: absolute;
    top: calc(268* var(--variable)* var(--ratio));
    left: calc(90* var(--variable)* var(--ratio));
    z-index: 12;
  }
  .mv-img_box .mv-img02_sha{
    width: calc(216* var(--variable)* var(--ratio));
    position: absolute;
    top: calc(455* var(--variable)* var(--ratio));
    left: calc(80* var(--variable)* var(--ratio));
    z-index: 12;
    mix-blend-mode: multiply;
  }
  .mv-img_box .mv-img03{
    width: calc(174* var(--variable)* var(--ratio));
    position: absolute;
    top: calc(106* var(--variable)* var(--ratio));
    left: calc(197* var(--variable)* var(--ratio));
    z-index: 13;
  }
  .mv-img_box .mv-img03_sha{
    width: calc(189* var(--variable)* var(--ratio));
    position: absolute;
    top: calc(280* var(--variable)* var(--ratio));
    left: calc(215* var(--variable)* var(--ratio));
    z-index: 13;
    mix-blend-mode: multiply;
  }

  .mv-logo{
    width: calc(270* var(--variable)* var(--ratio));
    margin: 0 auto;
    margin-top: calc(509* var(--variable)* var(--ratio));
  }
}

@media screen and (min-width: 768px) {
  .fv__wrapper{
    display: flex;
    /* flex-direction: row-reverse; */
    align-items: center;
    justify-content: center;
    width: calc(1400*(100vw / 1400));
    margin: 0 auto;
    height: calc(787*(100vw / 1400));
  }

  .mv-img_box{
    width: calc(860*(100vw / 1400));
    position: relative;
  }
  .mv-img_box .mv-img01{
    width: calc(460*(100vw / 1400));
    position: absolute;
    top: calc(-292*(100vw / 1400));
    left: calc(-46*(100vw / 1400));
    z-index: 11;
  }
  .mv-img_box .mv-img01_sha{
    width: calc(453*(100vw / 1400));
    position: absolute;
    top: calc(202*(100vw / 1400));
    left: calc(-40*(100vw / 1400));
    z-index: 11;
    mix-blend-mode: multiply;
  }
  .mv-img_box .mv-img02{
    width: calc(1021*(100vw / 1400));
    position: absolute;
    top: calc(-355*(100vw / 1400));
    left: calc(113*(100vw / 1400));
    z-index: 12;
  }
  .mv-img_box .mv-img02_sha{
    width: calc(412*(100vw / 1400));
    position: absolute;
    top: calc(168*(100vw / 1400));
    left: calc(462*(100vw / 1400));
    z-index: 12;
    mix-blend-mode: multiply;
  }
  .mv-img_box .mv-img03{
    width: calc(603*(100vw / 1400));
    position: absolute;
    top: calc(-227*(100vw / 1400));
    left: calc(61*(100vw / 1400));
    z-index: 13;
  }
  .mv-img_box .mv-img03_sha{
    width: calc(336*(100vw / 1400));
    position: absolute;
    top: calc(244*(100vw / 1400));
    left: calc(260*(100vw / 1400));
    z-index: 13;
    mix-blend-mode: multiply;
  }

  .mv-logo{
    width: calc(400*(100vw / 1400));
    margin-left: 0;
    margin-top: calc(5*(100vw / 1400));
  }
}

/* -----------------------------
pc：セクションごとの目次変更
-----------------------------*/


@media screen and (min-width: 768px) {
  .main-cont__wrapper{
    display: flex;
    position: relative;
    overflow: clip;
    /* justify-content: space-between; */
  }


  .js-fadeTarget{
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .js-fadeTarget.on{
    opacity: 1;
  }

  .js-fadeTarget.on2{
    opacity: 1;
  }

  .index__wrapper a{
    pointer-events: none;
  }

  .index__wrapper,
  .cai_btn__wrapper {
    width: calc(0.5* (100vw - 55rem));
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }

  .left, .right {
    width: 100%;
    position: sticky;
    bottom: 0;
    display: flex;
  }

  .left{
    flex-direction: column;
    padding-left: 5.2rem;
    padding-bottom: 10rem;
  }

  .inner-cont__wrapper{
    width: 100%;
    max-width:  min(550* (100vw/1400), 550px);
    /* overflow-x: clip; */
  }

  .index__wrapper li {
    margin: 1rem 0;
    opacity: 0.4;
    transition: opacity 0.3s;
    /* cursor: pointer; */
    fill: var(--color-txt);
  }

  .index__wrapper li:not(:first-child){
    margin-top: 2.8rem;
  }

  /* .index__wrapper li.active  */
  .toc-top.on li:has(a[aria-current=true]){
    opacity: 1;
  }

  .index__wrapper li.active{
    opacity: 1;
  }

  .index1{
    width: min(138 * (100vw/1400), 138px);
  }

  .index2{
    width: min(258 * (100vw/1400), 258px);
  }

  .index3{
    width: min(101 * (100vw/1400), 101px);
  }

  .index4{
    width: min(260 * (100vw/1400), 260px);
  }

  .index5{
    width: min(169 * (100vw/1400), 169px);
  }

  .index6{
    width: min(132 * (100vw/1400), 132px);
  }

  .index__wrapper ul {
    list-style: none;
    padding: 0;
  }

  .cai_btn__wrapper .cai_btn {
    width: min(88 * (100vw/1400), 88px);
    height: min(125 * (100vw/1400), 125px);
    padding-bottom: min(100 * (100vw/1400), 100px);
    right: min(40 * (100vw/1400), 40px);
  }

}



/* -----------------------------
.intro__wrapper
-----------------------------*/
.sales-info__cont{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  z-index: 1;
  margin: 0 auto;
}

.sales-info__cont::after{
  content: "";
  position: absolute;
  background-image: url(../img/day_box.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
}

  #MC250515hyacinth .intro__wrapper{
    padding: calc(62* var(--variable)* var(--ratio)) 0;
  }
  #MC250424hyacinth .space-adjust{
    display: block;
  }
  #MC250515hyacinth .intro__wrapper .intro__cont {
    width: calc(283* var(--variable)* var(--ratio));
    margin: 0 auto;
  }

  #MC250515hyacinth .intro__wrapper .intro__deco {
    width: calc(73* var(--variable)* var(--ratio));
    margin: 0 auto;
  }

  .sales-info__cont{
    width: calc(283* var(--variable)* var(--ratio));
    height: calc(79* var(--variable)* var(--ratio));
    margin-top: calc(47* var(--variable)* var(--ratio));
    /* row-gap: calc(15* var(--variable)* var(--ratio));
    padding-right: calc(4* var(--variable)* var(--ratio)); */
  }

  #MC250515hyacinth .sales-info_txt .colon-adjust{
    margin-right: calc(5* var(--variable)* var(--ratio));
    margin-left: calc(2* var(--variable)* var(--ratio));
  }

@media screen and (min-width: 768px) {
  #MC250515hyacinth .intro__wrapper {
    padding: calc(35* var(--variable)* var(--ratio)) 0;
  }
}
/* -----------------------------
.section2__wrapper
-----------------------------*/
.section2__wrapper{
  padding: calc(69* var(--variable)* var(--ratio)) 0;
}

.section2__wrapper .item01{
  width: calc(375* var(--variable)* var(--ratio));
  margin: 0 auto;
  position: relative;
}
.section2__wrapper .item01 .heading--txt01{
  width: calc(190* var(--variable)* var(--ratio));
  left: calc(13* var(--variable)* var(--ratio));
  top: calc(-28* var(--variable)* var(--ratio));
}
.section2__wrapper .item01 .item_img{
  width: calc(271* var(--variable)* var(--ratio));
  margin-left: calc(12* var(--variable)* var(--ratio));
}
.section2__wrapper .item01 .item_img_sha{
  width: calc(268* var(--variable)* var(--ratio));
  margin-left: calc(58* var(--variable)* var(--ratio));
  margin-top: calc(-2* var(--variable)* var(--ratio));
  mix-blend-mode: multiply;
}

.section2__wrapper .item02{
  width: calc(375* var(--variable)* var(--ratio));
  margin: 0 auto;
  position: relative;
}
.section2__wrapper .item02 .heading--txt02{
  width: calc(199* var(--variable)* var(--ratio));
  left: calc(162* var(--variable)* var(--ratio));
  top: calc(-53* var(--variable)* var(--ratio));
}
.section2__wrapper .item02 .heading--txt03{
  width: calc(101* var(--variable)* var(--ratio));
  left: calc(38* var(--variable)* var(--ratio));
  top: calc(91* var(--variable)* var(--ratio));
}
.section2__wrapper .item02 .heading--txt04{
  width: calc(225* var(--variable)* var(--ratio));
  left: calc(20* var(--variable)* var(--ratio));
  top: calc(131* var(--variable)* var(--ratio));
}
.section2__wrapper .item02 .item_img{
  width: calc(240* var(--variable)* var(--ratio));
  margin-left: calc(124* var(--variable)* var(--ratio));
  margin-top: calc(17* var(--variable)* var(--ratio));
}
.section2__wrapper .item02 .item_img_sha{
  width: calc(265* var(--variable)* var(--ratio));
  margin-left: calc(90* var(--variable)* var(--ratio));
  margin-top: calc(-5* var(--variable)* var(--ratio));
  mix-blend-mode: multiply;
}

.section2__wrapper .item03{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: clip;
  z-index: 1;
}

.section2__wrapper .item03 .item_img_bk{
  position: absolute;
  width: calc(238* var(--variable)* var(--ratio));
  height: calc(293* var(--variable)* var(--ratio));
  left: 50%;
  transform: translateX(-50%);
  top: calc(70* var(--variable)* var(--ratio));
  z-index: -1;
}

.section2__wrapper .item03{
  width: calc(375* var(--variable)* var(--ratio));
  margin: 0 auto;
}
.section2__wrapper .item03 .item_img{
  width: calc(342* var(--variable)* var(--ratio));
  margin: 0 auto;
  margin-top: calc(7* var(--variable)* var(--ratio));
}
.section2__wrapper .item03 .item_img_sha{
  position: relative;
  background-color: var(--color-yellow-bg1);
  width: calc(302* var(--variable)* var(--ratio));
  height: calc(35* var(--variable)* var(--ratio));
  margin-left: calc(15* var(--variable)* var(--ratio));
  margin-top: calc(8* var(--variable)* var(--ratio));
}

.section2__wrapper .item03 .shadow_box {
  mix-blend-mode: multiply;
}

.section2__wrapper .item03 .item_img_sha img{
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  mix-blend-mode: multiply;
}

.section2__wrapper .item03 .crdt__box{
  margin-top: calc(33* var(--variable)* var(--ratio));
}
.section2__wrapper .item03 .crdt__box .crdt:nth-of-type(2){
  margin-top: calc(11* var(--variable)* var(--ratio));
}
.section2__wrapper .item03 .color_chip{
  width: calc(119* var(--variable)* var(--ratio));
  margin: 0 auto;
  margin-top: calc(21* var(--variable)* var(--ratio));
}

.section2__wrapper .item04{
  width: calc(375* var(--variable)* var(--ratio));
  margin: 0 auto;
  position: relative;
}
.section2__wrapper .item04 .heading--txt01{
  width: calc(209* var(--variable)* var(--ratio));
  left: calc(18* var(--variable)* var(--ratio));
  top: calc(78* var(--variable)* var(--ratio));
}
.section2__wrapper .item04 .heading--txt02{
  width: calc(213* var(--variable)* var(--ratio));
  left: calc(139* var(--variable)* var(--ratio));
  top: calc(274* var(--variable)* var(--ratio));
}
.section2__wrapper .item04 .item_img{
  width: calc(210* var(--variable)* var(--ratio));
  margin-left: calc(89* var(--variable)* var(--ratio));
  margin-top: calc(70* var(--variable)* var(--ratio));
}
.section2__wrapper .item04 .item_img_sha{
  width: calc(215* var(--variable)* var(--ratio));
  margin-left: calc(85* var(--variable)* var(--ratio));
  margin-top: calc(4* var(--variable)* var(--ratio));
  mix-blend-mode: multiply;
}

.section2__wrapper .item04 .crdt__box{
  margin-top: calc(32* var(--variable)* var(--ratio));
}
.section2__wrapper .item04 .color_chip{
  width: calc(55* var(--variable)* var(--ratio));
  margin-left: calc(158* var(--variable)* var(--ratio));
  margin-top: calc(19* var(--variable)* var(--ratio));
}

@media screen and (min-width: 768px) {
  .section2__wrapper {
    padding: calc(96* var(--variable)* var(--ratio)) 0;
  }
  .section2__wrapper .item03 .crdt__box .crdt:nth-of-type(2) {
    margin-top: calc(14* var(--variable)* var(--ratio));
  }
}
/* -----------------------------
.section3__wrapper
-----------------------------*/
.section3__wrapper{
  margin-top: calc(67* var(--variable)* var(--ratio));
  position: relative;
}

.section3__wrapper .sec_ttl{
  width: calc(306* var(--variable)* var(--ratio));
  margin: 0 auto;
}

.section3__wrapper .item01{
  width: calc(375* var(--variable)* var(--ratio));
  margin: 0 auto;
  position: relative;
}
.section3__wrapper .item01 .heart_deco{
  width: calc(274* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(57* var(--variable)* var(--ratio));
  right: calc(-72* var(--variable)* var(--ratio));
  animation: 18s linear infinite rotation;
}
.section3__wrapper .item01 .item_img{
  width: calc(227* var(--variable)* var(--ratio));
  margin-top: calc(36* var(--variable)* var(--ratio));
  margin-left: calc(128* var(--variable)* var(--ratio));
}
.section3__wrapper .item01 .item_img_sha{
  width: calc(271* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(382* var(--variable)* var(--ratio));
  right: calc(-28* var(--variable)* var(--ratio));
  mix-blend-mode: multiply;
  z-index: 2;
}

.section3__wrapper .item02{
  width: calc(220* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(428* var(--variable)* var(--ratio));
  left: calc(-45* var(--variable)* var(--ratio));
}
.section3__wrapper .item02 .item_img{
  width: calc(175* var(--variable)* var(--ratio));
  margin-left: calc(45* var(--variable)* var(--ratio));
  position: relative;
  z-index: 5;
}
.section3__wrapper .item02 .item_img_sha{
  width: calc(188* var(--variable)* var(--ratio));
  margin-top: calc(15* var(--variable)* var(--ratio));
  position: relative;
  background-color: var(--color-navy-bg2);
}

.section3__wrapper .item02 .shadow_box {
  mix-blend-mode: multiply;
}

.section3__wrapper .item03{
  width: calc(375* var(--variable)* var(--ratio));
  margin: 0 auto;
  position: relative;
}
.section3__wrapper .item03 .heart_deco{
  width: calc(274* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(-6* var(--variable)* var(--ratio));
  left: calc(-70* var(--variable)* var(--ratio));
  animation: 18s linear infinite rotation2;
}
.section3__wrapper .item03 .item_img{
  width: calc(258* var(--variable)* var(--ratio));
  margin-top: calc(40* var(--variable)* var(--ratio));
  margin-left: calc(108* var(--variable)* var(--ratio));
  position: relative;
  z-index: 3;
}
.section3__wrapper .item03 .item_img_sha{
  width: calc(276* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(300* var(--variable)* var(--ratio));
  right: calc(0* var(--variable)* var(--ratio));
  mix-blend-mode: multiply;
  z-index: 3;
}

.section3__wrapper .item04{
  width: calc(375* var(--variable)* var(--ratio));
  margin: 0 auto;
  position: relative;
}
.section3__wrapper .item04 .heart_deco{
  width: calc(274* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(-47* var(--variable)* var(--ratio));
  right: calc(-157* var(--variable)* var(--ratio));
  animation: 18s linear infinite rotation;
}
body.on .section3__wrapper .item04 .item_img_box{
  background-color: var(--color-navy-bg2);
}
body.on2 .section3__wrapper .item04 .item_img_box{
  background-color: var(--color-green-bg3);
}
.section3__wrapper .item04 .item_img_box{
  position: relative;
  width: calc(290* var(--variable)* var(--ratio));
  background-color: var(--color-navy-bg2);
  z-index: 1;
  transition: opacity 1000ms, transform 1000ms, background-color 0.4s;
}
.section3__wrapper .item04 .item_img{
  width: calc(284* var(--variable)* var(--ratio));
  margin-top: calc(34* var(--variable)* var(--ratio));
  margin-left: calc(10* var(--variable)* var(--ratio));
  position: relative;
  z-index: 4;
}
.section3__wrapper .item04 .item_img_sha{
  width: calc(284* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(0* var(--variable)* var(--ratio));
  left: calc(10* var(--variable)* var(--ratio));
  mix-blend-mode: multiply;
  z-index: 0;
}
.section3__wrapper .item04 .crdt__box01{
  margin-top: calc(69* var(--variable)* var(--ratio));
}
.section3__wrapper .item04 .crdt{
  color: var(--color-white);
}
.section3__wrapper .item04 .crdt__box02{
  margin-top: calc(44* var(--variable)* var(--ratio));
}
.section3__wrapper .item04 .color_chip01{
  width: calc(119* var(--variable)* var(--ratio));
  margin-left: calc(126* var(--variable)* var(--ratio));
  margin-top: calc(20* var(--variable)* var(--ratio));
}
.section3__wrapper .item04 .color_chip02{
  width: calc(55* var(--variable)* var(--ratio));
  margin-left: calc(158* var(--variable)* var(--ratio));
  margin-top: calc(19* var(--variable)* var(--ratio));
}

@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

@keyframes rotation2{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(-360deg); }
}

@media screen and (min-width: 768px) {
  .section3__wrapper {
    margin-top: calc(40* var(--variable)* var(--ratio));
  }
}
/* -----------------------------
.section4__wrapper
-----------------------------*/
.section4__wrapper{
  position: relative;
}
.section4__wrapper .item01{
  width: calc(375* var(--variable)* var(--ratio));
  margin: 0 auto;
  position: relative;
}
.section4__wrapper .item01 .item_title{
  width: calc(321* var(--variable)* var(--ratio));
  margin-left: calc(18* var(--variable)* var(--ratio));
}
.section4__wrapper .item01 .item_img{
  position: absolute;
  width: calc(193* var(--variable)* var(--ratio));
  top: calc(91* var(--variable)* var(--ratio));
  right: calc(5* var(--variable)* var(--ratio));
  z-index: 5;
}
.section4__wrapper .item01 .item_img_sha{
  position: absolute;
  width: calc(164* var(--variable)* var(--ratio));
  top: calc(113* var(--variable)* var(--ratio));
  right: calc(20* var(--variable)* var(--ratio));
  z-index: 2;
  mix-blend-mode: multiply;
}

.section4__wrapper .item01 .crdt__box{
  margin-top: calc(107* var(--variable)* var(--ratio));
}
.section4__wrapper .item01 .color_chip{
  width: calc(17* var(--variable)* var(--ratio));
  margin-left: calc(179* var(--variable)* var(--ratio));
  margin-top: calc(19* var(--variable)* var(--ratio));
}

/* -----------------------------
.section5__wrapper
-----------------------------*/
.section5__wrapper{
  position: relative;
}
.section5__wrapper .stars_list{
  width: calc(375* var(--variable)* var(--ratio));
  margin: 0 auto;
  position: relative;
  margin-top: calc(50* var(--variable)* var(--ratio));
}
.section5__wrapper .star01{
  width: calc(18* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(-20* var(--variable)* var(--ratio));
  right: calc(52* var(--variable)* var(--ratio));
}
.section5__wrapper .star02{
  width: calc(16* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(2* var(--variable)* var(--ratio));
  left: calc(45* var(--variable)* var(--ratio));
}
.section5__wrapper .star03{
  width: calc(19* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(42* var(--variable)* var(--ratio));
  left: calc(74* var(--variable)* var(--ratio));
}
.section5__wrapper .star04{
  width: calc(18* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(78* var(--variable)* var(--ratio));
  right: calc(70* var(--variable)* var(--ratio));
}
.section5__wrapper .star05{
  width: calc(15* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(279* var(--variable)* var(--ratio));
  left: calc(28* var(--variable)* var(--ratio));
}
.section5__wrapper .star06{
  width: calc(15* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(295* var(--variable)* var(--ratio));
  right: calc(93* var(--variable)* var(--ratio));
  z-index: 5;
}
.section5__wrapper .star07{
  width: calc(18* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(347* var(--variable)* var(--ratio));
  left: calc(132* var(--variable)* var(--ratio));
}
.section5__wrapper .star08{
  width: calc(19* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(480* var(--variable)* var(--ratio));
  left: calc(62* var(--variable)* var(--ratio));
}
.section5__wrapper .star09{
  width: calc(16* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(564* var(--variable)* var(--ratio));
  right: calc(63* var(--variable)* var(--ratio));
}
.section5__wrapper .star10{
  width: calc(14* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(694* var(--variable)* var(--ratio));
  right: calc(27* var(--variable)* var(--ratio));
}
.section5__wrapper .star11{
  width: calc(15* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(765* var(--variable)* var(--ratio));
  left: calc(28* var(--variable)* var(--ratio));
}
.section5__wrapper .star12{
  width: calc(15* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(795* var(--variable)* var(--ratio));
  right: calc(62* var(--variable)* var(--ratio));
}
.section5__wrapper .star13{
  width: calc(20* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(837* var(--variable)* var(--ratio));
  right: calc(90* var(--variable)* var(--ratio));
}
.section5__wrapper .star14{
  width: calc(24* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(865* var(--variable)* var(--ratio));
  left: calc(61* var(--variable)* var(--ratio));
}

.section5__wrapper .item02{
  width: calc(375* var(--variable)* var(--ratio));
  margin: 0 auto;
  position: relative;
}
.section5__wrapper .item02 .item_title{
  width: calc(91* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(136* var(--variable)* var(--ratio));
  right: calc(24* var(--variable)* var(--ratio));;
}
.section5__wrapper .item02 .item_img{
  width: calc(294* var(--variable)* var(--ratio));
  margin-left: calc(7* var(--variable)* var(--ratio));
}
.section5__wrapper .item02 .item_img_sha{
  width: calc(301* var(--variable)* var(--ratio));
  margin-top: calc(4* var(--variable)* var(--ratio));
  margin-left: calc(30* var(--variable)* var(--ratio));
  mix-blend-mode: multiply;
}

.section5__wrapper .item03{
  width: calc(292* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(274* var(--variable)* var(--ratio));
  right: calc(-23* var(--variable)* var(--ratio));
}
.section5__wrapper .item03 .item_title{
  width: calc(91* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(109* var(--variable)* var(--ratio));
  left: calc(-81* var(--variable)* var(--ratio));
}
.section5__wrapper .item03 .item_img{
  width: calc(290* var(--variable)* var(--ratio));
  margin-left: 0;
}
.section5__wrapper .item03 .item_img_sha{
  width: calc(292* var(--variable)* var(--ratio));
  margin-top: calc(16* var(--variable)* var(--ratio));
  mix-blend-mode: multiply;
}

.section5__wrapper .item04{
  width: calc(310* var(--variable)* var(--ratio));
  margin-top: calc(199* var(--variable)* var(--ratio));
  margin-left: calc(-8* var(--variable)* var(--ratio));
  position: relative;
}
.section5__wrapper .item04 .item_img{
  width: calc(309* var(--variable)* var(--ratio));
}
.section5__wrapper .item04 .item_img_sha{
  position: absolute;
  width: calc(309* var(--variable)* var(--ratio));
  top: calc(302* var(--variable)* var(--ratio));
  left: calc(0* var(--variable)* var(--ratio));
  mix-blend-mode: multiply;
}
.section5__wrapper .crdt__box01{
  margin-top: calc(50* var(--variable)* var(--ratio));
  position: relative;
  z-index: 5;
}
.section5__wrapper .crdt__box02{
  margin-top: calc(42* var(--variable)* var(--ratio));
}
.section5__wrapper .color_chip01{
  width: calc(18* var(--variable)* var(--ratio));
  margin-left: calc(179* var(--variable)* var(--ratio));
  margin-top: calc(21* var(--variable)* var(--ratio));
}
.section5__wrapper .color_chip02{
  width: calc(51* var(--variable)* var(--ratio));
  margin-left: calc(162* var(--variable)* var(--ratio));
  margin-top: calc(20* var(--variable)* var(--ratio));
}

/* -----------------------------
.section6__wrapper
-----------------------------*/
.section6__wrapper{
  width: calc(375* var(--variable)* var(--ratio));
  margin: 0 auto;
  margin-top: calc(138* var(--variable)* var(--ratio));
  padding-bottom: calc(122* var(--variable)* var(--ratio));
}
.section6__wrapper .sec_deco{
  width: calc(89* var(--variable)* var(--ratio));
  margin: 0 auto;
}
.section6__wrapper .item01{
  width: calc(375* var(--variable)* var(--ratio));
  margin: 0 auto;
  position: relative;
}
.section6__wrapper .item_title{
  width: calc(279* var(--variable)* var(--ratio));
  margin: 0 auto;
  margin-top: calc(43* var(--variable)* var(--ratio));
}
.section6__wrapper .item_img{
  width: calc(252* var(--variable)* var(--ratio));
  margin-left: calc(58* var(--variable)* var(--ratio));
  margin-top: calc(15* var(--variable)* var(--ratio));
  position: relative;
  z-index: 5;
}
.section6__wrapper .item_img_bk{
  width: calc(186* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(43* var(--variable)* var(--ratio));
  left: calc(94* var(--variable)* var(--ratio));
  z-index: 0;
}
.section6__wrapper .item_img_sha{
  width: calc(241* var(--variable)* var(--ratio));
  position: absolute;
  top: calc(224* var(--variable)* var(--ratio));
  left: calc(65* var(--variable)* var(--ratio));
  z-index: 1;
  mix-blend-mode: multiply;
}
.section6__wrapper .crdt__box{
  margin-top: calc(91* var(--variable)* var(--ratio));
}
.section6__wrapper .color_chip{
  width: calc(17* var(--variable)* var(--ratio));
  margin-left: calc(179* var(--variable)* var(--ratio));
  margin-top: calc(19* var(--variable)* var(--ratio));
}

/* -----------------------------
.last-sec__wrapper
-----------------------------*/
  .last-sec__wrapper .btn_box{
    width: calc(185* var(--variable)* var(--ratio));
    margin: 0 auto;
    position: relative;
  }
  .last-sec__wrapper .btn_txt{
    width: calc(80* var(--variable)* var(--ratio));
    margin: 0 auto;
  }
  .last-sec__wrapper .btn_frame{
    width: calc(185* var(--variable)* var(--ratio));
    position: absolute;
    top: calc(-57* var(--variable)* var(--ratio));
    left: calc(0* var(--variable)* var(--ratio));
    animation: 18s linear infinite rotation;
  }

/*================================
  animation
================================*/
/*------------------ js-fade-up */
.js-fade {
  opacity: 0;
  -webkit-transition: ease-in, opacity 1000ms;
  transition: ease-in, opacity 1000ms;
  /* -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms; */
  }
  
  .js-fade.active {
  opacity: 1;
  }

.mv-fade {
  opacity: 0;
  -webkit-transition: ease-in, opacity 1000ms;
  transition: ease-in, opacity 1000ms;
  /* -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms; */
  }
  
  .mv-fade.active {
  opacity: 1;
  }

.js-fade-up {
  opacity: 0;
  transition: ease-in, opacity 1000ms, transform 1000ms;
  transform: translate3d(0, 5rem, 0) scale(1);
}

.js-fade-up.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.fade-up,.fade-crdt {
  opacity: 0;
  transition: ease-in, opacity 1000ms, transform 1000ms;
  transform: translate3d(0, 5rem, 0) scale(1);
}

.fade-up.active,.fade-crdt.active  {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.delay{
  transition-delay: 0.4s;
}

.delay1{
  transition-delay: 0.5s;
  animation-delay: 0.2s;
}

.delay2{
  transition-delay: 0.7s;
  animation-delay: 0.3s;
}

.delay3{
  transition-delay: 1s;
  animation-delay: 0.5s;
}

.delay4{
  transition-delay: 1.2s;
  animation-delay: 0.7s;
}

.delay5{
  transition-delay: 2s;
  animation-delay: 1.3s;
}

.delay6{
  transition-delay: 2s;
  animation-delay: 1.2s;
}

@media screen and (max-width: 767px) {
  .delay_sp{
    transition-delay: 0.4s;
  }

  .delay1_sp{
    transition-delay: 0.6s;
    animation-delay: 0.2s;
  }

  .delay2_sp{
    transition-delay: 1s;
    animation-delay: 0.4s;
  }

  .delay3_sp{
    transition-delay: 1.4s;
    animation-delay: 0.6s;
  }
}

@media screen and (min-width: 768px) {
  .delay_pc{
    transition-delay: 0.4s;
  }

  .delay1_pc{
    transition-delay: 0.6s;
    animation-delay: 0.2s;
  }

  .delay2_pc{
    transition-delay: 1s;
    animation-delay: 0.4s;
  }

  .delay3_pc{
    transition-delay: 1.4s;
    animation-delay: 0.6s;
  }
}

.star {
	animation: flashing 4s infinite;
}
@keyframes flashing {
	0% {
		opacity: 1;
	}
	90% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*  ------------ 色の反転セクション */
body {
  background: #F9F0B2;
  transition: all 0.4s;
  /* transition: all 0.3s; */
}

body.on {
  background: #132A5E;
  transition: all 0.4s;
  /* transition: all 0.3s; */
}

body.on2 {
  background: #B8D6BE;
  transition: all 0.4s;
  /* transition: all 0.3s; */
}

.image-front,
.image-back {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.4s ease;
  /* transition: opacity 0.3s ease; */
}

.image-front {
  opacity: 1;
}

.image-back {
  opacity: 0;
}

body.on .image-back {
  opacity: 1;
}

body.on .image-front{
  opacity: 0;
}

.section4__wrapper .image-container,
.step__text-fixed .image-container{
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

body.on .index__wrapper li {
  fill: var(--color-white);
}

body.on .section2__wrapper .item04 .crdt {
  color: var(--color-white);
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 横スクロール */
.sticky-section {
  position: relative;
  height: 100vh;
}

.js-horizontal {
  /* width: 100vw;
  overflow-x: clip;
  position: relative; */
}

.how-to-order__content{
  /* position: sticky;
  top: 0;
  overflow-x: clip;
  z-index: 100; */
}

.how-to-order {
  /* height: calc(100vh + 255vh); 
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-overflow-scrolling: touch;
  will-change: transform; */
}

.how-to-order__list {
  position: relative;
  display: flex;
  transition: transform 1s ease;
  z-index: 100;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
}

.how-to-order__list > li {
  width: 100vw;
  flex-shrink: 0;
}
@media screen and (min-width: 768px){
  .how-to-order__list > li {
    width: 36rem;
    padding: 0 9.5rem;
    /* width: 44rem;
    padding: 0 5rem; */
    /* width: 55rem; */
  }
}
.sticky-wrapper {
  position: sticky;
  /* overflow-x: clip; */
  top: 0;
  z-index: 10;
}

@media screen and (max-width: 400px) {
  .sticky-wrapper {
    /* height: calc(460* (100vw /375)); */
    padding-top: calc((100vh - calc(339* (100vw /375))) / 2);
  }
}

@media (min-width: 401px) and (max-width: 767px) {
  .sticky-wrapper {
    /* height: calc(460* (100vw /375)); */
    padding-top: calc((100vh - calc(489* (100vw /375))) / 2);
  }
}

.how-to-order{
  padding-top: 0;
  margin-bottom: calc(144* var(--variable)* var(--ratio));
}

@media screen and (max-width: 767px) {
  /* .sticky-wrapper {
    padding-top: calc((100vh - calc(485* (100vw /375))) / 2);
  } */

  .how-to-order__list > li{
    width: 100%;
    padding: 0 55px calc(-93 * (100vw / 375));
    /* padding-bottom: calc(-93* (100vw /375)); */
  }
}

@media screen and (min-width: 768px) {
  .sticky-wrapper {
    /* height: 67rem; */
    padding-top: calc((100vh - 48rem) / 2);;
  }

  .how-to-order__list > li{
    padding-bottom: -1rem;
  }
}

.horizontal-scroll {
  display: flex;
  width: 300vw;
}

.panel {
  width: 100vw;
  /* height: 100%; */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step__text-fixed { /* 固定テキスト領域 */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
}

.step__text {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.step__text.active {
  opacity: 1;
  position: relative;
  pointer-events: all;
}

.text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  /* transition: opacity 0.5s ease; */
  text-align: center;
}

/* 0424 16:00 追加箇所 */
.copywrite_txt{
  text-align: center;
  color: var(--color-txt-purple);
  line-height: 1.6;
}

.copywrite_txt{
  font-size: calc(8* var(--variable)* var(--ratio));
  margin-top: calc(98* var(--variable)* var(--ratio));
}

.heading {
  position: absolute;
  pointer-events: none;
}
.js-trigger.heading {
  transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-trigger.heading--txt01 {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.js-trigger.heading--txt01 .heading--body {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.js-trigger.heading--txt02 {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.js-trigger.heading--txt02 .heading--body {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.js-trigger.heading--txt03 {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.js-trigger.heading--txt03 .heading--body {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.js-trigger.heading--txt04 {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.js-trigger.heading--txt04 .heading--body {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.js-trigger.heading.is-active {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
.js-trigger.heading.is-active .heading--body {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
.js-trigger .heading--body {
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}