:root {
  --text-black: #5e534d;
  --text-pink: #e58e82;
  --text-red: #ed4545;
  --accent-flat: #f3bab3;

  --bg-01: #fffcf6;
  --bg-02: #f6f3ed;
  --bg-03: #ead4cc;

  --white: #ffffff;
  --gray-01: #9d9d9d;
  --gray-02: #dfdddb;

  --footer-text: #8c594d;

  --container-wide: min(100% - 4vw, 1200px);
  --container-narrow: min(100% - 40px, 960px);

  /* Scroll reveal（パララックス風）— トランジション速度・イージング */
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-duration: 3s;
  --reveal-duration-mid: 1s;
  --reveal-duration-fast: 0.55s;
  --reveal-delay-xs: 0.04s;
  --reveal-delay-about-item-1: 0.12s;
  --reveal-delay-about-item-step: 0.5s;
  --reveal-delay-service-card: 0.14s;
  --reveal-delay-service-img: 0.26s;
  --reveal-page-illustration-span-delay: 1s;
  --reveal-page-illustration-span-stagger: 0.16s;
  --reveal-delay-flow-step-1: 0.08s;
  --reveal-delay-flow-step-step: 0.8s;
  --reveal-delay-body: 0.12s;
  --reveal-delay-cat: 0.2s;
  --reveal-petal-delay: 0.5s;
  --about-petal-reveal-delay: 0.3s;
  --hero-enter-delay: 0.5s;
  --hero-enter-duration: 0.85s;
  --hero-petal-extra-delay: 0.5s;
}

*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* 768px以下でサイドメニュー表示中、本体スクロール停止（JSで body を fixed にする補助） */
html.side-nav-scroll-lock {
  overflow: hidden;
}

body {
  margin: 0;
  font-family: "Figtree", "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  font-size: 1em; /* 16px */
  line-height: 1.8;
  color: var(--text-black);
  background: var(--bg-02);
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
a { color: var(--text-red); }

/* === Fixed background === */
.wrapper::after {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100vw;
  height: 100vh;
  background-image: url(../images/mainbg_pc.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  content: "";
}
@media (max-width: 768px) {
  .wrapper::after {
    background-image: url(../images/mainbg_sp.jpg);
  }
}
/* === Hero === */
.hero {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 762px);
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  max-width: 1600px;
  max-height: 1080px;
  min-height: 700px;
  width: 100vw;
  height: 100vh;
  margin: 0 auto clamp(3.5rem, 14vw, 15rem);
  padding: 0 40px;
  .hero__title {
    white-space: nowrap;
    h1 {
      margin: 0 0 6vw;
      padding: 0;
      line-height: 1;
      width: 55%;
      max-width: 420px;
      height: auto;
    }
    .hero__lead {
      margin: 0 0 4vw;
      line-height: 1.3;
      font-weight: 700;
      font-size: clamp(1.125rem, 0.875rem + 1.25vw, 2.125rem);
      letter-spacing: 2.3px;
      br { display: none; }
    }
    .hero__headline {
      display: grid;
      grid-template-areas: "text01 text01" "text02 text03" "text04 text04";
      grid-template-columns: auto;
      grid-template-rows: auto;
      justify-content: start;
      gap: 0.4em 0.1em;
      margin: 0;
      padding: 0;
      font-weight: 700;
      font-size: clamp(1.875rem, 1.6875rem + 0.9375vw, 2.625rem);
      line-height: 1;
      letter-spacing: 2.1px;
      .hero__headline01 {
        grid-area: text01;
      }
      .hero__headline02 {
        grid-area: text02;
        align-self: center;
      }
      .hero__headline03 {
        grid-area: text03;
        align-self: self-end;
      }
      .hero__headline04 {
        grid-area: text04;
      }
    }
  }
  .hero__img {
    padding-top: 5%;
    align-self: start;
    justify-self: end;
    padding-top: 5%;
    position: relative;
    width: 90%;
    height: auto;
    aspect-ratio: 1 / 1;
    background-image: url(../images/kvimg_bg.png);
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
    .hero__img-inner {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      transform-origin: center center;
      .hero__kv-svg {
        display: block;
        width: 100%;
        height: 100%;
      }
      .hero__kv-svg .hero__kv-slide {
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--hero-kv-fade-duration, 2.5s) ease;
      }
      .hero__kv-svg .hero__kv-slide.is-active {
        opacity: 1;
      }
    }
    .hero__img-petal {
      position: absolute;
      margin: 0;
      padding: 0;
      bottom: -15%;
      right: 10%;
      z-index: 2;
      width: 50%;
      height: auto;
    }
  }
}
@media (max-width: 1400px) {
  .hero {
    padding: 0 20px;
    .hero__title .hero__headline {
      grid-template-areas: "text01 text01" "text02 text02" "text03 text04";
      grid-template-columns: auto 1fr;
      gap: 0.4em 0;
    }
  }
}
@media (max-width: 1200px) {
  .hero {
    gap: 20px;
    .hero__img { width: 100%; }
  }
}
@media (max-width: 980px) {
  .hero {
    .hero__title .hero__lead br { display: block; }
  }
}
@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    justify-content: start;
    align-items: start;
    max-height: unset;
    min-height: 100vh;
    height: unset;
    .hero__title {
      order: 2;
      padding-top: 30px;
      h1 { margin-bottom: 30px; }
      .hero__lead { margin-bottom: 20px; }
      .hero__headline {
        grid-template-columns: auto 1fr;
        grid-template-areas: "text01 text01" "text02 text02" "text03 text04";
        gap: 0.4em 0;
      }
    }
    .hero__img {
      order: 1;
      width: 85%;
      padding-top: 40px;
      background-position: right 40px;
      .hero__img-petal {
        bottom: -22%;
      }
    }
  }
}
@media (max-width: 340px) {
  .hero .hero__title .hero__headline {
    font-size: 1.6rem;
  }

}

