/* =========================================================================
   石井クリニック トップページ — CODING-GUIDELINE.md 準拠
   - PC基点。SPの上書きは @media (width < 768px)
   - 例外: ヘッダーだけは 1024px 未満でハンバーガーに切り替える
     （PCヘッダーの文字量が 768〜1023px に収まらないため）
   - 寸法は calc(<Figmaのpx> * var(--u))、テキストは rem
   ========================================================================= */

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

/* -------------------------------------------------------------------------
   reset
   ------------------------------------------------------------------------- */
@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, iframe { display: block; max-width: 100%; }
  img { 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; }
  table { border-collapse: collapse; }
  address, em { font-style: normal; }
  hgroup { display: block; }
}

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

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

    /* color（Figma） */
    --c-text: #3e494a;
    --c-text-sub: #5d6e70;
    --c-main: #24a2a8;
    --c-main-dark: #1c8d99;
    --c-btn: #43b5ba;
    --c-bg: #fbfeff;
    --c-bg-light: #ddf3f3;
    --c-bg-pale: #e9f5f5;
    --c-bg-schedule: #f0fafa;
    --c-bg-footer: #e3eeed;
    --c-line: #c2ddd9;
    --c-line-card: #d9ebe9;
    --c-line-map: #c3d9d7;
    --c-tag: #cae8e5;
    --c-grid: #e9f8f8;
    --c-dot: #cedbe0;
    --c-dot-active: #3eaaa9;
    --c-woman: #f1609a;
    --c-man: #3783e8;

    /* font: 游ゴシック（Windows・Mac。fonts.css の SiteGothic）→ Noto Sans JP（iPhone・Android） */
    --ff-base: "SiteGothic", "Noto Sans JP", sans-serif;
    --ff-en: "Manrope", var(--ff-base);

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

    /* motion */
    --dur: 0.3s;
    --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --z-header: 100;
    --z-spbar: 90;
  }

  @media (width < 1024px) {
    :root {
      --header-h: calc(72 * var(--uh));
    }
  }

  /* ヘッダー（1024px未満）用の単位: SPは390基準、768〜1023pxは390デザインを等倍で使う */
  :root { --uh: 1px; }

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

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

/* -------------------------------------------------------------------------
   base
   ------------------------------------------------------------------------- */
@layer base {
  html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
  }

  body {
    min-width: 320px;
    font-family: var(--ff-base);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: var(--c-text);
    background: var(--c-bg);
    font-feature-settings: "palt" 0;
  }

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

  @media (width < 768px) {
    body { padding-bottom: calc(64 * var(--u)); }   /* 下部固定バーの分 */
    input, textarea, select { font-size: 1.6rem; }
  }

  @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: header
   ------------------------------------------------------------------------- */
@layer layout {
  .l-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--c-bg);
    transition: box-shadow var(--dur) var(--ease);

    &:has(.l-gnav__item:hover .l-gnav__sub, .l-gnav__item:focus-within .l-gnav__sub) {
      box-shadow: 0 2px 8px rgb(62 73 74 / 0.06);
    }
  }

  .l-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    padding: calc(24 * var(--u));
    padding-right: calc(12 * var(--u));   /* 右側（電話・予約ボタン・メニュー）は端に寄せる */
  }

  .l-header__brand {
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--u));
  }

  .l-header__catch {
    font-size: clamp(1rem, calc(12 * var(--u)), 1.2rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-text-sub);
    translate: 0 calc(-6 * var(--u));   /* ロゴは動かさず、キャッチだけ少し上へ */
  }

  .l-header__logo {
    width: calc(261 * var(--u));
    transition: opacity var(--dur) var(--ease);

    &:hover { opacity: 0.5; }
  }

  .l-header__logo-row {
    display: flex;
    align-items: center;
    gap: 0;
  }

  /* ロゴ右の「泌尿器科」 */
  .l-header__dept {
    padding: calc(4 * var(--u)) calc(12 * var(--u));
    border-radius: 4px;
    background: linear-gradient(90deg, var(--c-btn), var(--c-main));
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    color: #fff;
    white-space: nowrap;
  }

  .l-header__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(12 * var(--u));
  }

  .l-header__ctas {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
  }

  .l-header__tel {
    font-family: var(--ff-en);
    font-size: clamp(1.6rem, calc(20 * var(--u)), 2rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  .l-header__tel-label {
    margin-right: 0.3em;
    font-size: 0.7em;
    font-weight: 500;
  }

  /* グローバルナビ ------------------------------------------------------- */
  .l-gnav__list {
    display: flex;
    gap: calc(24 * var(--u));
  }

  .l-gnav__item {
    /* サブメニューまでホバーが途切れないよう、ヘッダー下端まで当たり判定を伸ばす */
    padding-bottom: calc(25 * var(--u));
    margin-bottom: calc(-25 * var(--u));
  }

  .l-gnav__link {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    font-size: clamp(1.2rem, calc(15 * var(--u)), 1.5rem);
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    transition: color var(--dur) var(--ease);

    .has-sub > &::after {
      content: "";
      width: calc(7 * var(--u));
      height: calc(7 * var(--u));
      margin: 0 calc(4 * var(--u)) calc(4 * var(--u));
      border-right: 2px solid var(--c-text-sub);
      border-bottom: 2px solid var(--c-text-sub);
      rotate: 45deg;
      transition: border-color var(--dur) var(--ease);
    }

    .l-gnav__item:hover > &,
    .l-gnav__item:focus-within > & {
      color: var(--c-main);

      &::after { border-color: var(--c-btn); }
    }
  }

  .l-gnav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c-bg-light);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur) var(--ease), visibility var(--dur);

    .l-gnav__item:hover > &,
    .l-gnav__item:focus-within > & {
      visibility: visible;
      opacity: 1;
    }
  }

  /* 診療内容のメガメニューは縦に長い。ヘッダーが追従していてページのスクロールでは下まで届かないので、
     画面に収まる高さまでにして、はみ出た分はメニューの中でスクロールさせる（ノートPCなど縦の短い画面向け） */
  .l-gnav__sub--mega {
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;   /* メニュー内のスクロールが端まで行っても、裏のページを動かさない */
  }

  .l-gnav__sub-list {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(70 * var(--u));

    & li + li { border-left: 1px solid var(--c-text-sub); }

    & a {
      display: block;
      padding-inline: calc(40 * var(--u));
      font-size: clamp(1.2rem, calc(15 * var(--u)), 1.5rem);
      font-weight: 700;
      line-height: calc(20 * var(--u));
      transition: color var(--dur) var(--ease);

      &:hover { color: var(--c-main); }
    }
  }

  /* 診療内容のメガメニュー */
  .l-gnav__mega {
    display: grid;
    grid-template-columns: repeat(4, calc(280 * var(--u)));
    justify-content: center;
    gap: calc(32 * var(--u)) calc(48 * var(--u));
    padding: calc(40 * var(--u)) calc(88 * var(--u)) calc(48 * var(--u));
  }

  .l-gnav__mega-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    & .c-links {
      align-self: stretch;
      margin-top: calc(24 * var(--u));
      padding-inline: calc(4 * var(--u));
      gap: calc(12 * var(--u)) calc(24 * var(--u));
    }

    & .c-links__link { font-size: clamp(1.2rem, calc(15 * var(--u)), 1.5rem); }
  }

  .l-gnav__mega-icon {
    display: grid;
    place-items: center;
    width: calc(96 * var(--u));
    height: calc(96 * var(--u));
    border-radius: 50%;
    background: var(--c-bg);

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

  .l-gnav__mega-title {
    align-self: stretch;
    margin-top: calc(20 * var(--u));
    padding-bottom: calc(12 * var(--u));
    border-bottom: 1.5px solid var(--c-btn);
    font-size: clamp(1.4rem, calc(18 * var(--u)), 1.8rem);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: var(--c-main-dark);
  }

  /* SPメニュー（PCでは使わない） */
  .l-spmenu { display: none; }

  /* 1024px未満: ロゴ＋ハンバーガー --------------------------------------- */
  @media (width < 1024px) {
    .l-header__inner {
      padding: calc(16 * var(--uh));
    }

    .l-header__catch {
      /* h1 は残し、見た目だけ隠す */
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .l-header__logo { width: calc(188 * var(--uh)); }

    .l-header__logo-row { gap: calc(8 * var(--uh)); }

    .l-header__dept {
      padding: calc(3 * var(--uh)) calc(8 * var(--uh));
      font-size: 1.2rem;
    }

    .l-header__right { display: none; }

    .l-spmenu {
      position: fixed;
      inset: var(--header-h) 0 0;
      z-index: var(--z-header);
      display: block;
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--c-bg);
      visibility: hidden;
      opacity: 0;
      transition: opacity var(--dur) var(--ease), visibility var(--dur);

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

    .l-spmenu__inner {
      padding: calc(8 * var(--uh)) calc(16 * var(--uh)) calc(48 * var(--uh));
    }

    .l-spmenu__menus {
      margin-top: calc(48 * var(--uh));

      & .c-acc { margin-top: calc(16 * var(--uh)); }
    }

    .l-spmenu__cta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: calc(16 * var(--uh));
      margin-top: calc(48 * var(--uh));
    }
  }
}

/* -------------------------------------------------------------------------
   layout: footer
   ------------------------------------------------------------------------- */
