@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(66, 150, 96) !important; */
  background: linear-gradient(180deg, rgba(250, 240, 230, 1), rgba(250, 240, 230, 0))!important;
}

.header {
  background: rgb(66, 150, 96) !important;
  background: linear-gradient(rgba(66, 150, 96,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));
  }
}

@media screen and (min-width: 768px) {
  .main-area.lp{
    padding-top: 7rem;
  }
}

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


#MC250424hyacinth{
  --color-green-bg1: #429660;
  --color-beige-bg2: #E2DED3;
  --color-txt: #2E3233;
  --color-txt-blue: #7FA7CC;
  --color-ttl: #C1843D;
  --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);
  /* background-color: var(--color-green-bg1); */
  overflow-x: clip;
}

#MC250424hyacinth p,
#MC250424hyacinth a,
#MC250424hyacinth h3,
#MC250424hyacinth 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
  -----------------------------*/
#MC250424hyacinth .intro_txt{
  line-height: 2.25;
  letter-spacing: -0.02em;
}

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

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

#MC250424hyacinth .crdt{
  line-height: 1.6666666667;
  letter-spacing: -0.04em;
}

#MC250424hyacinth .crdt .price-adjust{
  letter-spacing: 0.08em;
}

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

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

  #MC250424hyacinth .mv-txt{
    font-size: calc(17* (100vw /375));
    letter-spacing: -0.05em;
  }


  #MC250424hyacinth .sales-info_txt{
    font-size: calc(13* (100vw /375));
  }

  #MC250424hyacinth .sales-info_txt .colon-adjust{
    margin-left: calc(4*(100vw / 375));
    margin-right: calc(4*(100vw / 375));
  }

  #MC250424hyacinth .sec_ttl{
    font-size: calc(15* (100vw /375));
    margin-bottom: 0;
  }

  #MC250424hyacinth .crdt{
    font-size: calc(12* (100vw /375));
    word-spacing: calc(2*(100vw / 375));
  }

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

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

}

@media screen and (min-width: 768px) {
  #MC250424hyacinth .intro_txt{
    font-size: 2.2rem;
    margin: 0 auto 7rem;
  }

  #MC250424hyacinth .mv-txt{
    font-size: 1.7rem;
  }

  #MC250424hyacinth .sales-info_txt{
    font-size: 1.9rem;
  }

  #MC250424hyacinth .sales-info_txt .colon-adjust{
    margin-right: 0.4rem;
    margin-left: 0.4rem;
  }

  #MC250424hyacinth .sec_ttl{
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
  }

  #MC250424hyacinth .crdt{
    font-size: 1.76rem;
    word-spacing: 0.35rem;
  }

  /* .accordion__buttonText{
    font-size: 1rem;
  } */

  .sec_txt{
    font-size: 2rem;
  }

}


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

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

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

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

  #MC250424hyacinth .pcOnly {
    display: none;
  }

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

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

  #MC250424hyacinth 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) {
  .mv-img{
    width: calc(293* (100vw /375));
    margin: calc(13.5* (100vw /375)) auto calc(31.5* (100vw /375));
  }

  .mv-logo{
    width: calc(284* (100vw /375));
    margin: 0 auto calc(30* (100vw /375));
  }
}

@media screen and (min-width: 768px) {
  .fv__wrapper{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-starts;
    width: 100%;
  }

  .mv-img{
    width: 67.5%;
  }

  .mv-logo{
    width: 22.2%;
    margin-right: 3%;
    margin-top: 3.5%;
  }
}

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

  .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:  55rem;
    padding-top: 11rem;
    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: 13.80007rem;
  }

  .index2{
    width: 28.4rem;
  }

  .index3{
    width: 15.81832rem;
  }

  .index4{
    width: 28.04388rem;
  }

  .index5{
    width: 16.87977rem;
  }

  .index6{
    width: 14.45258rem;
  }

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

  .cai_btn__wrapper .cai_btn {
    width: 10.1rem;
    height: 10.1rem;
    padding-bottom: 10.5rem;
    right: 4rem;
  }

}



