html{

}

main{
    max-width: 700px;
    margin: 0 auto;
    background-image: linear-gradient(90deg, #fcf2e7 25%, #f8e9d8 25%, #f8e9d8 50%, #fcf2e7 50%, #fcf2e7 75%, #f8e9d8 75%, #f8e9d8 100%);
    background-size: 40.00px 40.00px;
}

img{
    width: 100%;
}


.img-box{
    width: 100%;
    position: relative;
}


.img-parts img{
    position: absolute;
}


.cta-section .img-bk{
  padding: 0 2%;
}

/* ====================== */

.p01{
    top: 11%;
    width: 90%;
    left: 50%;
    --base-transform: translateX(-50%);
    transform: var(--base-transform);
    }

    .p02{
    top: 38%;
    width: 38%;
    left: 58%;
    }

    .att{
      position: absolute;
      width: 10%;
      bottom: 13%;
      left: 2%;
    }


.cta_b_price{
    width: 22%;
    top: 70%;
    left: 7%;
}

.cta_a{
    top: 73%;
    width: 6%;
    left: 4%;
}


.cta_a_price{
    top: 72%;
    width: 26%;
    left: 45%;
}

.cta_a_price02{
top: 74.8%;
    width: 33%;
    left: 49%;
  }


.gif1{
    top: 4%;
    width: 13%;
    right: 8%;
    --base-transform: rotate(7deg);
    transform: var(--base-transform);
}

/* ====================== */

.gif2{
    top: 2%;
    width: 17%;
    right: 5%;
    --base-transform: rotate(7deg);
    transform: var(--base-transform);
}

    .p03{
    top: 15%;
    width: 100%;
    left: 50%;
    --base-transform: translateX(-50%);
    transform: var(--base-transform);
    }

    .check-box{
      display: flex;
    }

    .p04{
    top: 70%;
    width: 25%;
    left: 20%;
    --base-transform: translateX(-50%);
    transform: var(--base-transform);
    }
    .p05{
    top: 70%;
    width: 25%;
    left: 50%;
    --base-transform: translateX(-50%);
    transform: var(--base-transform);
    }

    .p06{
    top: 70%;
    width: 25%;
    left: 80%;
    --base-transform: translateX(-50%);
    transform: var(--base-transform);
    }

    /* ====================== */

    .p07,.p08,.p09,.p10,.p11,.p12{
        width: 90%;
        display: block;
        margin: 0 auto;
    }

    .p12{
      width: 80%;
    }


/* ====================== */


    .gif3{
    position: absolute;
    bottom: 15.5%;
    width: 28%;
    right: 14%;
    --base-transform: rotate(7deg);
    transform: var(--base-transform);
    z-index: 1;
}

@media screen and (max-width: 800px){
  .gif3{
          bottom: 20.5%;
}
}


/* ====================== */


.cta{
    width: 100%;
}

.cta img{
    display: block;
    width: 80%;
    margin: 64px auto 30px;
}

   

    /* ====================== */

    .gif4{
    top: 11%;
    width: 13%;
    right: 8%;
    left: 50%;
    --base-transform: translateX(-50%);
    transform: var(--base-transform);
    z-index: 1;
    }


    .p2_1{
    top: 2%;
    width: 32%;
    left: 55%;
    --base-transform: translateX(-50%);
    transform: var(--base-transform); 
    }

    .p2_2{
    top: 21%;
    width: 82%;
    left: 50%;
    --base-transform: translateX(-50%);
    transform: var(--base-transform);
    }

    .p2_3{
    top: 27%;
    width: 52%;
    left: 7%;
    }

    .p2_4{
    top: 29%;
    width: 72%;
    left: 3%;
    }

    .p2_5{
    top: 32.5%;
    width: 32%;
    left: 59%;
    }

    .p3{
    bottom: 4%;
    width: 82%;
    left: 50%;
    --base-transform: translateX(-50%);
    transform: var(--base-transform);
    }


    /* ====================== */

    .gif5{
    top: -6%;
    width: 10%;
    right: 13%;
    z-index: 1;
    position: absolute;
    }

    .gif6{
    top: 46%;
    width: 14%;
    left: 21%;
    z-index: 1;
    position: absolute;
    }

    .p2_6_0{
    width: 90%;
    margin: 0 auto 8%;
    display: block;
    }


    .p2_6{
    width: 80%;
    margin-left: 5%;
    }

    .p2_7{
    top: 16%;
    width: 22%;
    right: 6%;
    position: absolute;
    }

    .chara-box{
      position: relative;
    }
    .p2_8{
    width: 66%;
    display: block;
    margin-top: -10%;
    margin-left: auto;
    margin-right: 5%;
    }

    .p2_9{
    top: 58%;
    width: 47%;
    left: 0%;
    z-index: 2;
    position: relative;
    margin-top: -10%;
    margin-left: 3%;
    }

    .p2-box{
      position: relative;
    }

    .p2_10 {
    width: 90%;
    margin: -21% auto 0;
    display: block;
    }

    .ex-img{
      width: 85%;
      margin: 5% auto;
      display: block;
    }

    /* ====================== */


    .p3_0{
      width: 90%;
      margin: 5% auto;
      display: block;
    }

    .p3_1{
      padding:  0 5%;
    }

    .p3_2{
      padding:  0 5%;
      margin: 0 auto;
      display: block;
    }


.s-cta_b_price{
    width: 19%;
    top: 21%;
    left: 11%;
}

.s-cta_a{
    top: 25%;
    width: 6%;
    left: 7%;
}


.s-cta_a_price{
    top: 42%;
    width: 21%;
    left: 45%;
}

.s-cta_a_price02{
    top: 59%;
    width: 29%;
    left: 49%;
}


.att2{
    bottom: 76%;
    left: 10%;
  }



@media screen and (max-width: 800px){
  


.s-cta_b_price{
    width: 22%;
    top: 20%;
    left: 10%;
}

.s-cta_a{
    top: 26%;
    width: 5%;
    left: 7%;
}



.cta-c02{
    top: 51.5%;
}


.cta img{
  width: 100%;
}

.s-cta_a_price {
    top: 35%;
  }

  .s-cta_a_price02 {
    top: 53%;
  }


.b-cta .s-cta_a_price {
    top: 37.6%!important;
  }
  .b-cta .s-cta_a_price02 {
    top: 55.2%!important;
  }

  .att2 {
    bottom: 79%;
  }
  .att3 {
    bottom: 76%!important;
  }

}



 /* ====================== */


  .p3_4{
    width: 90%;
    padding:  0 5%;
}

 .p3_5{
    width: 34%;
    position: absolute;
    right: 0;
    top: 75.5%;
    z-index: 1;
}

  .p3_6{
    width: 90%;
    display: block;
    margin: 6% 0;
    margin-left: auto;
    padding:  0 5%;
}

 .p3_7{
    width: 34%;
    position: absolute;
    right: 0;
    top: 86.5%;
     z-index: 1;
}

  .p3_8{
    width: 90%;
    padding:  0 5%;
}

 .gif7{
    width: 25%;
    position: absolute;
    right: 6%;
    top: 96%;
}


.b-cta{
  padding-top: 10%;
}

.b-cta .s-cta_a_price {
    top: 45%;
    width: 21%;
    left: 45%;
}

.b-cta .s-cta_a_price02 {
    top: 61%;
    width: 29%;
    left: 49%;
}


.att3{
    bottom: 72%;
    left: 10%;
  }

 /* ====================== */

  .gif8{
    width: 22%;
    position: absolute;
    left: 4%;
    top: 1%;
}
.p4,.p4_2,.p4_4{
    width: 90%;
    display: block;
    margin: 0 auto;
}

 .p4_1{
    position: absolute;
    top: 13.5%;
    width: 80%;
    left: 50%;
    --base-transform: translateX(-50%);
    transform: var(--base-transform);
 }



  /* ====================== */

  .p4_6{
    position: absolute;
    top: 10%;
    width: 80%;
    left: 50%;
    --base-transform: translateX(-50%);
    transform: var(--base-transform);
  }

    .p4_7{
    position: absolute;
    top: 17%;
    width: 80%;
    left: 50%;
    --base-transform: translateX(-50%);
    transform: var(--base-transform);
  }

  .gif6_2{
    width: 18%;
    position: absolute;
    left: 17%;
    top: 1%;
    transform: rotate(-4deg);
  }

  .gif2_2{
    width: 18%;
    transform: scaleX(-1);
    position: absolute;
    left: 34%;
    top: 0%;
  }


  @media screen and (max-width: 640px){
     .p4_1{
    top: 11.5%;
 }
  }

/* ===animation==== */


.fade-up,
.slide-left,
.slide-right,
.pop,
.rotate-in {
  opacity: 0;
  will-change: opacity, transform;
  transition-property: opacity, transform;
  transition-duration: 0.8s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
}


.fade-up.is-ready {
  transform: var(--base-transform, translate3d(0, 0, 0)) translate3d(0, 32px, 0) scale(0.98);
}

.slide-left.is-ready {
  transform: var(--base-transform, translate3d(0, 0, 0)) translate3d(-36px, 0, 0);
}

.slide-right.is-ready {
  transform: var(--base-transform, translate3d(0, 0, 0)) translate3d(36px, 0, 0);
}

.pop.is-ready {
  transform: var(--base-transform, translate3d(0, 0, 0)) scale(0.72);
  transition-duration: 0.65s;
}

.rotate-in.is-ready {
  transform: var(--base-transform, translate3d(0, 0, 0)) translate3d(0, 28px, 0) rotate(-9deg) scale(0.9);
}


.fade-up.is-ready.is-active,
.slide-left.is-ready.is-active,
.slide-right.is-ready.is-active,
.pop.is-ready.is-active,
.rotate-in.is-ready.is-active {
  opacity: 1;
  transform: var(--base-transform, translate3d(0, 0, 0));
}

@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .slide-left,
  .slide-right,
  .pop,
  .rotate-in {
    opacity: 1;
    transform: var(--base-transform, translate3d(0, 0, 0)) !important;
    transition: none !important;
  }
}