@layer layout {
  .l-footer {
    margin-top: calc(136 * var(--u));
    padding-bottom: calc(48 * var(--u));
    background: var(--c-bg-footer);
  }

  /* 院内写真の帯（右から左へゆっくり流れる） */
  .l-footer__gallery {
    overflow: hidden;
  }

  .l-footer__gallery-track {
    display: flex;
    width: max-content;
    animation: gallery-loop 60s linear infinite;

    & img {
      width: calc(480 * var(--u));
      height: calc(320 * var(--u));
      object-fit: cover;
    }
  }

  @keyframes gallery-loop {
    to { translate: -50% 0; }
  }

  .l-footer__inner {
    width: calc(1360 * var(--u));
    margin-inline: auto;
  }

  /* 診療案内・アクセス */
  .l-footer__info {
    position: relative;
    display: flex;
    gap: calc(96 * var(--u));
    margin-top: calc(-40 * var(--u));
    padding: calc(96 * var(--u));
    border-radius: calc(15 * var(--u));
    background: var(--c-bg);
  }

  .l-footer__clinic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(32 * var(--u));
    width: calc(440 * var(--u));
    flex-shrink: 0;
  }

  .l-footer__logo { width: calc(280 * var(--u)); }

  .l-footer__name {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: clamp(2.2rem, calc(28 * var(--u)), 2.8rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-main);

    & span { font-size: var(--fs-body); }
  }

  .l-footer__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(8 * var(--u));
    margin-top: calc(-24 * var(--u));

    & li {
      padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(2 * var(--u));
      border-radius: 2px;
      background: var(--c-tag);
      font-size: var(--fs-body);
      font-weight: 700;
      line-height: 1.4;
      color: var(--c-main-dark);
    }
  }

  .l-footer__referral {
    align-self: stretch;
    padding-block: calc(16 * var(--u));
    border-block: 3px solid var(--c-line);
    font-size: clamp(1.6rem, calc(20 * var(--u)), 2rem);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: var(--c-main);
  }

  .l-footer__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16 * var(--u));
  }

  .l-footer__schedule { align-self: stretch; }

  .l-footer__access {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--u));
    width: calc(632 * var(--u));
    padding: calc(40 * var(--u));
    border-radius: calc(10 * var(--u));
    background: var(--c-bg-pale);
  }

  .l-footer__address {
    font-size: var(--fs-body);
    line-height: 1.4;
  }

  .l-footer__map {
    overflow: hidden;
    border: 1px solid var(--c-line-map);

    & iframe {
      width: 100%;
      height: calc(300 * var(--u));
      border: 0;
    }
  }

  .l-footer__parking-lead {
    margin-top: calc(16 * var(--u));
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: var(--c-main-dark);
  }

  .l-footer__parking {
    padding: calc(24 * var(--u));
    border-radius: calc(5 * var(--u));
    background: var(--c-bg);
  }

  .l-footer__parking-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(15 * var(--u)) calc(16 * var(--u));

    & li {
      position: relative;
      padding: 0 0 calc(4 * var(--u)) calc(14 * var(--u));
      font-weight: 700;
      line-height: 1.4;
      background: var(--dashed-line) 0 100% / 8px 1.5px repeat-x;

      &::before {
        content: "";
        position: absolute;
        top: 0.55em;
        left: 0;
        width: calc(6 * var(--u));
        height: calc(6 * var(--u));
        border-radius: 50%;
        background: var(--c-main);
      }
    }
  }

  .l-footer__parking-note {
    margin-top: calc(19 * var(--u));
    padding: calc(8 * var(--u)) calc(10 * var(--u));
    border-radius: calc(5 * var(--u));
    background: var(--c-bg-pale);
    font-size: clamp(1.2rem, calc(14 * var(--u)), 1.4rem);
    line-height: 1.4;
    text-align: center;
  }

  /* サイトマップ
     左2列・診療内容一覧・規約リンクを1つのグリッドに並べる（.l-footer__sitemap は箱を消す）。
     規約リンクは診療内容一覧の高さに関係なく、左2列のすぐ下に置く */
  .l-footer__nav {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    grid-template-rows: auto 1fr;   /* 診療内容一覧が長い分は2行目で吸収 */
    align-items: start;
    column-gap: calc(64 * var(--u));
    width: calc(1280 * var(--u));
    margin: calc(80 * var(--u)) auto 0;
    white-space: nowrap;
  }

  .l-footer__sitemap { display: contents; }

  .l-footer__menus {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin-left: calc(151 * var(--u));   /* Figma: 左ブロックとの間 215px */

    & .c-acc { margin-top: calc(34 * var(--u)); }
  }

  .l-footer__nav .l-footer__policy {
    grid-column: 1 / span 2;
    grid-row: 2;
    margin-top: calc(48 * var(--u));   /* Figma: 左2列の下 48px */
  }

  /* 1100px未満のPC表示: 診療内容一覧を左2列の下へ回して横幅いっぱいに並べる */
  @media (768px <= width < 1100px) {
    .l-footer__nav {
      grid-template-columns: max-content minmax(0, 1fr);
      grid-template-rows: auto;
    }

    .l-footer__menus {
      grid-column: 1 / -1;
      grid-row: 2;
      margin: calc(48 * var(--u)) 0 0;
    }

    .l-footer__nav .l-footer__policy {
      grid-column: 1 / -1;
      grid-row: 3;
    }
  }

  .l-footer__policy {
    display: flex;
    align-items: center;
    gap: calc(24 * var(--u));

    & li + li {
      padding-left: calc(24 * var(--u));
      border-left: 1px solid var(--c-text-sub);
    }

    & a {
      display: block;
      font-size: clamp(1.2rem, calc(14 * var(--u)), 1.4rem);
      font-weight: 700;
      line-height: 1.4;
      transition: color var(--dur) var(--ease);

      &:hover { color: var(--c-main); }
    }
  }

  .l-footer__bnrs {
    display: flex;
    justify-content: center;
    gap: calc(24 * var(--u));
    margin-top: calc(64 * var(--u));

    & a {
      display: block;
      transition: opacity var(--dur) var(--ease);

      &:hover { opacity: 0.5; }
    }

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

  .l-footer__copy {
    width: calc(1280 * var(--u));
    margin: calc(64 * var(--u)) auto 0;
    padding-top: calc(48 * var(--u));
    border-top: 1px solid var(--c-line);
    font-family: var(--ff-en);
    font-size: clamp(1.1rem, calc(13 * var(--u)), 1.3rem);
    font-weight: 700;
    text-align: center;

    & small { font-size: inherit; }
  }

  @media (width < 768px) {
    .l-footer { margin-top: calc(96 * var(--u)); }

    .l-footer__gallery-track img {
      width: calc(400 * var(--u));
      height: calc(266 * var(--u));
    }

    .l-footer__inner { width: calc(358 * var(--u)); }

    .l-footer__info {
      flex-direction: column;
      gap: calc(64 * var(--u));
      padding: calc(64 * var(--u)) calc(24 * var(--u));
    }

    .l-footer__clinic { width: 100%; }

    .l-footer__logo { width: calc(233 * var(--u)); }

    .l-footer__cta { align-self: stretch; }

    .c-schedule--lg { font-size: 1.4rem; }

    .c-schedule tr > :first-child { width: 33%; }

    .l-footer__referral {
      border-width: 2px;
      font-size: 1.8rem;
    }

    .l-footer__access {
      width: 100%;
      padding: calc(40 * var(--u)) calc(24 * var(--u));
    }

    .l-footer__parking-list { grid-template-columns: 1fr; gap: calc(10 * var(--u)); }

    .l-footer__nav {
      display: block;
      width: 100%;
      margin-top: calc(64 * var(--u));
    }

    .l-footer__sitemap {
      display: block;
      white-space: normal;
    }

    .l-footer__menus {
      margin: calc(48 * var(--u)) 0 0;

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

    .l-footer__policy {
      flex-direction: column;
      gap: calc(16 * var(--u));
      margin-top: calc(24 * var(--u));

      & li + li { padding-left: 0; border-left: 0; }
    }

    .l-footer__bnrs {
      flex-direction: column;
      align-items: center;
      gap: calc(16 * var(--u));
      margin-top: calc(32 * var(--u));

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

    .l-footer__copy { width: 100%; }
  }
}

/* -------------------------------------------------------------------------
   components
   ------------------------------------------------------------------------- */
@layer components {
  :root {
    /* 点線（Figma: dash 3 / gap 5） */
    --dashed-line: linear-gradient(to right, var(--c-line) 3px, transparent 3px);
  }

  /* 見出し（英字＋日本語） ---------------------------------------------- */
  .c-heading {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--u));
    color: var(--c-main);
  }

  .c-heading--center { align-items: center; text-align: center; }
  .c-heading--dark { color: var(--c-main-dark); }

  .c-heading__en {
    font-family: var(--ff-en);
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.15em;
  }

  .c-heading__ja {
    font-size: clamp(3rem, calc(40 * var(--u)), 4rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.15em;
  }

  @media (width < 768px) {
    .c-heading__ja { font-size: 3rem; }
  }

  /* ボタン ---------------------------------------------------------------- */
  .c-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: calc(280 * var(--u));
    min-height: calc(60 * var(--u));
    padding: calc(14 * var(--u)) calc(24 * var(--u));
    border: 2px solid var(--c-btn);
    border-radius: 100px;
    background: var(--c-btn);
    font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    font-weight: 700;
    line-height: 1.6;
    color: var(--c-bg);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);

    &:hover {
      background: var(--c-bg);
      color: var(--c-main);
    }
  }

  .c-btn--mini {
    width: auto;
    min-height: calc(40 * var(--u));
    padding: calc(6 * var(--u)) calc(22 * var(--u)) calc(4 * var(--u));
    font-size: var(--fs-body);
  }

  /* ヘッダーの予約ボタン */
  .c-btn-cta {
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
    height: calc(41 * var(--u));
    padding: 0 calc(24 * var(--u)) 0 calc(16 * var(--u));
    border: 2px solid var(--c-btn);
    border-radius: 100px;
    background: var(--c-btn);
    font-size: clamp(1.2rem, calc(14 * var(--u)), 1.4rem);
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--c-bg);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);

    &:hover {
      background: var(--c-bg);
      color: var(--c-main);
    }
  }

  .c-btn-cta--outline {
    padding-left: calc(16 * var(--u));
    padding-right: calc(16 * var(--u));
    background: var(--c-bg);
    color: var(--c-main);

    &:hover {
      border-color: var(--c-line);
      background: var(--c-line);
    }
  }

  /* カレンダーアイコン（HTMLに直接埋め込んだSVG。色は文字色に連動） */
  .c-btn-cta__icon,
  .c-btn-reserve__icon {
    flex-shrink: 0;
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    min-width: 14px;
    min-height: 14px;
  }

  .c-btn-cta:hover .c-btn-cta__icon { color: var(--c-btn); }

  /* ボタン文字の上下を字面で切り詰めて、上下中央に見えるようにする
     （游ゴシックは文字の上下の余白が不均等で、そのままだと上に寄って見える） */
  .c-btn-cta__label,
  .c-btn-reserve__label {
    text-box: trim-both cap alphabetic;
  }

  /* 一般初診外来Web予約（アクセス・SPメニュー） */
  /* アイコンは左端に固定し、文字はボタン全体の中央（Figma: 左24px・右56px、文字枠は中央） */
  .c-btn-reserve {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(360 * var(--u));
    min-height: calc(54 * var(--u));
    padding: calc(14 * var(--u)) calc(56 * var(--u));
    text-align: center;
    border: 2px solid var(--c-btn);
    border-radius: 100px;
    background: var(--c-btn);
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    color: var(--c-bg);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);

    &:hover {
      background: var(--c-bg);
      color: var(--c-main);

      & .c-btn-reserve__icon { color: var(--c-btn); }
    }

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

  /* SP: フッターとハンバーガーでは枠の幅いっぱいに（固定幅360だとフッターのカードからはみ出す）。
     layout 層に書くと上の width が勝つので、同じ components 層に置く */
  @media (width < 768px) {
    .l-footer .c-btn-reserve,
    .l-spmenu .c-btn-reserve { width: 100%; }
  }

  /* 電話番号 */
  .c-tel {
    font-family: var(--ff-en);
    font-size: clamp(2.6rem, calc(32 * var(--u)), 3.2rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  .c-tel__label {
    margin-right: 0.3em;
    font-size: 0.75em;
    font-weight: 500;
  }

  /* 矢印付きテキストリンク（お知らせ一覧へ） */
  .c-btn-arrow {
    display: inline-flex;
    align-items: center;
    gap: calc(12 * var(--u));
    font-weight: 700;
    line-height: 1.4;
    transition: color var(--dur) var(--ease);

    &::after {
      content: "";
      flex-shrink: 0;
      width: calc(32 * var(--u));
      height: calc(32 * var(--u));
      min-width: 28px;
      min-height: 28px;
      border: 2px solid var(--c-btn);
      border-radius: 50%;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23fbfeff' stroke-width='2'/%3E%3C/svg%3E") center / 50% no-repeat,
        var(--c-btn);
      transition: background-color var(--dur) var(--ease);
    }

    &:hover {
      color: var(--c-main);

      &::after {
        background:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%2343b5ba' stroke-width='2'/%3E%3C/svg%3E") center / 50% no-repeat,
          var(--c-bg);
      }
    }
  }

  /* 矢印付きリンク一覧（診療内容・メガメニュー） */
  .c-links {
    display: flex;
    flex-wrap: wrap;
    gap: calc(16 * var(--u)) calc(24 * var(--u));
  }

  .c-links > li { display: flex; }   /* 行の高さを本文の行間に引っ張られないように */

  .c-links__link {
    display: inline-flex;
    align-items: baseline;
    gap: calc(8 * var(--u));
    font-weight: 700;
    line-height: 1.4;
    transition: color var(--dur) var(--ease);

    &::before {
      content: "";
      flex-shrink: 0;
      width: calc(6 * var(--u));
      height: calc(6 * var(--u));
      min-width: 5px;
      min-height: 5px;
      margin: 0 calc(5 * var(--u)) 0.15em;   /* 矢印の枠 16px（Figma icn-arw） */
      border-top: 2px solid var(--c-text-sub);
      border-right: 2px solid var(--c-text-sub);
      rotate: 45deg;
      transition: border-color var(--dur) var(--ease);
    }

    &:hover {
      color: var(--c-main);

      &::before { border-color: var(--c-btn); }
    }
  }

  /* 診療時間表 ------------------------------------------------------------ */
  .c-schedule {
    width: 100%;
    table-layout: fixed;
    font-size: clamp(1.2rem, calc(14 * var(--u)), 1.4rem);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;

    & th, & td {
      padding-block: calc(10 * var(--u));
      border-bottom: 1px solid var(--c-line);
      font-weight: 700;
    }

    & thead th { padding-top: calc(8 * var(--u)); }

    & tr > :first-child { width: 35%; }

    /* 1200px未満は曜日の列が狭く「日祝」が2行に折れるので、その列だけ広げて1行に収める（カンプどおり） */
    & thead th { white-space: nowrap; }

    @media (width < 1200px) {
      & tr > :last-child { width: 2.4em; }
    }

    /* 768〜1023px は表が狭くなり、時間（09:00～12:30）が隣の●に重なるので時間の列を広げる */
    @media (768px <= width < 1024px) {
      & tr > :first-child { width: 42%; }
    }

    & tbody th {
      font-family: var(--ff-en);
      font-weight: 500;
      white-space: nowrap;
    }

    & td.is-open { color: var(--c-main); }
  }

  .c-schedule--lg { font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem); }

  /* 全角の ＊ はグリフが字面の上寄りにあるため、●と高さを揃えるために下げる */
  .c-schedule__star {
    display: inline-block;
    transform: translateY(0.16em);
  }

  .c-schedule-note {
    margin-top: calc(16 * var(--u));
    font-size: clamp(1.2rem, calc(14 * var(--u)), 1.4rem);
    line-height: 1.6;
    color: var(--c-text-sub);
  }

  .c-schedule-note__mark { color: var(--c-main); }

  /* サイトマップ（フッター・SPメニュー共通） ----------------------------- */
  .c-sitemap {
    display: flex;
    flex-direction: column;
    gap: calc(40 * var(--u));
  }

  .c-sitemap__parent {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--u));
    padding-left: calc(22 * var(--u));
    font-weight: 700;
    line-height: 1.4;
    transition: color var(--dur) var(--ease);

    &::before {
      content: "";
      position: absolute;
      top: 0.5em;
      left: 0;
      width: calc(6 * var(--u));
      height: calc(6 * var(--u));
      min-width: 6px;
      min-height: 6px;
      border: 1.5px solid currentColor;
      border-radius: 50%;
    }

    &:is(a):hover { color: var(--c-main); }
  }

  .c-sitemap__en {
    font-family: var(--ff-en);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    opacity: 0.4;
  }

  .c-sitemap__children {
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--u));
    margin-top: calc(20 * var(--u));
    padding-left: calc(22 * var(--u));

    & a {
      font-size: clamp(1.2rem, calc(14 * var(--u)), 1.4rem);
      font-weight: 700;
      line-height: 1.4;
      color: var(--c-text-sub);
      transition: color var(--dur) var(--ease);

      &:hover { color: var(--c-main); }
    }
  }

  /* 診療カテゴリのアコーディオン ---------------------------------------- */
  .c-acc__btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    width: 100%;
    font-size: clamp(1.2rem, calc(14 * var(--u)), 1.4rem);
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    transition: color var(--dur) var(--ease);

    &::before {
      content: "";
      flex-shrink: 0;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--c-main);
    }

    &:hover { color: var(--c-main); }
  }

  .c-acc__panel {
    display: none;
    flex-wrap: wrap;
    gap: calc(8 * var(--u)) calc(24 * var(--u));

    .c-acc__item.is-open > & { display: flex; }

    & a {
      font-size: clamp(1.2rem, calc(14 * var(--u)), 1.4rem);
      font-weight: 700;
      line-height: 1.4;
      color: var(--c-text-sub);
      transition: color var(--dur) var(--ease);

      &:hover { color: var(--c-main); }
    }
  }

  /* SP（1024px未満）のアコーディオン: 枠付き・＋−アイコン */
  .c-acc {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--uh));
  }

  .c-acc__item {
    border: 1px solid var(--c-line);
    background: var(--c-bg);
  }

  .c-acc__btn {
    padding: calc(16 * var(--uh)) calc(48 * var(--uh)) calc(16 * var(--uh)) calc(16 * var(--uh));
    font-size: 1.4rem;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      right: calc(16 * var(--uh));
      width: 12px;
      height: 12px;
      translate: 0 -50%;
      background:
        linear-gradient(var(--c-btn), var(--c-btn)) center / 100% 2px no-repeat,
        linear-gradient(var(--c-btn), var(--c-btn)) center / 2px 100% no-repeat;
    }

    .c-acc__item.is-open > & { color: var(--c-main); }
  }

  .c-acc__item--woman > .c-acc__btn::before { background: var(--c-woman); }
  .c-acc__item--man > .c-acc__btn::before { background: var(--c-man); }

  /* 開いているときは −（疑似要素は & で書けないので個別に指定） */
  .c-acc__item.is-open > .c-acc__btn::after {
    background: linear-gradient(var(--c-btn), var(--c-btn)) center / 100% 2px no-repeat;
  }

  .c-acc__panel {
    padding: 0 calc(16 * var(--uh)) calc(16 * var(--uh)) calc(30 * var(--uh));

    & a { font-size: 1.4rem; }
  }

  /* フッターのPC表示: 見出し＋一覧（アコーディオンにしない） */
  @media (width >= 768px) {
    /* 等幅の列に等分（1100px以上は3列、未満は4列）。長いリンク名は列の中で折り返す */
    .c-acc--footer {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: calc(40 * var(--u)) calc(40 * var(--u));
      white-space: normal;

      & .c-acc__item {
        border: 0;
        background: none;
      }

      /* カテゴリ名の下線（フッターの区切り線と同じ色） */
      & .c-acc__btn {
        padding: 0 0 calc(8 * var(--u));
        border-bottom: 1px solid var(--c-line);
        pointer-events: none;

        &::after { display: none; }
      }

      .c-acc__item.is-open > .c-acc__btn { color: inherit; }

      & .c-acc__panel {
        display: flex;
        flex-direction: column;
        gap: calc(10 * var(--u));
        margin-top: calc(16 * var(--u));
        padding: 0 0 0 calc(14 * var(--u));
      }
    }
  }

  /* 1100px未満のPC表示: 診療内容一覧が横幅いっぱいになるので4列 */
  @media (768px <= width < 1100px) {
    .c-acc--footer { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* ハンバーガーボタン（1024px未満のみ表示） ----------------------------- */
  .c-hamburger { display: none; }

  @media (width < 1024px) {
    .c-hamburger {
      position: relative;
      display: block;
      width: calc(40 * var(--uh));
      height: calc(40 * var(--uh));
      border: 2px solid var(--c-btn);
      border-radius: 3px;
      background: var(--c-btn);
      color: var(--c-bg);
      transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);

      &:hover {
        background: var(--c-bg);
        color: var(--c-btn);
      }
    }

    .c-hamburger__line,
    .c-hamburger::before {
      position: absolute;
      left: 50%;
      width: calc(24 * var(--uh));
      height: 2px;
      background: currentColor;
      translate: -50% 0;
      transition: rotate var(--dur) var(--ease), top var(--dur) var(--ease);
    }

    .c-hamburger::before {
      content: "";
      top: calc(50% - 4 * var(--uh) - 1px);
    }

    .c-hamburger__line {
      top: calc(50% + 4 * var(--uh) - 1px);
    }

    .c-hamburger[aria-expanded="true"] {
      &::before { top: calc(50% - 1px); rotate: 45deg; }
      & .c-hamburger__line { top: calc(50% - 1px); rotate: -45deg; }
    }
  }

  /* SPメニュー・SPフッターのサイトマップ（1024px未満） */
  @media (width < 1024px) {
    .l-spmenu .c-sitemap { gap: 0; }

    .l-spmenu .c-sitemap__item {
      padding-block: calc(24 * var(--uh));
      border-bottom: 1px solid var(--c-line);
    }

    .l-spmenu .c-sitemap__parent,
    .l-spmenu .c-sitemap__parent--static {
      flex-direction: row;
      align-items: baseline;
      gap: calc(8 * var(--uh));
      font-size: 1.6rem;
    }

    .l-spmenu .c-sitemap__children {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: calc(16 * var(--uh)) calc(24 * var(--uh));
      margin-top: calc(16 * var(--uh));

      & a { font-size: 1.4rem; }
    }
  }

  @media (width < 768px) {
    .c-sitemap--footer {
      gap: 0;

      & .c-sitemap__item {
        padding-block: calc(24 * var(--u));
        border-bottom: 1px solid var(--c-line);
      }
    }

    .l-footer__sitemap .c-sitemap__parent {
      flex-direction: row;
      align-items: baseline;
      gap: calc(8 * var(--u));
      font-size: 1.6rem;
    }

    .c-sitemap--footer .c-sitemap__children {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: calc(16 * var(--u)) calc(24 * var(--u));
      margin-top: calc(16 * var(--u));
    }
  }

  /* スクロールで下から上へフェードイン（セクション単位でまとめて） -----------
     JSが動く環境（html.js）でだけ隠す。表示は main.js が .is-inview を付ける */
  .js .c-fadein {
    opacity: 0;
    translate: 0 40px;
    transition: opacity 0.8s var(--ease), translate 0.8s var(--ease);

    &.is-inview {
      opacity: 1;
      translate: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .js .c-fadein {
      opacity: 1;
      translate: none;
    }
  }

  /* SP下部固定バー -------------------------------------------------------- */
  .c-spbar { display: none; }

  @media (width < 768px) {
    .c-spbar {
      position: fixed;
      inset: auto 0 0;
      z-index: var(--z-spbar);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      height: calc(64 * var(--u));
    }

    .c-spbar__btn {
      display: grid;
      place-items: center;
      align-content: center;
      border: 2px solid transparent;
      font-size: 1.4rem;
      font-weight: 700;
      line-height: 1.4;
      text-align: center;
      transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }

    .c-spbar__btn--tel {
      background: var(--c-main-dark);
      font-family: var(--ff-en);
      font-size: 1.5rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--c-bg-light);

      &:hover { background: var(--c-btn); }
    }

    .c-spbar__tel-label {
      font-size: 1.2rem;
      font-weight: 500;
    }

    .c-spbar__btn--reserve {
      background: var(--c-btn);
      color: var(--c-bg);

      &:hover {
        border-color: var(--c-btn);
        background: var(--c-bg);
        color: var(--c-main);
      }
    }

    .c-spbar__btn--outline {
      border-color: var(--c-btn);
      background: var(--c-bg);
      color: var(--c-main);

      &:hover {
        border-color: var(--c-line);
        background: var(--c-line);
      }
    }
  }
}