/* -----------------------------
.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/SVG/frame.svg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
}

#MC250424hyacinth .intro__wrapper{
  letter-spacing: -0.05em;
}

#MC250424hyacinth .space-adjust{
  display: block;
}

#MC250424hyacinth .sales-info__cont .date-adjust{
 letter-spacing: 0.02em;
}

@media screen and (max-width: 767px) {
  #MC250424hyacinth .intro__wrapper{
    padding: calc(58*(100vw / 375)) 0;
  }

  #MC250424hyacinth .space-adjust{
    padding-bottom: calc(26* (100vw /375));
  }

  .sales-info__cont{
    width: calc(284*(100vw / 375));
    height: calc(111*(100vw / 375));
    row-gap: calc(15*(100vw / 375));
    padding-right: calc(4*(100vw / 375));
  }
}


@media screen and (min-width: 768px) {
  #MC250424hyacinth .intro__wrapper{
    padding-bottom: 9.5rem;
  }

  #MC250424hyacinth .space-adjust{
    padding-bottom: 3.9rem;
  }

  .sales-info__cont{
    width: 42rem;
    height: 16.3rem;
    row-gap: 2.2rem;
  }

  .sales-info__cont::after{
    background-size: contain;
  }

  #MC250424hyacinth .sales-info_txt,
  #MC250424hyacinth .sales-info__cont .date-adjust{
    letter-spacing: 0.05em;
  }

  #MC250424hyacinth .sales-info_txt .colon-adjust{
    margin-right: 0.5rem;
    margin-left: 0.2rem;
  }
}
/* -----------------------------
.section2__wrapper
-----------------------------*/
.section2__wrapper{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: clip;
  z-index: 1;
}

.section2__wrapper::after,
.section2__wrapper::before{
  content: "";
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}

.section2__wrapper::after{
  background-image: url(../img/bg1_1.png);
}

.section2__wrapper::before{
  background-image: url(../img/bg1_2.png);
}

@media screen and (max-width: 767px) {
  .section2__wrapper{
    padding: calc(111* (100vw / 375)) 0 calc(44* (100vw / 375));
  }

  .section2__wrapper::after{
    width: calc(539.5*(100vw / 375));
    height: calc(647*(100vw / 375));
    left: calc(-90*(100vw / 375));
    bottom: calc(-183* (100vw / 375));
  }

  .section2__wrapper::before{
    width: calc(277*(100vw / 375));
    height: calc(630.5*(100vw / 375));
    top: calc(-16*(100vw / 375));
    left: calc(66*(100vw / 375));
  }

  .section2__wrapper .item01{
    width: calc(86* (100vw / 375));
    margin-bottom: calc(42* (100vw / 375));
  }
}

@media screen and (min-width: 768px) {
  .section2__wrapper{
    padding: 15rem 0 8.5rem;
  }

  .section2__wrapper::after{
    width: 79.12666rem;
    height: 94.89333rem;
    bottom: -24.9rem;
    right: -10.9rem;
  }

  .section2__wrapper::before{
    width: 40.77333rem;
    height: 93.06rem;
    top: -3.5rem;
    right: 4.3rem;
  }

  .section2__wrapper .item01{
    width: 12.7rem;
    margin-bottom: 5.6rem;
  }
}

/* -----------------------------
.section3__wrapper
-----------------------------*/
.section3__wrapper{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: clip;
}

.section3__wrapper::after{
  content: "";
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
}

.section3__wrapper::after{
  background-image: url(../img/SVG/dec01.svg);
  z-index: 10;
}

.section3__cont{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-beige-bg2);
  border-top-left-radius: 250px;
  border-top-right-radius: 250px;
  z-index: 10;
}

#MC250424hyacinth .section3__wrapper .sec_ttl{
  color: var(--color-ttl);
  line-height: 2;
  letter-spacing: 0.004em;
}

.piramid{
  position: relative;
}
@media screen and (max-width: 767px) {

  #MC250424hyacinth .section3__wrapper .sec_ttl{
    font-size: calc(17* (100vw /375));
  }

  .section3__wrapper{
    padding: calc(50* (100vw / 375)) 0 calc(92* (100vw / 375));
  }

  .section3__wrapper::after{
    bottom: calc(-20* (100vw / 375));
    left: calc(-20* (100vw / 375));
  }

  .section3__cont{
    width: calc(342* (100vw / 375));
    padding: calc(65* (100vw / 375)) 0  calc(62* (100vw / 375));
    border-top-left-radius: calc(250* (100vw / 375));
    border-top-right-radius: calc(250* (100vw / 375));
    margin: 0 auto;
  }

  .piramid{
    width: calc(470.5*(100vw / 375));
    left: calc(77*(100vw / 375));
    top: calc(-13*(100vw / 375));
  }
}

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

  #MC250424hyacinth .section3__wrapper .sec_ttl{
    font-size: 2.5rem;
  }

  .section3__wrapper{
    padding: 5rem 0 13.5rem;
  }

  .section3__wrapper::after{
    bottom: -2rem;
    left: -2rem;
  }

  .section3__cont{
    width: 50.07382rem;
    padding: 9.5rem 0  9.4rem;
    margin: 0 auto;
    border-top-left-radius: 25rem;
    border-top-right-radius: 25rem;
  }

  .piramid{
    position: relative;
    width: 69.00667rem;
    height: 49rem;
    top: -2.2rem;
    left: 11.2rem;
  }

  .accordion__cont{
    padding-top: 0.7rem;
  }
}


