/* ==============================
   Common
============================== */
.button {
  width: 89%;
  max-width: 320px;
}

.section {
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
}

.prev,
.next {
  width: 43px;
  height: 43px;
  z-index: 10;
  padding: 0;
  border: 0;
  background: transparent;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* ==============================
   FV
============================== */
.fv {
  background-image: url(../images/fv.png);
  aspect-ratio: 375 / 700;
}

.fv__button {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
}

/* ==============================
   BENEFITS
============================== */
.benefits {
  background-image: url(../images/benefits.png);
  aspect-ratio: 375 / 883;
}
/* ==============================
   RECOMMEND
============================== */
.recommend {
  background-image: url(../images/recommend.png);
  aspect-ratio: 375 / 1691;
}

/* ==============================
   STORY
============================== */
.story {
  background-image: url(../images/story.png);
  aspect-ratio: 375 / 1820;
}

/* ==============================
   BEFORE-AFTER
============================== */
.before-after {
  background-image: url(../images/before-after.png);
  aspect-ratio: 375 / 783;
}

/* ==============================
   PRODUCT
============================== */
.product {
  background-image: url(../images/product.png);
  aspect-ratio: 375 / 719;
}

.product__button {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

/* ==============================
   TECHNOLOGY
============================== */
.technology {
  background-image: url(../images/technology.png);
  aspect-ratio: 375 / 699;
}

.technology__tabs {
  width: 87%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 114px;
  display: flex;
  gap: 4px;
}

.technology__tab {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  font-weight: 500;
  width: 50%;
  padding: 4px 10px;
  border-radius: 4px 4px 0 0;
  background-color: #ffffff;
  border: 1px solid #594618;
}

.technology__tab.is-active {
  background-color: #594618;
  color: #ffffff;
}

.technology__contents {
  width: 87%;
  aspect-ratio: 327/530;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 152px;
}

.technology__content {
  display: none;
}

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

/* ==============================
   EFFECT
============================== */
.effect {
  background-image: url(../images/effect.png);
  aspect-ratio: 375 / 1586;
}

/* ==============================
   POINT
============================== */
.point {
  background-image: url(../images/point-bg.png);
  background-repeat: repeat;
  aspect-ratio: 375 / 678;
}

.point__slider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 87%;
}

.point__swiper {
  width: 100%;
  padding-bottom: 53px;
  background-color: #ffffff;
  overflow: hidden;
}

.point__prev {
  left: -12px;
}

.point__next {
  right: -12px;
}

.point__pagination {
  bottom: 29px !important;
}

.swiper-pagination-bullet {
  background-color: rgb(77, 110, 126, 0.4);
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  background-color: #4d6e7e;
}

/* ==============================
   VOICE
============================== */
.voice {
  background-image: url(../images/voice.png);
  aspect-ratio: 375 / 1249;
}

.voice__slider {
  width: 280px;
  aspect-ratio: 280/350;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 124px;
}

.voice__prev {
  left: -35px;
}

.voice__next {
  right: -35px;
}

.voice__pagination {
  bottom: -76px !important;
}

/* ==============================
   QA
============================== */
.qa {
  padding-block: 40px 65px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.qa__title {
  width: 163px;
  aspect-ratio: 163/42;
}

.qa__list {
  width: 87%;
}

.qa__item {
  color: #484b4d;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  border-bottom: 1px solid rgb(72, 75, 77, 0.4);
}

.qa__head {
  width: 100%;
  padding: 8px 35px 8px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  position: relative;
}

.qa__head-text {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  color: #594618;
}

.qa__head::before,
.qa__head::after {
  content: "";
  width: 12px;
  height: 1px;
  background-color: #484b4d;

  position: absolute;
  top: 50%;
  right: 8px;

  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

.qa__head::after {
  transform: translateY(-50%) rotate(90deg);
}

.qa__item.is-open {
  .qa__head {
    &::after {
      transform: translateY(-50%) rotate(0deg);
    }
  }
}

.qa__body {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.qa__body-inner {
  padding: 0 8px 8px 8px;
}
/* ==============================
   USE
============================== */
.use {
  background-image: url(../images/use.png);
  aspect-ratio: 375 / 737;
}

.use__tabs {
  width: 87%;
  display: flex;
  gap: 8px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 115px;
}

.use__tab {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  font-weight: 500;
  width: 50%;
  padding: 4px 10px;
  border-radius: 4px;
  background-color: #ffffff;
  border: 1px solid #4d6e7e;
  color: #4d6e7e;
}

.use__tab.is-active {
  background-color: #4d6e7e;
  color: #ffffff;
}

.use__contents {
  width: 87%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 163px;
}

.use__content {
  display: none;
}

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

.hair-care__slider,
.massage__slider {
  position: relative;
}

.hair-care__swiper,
.massage__swiper {
  overflow: hidden;
}

.hair-care__slide,
.massage__slide {
  img {
    width:100%;
  }
}

.hair-care__prev,
.massage__prev {
  left: -10px;
}

.hair-care__next,
.massage__next {
  right: -10px;
}

/* ==============================
   GIFT
============================== */
.gift {
  background-image: url(../images/gift.png);
  aspect-ratio: 375 / 634;
}

.gift__button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 44px;
}

/* ==============================
   RESULT
============================== */
.result {
  background-image: url(../images/result.png);
  aspect-ratio: 375 / 587;
}