.float-loop {
  animation: floatLoop 3s ease-in-out infinite;
  will-change: transform;
}

@keyframes floatLoop {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}



/* ====================== */


.trial1{
    padding-top: 10%;
}

.trial1 .s-cta_a_price{
top: 21%;
    width: 35%;
    left: 19%;
}

.trial1 .s-cta_b_price {
    width: 19%;
    top: 13%;
    left: 11%;
}

.trial1 .s-cta_a {
    top: 16%;
    width: 6%;
    left: 7%;
}

.t_price{
    width: 20%;
    right: 34%;
    bottom: 41%;
}

.t_img{
  top: 61%;
    width: 64%;
    left: 50%;
    --base-transform: translateX(-50%);
}

.att4{
  bottom: 66%;
      left: 10%;
}

.footer-links {
  display: block;
  text-align: center;
  padding: 20px 0 28px;
  width: 100%;
}

.footer-links a {
  display: inline-block;
  font-size: clamp(11px, 3vw, 13px);
  color: #c8b89a;
  text-decoration: underline;
}

/* ===定期購入注意書き==== */

.subscription-notice {
  padding: 8% 5% 6%;
}

.subscription-notice-inner {
  border: 2px solid #e07820;
  border-radius: 12px;
  padding: 20px;
  background: #fff9f3;
}

