/* =========================================================================
   style.css — CODING-GUIDELINE.md 準拠
   - PC基点。SPの上書きは @media (width < 768px) のみ
   - 寸法は calc(<Figmaのpx> * var(--u))、テキストは rem / clamp()
   - Figma: pc-top(1440) / sp-top(390)
   ========================================================================= */

@layer reset, tokens, base, layout, components, utilities;

/* -------------------------------------------------------------------------
   reset（3.4）
   ------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  ul, ol { list-style: none; }
  a { color: inherit; text-decoration: none; }
  em, strong, b { font-style: normal; font-weight: inherit; }
  fieldset { border: 0; min-width: 0; }
  table { border-collapse: collapse; }
  summary { list-style: none; }
  summary::-webkit-details-marker { display: none; }
  dialog { max-width: none; max-height: none; border: 0; background: none; color: inherit; }
  p, h1, h2, h3, h4 { overflow-wrap: anywhere; }
}

/* -------------------------------------------------------------------------
   tokens（2.1 / 3.2 / 4.3）
   ------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* 1デザインpx。PCは1440基準、1600pxで拡大停止 */
    --u: min(100vw / 1440, 1600px / 1440);

    /* 本文: PC 768px → 15px、1440px → 16px */
    --fs-body: clamp(1.5rem, 1.5rem + (100vw - 768px) / 672, 1.6rem);

    /* color（Figmaの塗り） */
    --c-navy: #001e4b;
    --c-navy-2: #06295c;
    --c-slate: #526d92;
    --c-slate-light: #d8e3ef;
    --c-slate-pale: #e2e7ed;
    --c-border: #bccee3;
    --c-bg: #f9fcff;
    --c-bg-blue: #edf2f7;
    --c-bg-blue-2: #eff5fb;
    --c-gold: #a77b21;
    --c-gold-label: #be933b;
    --c-gold-icon: #c49e41;
    --c-gold-light: #e0ba6c;
    --c-cream: #f3e3c3;
    --c-cream-pale: #fff6e3;
    --c-beige: #f6f2e8;
    --c-beige-2: #f0e9d9;
    --c-orange: #cd7e10;
    --c-blue: #4178c3;
    --c-green: #03af4a;
    --c-green-line: #18ba5b;
    --c-green-dark: #008437;
    --c-yellow: #eed727;
    --c-yellow-light: #fedd9b;
    --c-red: #f03538;
    --c-white: #ffffff;

    /* font */
    --ff-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --ff-serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --ff-en: "Zen Kaku Gothic New", var(--ff-sans);
    --ff-num: "Manrope", var(--ff-sans);
    /* 入力された文字用。Webフォントはページ内の文字だけのサブセットなので、
       入力欄に使うと文字ごとに書体・太さが混ざる。OS標準の書体でそろえる */
    --ff-input: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;

    /* layout */
    --header-h: calc(112 * var(--u));

    /* radius / shadow / z / motion */
    --radius: calc(5 * var(--u));
    --shadow-inset: inset 0 calc(-2 * var(--u)) 0 rgb(0 0 0 / 0.25);
    --z-header: 100;
    --z-popup: 200;
    --dur: 0.1s;   /* Figma: 発動時間 100ms */
    --ease: ease;

    /* 点線（Figma: dash 0.1/5・round cap） */
    --dots-white: radial-gradient(circle, var(--c-white) 0 calc(1 * var(--u)), transparent calc(1.2 * var(--u)));
    --dots-navy: radial-gradient(circle, var(--c-navy) 0 calc(1 * var(--u)), transparent calc(1.2 * var(--u)));
    /* 破線（Figma: dash 3/3・1.5px） */
    --dash-slate: linear-gradient(to right, var(--c-slate) 50%, transparent 0);
  }

  @media (width < 768px) {
    :root {
      /* SP: 390基準で流動 */
      --u: calc(100vw / 390);

      /* 本文: SP 320px → 15px、390px → 16px */
      --fs-body: clamp(1.5rem, 1.5rem + (100vw - 320px) / 70, 1.6rem);

      --header-h: calc(72 * var(--u));
    }
  }
}

/* -------------------------------------------------------------------------
   base（4.2 / 4.3）
   ------------------------------------------------------------------------- */
@layer base {
  html {
    font-size: 62.5%;                     /* 1rem = 10px */
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);  /* アンカー移動時にヘッダーで隠れないように */
  }

  body {
    min-width: 320px;
    font-family: var(--ff-sans);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.6;
    color: var(--c-navy);
    background: var(--c-bg);
    overflow-x: clip;
    line-break: strict;   /* 「ー」や小書きかなを行頭に置かない（Figmaの改行に合わせる） */
  }

  :focus-visible {
    outline: 2px solid var(--c-blue);
    outline-offset: 2px;
  }

  @media (width < 768px) {
    input, textarea, select { font-size: 1.6rem; }   /* iOSズーム防止 */
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* -------------------------------------------------------------------------
   layout
   ------------------------------------------------------------------------- */
@layer layout {
  /* header ---------------------------------------------------------------- */
  .l-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-header);
  }

  .l-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    padding: calc(32 * var(--u)) calc(40 * var(--u)) calc(24 * var(--u)) calc(32 * var(--u));
    transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);

    .l-header.is-scrolled & {
      background: rgb(249 252 255 / 0.95);
      box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgb(1 24 58 / 0.08);
    }
  }

  .l-header__logo {
    position: relative;
    z-index: 1;
    transition: opacity var(--dur) var(--ease);

    @media (hover: hover) { &:hover { opacity: 0.4; } }

    img { width: calc(263 * var(--u)); }
  }

  .l-header__ctas {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: calc(16 * var(--u));
    margin-inline: auto calc(24 * var(--u));
    transition: opacity 0.3s var(--ease), visibility 0.3s;

    .l-header.is-menu-open & {
      visibility: hidden;
      opacity: 0;
    }
  }

  @media (width < 768px) {
    .l-header__inner {
      padding: calc(16 * var(--u));
    }

    .l-header__logo {
      transition: opacity 0.3s var(--ease);

      .l-header.is-menu-open & { opacity: 0; }

      img { width: calc(188 * var(--u)); }
    }

    .l-header__ctas { display: none; }
  }

  /* nav（ハンバーガーメニュー） ------------------------------------------- */
  .l-nav {
    position: fixed;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0.3s;

    .l-header.is-menu-open & { visibility: visible; }
  }

  .l-nav__overlay {
    position: absolute;
    inset: 0;
    background: rgb(0 30 75 / 0.5);
    opacity: 0;
    transition: opacity 0.3s var(--ease);

    .l-header.is-menu-open & { opacity: 1; }
  }

  .l-nav__panel {
    --u: 1px;   /* PC: メニューは実寸固定（2.3 B） */
    position: absolute;
    inset: 0 0 0 auto;
    width: calc(420 * var(--u));   /* Figma 400 → 文字の折り返し防止で+20 */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(120 * var(--u)) calc(40 * var(--u)) calc(64 * var(--u));
    background: var(--c-navy-2);
    translate: 100% 0;
    transition: translate 0.3s var(--ease);

    .l-header.is-menu-open & { translate: 0 0; }
  }

  .l-nav__list {
    display: grid;
    gap: calc(16 * var(--u));
  }

  .l-nav__link {
    display: flex;
    align-items: baseline;
    gap: calc(8 * var(--u));
    padding-bottom: calc(16 * var(--u));
    font-family: var(--ff-serif);
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--c-white);
    background: var(--dots-white) left bottom / calc(5 * var(--u)) calc(2 * var(--u)) repeat-x;
    transition: color var(--dur) var(--ease);

    @media (hover: hover) { &:hover { color: var(--c-cream); } }
  }

  .l-nav__num {
    font-size: 1.4rem;
    color: var(--c-cream);
  }

  .l-nav__ctas {
    display: grid;
    gap: calc(16 * var(--u));
    margin-top: calc(48 * var(--u));
  }

  .l-nav__cta {
    position: relative;
    display: flex;
    justify-content: space-between;
    min-height: calc(116 * var(--u));
    padding-top: calc(16 * var(--u));
    color: var(--c-white);

    &::before {
      position: absolute;
      inset: calc(16 * var(--u)) 0 0;
      content: "";
      border-radius: var(--radius);
      background: var(--c-blue);
      box-shadow: var(--shadow-inset);
      transition: background-color var(--dur) var(--ease);
    }

    @media (hover: hover) { &:hover::before { background: var(--c-navy); } }
  }

  .l-nav__cta-text {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: calc(6 * var(--u));
    margin-top: calc(-16 * var(--u));
    padding: 0 0 calc(21 * var(--u)) calc(24 * var(--u));
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;
    white-space: nowrap;   /* 改行は <br> の位置だけ */
  }

  .l-nav__cta-badge {
    padding: calc(1 * var(--u)) calc(24 * var(--u)) calc(2 * var(--u));
    border: calc(3 * var(--u)) solid var(--c-blue);
    border-radius: 100vmax;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--c-white);
    background: var(--c-orange);
  }

  .l-nav__cta-img {
    position: relative;
    align-self: flex-end;
    width: calc(102 * var(--u));
    margin: calc(-16 * var(--u)) calc(12 * var(--u)) 0 0;
  }

  .l-nav__cta--line {
    color: var(--c-green-dark);

    &::before { background: var(--c-yellow); }
    @media (hover: hover) { &:hover::before { background: var(--c-white); } }

    .l-nav__cta-text {
      padding: 0 0 calc(22 * var(--u)) calc(12 * var(--u));
      font-size: 1.6rem;
    }

    .l-nav__cta-badge {
      padding-inline: calc(16 * var(--u));
      border-color: var(--c-yellow);
      font-size: 1.5rem;
      background: var(--c-green);
    }
  }

  .l-nav__cta-phone {
    position: relative;
    align-self: flex-end;
    width: calc(50 * var(--u));
    margin-right: calc(16 * var(--u));
  }

  .l-nav__tel {
    position: relative;
    margin-top: calc(48 * var(--u));
    padding: calc(24 * var(--u)) calc(28 * var(--u));
    border: calc(1.5 * var(--u)) solid var(--c-white);
    text-align: center;
  }

  .l-nav__tel-title {
    position: absolute;
    inset: calc(-15 * var(--u)) 0 auto;
    width: fit-content;
    margin-inline: auto;
    padding: calc(4 * var(--u)) calc(16 * var(--u));
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--c-white);
    background: var(--c-navy-2);
  }

  @media (width < 768px) {
    .l-nav__overlay { display: none; }

    .l-nav__panel {
      --u: calc(100vw / 390);
      width: 100%;
      padding: calc(96 * var(--u)) calc(32 * var(--u)) calc(64 * var(--u));
    }

    .l-nav__ctas,
    .l-nav__tel {
      width: calc(320 * var(--u));
      margin-inline: auto;
    }
  }

  /* footer ---------------------------------------------------------------- */
  .l-footer {
    padding: calc(40 * var(--u)) calc(10 * var(--u));
    text-align: center;
  }

  .l-footer__copy {
    font-family: var(--ff-serif);
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: var(--c-slate);

    small { font-size: inherit; }
  }

  @media (width < 768px) {
    .l-footer__copy {
      max-width: calc(220 * var(--u));
      margin-inline: auto;
    }
  }
}

/* -------------------------------------------------------------------------
   components（共通部品）
   ------------------------------------------------------------------------- */
