@charset "utf-8";

/* ===============================================
# MARK:Variable
=============================================== */
:root {
  --duration: 0.3s;
  --ease: ease-in-out;

  interpolate-size: allow-keywords;
}

/* ===============================================
# MARK:Reset
=============================================== */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  -webkit-margin-after: 0;
  margin-block-end: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  color: currentColor;
}

img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

/* ===============================================
# MARK:Base
=============================================== */
* {
  padding: 0;
  margin: 0;
}

body {
  color: #4d4949;
  font-family: "SicUVeiw-DB", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  margin: 0;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  text-wrap: wrap;
}

a {
  color: inherit;
  text-decoration: none;
}

/* img {
  width: 100%;
  height: auto;
} */

button {
  color: inherit;
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ol,
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

:focus:not(:focus-visible) {
  outline: none;
}

:where(dialog) {
  width: unset;
  max-width: unset;
  height: unset;
  max-height: unset;
  padding: unset;
  color: unset;
  background-color: unset;
  border: unset;
  overflow: unset;
}

:focus:not(:focus-visible) {
  outline: none;
}

:where(:root[data-mousedown] dialog *) {
  outline: none;
}

[data-modal-open]:where(:root[data-mousedown] *) {
  outline: none;
}

summary::-webkit-details-marker {
  display: none;
}
details summary {
  list-style: none;
  outline: none;
}

/* ===============================================
# MARK:Utility
=============================================== */
.u-hidden {
  width: 0;
  height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.u-frame {
  position: relative;
  padding-bottom: 14.4cqi;

  &::before {
    position: absolute;
    top: 6.4cqi;
    content: "";
    display: block;
    width: 100%;
    height: 21.9cqi;
    background-image: url("../img/frame_top.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-inline: auto;
  }

  &::after {
    position: absolute;
    bottom: 6.4cqi;
    content: "";
    display: block;
    width: 100%;
    height: 21.9cqi;
    background-image: url("../img/frame_bottom.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-inline: auto;
  }
}

/* ===============================================
# MARK:Layout
=============================================== */
/* PC */
.l-cover {
  display: grid;
  grid-template-columns: 1fr;
}

.l-cover__box {
  container-type: inline-size;
  container-name: --box;
  background-color: #fff;
  padding-bottom: 0;
}

.l-cover__left,
.l-cover__right,
.l-cover__bg {
  display: none;
}

@media (width >= 768px) {
  body {
    position: relative;
    background-image: url(../img/pc_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
  }

  .l-cover {
    grid-template-columns: minmax(0, 1fr) 400px minmax(0, 1fr);
  }

  .l-cover__box {
    border-radius: 0 0 3.2cqi 3.2cqi;
    overflow: hidden;
    z-index: 10;
  }

  .l-cover__left,
  .l-cover__right {
    display: block grid;
    position: relative;
    z-index: 5;
  }

  .l-cover__product {
    position: -webkit-sticky;
    position: sticky;
    top: 23svb;
    justify-self: center;
  }

  .l-cover__nav {
    position: -webkit-sticky;
    position: sticky;
    top: 25svb;
    justify-self: center;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }

  .l-cover__product,
  .l-cover__nav {
    -webkit-transition:
      opacity 0.6s ease,
      -webkit-transform 0.6s ease;
    transition:
      opacity 0.6s ease,
      -webkit-transform 0.6s ease;
    transition:
      transform 0.6s ease,
      opacity 0.6s ease;
    transition:
      transform 0.6s ease,
      opacity 0.6s ease,
      -webkit-transform 0.6s ease;
    will-change: transform, opacity;
  }

  .l-cover__nav.is-hide-slide {
    -webkit-transform: translateX(120%);
    transform: translateX(120%);
    opacity: 0;
    pointer-events: none;
  }

  .l-cover__product.is-hide-slide {
    -webkit-transform: translateX(-120%);
    transform: translateX(-120%);
    opacity: 0;
    pointer-events: none;
  }

  .l-cover__button {
    margin-top: 40px;
  }

  .l-cover__bg {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 1;
    mix-blend-mode: multiply;
  }
}

/* CTA */
.l-cta {
  background-image: url("../img/cta_bg.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 8.5cqi;
}

.l-cta--secondary {
  background-image: url("../img/cta_bg_02.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-block: 10.6cqi;
}

.l-cta__title {
  padding-top: 11.7cqi;
}

.l-cta__list {
  margin-top: 4cqi;
}

.l-cta__promote {
  margin-top: 2.1cqi;
  margin-inline: auto;
}

/* Voice */
.l-voice {
  position: relative;
  background-image: url("../img/voice_bg.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 14.9cqi;
  padding-bottom: 21cqi;
}

.l-voice__line {
  position: absolute;
}

.l-voice__thanks {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 5;
}

.l-voice__line--top,
.l-voice__line--bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 6.6cqi;
  mix-blend-mode: multiply;
  z-index: 3;
}

.l-voice__line--top {
  top: 0;
}

.l-voice__line--bottom {
  bottom: 0;
}

/* Point */
.l-point {
  background-image: url("../img/point_bg.png");
  background-position: top center;
  background-repeat: repeat-y;
  background-size: 100% auto;
}

.l-point__title {
  padding-top: 17cqi;
  margin-inline: auto;
}

.l-point__list {
  margin-top: 5.3cqi;
}

/* Message */
.l-message {
  background-image: url("../img/massage_bg.png");
  background-position: top center;
  background-repeat: repeat-y;
  background-size: cover;
  padding-top: 6.4cqi;
  padding-bottom: 10.6cqi;
}

.l-message__expert {
  margin-top: 8.5cqi;
}

.l-message__heading {
  margin-inline: auto;
}

.l-message__slider {
  margin-top: 6.4cqi;
}

/* Q&A */
.l-qa {
  background-image: url("../img/qa_bg.png");
  background-position: top center;
  background-repeat: repeat-y;
  background-size: 100% auto;
  padding-top: 8.5cqi;
  padding-inline: 5.3cqi;
  padding-bottom: 21.3cqi;
}

.l-qa__heading {
  margin-inline: auto;
}

.l-qa__list {
  margin-top: 4cqi;
}

/* footer */
.l-footer {
  position: relative;
  background-color: #fff;
  background-image: url("../img/qa_bg.png");
  background-position: top center;
  background-repeat: repeat-y;
  background-size: 100% auto;
  z-index: 10;
}

.l-footer__inner {
  container-type: inline-size;
  container-name: --footer;
  max-width: 400px;
  margin-inline: auto;
}

.l-footer__logo {
  padding-top: 21.3cqi;
  margin-inline: auto;
}

.l-footer__insta {
  margin-top: 4.2cqi;
  margin-inline: auto;
}

.l-footer__copy {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 10.6cqi;
  margin-inline: auto;
  padding-bottom: 10.6cqi;
}

@media (width >= 768px) {
  .l-footer {
    background: transparent;
  }
}

/* ===============================================
# MARK:Component
=============================================== */
/* PC */
.product-image {
  width: 100%;
  max-width: 410px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.product-image__item--pin {
  position: absolute;
  top: 18.2%;
  left: 39%;
  width: 30.5%;
  aspect-ratio: 1 / 1;
  -webkit-animation: yura-mix 3s var(--ease) infinite;
  animation: yura-mix 3s var(--ease) infinite;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.product-image__item--churu {
  position: absolute;
  bottom: 16.8%;
  right: 14.3%;
  width: 29.5%;
  aspect-ratio: 1 / 1;
  -webkit-animation: yura-mix 3.2s var(--ease) infinite;
  animation: yura-mix 3.2s var(--ease) infinite;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.product-image__item--mou {
  position: absolute;
  bottom: 12.9%;
  left: 4.6%;
  width: 29.5%;
  aspect-ratio: 1 / 1;
  -webkit-animation: yura-mix 3.4s var(--ease) infinite;
  animation: yura-mix 3.4s var(--ease) infinite;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes yura-mix {
  0% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
  }
  25% {
    -webkit-transform: translateY(-6px) rotate(-2deg);
    transform: translateY(-6px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
  }
  75% {
    -webkit-transform: translateY(-6px) rotate(2deg);
    transform: translateY(-6px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes yura-mix {
  0% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
  }
  25% {
    -webkit-transform: translateY(-6px) rotate(-2deg);
    transform: translateY(-6px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
  }
  75% {
    -webkit-transform: translateY(-6px) rotate(2deg);
    transform: translateY(-6px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
  }
}

.nav__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 24px;
}

.nav__item {
  -webkit-transition: opacity var(--ease);
  -webkit-transition: opacity var(--duration) var(--ease);
  transition: opacity var(--duration) var(--ease);
}

@media (any-hover: hover) {
  .nav__item:hover {
    opacity: 0.7;
  }
}

.nav__image {
  width: auto;
  height: 21px;
  -o-object-fit: contain;
  object-fit: contain;
}

.button--primary,
.button--secondary {
  width: 100%;
  max-width: 275px;
  opacity: 1;
  -webkit-transition: opacity var(--duration) var(--ease);
  transition: opacity var(--duration) var(--ease);
}

@media (any-hover: hover) {
  .button--primary:hover,
  .button--secondary:hover {
    opacity: 0.7;
  }
}

.button__image {
  max-width: inherit;
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

.bg__text {
  margin: 0 auto;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  height: 51px;
  display: block;
  background-image: url(../img/pc_bg_text.png);
  background-repeat: repeat-x;
  background-position: 0px 0px;
  background-size: auto 51px;
  -webkit-animation-name: bgloop;
  animation-name: bgloop;
  -webkit-animation-duration: 60s;
  animation-duration: 60s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.bg__text.is-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes bgloop {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 2000px 0;
  }
}
@keyframes bgloop {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 2000px 0;
  }
}

/* FV */
.fv__image {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

/* feature */
.feature-slider {
  background-image: url("../img/feature_bg.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  padding-top: 17cqi;
  padding-bottom: 11cqi;
  margin-top: -1px;
}

.feature-slider__item {
  position: relative;
  width: 60cqi;
  scale: 0.64;
  -webkit-box-shadow: 1px 4px 10px 0px #ceabb100;
  box-shadow: 1px 4px 10px 0px #ceabb100;
  -webkit-transition: scale var(--duration) var(--ease);
  -webkit-transition:
    scale var(--duration) var(--ease),
    -webkit-box-shadow var(--duration) var(--ease);
  transition:
    scale var(--duration) var(--ease),
    -webkit-box-shadow var(--duration) var(--ease);
  transition:
    scale var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
  transition:
    scale var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    -webkit-box-shadow var(--duration) var(--ease);
}

.feature-slider__text {
  position: absolute;
  width: 48.2cqi;
  height: auto;
  margin-inline: auto;
  bottom: 3.2cqi;
  left: 50%;
  -webkit-box-shadow: 0px 0px 20px 0px #efd1c666;
  box-shadow: 0px 0px 20px 0px #efd1c666;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  opacity: 0;
  -webkit-transition: opacity var(--duration) var(--ease);
  transition: opacity var(--duration) var(--ease);
}

.feature-slider__item.swiper-slide-active {
  scale: 1;
  border-radius: 2.1cqi;
  -webkit-box-shadow: 1px 4px 10px 0px #ceabb140;
  box-shadow: 1px 4px 10px 0px #ceabb140;

  .feature-slider__text {
    opacity: 1;
  }
}

/* CTA */
.cta__title {
  width: 53cqi;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
  margin-inline: auto;
}

.cta__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 3.2cqi;
  padding-inline: 8cqi;
}

.cta__item {
  background-color: #fffc;
  border-radius: 3.2cqi;
  padding-top: 3.2cqi;
  padding-inline: 5.3cqi;
  padding-bottom: 4.7cqi;
}

.cta__price {
  width: 45.6cqi;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
  margin-inline: auto;
}

.cta__desc {
  margin-top: 1.3cqi;
  margin-inline: auto;
  margin-bottom: 2.6cqi;
}

.cta__notes {
  margin-top: 3.2cqi;
}

.cta__promote {
  width: 78.6cqi;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

/* Voice */
.voice-slider {
  padding-left: 5.3cqi;
  padding-right: 5.3cqi;
}

.voice-slider__item {
  position: relative;
  width: 54.6cqi;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

.voice-slider__new {
  position: absolute;
  inset: 0;
  top: 8.2cqi;
  width: 7.4cqi;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
  margin-inline: auto;
}

.voice__thanks {
  width: auto;
  height: 32cqi;
  -o-object-fit: contain;
  object-fit: contain;
}

.voice__line {
  margin: 0 auto;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  height: 6.6cqi;
  display: block;
  background-image: url(../img/voice_line.png);
  background-repeat: repeat-x;
  background-position: 0px 0px;
  background-size: auto 6.6cqi;
  -webkit-animation-name: bgloop;
  animation-name: bgloop;
  -webkit-animation-duration: 60s;
  animation-duration: 60s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

/* Point */
.point__heading {
  width: 78.6cqi;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

.point__list {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 2.6cqi;
  padding-inline: 8cqi;
  z-index: 5;
}

.point__item {
  background: #fffc;
  -webkit-box-shadow: 3px 3px 10px 0 #eae4e566;
  box-shadow: 3px 3px 10px 0 #eae4e566;
  border-radius: 3.2cqi;
  padding-block: 4.9cqi;
  padding-left: 3.4cqi;
  padding-right: 2.6cqi;
  will-change: visibility, opacity;
}

.point__item--icon {
  background: #fffc;
  -webkit-box-shadow: 3px 3px 10px 0 #eae4e566;
  box-shadow: 3px 3px 10px 0 #eae4e566;
  border-radius: 3.2cqi;
  padding-block: 1cqi;
  padding-left: 3.4cqi;
  padding-right: 2.6cqi;
  will-change: visibility, opacity;
}

.point__summary {
  position: relative;
}

.point__title {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  visibility: visible;
  -webkit-transition-duration: var(--duration);
  transition-duration: var(--duration);
  -webkit-transition-property: visibility, opacity;
  transition-property: visibility, opacity;
  transition-behavior: allow-discrete;
  will-change: visibility, opacity;
  cursor: pointer;
}

.point__title--open {
  display: block;
  position: absolute; /* 追加 */
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  visibility: hidden;
  -webkit-transition-duration: var(--duration);
  transition-duration: var(--duration);
  -webkit-transition-property: visibility, opacity;
  transition-property: visibility, opacity;
  transition-behavior: allow-discrete;
  will-change: visibility, opacity;
  cursor: pointer;

  @starting-style {
    opacity: 0;
  }
}

.point__details {
  &::details-content {
    overflow: clip;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    -webkit-transition-property: content-visibility, block-size;
    transition-property: content-visibility, block-size;
    transition-behavior: allow-discrete;
    will-change: block-size;
  }

  &:not([open])::details-content {
    block-size: 0;
  }
}

.point__details[open] {
  .point__title {
    opacity: 0;
    visibility: hidden;

    @starting-style {
      opacity: 1;
    }
  }

  .point__title--open {
    opacity: 1;
    visibility: visible;

    @starting-style {
      opacity: 0;
    }
  }
}

.point__desc {
  margin-top: 5.3cqi;
}

.point__item--icon .point__desc {
  margin-top: 0.8cqi;
}

/* Expert */
.expert__title {
  width: 93.8cqi;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

.expert__slider {
  padding-left: 5.3cqi;
  padding-right: 5.3cqi;
}

.expert__item {
  width: 76cqi;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

/* Q&A */
.qa__heading {
  width: 17.8cqi;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

.qa__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 3.2cqi;
}

.footer__logo {
  width: 37.8cqi;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

.footer__insta {
  width: 11.7cqi;
  aspect-ratio: 1 / 1;
}

.footer__copy {
  width: 42.6cqi;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}