/* === Sections: 共通見出し === */
.section-head {
  display: flex;
  flex-direction: column-reverse;
  gap: 1rem;
  color: var(--text-pink);
  line-height: 1.3;
  margin-bottom: 4vw;
  &.is-center { align-items: center; }
  .section-head__ja {
    margin: 0;
    padding: 0;
    font-size: clamp(1.5rem, 1.2813rem + 1.0938vw, 2.375rem);
    font-weight: 700;
  }
  .section-head__en {
    margin: 0;
    padding: 0;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.045em;
    &.is-upper { text-transform: uppercase; }
  }
}
main { padding-top: 5vw; }
@media (max-width: 768px) {
  main { padding-top: 10vw; }
}

/* === Scroll reveal（Intersection Observer + is-reveal-inview） === */
/* Hero 初回：透明度のみ（移動なし） */
@keyframes hero-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .about__inner:not(.is-reveal-inview) .about__head,
  .about__inner:not(.is-reveal-inview) .about-item {
    opacity: 0;
    transform: translateY(40px);
  }
  .about__inner.is-reveal-inview .about__head,
  .about__inner.is-reveal-inview .about-item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) var(--reveal-ease);
  }
  .about__inner.is-reveal-inview .about__head { transition-delay: var(--reveal-delay-xs); }
  .about__inner.is-reveal-inview .about__body .about-item:nth-child(1) { transition-delay: var(--reveal-delay-about-item-1); }
  .about__inner.is-reveal-inview .about__body .about-item:nth-child(2) {
    transition-delay: calc(var(--reveal-delay-about-item-1) + var(--reveal-delay-about-item-step));
  }
  .about__inner.is-reveal-inview .about__body .about-item:nth-child(3) {
    transition-delay: calc(var(--reveal-delay-about-item-1) + 2 * var(--reveal-delay-about-item-step));
  }
  .about__inner.is-reveal-inview .about__body .about-item:nth-child(4) {
    transition-delay: calc(var(--reveal-delay-about-item-1) + 3 * var(--reveal-delay-about-item-step));
  }
  .about__inner.is-reveal-inview .about__body .about-item:nth-child(5) {
    transition-delay: calc(var(--reveal-delay-about-item-1) + 4 * var(--reveal-delay-about-item-step));
  }

  .about__cat:not(.is-reveal-inview) {
    opacity: 0;
    transform: translateY(40px);
  }
  .about__cat.is-reveal-inview {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) var(--reveal-ease);
  }

  .page-illustration__img:not(.is-reveal-inview) {
    opacity: 0;
    transform: translateY(40px);
  }
  .page-illustration__img.is-reveal-inview {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--reveal-duration-mid) ease, transform var(--reveal-duration-mid) var(--reveal-ease);
  }
  .page-illustration__img span {
    display: inline-block;
    opacity: 0;
    transform: translateY(36px);
    transition: opacity var(--reveal-duration-fast) ease, transform var(--reveal-duration-fast) var(--reveal-ease);
  }
  .page-illustration__img.is-reveal-inview span:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--reveal-page-illustration-span-delay);
  }
  .page-illustration__img.is-reveal-inview span:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--reveal-page-illustration-span-delay) + var(--reveal-page-illustration-span-stagger));
  }

  .service__inner:not(.is-reveal-inview) .service__head,
  .service__inner:not(.is-reveal-inview) .service__card,
  .service__inner:not(.is-reveal-inview) .service__img {
    opacity: 0;
    transform: translateY(40px);
  }
  .service__inner.is-reveal-inview .service__head,
  .service__inner.is-reveal-inview .service__card,
  .service__inner.is-reveal-inview .service__img {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) var(--reveal-ease);
  }
  .service__inner.is-reveal-inview .service__head { transition-delay: var(--reveal-delay-xs); }
  .service__inner.is-reveal-inview .service__card { transition-delay: var(--reveal-delay-service-card); }
  .service__inner.is-reveal-inview .service__img { transition-delay: var(--reveal-delay-service-img); }

  .section--flow .flow__inner:not(.is-reveal-inview) .flow__head-inner {
    opacity: 0;
    transform: translateY(28px);
  }
  .section--flow .flow__inner.is-reveal-inview .flow__head-inner {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--reveal-duration-fast) ease, transform var(--reveal-duration-fast) var(--reveal-ease);
  }
  .section--flow .flow__inner:not(.is-reveal-inview) .flow-step {
    opacity: 0;
    transform: translateY(28px);
  }
  .section--flow .flow__inner.is-reveal-inview .flow-step {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--reveal-duration-fast) ease, transform var(--reveal-duration-fast) var(--reveal-ease);
  }
  .section--flow .flow__inner.is-reveal-inview .flow-step:nth-child(1) { transition-delay: var(--reveal-delay-flow-step-1); }
  .section--flow .flow__inner.is-reveal-inview .flow-step:nth-child(2) {
    transition-delay: calc(var(--reveal-delay-flow-step-1) + var(--reveal-delay-flow-step-step));
  }
  .section--flow .flow__inner.is-reveal-inview .flow-step:nth-child(3) {
    transition-delay: calc(var(--reveal-delay-flow-step-1) + 2 * var(--reveal-delay-flow-step-step));
  }
  .section--flow .flow__inner.is-reveal-inview .flow-step:nth-child(4) {
    transition-delay: calc(var(--reveal-delay-flow-step-1) + 3 * var(--reveal-delay-flow-step-step));
  }
  .section--flow .flow__inner.is-reveal-inview .flow-step:nth-child(5) {
    transition-delay: calc(var(--reveal-delay-flow-step-1) + 4 * var(--reveal-delay-flow-step-step));
  }

  .office__inner:not(.is-reveal-inview) .office__head,
  .office__inner:not(.is-reveal-inview) .office__body {
    opacity: 0;
    transform: translateY(36px);
  }
  .office__inner.is-reveal-inview .office__head,
  .office__inner.is-reveal-inview .office__body {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) var(--reveal-ease);
  }
  .office__inner.is-reveal-inview .office__body { transition-delay: var(--reveal-delay-body); }

  .profile__inner:not(.is-reveal-inview) .profile__head,
  .profile__inner:not(.is-reveal-inview) .profile__body {
    opacity: 0;
    transform: translateY(36px);
  }
  .profile__inner.is-reveal-inview .profile__head,
  .profile__inner.is-reveal-inview .profile__body {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) var(--reveal-ease);
  }
  .profile__inner:not(.is-reveal-inview) .profile__cat {
    opacity: 0;
    transform: translateY(36px);
  }
  .profile__inner.is-reveal-inview .profile__cat {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--reveal-duration) ease var(--reveal-delay-cat),
      transform var(--reveal-duration) var(--reveal-ease) var(--reveal-delay-cat);
  }

  .faq__inner:not(.is-reveal-inview) .faq__head,
  .faq__inner:not(.is-reveal-inview) .faq__body {
    opacity: 0;
    transform: translateY(36px);
  }
  .faq__inner.is-reveal-inview .faq__head,
  .faq__inner.is-reveal-inview .faq__body {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) var(--reveal-ease);
  }
  .faq__inner.is-reveal-inview .faq__body { transition-delay: var(--reveal-delay-body); }

  .contact__inner:not(.is-reveal-inview) .contact__head,
  .contact__inner:not(.is-reveal-inview) .contact__body {
    opacity: 0;
    transform: translateY(36px);
  }
  .contact__inner.is-reveal-inview .contact__head,
  .contact__inner.is-reveal-inview .contact__body {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) var(--reveal-ease);
  }
  .contact__inner:not(.is-reveal-inview) .contact__cat {
    opacity: 0;
    transform: translateY(36px);
  }
  .contact__inner.is-reveal-inview .contact__cat {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--reveal-duration) ease var(--reveal-delay-cat),
      transform var(--reveal-duration) var(--reveal-ease) var(--reveal-delay-cat);
  }

  .hero > .hero__title,
  .hero > .hero__img .hero__img-inner {
    opacity: 0;
    animation: hero-fade-in var(--hero-enter-duration) ease forwards;
    animation-delay: var(--hero-enter-delay);
  }

  .hero .hero__img-petal {
    opacity: 0;
    animation: hero-fade-in var(--hero-enter-duration) ease forwards;
    animation-delay: calc(var(--hero-enter-delay) + var(--hero-petal-extra-delay));
  }

  .section--about .about__inner:not(.is-reveal-inview) ~ .about__petal {
    opacity: 0;
    transform: translateY(60px);
  }
  .section--about .about__inner.is-reveal-inview ~ .about__petal {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--reveal-duration-fast) ease var(--about-petal-reveal-delay),
      transform var(--reveal-duration-fast) var(--reveal-ease) var(--about-petal-reveal-delay);
  }

  .section--flow .flow__inner:not(.is-reveal-inview) .flow__petal {
    opacity: 0;
    transform: translateY(42px);
  }
  .section--flow .flow__inner.is-reveal-inview .flow__petal {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--reveal-duration-fast) ease var(--reveal-petal-delay),
      transform var(--reveal-duration-fast) var(--reveal-ease) var(--reveal-petal-delay);
  }

  .office__inner:not(.is-reveal-inview) .office__petal {
    opacity: 0;
    transform: translateY(54px);
  }
  .office__inner.is-reveal-inview .office__petal {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--reveal-duration-fast) ease var(--reveal-petal-delay),
      transform var(--reveal-duration-fast) var(--reveal-ease) var(--reveal-petal-delay);
  }

  .section--profile .profile__inner:not(.is-reveal-inview) ~ .profile__petal {
    opacity: 0;
    transform: translateY(54px);
  }
  .section--profile .profile__inner.is-reveal-inview ~ .profile__petal {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--reveal-duration-fast) ease var(--reveal-petal-delay),
      transform var(--reveal-duration-fast) var(--reveal-ease) var(--reveal-petal-delay);
  }
}
@media (prefers-reduced-motion: reduce) {
  .about__inner .about__head,
  .about__inner .about-item,
  .about__cat,
  .page-illustration__img,
  .page-illustration__img span,
  .service__inner .service__head,
  .service__inner .service__card,
  .service__inner .service__img,
  .flow__head-inner,
  .flow-step,
  .office__inner .office__head,
  .office__inner .office__body,
  .profile__inner .profile__head,
  .profile__inner .profile__body,
  .profile__inner .profile__cat,
  .faq__inner .faq__head,
  .faq__inner .faq__body,
  .contact__inner .contact__head,
  .contact__inner .contact__body,
  .contact__inner .contact__cat {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero > .hero__title,
  .hero > .hero__img .hero__img-inner,
  .hero .hero__img-petal,
  .about__petal,
  .flow__petal,
  .office__petal,
  .profile__petal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* === About === */
.section--about {
  position: relative;
  container-type: inline-size;
  max-width: calc(var(--container-wide) + 160px);
  padding: 0;
  z-index: 2;
  .about__inner {
    width: 100%;
    position: relative;
    background: var(--bg-01);
    border-radius: 0 0 40px 0;
    margin-top: -1px;
    padding:  3vw 160px 8vw 3vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    &::before {
      position: absolute;
      left: 0;
      bottom: 100%;
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1360 / 285;
      background: var(--bg-01);
      clip-path: polygon(0 1%, 0% 100%, 100% 100%);
      content: '';
      z-index: 1;
    }
    .about__inner-inner {
      max-width: var(--container-wide);
      width: auto;
      display: inline-flex;
      flex-direction: column;
    }
  }
  .about__body {
    .about-item {
      &:not(:last-child) {
        margin-bottom: 3.125rem;
      }
      .about-item__title {
        display: flex;
        margin: 0 0 0.75rem;
        font-size: clamp(1.25rem, 1.1875rem + 0.3125vw, 1.5rem);
        font-weight: 500;
        color: var(--text-pink);
        letter-spacing: 0.02em;
        gap: 0 0.625rem;
        line-height: 1.3;
        align-items: stretch;
        &::before {
          display: block;
          width: 8px;
          height: auto;
          background: url(../images/head_circle.svg) no-repeat center calc((clamp(1.125rem, 2vw, 1.5rem)) / 2) / contain;
          content: '';
        }
      }
      .about-item__body {
        margin: 0;
        padding: 0 0 0 1.25rem;
        font-weight: 500;
      }
    }
  }
  .about__petal {
    position: absolute;
    left: 5px;
    top: calc(-1px - 100cqw * (285 / 1360) - (100cqw + 3vw) * 10 * 138 / (100 * 2 * 144));
    width: 10%;
    height: auto;
    z-index: 2;
  }
  .about__cat {
    position: absolute;
    right: -20px;
    bottom: -8%;
    width: 15%;
    max-width: 197px;
    height: auto;
    z-index: 2;
  }
}
@media (max-width: 1440px) {
  .section--about {
    padding-right: 40px;
    .about__cat {
      width: 13%;
      right: 10px;
    }
  }
}
@media (max-width: 900px) {
  .section--about {
    padding-right: 40px;
    .about__cat {
      width: 13%;
      bottom: -6%;
      right: 10px;
    }
  }
}
@media (max-width: 768px) {
  .section--about {
    max-width: 100%;
    .about__inner {
      padding: 8vw 6vw 12vw;
      border-radius: 0 0 20px 0;
      .section-head__ja br { display: none; }
    }
    .about__body {
      .about-item {
        &:not(:last-child) {
          margin-bottom: 1.25rem;
        }
      }
    }
    .about__petal {
      width: 20%;
    }
    .about__cat {
      top: calc(100% - 10vw);
      bottom: unset;
      width: 25%;
      right: 20px;
    }
  }
}

.page-illustration__img {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1em;
  padding: 10vw 20px ;
  line-height: 0;
  img {
    width: auto;
    height: auto;
    object-fit: contain;
  }
}
@media (max-width: 768px) {
  .page-illustration__img {
    padding: 30vw 20px 15vw;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    .page-illustration__img-item01 { width: 53%; }
  }
}

/* === Service === */
.section--service {
  position: relative;
  .service__head {
    text-align: center;
    .section-head__ja .is-sp { display: none; }
  }
  .service__body {
    display: grid;
    grid-template-columns: 1fr 400px;
    grid-template-areas: "img card";
    gap: 4vw;
    margin: 0 auto;
    padding: 10px 0 0;
    max-width: var(--container-wide);
    .service__card {
      grid-area: card;
      .service-cards {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 40px;
      }
      .service-card {
        background: var(--bg-02);
        border-radius: 200px 200px 10px 10px;
        padding: 50px 40px 40px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        text-align: left;
      }
      .service-card__icon {
        margin: 0 0 20px;
        padding: 0;
        width: 118px;
        height: 118px;
        border-radius: 59px;
        background: var(--white);
        display: grid;
        place-items: center;
        align-self: center;
      }
      .service-card__icon img {
        max-height: 118px;
        width: auto;
      }
      .service-card__title {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        color: var(--text-pink);
      }
      .service-card__text {
        margin: 0;
        font-size: 0.9375rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        line-height: 1.8;
      }
    }
    .service__img {
      grid-area: img;
      position: relative;
      aspect-ratio: 380 / 320;
      width: calc(100vw - 400px - 4vw - 80px);
      max-width: 640px;
      height: auto;
      &.is-scroll {
        position: absolute;
        bottom: 0;
      }
      .service__img-list01,
      .service__img-list02 {
        position: absolute;
        margin: 0;
        padding: 0;
        list-style: none;
        width: 80%;
        max-width: 550px;
        aspect-ratio: 550 / 366;
        &::before {
          display: block;
          position: absolute;
          inset: 0;
          top: 2%;
          left: 2%;
          width: 96%;
          height: 96%;
          background: var(--white);
          z-index: -1;
          content: '';
        }
      }
      .service__img-list01 {
        top: 0;
        left: 0;
        rotate: -2deg;
      }
      .service__img-list02 {
        top: 40%;
        left: 20%;
        rotate: 4deg;
      }
      .service__img-item {
        position: absolute;
        inset: 0;
        margin: 0;
        isolation: isolate;
      }
      .service__img-item img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        object-fit: cover;
        opacity: 0;
        transition: opacity 2.5s ease;
        pointer-events: none;
      }
      .service__img-item img.is-active {
        opacity: 1;
        z-index: 1;
      }
    }
  }
}
@media (min-width: 769px) {
  .section--service .service__body .service__img.is-fixed {
    position: fixed;
    top: 40px;
  }
}
@media (max-width: 768px) {
  .section--service {
    .section-head {
      .section-head__ja {
        .is-sp { display: block; }
      }
    }
    .service__body {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      grid-template-areas: "img" "card";
      gap: 20px 0;
      .service__card {
        padding: 4vw 20px 0;
        .service-cards {
          max-width: 600px;
          margin-inline: auto;
          .service-card {
            border-radius: 600px 600px 10px 10px;
          }
        }
      }
      .service__img {
        width: 100%;
      }
    }
  }
}
/* === Flow === */
.section--flow {
  padding: 18vw 20px;
  .flow__head-inner {
    text-align: center;
    .flow__head {
      position: relative;
      display: inline-flex;
      .flow__petal {
        position: absolute;
        bottom: 0;
        left: -140px;
        width: 140px;
        height: auto;
        z-index: 2;
      }
    }
  }
  .flow-list {
    margin: 0;
    padding: 0;
    max-width: 800px;
    margin-inline: auto;
    list-style: none;
  }
  .flow-step {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1.5rem;
    align-items: start;
    text-transform: uppercase;
    &:not(:last-child) {
      position: relative;
      margin-bottom: 2em;
      &::before{
        position: absolute;
        top: calc(100% - 0.25rem);
        left: 0;
        display: block;
        content: '';
        width: 120px;
        height: calc(100% - 120px - 0.5rem);
        background-image: url(../images/head_circle.svg);
        background-position: 50% 0;
        background-size: 5px 12px;
        background-repeat: repeat-y;
        filter: brightness(0) saturate(100%) invert(78%) sepia(33%) saturate(417%) hue-rotate(316deg) brightness(100%) contrast(91%);
        z-index: 1;
      }
    }
  }
  .flow-step__meta {
    position: relative;
    z-index: 2;
    text-align: center;
    .flow-step__label {
      display: block;
      font-size: 1.125rem;
      font-weight: 300;
      letter-spacing: 0.04em;
      margin-bottom: 0.25rem;
    }  
    .flow-step__circle {
      width: 120px;
      height: 120px;
      margin-inline: auto;
      border-radius: 59px;
      background: var(--accent-flat);
      display: grid;
      place-items: center;
      img {
        width: 48px;
        height: 48px;
        object-fit: contain;
      }
    }
  }
  .flow-step__body {
    background: var(--white);
    border-radius: 10px;
    padding: 30px 20px 30px 40px;
    .flow-step__title {
      margin: 0 0 0.75rem;
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--text-pink);
    }
    p {
      margin: 0;
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.8;
      letter-spacing: 0.02em;
    }
  }
}
@media (max-width: 768px) {
  .section--flow {
    .flow__head-inner {
      .flow__head {
        .flow__petal {
          top: -50px;
          bottom: unset;
          width: 80px;
        }
      }
    }
    .flow-step {
      grid-template-columns: 80px 1fr;
      &:not(:last-child)::before {
        width: 80px;
        top: calc(1.125rem + 80px + 1.55rem);
        height: calc(100% - 80px - 1rem);
        background-image: url(../images/head_circle.svg);
        background-position: 50% 0;
        background-size: 5px 12px;
        background-repeat: repeat-y;
      }
    }
    .flow-step__meta {
      .flow-step__circle {
        width: 80px;
        height: 80px;
        img {
          width: 32px;
          height: 32px;
        }
      }
    }
    .flow-step__body { padding: 20px; }
  }
}