/* -----------------------------
.section4__wrapper
-----------------------------*/
/* .section4__wrapper{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
} */

.step__text-fixed.bg3_1,
.step__text-fixed.dec02{
  max-width: 55rem;
  height: auto;
  width: 100%;
}

.step__text-fixed.bg3_1::after,
.step__text-fixed.dec02::before{
  content: "";
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
}

.step__text-fixed.bg3_1::after{
  background-image: url(../img/bg3_1.png);
  z-index: -1;
}

.step__text-fixed.dec02{
  z-index: 100;
}

.step__text-fixed.dec02::before{
  background-image: url(../img/svg/dec02.svg);
  z-index: 100;
}

.section4__wrapper .text{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.section4__cont{
  position: relative;
}


/* 
.toc {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
}
 */

@media screen and (max-width: 767px) {
  .section4__wrapper{
    padding: calc(180* (100vw /375)) 0 0;
  }

  .step__text-fixed.bg3_1::after{
    width: calc(514.5*(100vw / 375));
    height: calc(494.5*(100vw / 375));
    top: calc(-485*(100vw / 375));
    right: calc(-57*(100vw / 375));
  }

  .step__text-fixed.dec02::before{
    width: calc(78*(100vw / 375));
    height: calc(65*(100vw / 375));
    bottom: calc(12*(100vw / 375));
    transform: translateX(calc(-87*(100vw / 275)));
  }

  .section4__wrapper .panel img{
    width: calc(245* (100vw /375))!important;
    transform: translateX(calc(6*(100vw / 375)));
  }
/* 
  .section4__wrapper .panel1 img{
    width: calc(122.5* (100vw /375));
  }

  .section4__wrapper .panel2 img{
    width: calc(83.3174* (100vw /375));
  }

  .section4__wrapper .panel3 img{
    width: calc(159* (100vw /375));
  } */
}

@media screen and (min-width: 768px) {
  /* .section4__wrapper{
    padding: calc(180* (100vw /500)) 0 calc(160* (100vw /500));
  } */

  .step__text-fixed.bg3_1::after{
    width: 75.46rem;
    height: 72.52667rem;
    /* top: -509%; */
    left: -22.4%;
    transform: translateY(-71rem);
  }

  .step__text-fixed.dec02::before{
    width: 12rem;
    height: 8.6rem;
    top: -11.2rem;
    transform: translateX(-17.6rem);
  }

  .section4__wrapper .panel img{
    width: 36rem!important;
    transform: translateX(0.8rem);
  }

  .section4__wrapper .panel{
    /* width: 36rem;
    padding: 0 9.5rem; */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  _::-webkit-full-page-media, _:future, :root .section4__wrapper .panel {
    width: 36rem;
    padding: 0 9.5rem;
  }

  /* .section4__wrapper .panel1 img{
    width: calc(122.5* (100vw /500));
  }

  .section4__wrapper .panel2 img{
    width: calc(83.3174* (100vw /500));
  }

  .section4__wrapper .panel3 img{
    width: calc(159* (100vw /500));
  } */
}


/* -----------------------------
.last-sec__wrapper
-----------------------------*/

.last-sec__wrapper{
  /* position: relative; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.last-sec__wrapper .cai_btn{
  position: relative;
  z-index: 10;
  pointer-events: all;
}

.last-sec__wrapper .cai_btn::after{
  content: "";
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../img/dec_atlast.png);
  z-index: 100;
}

@media screen and (max-width: 767px) {
  .last-sec__wrapper{
    transform: translateY(calc(-243 * (100vw / 375)));
    padding: 0 0 calc(96 * (100vw / 375));
  }

  .last-sec__wrapper .cai_btn{
    width: calc(123* (100vw /375));
    margin: 0 auto calc(77* (100vw /375));
  }

  .last-sec__wrapper .cai_btn::after{
    width: calc(126.5*(100vw / 375));
    height: calc(180.5*(100vw / 375));
    left: calc(-90*(100vw / 375));
    bottom: calc(-11*(100vw / 375));
  }

  .last-sec__wrapper .logo_atend{
    width: calc(284* (100vw /375));
  }
}

@media screen and (min-width: 768px) {
  .last-sec__wrapper{
    position: relative;
    width: 100%;
    max-width: 55rem;
    top: -10rem;
    overflow-x: clip;
    padding: 1rem 0 14.5rem;
    margin: 0 auto;
  }

  .last-sec__wrapper .cai_btn{
    position: relative;
    z-index: 10;
    width: 18.04rem;
    margin-bottom: 11rem;
    margin-left: 1rem;
  }

  .last-sec__wrapper .cai_btn::after{
    width: 18.55333rem;
    height: 26.47333rem;
    left: -13.8rem;
    bottom: -2rem;
  }

  .last-sec__wrapper .logo_atend{
    width: 41.65333rem;
  }
}


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

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

.delay1{
  transition-delay: 0.5s;
}

.delay2{
  transition-delay: 1s;
}

/*------------------ accordion */
.accordion__toggle::before{
  background-image: url(../img/svg/readmore.svg);
}

.accordion__toggle.is-open::before{
  background-image: url(../img/svg/close.svg);
}


.accordion__toggle{
  display: block;
  position: relative;
  cursor: pointer;
}

.accordion__toggle::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
}

.accordion__accordionMoreContent {
  /* display: none; */
  line-height: 2.25;
  letter-spacing: 0.068em;
}

.accordion__cont{
  height: 0;
  overflow: hidden;
  transition: height .6s cubic-bezier(.23, 1, .32, 1);
}


@media screen and (max-width: 767px) {
  #MC250424hyacinth .accordion__accordionMoreContent {
    font-size: calc(12*(100vw / 375));
  }

  .accordion__toggle{
    margin-top: calc(30* (100vw /375));
    width: calc(87* (100vw /375));
    height: calc(61* (100vw /375));
  }
}

@media screen and (min-width: 768px) {
  #MC250424hyacinth .accordion__accordionMoreContent {
    font-size: 1.75rem;
  }

  .accordion__toggle{
    margin-top: 4.7rem;
    width: 12.7rem;
    height: 8.9rem;
  }
}