/* -------------------------------------------------------------------------
   project: トップページ
   ------------------------------------------------------------------------- */
@layer project {
  /* 01 ファーストビュー ---------------------------------------------------- */
  .p-hero {
    position: relative;
    padding-inline: calc(40 * var(--u));
  }

  .p-hero__visual {
    position: relative;
    height: calc(597 * var(--u));
    overflow: hidden;
    border-radius: calc(15 * var(--u));
  }

  .p-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s var(--ease);

    &.is-active { opacity: 1; z-index: 1; }

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* ゆっくり拡大 */
    &.is-active img,
    &.is-leaving img {
      animation: hero-zoom 5s linear forwards;
    }
  }

  @keyframes hero-zoom {
    from { scale: 1; }
    to { scale: 1.08; }
  }

  .p-hero__catch {
    position: absolute;
    top: calc(40 * var(--u));   /* Figma 48px − 行間の上余白 8px */
    left: calc(40 * var(--u));
    z-index: 2;
    font-size: clamp(1.8rem, calc(24 * var(--u)), 2.4rem);
    line-height: 2.08;
    letter-spacing: 0.15em;

    & em {
      font-weight: 700;
      color: var(--c-main);
    }
  }

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

  .p-hero__dot {
    width: calc(8 * var(--u));
    height: calc(8 * var(--u));
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    background: var(--c-dot);
    transition: background-color var(--dur) var(--ease);

    &.is-active { background: var(--c-dot-active); }
  }

  .p-hero__schedule {
    position: absolute;
    top: calc(379 * var(--u));
    right: 0;
    z-index: 3;
    width: calc(470 * var(--u));
    padding: calc(32 * var(--u));
    background: var(--c-bg-schedule);
  }

  @media (width < 768px) {
    .p-hero { padding-inline: 0; }

    .p-hero__visual {
      height: calc(560 * var(--u));
      border-radius: 0;

      /* 写真の上でもコピーが読めるよう下側を薄く白に */
      &::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        z-index: 1;
        height: 45%;
        background: linear-gradient(to top, rgb(251 254 255 / 0.75), rgb(251 254 255 / 0));
        pointer-events: none;
      }
    }

    .p-hero__catch {
      top: auto;
      bottom: calc(40 * var(--u));
      left: calc(24 * var(--u));
      font-size: 2rem;
      line-height: 1.8;
    }

    .p-hero__schedule { display: none; }
  }

  /* 02 特長アイコン -------------------------------------------------------- */
  .p-points {
    display: flex;
    justify-content: center;
    gap: calc(40 * var(--u));
    margin-top: calc(104 * var(--u));
  }

  .p-points__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(12 * var(--u));
    width: calc(160 * var(--u));
    height: calc(160 * var(--u));
    border-radius: 50%;
    background: var(--c-bg-light);
    font-size: clamp(1.2rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.1em;
    text-align: center;
    color: var(--c-main-dark);

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

  @media (width < 768px) {
    .p-points {
      flex-wrap: wrap;
      gap: 0 calc(16 * var(--u));
      width: calc(336 * var(--u));
      margin: calc(64 * var(--u)) auto 0;
    }

    .p-points__item { font-size: 1.5rem; }
  }

  /* 03 クリニック紹介 ------------------------------------------------------ */
  .p-intro {
    display: flex;
    align-items: center;
    margin-top: calc(104 * var(--u));
  }

  .p-intro__img {
    flex-shrink: 0;
    width: calc(560 * var(--u));

    & img {
      width: 100%;
      height: calc(720 * var(--u));
      object-fit: cover;
    }
  }

  .p-intro__body {
    padding-inline: calc(160 * var(--u));
  }

  .p-intro__title {
    font-size: clamp(2.2rem, calc(28 * var(--u)), 2.8rem);
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.1em;
    color: var(--c-main);
  }

  .p-intro__texts {
    display: flex;
    flex-direction: column;
    gap: calc(32 * var(--u));
    margin-top: calc(48 * var(--u));
  }

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

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

  @media (width < 768px) {
    .p-intro {
      flex-direction: column;
      align-items: stretch;
      gap: calc(64 * var(--u));
      margin-top: calc(96 * var(--u));
    }

    .p-intro__img {
      width: calc(366 * var(--u));

      & img { height: calc(470 * var(--u)); }
    }

    .p-intro__body {
      display: flex;
      flex-direction: column;
      padding-inline: calc(24 * var(--u));
    }

    .p-intro__title { font-size: 2.4rem; }

    .p-intro .c-btn { align-self: center; }
  }

  /* 04 当院の特徴 ---------------------------------------------------------- */
  .p-feature {
    display: flex;
    flex-direction: column;
    width: calc(1200 * var(--u));
    margin: calc(136 * var(--u)) auto 0;
  }

  .p-feature__heading { padding-left: calc(40 * var(--u)); }

  .p-feature__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(72 * var(--u)) calc(24 * var(--u));   /* カード間48px＋台座24px */
    margin-top: calc(72 * var(--u));
  }

  .p-feature__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: calc(40 * var(--u) - 2px);
    border: 2px solid var(--c-line-card);
    border-radius: calc(15 * var(--u));
    background: var(--c-bg);

    /* 番号の台座（半円の出っ張り） */
    &::before {
      content: "";
      position: absolute;
      top: calc(-24 * var(--u) - 2px);
      left: 50%;
      width: calc(80 * var(--u));
      height: calc(80 * var(--u));
      border: 2px solid var(--c-line-card);
      border-radius: 50%;
      background: var(--c-bg);
      translate: -50% 0;
      clip-path: inset(0 0 calc(100% - 24 * var(--u) - 4px) 0);
    }

    /* 列ごとのずらし（右の列ほど高い） */
    &:nth-child(3n + 2) { translate: 0 calc(-48 * var(--u)); }
    &:nth-child(3n) { translate: 0 calc(-96 * var(--u)); }
  }

  .p-feature__num {
    position: absolute;
    top: calc(-8 * var(--u) - 2px);
    left: 50%;
    translate: -50% 0;
    font-family: var(--ff-en);
    font-size: clamp(1.6rem, calc(18 * var(--u)), 1.8rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.15em;
    color: var(--c-main);
  }

  .p-feature__img {
    width: 100%;
    aspect-ratio: 304 / 190;
    object-fit: cover;
    border-radius: calc(5 * var(--u));
  }

  .p-feature__title {
    margin-top: calc(24 * var(--u));
    padding-bottom: calc(16 * var(--u));
    background: var(--dashed-line) 0 100% / 8px 1.5px repeat-x;
    font-size: clamp(1.6rem, calc(20 * var(--u)), 2rem);
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    color: var(--c-main-dark);
  }

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

  .p-feature__btn {
    align-self: center;
    margin-top: calc(48 * var(--u));
  }

  @media (width < 768px) {
    .p-feature {
      width: calc(342 * var(--u));
      margin-top: calc(96 * var(--u));
    }

    .p-feature__heading {
      align-items: center;
      padding-left: 0;
    }

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

    .p-feature__card {
      padding: calc(40 * var(--u) - 2px) calc(24 * var(--u) - 2px);

      &:nth-child(n) { translate: none; }
    }
  }

  /* 05 診療内容 ------------------------------------------------------------ */
  .p-diagnosis {
    width: calc(1360 * var(--u));
    margin: calc(136 * var(--u)) auto 0;
    padding: calc(80 * var(--u)) calc(80 * var(--u)) calc(96 * var(--u));
    border-radius: calc(15 * var(--u));
    background: var(--c-bg-light);
  }

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

  .p-diagnosis__tablist {
    display: flex;
    width: calc(1072 * var(--u));
    margin-inline: auto;
  }

  .p-diagnosis__tab {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(10 * var(--u));
    flex: 1;
    min-height: calc(72 * var(--u));
    padding-block: calc(14 * var(--u));
    border: 2px solid var(--c-main);
    color: var(--c-main);
    transition: opacity var(--dur) var(--ease);

    &:hover { opacity: 0.6; }

    &[aria-selected="true"] {
      background: var(--c-main);
      color: var(--c-bg);

      /* 下向きの三角 */
      &::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        width: calc(24 * var(--u));
        height: calc(18 * var(--u));
        background: var(--c-main);
        translate: -50% 0;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
      }
    }
  }

  .p-diagnosis__tab-num {
    display: grid;
    place-items: center;
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
    min-width: 32px;
    min-height: 32px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-family: var(--ff-en);
    font-size: clamp(1.3rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
  }

  .p-diagnosis__tab-label {
    font-size: clamp(1.6rem, calc(20 * var(--u)), 2rem);
    font-weight: 700;
    line-height: 1.4;
  }

  .p-diagnosis__panel { margin-top: calc(58 * var(--u)); }   /* 三角18px＋40px */

  /* 病気・病名から探す */
  .p-diseases {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(40 * var(--u));
  }

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

    & .c-links {
      align-self: stretch;
      margin-top: calc(32 * var(--u));
    }
  }

  .p-diseases__icon {
    display: grid;
    place-items: center;
    width: calc(120 * var(--u));
    height: calc(120 * var(--u));
    border-radius: 50%;
    background: var(--c-bg);

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

  .p-diseases__title {
    align-self: stretch;
    margin-top: calc(24 * var(--u));
    padding-bottom: calc(12 * var(--u));
    border-bottom: 1.5px solid var(--c-btn);
    font-size: clamp(1.6rem, calc(20 * var(--u)), 2rem);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: var(--c-main-dark);
  }

  /* 症状・お悩みから探す */
  .p-symptoms {
    padding: calc(64 * var(--u)) calc(64 * var(--u)) calc(48 * var(--u));
    border: 4px solid var(--c-line);
    background: var(--c-bg);
  }

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

  .p-symptoms__link {
    position: relative;
    display: block;
    padding: 0 calc(28 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u));
    background: var(--dashed-line) 0 100% / 8px 1.5px repeat-x;
    font-weight: 700;
    line-height: 1.4;
    transition: color var(--dur) var(--ease);

    /* 先頭の点 */
    &::before {
      content: "";
      position: absolute;
      top: 0.55em;
      left: 0;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--c-main);
    }

    /* 右の矢印 */
    &::after {
      content: "";
      position: absolute;
      top: 0.45em;
      right: calc(8 * var(--u));
      width: calc(7 * var(--u));
      height: calc(7 * var(--u));
      min-width: 6px;
      min-height: 6px;
      border-top: 2px solid var(--c-btn);
      border-right: 2px solid var(--c-btn);
      rotate: 45deg;
    }

    &:hover {
      color: var(--c-main);
      background-image: linear-gradient(to right, var(--c-btn) 3px, transparent 3px);
    }
  }

  .p-symptoms__link--man::before { background: var(--c-man); }
  .p-symptoms__link--woman::before { background: var(--c-woman); }

  .p-symptoms__urgent {
    width: calc(800 * var(--u));
    margin: calc(48 * var(--u)) auto 0;
    padding: calc(24 * var(--u)) calc(10 * var(--u));
    border-radius: calc(5 * var(--u));
    background: var(--c-bg-pale);
    text-align: center;
  }

  .p-symptoms__urgent-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(8 * var(--u));
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-main-dark);

    & img { width: calc(16 * var(--u)); min-width: 14px; }
  }

  .p-symptoms__urgent-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(8 * var(--u));
    margin-top: calc(10 * var(--u));

    & li {
      padding: calc(2 * var(--u)) calc(12 * var(--u));
      border: 1.5px solid var(--c-main);
      background: var(--c-bg);
      font-weight: 700;
      line-height: 1.4;
      color: var(--c-main);
    }
  }

  /* 1100px未満のPC表示: 列が細くなりすぎるので2列に */
  @media (768px <= width < 1100px) {
    .p-diseases {
      grid-template-columns: repeat(2, 1fr);
      gap: calc(64 * var(--u)) calc(80 * var(--u));
    }

    .p-symptoms__list { grid-template-columns: repeat(2, 1fr); }
  }

  @media (width < 768px) {
    .p-diagnosis {
      width: 100%;
      margin-top: calc(96 * var(--u));
      padding: calc(80 * var(--u)) calc(24 * var(--u)) calc(96 * var(--u));
    }

    .p-diagnosis__tablist { width: 100%; }

    .p-diagnosis__tab {
      flex-direction: column;
      min-height: calc(118 * var(--u));

      &[aria-selected="true"]::after {
        width: calc(16 * var(--u));
        height: calc(12 * var(--u));
      }
    }

    .p-diagnosis__tab-num { width: 32px; height: 32px; font-size: 1.3rem; }

    .p-diagnosis__tab-label {
      font-size: 1.6rem;
      text-align: center;
    }

    .p-diseases {
      grid-template-columns: 1fr 1fr;
      gap: calc(32 * var(--u)) calc(24 * var(--u));
    }

    .p-diseases__icon {
      width: calc(96 * var(--u));
      height: calc(96 * var(--u));

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

    .p-diseases__title {
      flex-grow: 0;
      min-height: calc(61 * var(--u));
      display: grid;
      place-items: end center;
      font-size: 1.8rem;
    }

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

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

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

    .p-symptoms__urgent {
      width: 100%;
      margin-top: calc(32 * var(--u));
      padding: calc(24 * var(--u)) calc(16 * var(--u));
    }

    .p-symptoms__urgent-title { display: block; }
    .p-symptoms__urgent-title img { display: none; }

    .p-symptoms__urgent-list {
      gap: 0;
      margin-top: calc(16 * var(--u));
      padding: calc(8 * var(--u)) calc(16 * var(--u));
      border: 1.5px solid var(--c-line);
      background: var(--c-bg);

      & li {
        padding: 0;
        border: 0;
        background: none;
        color: var(--c-text);

        & + li::before { content: "・"; }
      }
    }
  }

  /* 04 診療ピックアップ ---------------------------------------------------- */
  .p-pickup {
    margin-top: calc(136 * var(--u));
    padding-block: calc(136 * var(--u));
    border-top: 1.5px solid var(--c-grid);
    border-bottom: 1.5px solid var(--c-grid);
    background:
      linear-gradient(var(--c-grid) 1.5px, transparent 1.5px) 0 0 / calc(30 * var(--u)) calc(30 * var(--u)),
      linear-gradient(90deg, var(--c-grid) 1.5px, transparent 1.5px) 0 0 / calc(30 * var(--u)) calc(30 * var(--u)),
      var(--c-bg);
  }

  .p-pickup__inner {
    width: calc(1120 * var(--u));
    margin-inline: auto;
  }

  .p-pickup__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .p-pickup__lead {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    font-weight: 700;
    line-height: 1.4;

    & img { width: calc(19 * var(--u)); min-width: 16px; }
  }

  .p-pickup__spark-r { scale: -1 1; }

  .p-pickup__title {
    display: flex;
    align-items: center;
    gap: calc(2 * var(--u));
    margin-top: calc(5 * var(--u));
    font-size: clamp(2.8rem, calc(36 * var(--u)), 3.6rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-main);

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

  /* 両側の線＋中央の3点 */
  .p-pickup__line {
    display: flex;
    align-items: center;
    gap: calc(60 * var(--u));   /* 3点の幅28px＋左右16px */
    width: calc(412 * var(--u));
    height: 4px;
    margin-top: calc(8 * var(--u));
    /* 中央の3点 */
    background:
      radial-gradient(circle, var(--c-main) 2px, transparent 2.5px) calc(50% - 12px) 50% / 4px 4px no-repeat,
      radial-gradient(circle, var(--c-main) 2px, transparent 2.5px) 50% 50% / 4px 4px no-repeat,
      radial-gradient(circle, var(--c-main) 2px, transparent 2.5px) calc(50% + 12px) 50% / 4px 4px no-repeat;

    /* 両側の線 */
    &::before,
    &::after {
      content: "";
      flex: 1;
      height: 2px;
      background: var(--c-main);
    }
  }

  .p-pickup__list {
    display: flex;
    gap: calc(80 * var(--u));
    margin-top: calc(48 * var(--u));
  }

  .p-pickup__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;

    &:nth-child(2) { padding-top: calc(40 * var(--u)); }
  }

  .p-pickup__img {
    position: relative;
    width: calc(320 * var(--u));

    & img {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 50%;
    }
  }

  .p-pickup__num {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: calc(80 * var(--u));
    height: calc(80 * var(--u));
    border-radius: 50%;
    background: var(--c-main);
    font-family: var(--ff-en);
    font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--c-bg);
  }

  .p-pickup__name {
    margin-top: calc(32 * var(--u));
    font-size: clamp(2.2rem, calc(28 * var(--u)), 2.8rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--c-main);
  }

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

  .p-pickup__btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(12 * var(--u));
    margin-top: calc(32 * var(--u));
  }

  @media (width < 768px) {
    .p-pickup {
      margin-top: calc(96 * var(--u));
      padding-block: calc(96 * var(--u));
    }

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

    .p-pickup__title { font-size: 3rem; }

    .p-pickup__line { width: calc(300 * var(--u)); }

    .p-pickup__list {
      flex-direction: column;
      gap: calc(64 * var(--u));
      margin-top: calc(56 * var(--u));
    }

    .p-pickup__item:nth-child(2) { padding-top: 0; }

    .p-pickup__img { width: calc(280 * var(--u)); }

    .p-pickup__name { margin-top: calc(24 * var(--u)); }

    .p-pickup__btns { margin-top: calc(24 * var(--u)); }
  }

  /* 07 院長紹介 ------------------------------------------------------------ */
  .p-doctor__inner {
    display: flex;
    align-items: center;
    gap: calc(96 * var(--u));
    width: calc(1120 * var(--u));
    margin: calc(115 * var(--u)) auto 0;
  }

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

  .p-doctor__name {
    display: flex;
    gap: calc(24 * var(--u));
    margin-top: calc(48 * var(--u));
    font-size: clamp(2rem, calc(28 * var(--u)), 2.8rem);
    line-height: 1.4;
  }

  .p-doctor__role { font-weight: 700; }

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

  .p-doctor__career-title {
    line-height: 1.4;
    letter-spacing: 0.1em;
  }

  .p-doctor__career-list {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--u));
    margin-top: calc(24 * var(--u));

    & li {
      position: relative;
      padding: 0 0 calc(16 * var(--u)) calc(14 * var(--u));
      background: var(--dashed-line) 0 100% / 8px 1.5px repeat-x;
      line-height: 1.4;

      &::before {
        content: "";
        position: absolute;
        top: 0.55em;
        left: 0;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--c-main);
      }
    }
  }

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

  .p-doctor__visual {
    position: relative;
    isolation: isolate;
    width: calc(544 * var(--u));
  }

  .p-doctor__photo { width: 100%; }

  /* 奥の院内写真（Figmaで不透明度40%を焼き込み済み） */
  .p-doctor__sub {
    position: absolute;
    top: calc(350 * var(--u));
    left: calc(344 * var(--u));
    z-index: -1;
    width: calc(320 * var(--u));
  }

  .p-doctor__bubble {
    position: absolute;
    top: calc(-57 * var(--u));
    left: calc(-56 * var(--u));
    display: grid;
    place-items: center;
    width: calc(200 * var(--u));
    height: calc(200 * var(--u));
    padding-bottom: calc(4 * var(--u));
    background: url("../imgs/doctor-bubble.svg") center / contain no-repeat;
    font-size: clamp(1.5rem, calc(20 * var(--u)), 2rem);
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
    color: var(--c-main-dark);
  }

  @media (width < 768px) {
    .p-doctor__inner {
      flex-direction: column;
      gap: calc(96 * var(--u));
      width: 100%;
      margin-top: calc(96 * var(--u));
      padding-inline: calc(24 * var(--u));
    }

    .p-doctor__visual {
      order: -1;
      width: calc(326 * var(--u));
    }

    .p-doctor__sub {
      top: calc(110 * var(--u));
      left: calc(118 * var(--u));
      width: calc(240 * var(--u));
    }

    .p-doctor__bubble {
      top: calc(-40 * var(--u));
      left: calc(-24 * var(--u));
      width: calc(120 * var(--u));
      height: calc(120 * var(--u));
      font-size: 1.5rem;
      line-height: 1.5;
    }

    .p-doctor__body {
      display: flex;
      flex-direction: column;
      width: 100%;

      & .c-heading { align-items: center; }
    }

    .p-doctor__name {
      justify-content: center;
      font-size: 2rem;
    }

    .p-doctor .c-btn { align-self: center; }
  }

  /* 08 お知らせ ------------------------------------------------------------ */
  .p-news {
    position: relative;
    isolation: isolate;
    width: calc(1040 * var(--u));
    margin: calc(216 * var(--u)) auto 0;   /* 院長写真の奥の画像がはみ出す分を含む */
  }

  .p-news__deco {
    position: absolute;
    top: calc(-72 * var(--u));
    left: calc(-80 * var(--u));
    z-index: -1;
    width: calc(160 * var(--u));
  }

  .p-news__box {
    display: flex;
    gap: calc(80 * var(--u));
    padding: calc(80 * var(--u)) calc(80 * var(--u)) calc(72 * var(--u));
    border: 4px solid var(--c-line);
    background: var(--c-bg);
  }

  .p-news__title {
    flex-shrink: 0;
    font-size: clamp(2.2rem, calc(28 * var(--u)), 2.8rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.15em;
    color: var(--c-main);
  }

  .p-news__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(24 * var(--u));
    flex: 1;
  }

  .p-news__list {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--u));
    align-self: stretch;
  }

  .p-news__link {
    display: flex;
    gap: calc(24 * var(--u));
    padding-bottom: calc(16 * var(--u));
    background: var(--dashed-line) 0 100% / 8px 1.5px repeat-x;
    transition: color var(--dur) var(--ease);

    & time {
      flex-shrink: 0;
      font-family: var(--ff-en);
    }

    &:hover { color: var(--c-main); }
  }

  /* PC: 日付を列にして、全行でタイトルの行頭をそろえる（日付の数字の幅が行ごとに違うため） */
  @media (width >= 768px) {
    .p-news__list {
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr);
      column-gap: calc(24 * var(--u));

      & > li {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
      }
    }

    .p-news__link {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
    }
  }

  @media (width < 768px) {
    .p-news {
      width: calc(310 * var(--u));
      margin-top: calc(128 * var(--u));
    }

    .p-news__deco {
      top: calc(-32 * var(--u));
      left: calc(-24 * var(--u));
    }

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

    .p-news__title {
      font-size: 2.4rem;
      text-align: center;
    }

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

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

  .u-sp { display: none; }

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

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

/* =========================================================================
   下層ページ（Figma: 1440 / 390）
   - 本文920 + サイド280（間80）= 1280。左右マージン80
   - SPはサイドバー無し。本文342・左右マージン24
   ========================================================================= */

@layer tokens {
  :root {
    --c-brown: #50464f;               /* CATEGORY ラベル */
    --c-hero-from: #ddf3f3;
    --c-hero-to: #d9efef;
    --c-side-bg: #f4f9f8;             /* サイドバーのパネル */
    --c-side-line: #e1eae8;           /* サイドバーの枠線・見出し下線 */
  }
}

/* -------------------------------------------------------------------------
   layout: 下層の2カラム
   ------------------------------------------------------------------------- */
@layer layout {
  .l-under {
    display: grid;
    grid-template-columns: calc(920 * var(--u)) calc(280 * var(--u));
    gap: calc(80 * var(--u));
    width: calc(1280 * var(--u));
    margin: calc(120 * var(--u)) auto 0;
  }

  .l-under__main { min-width: 0; }

  @media (width < 768px) {
    .l-under {
      display: block;
      width: auto;
      margin-top: calc(80 * var(--u));
      padding-inline: calc(24 * var(--u));
    }
  }
}

/* -------------------------------------------------------------------------
   components: ページヘッダー（ヒーロー帯＋パンくず）
   ------------------------------------------------------------------------- */
@layer components {
  /* 幅は1600pxまでFigmaどおり（1360、左右40）。それより広い画面では帯も広げ、
     左右の余白を「1360のままだった場合」の半分にする（余白40を下回らないところから） */
  .p-pagehead {
    --pagehead-w: calc(100vw - max(calc(80 * var(--u)), (100vw - 1360 * var(--u)) / 2));
    --pagehead-dx: calc(var(--pagehead-w) - 1360 * var(--u));   /* 1360より広がった分。写真を右に寄せるのに使う */
    width: var(--pagehead-w);
    margin-inline: auto;
  }

  .p-pagehead__hero {
    position: relative;
    overflow: hidden;              /* はみ出した疾患アイコンを帯で切る */
    height: calc(270 * var(--u));
    border-radius: calc(15 * var(--u));
    background: linear-gradient(90deg, var(--c-hero-from), var(--c-hero-to));
  }

  /* 不透明度とぼかしはSVGに焼き込み済み。
     ブレンドはCSS側で掛ける（SVG内に書くと帯のグラデーションと混ざらず色がずれる） */
  .p-pagehead__icon {
    position: absolute;
    top: calc(16 * var(--u));
    right: calc(80 * var(--u));
    width: calc(300 * var(--u));
    height: calc(300 * var(--u));
    mix-blend-mode: hard-light;
  }

  .p-pagehead__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(16 * var(--u));
    width: 100%;
    height: 100%;
    padding: calc(80 * var(--u)) calc(80 * var(--u)) calc(92 * var(--u));
  }

  .p-pagehead__tag {
    padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(2 * var(--u));
    border-radius: calc(2 * var(--u));
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-bg);
    background: var(--c-main);
  }

  .p-pagehead__title {
    word-break: auto-phrase;   /* 「腎臓がん（腎細胞がん）」などを語の途中で折り返さない */
    font-size: clamp(3.2rem, calc(40 * var(--u)), 4rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.15em;
    color: var(--c-main-dark);
  }

  @media (width < 768px) {
    .p-pagehead { --pagehead-dx: 0px; width: 100%; }

    .p-pagehead__hero { border-radius: 0; }

    .p-pagehead__icon { top: 0; right: calc(-64 * var(--u)); }

    /* SPは帯の高さを「最低270・タイトルに合わせて上に伸びる」にし、文字は下端基準 */
    .p-pagehead__hero {
      display: flex;
      flex-direction: column;
      height: auto;
      min-height: calc(270 * var(--u));
    }

    .p-pagehead__body {
      flex: 1;
      height: auto;
      justify-content: flex-end;
      gap: calc(12 * var(--u));
      width: 100%;
      padding: calc(64 * var(--u)) calc(32 * var(--u)) calc(40 * var(--u));
    }

    .p-pagehead__title {
      font-size: clamp(2.4rem, calc(30 * var(--u)), 3rem);
      color: var(--c-main);
    }
  }

  /* パンくず --------------------------------------------------------------- */
  .c-breadcrumb {
    margin-top: calc(24 * var(--u));
    padding-inline: calc(40 * var(--u));
  }

  /* 上の階層は省略せず、入りきらなければ折り返す。今いるページ名だけ、1行に収まらなければ「…」で省略
     （全文はHTMLとtitle属性に残る） */
  .c-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(8 * var(--u)) calc(16 * var(--u));
  }

  .c-breadcrumb__item {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(16 * var(--u));
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-text-sub);
  }

  .c-breadcrumb__item + .c-breadcrumb__item::before {
    content: "";
    flex-shrink: 0;
    width: calc(8 * var(--u));
    height: calc(8 * var(--u));
    background: url("../imgs/icon-breadcrumb-arrow.svg") no-repeat center / contain;
  }

  .c-breadcrumb__link {
    display: flex;
    align-items: center;
    gap: calc(4 * var(--u));
    transition: opacity var(--dur) var(--ease);

    &:hover { opacity: 0.6; }
  }

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

  .c-breadcrumb__item--current {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
  }

  .c-breadcrumb__current {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @media (width < 768px) {
    .c-breadcrumb {
      margin-top: calc(16 * var(--u));
      padding-inline: calc(16 * var(--u));
    }
  }
}

