: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;
  --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;
  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;
      wbr { display: none; }
    }
    .hero__headline {
      display: grid;
      grid-template-areas: "text01 text01" "text02 text03" "text04 text04";
      grid-template-columns: auto;
      grid-template-rows: auto auto auto 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;
      svg {
        width: 100%;
        height: 100%;
        .hero__img-item {
          width: 100%;
          height: 100%;
          object-fit: cover;
          opacity: 0;
          pointer-events: none;
          transition: opacity var(--hero-kv-fade-duration, 2.5s) ease;
        }
        .hero__img-item.is-active {
          opacity: 1;
        }
      }
    }

    .hero__img-petal {
      position: absolute;
      margin: 0;
      padding: 0;
      bottom: -10%;
      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" "text02" "text03" "text04";
    }
  }
}
@media (max-width: 1200px) {
  .hero {
    gap: 20px;
    .hero__img { width: 100%; }
  }
}
@media (max-width: 980px) {
  .hero {
    .hero__title .hero__lead wbr { display: block; }
  }
}
@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    max-height: auto;
    min-height: 100vh;
    height: unset;
    .hero__title {
      order: 2;
      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: 60%;
      padding-top: 0;
    }
  }
}

/* === 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, 3vw, 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);
  }

  #service .page-illustration__img:not(.is-reveal-inview) {
    opacity: 0;
    transform: translateY(40px);
  }
  #service .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);
  }
  #service .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);
  }
  #service .page-illustration__img.is-reveal-inview span:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--reveal-page-illustration-span-delay);
  }
  #service .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(--reveal-petal-delay),
      transform var(--reveal-duration-fast) var(--reveal-ease) var(--reveal-petal-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,
  #service .page-illustration__img,
  #service .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;
  max-width: var(--container-wide);
  padding: calc(100vw * (285 / 1360)) 3vw 0 0;
  .about__inner {
    width: 100%;
    position: relative;
    background: var(--bg-01);
    border-radius: 0 0 40px 0;
    margin-top: -1px;
    padding: 8vw 12vw 12vw;
    &::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__body {
    padding: 0 0 0 3vw;
    .about-item {
      &:not(:last-child) {
        margin-bottom: 2.5vw;
      }
      .about-item__title {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        margin: 0 0 1vw;
        font-size: clamp(1.125rem, 2vw, 1.5rem);
        font-weight: 500;
        color: var(--text-pink);
        letter-spacing: 0.02em;
        &::before {
          display: block;
          width: 8px;
          height: 8px;
          background: url(../images/head_circle.svg) no-repeat center center / contain;
          content: '';
        }
      }
      .about-item__body {
        margin: 0;
        padding: 0 0 0 1.25rem;
        font-weight: 500;
      }
    }
  }
  .about__petal {
    position: absolute;
    left: 5px;
    top: .5vw;
    width: 10%;
    height: auto;
    z-index: 2;
  }
  .about__cat {
    position: absolute;
    right: 0;
    bottom: -8%;
    width: 15%;
    max-width: 197px;
    height: auto;
    z-index: 2;
  }
}
@media (max-width: 768px) {
  .section--about {
    max-width: 100%;
    padding: calc(100vw * (285 / 1360)) 20px 0 0;
    .about__inner {
      padding: 8vw 6vw 12vw;
      .section-head__ja br { display: none; }
    }
    .about__cat {
      top: calc(100% - 10vw);
      bottom: unset;
      width: 25%;
      right: 20px;
    }
  }
}

.page-illustration__img {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1em;
  padding: 16vw 20px;
  img {
    width: auto;
    height: 100%;
    object-fit: contain;
  }
}
@media (max-width: 768px) {
  .page-illustration__img {
    padding: 6vw 20px 8vw;
    flex-direction: column;
    align-items: center;
  }
}

/* === Service === */
.section--service {
  position: relative;
  .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: 3.125rem 2.5rem 2.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        text-align: left;
      }
      .service-card__icon {
        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__ja {
      text-align: center;
      .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;
            padding: 4rem;
          }
        }
      }
      .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;
    &:not(:last-child) {
      position: relative;
      margin-bottom: 2em;
      &::before{
        position: absolute;
        top: calc(3em + 24px);
        left: 0;
        display: block;
        content: '';
        width: 120px;
        height: calc(100% - 36px);
        background-image: radial-gradient(circle, var(--text-pink) 2.5px, transparent 2.5px);
        background-position: 50% 0;
        background-size: 12px 18px;
        background-repeat: repeat-y;
        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: 1.875rem 1.25rem 1.875rem 2.5rem;
    .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-step {
      grid-template-columns: 80px 1fr;
      &:not(:last-child)::before {
        width: 80px;
        height: calc(100% - 45px);
        top: calc(3em + 32px);
      }
    }
    .flow-step__meta {
      .flow-step__circle {
        width: 80px;
        height: 80px;
      }
    }
  }
}