@layer components {
  /* icon（HTML冒頭のSVGスプライトを <use> で参照。currentColor で塗る） ------ */
  .c-icon {
    display: inline-block;
    flex-shrink: 0;
    width: calc(30 * var(--u));
    height: auto;
    aspect-ratio: 1;
  }

  /* hamburger ------------------------------------------------------------- */
  .c-hamburger {
    position: relative;
    z-index: 3;
    width: calc(40 * var(--u));
    aspect-ratio: 1;
    color: var(--c-navy);
    transition: color var(--dur) var(--ease);

    @media (hover: hover) { &:hover { color: var(--c-gold-icon); } }

    .l-header.is-menu-open & { color: var(--c-white); }
    @media (hover: hover) { .l-header.is-menu-open &:hover { color: var(--c-gold-icon); } }
  }

  .c-hamburger__line,
  .c-hamburger__line::before,
  .c-hamburger__line::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(2 * var(--u));
    background: currentColor;
    transition: rotate 0.3s var(--ease), translate 0.3s var(--ease), opacity 0.3s var(--ease);
  }

  .c-hamburger__line {
    top: calc(19 * var(--u));
    background: none;

    &::before,
    &::after { content: ""; }

    &::before { translate: 0 calc(-12 * var(--u)); }
    &::after { translate: 0 calc(12 * var(--u)); }
  }

  /* 中央の線は box-shadow ではなく背景で描く（開閉で消す） */
  .c-hamburger::after {
    position: absolute;
    top: calc(19 * var(--u));
    left: 0;
    width: 100%;
    height: calc(2 * var(--u));
    content: "";
    background: currentColor;
    transition: opacity 0.3s var(--ease);
  }

  .c-hamburger[aria-expanded="true"] {
    &::after { opacity: 0; }
    .c-hamburger__line::before { translate: 0 0; rotate: 45deg; }
    .c-hamburger__line::after { translate: 0 0; rotate: -45deg; }
  }

  /* heading（英字ラベル＋見出し） ----------------------------------------- */
  .c-heading {
    display: grid;
    justify-items: center;
    gap: calc(12 * var(--u));
    text-align: center;
  }

  .c-heading__en {
    padding-bottom: calc(4 * var(--u));
    font-family: var(--ff-en);
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: var(--c-gold-label);
    background: var(--dots-navy) left bottom / calc(5 * var(--u)) calc(2 * var(--u)) repeat-x;
  }

  .c-heading__title {
    font-family: var(--ff-serif);
    font-size: clamp(3.2rem, calc(40 * var(--u)), 4rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--c-navy);

    em { color: var(--c-gold); }
  }

  .c-heading--dark {
    .c-heading__en {
      color: var(--c-cream);
      background-image: var(--dots-white);
    }

    .c-heading__title {
      color: var(--c-white);

      em { color: var(--c-cream); }
    }
  }

  .c-heading--white {
    .c-heading__en {
      color: var(--c-white);
      background-image: var(--dots-white);
    }

    .c-heading__title { color: var(--c-white); }
  }

  .c-heading--left {
    justify-items: start;
    text-align: left;
  }

  @media (width < 768px) {
    .c-heading__title {
      font-size: clamp(2.2rem, calc(26 * var(--u)), 2.6rem);
    }
  }

  /* seminar-band（高単価が目指せる…｜無料開催中） ------------------------ */
  .c-seminar-band {
    display: flex;
    justify-content: center;
    font-family: var(--ff-serif);
    font-size: clamp(1.8rem, calc(32 * var(--u)), 3.2rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }

  .c-seminar-band__title,
  .c-seminar-band__free {
    padding: calc(4 * var(--u)) calc(16 * var(--u));
  }

  .c-seminar-band__title {
    color: var(--c-cream);
    background: var(--c-navy-2);
  }

  .c-seminar-band__free {
    color: var(--c-white);
    background: var(--c-orange);
  }

  @media (width < 768px) {
    .c-seminar-band {
      flex-direction: column;
      width: calc(320 * var(--u));
      margin-inline: auto;
      font-size: clamp(2.2rem, calc(26 * var(--u)), 2.6rem);
      text-align: center;
    }

    .c-seminar-band__title {
      padding-block: calc(8 * var(--u));
    }
  }

  /* check-list（金の丸チェック＋破線区切り） ------------------------------ */
  .c-check-list {
    display: grid;

    /* 文中に強調（em）があるときは <span> で包む（flexで分割されないように） */
    li {
      display: flex;
      align-items: center;
      gap: calc(12 * var(--u));
      padding-block: calc(12 * var(--u));
      font-size: clamp(1.6rem, calc(20 * var(--u)), 2rem);
      font-weight: 700;
      line-height: 1.5;

      &::before {
        flex-shrink: 0;
        width: calc(20 * var(--u));
        aspect-ratio: 1;
        content: "";
        background: url("../imgs/icn-check-circle.svg") center / contain no-repeat;
      }

      &:first-child { padding-top: 0; }
      &:last-child { padding-bottom: 0; }

      & + li {
        background: var(--dash-slate) left top / calc(6 * var(--u)) calc(1.5 * var(--u)) repeat-x;
      }
    }

    em { color: var(--c-gold); }
  }

  /* 小（about）: 細いチェック・16px */
  .c-check-list--small li {
    padding-block: calc(8 * var(--u));
    font-size: var(--fs-body);
    font-weight: 500;

    &::before {
      width: calc(16 * var(--u));
      background-image: url("../imgs/icn-check.svg");
    }
  }

  @media (width < 768px) {
    .c-check-list li {
      font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    }

    .c-check-list--small li {
      font-size: var(--fs-body);
    }
  }

  /* tel ------------------------------------------------------------------- */
  .c-tel {
    display: grid;
    justify-items: center;
    gap: calc(2 * var(--u));
    color: var(--c-navy);
    transition: color var(--dur) var(--ease);

    @media (hover: hover) {
      &:hover {
        color: var(--c-slate);

        .c-tel__hours { opacity: 0.6; }
      }
    }
  }

  .c-tel__number {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    font-family: var(--ff-serif);
    font-size: clamp(2rem, calc(40 * var(--u)), 4rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    white-space: nowrap;

    .c-icon { width: calc(30 * var(--u)); }
  }

  .c-tel__hours {
    justify-self: stretch;
    padding-block: calc(4 * var(--u));
    font-size: var(--fs-body);
    line-height: 1.5;
    text-align: center;
    color: var(--c-navy);
    background: var(--c-cream);
    transition: opacity var(--dur) var(--ease);
  }

  .c-tel--large {
    width: calc(360 * var(--u));
  }

  .c-tel--header {
    gap: calc(4 * var(--u));

    .c-tel__number {
      gap: calc(4 * var(--u));
      font-size: clamp(1.2rem, calc(18 * var(--u)), 1.8rem);

      .c-icon { width: calc(16 * var(--u)); }
    }

    .c-tel__hours {
      padding: calc(2 * var(--u)) calc(12 * var(--u));
      font-size: 1.2rem;
    }
  }

  .c-tel--nav {
    color: var(--c-white);

    @media (hover: hover) { &:hover { color: var(--c-cream); } }

    .c-tel__number {
      font-size: 2.8rem;

      .c-icon { width: calc(20 * var(--u)); opacity: 0.9; }
    }

    .c-tel__hours {
      padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u));
      font-size: 1.4rem;
      color: var(--c-white);
      background: var(--c-navy);
    }
  }

  @media (width < 768px) {
    .c-tel--large {
      width: calc(248 * var(--u));
      gap: calc(4 * var(--u));

      .c-tel__number {
        font-size: clamp(2.6rem, calc(30 * var(--u)), 3rem);

        .c-icon { width: calc(20 * var(--u)); }
      }

      .c-tel__hours { font-size: 1.3rem; }
    }

    .c-tel--nav .c-tel__number {
      font-size: clamp(2.4rem, calc(28 * var(--u)), 2.8rem);
    }
  }

  /* btn-reserve（オンラインセミナーを予約） ------------------------------- */
  .c-btn-reserve {
    display: flex;
    align-items: center;
    gap: calc(32 * var(--u));
    border-radius: var(--radius);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--c-white);
    background: var(--c-blue);
    box-shadow: var(--shadow-inset);
    transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);

    @media (hover: hover) {
      &:hover {
        background: var(--c-navy);
        box-shadow: none;
      }
    }
  }

  .c-btn-reserve--header {
    gap: calc(16 * var(--u));
    height: max(calc(56 * var(--u)), 4.4rem);   /* 狭いPC幅では44pxで止める */
    padding: 0 calc(24 * var(--u)) 0 calc(16 * var(--u));
    font-size: clamp(1.2rem, calc(15 * var(--u)), 1.5rem);
    line-height: 1.5;
    white-space: nowrap;
  }

  /* 文字はアイコン（左24px）を除いた残りの中央に置く（Figma: 文字枠209px） */
  .c-btn-reserve--large {
    position: relative;
    justify-content: center;
    width: calc(360 * var(--u));
    min-height: calc(100 * var(--u));
    padding: calc(10 * var(--u)) calc(40 * var(--u)) calc(10 * var(--u)) calc(76 * var(--u));
    font-size: clamp(1.2rem, calc(20 * var(--u)), 2rem);
    line-height: 1.5;
    text-align: center;

    .c-icon {
      position: absolute;
      top: 50%;
      left: calc(24 * var(--u));
      translate: 0 -50%;
    }
  }

  /* SPは1行で表示。文字はボタンと同じ比率で拡縮し、600px時のサイズで止める */
  @media (width < 768px) {
    .c-btn-reserve--large {
      width: 100%;
      min-height: calc(72 * var(--u));
      padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(50 * var(--u));
      font-size: clamp(1.2rem, calc(14 * var(--u)), 2.15rem);
      letter-spacing: 0.02em;
      white-space: nowrap;

      .c-icon {
        left: calc(14 * var(--u));
        width: calc(26 * var(--u));
      }
    }
  }

  /* btn-line-header（ヘッダーのLINEボタン） ------------------------------- */
  .c-btn-line-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(16 * var(--u));
    height: max(calc(56 * var(--u)), 4.4rem);   /* 狭いPC幅では44pxで止める */
    padding: 0 calc(24 * var(--u)) 0 calc(16 * var(--u));
    border-radius: var(--radius);
    font-size: clamp(1.2rem, calc(15 * var(--u)), 1.5rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: var(--c-white);
    background: var(--c-green);
    box-shadow: var(--shadow-inset);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);

    .c-icon { color: var(--c-white); transition: color var(--dur) var(--ease); }

    @media (hover: hover) {
      &:hover {
        color: var(--c-green-dark);
        background: var(--c-yellow);

        .c-icon { color: var(--c-green-dark); }

        .c-btn-line-header__badge {
          color: var(--c-white);
          background: var(--c-green);
          border-color: var(--c-yellow);

          &::after { background: var(--c-green); }
        }
      }
    }
  }

  .c-btn-line-header__badge {
    position: absolute;
    inset: calc(-16 * var(--u)) 0 auto;
    width: fit-content;
    margin-inline: auto;
    padding: 0 calc(12 * var(--u)) calc(2 * var(--u));
    border: calc(2 * var(--u)) solid var(--c-green);
    border-radius: 100vmax;
    font-size: clamp(1.2rem, calc(14 * var(--u)), 1.4rem);
    line-height: 1.5;
    color: var(--c-green-dark);
    background: var(--c-yellow);
    transition: inherit;

    &::after {
      position: absolute;
      top: 100%;
      left: 50%;
      width: calc(8 * var(--u));
      height: calc(6 * var(--u));
      content: "";
      background: var(--c-yellow);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      translate: -50% calc(-1 * var(--u));
    }
  }

  /* btn-line（友達追加して動画をGET） ------------------------------------- */
  .c-btn-line {
    display: flex;
    align-items: center;
    gap: calc(34 * var(--u));
    width: calc(400 * var(--u));
    min-height: calc(70 * var(--u));
    padding: calc(8 * var(--u)) calc(24 * var(--u));
    border-radius: var(--radius);
    font-size: clamp(1.2rem, calc(20 * var(--u)), 2rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--c-green-dark);
    background: var(--c-yellow);
    box-shadow: var(--shadow-inset);
    transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);

    @media (hover: hover) {
      &:hover {
        background: var(--c-white);
        box-shadow: none;
      }
    }
  }

  @media (width < 768px) {
    /* SPは1行で表示。文字はボタンと同じ比率で拡縮し、600px時のサイズで止める */
    .c-btn-line {
      justify-content: center;
      gap: calc(12 * var(--u));
      width: 100%;
      min-height: calc(72 * var(--u));
      padding: calc(8 * var(--u)) calc(12 * var(--u));
      font-size: clamp(1.2rem, calc(16 * var(--u)), 2.46rem);
      letter-spacing: 0.02em;
      white-space: nowrap;

      .c-icon { width: calc(26 * var(--u)); }
    }
  }

  /* cta（電話・予約・LINE。solution内／cta2／cta4で共通） ----------------- */
  .c-cta {
    position: relative;
    isolation: isolate;
    color: var(--c-white);
    background: var(--c-navy);
  }

  .c-cta__tree {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: calc(303 * var(--u));
  }

  .c-cta__head {
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .c-cta__title {
    font-family: var(--ff-serif);
    font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--c-cream);
  }

  .c-cta__sub {
    margin-top: calc(8 * var(--u));
    color: var(--c-cream);
  }

  .c-cta__heading {
    font-family: var(--ff-serif);
    font-size: clamp(3.2rem, calc(40 * var(--u)), 4rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin-bottom: calc(16 * var(--u));

    em { color: var(--c-cream); }
  }

  .c-cta__heading--gold { color: var(--c-cream); }

  .c-cta__text {
    font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    line-height: 1.8;

    & + & { margin-top: calc(16 * var(--u)); }
  }

  .c-cta__highlight {
    display: flex;
    justify-content: center;
    margin-block: calc(16 * var(--u));
    padding: calc(4 * var(--u)) calc(16 * var(--u));
    font-family: var(--ff-serif);
    font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 900;
    line-height: 1.5;
    color: var(--c-navy);
    background: var(--c-cream);
  }

  .c-cta__reserve {
    position: relative;
  }

  .c-cta__reserve-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(24 * var(--u));
    padding-block: calc(40 * var(--u));
    color: var(--c-navy);
    background: var(--c-white);
  }

  .c-cta__reserve-label {
    margin-right: calc(16 * var(--u));
    padding-top: calc(8 * var(--u));
    white-space: nowrap;
    font-family: var(--ff-serif);
    font-size: clamp(1.6rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;
  }

  .c-cta__note {
    margin-top: calc(8 * var(--u));
    font-size: 1.3rem;
    line-height: 1.6;
    text-align: center;
  }

  /* 白いカード（.c-cta__reserve）の左上に、下端が少し重なる位置で置く。
     見出しの行数が変わってもカード基準なので位置がずれない */
  .c-cta__staff {
    position: absolute;
    bottom: calc(100% - 24 * var(--u));   /* カードに24px重ねる */
    left: calc(24 * var(--u));            /* Figma x184（カード左端160から+24） */
    z-index: 1;
    width: calc(184 * var(--u));
  }

  /* solution内（幅1082） */
  .c-cta--inner {
    padding: calc(64 * var(--u)) calc(80 * var(--u));

    .c-cta__reserve { margin-top: calc(24 * var(--u)); }
    .c-line-banner { margin-top: calc(33 * var(--u)); }
  }

  /* 全幅（cta2・cta4） */
  .c-cta--wide {
    padding: calc(80 * var(--u)) calc((100% - 1120 * var(--u)) / 2);

    .c-cta__reserve { margin-top: calc(40 * var(--u)); }

    .c-line-banner { margin: calc(24 * var(--u)) calc(-120 * var(--u)) 0; }
  }

  @media (width < 768px) {
    .c-cta__tree { width: calc(200 * var(--u)); }

    .c-cta__title { font-size: clamp(1.8rem, calc(20 * var(--u)), 2rem); }

    .c-cta__heading {
      font-size: clamp(2.2rem, calc(26 * var(--u)), 2.6rem);
      margin-bottom: calc(24 * var(--u));
    }

    .c-cta__highlight {
      flex-direction: column;
      align-items: center;
      gap: calc(8 * var(--u));
      padding: 0;
      font-size: clamp(1.8rem, calc(20 * var(--u)), 2rem);
      background: none;

      span {
        padding: calc(4 * var(--u)) calc(16 * var(--u));
        background: var(--c-cream);
      }
    }

    .c-cta__reserve-box {
      flex-direction: column;
      gap: calc(16 * var(--u));
      padding: calc(32 * var(--u)) calc(12 * var(--u));
    }

    .c-cta__note { text-align: left; }

    .c-cta--inner {
      padding: calc(48 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));

      .c-cta__reserve { margin-top: calc(24 * var(--u)); }
      .c-line-banner { margin-top: calc(32 * var(--u)); }
    }

    .c-cta--wide {
      padding: calc(64 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u));

      .c-cta__reserve { margin-top: 0; }
      .c-line-banner { margin: calc(32 * var(--u)) 0 0; }
    }

    .c-cta__staff {
      position: relative;
      inset: auto;
      z-index: 1;
      margin: calc(16 * var(--u)) auto calc(-8 * var(--u));
    }
  }

  /* line-banner（公式LINE・緑の方眼） ------------------------------------- */
  .c-line-banner {
    position: relative;
    display: flex;
    justify-content: center;
    gap: calc(80 * var(--u));
    padding: calc(48 * var(--u)) calc(80 * var(--u)) 0;
    color: var(--c-white);
    background:
      linear-gradient(to right, var(--c-green-line) calc(1.5 * var(--u)), transparent 0) calc(62 * var(--u)) 0 / calc(88 * var(--u)) 100%,
      linear-gradient(to bottom, var(--c-green-line) calc(1.5 * var(--u)), transparent 0) 0 calc(40 * var(--u)) / 100% calc(88 * var(--u)),
      var(--c-green);
  }

  .c-line-banner--inner {
    gap: calc(40 * var(--u));
    justify-content: flex-start;
  }

  .c-line-banner__badge {
    position: absolute;
    top: calc(16 * var(--u));
    left: calc(136 * var(--u));
    display: grid;
    place-items: center;
    width: max(calc(120 * var(--u)), 9.6rem);   /* 狭いPC幅では最小12pxの文字が収まる大きさで止める */
    aspect-ratio: 1;
    padding-bottom: calc(4 * var(--u));
    font-size: clamp(1.2rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-align: center;
    color: var(--c-navy-2);
    background: url("../imgs/cta-line-badge.svg") center / contain no-repeat;
  }

  .c-line-banner--inner .c-line-banner__badge {
    top: calc(-33 * var(--u));
    left: calc(-32 * var(--u));
  }

  .c-line-banner__phone {
    align-self: flex-end;
    width: calc(240 * var(--u));
  }

  .c-line-banner__body {
    display: grid;
    justify-items: center;
    align-content: start;
    width: calc(482 * var(--u));
    padding-bottom: calc(48 * var(--u));
    text-align: center;
  }

  .c-line-banner__lead {
    font-size: clamp(1.4rem, calc(20 * var(--u)), 2rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }

  .c-line-banner__movie {
    display: grid;
    justify-items: center;
    gap: calc(4 * var(--u));
    justify-self: stretch;
    margin-top: calc(8 * var(--u));
    padding: calc(16 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u));
    border-block: calc(2.5 * var(--u)) solid var(--c-white);
    font-size: clamp(1.4rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }

  .c-line-banner__movie-row {
    display: flex;
    align-items: center;
    gap: calc(6 * var(--u));
  }

  .c-line-banner__tag {
    padding: 0 calc(8 * var(--u)) calc(1 * var(--u));
    font-size: clamp(1.4rem, calc(20 * var(--u)), 2rem);
    color: var(--c-green-dark);
    background: var(--c-white);
  }

  .c-line-banner__ten,
  .c-line-banner__underline {
    color: var(--c-cream);
    background: linear-gradient(to right, var(--c-cream) 50%, transparent 0) left bottom / calc(6 * var(--u)) calc(1.5 * var(--u)) repeat-x;
  }

  .c-line-banner__ten {
    line-height: 1;

    b {
      font-family: var(--ff-num);
      font-size: clamp(3.2rem, calc(40 * var(--u)), 4rem);
      font-weight: 700;
      letter-spacing: 0;
    }
  }

  .c-line-banner__underline {
    font-size: clamp(1.6rem, calc(28 * var(--u)), 2.8rem);
  }

  .c-line-banner__gift {
    margin-top: calc(8 * var(--u));
    font-size: clamp(1.4rem, calc(20 * var(--u)), 2rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }

  .c-line-banner .c-btn-line {
    margin-top: calc(24 * var(--u));
  }

  @media (width < 768px) {
    .c-line-banner,
    .c-line-banner--inner {
      justify-content: center;
      padding: calc(40 * var(--u)) calc(16 * var(--u));
      background-position: calc(18 * var(--u)) 0, 0 calc(40 * var(--u)), 0 0;
    }

    .c-line-banner__badge,
    .c-line-banner--inner .c-line-banner__badge {
      top: calc(-8 * var(--u));
      left: 50%;
      width: auto;
      aspect-ratio: auto;
      padding: calc(5 * var(--u)) calc(24 * var(--u));
      border-radius: 100vmax;
      font-size: clamp(1.3rem, calc(14 * var(--u)), 1.4rem);
      white-space: nowrap;
      background: var(--c-yellow);
      translate: -50% 0;

      &::after {
        position: absolute;
        top: 100%;
        left: 50%;
        width: calc(8 * var(--u));
        height: calc(6 * var(--u));
        content: "";
        background: var(--c-yellow);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        translate: -50% 0;
      }
    }

    .c-line-banner__phone { display: none; }

    .c-line-banner__body {
      width: 100%;
      padding-bottom: 0;
    }

    .c-line-banner__lead { font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem); }

    .c-line-banner__movie {
      gap: 0;
      padding: calc(12 * var(--u)) 0 calc(14 * var(--u));
      font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    }

    .c-line-banner__tag { font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem); }

    .c-line-banner__ten b { font-size: clamp(3rem, calc(36 * var(--u)), 3.6rem); }

    .c-line-banner__underline {
      font-size: clamp(2rem, calc(22 * var(--u)), 2.2rem);
    }

    .c-line-banner__gift { font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem); }
  }

  /* mark（◎ △） ---------------------------------------------------------- */
  .c-mark {
    display: inline-block;
    width: calc(24 * var(--u));
    height: auto;
    aspect-ratio: 1;
    vertical-align: middle;
  }

  /* 比較表のえんかつ列の◎は一般列より少し大きく */
  .p-comparison__table td:last-child .c-mark {
    width: calc(34 * var(--u));
  }

  /* form parts ------------------------------------------------------------ */
  .c-input {
    display: block;
    width: 100%;
    height: calc(62 * var(--u));
    min-height: 4.8rem;
    padding: calc(16 * var(--u)) calc(16 * var(--u));
    border: calc(2 * var(--u)) solid var(--c-slate-light);
    border-radius: var(--radius);
    font-family: var(--ff-input);
    font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: var(--c-navy);
    background: var(--c-bg-blue);
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);

    &::placeholder {
      color: var(--c-navy);
      opacity: 0.4;
    }

    &:focus {
      outline: none;
      border-color: var(--c-slate);
    }

    .is-error & {
      border-color: #fbd7d7;
      background: #fff0f0;
    }

    .is-valid & {
      padding-right: calc(16 * var(--u) + 3.6rem);
      border-color: var(--c-green);
    }
  }

  .c-input--textarea {
    height: calc(192 * var(--u));
    min-height: 16rem;
    resize: vertical;
  }

  .c-radio,
  .c-checkbox {
    display: flex;
    align-items: flex-start;
    gap: calc(16 * var(--u));
    width: fit-content;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: opacity var(--dur) var(--ease);

    /* タップ操作の端末ではホバーの透過が残るので、マウス操作のときだけ */
    @media (hover: hover) {
      &:hover { opacity: 0.4; }
    }

    input {
      flex-shrink: 0;
      width: 2.4rem;
      height: 2.4rem;
      margin-top: 0.1rem;
      border: calc(1.5 * var(--u)) solid var(--c-navy);
      background: var(--c-white);
      appearance: none;
      cursor: pointer;
    }

    em { color: var(--c-gold); }
  }

  .c-radio input {
    border-radius: 50%;
    background: radial-gradient(circle, var(--c-slate-light) 0 0.6rem, transparent 0.65rem) var(--c-white);

    &:checked {
      background: radial-gradient(circle, var(--c-navy) 0 0.6rem, transparent 0.65rem) var(--c-white);
    }
  }

  .c-checkbox input {
    border: 0;
    border-radius: 0.2rem;
    background: url("../imgs/icn-privacy-check.svg") center / 100% no-repeat;

    &:checked { background-image: url("../imgs/icn-checkbox-on.svg"); }
  }

  .c-btn-form {
    display: grid;
    place-items: center;
    width: calc(300 * var(--u));
    min-width: 16rem;
    height: calc(72 * var(--u));
    min-height: 5.6rem;
    border-radius: var(--radius);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .c-btn-form--submit {
    color: var(--c-cream);
    background: var(--c-navy);

    @media (hover: hover) {
      &:hover {
        color: var(--c-navy);
        background: var(--c-yellow-light);
      }
    }
  }

  .c-btn-form--reset {
    color: var(--c-slate);
    background: var(--c-slate-light);

    @media (hover: hover) {
      &:hover {
        color: var(--c-white);
        background: var(--c-slate);
      }
    }
  }

  @media (width < 768px) {
    .c-btn-form { width: calc(300 * var(--u)); min-width: 0; }
  }

  /* popup（確認・完了） --------------------------------------------------- */
  .c-popup {
    width: 100%;
    height: 100%;
    padding: calc(80 * var(--u)) calc(200 * var(--u));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: transparent;

    &::backdrop {
      background: rgb(0 30 75 / 0.8);
      backdrop-filter: blur(10px);
    }

    &[open] { display: block; }
  }

  .c-popup__body {
    position: relative;
    display: grid;
    justify-items: center;
    gap: calc(40 * var(--u));
    padding: calc(48 * var(--u)) calc(120 * var(--u));
    border: calc(3 * var(--u)) solid var(--c-slate-light);
    background: var(--c-white);
  }

  .c-popup__close {
    position: absolute;
    top: calc(24 * var(--u));
    right: calc(24 * var(--u));
    width: calc(48 * var(--u));
    min-width: 4rem;
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--c-white);
    background: var(--c-navy-2);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);

    svg {
      position: absolute;
      inset: 25%;
      width: 50%;
      height: 50%;
    }

    @media (hover: hover) {
      &:hover {
        color: var(--c-navy-2);
        background: var(--c-white);
        box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--c-navy-2);
      }
    }
  }

  .c-popup__lead {
    font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    line-height: 1.8;
    text-align: center;
  }

  .c-popup__list {
    justify-self: stretch;
    margin-top: calc(-8 * var(--u));
  }

  .c-popup__row {
    display: grid;
    grid-template-columns: calc(280 * var(--u)) 1fr;
    gap: calc(16 * var(--u)) calc(40 * var(--u));
    padding-block: calc(16 * var(--u));
    background: var(--dash-slate) left bottom / calc(6 * var(--u)) calc(1.5 * var(--u)) repeat-x;
    font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: 0.05em;

    &:first-child { padding-top: 0; }

    dt { font-weight: 700; }
    dd {
      font-family: var(--ff-input);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
  }

  /* 姓・名は区切り線なしで続ける */
  .c-popup__row--joined {
    padding-bottom: 0;
    background: none;
  }

  .c-popup__error {
    justify-self: stretch;
    padding: calc(12 * var(--u)) calc(16 * var(--u));
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--c-red);
    background: #fff0f0;
  }

  .c-popup__btns {
    margin-top: calc(-16 * var(--u));
  }

  .c-popup--thanks .c-popup__body {
    gap: calc(24 * var(--u));
    padding: calc(64 * var(--u)) calc(120 * var(--u));
  }

  .c-popup__thanks-img {
    width: calc(310 * var(--u));
  }

  .c-popup__thanks-title {
    font-family: var(--ff-serif);
    font-size: clamp(2.2rem, calc(26 * var(--u)), 2.6rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;
  }

  .c-popup__thanks-text {
    justify-self: stretch;
    padding: calc(24 * var(--u));
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: center;
    background: var(--c-bg-blue);
  }

  .c-popup__back {
    margin-top: calc(16 * var(--u));
    padding-bottom: calc(2 * var(--u));
    border-bottom: calc(2 * var(--u)) solid currentColor;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: var(--c-slate);
    transition: color var(--dur) var(--ease);

    @media (hover: hover) { &:hover { color: var(--c-navy); } }
  }

  @media (width < 768px) {
    .c-popup {
      padding: calc(56 * var(--u)) calc(16 * var(--u));
    }

    .c-popup__body {
      gap: calc(24 * var(--u));
      padding: calc(64 * var(--u)) calc(24 * var(--u)) calc(32 * var(--u));
    }

    .c-popup__close {
      top: calc(16 * var(--u));
      right: calc(16 * var(--u));
      width: calc(40 * var(--u));
    }

    .c-popup__row {
      grid-template-columns: 1fr;
      gap: calc(8 * var(--u));
    }

    .c-popup__lead {
      font-size: 1.6rem;
      font-weight: 700;
    }

    .c-popup__btns { margin-top: 0; }

    .c-popup--thanks .c-popup__body {
      padding: calc(64 * var(--u)) calc(24 * var(--u)) calc(48 * var(--u));
    }

    .c-popup__thanks-title { font-size: clamp(2rem, calc(22 * var(--u)), 2.2rem); }

    .c-popup__thanks-img { width: calc(240 * var(--u)); }

    .c-popup__thanks-text { padding: calc(24 * var(--u)) calc(16 * var(--u)); }
  }
}