/* -------------------------------------------------------------------------
   components: 下層本文の部品
   ------------------------------------------------------------------------- */
@layer components {
  /* h2＋下線 */
  .c-heading-line {
    padding-bottom: calc(16 * var(--u));
    border-bottom: 1.5px solid var(--c-line);
    font-size: clamp(2.2rem, calc(28 * var(--u)), 2.8rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-main);
  }

  /* h3/h4（●＋見出し） */
  .c-heading-dot {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    font-size: clamp(1.8rem, calc(20 * var(--u)), 2rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-main);

    /* Figmaは塗りつぶしではなく輪郭（stroke 1.5px） */
    &::before {
      content: "";
      flex-shrink: 0;
      width: calc(8 * var(--u));
      height: calc(8 * var(--u));
      border: 1.5px solid currentColor;
      border-radius: 50%;
    }
  }

  /* 本文の段落グループ */
  .c-texts {
    display: flex;
    flex-direction: column;
    gap: calc(12 * var(--u));
    line-height: 1.6;
  }

  /* 本文中のリンク */
  .c-texts a {
    font-weight: 700;
    color: var(--c-main-dark);
    text-decoration: underline;
    text-underline-offset: 0.25em;
    transition: opacity var(--dur) var(--ease);

    &:hover { opacity: 0.6; }
  }

  /* 本文中の画像 */
  .c-under-img {
    width: 100%;
    aspect-ratio: 920 / 518;
    object-fit: cover;
  }

  /* 図など切り抜けない画像は、HTML の width / height の比率のまま出す */
  .c-under-img--auto { aspect-ratio: auto; height: auto; }

  /* 囲みボックス（症状の分類など） */
  .c-notebox {
    display: flex;
    flex-direction: column;
    gap: calc(32 * var(--u));
    padding: calc(56 * var(--u));
    border: 1.5px solid var(--c-bg-light);
    background: var(--c-bg-schedule);
  }

  .c-notebox__group {
    display: flex;
    flex-direction: column;
    gap: calc(12 * var(--u));
  }

  /* ●付きリスト */
  .c-dotlist {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--u));
    line-height: 1.6;
  }

  .c-dotlist > li {
    position: relative;
    padding-left: calc(14 * var(--u));

    &::before {
      content: "";
      position: absolute;
      top: calc((1.6em - 6 * var(--u)) / 2);   /* 1行目の中央に合わせる */
      left: 0;
      width: calc(6 * var(--u));
      height: calc(6 * var(--u));
      border-radius: 50%;
      background: var(--c-main);
    }
  }

  @media (width < 768px) {
    .c-heading-line { font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem); }

    .c-notebox {
      gap: calc(40 * var(--u));
      padding: calc(40 * var(--u)) calc(24 * var(--u));
    }
  }
}