.subscription-notice-title {
  font-size: clamp(14px, 3.8vw, 16px);
  font-weight: bold;
  color: #e07820;
  border-bottom: 2px solid #e8c9a0;
  padding-bottom: 10px;
  margin-bottom: 14px;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

.subscription-notice-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.subscription-notice-list li {
  font-size: clamp(12px, 3.3vw, 13px);
  color: #5a3a1a;
  line-height: 1.75;
  padding-left: 1.2em;
  position: relative;
}

.subscription-notice-list li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: #e07820;
}

.subscription-notice-list strong {
  color: #c0390a;
}

/* ===FAQ==== */

.faq-section {
  padding: 10% 5% 12%;
}

.faq-title-wrap {
  text-align: center;
  margin-bottom: 8%;
}

.faq-title {
  display: inline-block;
  background-color: #e07820;
  color: #fff;
  font-size: clamp(18px, 5vw, 26px);
  font-weight: bold;
  letter-spacing: 0.12em;
  padding: 10px 36px;
  border-radius: 3px;
  position: relative;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  box-shadow: 3px 3px 0 #b55a10;
}

.faq-title::before,
.faq-title::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 70%;
  background: rgba(255,255,255,0.35);
  border-radius: 2px;
}
.faq-title::before { left: 14px; }
.faq-title::after  { right: 14px; }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: #fffaf4;
  border: 2px solid #e8c9a0;
  border-radius: 14px;
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 14px 14px;
  cursor: pointer;
  list-style: none;
  color: #5a3a1a;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-q-badge {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: #e07820;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 15px;
  line-height: 1;
  margin-top: 1px;
}

.faq-q-text {
  flex: 1;
  font-size: clamp(13px, 3.8vw, 15px);
  line-height: 1.65;
  font-weight: bold;
  padding-top: 3px;
}

.faq-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid #e07820;
  border-radius: 50%;
  position: relative;
  margin-top: 3px;
  transition: background 0.25s;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: #e07820;
  border-radius: 2px;
  transition: transform 0.3s;
}
.faq-icon::before {
  width: 10px; height: 2px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.faq-icon::after {
  width: 2px; height: 10px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.faq-item[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: #f2f9ec;
  border-top: 2px dashed #b8d9a0;
}

.faq-a-badge {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: #5c9a38;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 15px;
  line-height: 1;
  margin-top: 1px;
}

.faq-a-text {
  flex: 1;
  font-size: clamp(12px, 3.5vw, 14px);
  line-height: 1.85;
  color: #5a3a1a;
}

.countdown-area {
  text-align: center;
  padding: 30px 20px;
  background: #fff7ef;
    margin: 10% 0;
}

.countdown-label {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
  color: #6b4a35;
}

.countdown {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.countdown-item {
  min-width: 78px;
  padding: 14px 10px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(80, 50, 30, 0.08);
  animation: countdownFade 0.6s ease both;
}

.countdown-item span {
  display: block;
  font-size: 32px;
  line-height: 1;
  font-weight: 700;
  color: #9a5b32;
}

.countdown-item small {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #6b4a35;
}

.countdown-ended {
  display: none;
  margin-top: 16px;
  font-size: 18px;
  font-weight: 700;
  color: #9a5b32;
}

.countdown-item.is-animate {
  animation: countPop 0.3s ease;
}

@keyframes countPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes countdownFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 600px) {
  .countdown {
    gap: 8px;
  }

  .countdown-item {
    min-width: 64px;
    padding: 12px 6px;
  }

  .countdown-item span {
    font-size: 26px;
  }

  .countdown-item small {
    font-size: 12px;
  }
}