/* -------------------------------------------------------------------------
   popup（漫画の拡大表示）
   ------------------------------------------------------------------------- */
@layer components {
  .c-popup--zoom {
    display: none;
    padding: calc(40 * var(--u));

    &[open] {
      display: grid;
      place-items: center;
    }
  }

  .c-popup__zoom-body {
    position: relative;
    width: min(100%, 1504px, (100dvh - 80 * var(--u)) * 1504 / 1012);
  }

  .c-popup__zoom-img {
    width: 100%;
    background: var(--c-white);
  }

  .c-popup--zoom .c-popup__close {
    top: calc(-20 * var(--u));
    right: calc(-20 * var(--u));
    z-index: 1;
  }

  /* SP: 2倍の大きさで横スクロール（1コマ目のある右上から表示） */
  @media (width < 768px) {
    .c-popup--zoom {
      padding: calc(64 * var(--u)) 0 calc(24 * var(--u));
    }

    .c-popup__zoom-body { width: 100%; }

    .c-popup__zoom-scroll {
      overflow-x: auto;
      overscroll-behavior-x: contain;
    }

    .c-popup__zoom-img {
      width: 200%;
      max-width: none;
    }

    .c-popup--zoom .c-popup__close {
      top: calc(-52 * var(--u));
      right: calc(16 * var(--u));
    }

    .c-popup__zoom-note {
      margin-top: calc(12 * var(--u));
      font-size: 1.3rem;
      text-align: center;
      color: var(--c-white);
    }
  }
}

/* -------------------------------------------------------------------------
   project（ページ固有。カンプのセクション順）
   戦略: 全セクション「流動＋1600pxで拡大停止」（2.3 C）
   ------------------------------------------------------------------------- */