/* -------------------------------------------------------------------------
   components: 右カラムのカテゴリナビ（PCのみ）
   Figma: btns（624:9918）のリデザイン版
   ------------------------------------------------------------------------- */
@layer components {
  .c-side {
    display: flex;
    flex-direction: column;
    gap: calc(40 * var(--u));
  }

  .c-side__label {
    font-family: var(--ff-en);
    font-size: clamp(1.6rem, calc(20 * var(--u)), 2rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    color: var(--c-brown);
  }

  .c-side__body {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--u));
  }

  .c-side__item {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--u));
  }

  .c-side__item.is-open { padding-bottom: calc(24 * var(--u)); }

  .c-side__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(16 * var(--u));
    width: 100%;
    padding-right: calc(8 * var(--u));
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    color: var(--c-text);
  }

  /* ＋／－（開いている間は横棒だけ） */
  .c-side__item .c-side__btn::after {
    content: "";
    flex-shrink: 0;
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
    background:
      linear-gradient(var(--c-main) 0 0) center / 100% 1.5px no-repeat,
      linear-gradient(var(--c-main) 0 0) center / 1.5px 100% no-repeat;
  }

  .c-side__item.is-open .c-side__btn::after {
    background: linear-gradient(var(--c-main) 0 0) center / 100% 1.5px no-repeat;
  }

  /* 閉じている見出しには下線。開いているものはパネルが受ける */
  .c-side__item:not(.is-open) .c-side__btn,
  .c-side__single .c-side__btn {
    padding-bottom: calc(16 * var(--u));
    border-bottom: 1.5px solid var(--c-side-line);
  }

  .c-side__item:not(.is-open) .c-side__panel { display: none; }

  .c-side__panel {
    padding: calc(32 * var(--u)) calc(24 * var(--u));
    border: 1.5px solid var(--c-side-line);
    background: var(--c-side-bg);
  }

  .c-side__cats {
    display: flex;
    flex-direction: column;
    gap: calc(32 * var(--u));
  }

  .c-side__cat {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--u));
  }

  .c-side__cat-name {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    padding-bottom: calc(8 * var(--u));
    border-bottom: 1.5px solid var(--c-line);
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-text-sub);

    /* ●は輪郭（stroke 1.5px）。色は文字色に追従 */
    &::before {
      content: "";
      flex-shrink: 0;
      width: calc(8 * var(--u));
      height: calc(8 * var(--u));
      border: 1.5px solid currentColor;
      border-radius: 50%;
    }
  }

  .c-side__links {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--u));
  }

  .c-side__links > li {
    padding-bottom: calc(8 * var(--u));
    border-bottom: 1.5px solid var(--c-line);
  }

  .c-side__link {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    font-size: clamp(1.2rem, calc(14 * var(--u)), 1.4rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-main);
    transition: opacity var(--dur) var(--ease);

    &::before {
      content: "";
      flex-shrink: 0;
      width: calc(16 * var(--u));
      height: calc(16 * var(--u));
      background: url("../imgs/icon-side-arrow.svg") no-repeat center / contain;
    }

    &:hover { opacity: 0.6; }

    &[aria-current="page"] { color: var(--c-main-dark); text-decoration: underline; }
  }

  .c-side__link--woman { color: var(--c-woman); }
  .c-side__link--man { color: var(--c-man); }

  /* SPはサイドバー無し（フッターのアコーディオンが同じ役割） */
  @media (width < 768px) {
    .c-side { display: none; }
  }
}

/* -------------------------------------------------------------------------
   project: 疾患詳細ページ
   ------------------------------------------------------------------------- */
@layer project {
  /* 余白はコラム記事（topics.css の .p-post__body）に寄せている（2026-10-21、膀胱炎で試してから全ページに）
     PC: セクション間64、大見出しの下32、要素間24、小見出しの上48・下20。本文は段落の間1行・行間1.8 */
  .p-disease__section + .p-disease__section { margin-top: calc(64 * var(--u)); }

  /* 本文の中の小見出し（「日帰りで受けられるWAVE治療」など）は、記事の h3 と同じ縦ラインの見出しに。
     箱（c-notebox）の中のまとまりの名前は ● のまま */
  .p-disease__section > .c-heading-dot {
    display: block;
    padding-left: calc(14 * var(--u));
    border-left: 4px solid var(--c-main);
    font-size: clamp(1.7rem, calc(19 * var(--u)), 1.9rem);
    line-height: 1.5;
    color: var(--c-text);

    &::before { content: none; }
  }

  /* 関連ページ（template-parts/related-diseases.php）の見出し下の一文。ボタンは診療案内の .p-guide__btn */
  .p-disease__related-lead {
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    line-height: 1.6;
    color: var(--c-text-sub);
  }

  .p-disease__section > .p-disease__related-lead + .p-guide__btns { margin-top: calc(24 * var(--u)); }

  /* スターフォーマーの紹介（template-parts/starformer-box.php）: 左に機器の写真、右に紹介文とリンク。SPは縦 */
  .p-disease__sf {
    display: grid;
    grid-template-columns: calc(300 * var(--u)) minmax(0, 1fr);
    align-items: center;
    gap: calc(32 * var(--u));
    padding: calc(32 * var(--u));
    border-radius: calc(8 * var(--u));
    background: var(--c-bg-pale);
  }

  .p-disease__sf-img {
    width: 100%;
    height: auto;
    border-radius: calc(6 * var(--u));
  }

  .p-disease__sf-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(12 * var(--u));
  }

  .p-disease__sf-title {
    font-size: clamp(1.7rem, calc(19 * var(--u)), 1.9rem);
    font-weight: 700;
    line-height: 1.5;
    color: var(--c-main-dark);

    & small { font-size: 0.75em; }
  }

  .p-disease__sf-text { line-height: 1.8; }

  .p-disease__sf .c-btn-sub { margin-top: calc(4 * var(--u)); }

  @media (width < 768px) {
    .p-disease__sf {
      grid-template-columns: minmax(0, 1fr);
      gap: calc(20 * var(--u));
      padding: calc(24 * var(--u));
    }

    .p-disease__sf-title small { display: block; }   /* 括弧の名前は2行目に */
  }

  /* 費用の目安（template-parts/fee-box.php）: 表は本文の幅いっぱい。料金ページの幅（1120・536）は使わない。
     SP は .c-table の SP ルール（中身に合わせた幅・収まらない表だけ横スクロール）に任せる */
  .p-disease__section .c-table { width: 100%; }
  .p-disease__section .c-table--sm tbody th { width: 65%; }


  .p-disease__section > * + * { margin-top: calc(24 * var(--u)); }

  .p-disease__section > .c-heading-line + * { margin-top: calc(32 * var(--u)); }   /* 大見出し（緑の下線）の下 */

  .p-disease__section > * + .c-heading-dot { margin-top: calc(48 * var(--u)); }   /* 小見出し（左の縦線）の上 */

  .p-disease__section > .c-heading-dot + * { margin-top: calc(20 * var(--u)); }    /* 小見出しの下 */

  .p-disease__section .c-texts {
    gap: 1.2em;
    line-height: 1.8;
  }

  /* SP: セクション間56。ほかは PC と同じ */
  @media (width < 768px) {
    .p-disease__section + .p-disease__section { margin-top: calc(56 * var(--u)); }
  }
}

/* =========================================================================
   下層ページ: 共通セクション部品（当院について 他で使う）
   ========================================================================= */
@layer components {
  /* 下層のセクション見出し（英字＋日本語）。トップの c-heading を32pxで使う */
  .c-heading--under {
    width: fit-content;
  }

  .c-heading--under .c-heading__en { text-align: center; }

  .c-heading--under .c-heading__ja {
    font-size: clamp(2.4rem, calc(32 * var(--u)), 3.2rem);
  }

  @media (width < 768px) {
    .c-heading--under { gap: calc(16 * var(--u)); }
    .c-heading--under .c-heading__ja { font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem); }

    /* 当院についてだけ大きい */
    .p-clinic .c-heading--under { gap: calc(12 * var(--u)); }
    .p-clinic .c-heading--under .c-heading__ja { font-size: clamp(2.2rem, calc(28 * var(--u)), 2.8rem); }
  }

  /* 本文の段落グループ（12px間隔）を束ねる器。32px間隔 */
  .c-texts-group {
    display: flex;
    flex-direction: column;
    gap: calc(32 * var(--u));
    width: 100%;
  }

  /* 本文中の強調（teal・太字） */
  .c-em {
    font-weight: 700;
    color: var(--c-main);
  }

  /* 見出しの上に乗る小さなラベル */
  .c-tag {
    display: inline-flex;
    align-items: center;
    padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(2 * var(--u));
    border-radius: calc(2 * var(--u));
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-main-dark);
    background: var(--c-tag);
  }

  /* 囲みカード（症状ボックスと同じ見た目） */
  .c-card {
    padding: calc(64 * var(--u)) calc(80 * var(--u));
    border: 1.5px solid var(--c-bg-light);
    border-radius: calc(10 * var(--u));
    background: var(--c-bg-schedule);
  }

  @media (width < 768px) {
    .c-card { padding: calc(34 * var(--u)) calc(26 * var(--u)); }
  }
}


/* -------------------------------------------------------------------------
   project: 当院について（clinic）
   Figma: 443:2189（PC 1440）/ 469:7658（SP 390）
   ------------------------------------------------------------------------- */