/* === Office === */
.section--office {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: 10px 20px 18vw;
  .office__head {
    position: relative;
    padding: 0 0 30px;
    border-bottom: 1px solid var(--text-pink);
    .office__petal {
      position: absolute;
      right: -10px;
      bottom: -45px;
      width: 136px;
      height: auto;
      z-index: 2;
    } 
  }
  .office__body {
    .office__table {
      margin-left: auto;
      margin-right: 0;
      width: 100%;
      max-width: 800px;
      th,
      td {
        padding: 1.5em 0;
        border-bottom: 1px solid #F2D5CD;
        vertical-align: top;
        text-align: left;
        font-weight: 500;
        line-height: 1.8;
        letter-spacing: 0.02em;
        &.is-sp { display: none; }
      }
      th {
        white-space: nowrap;
        padding-right: 1.5em;
        color: var(--text-pink);
      }
    }
    .office__map {
      margin-top: 1em;
      width: 100%;
      height: auto;
      aspect-ratio: 640 / 320;
      overflow: hidden;
      iframe {
        width: 100%;
        height: 100%;
        border: none;
        object-fit: cover;
      }
    }
  }
}
@media (max-width: 768px) {
  .section--office {
    .office__head {
      .office__petal {
        bottom: -40px;
        width: 80px;
      } 
    }
    .office__body {
      .office__table {
        tr {
          display: flex;
          flex-direction: column;
          th,td {
            padding: 0.5em 0;
            &.is-sp { display: block; }
          }
          th {
            border-bottom: none;
            padding-bottom: 0;
          }
        }
      }
    }
  }
}