@layer components {
  /* 01 hero --------------------------------------------------------------- */
  .p-hero {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    /* 広い画面ではヘッダーとの間を広げる（1440px:+0 → 1920px以上:+40px） */
    --hero-extra: clamp(0px, (100vw - 1440px) / 12, 40px);
    min-height: calc(810 * var(--u) + var(--hero-extra));
    padding: calc(155 * var(--u) + var(--hero-extra)) calc(24 * var(--u)) calc(124 * var(--u));
    background: linear-gradient(var(--c-bg-blue), var(--c-white));

    /* 中央の白いぼかし（Figma: 640px円・blur80） */
    &::before {
      position: absolute;
      top: calc(103 * var(--u));
      left: 50%;
      z-index: -1;
      width: calc(800 * var(--u));
      aspect-ratio: 1;
      content: "";
      background: radial-gradient(closest-side, var(--c-white) 55%, rgb(255 255 255 / 0));
      translate: -50% calc(-80 * var(--u));
    }
  }

  .p-hero__emblem {
    position: absolute;
    top: calc(128 * var(--u));
    left: calc(50% - 640 * var(--u));   /* Figma x80 */
    --navy-top: calc(114 * var(--u));   /* 紺の始まる位置（円の内側上端から） */
    width: calc(200 * var(--u));
    aspect-ratio: 1;
    border: calc(2 * var(--u)) solid var(--c-navy);
    border-radius: 50%;
    font-family: var(--ff-serif);
    font-weight: 900;
    text-align: center;
    background: var(--c-bg);

    /* 下側の紺（内側の円を268×161の矩形で切り抜いた形） */
    &::before {
      position: absolute;
      inset: calc(2 * var(--u));
      z-index: 0;
      content: "";
      border-radius: 50%;
      background: linear-gradient(transparent calc(var(--navy-top) - 2 * var(--u)), var(--c-navy) 0);
    }
  }

  /* 上の白い部分の上下中央に置く（文字サイズが止まっても円の中で偏らない） */
  .p-hero__emblem-lead {
    position: absolute;
    inset: 0 0 auto;
    display: grid;
    place-content: center;
    height: var(--navy-top);
    padding-top: calc(4 * var(--u));
    font-size: clamp(1.2rem, calc(19 * var(--u)), 1.9rem);
    line-height: 1.3;
    letter-spacing: 0.05em;
    color: var(--c-navy);

    em {
      font-size: clamp(1.4rem, calc(24 * var(--u)), 2.4rem);
      color: var(--c-gold);
    }
  }

  /* 紺の半円（::before の紺の範囲）の上下中央から、見た目の調整で4px上げる */
  .p-hero__emblem-must {
    position: absolute;
    inset: calc(var(--navy-top) - 4 * var(--u)) 0 calc(6 * var(--u));
    display: grid;
    place-items: center;
    font-size: clamp(2rem, calc(36 * var(--u)), 3.6rem);
    line-height: 1;
    letter-spacing: 0.1em;
    color: var(--c-cream);
  }

  .p-hero__team {
    position: absolute;
    top: calc(144 * var(--u));
    left: calc(50% + 424 * var(--u));   /* Figma x1144 */
    width: calc(240 * var(--u));
  }

  .p-hero__body {
    display: grid;
    justify-items: center;
    gap: calc(32 * var(--u));
    text-align: center;
  }

  .p-hero__title {
    font-family: var(--ff-serif);
    font-size: clamp(2.4rem, calc(40 * var(--u)), 4rem);
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: 0.05em;
  }

  .p-hero__title-em {
    color: var(--c-gold);
    text-emphasis: filled dot var(--c-gold);
    -webkit-text-emphasis: filled dot var(--c-gold);
    text-emphasis-position: over right;
    -webkit-text-emphasis-position: over;
  }

  .p-hero__lead {
    font-family: var(--ff-serif);
    font-size: clamp(1.5rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 700;
    line-height: 1.6;

    em {
      font-weight: 900;
      color: var(--c-gold);
    }
  }

  .p-hero__points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(8 * var(--u));
    max-width: calc(858 * var(--u));
    margin-top: calc(8 * var(--u));
  }

  .p-hero__point {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    padding: calc(8 * var(--u)) calc(24 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u));
    border: 1px solid var(--c-slate-light);
    border-radius: 100vmax;
    font-size: clamp(1.5rem, calc(18 * var(--u)), 1.8rem);
    line-height: 1.5;
    background: var(--c-white);

    &::before {
      flex-shrink: 0;
      width: calc(20 * var(--u));
      aspect-ratio: 1;
      content: "";
      background: url("../imgs/icn-check-circle.svg") center / contain no-repeat;
    }
  }

  .p-hero__meeting {
    position: absolute;
    bottom: calc(24 * var(--u));   /* Figma y613（下端から24） */
    left: calc(50% - 668 * var(--u));   /* Figma x52 */
    width: calc(161 * var(--u));
  }

  .p-hero__plant {
    position: absolute;
    bottom: 0;
    left: calc(50% + 515 * var(--u));   /* Figma x1235 */
    width: calc(84 * var(--u));
  }

  @media (width < 768px) {
    .p-hero {
      --hero-extra: 0px;
      min-height: 0;
      padding: calc(254 * var(--u)) calc(24 * var(--u)) 0;

      &::before {
        top: calc(202 * var(--u));
        left: calc(-125 * var(--u));
        width: calc(640 * var(--u));
        translate: 0 calc(-64 * var(--u));
      }
    }

    .p-hero__emblem {
      top: calc(80 * var(--u));
      left: calc(16 * var(--u));
      --navy-top: calc(86 * var(--u));
      width: calc(150 * var(--u));
    }

    /* エンブレムの文字は画面幅で拡縮し、550px時のサイズで止める（上限 = Figma値 × 550/390） */
    .p-hero__emblem-lead {
      font-size: clamp(1.2rem, calc(16 * var(--u)), 2.26rem);
      line-height: 1.3;

      em { font-size: clamp(1.2rem, calc(18 * var(--u)), 2.54rem); }
    }

    .p-hero__emblem-must {
      font-size: clamp(1.8rem, calc(24 * var(--u)), 3.38rem);
    }

    .p-hero__team {
      top: calc(93 * var(--u));
      left: calc(222 * var(--u));
      width: calc(144 * var(--u));
    }

    .p-hero__body { gap: calc(24 * var(--u)); }

    /* 〜390: 28pxまで流動 / 390〜550: 28px / 550〜767: 28px→36pxへ拡大 */
    .p-hero__title {
      font-size: max(
        clamp(2.4rem, calc(28 * var(--u)), 2.8rem),
        min(2.8rem + (100vw - 550px) * 8 / 217, 3.6rem)
      );
    }

    .p-hero__lead {
      font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
      line-height: 1.8;
    }

    .p-hero__points {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      max-width: none;
      width: 100%;
      margin-top: 0;
    }

    .p-hero__point {
      flex-direction: column;
      justify-content: center;
      gap: calc(8 * var(--u));
      min-height: calc(139 * var(--u));
      padding: calc(12 * var(--u)) calc(16 * var(--u));
      border-radius: calc(10 * var(--u));
      font-size: clamp(1.5rem, 1.5rem + (100vw - 550px) * 4 / 217, 1.9rem);   /* 〜550: 15px / 767: 19px */
    }

    .p-hero__illust-sp {
      width: 100%;
      margin-top: calc(32 * var(--u));
    }
  }

  /* 02 worries ------------------------------------------------------------ */
  .p-worries {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    padding: calc(120 * var(--u)) calc(16 * var(--u)) calc(80 * var(--u));
    background: var(--c-navy-2);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80 * var(--u)), 50% 100%, 0 calc(100% - 80 * var(--u)));
  }

  .p-worries__title {
    font-size: clamp(2.6rem, calc(32 * var(--u)), 3.2rem);
  }

  /* 狭いPC幅では縮みすぎないよう、イラスト一式は0.8倍（1152px時の大きさ）で縮小を止める（2.3） */
  .p-worries__scene {
    --u: clamp(0.8px, 100vw / 1440, 1600px / 1440);
    position: relative;
    width: calc(800 * var(--u));
    height: calc(429 * var(--u));
    margin-top: calc(48 * var(--u));
  }

  .p-worries__cloud {
    position: absolute;
    display: grid;
    place-items: center;
    width: calc(200 * var(--u));
    aspect-ratio: 200 / 141;
    font-size: clamp(1.2rem, calc(18 * var(--u)), 1.8rem);
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-align: center;
    color: var(--c-navy-2);
    background: url("../imgs/worries-cloud.svg") center / contain no-repeat;
  }

  .p-worries__cloud--1 { top: calc(32 * var(--u)); left: calc(84 * var(--u)); }
  .p-worries__cloud--2 { top: 0; left: calc(300 * var(--u)); }
  .p-worries__cloud--3 { top: calc(32 * var(--u)); left: calc(516 * var(--u)); }

  .p-worries__pill {
    position: absolute;
    padding: calc(5 * var(--u)) calc(12 * var(--u));
    border-radius: 100vmax;
    font-size: clamp(1.2rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: var(--c-navy-2);
    background: var(--c-bg-blue);
  }

  .p-worries__pill--1 { top: calc(197 * var(--u)); left: 0; }
  .p-worries__pill--2 { top: calc(241 * var(--u)); left: calc(40 * var(--u)); }
  .p-worries__pill--3 { top: calc(197 * var(--u)); right: 0; }
  .p-worries__pill--4 { top: calc(242 * var(--u)); right: calc(16 * var(--u)); }

  .p-worries__foot {
    position: absolute;
    top: calc(181 * var(--u));
    width: calc(54 * var(--u));
  }

  .p-worries__foot--left { left: calc(198 * var(--u)); }
  .p-worries__foot--right { left: calc(548 * var(--u)); }

  .p-worries__users {
    position: absolute;
    bottom: 0;
    left: calc(224 * var(--u));
    width: calc(352 * var(--u));
  }

  .p-worries__caption {
    margin-top: calc(56 * var(--u));
    font-family: var(--ff-serif);
    font-size: clamp(1.8rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;
    color: var(--c-white);
  }

  .p-worries__arrow {
    width: calc(75 * var(--u));
    margin-top: calc(56 * var(--u));
  }

  @media (width < 768px) {
    .p-worries {
      padding: calc(80 * var(--u)) calc(16 * var(--u)) calc(64 * var(--u));
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42 * var(--u)), 50% 100%, 0 calc(100% - 42 * var(--u)));
    }

    .p-worries__title {
      font-size: clamp(2.2rem, calc(26 * var(--u)), 2.6rem);
    }

    .p-worries__scene {
      --u: calc(100vw / 390);
      width: calc(342 * var(--u));
      height: calc(507 * var(--u));
      margin-top: calc(40 * var(--u));
    }

    /* SPの文字は画面幅で拡縮し、600px時のサイズで止める */
    .p-worries__cloud {
      width: calc(160 * var(--u));
      font-size: clamp(1.2rem, calc(16 * var(--u)), 2.46rem);
    }

    .p-worries__cloud--1 { top: calc(101 * var(--u)); left: 0; }
    .p-worries__cloud--2 { top: 0; left: calc(91 * var(--u)); }
    .p-worries__cloud--3 { top: calc(101 * var(--u)); left: calc(182 * var(--u)); }

    /* SPの下4つは2段に並べて各段を中央寄せ（文字サイズが止まっても間隔が開かない） */
    .p-worries__pills {
      position: absolute;
      top: calc(230 * var(--u));
      inset-inline: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: calc(4.5 * var(--u)) calc(8 * var(--u));

      /* 2つ目のあとで改行する */
      &::after {
        flex-basis: 100%;
        order: 1;
        content: "";
      }
    }

    .p-worries__pill {
      position: static;
      font-size: clamp(1.2rem, calc(15 * var(--u)), 2.3rem);
    }

    .p-worries__pill--3,
    .p-worries__pill--4 { order: 2; }

    .p-worries__foot {
      top: calc(313 * var(--u));
      width: calc(38 * var(--u));
    }

    .p-worries__foot--left { left: calc(32 * var(--u)); }
    .p-worries__foot--right { left: calc(272 * var(--u)); }

    .p-worries__users {
      left: calc(48 * var(--u));
      width: calc(246 * var(--u));
    }

    .p-worries__caption {
      margin-top: calc(48 * var(--u));
      font-size: clamp(1.8rem, calc(20 * var(--u)), 2rem);
    }

    .p-worries__arrow { margin-top: calc(48 * var(--u)); }
  }

  /* 03 solution ----------------------------------------------------------- */
  .p-solution {
    position: relative;
    isolation: isolate;
    margin-top: calc(-80 * var(--u));
    padding: calc(160 * var(--u)) 0 calc(120 * var(--u));
    background: linear-gradient(#f9f6f0, var(--c-beige-2));

    /* 左上の木のロゴ（装飾） */
    &::before {
      position: absolute;
      top: calc(-26 * var(--u));
      left: calc(50% - 736 * var(--u));   /* Figma x-16 */
      z-index: -1;
      width: calc(400 * var(--u));
      aspect-ratio: 400 / 414;
      content: "";
      background: url("../imgs/bg-tree.svg") center / contain no-repeat;
    }
  }

  .p-solution__head {
    display: grid;
    justify-items: center;
    gap: calc(24 * var(--u));
    padding-inline: calc(16 * var(--u));
    text-align: center;
  }

  .p-solution__label {
    padding: calc(4 * var(--u)) calc(24 * var(--u));
    border-radius: 100vmax;
    font-family: var(--ff-serif);
    font-size: clamp(1.8rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    background: var(--c-cream);
  }

  .p-solution__title {
    font-family: var(--ff-serif);
    font-size: clamp(2.4rem, calc(30 * var(--u)), 3rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;

    em { color: var(--c-gold); }
  }

  .p-solution__box {
    position: relative;
    display: grid;
    width: calc(1120 * var(--u));
    margin: calc(112 * var(--u)) auto 0;
    padding: 0 calc(16 * var(--u)) calc(16 * var(--u));
    border: calc(3 * var(--u)) solid var(--c-navy-2);
    background: #fffefd;
    box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) rgb(70 69 67 / 0.1);
  }

  .p-solution__ribbon {
    display: flex;
    justify-content: center;
    gap: calc(16 * var(--u));
    width: calc(480 * var(--u));
    height: calc(96 * var(--u));
    margin: calc(-51 * var(--u)) auto 0;
    padding-top: calc(6 * var(--u));
    font-family: var(--ff-serif);
    /* リボン（画像）と同じ比率で拡縮する。装飾文字なので下限は小さめ */
    font-size: clamp(1.2rem, calc(30 * var(--u)), 3.33rem);
    font-weight: 900;
    line-height: 1.5;
    color: var(--c-cream);
    background: url("../imgs/solution-ribbon-pc.svg") center / contain no-repeat;

    /* リボンのカーブに沿わせる */
    span:nth-child(1), span:nth-child(6) { translate: 0 calc(4 * var(--u)); }
    span:nth-child(2), span:nth-child(5) { translate: 0 calc(1 * var(--u)); }
  }

  .p-solution__band {
    margin-top: calc(16 * var(--u));
  }

  .p-solution__gain {
    display: flex;
    gap: calc(40 * var(--u));
    margin-top: calc(38 * var(--u));
    padding: 0 calc(66 * var(--u)) 0 calc(40 * var(--u));
  }

  .p-solution__gain-img {
    flex-shrink: 0;
    align-self: flex-start;
    width: calc(320 * var(--u));
  }

  .p-solution__gain-body {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: calc(24 * var(--u));
    flex: 1;
  }

  .p-solution__gain-title {
    padding-bottom: calc(4 * var(--u));
    border-bottom: calc(3 * var(--u)) solid var(--c-navy);
    font-family: var(--ff-serif);
    font-size: clamp(1.6rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;

    em { color: var(--c-gold); }
  }

  .p-solution__gain-body .c-check-list {
    justify-self: stretch;
  }

  .p-solution .c-cta {
    margin-top: calc(38 * var(--u));
  }

  @media (width < 768px) {
    .p-solution {
      margin-top: calc(-42 * var(--u));
      padding: calc(106 * var(--u)) calc(16 * var(--u)) calc(80 * var(--u));
      background: #f9f6f0;

      &::before {
        top: calc(-16 * var(--u));
        left: calc(-40 * var(--u));
        width: calc(200 * var(--u));
      }
    }

    .p-solution__head { padding-inline: calc(8 * var(--u)); }

    .p-solution__label {
      font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    }

    .p-solution__title {
      font-size: clamp(2.2rem, calc(26 * var(--u)), 2.6rem);
    }

    .p-solution__box {
      width: 100%;
      margin-top: calc(112 * var(--u));
      padding: 0 calc(16 * var(--u)) calc(16 * var(--u));
    }

    .p-solution__ribbon {
      gap: calc(15 * var(--u));
      width: calc(375 * var(--u));
      height: calc(80 * var(--u));
      margin: calc(-51 * var(--u)) calc(-28 * var(--u)) 0;
      font-size: clamp(1.2rem, calc(24 * var(--u)), 4.8rem);
      background-image: url("../imgs/solution-ribbon-sp.svg");
    }

    .p-solution__gain {
      flex-direction: column;
      gap: calc(32 * var(--u));
      padding: 0;
    }

    .p-solution__gain-img { width: 100%; }

    .p-solution__gain-title {
      font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    }
  }

  /* 04 about -------------------------------------------------------------- */
  .p-about {
    padding: calc(120 * var(--u)) 0;
    background: var(--c-bg-blue-2);
  }

  .p-about__explain {
    display: flex;
    align-items: center;
    gap: calc(48 * var(--u));
    width: calc(1040 * var(--u));
    margin: calc(40 * var(--u)) auto 0;
    padding: calc(32 * var(--u)) calc(40 * var(--u)) calc(32 * var(--u)) calc(48 * var(--u));
    border: calc(2 * var(--u)) solid var(--c-border);
    background: var(--c-bg);
  }

  .p-about__hand {
    flex-shrink: 0;
    width: calc(120 * var(--u));
  }

  .p-about__explain-text {
    font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    line-height: 1.8;
  }

  .p-about__structure {
    width: calc(1200 * var(--u));
    margin: calc(40 * var(--u)) auto 0;
  }

  .p-about__structure-title {
    padding: calc(16 * var(--u)) calc(10 * var(--u));
    font-family: var(--ff-serif);
    font-size: clamp(2.8rem, calc(36 * var(--u)), 3.6rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;
    color: var(--c-white);
    background: var(--c-navy);

    em { color: var(--c-cream); }
  }

  .p-about__columns {
    position: relative;
    display: flex;
    gap: calc(24 * var(--u));
    padding: calc(40 * var(--u)) calc(40 * var(--u)) 0;
    border: calc(3 * var(--u)) solid var(--c-navy);
    background: var(--c-white);
    box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) rgb(93 89 85 / 0.5);
  }

  .p-about__col {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    align-content: start;
    flex: 1;
    padding: calc(24 * var(--u)) calc(24 * var(--u)) 0;

    /* 背景はイラストの下端より43px上で終わる */
    &::before {
      position: absolute;
      inset: 0 0 calc(43 * var(--u));
      z-index: -1;
      content: "";
      border-radius: calc(10 * var(--u));
      background: var(--c-bg-blue);
    }
  }

  .p-about__col--team::before { background: var(--c-beige); }

  .p-about__card {
    display: grid;
    justify-items: center;
    gap: calc(16 * var(--u));
    justify-self: stretch;
    padding: calc(16 * var(--u)) calc(32 * var(--u)) calc(24 * var(--u));
    border-radius: var(--radius);
    background: var(--c-white);

    .c-check-list { justify-self: stretch; }
  }

  .p-about__card-title {
    font-family: var(--ff-serif);
    font-size: clamp(1.6rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;

    .p-about__col--you & em { color: var(--c-slate); }
    .p-about__col--team & em { color: var(--c-gold); }
  }

  /* ↓矢印＋［ ］で挟んだ結果 */
  .p-about__result {
    position: relative;
    margin-top: calc(56 * var(--u));
    padding: calc(8 * var(--u)) calc(34 * var(--u));
    font-family: var(--ff-serif);
    font-size: clamp(1.6rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;
    --c-bracket: var(--c-slate);

    .p-about__col--team & { --c-bracket: var(--c-gold-light); }

    /* 矢印 */
    &::before {
      position: absolute;
      bottom: 100%;
      left: 50%;
      width: calc(32 * var(--u));
      height: calc(48 * var(--u));
      content: "";
      background: url("../imgs/about-arrow-blue.svg") center / contain no-repeat;
      translate: -50% 0;

      .p-about__col--team & { background-image: url("../imgs/about-arrow-gold.svg"); }
    }

    /* ［ ］ */
    &::after {
      position: absolute;
      inset: calc(8 * var(--u)) 0;
      content: "";
      border: calc(3 * var(--u)) solid var(--c-bracket);
      mask: linear-gradient(to right, #000 calc(10 * var(--u)), transparent 0 calc(100% - 10 * var(--u)), #000 0);
    }
  }

  .p-about__figure {
    position: relative;
    width: calc(444 * var(--u));
    height: calc(263 * var(--u));
    margin-top: calc(16 * var(--u));
    overflow: hidden;

    > img,
    picture {
      position: absolute;
    }
  }

  .p-about__figure--you > img {
    top: calc(11 * var(--u));
    left: calc(24 * var(--u));
    width: calc(380 * var(--u));
  }

  .p-about__figure--team picture {
    top: 0;
    left: calc(22 * var(--u));
    width: calc(419 * var(--u));

    img { width: 100%; }   /* <source> の width 属性で固定幅にならないように */
  }

  .p-about__sparkle {
    width: calc(11 * var(--u));
  }

  .p-about__sparkle--1 { top: calc(43 * var(--u)); left: calc(163 * var(--u)); }
  .p-about__sparkle--2 { top: calc(63 * var(--u)); left: calc(271 * var(--u)); }

  .p-about__label {
    position: absolute;
    padding: calc(5 * var(--u)) calc(10 * var(--u));
    border: calc(1.5 * var(--u)) solid var(--c-navy);
    font-size: clamp(1.3rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.15em;
    white-space: nowrap;
    color: #35407a;
    background: var(--c-white);
  }

  .p-about__label--you { top: calc(48 * var(--u)); left: calc(324 * var(--u)); border-color: #35407a; }
  .p-about__label--tax { top: calc(176 * var(--u)); left: calc(49 * var(--u)); }
  .p-about__label--judicial { top: calc(183 * var(--u)); left: calc(168 * var(--u)); }
  .p-about__label--estate { top: calc(171 * var(--u)); left: calc(277 * var(--u)); }

  /* 中央の「サポート」矢印 */
  .p-about__support {
    position: absolute;
    top: calc(512 * var(--u));
    left: calc(487 * var(--u));
    z-index: 1;
    display: grid;
    place-items: center;
    width: calc(168 * var(--u));
    height: calc(75 * var(--u));
    padding-left: calc(18 * var(--u));
    font-size: clamp(1.4rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.15em;
    color: var(--c-gold);
    background: url("../imgs/about-support-pc.svg") center / contain no-repeat;
  }

  @media (width < 768px) {
    .p-about {
      padding: calc(80 * var(--u)) calc(16 * var(--u));
    }

    .p-about__explain {
      flex-direction: column;
      gap: calc(24 * var(--u));
      width: calc(326 * var(--u));
      padding: calc(24 * var(--u));
      background: var(--c-white);
    }

    .p-about__explain-text {
      font-size: var(--fs-body);
      line-height: 1.6;
    }

    .p-about__structure { width: 100%; }

    .p-about__structure-title {
      padding: calc(16 * var(--u));
      font-size: clamp(2.2rem, calc(26 * var(--u)), 2.6rem);
    }

    .p-about__columns {
      flex-direction: column;
      gap: 0;
      padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u));
    }

    .p-about__col {
      padding: calc(16 * var(--u)) calc(16 * var(--u)) 0;

      &::before { inset: 0; }
    }

    .p-about__col--team { margin-top: calc(-16 * var(--u)); }

    .p-about__card {
      padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u));
    }

    .p-about__card-title {
      font-size: clamp(2rem, calc(22 * var(--u)), 2.2rem);
    }

    .p-about__col--team .p-about__card-title {
      font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    }

    .p-about__result {
      padding: calc(8 * var(--u)) calc(26 * var(--u));
      font-size: clamp(1.8rem, calc(20 * var(--u)), 2rem);

      .p-about__col--team & {
        padding-inline: calc(34 * var(--u));
        font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
      }
    }

    .p-about__figure--you {
      width: calc(263 * var(--u));
      height: calc(172 * var(--u));

      > img {
        top: calc(8 * var(--u));
        left: calc(-2 * var(--u));
        width: calc(266 * var(--u));
      }
    }

    .p-about__figure--team {
      width: calc(290 * var(--u));
      height: calc(184 * var(--u));

      picture {
        left: calc(11 * var(--u));
        width: calc(278 * var(--u));
      }
    }

    .p-about__sparkle { display: none; }

    .p-about__label {
      padding: calc(2 * var(--u)) calc(6 * var(--u));
      font-size: clamp(1.2rem, calc(14 * var(--u)), 2.8rem);   /* イラストと一緒に拡縮 */
      letter-spacing: 0.08em;
    }

    .p-about__label--you { top: 0; left: calc(202 * var(--u)); }
    .p-about__label--tax { top: calc(123 * var(--u)); left: calc(34 * var(--u)); }
    .p-about__label--judicial { top: calc(135 * var(--u)); left: calc(108 * var(--u)); }
    .p-about__label--estate { top: calc(101 * var(--u)); left: calc(171 * var(--u)); }

    .p-about__support {
      position: relative;
      inset: auto;
      align-self: center;
      width: calc(160 * var(--u));
      height: calc(94 * var(--u));
      margin-top: calc(-16 * var(--u));
      padding: calc(20 * var(--u)) 0 0;
      background-image: url("../imgs/about-support-sp.svg");
    }
  }

  /* 05 manga -------------------------------------------------------------- */
  .p-manga {
    display: grid;
    justify-items: center;
    padding: calc(120 * var(--u)) calc(16 * var(--u));
    background: var(--c-navy-2);
  }

  .p-manga__title {
    font-size: clamp(3.2rem, calc(40 * var(--u)), 4rem);
  }

  .p-manga__lead {
    margin-top: calc(40 * var(--u));
    font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    line-height: 1.8;
    text-align: center;
    color: var(--c-white);

    strong {
      font-weight: 700;
      color: var(--c-cream);
    }
  }

  .p-manga__list {
    display: grid;
    gap: calc(40 * var(--u));
    width: calc(784 * var(--u));
    margin-top: calc(40 * var(--u));
  }

  .p-manga__item {
    display: grid;
    gap: calc(16 * var(--u));
    padding: calc(16 * var(--u));
    border-radius: calc(10 * var(--u));
    background: var(--c-white);
    box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) #01183a;

    img { width: 100%; }
  }

  .p-manga__item-title {
    padding: calc(2 * var(--u)) calc(10 * var(--u));
    border-radius: var(--radius);
    font-family: var(--ff-serif);
    font-size: clamp(1.8rem, calc(20 * var(--u)), 2rem);
    font-weight: 900;
    line-height: 1.8;
    letter-spacing: 0.1em;
    text-align: center;
    color: var(--c-white);
    background: var(--c-navy-2);
  }

  /* 拡大ボタン（Figmaに無いため、既存パーツに合わせて作成） */
  .p-manga__zoom {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: calc(8 * var(--u));
    margin-top: calc(-10 * var(--u));   /* 画像との間を詰める */
    padding: calc(4 * var(--u)) calc(8 * var(--u));
    font-size: clamp(1.3rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--c-navy-2);
    transition: opacity var(--dur) var(--ease);

    @media (hover: hover) { &:hover { opacity: 0.6; } }
  }

  .p-manga__zoom-icon {
    width: calc(20 * var(--u));
    min-width: 1.6rem;
    height: auto;
    aspect-ratio: 1;
  }

  @media (width < 768px) {
    .p-manga {
      padding-block: calc(80 * var(--u));
    }

    .p-manga__zoom { display: none; }   /* SPは拡大ボタンなし */

    .p-manga__title {
      padding-inline: calc(8 * var(--u));
      font-size: clamp(2.2rem, calc(26 * var(--u)), 2.6rem);
    }

    .p-manga__lead {
      padding-inline: calc(8 * var(--u));
      font-size: var(--fs-body);
      line-height: 1.8;
    }

    .p-manga__list {
      gap: calc(24 * var(--u));
      width: 100%;
    }

    .p-manga__item {
      gap: calc(8 * var(--u));
      padding: calc(8 * var(--u)) 0 calc(4 * var(--u));
    }

    .p-manga__item-title {
      margin-inline: calc(8 * var(--u));
      font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    }
  }

  /* 06 message ------------------------------------------------------------ */
  .p-message {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    padding: calc(120 * var(--u)) 0;
    background: var(--c-bg-blue);

    /* 街並み（装飾） */
    &::before {
      position: absolute;
      bottom: 0;
      left: 50%;
      z-index: -1;
      width: calc(1920 * var(--u));
      aspect-ratio: 1920 / 544;
      content: "";
      background: url("../imgs/message-town.webp") center bottom / contain no-repeat;
      translate: -50% 0;
    }
  }

  .p-message__paper {
    position: relative;
    display: grid;
    justify-items: center;
    width: calc(1040 * var(--u));
    margin-inline: auto;
    padding: calc(80 * var(--u)) calc(160 * var(--u)) calc(96 * var(--u));
    background:
      linear-gradient(to right, #eee calc(1.5 * var(--u)), transparent 0) calc(36 * var(--u)) 0 / calc(88 * var(--u)) 100%,
      linear-gradient(to bottom, #eee calc(1.5 * var(--u)), transparent 0) 0 calc(-44 * var(--u)) / 100% calc(88 * var(--u)),
      var(--c-white);
  }

  .p-message__clip {
    position: absolute;
    top: calc(-56 * var(--u));
    right: calc(56 * var(--u));
    width: calc(96 * var(--u));
  }

  .p-message__title {
    display: grid;
    justify-items: center;
    gap: calc(8 * var(--u));
    font-family: var(--ff-serif);
    font-size: clamp(2.2rem, calc(26 * var(--u)), 2.6rem);
    font-weight: 900;
    line-height: 1.5;
  }

  .p-message__title-sub { letter-spacing: 0.05em; }

  .p-message__title-main {
    padding: calc(4 * var(--u)) calc(16 * var(--u));
    background: var(--c-cream);
  }

  .p-message__body {
    display: grid;
    gap: calc(24 * var(--u));
    margin-top: calc(40 * var(--u));
    font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    line-height: 1.8;
    text-align: center;

    strong {
      font-weight: 700;
      color: var(--c-gold);
    }
  }

  .p-message__closing {
    margin-top: calc(56 * var(--u));
    font-family: var(--ff-serif);
    font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.05em;
    text-align: center;

    em {
      font-weight: 900;
      color: var(--c-gold);
    }
  }

  .p-message__pen {
    position: absolute;
    top: calc(685 * var(--u));
    left: calc(50% - 600 * var(--u));   /* Figma x120 */
    width: calc(144 * var(--u));
  }

  @media (width < 768px) {
    .p-message {
      padding: calc(80 * var(--u)) calc(16 * var(--u));

      &::before { width: calc(768 * var(--u)); }
    }

    .p-message__paper {
      width: 100%;
      padding: calc(64 * var(--u)) calc(24 * var(--u)) calc(80 * var(--u));
      background-position: calc(18 * var(--u)) 0, 0 calc(-44 * var(--u)), 0 0;
    }

    .p-message__clip {
      top: calc(-40 * var(--u));
      right: calc(24 * var(--u));
      width: calc(67 * var(--u));
    }

    .p-message__title {
      font-size: clamp(2rem, calc(22 * var(--u)), 2.2rem);
    }

    .p-message__title-main {
      display: grid;
      justify-items: center;
      gap: calc(8 * var(--u));
      padding: 0;
      background: none;

      span {
        padding: calc(4 * var(--u)) calc(8 * var(--u));
        background: var(--c-cream);
      }
    }

    .p-message__body {
      gap: calc(16 * var(--u));
      font-size: var(--fs-body);
    }

    .p-message__closing {
      margin-top: calc(32 * var(--u));
      font-size: clamp(2rem, calc(22 * var(--u)), 2.2rem);
    }
  }

  /* 07 comparison --------------------------------------------------------- */
  .p-comparison {
    display: grid;
    justify-items: center;
    padding: calc(120 * var(--u)) calc(16 * var(--u)) 0;
    background: linear-gradient(var(--c-bg-blue), var(--c-white) calc(1245 * var(--u)));
  }

  .p-comparison__lead {
    margin-top: calc(40 * var(--u));
    font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    line-height: 1.8;
    text-align: center;
  }

  .p-comparison__table-wrap {
    width: calc(885 * var(--u));
    margin-top: calc(40 * var(--u));
  }

  .p-comparison__table {
    width: calc(885 * var(--u));
    table-layout: fixed;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;

    col, th, td { vertical-align: middle; }

    thead th { line-height: 1.5; }

    tbody th,
    tbody td {
      height: calc(49 * var(--u));
      padding: calc(12 * var(--u)) calc(10 * var(--u));
    }

    tbody th {
      width: calc(240 * var(--u));
      border: 1px solid var(--c-border);
      background: var(--c-slate-pale);
    }

    tbody td {
      border: 1px solid var(--c-slate-light);
      background: var(--c-white);
      color: var(--c-navy);
    }

    /* えんかつ列の太枠は、セルの上に重ねた疑似要素で描く
       （見出しの紺と幅をそろえ、横のベージュの区切り線より前面に出す） */
    tbody td:last-child {
      position: relative;
      border-color: var(--c-cream);
      border-right: 0;
      color: var(--c-gold);
      background: var(--c-cream-pale);

      &::after {
        position: absolute;
        inset: -1px 0;
        z-index: 1;
        content: "";
        border-inline: calc(5 * var(--u)) solid var(--c-navy-2);
        pointer-events: none;
      }
    }
  }

  .p-comparison__blank { width: calc(240 * var(--u)); }

  /* 見出しの高さは56px。えんかつ列（92px）に揃えた行の下側にだけ色を付ける */
  .p-comparison__col-general {
    width: calc(320 * var(--u));
    height: calc(92 * var(--u));
    padding: calc((36 + 16) * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));   /* 上36pxは透明。色の付いた56pxの中央に文字 */
    color: var(--c-slate);
    background: linear-gradient(transparent calc(36 * var(--u)), var(--c-slate-pale) 0);
  }

  .p-comparison__col-enkatsu {
    width: calc(330 * var(--u));
    height: calc(92 * var(--u));
    padding: calc(16 * var(--u));
    font-size: clamp(1.8rem, calc(20 * var(--u)), 2rem);
    color: var(--c-cream);
    background: var(--c-navy-2);
  }

  .p-comparison__table .p-comparison__goal {
    th,
    td {
      height: calc(86 * var(--u));
      padding: calc(16 * var(--u));
      border: 0;
    }

    th {
      color: var(--c-cream);
      background: var(--c-slate);
    }

    td:nth-child(2) {
      color: var(--c-slate);
      background: var(--c-slate-pale);
    }

    td:last-child {
      &::after {
        inset: -1px 0 0;
        border-bottom: calc(5 * var(--u)) solid var(--c-navy-2);
      }

      font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
      color: var(--c-navy);
      background: var(--c-cream);
    }
  }

  .p-comparison__underline {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .p-comparison__note {
    margin-top: calc(19 * var(--u));
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--c-slate);
  }

  .p-comparison__point {
    display: flex;
    align-items: center;
    gap: calc(48 * var(--u));
    width: calc(800 * var(--u));
    margin-top: calc(64 * var(--u));
    padding: calc(32 * var(--u)) calc(40 * var(--u)) calc(32 * var(--u)) calc(48 * var(--u));
    border: calc(3 * var(--u)) solid var(--c-slate);
    border-radius: calc(10 * var(--u));
    font-family: var(--ff-serif);
    font-size: clamp(1.8rem, calc(20 * var(--u)), 2rem);
    font-weight: 900;
    line-height: 1.8;
    background: #fffefd;

    em { color: var(--c-gold); }
  }

  .p-comparison__bulb {
    flex-shrink: 0;
    width: calc(53 * var(--u));
  }

  @media (width < 768px) {
    .p-comparison {
      padding: calc(80 * var(--u)) calc(16 * var(--u)) 0;
      background-image: linear-gradient(var(--c-bg-blue), var(--c-white) calc(2080 * var(--u)));
    }

    .p-comparison__lead {
      padding-inline: calc(8 * var(--u));
      font-size: var(--fs-body);
    }

    .p-comparison__table-wrap {
      width: 100%;
      padding-inline: calc(8 * var(--u));
    }

    /* SP: 項目名を行見出しにした2列 */
    .p-comparison__table {
      display: grid;
      width: 100%;

      thead, tbody { display: contents; }

      tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      tbody th {
        grid-column: 1 / -1;
        width: auto;
        height: auto;
        padding: calc(8 * var(--u)) calc(10 * var(--u));
      }

      /* ◎△は大きさが違っても上下中央にそろえる */
      tbody td {
        display: grid;
        place-items: center;
        height: calc(56 * var(--u));
        padding: 0 calc(10 * var(--u));
        border: 0;
      }

      tbody td:last-child {
        border: 0;

        &::after { display: none; }
      }

      thead tr { align-items: end; }
    }

    .p-comparison__blank { display: none; }

    .p-comparison__col-general {
      width: auto;
      height: calc(56 * var(--u));
      padding: calc(16 * var(--u));
      color: var(--c-white);
      background: var(--c-slate);
      align-content: center;
    }

    .p-comparison__col-enkatsu {
      width: auto;
      height: auto;
      min-height: calc(113 * var(--u));
      align-content: center;
      font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    }

    .p-comparison__table .p-comparison__goal {
      th { height: auto; padding: calc(8 * var(--u)); }

      td,
      td:last-child {
        height: auto;
        min-height: calc(104 * var(--u));
        padding: calc(16 * var(--u)) calc(24 * var(--u));
        border: 0;

        &::after { display: none; }   /* PCの太枠を出さない */
        font-size: var(--fs-body);
        display: grid;
        align-content: center;
      }
    }

    .p-comparison__note { margin-top: calc(16 * var(--u)); }

    .p-comparison__point {
      flex-direction: column;
      gap: calc(24 * var(--u));
      width: calc(310 * var(--u));
      margin-top: calc(40 * var(--u));
      padding: calc(24 * var(--u));
      text-align: center;
      line-height: 1.6;
    }
  }

  /* 08 support ------------------------------------------------------------ */
  .p-support {
    padding: calc(120 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u));
    background: var(--c-white);
  }

  .p-support__inner {
    position: relative;
    max-width: calc(1360 * var(--u));
    margin-inline: auto;
    display: grid;
    justify-items: center;
    padding: calc(80 * var(--u)) calc(80 * var(--u)) calc(40 * var(--u));
    color: var(--c-white);
    background: var(--c-slate);
  }

  .p-support__title {
    font-family: var(--ff-serif);
    font-size: clamp(2.8rem, calc(36 * var(--u)), 3.6rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;

    em { color: var(--c-cream); }
  }

  .p-support__lead {
    margin-top: calc(32 * var(--u));
    font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    line-height: 1.8;
    text-align: center;

    strong {
      font-weight: 700;
      color: var(--c-cream);
    }
  }

  .p-support__people {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin-top: calc(-96 * var(--u));
    margin-bottom: calc(-7 * var(--u));
    padding-inline: calc(32 * var(--u));
    pointer-events: none;
  }

  /* 狭いPC幅（1000px以下）では説明文と重なるため非表示。レイアウトは保つ（依頼者指定の例外BP） */
  @media (768px <= width <= 1000px) {
    .p-support__people { visibility: hidden; }
    .c-cta__staff { display: none; }   /* cta2・cta4の女性イラスト（1000px超で表示） */
  }

  .p-support__user { width: calc(113 * var(--u)); }
  .p-support__staff { width: calc(154 * var(--u)); }

  .p-support__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(26 * var(--u)) calc(24 * var(--u));
    width: 100%;
    color: var(--c-navy);
  }

  .p-support__item {
    display: grid;
    align-content: start;
    gap: calc(16 * var(--u));
    padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(40 * var(--u));
    background: var(--c-bg);
    box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) rgb(1 24 58 / 0.5);

    p { line-height: 1.8; }
  }

  .p-support__item-title {
    display: grid;
    gap: calc(8 * var(--u));
    font-family: var(--ff-serif);
    font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--c-gold);
  }

  .p-support__num {
    font-size: 1.6rem;
    color: var(--c-navy);
  }

  .p-support__note {
    justify-self: stretch;
    margin-top: calc(14 * var(--u));
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--c-slate-light);
  }

  @media (width < 768px) {
    .p-support {
      padding: calc(80 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
    }

    .p-support__inner {
      padding: calc(64 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u));
    }

    .p-support__title {
      padding-inline: calc(8 * var(--u));
      font-size: clamp(2.4rem, calc(28 * var(--u)), 2.8rem);
    }

    .p-support__lead {
      padding-inline: calc(8 * var(--u));
      font-size: var(--fs-body);
    }

    .p-support__people {
      margin-top: calc(49 * var(--u));
      margin-bottom: calc(-16 * var(--u));
      padding-inline: calc(16 * var(--u));
    }

    .p-support__user { width: calc(121 * var(--u)); }
    .p-support__staff { width: calc(165 * var(--u)); }

    .p-support__list {
      grid-template-columns: 1fr;
      gap: calc(10 * var(--u));
    }

    .p-support__item {
      padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(32 * var(--u));
    }

    .p-support__item-title {
      font-size: clamp(1.8rem, calc(20 * var(--u)), 2rem);
    }
  }

  /* 09 cta2 / 14 cta4 → .c-cta--wide（components） */
  .c-cta--last {
    padding-bottom: calc(40 * var(--u));
  }

  @media (width < 768px) {
    .c-cta--last { padding-bottom: calc(32 * var(--u)); }
  }

  /* 10 case --------------------------------------------------------------- */
  .p-case {
    position: relative;
    display: grid;
    justify-items: center;
    padding: calc(120 * var(--u)) calc(16 * var(--u)) calc(120 * var(--u));
    background: var(--c-beige-2);
  }

  .p-case__lamp {
    position: absolute;
    top: 0;
    left: calc(50% - 624 * var(--u));   /* Figma x96 */
    width: calc(156 * var(--u));
  }

  .p-case__lead {
    margin-top: calc(40 * var(--u));
    font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    line-height: 1.8;
    text-align: center;
  }

  /* 狭いPC幅では縮みすぎないよう最低720px（画面幅-64pxまで）を確保 */
  .p-case__list {
    display: grid;
    gap: calc(24 * var(--u));
    width: max(calc(1120 * var(--u)), min(100vw - 64px, 720px));
    margin-top: calc(40 * var(--u));
  }

  .p-case__item {
    padding-top: calc(12 * var(--u));
  }

  .p-case__card {
    position: relative;
    background: #fffefd;
    box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) rgb(113 89 40 / 0.2);
  }

  /* 右上のCase番号（折り返し付き） */
  .p-case__num {
    position: absolute;
    top: calc(-12 * var(--u));
    right: calc(32 * var(--u));
    z-index: 1;
    display: grid;
    place-content: center;
    width: calc(80 * var(--u));
    aspect-ratio: 1;
    font-family: var(--ff-num);
    font-size: clamp(2.2rem, calc(28 * var(--u)), 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    color: var(--c-cream);
    background: var(--c-navy-2);

    span {
      font-family: var(--ff-en);
      font-size: clamp(1.4rem, calc(18 * var(--u)), 1.8rem);
      font-weight: 900;
      letter-spacing: 0.1em;
    }

    &::after {
      position: absolute;
      top: 0;
      left: 100%;
      width: calc(8 * var(--u));
      height: calc(12 * var(--u));
      content: "";
      background: #354c6b;
      clip-path: polygon(0 0, 100% 100%, 0 100%);
    }
  }

  .p-case__item--2 .p-case__num {
    color: var(--c-navy-2);
    background: var(--c-gold-light);

    &::after { background: #a8894c; }
  }

  .p-case__main {
    display: flex;
    align-items: center;
    gap: calc(40 * var(--u));
    padding: calc(40 * var(--u));
  }

  .p-case__img {
    flex-shrink: 0;
    width: calc(280 * var(--u));
  }

  .p-case__main picture { flex-shrink: 0; }

  .p-case__body {
    display: grid;
    flex: 1;
  }

  .p-case__title {
    font-family: var(--ff-serif);
    font-size: clamp(1.8rem, calc(30 * var(--u)), 3rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }

  .p-case__person {
    margin-top: calc(4 * var(--u));
    font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    font-weight: 700;
    line-height: 1.6;
    color: var(--c-slate);
  }

  .p-case__text {
    margin-top: calc(16 * var(--u));
  }

  .p-case__point {
    display: flex;
    align-items: center;
    gap: calc(24 * var(--u));
    margin-top: calc(24 * var(--u));
    padding: calc(24 * var(--u));
    border: calc(2 * var(--u)) solid var(--c-cream);
    background: var(--c-beige);
  }

  .p-case__point-label {
    flex-shrink: 0;
    padding: 0 calc(24 * var(--u)) calc(2 * var(--u));
    border-radius: 100vmax;
    font-family: var(--ff-en);
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: 0.1em;
    color: var(--c-cream);
    background: var(--c-navy-2);
  }

  .p-case__point-list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(8 * var(--u)) calc(16 * var(--u));

    li {
      display: flex;
      align-items: center;
      gap: calc(12 * var(--u));
      font-weight: 700;
      line-height: 1.6;

      &::before {
        flex-shrink: 0;
        width: calc(16 * var(--u));
        aspect-ratio: 1;
        content: "";
        background: url("../imgs/icn-check-circle.svg") center / contain no-repeat;
      }
    }
  }

  .p-case__reward {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(32 * var(--u));
    min-height: calc(136 * var(--u));
    padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(120 * var(--u));
    background: var(--c-gold-light);
  }

  .p-case__item--2 .p-case__reward { padding-left: 0; }

  .p-case__plant {
    position: absolute;
    bottom: 0;
    left: calc(24 * var(--u));
    width: calc(84 * var(--u));
  }

  .p-case__reward-label {
    display: flex;
    align-items: center;
    gap: calc(32 * var(--u));
    font-family: var(--ff-serif);
    font-size: clamp(1.6rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;

    /* → 矢印 */
    &::after {
      flex-shrink: 0;
      width: calc(48 * var(--u));
      height: calc(32 * var(--u));
      content: "";
      background: url("../imgs/case-arrow.svg") center / calc(32 * var(--u)) calc(48 * var(--u)) no-repeat;
      rotate: -90deg;
    }
  }

  .p-case__reward-price {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--u));
    padding: calc(16 * var(--u)) calc(24 * var(--u));
    border-radius: var(--radius);
    background: var(--c-navy-2);
  }

  .p-case__price {
    padding-bottom: calc(8 * var(--u));
    font-family: var(--ff-serif);
    font-size: clamp(1.8rem, calc(32 * var(--u)), 3.2rem);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    color: var(--c-yellow-light);

    b { font-size: clamp(3.2rem, calc(64 * var(--u)), 6.4rem); }
  }

  .p-case__plus {
    flex-shrink: 0;
    width: calc(24 * var(--u));
    aspect-ratio: 1;
    background: url("../imgs/case-plus.svg") center / contain no-repeat;
  }

  .p-case__extra {
    padding: calc(4 * var(--u)) calc(16 * var(--u)) calc(5 * var(--u));
    border: calc(2 * var(--u)) solid var(--c-white);
    font-family: var(--ff-serif);
    font-size: clamp(1.6rem, calc(20 * var(--u)), 2rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: var(--c-white);
  }

  .p-case__note {
    margin-top: calc(16 * var(--u));
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--c-slate);
  }

  @media (width < 768px) {
    /* 左右の余白: 390pxで16px → 550px以上で8px（広めのSPほどカードを広げる） */
    .p-case {
      padding: calc(80 * var(--u)) clamp(8px, 16px - (100vw - 390px) / 20, 16px);
    }

    .p-case__lamp {
      left: calc(8 * var(--u));
      width: calc(92 * var(--u));
    }

    .p-case__lead {
      padding-inline: calc(8 * var(--u));
      font-size: var(--fs-body);
    }

    .p-case__list { width: 100%; }

    .p-case__num { right: calc(16 * var(--u)); }

    .p-case__main {
      flex-direction: column;
      gap: calc(40 * var(--u));
      padding: calc(24 * var(--u));
    }

    .p-case__img { width: calc(310 * var(--u)); }

    .p-case__body { text-align: center; }

    .p-case__title {
      font-size: clamp(2.2rem, calc(26 * var(--u)), 2.6rem);
    }

    .p-case__text { text-align: center; }

    .p-case__point {
      flex-direction: column;
      gap: calc(16 * var(--u));
    }

    .p-case__point-list {
      flex-direction: column;
      gap: calc(8 * var(--u));
      text-align: left;
    }

    .p-case__reward,
    .p-case__item--2 .p-case__reward {
      flex-direction: column;
      gap: calc(16 * var(--u));
      padding: calc(24 * var(--u)) 0;
    }

    .p-case__reward-label {
      flex-direction: column;
      gap: calc(16 * var(--u));
      text-align: center;

      &::after {
        width: calc(32 * var(--u));
        height: calc(48 * var(--u));
        rotate: none;
      }
    }

    .p-case__reward-price {
      flex-direction: column;
      width: calc(230 * var(--u));
      justify-content: center;
    }

    .p-case__price {
      font-size: clamp(2.4rem, calc(30 * var(--u)), 3rem);

      b { font-size: clamp(4.8rem, calc(56 * var(--u)), 5.6rem); }
    }
  }

  /* 11 greeting ----------------------------------------------------------- */
  .p-greeting {
    display: grid;
    justify-items: center;
    padding: calc(64 * var(--u)) calc(16 * var(--u)) calc(120 * var(--u));
    background: linear-gradient(var(--c-bg-blue), var(--c-white) calc(1063 * var(--u)));
  }

  .p-greeting__main {
    display: flex;
    gap: calc(120 * var(--u));
    width: calc(1080 * var(--u));
  }

  .p-greeting__photo {
    flex-shrink: 0;
    align-self: flex-start;
    width: calc(400 * var(--u));
  }

  /* 下のプロフィールが49px重なる分を下余白に含める。狭い幅で本文が写真より長くなっても、本文の下に最低40pxあける */
  .p-greeting__body {
    display: grid;
    align-content: start;
    gap: calc(16 * var(--u));
    padding-block: calc(56 * var(--u)) calc(49 * var(--u) + max(56 * var(--u), 4rem));

    .c-heading { margin-bottom: calc(24 * var(--u)); }

    p { line-height: 1.8; }

    strong {
      font-weight: 700;
      color: var(--c-gold-label);
    }
  }

  .p-greeting__profile {
    position: relative;
    display: flex;
    gap: calc(80 * var(--u));
    width: calc(1200 * var(--u));
    margin-top: calc(-49 * var(--u));
    padding: calc(80 * var(--u));
    background: var(--c-white);
    box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) rgb(1 24 58 / 0.1);
  }

  .p-greeting__person {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: calc(16 * var(--u));
    flex-shrink: 0;
    width: max(calc(160 * var(--u)), 14rem);

    img { width: calc(160 * var(--u)); }
  }

  .p-greeting__name {
    display: grid;
    font-family: var(--ff-serif);
    font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;
    white-space: nowrap;

    span { font-size: 1.4rem; }
  }

  .p-greeting__detail {
    display: grid;
    align-content: start;
    flex: 1;
  }

  .p-greeting__role {
    font-family: var(--ff-serif);
    font-size: clamp(1.8rem, calc(20 * var(--u)), 2rem);
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: 0.05em;
  }

  .p-greeting__licenses {
    display: flex;
    flex-wrap: wrap;
    gap: calc(8 * var(--u));
    margin-top: calc(16 * var(--u));

    li {
      padding: calc(4 * var(--u)) calc(16 * var(--u));
      border-radius: 100vmax;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.05em;
      color: var(--c-gold);
      background: var(--c-cream);
    }
  }

  .p-greeting__facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(16 * var(--u));
    margin-top: calc(32 * var(--u));
  }

  .p-greeting__fact {
    display: grid;
    justify-items: center;
    align-content: center;
    min-height: calc(138 * var(--u));
    padding: calc(24 * var(--u)) calc(10 * var(--u)) calc(32 * var(--u));
    border-radius: var(--radius);
    text-align: center;
    background: var(--c-bg-blue);
  }

  .p-greeting__fact-label {
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: var(--c-slate);
  }

  .p-greeting__fact-value {
    font-family: var(--ff-serif);
    font-size: clamp(1.8rem, calc(32 * var(--u)), 3.2rem);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.05em;
    white-space: nowrap;

    b { font-size: clamp(3rem, calc(56 * var(--u)), 5.6rem); }
  }

  .p-greeting__fact--both {
    padding: calc(10 * var(--u));
    font-family: var(--ff-serif);
    font-size: clamp(1.6rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: var(--c-gold);
    background: var(--c-beige);
  }

  @media (width < 768px) {
    .p-greeting {
      padding: calc(80 * var(--u)) calc(16 * var(--u));
    }

    .p-greeting__main {
      flex-direction: column;
      align-items: center;
      gap: calc(40 * var(--u));
      width: 100%;
    }

    .p-greeting__photo {
      order: 1;
      align-self: center;
      width: calc(320 * var(--u));
    }

    .p-greeting__body {
      padding: 0 calc(4 * var(--u));
      text-align: center;

      .c-heading {
        justify-items: center;
        margin-bottom: calc(16 * var(--u));
      }
    }

    .p-greeting__profile {
      flex-direction: column;
      align-items: center;
      gap: calc(40 * var(--u));
      width: 100%;
      margin-top: calc(-40 * var(--u));
      padding: calc(64 * var(--u)) calc(24 * var(--u)) calc(40 * var(--u));
    }

    .p-greeting__detail { width: 100%; }

    .p-greeting__role {
      font-size: clamp(1.8rem, calc(20 * var(--u)), 2rem);
      text-align: center;
    }

    .p-greeting__licenses { justify-content: center; }

    .p-greeting__facts {
      grid-template-columns: 1fr;
      padding-inline: calc(16 * var(--u));
    }
  }

  /* 12 seminar ------------------------------------------------------------ */
  .p-seminar {
    display: grid;
    justify-items: center;
    padding-bottom: calc(120 * var(--u));
    background:
      linear-gradient(to right, #eee calc(1.5 * var(--u)), transparent 0) calc(60 * var(--u)) 0 / calc(88 * var(--u)) 100%,
      linear-gradient(to bottom, #eee calc(1.5 * var(--u)), transparent 0) 0 calc(42 * var(--u)) / 100% calc(88 * var(--u)),
      var(--c-white);
  }

  .p-seminar__head {
    position: relative;
    justify-self: stretch;
    padding: calc(40 * var(--u)) calc(24 * var(--u));
    background: var(--c-orange);
  }

  .p-seminar__title {
    font-size: clamp(2rem, calc(36 * var(--u)), 3.6rem);
  }

  .p-seminar__user {
    position: absolute;
    bottom: calc(-8 * var(--u));
    left: calc(50% - 632 * var(--u));   /* Figma x88 */
    width: calc(142 * var(--u));
  }

  .p-seminar__staff {
    position: absolute;
    bottom: 0;
    left: calc(50% + 416 * var(--u));   /* Figma x1136 */
    width: calc(240 * var(--u));
  }

  .p-seminar__lead {
    margin-top: calc(64 * var(--u));
    padding-inline: calc(16 * var(--u));
    font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    line-height: 1.8;
    text-align: center;

    strong {
      font-weight: 700;
      color: var(--c-gold);
    }
  }

  .p-seminar__outline {
    width: calc(1200 * var(--u));
    margin-top: calc(64 * var(--u));
  }

  .p-seminar__band {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(10 * var(--u));
    padding: calc(16 * var(--u)) calc(10 * var(--u));
    font-family: var(--ff-serif);
    font-size: clamp(1.8rem, calc(32 * var(--u)), 3.2rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;
    color: var(--c-cream);
    background: var(--c-navy);
  }

  .p-seminar__band-free {
    padding: calc(4 * var(--u)) calc(16 * var(--u));
    color: var(--c-white);
    background: var(--c-orange);
  }

  .p-seminar__box {
    position: relative;
    display: grid;
    justify-items: center;
    gap: calc(40 * var(--u));
    padding: calc(64 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u));
    border: calc(3 * var(--u)) solid var(--c-navy);
    border-top: 0;
    background: var(--c-white);
  }

  .p-seminar__lamp {
    position: absolute;
    top: 0;
    left: calc(48 * var(--u));
    width: calc(156 * var(--u));
  }

  .p-seminar__points-title,
  .p-seminar__detail-title {
    font-family: var(--ff-serif);
    font-size: clamp(2.4rem, calc(28 * var(--u)), 2.8rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;
  }

  .p-seminar__points {
    display: grid;
    grid-template-columns: repeat(3, max(calc(280 * var(--u)), 18.5rem));
    gap: calc(40 * var(--u)) calc(24 * var(--u));
    margin-bottom: calc(24 * var(--u));
  }

  .p-seminar__point {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: calc(24 * var(--u));
  }

  /* 丸の直径 --d を基準に、アイコン・文字・余白を同じ比率で拡縮（どの幅でも正円・中央） */
  .p-seminar__point-circle {
    --d: max(calc(240 * var(--u)), 17rem);
    display: grid;
    justify-items: center;
    align-content: center;
    gap: calc(var(--d) * 0.02);
    width: var(--d);
    height: var(--d);
    padding: 0 calc(var(--d) * 0.08) calc(var(--d) * 0.04);
    border-radius: 50%;
    font-family: var(--ff-serif);
    font-size: clamp(1.2rem, calc(var(--d) * 0.083), 2rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;
    background: var(--c-yellow-light);

    /* アイコンは6つとも高さをそろえる。丸の下限に合わせず画面幅で縮める */
    img {
      width: auto;
      height: min(calc(var(--d) * 0.3), calc(72 * var(--u)));
      margin-bottom: calc(var(--d) * 0.05);   /* アイコンと見出しの間（240pxの丸で12px） */
    }
  }

  /* 狭いPC幅では1行が収まるように縮める */
  .p-seminar__point-text {
    font-size: clamp(1.3rem, calc(16 * var(--u)), 1.6rem);
    text-align: center;
  }

  .p-seminar__detail {
    position: relative;
    display: grid;
    gap: calc(32 * var(--u));
    justify-self: stretch;
    margin-inline: calc(3 * var(--u));
    padding: calc(40 * var(--u));
    border-radius: calc(10 * var(--u));
    background: var(--c-bg-blue);
  }

  .p-seminar__plant {
    position: absolute;
    right: calc(48 * var(--u));
    bottom: 100%;
    width: calc(64 * var(--u));
  }

  .p-seminar__infos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(16 * var(--u));
  }

  .p-seminar__info {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--u));
    min-height: calc(88 * var(--u));
    padding: calc(16 * var(--u));
    border-radius: var(--radius);
    background: var(--c-slate-light);

    dt {
      flex-shrink: 0;
      display: grid;
      place-items: center;
      width: calc(131 * var(--u));
      min-height: calc(56 * var(--u));
      border-radius: var(--radius);
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.05em;
      color: var(--c-white);
      background: var(--c-slate);
    }

    dd {
      font-weight: 700;
      line-height: 1.6;
    }
  }

  .p-seminar__caution {
    display: flex;
    align-items: center;
    gap: calc(24 * var(--u));
  }

  .p-seminar__caution-title {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: calc(156 * var(--u));
    min-height: calc(104 * var(--u));
    padding: calc(16 * var(--u)) calc(10 * var(--u));
    border: calc(2 * var(--u)) solid var(--c-navy);
    border-radius: var(--radius);
    font-size: clamp(1.6rem, calc(20 * var(--u)), 2rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;
  }

  .p-seminar__caution-list {
    padding-left: 1.5em;
    list-style: disc;
    line-height: 1.6;
  }

  .p-seminar__cta {
    display: grid;
    gap: calc(16 * var(--u));
    margin-top: calc(8 * var(--u));
  }

  .p-seminar__cta-box {
    display: grid;
    justify-items: center;
    padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u));
    border: calc(3 * var(--u)) solid var(--c-slate-light);
    text-align: center;
    background: var(--c-white);
  }

  .p-seminar__cta-title {
    font-family: var(--ff-serif);
    font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }

  .p-seminar__cta-sub {
    margin-top: calc(8 * var(--u));
  }

  .p-seminar__cta-btns {
    display: flex;
    justify-content: center;
    gap: calc(40 * var(--u));
    margin-top: calc(24 * var(--u));
  }

  .p-seminar__cta-note {
    font-size: 1.3rem;
    line-height: 1.6;
    text-align: center;
    color: var(--c-slate);
  }

  @media (width < 768px) {
    .p-seminar {
      padding-bottom: calc(80 * var(--u));
      background-position: calc(18 * var(--u)) 0, 0 calc(42 * var(--u)), 0 0;
    }

    .p-seminar__head {
      padding: calc(40 * var(--u)) calc(24 * var(--u)) 0;
    }

    .p-seminar__title {
      font-size: clamp(2.2rem, calc(26 * var(--u)), 2.6rem);
    }

    .p-seminar__illust-sp {
      width: calc(326 * var(--u));
      margin: calc(24 * var(--u)) auto calc(-7 * var(--u));
    }

    .p-seminar__lead {
      margin-top: calc(40 * var(--u));
      font-size: var(--fs-body);
    }

    .p-seminar__outline {
      width: calc(358 * var(--u));
      margin-top: calc(40 * var(--u));
    }

    .p-seminar__band {
      flex-direction: column;
      gap: calc(10 * var(--u));
      padding: calc(16 * var(--u));
      font-size: clamp(2.2rem, calc(26 * var(--u)), 2.6rem);
    }

    .p-seminar__band-free {
      font-size: clamp(2.6rem, calc(32 * var(--u)), 3.2rem);
    }

    .p-seminar__box {
      padding: calc(64 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
    }

    .p-seminar__lamp {
      left: calc(11 * var(--u));
      width: calc(85 * var(--u));
    }

    .p-seminar__points-title,
    .p-seminar__detail-title {
      font-size: clamp(2rem, calc(22 * var(--u)), 2.2rem);
    }

    .p-seminar__points-title { margin-bottom: calc(-16 * var(--u)); }

    .p-seminar__points {
      grid-template-columns: calc(280 * var(--u));
      gap: calc(24 * var(--u));
      margin-bottom: calc(64 * var(--u));
    }

    .p-seminar__point { gap: calc(16 * var(--u)); }

    .p-seminar__point-text { font-size: var(--fs-body); }

    .p-seminar__point-circle {
      --d: calc(210 * var(--u));
      font-size: clamp(1.4rem, calc(18 * var(--u)), 3.5rem);

      img {
        height: calc(54 * var(--u));   /* 6つとも同じ高さ */
        margin-bottom: calc(14 * var(--u));
      }
    }

    .p-seminar__detail {
      gap: calc(24 * var(--u));
      margin-inline: 0;
      padding: calc(32 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
    }

    .p-seminar__plant {
      right: calc(16 * var(--u));
      width: calc(45 * var(--u));
    }

    .p-seminar__infos {
      grid-template-columns: 1fr;
      gap: calc(10 * var(--u));
    }

    .p-seminar__info {
      flex-direction: column;
      align-items: stretch;
      gap: calc(16 * var(--u));
      min-height: 0;
      padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u));
      text-align: center;

      dt {
        width: auto;
        min-height: calc(40 * var(--u));
      }
    }

    .p-seminar__caution {
      flex-direction: column;
      align-items: stretch;
      margin-top: calc(16 * var(--u));
    }

    .p-seminar__caution-title {
      width: auto;
      min-height: 0;
      padding: calc(12 * var(--u)) calc(24 * var(--u));
      font-size: var(--fs-body);
    }

    .p-seminar__cta { margin-top: calc(16 * var(--u)); }

    .p-seminar__cta-box {
      padding: calc(32 * var(--u)) calc(12 * var(--u));
    }

    .p-seminar__cta-title { font-size: clamp(2rem, calc(22 * var(--u)), 2.2rem); }

    .p-seminar__cta-btns {
      flex-direction: column;
      align-items: center;
      gap: calc(16 * var(--u));
      margin-top: calc(16 * var(--u));
    }

    .p-seminar__cta-note { text-align: left; }
  }

  /* 13 faq ---------------------------------------------------------------- */
  .p-faq {
    display: grid;
    justify-items: center;
    padding: calc(120 * var(--u)) calc(16 * var(--u));
    background: var(--c-bg-blue);

    .c-heading__title { font-size: clamp(2.8rem, calc(36 * var(--u)), 3.6rem); }
  }

  /* 狭いPC幅では縮みすぎないよう最低620pxを確保 */
  .p-faq__list {
    display: grid;
    gap: calc(8 * var(--u));
    width: max(calc(800 * var(--u)), 620px);
    margin-top: calc(40 * var(--u));
  }

  .p-faq__item {
    border-radius: var(--radius);
    --c-q-bg: var(--c-bg);
    --c-q-text: var(--c-navy);
    --c-q-icon-bg: var(--c-navy-2);
    --c-q-icon: var(--c-white);
  }

  .p-faq__q {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--u));
    min-height: calc(96 * var(--u));
    padding: calc(16 * var(--u)) calc(40 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
    border: calc(2 * var(--u)) solid var(--c-slate-light);
    border-radius: var(--radius);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--c-q-text);
    background: var(--c-q-bg);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);

    @media (hover: hover) {
      &:hover {
        --c-q-bg: var(--c-slate);
        --c-q-text: var(--c-white);
        --c-q-icon-bg: var(--c-white);
        --c-q-icon: var(--c-navy-2);
        border-color: var(--c-slate);
      }
    }
  }

  .p-faq__avatar {
    flex-shrink: 0;
    width: calc(60 * var(--u));
    border-radius: 50%;
    background: var(--c-bg-blue);
  }

  .p-faq__q-text { flex: 1; }

  /* ＋／− */
  .p-faq__icon {
    position: relative;
    flex-shrink: 0;
    width: calc(30 * var(--u));
    min-width: 2.4rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--c-q-icon-bg);
    transition: background-color var(--dur) var(--ease);

    &::before,
    &::after {
      position: absolute;
      inset: 50% auto auto 50%;
      width: 40%;
      height: calc(2 * var(--u));
      content: "";
      background: var(--c-q-icon);
      translate: -50% -50%;
      transition: rotate 0.3s var(--ease), background-color var(--dur) var(--ease);
    }

    &::after { rotate: 90deg; }
  }

  .p-faq__item[open] {
    --c-q-bg: var(--c-slate);
    --c-q-text: var(--c-white);
    --c-q-icon-bg: var(--c-white);
    --c-q-icon: var(--c-navy-2);
    background: var(--c-slate);

    .p-faq__q {
      border-color: var(--c-slate);
      border-radius: var(--radius) var(--radius) 0 0;
    }

    .p-faq__icon::after { rotate: 0deg; }
  }

  .p-faq__a {
    padding: calc(8 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
    font-weight: 400;
    border-radius: 0 0 var(--radius) var(--radius);
    line-height: 1.6;
    color: var(--c-white);
    background: var(--c-slate);
  }

  @media (width < 768px) {
    .p-faq {
      padding: calc(80 * var(--u)) clamp(8px, 16px - (100vw - 390px) / 20, 16px);

      .c-heading__title { font-size: clamp(2.2rem, calc(26 * var(--u)), 2.6rem); }
    }

    .p-faq__list { width: 100%; }

    .p-faq__q {
      min-height: calc(86 * var(--u));
      padding: calc(16 * var(--u));
    }

    .p-faq__avatar { width: calc(50 * var(--u)); }
  }

  /* 15 contact ------------------------------------------------------------ */
  .p-contact {
    display: grid;
    justify-items: center;
    padding: calc(120 * var(--u)) calc(16 * var(--u)) 0;
    background: var(--c-bg);
  }

  .p-contact__visual {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    margin: calc(40 * var(--u)) 0 calc(-13 * var(--u));
  }

  .p-contact__bubble {
    display: grid;
    place-items: center;
    width: max(calc(200 * var(--u)), 16rem);
    aspect-ratio: 200 / 121;
    padding-top: calc(4 * var(--u));   /* 雲の本体（しっぽを除く）の上下中央に合わせる */
    font-size: clamp(1.3rem, calc(15 * var(--u)), 1.5rem);
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-align: center;
    color: var(--c-navy-2);
    background: url("../imgs/form-bubble.svg") center / contain no-repeat;
  }

  .p-contact__staff {
    width: calc(202 * var(--u));
    margin-right: calc(200 * var(--u));
  }

  /* 狭いPC幅では縮みすぎないよう最低704px（画面幅-64pxまで）を確保 */
  .p-contact__form {
    display: grid;
    justify-items: center;
    gap: calc(40 * var(--u));
    width: max(calc(1040 * var(--u)), min(100vw - 64px, 704px));
    padding: calc(80 * var(--u)) calc(120 * var(--u));
    border: calc(3 * var(--u)) solid var(--c-slate-light);
    background: var(--c-white);
  }

  /* 迷惑メール対策の見えない欄（人には見せない・読み上げない） */
  .p-contact__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .p-contact__intro {
    display: grid;
    justify-items: center;
    gap: calc(16 * var(--u));
    font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    line-height: 1.8;
    text-align: center;
  }

  .p-contact__required-note {
    padding: calc(8 * var(--u)) calc(40 * var(--u));
    font-size: var(--fs-body);
    background: var(--c-beige);
  }

  .p-contact__req {
    margin-left: 0.5em;
    color: var(--c-red);

    .p-contact__required-note & { margin-left: 0; }
  }

  .p-contact__fields {
    display: grid;
    gap: calc(40 * var(--u));
    width: 100%;
  }

  .p-contact__field {
    display: grid;
    align-content: start;   /* 姓・名の片方だけエラー文が出ても、入力欄は上でそろえる */
    gap: calc(8 * var(--u));
    min-width: 0;
  }

  .p-contact__label {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.05em;
  }

  fieldset.p-contact__field {
    gap: 0;

    .p-contact__label { margin-bottom: calc(24 * var(--u)); }
  }

  .p-contact__radios {
    display: grid;
    gap: calc(12 * var(--u));
  }

  .p-contact__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(16 * var(--u));
  }

  /* 入力OKの表示（緑枠＋右端に「OK」） */
  .p-contact__control {
    position: relative;
  }

  .p-contact__ok {
    position: absolute;
    top: 50%;
    right: calc(16 * var(--u));
    display: none;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--c-green);
    translate: 0 -50%;

    .is-valid & { display: block; }
  }

  .p-contact__error {
    display: none;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--c-red);

    &::before {
      flex-shrink: 0;
      width: 1.6rem;
      height: 1.6rem;
      content: "!";
      border-radius: 50%;
      font-size: 1.2rem;
      font-weight: 700;
      line-height: 1.6rem;
      text-align: center;
      color: var(--c-white);
      background: var(--c-red);
    }

    .is-error & { display: flex; }
  }

  .p-contact__count {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: right;
    color: var(--c-slate);
  }

  .p-contact__privacy {
    display: grid;
    gap: calc(16 * var(--u));
    justify-self: center;
    width: max(calc(714 * var(--u)), min(100%, 560px));
    height: calc(320 * var(--u));
    min-height: 24rem;
    overflow-y: auto;
    margin-top: calc(-8 * var(--u));
    padding: calc(32 * var(--u));
    border: calc(1.5 * var(--u)) solid var(--c-navy);
    font-size: 1.4rem;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: var(--c-slate);


  }

  .p-contact__privacy-title {
    margin-top: calc(24 * var(--u));
    font-size: inherit;
    font-weight: 500;
  }

  .p-contact__agree {
    display: grid;
    justify-items: center;
    gap: calc(8 * var(--u));
    text-align: center;

    &.is-error .c-checkbox__text { color: var(--c-red); }
  }

  .p-contact__agree-note {
    font-size: 1.4rem;
    line-height: 1.6;
  }

  .p-contact__btns {
    display: flex;
    justify-content: center;
    gap: calc(16 * var(--u));
    padding-top: calc(24 * var(--u));
  }

  @media (width < 768px) {
    .p-contact {
      padding: calc(80 * var(--u)) calc(16 * var(--u)) 0;
    }

    .p-contact__visual { margin: calc(40 * var(--u)) 0 calc(-13 * var(--u)); }

    .p-contact__staff { margin-right: 0; }

    .p-contact__form {
      width: 100%;
      padding: calc(56 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
    }

    .p-contact__intro {
      font-size: var(--fs-body);
    }

    .p-contact__required-note {
      padding: calc(8 * var(--u)) calc(16 * var(--u));
    }

    .p-contact__row {
      grid-template-columns: 1fr;
      gap: calc(16 * var(--u));
    }

    .c-input--textarea { height: calc(240 * var(--u)); }

    .p-contact__privacy {
      width: 100%;
      padding: calc(24 * var(--u)) calc(16 * var(--u));
    }

    .p-contact__btns {
      flex-direction: column;
      align-items: center;

      .c-btn-form--submit { order: -1; }
    }

    .c-popup .p-contact__btns .c-btn-form--submit { order: 0; }
  }
}

/* -------------------------------------------------------------------------
   utilities
   ------------------------------------------------------------------------- */
@layer utilities {
  .u-visually-hidden:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* 表示切り替え。表示側は revert-layer で各コンポーネントの display に戻す */
  .u-sp { display: none; }

  @media (width < 768px) {
    .u-pc { display: none; }
    .u-sp { display: revert-layer; }
  }

  .is-scroll-locked { overflow: hidden; }

  .u-svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }
}