/* === 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;
      }
      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__body {
      .office__table {
        tr {
          display: flex;
          flex-direction: column;
          th,td {
            padding: 0.5em 0;
          }
          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: 12vw 40px 12vw 12vw;
  }
  .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);
    top: -6vw;
    width: 77px;
    height: auto;
  }
  .profile__petal {
    position: absolute;
    right: calc(100% - 200px);
    bottom: 10px;
    width: 240px;
    height: auto;
    z-index: 2;
  }
}
@media (max-width: 768px) {
  .section--profile {
    .profile__inner {
      .profile__content {
        padding: 10vw 6vw;
        grid-template-columns: 1fr;
        .profile__cat {
          top: -12vw;
          right: 6vw;
          left: unset;
        }
      }
    }
    .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 3vw;
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .faq-tabs__labels {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.625rem;
    margin-bottom: 3vw;
    .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-weight: 700;
      letter-spacing: 0.04em;
      white-space: nowrap;
      cursor: pointer;
      line-height: 1.3;
      &.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-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: flex;
          align-items: center;
          gap: 0.75rem;
          font-size: 1.125rem;
          font-weight: 500;
          line-height: 1.3;
          letter-spacing: 0.04em;
          color: var(--text-pink);
          .faq-item__n {
            flex-shrink: 0;
            width: 70px;
            font-size: 1.625rem;
            font-weight: 400;
            letter-spacing: 0.04em;
          }
        }
        .faq-item__a p {
          margin: 0 0 0.5rem;
          padding-left: calc(70px + 0.75rem);
          font-weight: 500;
          line-height: 1.8;
        }
      }
    }
  }
}
@media (max-width: 768px) {
  .faq-tabs {
    .faq-tabs__labels {
      overflow: scroll;
      padding-bottom: 10px;
    }
  }
}

/* === 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 .section-head__ja,
  .contact__head .section-head__en {
    color: var(--text-black);
  }
  .contact__cat {
    position: absolute;
    top: -55px;
    left: clamp(1.25rem, 4vw, 3rem);
    width: 160px;
    height: 66px;
    z-index: 2;
  }
}
.contact-form {
  max-width: 800px;
  margin: 0 auto;
  .field {
    margin-bottom: 50px;
    &: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);
    &: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: 600px;
    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) {
  .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;
  }
}

/* === 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__logo {
          display: block;
          padding: 40px 0;
          img { width: 50%; }
        }
      }
    }
    .side-nav__open {
      position: static;
      display: block;
      width: 100%;
      background: var(--bg-02);
      border-radius: 20px 20px 0 0;
      padding: 16px 10px 40px;
    }
    .side-nav__close {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      width: 100%;
      border-radius: 20px 20px 0 0;
      background: var(--accent-flat);
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
      padding: 16px 10px 40px;
      color: var(--white);
      img {
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(267deg) brightness(104%) contrast(103%);
      }
    }
  }
}