/* === Profile === */
.section--profile {
  position: relative;
  max-width: 1440px;
  margin-left: auto;
  margin-right: 0;
  padding: 10px 0 0 20px;
  .profile__inner {
    background: var(--bg-01);
    border-radius: 10px 0 0 10px;
  }
  .profile__content {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4vw;
    align-items: start;
    max-width: 1200px;
    padding: 120px 60px 120px 120px;
  }
  .profile__head {
    display: grid;
    grid-template-areas: "en" "role" "name";
    color: var(--text-pink);
    white-space: nowrap;
    .profile__name {
      grid-area: name;
      margin: 0;
      padding: 0;
      font-size: clamp(2rem, 4vw, 2.5rem);
      font-weight: 500;
      letter-spacing: 0.04em;
    }
    .profile__en {
      grid-area: en;
      margin: 0 0 1em;
      padding: 0;
    }
    .profile__role {
      grid-area: role;
      margin: 0 0 0.5rem;
      padding: 0;
      font-size: clamp(1rem, 2vw, 1.375rem);
      font-weight: 500;
      letter-spacing: 0.04em;
    }
  }
  .profile__body {
    p {
      margin: 0;
      font-weight: 500;
      line-height: 1.8;
      letter-spacing: 0.02em;
      + p { margin-top: 1em; }
    }
  }
  .profile__cat {
    display: block;
    position: absolute;
    left: calc(100% - 12vw);
    bottom: calc(100% - 30px);
    width: 78px;
    height: auto;
  }
  .profile__petal {
    position: absolute;
    right: calc(100% - 200px);
    bottom: 10px;
    width: 240px;
    height: auto;
    z-index: 2;
  }
}
@media (max-width: 1200px) {
  .section--profile {
    .profile__content {
      padding: 120px 3vw;
    }
  }
}
@media (max-width: 768px) {
  .section--profile {
    .profile__content {
      gap: 32px;
    }
    .profile__head {
      .profile__role {
        margin-bottom: 0;
      }
    }
    .profile__inner {
      .profile__content {
        padding: 10vw 6vw;
        grid-template-columns: 1fr;
        .profile__cat {
          top: -12vw;
          right: 3vw;
          left: unset;
          width: 60px;
        }
      }
    }
    .profile__petal {
      width: 120px;
      height: 105px;
      bottom: -40px;
      right: calc(100% - 110px);
    }
  }
}