@layer project {
  .p-clinic { position: relative; overflow: hidden; }

  .p-clinic__section {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(64 * var(--u));
    padding: calc(120 * var(--u));
  }

  .p-clinic__section--tint { background: var(--c-bg-schedule); }

  /* 白の地のカードは薄い緑（c-card の既定）、--tint の地のカードは白。カードの中の白い注記は逆にする */
  .p-clinic__section--tint .c-card { background: var(--c-bg); }
  .p-clinic__section--tint .p-clinic__note { background: var(--c-bg-schedule); }

  /* 装飾（ぼかした写真。角丸10px・不透明度50%・ぼかし3px） */
  /* 位置は .p-clinic（ページヘッダーの下）が基準。Figmaのページ座標からヘッダー分（PC 439 / SP 378）を引いた値 */
  .p-clinic__deco {
    position: absolute;
    border-radius: calc(10 * var(--u));
    opacity: 0.5;
    filter: blur(3px);
    object-fit: cover;
    pointer-events: none;
  }

  .p-clinic__deco--1 {
    top: calc(40 * var(--u));
    right: calc(96 * var(--u));
    width: calc(160 * var(--u));
    height: calc(160 * var(--u));
  }

  .p-clinic__deco--2 {
    top: calc(324 * var(--u));
    opacity: 0.4;
    left: calc(-40 * var(--u));
    width: calc(240 * var(--u));
    height: calc(240 * var(--u));
  }

  .p-clinic__deco--3 {
    top: calc(925 * var(--u));
    opacity: 0.6;
    right: calc(56 * var(--u));
    width: calc(200 * var(--u));
    height: calc(200 * var(--u));
  }

  /* 01 リード */
  .p-clinic__lead {
    font-size: clamp(2.2rem, calc(28 * var(--u)), 2.8rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.086em;
    text-align: center;
    color: var(--c-text);
  }

  .p-clinic__lead em { color: var(--c-main); }

  .p-clinic__intro { width: calc(800 * var(--u)); }

  .p-clinic__card {
    display: flex;
    gap: calc(64 * var(--u));
    align-items: flex-start;
    width: calc(1120 * var(--u));
  }

  .p-clinic__card-img {
    flex-shrink: 0;
    width: calc(320 * var(--u));
    height: calc(320 * var(--u));
    border-radius: calc(5 * var(--u));
    object-fit: cover;
  }

  .p-clinic__card-body {
    display: flex;
    flex-direction: column;
    gap: calc(32 * var(--u));
    flex: 1;
    min-width: 0;
  }

  .p-clinic__card-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(12 * var(--u));
  }

  .p-clinic__card-title {
    font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: var(--c-main-dark);
  }

  /* 02 写真の帯 */
  .p-clinic__band {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: calc(440 * var(--u));
    object-fit: cover;
  }

  /* 03 診療時間・アクセス */
  .p-clinic__cols {
    display: flex;
    gap: calc(48 * var(--u));
    align-items: flex-start;
    width: calc(1120 * var(--u));
  }

  .p-clinic__col {
    display: flex;
    flex-direction: column;
    gap: calc(40 * var(--u));
    flex: 1;
    min-width: 0;
  }

  .p-clinic__h3 {
    font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.1em;
    text-align: center;
    color: var(--c-text);
  }

  .p-clinic__map {
    width: 100%;
    aspect-ratio: 524 / 300;
    object-fit: cover;
    border-radius: calc(5 * var(--u));
  }

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

  .p-clinic__parking {
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--u));
    width: calc(1120 * var(--u));
  }

  .p-clinic__parking-lead {
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.1em;
    text-align: center;
    color: var(--c-main);
  }

  .p-clinic__parking-list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(15 * var(--u)) calc(24 * var(--u));
  }

  .p-clinic__parking-list > li {
    display: flex;
    flex: 1 0 0;
    min-width: calc(180 * var(--u));
    align-items: center;
    gap: calc(8 * var(--u));
    padding-bottom: calc(4 * var(--u));
    border-bottom: 1px dashed var(--c-line);
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
    line-height: 1.4;
  }

  .p-clinic__parking-list > li::before {
    content: "";
    flex-shrink: 0;
    width: calc(6 * var(--u));
    height: calc(6 * var(--u));
    border-radius: 50%;
    background: var(--c-main);
  }

  .p-clinic__note {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(8 * var(--u)) calc(10 * var(--u));
    border: 1.5px solid var(--c-bg-light);
    border-radius: calc(5 * var(--u));
    background: var(--c-bg);
    font-size: clamp(1.2rem, calc(14 * var(--u)), 1.4rem);
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
  }

  /* 受診について: ご予約・お支払い（左に項目、右に内容。行の間は点線） */
  .p-clinic__visit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(40 * var(--u));
    width: calc(1120 * var(--u));
  }

  .p-clinic__visit-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    width: 100%;
    font-size: var(--fs-body);
    line-height: 1.6;

    & > div {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
      gap: calc(48 * var(--u));
      padding-block: calc(20 * var(--u));
      border-bottom: 1px dashed var(--c-line);
    }

    & > div:first-child { padding-top: 0; }
    & dt { font-weight: 700; color: var(--c-main-dark); }
  }

  /* 04 院長紹介 */
  .p-clinic__doctor {
    display: flex;
    gap: calc(80 * var(--u));
    align-items: flex-start;
    width: calc(1120 * var(--u));
  }

  .p-clinic__doctor-body {
    display: flex;
    flex-direction: column;
    gap: calc(40 * var(--u));
    width: calc(560 * var(--u));
  }

  .p-clinic__doctor-name {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--u));
    padding-block: calc(16 * var(--u));
    border-block: 2px solid var(--c-line);
    font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: var(--c-main);
  }

  .p-clinic__doctor-photo {
    flex-shrink: 0;
    width: calc(480 * var(--u));
    height: calc(480 * var(--u));
    border-radius: calc(10 * var(--u));
    object-fit: cover;
  }

  .p-clinic__career {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(48 * var(--u));
    width: calc(1201 * var(--u));
  }

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

  .p-clinic__career-title {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    padding-bottom: calc(16 * var(--u));
    border-bottom: 1.5px solid var(--c-line);
    font-size: clamp(1.8rem, calc(20 * var(--u)), 2rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-text);
  }

  .p-clinic__career-title::before {
    content: "";
    flex-shrink: 0;
    width: calc(8 * var(--u));
    height: calc(8 * var(--u));
    border: 1.5px solid var(--c-main);
    border-radius: 50%;
  }

  /* 04 スタッフ紹介: 院長以外の医師（写真なし）。左に肩書きと名前、右に所属・担当 */
  .p-clinic__staff {
    display: flex;
    align-items: center;
    gap: calc(48 * var(--u));
    width: calc(1201 * var(--u));
    padding-block: calc(40 * var(--u));   /* 中身が少ないので上下は c-card（64）より詰める */
  }

  .p-clinic__staff-name {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--u));
    flex-shrink: 0;
    min-width: calc(240 * var(--u));
    font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-main);

    & > :first-child {
      font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
      color: var(--c-text-sub);
    }
  }

  .p-clinic__staff-info {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: calc(12 * var(--u)) calc(24 * var(--u));
    flex: 1;
    padding-left: calc(48 * var(--u));
    border-left: 1.5px solid var(--c-line);
    line-height: 1.6;

    & > div { display: contents; }
    & dt { font-weight: 700; color: var(--c-main-dark); }
  }

  /* 05 院内設備 */
  .p-clinic__facility {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(48 * var(--u));
    width: calc(1201 * var(--u));
  }

  .p-clinic__facility figure {
    display: flex;
    flex-direction: column;
    gap: calc(12 * var(--u));
  }

  .p-clinic__facility img {
    width: 100%;
    aspect-ratio: 368 / 245;
    object-fit: cover;
    border-radius: calc(5 * var(--u));
  }

  .p-clinic__facility figcaption {
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    color: var(--c-text);
  }

  @media (width < 768px) {
    .p-clinic__section {
      gap: calc(48 * var(--u));
      padding: calc(80 * var(--u)) calc(24 * var(--u));
    }

    .p-clinic__intro,
    .p-clinic__card,
    .p-clinic__cols,
    .p-clinic__doctor,
    .p-clinic__doctor-body,
    .p-clinic__parking,
    .p-clinic__visit,
    .p-clinic__career,
    .p-clinic__staff,
    .p-clinic__facility { width: 100%; }

    /* ご予約・お支払いは項目の下に内容。予約ボタンはカード幅 */
    .p-clinic__visit-list {
      grid-template-columns: 1fr;

      & > div { gap: calc(4 * var(--u)); }
    }

    .p-clinic__visit .c-btn-reserve { width: 100%; }

    /* スタッフ（院長以外の医師）は縦積み。所属・担当は名前の下に罫線で区切る */
    .p-clinic__staff {
      flex-direction: column;
      align-items: stretch;
      gap: calc(20 * var(--u));
    }

    .p-clinic__staff-info {
      padding: calc(20 * var(--u)) 0 0;
      border-left: 0;
      border-top: 1.5px solid var(--c-line);
    }

    .p-clinic__card,
    .p-clinic__cols,
    .p-clinic__doctor {
      flex-direction: column;
      gap: calc(32 * var(--u));
    }

    .p-clinic__card-img,
    .p-clinic__doctor-photo {
      width: 100%;
      height: auto;
      aspect-ratio: 1;
    }

    /* 肩書きと名前の間（PCの半分） */
    .p-clinic__doctor-name { gap: calc(8 * var(--u)); }

    /* SPは院長写真が先 */
    .p-clinic__doctor-photo { order: -1; }

    .p-clinic__parking-list > li { flex: 1 0 100%; }

    .p-clinic__career,
    .p-clinic__facility {
      grid-template-columns: 1fr;
      gap: calc(32 * var(--u));
    }

    .p-clinic__band { height: calc(200 * var(--u)); }

    .p-clinic__deco--1 { top: calc(16 * var(--u)); right: calc(-40 * var(--u)); width: calc(120 * var(--u)); height: calc(120 * var(--u)); }
    .p-clinic__deco--2 { top: calc(632 * var(--u)); left: calc(-80 * var(--u)); width: calc(160 * var(--u)); height: calc(160 * var(--u)); }
    .p-clinic__deco--3 { top: calc(1622 * var(--u)); right: calc(-24 * var(--u)); width: calc(160 * var(--u)); height: calc(160 * var(--u)); }
  }
}

/* -------------------------------------------------------------------------
   components: 診療時間表（下層の横罫線タイプ）
   ------------------------------------------------------------------------- */