/* #MC250424hyacinth .accordion__accordionMoreContent {
  display: none;
  line-height: 2.25;
  letter-spacing: 0.068em;
}

.accordion__buttonText {
  position: relative;
  text-align: left;
}

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

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

.accordion__button{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  #MC250424hyacinth .accordion__accordionMoreContent {
    font-size: calc(12*(100vw / 375));
  }
  .accordion__button{
    padding-top: calc(30* (100vw /375));
    width: calc(86* (100vw /375));
  }
}

@media screen and (min-width: 768px) {
  #MC250424hyacinth .accordion__accordionMoreContent {
    font-size: 1.75rem;
  }
  .accordion__button{
    padding-top: 4.7rem;
    width: 12.6rem;
  }
} */


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

body.on {
  background: #E2DED3;
  transition: all 0.5s;
  /* transition: all 0.3s; */
}

.image-front,
.image-back {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s 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-txt-blue);
}


.section3__wrapper .bg1 {
  position: absolute;
  pointer-events: none;
  z-index: 10;
}

@media screen and (max-width: 767px) {
  .section3__wrapper .bg1 {
    width: calc(373.5*(100vw / 375));
    bottom: calc(212*(100vw / 375));
    left: calc(-27*(100vw / 375));
  }

  .step__text-fixed.bg2 {
    width: calc(515*(100vw / 375));
    bottom: calc(-159*(100vw / 375));
    left: calc(243*(100vw / 375));
  }

  .section4__wrapper .image-front,
  .section4__wrapper .image-back {
    top: calc(-189*(100vw / 375));
    left: calc(-4*(100vw / 375));
  }
}

@media screen and (min-width: 768px) {
  .section3__wrapper .bg1 {
    width: 54.78rem;
    bottom: 31rem;
    left: -4rem;
  }

  .step__text-fixed.bg2 {
    width: 75.53333rem;
    bottom: 5.5%;
    left: 55.4%;
  }

  /* .cai_btn__wrapper .image-front,
  .cai_btn__wrapper .image-back {
    top: 0;
    left: 0;
  } */
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 横スクロール */
.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);
  }
}

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

  .how-to-order{
    padding-top: 0;
    margin-bottom: calc(540* (100vw /375));
  }

  .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{
    padding-top: 9.5rem;
    margin-bottom: 55rem;
  }

  .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: rgb(46, 50, 51);
  line-height: 1.6;
}

@media screen and (min-width: 768px) {
  .copywrite_txt{
    font-size: 1rem;
    padding-top: 6rem;
  }
}

@media screen and (max-width: 767px) {
  .copywrite_txt{
    font-size: calc(10* (100vw /375));
    padding-top: calc(47* (100vw /375));
  }
}