/* === FAQ === */
.section--faq {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 18vw 20px;
  .faq__intro {
    max-width: 960px;
    margin: 0 auto 40px;
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .faq-tabs__labels {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.625rem;
    margin-bottom: 20px;
    .simplebar-content {
      display: flex;
      gap: 0.625rem;
      &::before { display: none; }
    }
    .faq-tabs__label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0.5rem 1.25rem;
      border-radius: 100px;
      border: 1px solid var(--text-pink);
      background: var(--white);
      color: var(--text-pink);
      font-family: inherit;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      white-space: nowrap;
      outline: none;
      cursor: pointer;
      &.is-active {
        background: var(--text-pink);
        color: var(--white);
        border-color: var(--text-pink);
      }
    }
  }
  .faq-panels {
    --faq-panel-fade: 0.5s;
    position: relative;
    overflow: hidden;
    .faq-panels__inner {
      min-width: 0;
    }
    .faq-panel {
      box-sizing: border-box;
      width: 100%;
      padding: 3vw 4vw;
      background: var(--white);
      border-radius: 20px;
      min-width: 0;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      opacity: 0;
      pointer-events: none;
      z-index: 0;
      transition: opacity var(--faq-panel-fade) ease;
      @media (prefers-reduced-motion: reduce) {
        transition-duration: 0.01ms;
      }
      &.is-active {
        position: relative;
        opacity: 1;
        pointer-events: auto;
        z-index: 1;
      }
      .faq-item {
        padding: 2.5rem 0;
        border-bottom: 1px solid var(--gray-02);
        &.faq-item--last {
          border-bottom: none;
        }
        .faq-item__q {
          margin: 0 0 0.625rem;
          display: grid;
          grid-template-columns: 60px 1fr;
          gap: 0.75rem;
          color: var(--text-pink);
          .faq-item__n {
            font-size: 1.625rem;
            font-weight: 400;
            line-height: 1;
            letter-spacing: 0.04em;
          }
          .faq-item__title {
            align-self: center;
            font-size: 1.125rem;
            font-weight: 500;
            line-height: 1.3;
            letter-spacing: 0.04em;
          }
        }
        .faq-item__a {
          p {
            margin: 0;
            padding-left: calc(60px + 0.75rem);
            font-weight: 500;
            line-height: 1.8;
          }
          ul {
            margin: 0.5em 0;
            padding-left: calc(60px + 0.75rem + 1em);
            list-style: disc;
            li {
              margin: 0;
              padding: 0;
              font-family: inherit;
              font-weight: 500;
              line-height: 1.8;
              letter-spacing: 0.04em;
            }
          }
        }
      }
    }
  }
}
@media (max-width: 768px) {
  .section--faq {
    padding: 15vw 20px 20vw;
    max-width: unset;
    .faq-tabs {
      .faq-tabs__labels {
        width: calc(100vw - 20px);
        margin-bottom: 20px;
        padding-bottom: 16px;
        overflow-x: auto;
        overflow-y: hidden;
      }
      .simplebar-content {
        display: flex;
        gap: 0.625rem;
      }
      .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
        top: 0;
        border-radius: 50px;
        height: 6px;
      }
      .simplebar-scrollbar::before {
        background-color: var(--text-pink);
        opacity: 1;
        border-radius: 50px;
        height: 6px;
      }
      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
        left: 0;
        right: 0;
      }
      .simplebar-track {
        background-color: #d9d9d9;
        height: 6px;
        border-radius: 50px 0 0 50px;
      }

    }
    .faq-panels {
      box-sizing: border-box;
      margin-inline: auto;
      .faq-panels__inner { padding: 0; }
      .faq-panel {
        .faq-item {
          padding: 20px 0;
          .faq-item__q {
            grid-template-columns: 50px 1fr;
            gap: 15px;
            .faq-item__n { width: 50px; }
          }
          .faq-item__a {
            p {
              padding-left: calc(50px + 12px);
            }
            ul {
              padding-left: calc(50px + 12px + 1em);
            }
          }
        }
      }
    }
  }
}