@layer components {
  .c-schedule--plain {
    width: 100%;
    font-size: clamp(1.5rem, calc(18 * var(--u)), 1.8rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-align: center;

    & th,
    & td {
      padding: calc(14 * var(--u)) 0;
      border-bottom: 1px solid var(--c-line);
    }

    & tbody th {
      font-family: var(--ff-en);
      font-weight: 500;
      white-space: nowrap;
    }

    & td.is-open { color: var(--c-main); }
  }

  .c-schedule--plain + .c-schedule-note { margin-top: calc(20 * var(--u)); }
}

/* -------------------------------------------------------------------------
   components: ページヘッダー（写真タイプ）
   Figma: clinic-hero。フラット背景にぼかした写真を overlay で重ね、
   右側に乗算の白い光を敷く
   ------------------------------------------------------------------------- */
@layer components {
  /* isolate で、ブレンドの相手をこの帯の中（背景色）だけに閉じる */
  .p-pagehead__hero--photo {
    isolation: isolate;
    background: var(--c-bg-footer);
    /* 写真の描画位置。ページごとに上書きする（Figmaの座標そのまま） */
    --photo-x: 203;
    --photo-y: -253;
    --photo-w: 1167;
    --photo-h: 778;
    --photo-blur: 5px;
  }

  .p-pagehead__hero--feature { --photo-x: 202; --photo-y: -389; --photo-blur: 3px; }
  .p-pagehead__hero--fee { --photo-x: 300; --photo-y: -543.5; --photo-w: 1920; --photo-h: 1280; --photo-blur: 3px; }

  /* ぼかしとブレンドは別の要素に分ける（同じ要素だとブレンドが効かない）。
     マスクはグラデーション。写真が左から右へフェードインし、
     左側は背景色（青緑）がそのまま見える。
     帯が1360より広いときは、写真・マスク・白い光ごと右端に寄せる（左は背景色が広がるだけ） */
  .p-pagehead__photo {
    position: absolute;
    top: calc(var(--photo-y) * var(--u));
    left: calc(var(--photo-x) * var(--u) + var(--pagehead-dx));
    width: calc(var(--photo-w) * var(--u));
    height: calc(var(--photo-h) * var(--u));
    mix-blend-mode: overlay;
    mask: url("../imgs/hero-mask-pc.svg") no-repeat
          calc(var(--photo-x) * -1 * var(--u)) calc(var(--photo-y) * -1 * var(--u))
          / calc(1360 * var(--u)) calc(270 * var(--u));
  }

  .p-pagehead__photo img {
    width: 100%;
    height: 100%;
    border-radius: calc(5 * var(--u));
    object-fit: cover;
    filter: blur(var(--photo-blur));
  }

  /* 右から左へ抜ける白い光（乗算・50%）。写真と同じマスクを掛ける */
  .p-pagehead__wash {
    position: absolute;
    top: calc(-46 * var(--u));
    left: calc(752 * var(--u) + var(--pagehead-dx));
    width: calc(608 * var(--u));
    height: calc(346 * var(--u));
    background: linear-gradient(to left, #f9faf4, rgb(249 250 244 / 0));
    opacity: 0.5;
    mix-blend-mode: multiply;
    mask: url("../imgs/hero-mask-pc.svg") no-repeat calc(-752 * var(--u)) calc(46 * var(--u)) / calc(1360 * var(--u)) calc(270 * var(--u));
    pointer-events: none;
  }

  /* 英字ラベル（疾患ページのタグに相当） */
  .p-pagehead__en {
    font-family: var(--ff-en);
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.15em;
    color: var(--c-main);
  }

  /* 写真タイプは h1 が --c-main（疾患ページは --c-main-dark） */
  .p-pagehead__hero--photo .p-pagehead__title { color: var(--c-main); }

  /* 写真タイプだけ下パディングが96（疾患ページは92） */
  .p-pagehead__hero--photo .p-pagehead__body { padding-bottom: calc(96 * var(--u)); }

  @media (width < 768px) {
    .p-pagehead__photo {
      top: calc(-77 * var(--u));
      left: calc(-97 * var(--u));
      width: calc(584 * var(--u));
      height: calc(389 * var(--u));
      mask: url("../imgs/hero-mask-sp.svg") no-repeat calc(97 * var(--u)) calc(77 * var(--u)) / calc(390 * var(--u)) calc(270 * var(--u));
    }

    .p-pagehead__wash {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      mask: url("../imgs/hero-mask-sp.svg") no-repeat 0 0 / 100% 100%;
    }

    /* SPは写真タイプも下の余白を共通の40に（上の96はPC用。セレクタが強いのでここで戻す） */
    .p-pagehead__hero--photo .p-pagehead__body { padding-bottom: calc(40 * var(--u)); }
  }
}

/* -------------------------------------------------------------------------
   components: 矢印つきのテキストリンク
   ------------------------------------------------------------------------- */
@layer components {
  .c-btn-sub {
    display: inline-flex;
    align-items: center;
    gap: calc(12 * var(--u));
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-text);
    transition: opacity var(--dur) var(--ease);

    &::after {
      content: "";
      flex-shrink: 0;
      width: calc(32 * var(--u));
      height: calc(32 * var(--u));
      background: url("../imgs/icon-arrow-link.svg") no-repeat center / contain;
    }

    &:hover { opacity: 0.6; }
  }
}

/* -------------------------------------------------------------------------
   project: 当院の特徴（feature）
   Figma: 450:5209（PC 1440）/ 592:8496（SP 390）
   ------------------------------------------------------------------------- */
@layer project {
  .p-feat__section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(64 * var(--u));
    padding: calc(120 * var(--u));
  }

  .p-feat__list {
    display: flex;
    flex-direction: column;
    gap: calc(48 * var(--u));
    width: calc(1232 * var(--u));
  }

  /* 診療ピックアップ（トップと同じ3項目・方眼の背景） */
  .p-feat__section--pickup {
    border-bottom: 1.5px solid var(--c-grid);
    background:
      /* 上端は格子を背景色でぼかして消す */
      linear-gradient(var(--c-bg), rgb(251 254 255 / 0)) 0 0 / 100% calc(240 * var(--u)) no-repeat,
      linear-gradient(var(--c-grid) 1.5px, transparent 1.5px) 0 0 / calc(30 * var(--u)) calc(30 * var(--u)),
      linear-gradient(90deg, var(--c-grid) 1.5px, transparent 1.5px) 0 0 / calc(30 * var(--u)) calc(30 * var(--u)),
      var(--c-bg);

  }

  /* 当院の特徴6つ：当院についての --tint と同じ薄緑 */
  .p-feat__section--tint { background: var(--c-bg-schedule); }

  /* 画像左・テキスト右の横並びを縦に3つ */
  .p-feat__picks {
    display: flex;
    flex-direction: column;
    gap: calc(64 * var(--u));
    width: calc(1040 * var(--u));
  }

  .p-feat__pick {
    display: flex;
    align-items: center;
    gap: calc(64 * var(--u));

    & .p-pickup__img { flex-shrink: 0; }
    & .p-pickup__name { margin-top: 0; }
    & .p-pickup__btns { justify-content: flex-start; }
  }

  .p-feat__pick-body { flex: 1; }

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

  /* 番号バッジが左上にはみ出すぶんの余白 */
  .p-feat__item {
    display: flex;
    gap: calc(80 * var(--u));
    align-items: flex-start;
    padding: calc(16 * var(--u));
  }

  .p-feat__item + .p-feat__item {
    padding-top: calc(64 * var(--u));
    border-top: 1px solid var(--c-line);
  }

  .p-feat__media {
    position: relative;
    flex-shrink: 0;
  }

  .p-feat__img {
    display: block;
    width: calc(400 * var(--u));
    height: calc(400 * var(--u));
    border-radius: calc(10 * var(--u));
    object-fit: cover;
  }

  /* 画像の左上角から 16px ずらして重ねる */
  .p-feat__num {
    position: absolute;
    top: calc(-16 * var(--u));
    left: calc(-16 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(80 * var(--u));
    height: calc(80 * var(--u));
    border-radius: 50%;
    font-family: var(--ff-en);
    font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: var(--c-bg);
    background: var(--c-main);
  }

  .p-feat__body {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: calc(32 * var(--u));
    padding-right: calc(16 * var(--u));
  }

  .p-feat__title {
    font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.1em;
    color: var(--c-text);
  }

  .p-feat__title em { color: var(--c-main); }

  .p-feat__links {
    display: flex;
    flex-wrap: wrap;
    gap: calc(40 * var(--u));
    width: 100%;
  }

  /* SP --------------------------------------------------------------------
     画像342・見出し20px・各要素の間隔48。ボタンは右寄せで縦積み           */
  @media (width < 768px) {
    .p-feat__section {
      gap: calc(48 * var(--u));
      padding: calc(80 * var(--u)) calc(24 * var(--u));
    }

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

    /* SPは画像の下にテキスト */
    .p-feat__picks { width: 100%; }

    .p-feat__pick {
      flex-direction: column;
      gap: calc(24 * var(--u));

      & .p-pickup__btns { justify-content: center; }
    }

    .p-feat__pick-body {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* SPはバッジを左にはみ出させる（余白は取らない） */
    .p-feat__item {
      flex-direction: column;
      align-items: stretch;
      gap: calc(32 * var(--u));   /* 画像とタイトルの間 */
      padding: 0;
    }

    .p-feat__item + .p-feat__item { padding-top: calc(48 * var(--u)); }

    .p-feat__img {
      width: 100%;
      height: auto;
      aspect-ratio: 1;
    }

    .p-feat__body {
      gap: calc(32 * var(--u));   /* タイトルと本文、本文とリンクの間 */
      padding-right: 0;
    }

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

    .p-feat__links {
      flex-direction: column;
      align-items: flex-end;
      gap: calc(24 * var(--u));
    }
  }
}

/* -------------------------------------------------------------------------
   components: 料金表
   SPでは列幅を保ったまま横スクロールさせる
   ------------------------------------------------------------------------- */
@layer components {
  .c-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .c-table {
    width: calc(1120 * var(--u));
    border-collapse: separate;
    border-spacing: 0;
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    line-height: 1.6;
  }

  /* 2カラムに入る小さい表 */
  .c-table--sm { width: calc(536 * var(--u)); }

  .c-table th,
  .c-table td {
    padding: calc(8 * var(--u)) calc(16 * var(--u));
    vertical-align: middle;
  }

  /* 見出し行: 緑地・白文字・白い縦罫線 */
  .c-table thead th {
    font-weight: 700;
    text-align: center;
    color: var(--c-bg);
    background: var(--c-main);
    border-right: 1.5px solid var(--c-bg);
  }

  .c-table thead th:last-child { border-right: 0; }

  /* 本文行: 1行おきに薄い背景。罫線は c-line */
  .c-table tbody th,
  .c-table tbody td {
    border-right: 1.5px solid var(--c-line);
    border-bottom: 1.5px solid var(--c-line);
    background: var(--c-bg);
  }

  .c-table tbody th { border-left: 1.5px solid var(--c-line); }

  .c-table tbody tr:nth-child(even) th,
  .c-table tbody tr:nth-child(even) td { background: var(--c-bg-schedule); }

  .c-table tbody th {
    font-weight: 700;
    text-align: left;
    color: var(--c-text);
  }

  .c-table tbody td { color: var(--c-text); }

  /* 金額列 */
  .c-table .is-price {
    font-weight: 700;
    text-align: right;
    color: var(--c-main);
  }

  /* セル内の箇条書き（1項目ずつ改行して「・」を付ける） */
  .c-table td > ul {
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--u));
  }

  .c-table td > ul > li {
    display: block;
    text-indent: -1em;
    padding-left: 1em;
  }

  .c-table td > ul > li::before { content: "・"; }

  /* SP: 表の幅は中身に合わせる。画面に収まる表は画面幅いっぱい、収まらない表は
     中身の長さぶんだけの幅にして横スクロール（スクロールできることが分かるよう表の下にバーを出す）。
     名前の列（tbody th）だけ文節の切れ目で折り返し、ほかのセル（検体・金額・箇条書きの各行など）は折り返さない。
     文章が入る骨盤ケア外来・スターフォーマーの表（.p-care__body）は本文の列も折り返す */
  @media (width < 768px) {
    .c-table,
    .c-table--sm {
      width: auto;
      min-width: 100%;
    }

    .c-table th,
    .c-table td {
      padding-inline: calc(10 * var(--u));
      white-space: nowrap;
    }

    .c-table tbody th,
    .p-care__body .c-table td:not(.is-price) {
      white-space: normal;
      word-break: auto-phrase;
    }

    .c-table tbody th { min-width: 7em; }

    .c-table__paren { white-space: nowrap; }

    .c-table-scroll {
      padding-bottom: calc(12 * var(--u));
      scrollbar-width: thin;
      scrollbar-color: var(--c-main) var(--c-bg-light);
    }

    .c-table-scroll::-webkit-scrollbar { height: calc(6 * var(--u)); }

    .c-table-scroll::-webkit-scrollbar-track {
      border-radius: 100px;
      background: var(--c-bg-light);
    }

    .c-table-scroll::-webkit-scrollbar-thumb {
      border-radius: 100px;
      background: var(--c-main);
    }
  }
}

/* -------------------------------------------------------------------------
   project: 治療費について（fee）
   Figma: 490:8912（PC 1440）/ 593:9388（SP 390）
   ------------------------------------------------------------------------- */