/* === Contact === */
.section--contact {
  padding: 0 20px;
  .contact__inner {
    position: relative;
    background: var(--bg-03);
    margin-inline: auto;
    border-radius: 40px;
    padding: clamp(3rem, 8vw, 8.75rem) clamp(1.25rem, 4vw, 3rem);
  }
  .contact__head {
    margin-bottom: 60px;
    .section-head__ja,
    .section-head__en {
      text-transform: uppercase;
      color: var(--text-black);
    }
  }
  .contact__cat {
    position: absolute;
    top: -55px;
    left: clamp(1.25rem, 4vw, 3rem);
    width: 160px;
    height: 66px;
    z-index: 2;
  }
}
.contact__body {
  max-width: 800px;
  margin: 0 auto;
  .contact__intro {
    margin: 0 auto 40px;
    padding: 0;
  }
}
.contact-form {
  max-width: 800px;
  margin: 0 auto;
  .field {
    margin-bottom: 50px;
    &:last-child {
      margin-bottom: 0;
    }
    .field__address-block {
      margin-bottom: 24px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .field__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    &.is-required::after {
      display: inline-block;
      width: 12px;
      height: 12px;
      background: url(../images/icon_required.svg) no-repeat center center;
      background-size: contain;
      content: "";
    }
  }
  .field__input,
  .field__textarea {
    width: 100%;
    max-width: 600px;
    min-height: 60px;
    padding: 1rem 1.25rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.8;
    color: var(--text-black);
    background: var(--white);
    &.is-w800 { max-width: 800px; }
    &.is-w200 { max-width: 200px; }
    &:focus {
      outline: 2px solid var(--accent-flat);
      outline-offset: 2px;
    }
    &.is-error {
      outline: 2px solid var(--text-red);
      outline-offset: 2px;
    }
  }
  .field__input::placeholder,
  .field__textarea::placeholder {
    font-weight: 400;
    color: var(--gray-01);
  }
  .field__textarea {
    min-height: 126px;
    resize: vertical;
    field-sizing: content;
    font-weight: 500;
    line-height: 1.8;
    color: var(--text-black);
  }
  .field__radio,
  .field__checkbox {
    appearance: none;
    width: 16px;
    height: 16px;
    outline: 1px solid var(--gray-01);
    background: var(--white);
    padding: 2px;
    &.is-error {
      outline: 2px solid var(--text-red);
    }
  }
  .field__radio {
    border: 3px solid var(--white);
    border-radius: 50%;
    &:checked { background-color: var(--text-pink); }
  }
  .field__checkbox {
    border: 2px solid var(--white);
    &:checked {
      background-image: url(../images/icon-checked.svg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
    }
  }
  .field__callbacktime {
    display: none;
    margin-top: 0;
    &.is-visible {
      display: block;
      margin-top: 1rem;
    }
  }
  .field__select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 60px;
    padding: 1rem 1.25rem;
    border: none;
    border-radius: 4px;
    background: var(--white);
    &.is-focus {
      outline: 2px solid var(--accent-flat);
      outline-offset: 2px;
    }
    &::after {
      margin-bottom: 3px;
      width: 16px;
      height: 16px;
      background: url(../images/icon_arrow_down.svg) no-repeat center center;
      background-size: contain;
      content: "";
    }
    &.is-error {
      outline: 2px solid var(--text-red);
      outline-offset: 2px;
    }
    .field__select {
      appearance: none;
      border: none;
      background: transparent;
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.8;
      color: var(--text-black);
      outline: none;
    }
  }
  .field__error {
    display: none;
    align-items: center;
    gap: 0.2rem;
    margin: 0.5rem 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-red);
    &::before {
      display: block;
      width: 16px;
      height: 16px;
      background: url(../images/icon_error.svg) no-repeat center center;
      background-size: contain;
      content: "";
    }
    &.is-show {
      display: flex;
    }
  }
  .field_count {
    margin: 0;
    max-width: 800px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    color: var(--text-black);
    text-align: right;
  }
  .field__note {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    &.email__note { margin-top: 24px; }

  }
  .sub-label {
    margin: 1rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
  }
  .radio-row,
  .check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-bottom: 0.5rem;
  }
  .radio,
  .check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
  }
  .consent__field {
    text-align: center;
    .consent__note {
      margin: 0 0 0.75rem;
      font-size: 0.9375rem;
      font-weight: 400;
      line-height: 1.6;
      letter-spacing: 0.04em;
    }
    .consent__label {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.9375rem;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.04em;
    }
    .field__error {
      justify-content: center;
    }
  }
  .form-actions {
    text-align: center;
    margin: 0;
  }
  .btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    min-height: 60px;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 100px;
    background: var(--text-pink);
    color: var(--white);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    :hover {
      filter: brightness(0.95);
    }
    &:disabled {
      background: var(--gray-01);
      cursor: not-allowed;
    }
  }
}
@media (max-width: 768px) {
  .section--contact {
    .contact__cat {
      width: 100px;
      height: auto;
      top: -30px;
      left: 40px;
    }
    .contact__inner {
      border-radius: 20px;
    }
  }
  .contact-form {
    .consent__field {
      .consent__note { text-align: left; }
      .consent__label {
        align-items: flex-start;
        text-align: left;
      }
      .field__error {
        align-items: flex-start;
        line-height: 1.3;
      }
    }
  }
}