@layer project {
  /* 1行の文なので中央揃え（左揃えだと800の枠の右側が空いて左に寄って見える） */
  .p-fee__intro {
    width: calc(800 * var(--u));
    margin: calc(120 * var(--u)) auto 0;
    text-align: center;
  }

  .p-fee__section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(64 * var(--u));
    padding: calc(120 * var(--u));
  }

  /* 目次カード */
  .p-fee__index {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(24 * var(--u)) calc(48 * var(--u));
    width: calc(1120 * var(--u));
    padding: calc(64 * var(--u)) calc(80 * var(--u));
    border: 1.5px solid var(--c-bg-light);
    background: var(--c-bg-schedule);
  }

  .p-fee__index-link {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--u));
    padding-bottom: calc(8 * var(--u));
    border-bottom: 1px dashed var(--c-line);
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-text);
    transition: opacity var(--dur) var(--ease);

    &:hover { opacity: 0.6; }
  }

  .p-fee__index-num {
    font-family: var(--ff-en);
    color: var(--c-main);
  }

  .p-fee__index-link span:nth-child(2) { flex: 1; }

  .p-fee__index-link::after {
    content: "";
    flex-shrink: 0;
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    background: url("../imgs/icon-arrow-down.svg") no-repeat center / contain;
  }

  /* 本文の各セクション */
  .p-fee__groups {
    display: flex;
    flex-direction: column;
    gap: calc(64 * var(--u));
    width: calc(1120 * var(--u));
  }

  .p-fee__group {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: calc(32 * var(--u));
  }

  /* 2カラムに並ぶ組 */
  .p-fee__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(48 * var(--u));
    align-items: start;
  }

  /* h3: 番号バッジ＋見出し */
  .p-fee__h3 {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    color: var(--c-text);
  }

  .p-fee__h3 small {
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
  }

  .p-fee__num {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
    border-radius: 50%;
    font-family: var(--ff-en);
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: var(--c-bg);
    background: var(--c-main);
  }

  /* h4: ○＋見出し */
  .p-fee__h4 {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    font-size: clamp(1.8rem, calc(20 * var(--u)), 2rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: var(--c-text);

    &::before {
      content: "";
      flex-shrink: 0;
      width: calc(8 * var(--u));
      height: calc(8 * var(--u));
      border: 1.5px solid var(--c-main);
      border-radius: 50%;
    }
  }

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

  @media (width < 768px) {
    .p-fee__intro {
      width: 100%;
      margin-top: calc(80 * var(--u));
      padding-inline: calc(24 * var(--u));
      text-align: left;   /* SPは複数行に折り返すので左揃え */
    }

    .p-fee__section {
      gap: calc(48 * var(--u));
      padding: calc(80 * var(--u)) calc(24 * var(--u));
    }

    .p-fee__index,
    .p-fee__groups { width: 100%; }

    /* 見出し→目次は48、目次→本文は32 */
    .p-fee__section { gap: 0; }
    .p-fee__index { margin-top: calc(48 * var(--u)); }
    .p-fee__groups { margin-top: calc(32 * var(--u)); }

    .p-fee__index {
      grid-template-columns: 1fr;
      gap: calc(24 * var(--u));
      padding: calc(32 * var(--u)) calc(24 * var(--u));
    }

    .p-fee__groups { gap: calc(48 * var(--u)); }

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

/* =========================================================================
   診療案内（diagnosis）
   Figma: 469:7688（PC 1440）。SPカンプは無いので、他の下層ページのSP規則
   （左右24・セクション上下80・見出し24px）に合わせて組んでいる
   ========================================================================= */
@layer components {
  /* 番号バッジ（番号つき見出し・目次ボタン） */
  .c-num {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
    border-radius: 50%;
    font-family: var(--ff-en);
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: var(--c-bg);
    background: var(--c-main);
  }

  /* c-heading--under の日本語の前に番号を置く */
  .c-heading__ja--num {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
  }

  /* ヒーロー: 写真タイプだが、帯は疾患ページと同じグラデーション */
  .p-pagehead__hero--diagnosis {
    background: linear-gradient(90deg, var(--c-hero-from), var(--c-hero-to));
    --photo-x: 448;
    --photo-y: -84;
    --photo-w: 1113;
    --photo-h: 742;
    --photo-blur: 3px;
  }

  @media (width < 768px) {
    .c-num {
      width: calc(32 * var(--u));
      height: calc(32 * var(--u));
      font-size: 1.4rem;
    }

    .c-heading__ja--num { gap: calc(10 * var(--u)); }
  }
}

@layer project {
  /* 病名・症状名が単語の途中で折り返さないように（文節で改行。未対応ブラウザは通常の改行） */
  .p-guide { word-break: auto-phrase; }

  /* 下層ページのフッター上の余白（Figmaの下層ページに合わせる。トップの136はトップ用）
     - 本文で終わるページ（疾患・新着情報・記事など）… 120
     - 余白付きのセクションで終わるページ … 0（セクション自身の下余白120がそのまま間隔になる。
       診療案内は最後のセクションの背景がフッターに接する） */
  body:not(.home) .l-footer { margin-top: calc(120 * var(--u)); }

  @media (width < 768px) {
    body:not(.home) .l-footer { margin-top: calc(80 * var(--u)); }
  }

  main.p-guide + .l-footer,
  main:has(> .p-clinic:last-child, > .p-feat__section:last-child, > .p-fee__section:last-child, > .p-care__section:last-child) + .l-footer {
    margin-top: 0;
  }

  /* 目次カード ------------------------------------------------------------ */
  .p-guide__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(40 * var(--u));
    width: calc(1040 * var(--u));
    margin: calc(120 * var(--u)) auto 0;
  }

  .p-guide__intro-text {
    line-height: 1.6;
    letter-spacing: 0.05em;
    text-align: center;
  }

  .p-guide__jumps {
    display: flex;
    gap: calc(16 * var(--u));
  }

  .p-guide__jump {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--u));
    width: calc(320 * var(--u));
    padding: calc(14 * var(--u)) calc(22 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
    border: 2px solid var(--c-main);
    background: var(--c-bg-schedule);
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
    transition: background-color var(--dur) var(--ease);

    &::after {
      content: "";
      flex-shrink: 0;
      width: calc(16 * var(--u));
      height: calc(16 * var(--u));
      margin-left: auto;
      background: url("../imgs/icon-arrow-down-green.svg") no-repeat center / contain;
    }

    &:hover { background-color: var(--c-bg-light); }
  }

  /* セクション共通 -------------------------------------------------------- */
  .p-guide__section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(64 * var(--u));
    padding: calc(120 * var(--u));
  }

  .p-guide__section--pale { background: var(--c-bg-schedule); }

  .p-guide__lead {
    line-height: 1.6;
    letter-spacing: 0.05em;
    text-align: center;
  }

  /* 01 病気・病名から探す ------------------------------------------------- */
  .p-guide__cats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(32 * var(--u));
    width: calc(1120 * var(--u));
  }

  /* カテゴリーごとにカード（薄緑の背景）。中のボタンは白 */
  .p-guide__cat {
    display: flex;
    flex-direction: column;
    gap: calc(32 * var(--u));
    padding: calc(32 * var(--u));
    border-radius: calc(8 * var(--u));
    background: var(--c-bg-pale);

    & .p-guide__btn { background: var(--c-bg); }
    & .p-guide__btn:hover { background-color: var(--c-bg-light); }
  }

  .p-guide__cat-head {
    display: flex;
    align-items: center;
    gap: calc(24 * var(--u));
    font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: var(--c-main-dark);
  }

  .p-guide__cat-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: calc(96 * var(--u));
    height: calc(96 * var(--u));
    border: 2px solid var(--c-line);
    border-radius: 50%;
    background: var(--c-bg);

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

  .p-guide__btns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(10 * var(--u));
  }

  .p-guide__btns > li { display: flex; }

  .p-guide__btn {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--u));
    width: 100%;
    min-height: calc(56 * var(--u));
    padding: calc(12 * var(--u));
    border-radius: calc(5 * var(--u));
    background: var(--c-bg-pale);
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);

    &::before {
      content: "";
      flex-shrink: 0;
      width: calc(26 * var(--u));
      height: calc(26 * var(--u));
      background: url("../imgs/icon-arrow-link.svg") no-repeat center / contain;
    }

    &:hover {
      color: var(--c-main-dark);
      background-color: var(--c-bg-light);
    }
  }

  /* 02 症状・お悩みから探す ----------------------------------------------- */
  .p-guide__urgent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16 * var(--u));
    width: calc(1040 * var(--u));
    padding: calc(64 * var(--u)) calc(80 * var(--u));
    border: 1.5px solid var(--c-bg-light);
    border-radius: calc(10 * var(--u));
    background: var(--c-bg);
  }

  .p-guide__urgent-title {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-align: center;
    color: var(--c-main-dark);

    & img { width: calc(16 * var(--u)); min-width: 14px; }
  }

  .p-guide__urgent-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(10 * var(--u));

    & li {
      padding: calc(2 * var(--u)) calc(12 * var(--u)) calc(1 * var(--u));
      border: 1.5px solid var(--c-main-dark);
      background: #fff;
      font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: 0.05em;
      color: var(--c-main-dark);
    }
  }

  .p-guide__groups {
    display: flex;
    flex-direction: column;
    gap: calc(64 * var(--u));
    width: calc(1120 * var(--u));
    padding-block: calc(16 * var(--u));
  }

  .p-guide__group {
    display: flex;
    flex-direction: column;
    gap: calc(48 * var(--u));
  }

  /* h3: アイコン＋見出し＋右へ伸びる線（見出しと線の間は32） */
  .p-guide__group-head {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.1em;
    color: var(--c-main);

    &::before {
      content: "";
      flex-shrink: 0;
      width: calc(20 * var(--u));
      height: calc(20 * var(--u));
      background: no-repeat center / contain;
    }

    &::after {
      content: "";
      flex: 1;
      min-width: calc(24 * var(--u));
      height: 1.5px;
      margin-left: calc(20 * var(--u));
      background: var(--c-line);
    }
  }

  .p-guide__group-head--drop::before { background-image: url("../imgs/icon-symptom-drop.svg"); }
  .p-guide__group-head--stethoscope::before { background-image: url("../imgs/icon-symptom-stethoscope.svg"); }

  .p-guide__group-head--gender::before {
    width: calc(32 * var(--u));
    background-image: url("../imgs/icon-symptom-gender.svg");
  }

  /* 症状の行: 左に症状名（420。一番長い「閉経後の尿トラブル・乾燥・性交痛＋女性」が1行に入る幅）、右に疾患リンク。行の間に点線 */
  .p-guide__row {
    display: flex;
    align-items: center;
    gap: calc(80 * var(--u));
  }

  .p-guide__row:not(:last-child) {
    padding-bottom: calc(24 * var(--u));
    background: var(--dashed-line) 0 100% / 8px 1.5px repeat-x;
  }

  .p-guide__row + .p-guide__row { padding-top: calc(24 * var(--u)); }

  .p-guide__symptom {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(12 * var(--u));
    width: 21em;   /* 文字20pxで420。文字が最小（16px）の幅でも1行に収まるよう em で持つ */
    font-size: clamp(1.6rem, calc(20 * var(--u)), 2rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;

    &::before {
      content: "";
      flex-shrink: 0;
      width: calc(8 * var(--u));
      height: calc(8 * var(--u));
      border-radius: 50%;
      background: var(--c-main);
    }
  }

  .p-guide__symptom-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;   /* PCは1行（SPは折り返す） */
  }

  .p-guide__symptom-tail { white-space: nowrap; }   /* 症状名の最後の1文字＋男性・女性タグ */

  .p-guide__gender {
    display: inline-block;
    margin-left: calc(10 * var(--u));
    vertical-align: 0.1em;
    padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(2 * var(--u));
    font-size: clamp(1.4rem, calc(16 * var(--u)), 1.6rem);
    line-height: 1.4;
    color: var(--c-bg);
  }

  .p-guide__gender--man { background: var(--c-man); }
  .p-guide__gender--woman { background: var(--c-woman); }

  .p-guide__links {
    flex: 1;
    gap: calc(16 * var(--u)) calc(32 * var(--u));
  }

  /* 疾患リンクの代わりに、別の項目を案内する行 */
  .p-guide__refer {
    display: flex;
    flex: 1;
    word-break: normal;   /* .p-guide の auto-phrase を外す（文節単位だと「項目を」で早めに折れて右が空く） */
    flex-wrap: wrap;
    align-items: center;
    gap: calc(4 * var(--u)) calc(12 * var(--u));
    line-height: 1.6;
    letter-spacing: 0.05em;
  }

  .p-guide__refer-link {
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
    font-weight: 700;
    line-height: 1.4;
    transition: color var(--dur) var(--ease);

    &::after {
      content: "";
      flex-shrink: 0;
      width: calc(16 * var(--u));
      height: calc(16 * var(--u));
      background: url("../imgs/icon-arrow-down-green.svg") no-repeat center / contain;
      rotate: 180deg;   /* 参照先（「血尿が出た」など）はページの上の方にあるので上向き */
    }

    &:hover { color: var(--c-main); }
  }

  /* 1100px未満のPC表示: 症状名の列が細くなりすぎるので、SPと同じく縦積みに。
     病名のカードも2列だとボタンが狭く長い病名がはみ出すので1列に */
  @media (768px <= width < 1100px) {
    .p-guide__cats { grid-template-columns: 1fr; }

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

    .p-guide__symptom { width: auto; }

    .p-guide__links,
    .p-guide__refer { padding-left: calc(20 * var(--u)); }
  }

  /* SP ------------------------------------------------------------------- */
  @media (width < 768px) {
    .p-guide__intro {
      gap: calc(24 * var(--u));
      width: auto;
      margin: calc(80 * var(--u)) calc(24 * var(--u)) 0;
    }

    .p-guide__intro-text { text-align: left; }

    .p-guide__jumps {
      flex-direction: column;
      gap: calc(12 * var(--u));
      width: 100%;
    }

    .p-guide__jump {
      gap: calc(12 * var(--u));
      width: 100%;
      padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
    }

    .p-guide__section {
      gap: calc(40 * var(--u));
      padding: calc(80 * var(--u)) calc(24 * var(--u));
    }

    /* 01: カテゴリは1列、疾患ボタンは2列のまま（長い病名は折り返す） */
    .p-guide__cats {
      grid-template-columns: 1fr;
      gap: calc(16 * var(--u));
      width: 100%;
    }

    .p-guide__cat {
      gap: calc(20 * var(--u));
      padding: calc(20 * var(--u)) calc(10 * var(--u));
    }

    .p-guide__cat-head {
      gap: calc(16 * var(--u));
      font-size: clamp(1.8rem, calc(20 * var(--u)), 2rem);
    }

    .p-guide__cat-icon {
      width: calc(64 * var(--u));
      height: calc(64 * var(--u));

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

    .p-guide__btns { gap: calc(8 * var(--u)); }

    .p-guide__btn {
      gap: calc(8 * var(--u));
      min-height: calc(52 * var(--u));
      padding: calc(10 * var(--u)) calc(6 * var(--u));   /* 左右を詰めて長い病名（尿漏れ（腹圧性尿失禁）など）を収める */
      font-size: 1.4rem;
      letter-spacing: 0;

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

    /* 02: 注意カードはアイコンを上に置いて2行で中央揃え */
    .p-guide__urgent {
      gap: calc(14 * var(--u));
      width: 100%;
      padding: calc(32 * var(--u)) calc(20 * var(--u));
    }

    .p-guide__urgent-title {
      flex-direction: column;
      line-height: 1.6;

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

    .p-guide__urgent-list {
      gap: calc(8 * var(--u));

      & li {
        padding: calc(2 * var(--u)) calc(10 * var(--u)) calc(1 * var(--u));
        font-size: 1.5rem;
      }
    }

    .p-guide__groups {
      gap: calc(56 * var(--u));
      width: 100%;
      padding-block: 0;
    }

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

    .p-guide__group-head {
      gap: calc(8 * var(--u));
      font-size: clamp(1.8rem, calc(20 * var(--u)), 2rem);
      line-height: 1.5;
      letter-spacing: 0.05em;

      &::after { margin-left: calc(8 * var(--u)); }
    }

    /* 症状名の下に疾患リンクを縦積み。リンクは症状名の文字頭に揃える */
    .p-guide__row {
      flex-direction: column;
      align-items: stretch;
      gap: calc(12 * var(--u));
    }

    .p-guide__symptom {
      align-items: flex-start;
      gap: calc(10 * var(--u));
      width: auto;
      font-size: 1.7rem;
      line-height: 1.5;

      &::before { margin-top: calc(0.75em - 4 * var(--u)); }
    }

    .p-guide__symptom-name { white-space: normal; }

    .p-guide__gender {
      margin-left: calc(8 * var(--u));
      padding: calc(3 * var(--u)) calc(8 * var(--u)) calc(1 * var(--u));
      font-size: 1.3rem;
    }

    .p-guide__links { gap: calc(10 * var(--u)) calc(20 * var(--u)); }

    .p-guide__refer { font-size: 1.5rem; }
  }
}

/* -------------------------------------------------------------------------
   project: 骨盤ケア外来（/pelvic-care/）
   【仮】デザインカンプ無し。当院について・料金表と同じ1カラムの部品で組んでいる
   ------------------------------------------------------------------------- */
@layer project {
  /* ページヘッダーの写真（Figma 716:11789 / SP 716:11806）。ぼかしは Figma の半分（4 → 2px） */
  .p-pagehead__hero--pelvic-care { --photo-x: 237; --photo-y: -356; --photo-w: 1500; --photo-h: 1000; --photo-blur: 2px; }

  @media (width < 768px) {
    /* SPは共通の写真位置（コンポーネント側）と違うので上書き */
    .p-pagehead__hero--pelvic-care .p-pagehead__photo {
      top: calc(-55 * var(--u));
      left: calc(-36 * var(--u));
      width: calc(548 * var(--u));
      height: calc(365 * var(--u));
      mask-position: calc(36 * var(--u)) calc(55 * var(--u));
    }
  }

  /* スターフォーマーのページヘッダー: 仕上がった画像（PC 1360×270 / SP 390×270）をそのまま帯に敷く（pagehead の bg） */
  .p-pagehead__hero--starformer {
    background:
      image-set(url("../imgs/hero-bg-starformer.webp") 1x, url("../imgs/hero-bg-starformer@2x.webp") 2x) center / cover no-repeat,
      var(--c-bg-footer);
  }

  @media (width < 768px) {
    .p-pagehead__hero--starformer {
      background:
        image-set(url("../imgs/hero-bg-starformer-sp.webp") 1x, url("../imgs/hero-bg-starformer-sp@2x.webp") 2x) center / cover no-repeat,
        var(--c-bg-footer);
    }
  }

  /* 導入: 左に写真、右に本文（担当スタッフの院長紹介型は写真が右なので、左右を互い違いに） */
  .p-care__intro {
    display: flex;
    gap: calc(80 * var(--u));
    align-items: flex-start;
    width: calc(1120 * var(--u));
    margin: calc(120 * var(--u)) auto;   /* 下にも余白（すぐ下が緑の地のセクションなので詰まって見える） */
  }

  .p-care__intro-img {
    flex-shrink: 0;
    width: calc(360 * var(--u));
    height: calc(360 * var(--u));
    border-radius: calc(10 * var(--u));
    object-fit: cover;
  }

  .p-care__intro-body {
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--u));
    min-width: 0;
  }

  .p-care__lead {
    font-size: clamp(2rem, calc(24 * var(--u)), 2.4rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.1em;
    color: var(--c-main);
  }

  .p-care__section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(64 * var(--u));
    padding: calc(120 * var(--u));
  }

  /* 白の地と、--tint の薄い緑の地を交互に */
  .p-care__section--tint { background: var(--c-bg-schedule); }

  /* 緑の地の上のカードは白に（同じ色だと地に溶ける） */
  .p-care__section--tint .c-card { background: var(--c-bg); }

  .p-care__body {
    display: flex;
    flex-direction: column;
    gap: calc(56 * var(--u));
    width: calc(920 * var(--u));
  }

  .p-care__card {
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--u));
  }

  .p-care__block {
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--u));
  }

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

  /* 箇条書きを囲む白い箱（「おすすめです」のカードと同じ枠線・角丸。余白は小さめ） */
  .p-care__listbox {
    padding: calc(32 * var(--u)) calc(40 * var(--u));
    border: 1.5px solid var(--c-bg-light);
    border-radius: calc(10 * var(--u));
    background: var(--c-bg);
  }

  /* 白い地のセクションでは、箱を薄い緑に（白だと地と同じ色になるため） */
  .p-care__section:not(.p-care__section--tint) .p-care__listbox { background: var(--c-bg-schedule); }

  .p-care__body .c-table { width: 100%; }
  .p-care__body .c-table tbody th { width: 40%; }

  /* SP: 項目名は短いので折り返さず、残りの幅で内容の列を折り返す（40% 固定はやめる） */
  @media (width < 768px) {
    .p-care__body .c-table tbody th {
      width: auto;
      white-space: nowrap;
    }
  }

  /* 料金の下の予約ボタン（スターフォーマー） */
  .p-care__cta {
    display: flex;
    justify-content: center;
  }

  .p-care__notes {
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--u));
    font-size: clamp(1.3rem, calc(14 * var(--u)), 1.4rem);
    line-height: 1.6;
    color: var(--c-text-sub);
  }

  @media (width < 768px) {
    /* SPは写真が先、その下に本文 */
    .p-care__intro {
      flex-direction: column;
      gap: calc(32 * var(--u));
      width: auto;
      margin-block: calc(80 * var(--u));
      padding-inline: calc(24 * var(--u));
    }

    .p-care__intro-img {
      width: 100%;
      height: auto;
      aspect-ratio: 1;
    }

    .p-care__section {
      gap: calc(40 * var(--u));
      padding: calc(80 * var(--u)) calc(24 * var(--u));
    }

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

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