/* === Footer === */
.site-footer {
  padding: 2rem 1rem 3rem;
  text-align: center;
  .site-footer__copy {
    margin: 0;
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--footer-text);
    line-height: 1.2;
  }
}
@media screen and (max-width: 768px) {
  .site-footer {
    padding-bottom: 110px;
  }
}

/* === Side Nav === */
.side-nav {
  display: none;
  position: fixed;
  top: 40px;
  right: 0;
  width: 226px;
  height: auto;
  padding: 46px 40px 46px 30px;
  border-radius: 20px 0 0 20px;
  background: var(--bg-01);
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 0.04);
  z-index: 100;
  &.button-only {
    background: transparent;
    box-shadow: none;
  }
  &.is-show {
    display: block;
  }
  .side-nav__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    .side-nav__list {
      display: none;
      flex-direction: column;
      gap: 24px;
      .side-nav__link {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: calc((15 / 16) * 1rem);
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0.3px;
        text-decoration: none;
        color: var(--text-black);
        &:hover { color: var(--text-pink); }
        &::before {
          display: block;
          width: 10px;
          height: 10px;
          background: transparent;
          content: "";
        }
        &.side-nav__link--active {
          color: var(--text-pink);
          &::before {
            background: url(../images/head_circle.svg) no-repeat center center / contain;
          }
        }
      }
      .side-nav__note {
        margin-top: 16px;
        padding-top: 24px;
        border-top: 1px solid var(--gray-01);
        text-align: center;
        .side-nav__note-link {
          transition: opacity 0.3s ease;
          &:hover {
            opacity: 0.7;
          }
        }
      }
      .side-nav__logo { display: none; }
    }
  }
  &:not(.button-only) .side-nav__inner .side-nav__list.is-show {
    display: flex;
  }
  &.button-only .side-nav__inner {
    overflow: visible;
  }
  &.button-only .side-nav__inner .side-nav__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: top center;
    transition:
      max-height 0.5s ease,
      opacity 0.35s ease,
      transform 0.45s ease;
    pointer-events: none;
    margin: 0;
    padding: 0;
    border-radius: 20px 0 0 20px;
    background: var(--bg-01);
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 0.04);
  }
  &.button-only .side-nav__inner .side-nav__list.is-show {
    max-height: min(85vh, 800px);
    opacity: 1;
    transform: scaleY(1);
    pointer-events: auto;
    padding: 24px 24px 32px 30px;
  }
  .side-nav__open {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 186px;
    padding: 11px 5px;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    border: none;
    background: var(--bg-01);
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 0.15);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-black);
    appearance: none;
    cursor: pointer;
    &[hidden] { display: none; }
  }
  .side-nav__close {
    display: flex;
    width: 156px;
    margin-top: -14px;
    padding: 11px 5px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 40px;
    border: none;
    text-transform: uppercase;
    background: transparent;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-pink);
    appearance: none;
    cursor: pointer;
    &[hidden] { display: none; }
    img {
      filter: brightness(0) saturate(100%) invert(69%) sepia(9%) saturate(2249%) hue-rotate(318deg) brightness(95%) contrast(89%);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .side-nav.button-only .side-nav__inner .side-nav__list {
    transition: none;
  }
}
@media (max-width: 768px) {
  .side-nav {
    top: unset;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0;
    border-radius: 0;
    .side-nav__inner {
      gap: 0;
      .side-nav__list {
        padding: 100px 32px;
        height: 100vh;
        overflow: scroll;
        .side-nav__link {
          &.side-nav__link--active { color: var(--text-black); }
          &::before { display: none; }  
        }
        .side-nav__note {
          text-align: left;
        }
        .side-nav__logo {
          display: block;
          padding: 40px 0;
          img { width: 50%; }
        }
      }
    }
    .side-nav__open {
      position: static;
      display: block;
      width: 100%;
      background: var(--text-pink);
      border-radius: 20px 20px 0 0;
      padding: 16px 10px 30px;
      color: var(--white);
    }
    .side-nav__close {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      width: 100%;
      border-radius: 20px 20px 0 0;
      background: var(--text-pink);
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
      padding: 16px 10px 30px;
      color: var(--white);
      img {
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(267deg) brightness(104%) contrast(103%);
      }
    }
  }
}

/* === Thanks === */
.section--thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 100vh;
  padding: 0 20px;
  h1 {
    margin: 0 0 60px;
    padding: 0;
    img { width: 200px; }
  }
  .thanks__txt {
    margin: 0;
    padding: 0 0 1em;
    text-align: center;
    line-height: 1.8;
  }
  .btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    min-height: 60px;
    margin: 60px 0 0;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 100px;
    background: var(--text-pink);
    color: var(--white);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.04em;
    cursor: pointer;
    :hover {
      filter: brightness(0.95);
    }
  }
}
@media (max-width: 768px) {
  .section--thanks {
    .thanks__txt {
      text-align: left;
    }
  }
}