@charset "UTF-8";
/* ///////////////////////////////////////////
  style.scss
/////////////////////////////////////////// */
/*====================================
  Dart Sass @use imports
  @use ルールはすべての他のルールより前に記述する必要があります
=====================================*/
/*====================================
  External CSS imports
=====================================*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700;900&display=swap");
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp.css");
/**
* Core-Foundation v2026.2.10
*
* @layer reset     - ブラウザ標準スタイルの初期化
* @layer base      - 最小限の機能的ベース（詳細度0）
* @layer wordpress - WordPress固有の表示調整
*/
@layer reset,
base,
wordpress,
common;
/* ==========================================================================
@layer reset
========================================================================== */
@layer reset {
  :where(*) {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  /* display: none を確実に保証（!importantによる保護） */
  :where([hidden]) {
    display: none !important;
  }
  :where(html) {
    /*
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
         text-size-adjust: 100%;
  }
  :where(body) {
    min-height: 100svh;
  }
  :where(a) {
    color: inherit;
    text-decoration: inherit;
  }
  /**
    * Safari + VoiceOver 対策
    * リスト記号を削除するとリストとして認識されない不具合があるため、
    * ナビゲーション等には HTML 側で role="list" を付与することを推奨。
    */
  :where(ul, ol) {
    list-style: none;
  }
  :where(img, svg, video, canvas, picture) {
    display: block;
    max-width: 100%;
    height: auto;
  }
  /* * formに novalidate が「ついている」時だけリセットを強めに当てる。
        * ついていない（ブラウザ標準バリデーションを使う）時は、
        * ブラウザのデフォルトスタイル（User Agent Stylesheet）を尊重して干渉を最小限にする。
        */
  :where(form[novalidate] input,
  form[novalidate] button,
  form[novalidate] textarea,
  form[novalidate] select) {
    font: inherit;
    color: inherit;
  }
  /* novalidateがない場合でも、最低限必要なものだけは当てる（干渉の少ないプロパティ） */
  :where(input, button, textarea, select) {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  :where(textarea) {
    resize: block;
    overflow: auto;
    /* スクロールバーの制御をブラウザに任せつつリセット */
  }
  /* バリデーションツールチップが見切れないように親要素のoverflowに注意を促す */
  :where(form:not([novalidate])) {
    overflow: visible;
  }
  :where(table) {
    border-collapse: collapse;
    border-spacing: 0;
  }
}
/* ==========================================================================
@layer base
========================================================================== */
@layer base {
  /* scroll-behaviorを指定すると、フォームのバリデーション吹き出しが出なくなるので、必要なら上2つをコメントアウト */
  :where(html) {
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    :where(html) {
      scroll-behavior: auto;
    }
  }
  /*
  :where(:focus-visible) {
    outline: 3px solid currentColor;
    outline-offset: 2px;
  }
  */
  :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd) {
    line-break: strict;
    overflow-wrap: break-word;
  }
  /*
  :where(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
  }
  */
  :where(p) {
    text-wrap: pretty;
  }
}
/* ==========================================================================
@layer wordpress
========================================================================== */
@layer wordpress {
  :where(html:has(#wpadminbar)) {
    padding-top: 32px;
  }
  @media screen and (max-width: 782px) {
    :where(html:has(#wpadminbar)) {
      padding-top: 46px;
    }
  }
  :where(.alignwide) {
    width: 100vw;
    max-width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }
}
/* ///////////////////////////////////////////
  value.scss
  変数・mixinに関する設定
/////////////////////////////////////////// */
/* 画像パス
========================================= */
/* /////////////////////////////////
  Media Queries
///////////////////////////////// */
/* /////////////////////////////////
  Typography utilities
///////////////////////////////// */
/* /////////////////////////////////
  Layout utilities
///////////////////////////////// */
/* ///////////////////////////////////////////
  common.scss
  全ページ共通のスタイルに関する記述
/////////////////////////////////////////// */
@layer common {
  /* :root
  ========================================= */
  :root {
    /* Color（Figma 由来、path 形式で命名）
       Figma の変数パス「カラー/[カテゴリ]/[名前]」に合わせて命名。
       未使用のバリアント（White/Black など）も Figma 互換のため全て定義する
       ※ CREATEONE 固有トークンは除外 */
    --color-brand-primary: #006bb6;
    --color-brand-secondary: #1FA2FF;
    --color-brand-tertiary: #003052;
    --color-brand-background: #dff0f9;
    --color-brand-background-strong: #b9daf1;
    --color-text-primary: #1a1a1c;
    --color-neutral-white: #ffffff;
    --color-neutral-black: #000000;
    --color-neutral-lightgray: #f4f4f4;
    --color-border: #e5e5e5;
    --color-table-border: #112f7c;
    /* スタータキット既存変数（--color-* のエイリアス、後方互換のため残置） */
    --bgColor: var(--color-brand-background);
    --fontColor: var(--color-neutral-black);
    --highlightFontColor: var(--color-neutral-white);
    --highlightBgColor: var(--color-brand-secondary);
    /* Layout（レイアウト寸法） */
    --headerHeight: 60px;
    --sidebarWidth: 240px;
    --contentMaxWidth: 1200px;
    --sectionPadInline: 7vw;
  }
  @media print, screen and (min-width: 769px) {
    :root {
      --headerHeight: 100px;
    }
  }
  @media print, screen and (min-width: 1020px) {
    :root {
      --sectionPadInline: 80px;
    }
  }
  @media only screen and (min-width: 769px) and (max-width: 1019px) {
    :root {
      --sectionPadInline: 50px;
    }
  }
  :root {
    /* Typography */
    --baseFont: 'YakuHanJP', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'Helvetica Neue', 'Arial', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /*
    --fz10: clamp(10px, 2.67vw, 10px);
    --fz12: clamp(12px, 3.20vw, 12px);
    --fz14: clamp(14px, 3.73vw, 14px);
    --fz16: clamp(16px, 4.27vw, 16px);
    --fz18: clamp(16px, 4.80vw, 18px);
    --fz20: clamp(16px, 5.33vw, 20px);
    --fz24: clamp(20px, 6.40vw, 24px);
    --fz32: clamp(24px, 8.53vw, 32px);
    --fz40: clamp(24px, 10.67vw, 40px);
    */
    /* フォントサイズ：〜450px（スマホ縦持ち）は画面幅比率に統一（vw）。値は375px基準（px ÷ 375 × 100）。上限・下限は付けない */
    --fz10: 2.67vw;
    --fz12: 3.20vw;
    --fz14: 3.73vw;
    --fz16: 4.27vw;
    --fz18: 4.80vw;
    --fz20: 5.33vw;
    --fz24: 6.40vw;
    --fz32: 8.53vw;
    --fz40: 10.67vw;
    --fz48: 12.80vw;
    --fz56: 14.93vw;
    --fz64: 17.07vw;
    /* 451px以上（タブレット/PC）は固定px */
  }
  @media (min-width: 451px) {
    :root {
      --fz10: 10px;
      --fz12: 12px;
      --fz14: 14px;
      --fz16: 16px;
      --fz18: 18px;
      --fz20: 20px;
      --fz24: 24px;
      --fz32: 32px;
      --fz40: 40px;
      --fz48: 48px;
      --fz56: 56px;
      --fz64: 64px;
    }
  }
  /* html
  ========================================= */
  html {
    scroll-padding-top: var(--headerHeight);
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
  /* body
  ========================================= */
  body {
    margin: 0;
    padding: 0;
    background-color: var(--bgColor);
    color: var(--color-text-primary);
    font-family: var(--baseFont);
    -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt";
    font-size: var(--fz14);
    font-weight: 400;
    line-height: 1.75;
  }
  @media print, screen and (min-width: 769px) {
    body {
      font-size: var(--fz16);
    }
  }
  body * {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /*
    margin: 0;
    padding: 0;
    */
  }
  /* ruby（ふりがな）
     親要素 font-size の 50% を明示してブラウザ間の表示差を吸収する。
     `<rt>` のデフォルトは多くのブラウザで親の 50% だが、UA によって 0.6em〜0.5em と
     ばらつきがあるため、見出し・本文を問わず統一されたサイズ比に揃える。
  ========================================= */
  rt {
    font-size: 50%;
  }
  /* スクリーンリーダー専用テキスト（視覚的に隠す、WCAG 1.3.1）
     <caption> 等で意味的に必要だが視覚的には不要なテキストに付与
     `.screen-reader-text` は WordPress テーマ標準クラス。
     `the_posts_pagination()` 等が出力するため、互換クラスとして同居させる。
  ========================================= */
  .sr-only,
  .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  /* スキップリンク（WCAG 2.4.1 ブロックスキップ）
     キーボード Tab 操作時のみ表示、それ以外は視覚的に隠す
  ========================================= */
  .skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 8px 16px;
    background-color: var(--color-brand-primary);
    color: var(--color-neutral-white);
    font-weight: bold;
    text-decoration: none;
    -webkit-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
            transform: translateY(-200%);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  }
  .skip-link:focus {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    outline: 3px solid var(--color-brand-background);
    outline-offset: 2px;
  }
  /* フォーカスインジケーター（WCAG 2.4.11/2.4.13）
     キーボード操作時のみ表示、マウスクリック時は非表示で UI 邪魔しない
  ========================================= */
  :focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
    border-radius: 2px;
  }
  :focus:not(:focus-visible) {
    outline: none;
  }
  /* リンクの基本スタイル */
  a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
  }
  a:hover {
    opacity: 0.7;
  }
  /* メディア要素 */
  img, picture, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
  }
  /* ======================================================
    レイアウトコンテナ
    PC (≥1020px): サイドバー 240px + コンテンツ(main + footer)
      - サイドバーは左端固定、grid 2 行に跨る
      - 右側カラムは main → footer の縦並びで、viewport 右端まで広がる
      - 右側カラムの幅キャップは行わない（右余白を作らない）
    TAB/SP (≤1019px): 単列、main → footer の縦並び
  ====================================================== */
  @media print, screen and (min-width: 1020px) {
    .layout {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: var(--sidebarWidth) 1fr;
      grid-template-columns: var(--sidebarWidth) 1fr;
      -ms-grid-rows: auto auto;
      grid-template-rows: auto auto;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: start;
    }
    .layout > *:nth-child(1) {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
    }
    .layout > *:nth-child(2) {
      -ms-grid-row: 1;
      -ms-grid-column: 2;
    }
    .layout > *:nth-child(3) {
      -ms-grid-row: 2;
      -ms-grid-column: 1;
    }
    .layout > *:nth-child(4) {
      -ms-grid-row: 2;
      -ms-grid-column: 2;
    }
  }
  /* メイン領域（PC: 右カラム上）
     Figma 仕様: 主背景は薄コーポレート #DFF0F9。
     各セクションは個別の背景色が無い限りこの色を透過させる。
     例外: features セクションは独自に --color-brand-primary、footer は --color-neutral-white で白。
  */
  .main {
    width: 100%;
    overflow: hidden;
    background-color: var(--color-brand-background);
    padding-top: var(--headerHeight);
  }
  @media print, screen and (min-width: 1020px) {
    .main {
      -ms-grid-column: 2;
      grid-column: 2;
      -ms-grid-row: 1;
      grid-row: 1;
      min-width: 0;
    }
  }
  /* セクション共通 padding（左右）
     `--sectionPadInline` はブレークポイント別に切り替え済み
  */
  .section-pad {
    padding-inline: var(--sectionPadInline);
  }
  /* インナーコンテナ（テキスト等が入る要素を 1200px キャップ） */
  .container {
    max-width: var(--contentMaxWidth);
    margin: 0 auto;
  }
  h1, h2, h3, h4, h5, h6,
  table, tr, td, th,
  ol, ul, li,
  dl, dt, dd,
  p {
    /*
    margin: 0;
    padding: 0;
    */
    font-style: normal;
    font-weight: normal;
    font-size: 100%;
    list-style: none;
  }
  h1, h2 {
    line-height: 1.2;
  }
  i, em {
    font-style: normal;
  }
  figure {
    display: block;
    margin: 0;
    padding: 0;
  }
  img {
    border: none;
    margin: 0;
    padding: 0;
  }
  /*
  a, *:focus {
    outline: none;
  }
  */
  *::-moz-selection {
    background: var(--highlightBgColor);
    color: var(--highlightFontColor);
  }
  *::selection {
    background: var(--highlightBgColor);
    color: var(--highlightFontColor);
  }
  /* ダークモード対応（必要な場合）
  ========================================= */
  /*
  @media (prefers-color-scheme: dark) {
    :root {
      --color-text: #f5f5f5;
      --color-bg: #1a1a1a;
    }

    img {
      // ちょっと暗くしてコントラスト調整
      filter: brightness(.8) contrast(1.2);
    }
  }
  */
  /* Print Styles
  ========================================= */
  @media print {
    @page {
      margin: 20mm;
    }
    body {
      background-color: transparent !important;
      color: #000 !important;
      font-size: 12pt;
    }
    /* 印刷に不要な要素を隠す（サイトに応じて調整してください） */
    nav,
    footer,
    header,
    aside,
    #wpadminbar {
      display: none !important;
    }
    /* リンクのURLを表示 */
    a[href^=http]:not(:has(img))::after {
      content: " (" attr(href) ")";
      font-size: 0.8em;
      word-break: break-all;
      /* 長いURLが紙からはみ出すのを防ぐ！ */
    }
  }
}
/* ///////////////////////////////////////////
  header.scss
  ヘッダー / ハンバーガー / メガメニュー
  - PC  (≥1020px): ロゴ + 2 段ナビ + 電話
  - TAB (769–1019px): ロゴ + ハンバーガー (100×100)
  - SP  (≤768px): ロゴ + ハンバーガー (60×60)
/////////////////////////////////////////// */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--headerHeight);
  background-color: var(--color-neutral-white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media print, screen and (min-width: 1020px) {
  .header {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .header {
    padding-left: 20px;
    padding-right: 100px;
  }
}
@media only screen and (max-width: 768px) {
  .header {
    padding-left: 10px;
    padding-right: 60px;
  }
}
.header {
  /* ロゴ + tagline ブロック */
}
.header__brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media print, screen and (min-width: 769px) {
  .header__brand {
    height: 100%;
    padding-top: 4px;
  }
}
@media only screen and (max-width: 768px) {
  .header__brand {
    gap: 0;
  }
}
.header__logo {
  display: block;
  width: 340px;
  height: 67px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media only screen and (max-width: 768px) {
  .header__logo {
    width: 223px;
    height: 44px;
  }
}
.header__tagline {
  font-size: var(--fz14);
  line-height: 1.2;
  color: var(--fontColor);
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  .header__tagline {
    display: none;
  }
}
.header {
  /* PC ナビコンテナ（縦 2 段、TAB/SP は非表示） */
}
.header__menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 14px;
}
@media print, screen and (max-width: 1019px) {
  .header__menu {
    display: none;
  }
}
.header {
  /* 上段（ユーティリティリンク nav + 電話）
     直下の <nav> 自体も flex 配置として透過的に並ぶよう gap を引き継ぐ
  */
}
.header__menu-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 40px;
}
.header__menu-top > nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
.header {
  /* 下段（メインナビ、PC のみ） */
}
.header__menu-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
@media print, screen and (max-width: 1019px) {
  .header__menu-bottom {
    display: none;
  }
}
.header {
  /* メニュー項目（テキストリンク）
    line-height 1.2 + trim-leading で Figma 指定の密度に揃える
  */
}
.header__menu-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  font-size: var(--fz16);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.2;
  white-space: nowrap;
  -webkit-transition: color 0.2s ease, background-color 0.2s ease;
  transition: color 0.2s ease, background-color 0.2s ease;
  margin-block: calc((1em - 1lh) / 2);
}
.header__menu-item:hover {
  color: var(--color-brand-primary);
  opacity: 1;
}
.header__menu-item--lg {
  font-size: var(--fz20);
  gap: 8px;
}
.header__menu-item[aria-current=page] {
  padding: 6px 10px;
  margin: -6px -10px;
  background-color: var(--color-brand-background);
  color: var(--color-brand-primary);
  font-weight: 700;
  border-radius: 4px;
}
.header {
  /* ナビアイコン（16×16、SVG は内部 fill="#006BB6"） */
}
.header__menu-icon {
  width: 16px;
  height: 16px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
}
.header {
  /* 電話番号（PC ヘッダー右上、SP は非表示） */
}
.header__phone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
  font-size: var(--fz32);
  font-weight: 500;
  color: var(--color-brand-primary);
  line-height: 1.2;
  white-space: nowrap;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .header__phone {
    display: none;
  }
}
.header__phone-icon {
  width: 14px;
  height: 14px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
}

/* ///////////////////////////////////////////
  .hamburger
  TAB/SP 共通の開閉トグルボタン
  サイズ・アイコン寸法・✕変形量を CSS 変数で管理（SP 基準 → TAB で上書き）
/////////////////////////////////////////// */
.hamburger {
  --hamburgerSize: 60px;
  --hamburgerIconW: 30px;
  --hamburgerIconH: 16px;
  --hamburgerBarOffset: 7px;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .hamburger {
    --hamburgerSize: 100px;
    --hamburgerIconW: 40px;
    --hamburgerIconH: 20px;
    --hamburgerBarOffset: 9px;
  }
}
.hamburger {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 101;
  width: var(--hamburgerSize);
  height: var(--hamburgerSize);
  background-color: var(--color-brand-background);
  border: none;
  cursor: pointer;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
@media print, screen and (max-width: 1019px) {
  .hamburger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.hamburger:hover {
  background-color: var(--color-brand-primary);
}
.hamburger:hover .hamburger__bar {
  background-color: var(--color-neutral-white);
}
.hamburger {
  /* 3 本線アイコン */
}
.hamburger__icon {
  width: var(--hamburgerIconW);
  height: var(--hamburgerIconH);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.hamburger__bar {
  height: 2px;
  width: 100%;
  background-color: var(--color-brand-primary);
  -webkit-transition: opacity 0.3s ease, background-color 0.2s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, background-color 0.2s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.2s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.2s ease, -webkit-transform 0.3s ease;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}
.hamburger {
  /* aria-expanded="true" の時に ✕ へ変形 */
}
.hamburger[aria-expanded=true] .hamburger__bar:nth-child(1) {
  -webkit-transform: translateY(var(--hamburgerBarOffset)) rotate(45deg);
      -ms-transform: translateY(var(--hamburgerBarOffset)) rotate(45deg);
          transform: translateY(var(--hamburgerBarOffset)) rotate(45deg);
}
.hamburger[aria-expanded=true] .hamburger__bar:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded=true] .hamburger__bar:nth-child(3) {
  -webkit-transform: translateY(calc(var(--hamburgerBarOffset) * -1)) rotate(-45deg);
      -ms-transform: translateY(calc(var(--hamburgerBarOffset) * -1)) rotate(-45deg);
          transform: translateY(calc(var(--hamburgerBarOffset) * -1)) rotate(-45deg);
}

/* ///////////////////////////////////////////
  .megamenu
  TAB/SP 共通のドロワー型メガメニュー
  - フェードイン/アウト（opacity + visibility）
  - フロステッドガラス背景（backdrop-filter: blur(4px)）
  - role="dialog" aria-modal="true"、Esc で閉じる（WCAG 2.1.2）
/////////////////////////////////////////// */
.megamenu {
  position: fixed;
  top: var(--headerHeight);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 102;
  background-color: rgba(244, 244, 244, 0.9);
  backdrop-filter: blur(4px);
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 30px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  .megamenu {
    -webkit-transition: none;
    transition: none;
  }
}
.megamenu[aria-hidden=false] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  -webkit-transition: opacity 0.3s ease, visibility 0s linear 0s;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .megamenu[aria-hidden=false] {
    -webkit-transition: none;
    transition: none;
  }
}
@media print, screen and (min-width: 1020px) {
  .megamenu {
    display: none !important;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .megamenu {
    left: auto;
    width: 480px;
  }
}
.megamenu__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 26px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.megamenu {
  /* カテゴリグループ */
}
.megamenu__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-brand-primary);
}
.megamenu__group-title {
  font-size: var(--fz16);
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-brand-primary);
}
.megamenu__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.megamenu__link {
  display: block;
  padding: 16px;
  border-top: 1px solid #ccc;
  background-color: transparent;
  font-size: var(--fz16);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-primary);
  text-decoration: none;
  min-height: 44px;
  -webkit-transition: color 0.2s ease, background-color 0.2s ease;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.megamenu__link:hover {
  background-color: rgba(255, 255, 255, 0.5);
  color: var(--color-brand-primary);
  opacity: 1;
}
.megamenu__link[aria-current=page] {
  background-color: var(--color-brand-background);
  color: var(--color-brand-primary);
  font-weight: 700;
}
.megamenu__link[aria-current=location] {
  color: var(--color-brand-primary);
}
.megamenu {
  /* ボトムリンク */
}
.megamenu__footer-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-brand-primary);
}
.megamenu__footer-link {
  font-size: var(--fz16);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-primary);
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.megamenu__footer-link:hover {
  color: var(--color-brand-primary);
  opacity: 1;
}

/* メニュー開時の body スクロールロック */
.is-menu-open {
  overflow: hidden;
}

/* ///////////////////////////////////////////
  sidebar.scss
  サイドバー (PC ≥1020px 専用) + アコーディオン
  - sticky 配置、ヘッダー直下から内部スクロール
  - 下端に SCROLL DOWN インジケータを固定
/////////////////////////////////////////// */
.sidebar {
  --scrollHintHeight: 100px;
}
@media print, screen and (max-width: 1019px) {
  .sidebar {
    display: none;
  }
}
@media print, screen and (min-width: 1020px) {
  .sidebar {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1/3;
    position: sticky;
    top: var(--headerHeight);
    width: var(--sidebarWidth);
    height: calc(100vh - var(--headerHeight));
    background-color: var(--color-neutral-white);
    border-top: 1px solid var(--color-brand-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.sidebar {
  /* スクロールエリア（アコーディオン + 下部リンクを内包）
     scroll-hint と同じ高さの下 padding を確保し、覆い被さりで
     リンクがクリック不能にならないようにする
  */
}
.sidebar__scroll-area {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: var(--scrollHintHeight);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar__scroll-area::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.sidebar {
  /* アコーディオングループ（hairline 表現用に gap+bg） */
}
.sidebar__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1px;
  background-color: var(--color-border);
}
.sidebar {
  /* 下部リンク（補助ナビゲーション） */
}
.sidebar__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
}
.sidebar__link {
  font-size: var(--fz16);
  color: var(--color-text-primary);
  line-height: 1.6;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.sidebar__link:hover {
  color: var(--color-brand-primary);
  opacity: 1;
}
.sidebar {
  /* SCROLL DOWN インジケータ（下端固定、上端は白フェード）
     flex 末尾 + 負マージンで scroll-area 下端に被せる
  */
}
.sidebar__scroll-hint {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: var(--scrollHintHeight);
  margin-top: calc(var(--scrollHintHeight) * -1);
  position: relative;
  z-index: 1;
  pointer-events: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-bottom: 16px;
  gap: 6px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.65)), color-stop(50%, rgb(255, 255, 255)), to(var(--color-neutral-white)));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.65) 0%, rgb(255, 255, 255) 50%, var(--color-neutral-white) 100%);
}
.sidebar__scroll-icon {
  width: 39px;
  height: 12px;
  display: block;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sidebar__scroll-text {
  font-size: var(--fz10);
  color: var(--color-text-primary);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* ///////////////////////////////////////////
  .accordion
  サイドバー内アコーディオン（details/summary ベース）
  開閉アニメーション (height: 0 ⇄ scrollHeight) は script.js で JS 制御
/////////////////////////////////////////// */
.accordion {
  width: 100%;
  background-color: var(--color-neutral-white);
  /* summary（ラベル部） */
}
.accordion__label {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  background-color: var(--color-neutral-white);
  font-size: var(--fz20);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-brand-primary);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.accordion__label::-webkit-details-marker {
  display: none;
}
.accordion {
  /* 開閉アイコン（開で 90deg 回転して下向き） */
}
.accordion__arrow {
  width: 12px;
  height: 12px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: auto;
  display: block;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.accordion[open] .accordion__arrow {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.accordion {
  /* リスト中身 — JS で height アニメ制御するため overflow:hidden 必須 */
}
.accordion__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-top: 1px solid var(--color-border);
  overflow: hidden;
  -webkit-transition: height 0.3s ease;
  transition: height 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .accordion__list {
    -webkit-transition: none;
    transition: none;
  }
}
.accordion__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 16px 24px;
  background-color: var(--color-neutral-lightgray);
  border-bottom: 1px solid var(--color-neutral-white);
  font-size: var(--fz16);
  line-height: 1.6;
  color: var(--color-text-primary);
  text-decoration: none;
  text-align: left;
  width: 100%;
  -webkit-transition: color 0.2s ease, background-color 0.2s ease;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.accordion__item:hover {
  background-color: var(--color-neutral-white);
  color: var(--color-brand-primary);
  opacity: 1;
}
.accordion__item[aria-current=page] {
  background-color: var(--color-brand-background);
  color: var(--color-brand-primary);
  font-weight: 700;
}
.accordion__item[aria-current=location] {
  color: var(--color-brand-primary);
}

/* ///////////////////////////////////////////
  footer.scss
  フッター
  PC (≥1020px): 2 列グリッド（左: ロゴ+表+連絡先、右: 地図+住所）
  TAB (769–1019px): 縦積み 1 列、中央寄せ
  SP (≤768px): 縦積み 1 列、左寄せ
/////////////////////////////////////////// */
.footer {
  background-color: var(--color-neutral-white);
  padding-top: 50px;
  padding-bottom: 40px;
  padding-inline: var(--sectionPadInline);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
@media print, screen and (min-width: 1020px) {
  .footer {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2;
    min-width: 0;
  }
  .footer > * {
    max-width: var(--contentMaxWidth);
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .footer {
    padding: 30px;
    gap: 30px;
  }
}
.footer {
  /* マップコンテナ（PC は 2 列、TAB/SP は縦積み） */
}
.footer__container {
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 30px;
}
@media print, screen and (min-width: 1020px) {
  .footer__container {
    -ms-grid-columns: 1fr 50px 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .footer__container {
    gap: 40px;
  }
}
.footer {
  /* 左コラム（ロゴ + 診療時間表 + 連絡先） */
}
.footer__left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .footer__left {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media only screen and (max-width: 768px) {
  .footer__left {
    gap: 30px;
  }
}
.footer {
  /* ロゴ + 法人名 */
}
.footer__brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .footer__brand {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.footer__corp-name {
  font-size: var(--fz14);
  line-height: 1.2;
  color: var(--fontColor);
}
.footer__logo {
  height: 67px;
  width: 340px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media only screen and (max-width: 768px) {
  .footer__logo {
    height: auto;
    width: 100%;
    max-width: 340px;
  }
}
.footer {
  /* メインコンテナ（診療時間 + 連絡先） */
}
.footer__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .footer__main {
    gap: 30px;
  }
}
.footer {
  /* 診療時間ブロック */
}
.footer__hours {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}
.footer__hours-title {
  font-size: var(--fz16);
  font-weight: 700;
  color: var(--color-brand-primary);
  line-height: 1.6;
}
.footer__hours-note {
  font-size: var(--fz16);
  line-height: 1.6;
}
@media only screen and (max-width: 768px) {
  .footer__hours-note {
    font-size: var(--fz14);
  }
}
.footer__hours-note {
  color: var(--fontColor);
}
.footer {
  /* 連絡先ブロック（薄ブランドブルー背景） */
}
.footer__contact {
  background-color: var(--color-brand-background);
  padding: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .footer__contact {
    padding: 16px;
  }
}
.footer__contact-label {
  font-size: var(--fz16);
  line-height: 1.6;
  color: var(--fontColor);
  margin-block: calc((1em - 1lh) / 2);
}
.footer__contact-phone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  font-size: var(--fz40);
  font-weight: 500;
  color: var(--color-brand-primary);
  line-height: 1.2;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .footer__contact-phone {
    font-size: var(--fz32);
  }
}
.footer__contact-icon {
  width: 16px;
  height: 16px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media only screen and (max-width: 768px) {
  .footer__contact-icon {
    width: 14px;
    height: 14px;
  }
}
.footer__contact-note {
  font-size: var(--fz16);
  line-height: 1.6;
}
@media only screen and (max-width: 768px) {
  .footer__contact-note {
    font-size: var(--fz14);
  }
}
.footer__contact-note {
  margin-block: calc((1em - 1lh) / 2);
  color: var(--fontColor);
}
.footer {
  /* 右コラム（地図 + 住所 + 説明） */
}
.footer__right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
}
@media only screen and (max-width: 768px) {
  .footer__right {
    gap: 16px;
  }
}
.footer__map {
  width: 100%;
  height: 300px;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .footer__map {
    height: 400px;
  }
}
.footer__map iframe {
  width: 100%;
  height: 100%;
}
.footer__address-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .footer__address-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
  }
}
.footer__address {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: var(--fz16);
  line-height: 1.6;
}
@media only screen and (max-width: 768px) {
  .footer__address {
    font-size: var(--fz14);
  }
}
.footer__address {
  font-style: normal;
  color: var(--color-text-primary);
}
.footer__description {
  font-size: var(--fz16);
  line-height: 1.6;
}
@media only screen and (max-width: 768px) {
  .footer__description {
    font-size: var(--fz14);
  }
}
.footer__description {
  color: var(--color-text-primary);
}
.footer__copyright {
  width: 100%;
  text-align: center;
  font-size: var(--fz14);
  line-height: 1.2;
  color: var(--fontColor);
}
@media only screen and (max-width: 768px) {
  .footer__copyright {
    font-size: var(--fz12);
  }
}

/* ///////////////////////////////////////////
  module.scss
  各ページで使い回すパーツやスタイルに関する記述
  - .pagetitle   下層ページ共通の青帯ページタイトル
  - .subhead     左 4px ブランドボーダー付き sub 見出し
                 + .subhead--brand バリアント（薄コーポレート背景）
  - .section-title  セクション大見出し（青見出し、h2）。下層ページ共通の正準スタイル
  - .section-stack  セクション内コンテンツの縦積み（既定 gap 40px。`--lg` で 80px）
  - .btn         ボタン（pill 形、ブランドブルー）
  - .card-grid   3-2-1 列レスポンシブグリッド
  - .card        カード（サムネ + タイトル + 説明 + ボタン）
  - .notifications / .notification  お知らせ
  - .blog-cards / .blog-card  スタッフブログカード（サムネ + 日付 + タイトル）
  - .blog-category-nav  ブログカテゴリーナビ（ピル型リンク + 件数。WP が出力）
  - .hours-table 診療時間テーブル（フッター用）
/////////////////////////////////////////// */
/* ===== ページタイトル =====
   下層ページ共通の青帯（背景: ブランドカラー、文字: 白、42px ≒ --fz40）
   Figma: bg #006bb6 / padding 80px / font 42px 白
   42px は変数になく --fz40 で代用
*/
/*
  eyebrow 付きページタイトルの共通仕様（編集はこの 1 箇所に集約）:
    <div class="pagetitle">
      <p class="pagetitle__category">矯正治療</p>   ← eyebrow（任意。無い場合は見出しのみ）
      <h1 class="pagetitle__heading">よくある質問</h1>
    </div>
  - FAQ（/orthodontics/faq/）と症例ページ（/case/...）の両方がこの構造を流用。
  - 症例ページの長いリード文だけ SP サイズが異なるため、_case.scss で `.pagetitle__category`
    の SP font-size のみ上書きしている（構造・他スタイルは全て本モジュールが供給）。
*/
.pagetitle {
  width: 100%;
  background-color: var(--color-brand-primary);
  color: var(--color-neutral-white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
@media print, screen and (min-width: 1020px) {
  .pagetitle {
    padding: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .pagetitle {
    padding: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .pagetitle {
    padding: 7vw;
    gap: 16px;
  }
}
.pagetitle__category {
  margin: 0;
  font-size: var(--fz24);
  font-weight: 400;
  line-height: 1.4;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .pagetitle__category {
    font-size: var(--fz16);
  }
}
.pagetitle__heading {
  margin: 0;
  font-size: var(--fz40);
  font-weight: 400;
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  .pagetitle__heading {
    font-size: var(--fz24);
  }
}
.pagetitle__category + .pagetitle__heading {
  -webkit-margin-before: calc((1em - 1lh) / 2);
          margin-block-start: calc((1em - 1lh) / 2);
}

/* ===== サブ見出し =====
   左 4px ブランドボーダー付きの h2/h3 用見出し
   Figma: 白背景 / border-left 4px solid primary / padding 8px 16px / 20px primary

   バリアント:
   - .subhead--brand : 薄コーポレート背景（Figma node 7172:3500、doctor 受賞見出し）
*/
.subhead {
  background-color: var(--color-neutral-white);
  border-left: 4px solid var(--color-brand-primary);
  padding: 8px 16px;
  color: var(--color-brand-primary);
  font-size: var(--fz20);
  font-weight: 500;
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  .subhead {
    font-size: var(--fz16);
  }
}
.subhead--brand {
  background-color: var(--color-brand-background);
}

/* ===== セクション大見出し（青見出し・h2）=====
   下層ページ共通の「青い見出し」の正準スタイル。新規ページはページ独自に
   見出しスタイルを定義せず、必ずこのクラスを使う（ページ間で差異を出さないため）。
   ＝ 症例ページの青見出し（.case-detail-section__title 等）と同値。

   - primary 色 / fz32（SP fz20）/ weight 400 / line-height 1.4
   - trim-leading(end) で見出し下側の半リーディングを除去し、直下テキストとの
     余白を親の flex gap 指定値どおり（glyph 基準）にする。
     ※下側のみトリムするのは eyebrow + h2 の縦並び（heading-group 等）で
       見出し上側の間隔を詰めないため。
   - 直下テキストとの余白は親コンテナの gap で決まる → 親に .section-stack を使う。

   使い方:
     <div class="section-stack">       … 縦積みコンテナ（gap 40px / SP 24px）
       <h2 class="section-title">見出し</h2>
       <p>本文…</p>
     </div>
*/
.section-title {
  margin: 0;
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
  -webkit-margin-after: calc((1em - 1lh) / 2);
          margin-block-end: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .section-title {
    font-size: var(--fz24);
  }
}

/* ===== セクション内コンテンツの縦積み =====
   見出し → 本文 などを縦に積むコンテナ。子要素間の gap（40px / SP 24px）が
   そのまま「青見出し直下の余白」になる（.section-title の trim-leading(end) と対で
   症例詳細「院長メッセージ」と同じ余白を再現）。
   テキスト幅は --contentMaxWidth（1200px）でキャップし中央寄せ。
   左右 padding は別途 .section-pad（01_layout/_common.scss）に委譲する。
*/
.section-stack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
  max-width: var(--contentMaxWidth);
  margin-inline: auto;
}
@media only screen and (max-width: 768px) {
  .section-stack {
    gap: 24px;
  }
}
.section-stack--lg {
  gap: 80px;
}
@media only screen and (max-width: 768px) {
  .section-stack--lg {
    gap: 40px;
  }
}

/* ===== ボタン =====
   pill 形、ブランドブルー塗り、白文字
   - 標準: padding 16px 48px, h:50px
   - カード内: --block で全幅
   - フッターアクセス: --access で max-width:200px、padding 縮小
   - テキストリンク: --text で背景透明
*/
.btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 10px 48px;
  background-color: var(--color-brand-primary);
  border: 2px solid var(--color-brand-primary);
  border-radius: 50px;
  color: var(--color-neutral-white);
  font-size: var(--fz16);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease, color 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn:hover {
  background-color: var(--color-neutral-white);
  color: var(--color-brand-primary);
  opacity: 1;
}
.btn__icon {
  width: 16px;
  height: 16px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
  background-color: currentColor;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.btn--block {
  width: 100%;
}
.btn--access {
  padding: 16px 32px;
  max-width: 200px;
  gap: 6px;
}
.btn--access .btn__icon {
  -webkit-mask-image: url("../images/common/icon-access.svg");
          mask-image: url("../images/common/icon-access.svg");
}
@media only screen and (max-width: 768px) {
  .btn--access {
    max-width: 100%;
    width: 100%;
    padding: 14px 32px;
  }
}
.btn--call {
  display: none;
}
.btn--call .btn__icon {
  width: 14px;
  height: 14px;
  -webkit-mask-image: url("../images/common/icon-phone.svg");
          mask-image: url("../images/common/icon-phone.svg");
}
@media only screen and (max-width: 768px) {
  .btn--call {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100%;
  }
}
.btn--text {
  background-color: transparent;
  border: none;
  color: var(--fontColor);
  padding: 8px 0;
  min-height: 24px;
  font-size: var(--fz16);
}
@media only screen and (max-width: 768px) {
  .btn--text {
    font-size: var(--fz14);
  }
}
.btn--text:hover {
  background-color: transparent;
  color: var(--color-brand-primary);
}
.btn--submit {
  width: 400px;
  max-width: 100%;
  font-size: var(--fz20);
}
@media only screen and (max-width: 768px) {
  .btn--submit {
    width: 100%;
    max-width: 320px;
  }
}
.btn--submit:disabled, .btn--submit.is-disabled {
  background-color: #999;
  border-color: #999;
  color: var(--color-neutral-white);
  cursor: not-allowed;
  pointer-events: none;
}
.btn--submit:disabled:hover, .btn--submit.is-disabled:hover {
  background-color: #999;
  color: var(--color-neutral-white);
}

/* ===== カードグリッド共通 =====
   PC: 3列 / TAB: 2列 / SP: 1列
*/
.card-grid {
  display: -ms-grid;
  display: grid;
  gap: 20px;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .card-grid {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
@media print, screen and (min-width: 1020px) {
  .card-grid {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== カード単体 =====
   2 ボックス構造（thumb + body）+ 入れ子 subgrid で行内アラインを実現。

   構造:
     .card
       ├── .card__thumb        (row 1)
       └── .card__body         (rows 2-4, subgrid 3 rows)
             ├── .card__title         (row 2)
             ├── .card__description   (row 3)
             └── .btn                 (row 4)

   - PC/TAB: 入れ子 subgrid で row track を card-grid → card → body と継承
     - 同行カード間で「サムネ底 / タイトル / 解説 / ボタン」の上下端が揃う
   - SP: flex column（1 列のためアライン不要）
   - body の padding: 24px (SP 15px) が「サムネ↔タイトル」「ボタン↔カード下」の余白
   - body の row-gap: 24px (SP 20px) が「タイトル↔解説↔ボタン」の行間
   - 半リーディング除去（margin-block）で指定余白と視覚距離を一致
*/
.card {
  background-color: var(--color-neutral-white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.card__thumb {
  aspect-ratio: 373/210;
  overflow: hidden;
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
}
@media only screen and (max-width: 768px) {
  .card__thumb {
    aspect-ratio: 320/192;
  }
}
.card__thumb-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.card__body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
  padding: 24px;
}
@media only screen and (max-width: 768px) {
  .card__body {
    padding: 15px;
    gap: 20px;
  }
}
.card__title {
  font-size: var(--fz24);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-brand-primary);
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .card__title {
    font-size: var(--fz20);
  }
}
.card__description {
  font-size: var(--fz16);
  line-height: 1.6;
  color: var(--color-text-primary);
}
@media only screen and (max-width: 768px) {
  .card__description {
    font-size: var(--fz14);
  }
}
.card {
  /* 半リーディング除去: 行ボックス内の余分な上下空白を打ち消し、
     マージンボックスを実グリフ高さに揃える。これで body 側の padding/row-gap が
     「テキスト間の視覚距離」と一致する。
     - title (fz20 × lh1.4) → 上下 -4px
     - description (fz16 × lh1.6) → 上下 -4.8px
     1em / 1lh が要素ごとに自動解決されるため一行で両方に効く。 */
}
.card__title, .card__description {
  margin-block: calc((1em - 1lh) / 2);
}
.card {
  /* PC/TAB: 入れ子 subgrid で同行カードの行内アラインを揃える */
}
@media print, screen and (min-width: 769px) {
  .card {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: subgrid;
    grid-template-rows: subgrid;
    -ms-grid-row-span: 4;
    grid-row: span 4;
    row-gap: 0;
  }
  .card .card__body {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: subgrid;
    grid-template-rows: subgrid;
    -ms-grid-row-span: 3;
    grid-row: span 3;
    row-gap: 24px;
  }
  .card .card__title {
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
  }
}

/* ===== お知らせセクション（ラッパー） =====
   トップページの「お知らせ」セクションとお知らせ一覧（/news/）ページで共有する。
   - 縦並びレイアウト（見出し + リスト本体）
   - padding は --sectionPadInline（PC 80px / TAB 50px / SP 7vw）で全幅セクション仕様
   - 上下 padding は 80px / 40px（top / bottom）→ 直下のセクションが続く前提
     ※ お知らせ一覧ページのみ、後続のページネーション側で上 padding を補完して
       同等の余白を確保する
*/
.news {
  padding-block: 80px 40px;
  padding-inline: var(--sectionPadInline);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 50px;
}
@media only screen and (max-width: 768px) {
  .news {
    padding-block: 30px;
    gap: 24px;
  }
}
.news__title {
  font-size: var(--fz32);
  line-height: 1.4;
  color: var(--color-brand-primary);
}
@media only screen and (max-width: 768px) {
  .news__title {
    font-size: var(--fz20);
  }
}

/* ===== お知らせリスト =====
   - 各通知: 白背景、padding 24px、日付 + タイトル
   - 「これまでのお知らせ」リンクは右寄せ
*/
.notifications {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 16px;
  width: 100%;
}
.notifications__list {
  width: 100%;
  max-width: 1200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

/* 構造: <li.notification> > <a.notification__link> > <time.notification__date> + <span.notification__title>
   padding を .notification__link 側へ持たせ、カード白背景の全域をクリック領域にする */
.notification {
  background-color: var(--color-neutral-white);
}
.notification__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
}
@media only screen and (max-width: 768px) {
  .notification__link {
    gap: 4px;
    padding: 15px;
  }
}
.notification__date {
  font-size: var(--fz14);
  line-height: 1.6;
  color: var(--fontColor);
}
.notification__title {
  font-size: var(--fz16);
  line-height: 1.6;
  color: var(--fontColor);
}

/* ===== スタッフブログカード =====
   トップページ「スタッフブログ」セクションとブログ一覧（/blog/）ページで共有する。
   列数は共通 .card-grid（PC 3列 / TAB 2列 / SP 1列）に委ねる。

   構造:
     .blog-cards                       （グリッド + 「これまでの〜」リンクの縦積み）
       ├── .blog-cards__grid.card-grid
       │     └── .blog-card (article)
       │           └── .blog-card__link (a)     ← カード全面がクリック領域
       │                 ├── .blog-card__body   （日付 + タイトル。DOM 先頭 = 読み上げ順）
       │                 └── .blog-card__thumb  （order:-1 で視覚上は先頭。.card と同方針）
       └── .btn.btn--text

   - サムネは aspect-ratio 16:9 + object-fit: cover で枠を統一。
     WP のアイキャッチは元画像の比率がばらつくため、枠側で吸収して
     グリッド行内のカード高さ揃え（align-items 既定 stretch + __link height:100%）を保証する
   - ホバー（opacity）と focus-visible は _common.scss の共通 a スタイルが担当
*/
.blog-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 16px;
  width: 100%;
  max-width: var(--contentMaxWidth);
  margin-inline: auto;
}
.blog-cards__grid {
  width: 100%;
}
.blog-cards .btn--text + .btn--text {
  margin-top: -1em;
}

.blog-card {
  background-color: var(--color-neutral-white);
  border: 1px solid var(--color-border);
}
.blog-card__link {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.blog-card__thumb {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.blog-card__thumb-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.blog-card__body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  padding: 24px;
}
@media only screen and (max-width: 768px) {
  .blog-card__body {
    gap: 4px;
    padding: 15px;
  }
}
.blog-card__date {
  font-size: var(--fz14);
  line-height: 1.6;
  color: var(--fontColor);
}
.blog-card__title {
  font-size: var(--fz16);
  font-weight: 500;
  line-height: 1.6;
  color: var(--fontColor);
}

/* ===== ブログカテゴリーナビ =====
   ブログ一覧（/blog/・/blog/{カテゴリースラッグ}/）でカテゴリー別一覧へのリンク + 件数を表示する。
   マークアップは WP テーマ（archive.php → mytheme_render_blog_category_nav()）が出力。

   構造:
     <nav class="blog-category-nav" aria-label="ブログカテゴリー">
       <ul class="blog-category-nav__list">
         <li><a class="blog-category-nav__item" href="/blog/" aria-current="page">すべて（12）</a></li>
         <li><a class="blog-category-nav__item" href="/blog/{slug}/">カテゴリー名（3）</a></li>
         …

   - 折返し横並びのピル型リンク。8px gap・min-height 44px（タッチターゲット確保）
   - カレント（aria-current="page"。WP がサーバー側で付与）はブランド色の塗りつぶしで表示
   - ホバーは背景の薄青のみで反応（共通 a:hover の opacity は打ち消し、文字は薄くしない）
*/
.blog-category-nav {
  width: 100%;
  max-width: var(--contentMaxWidth);
  margin-inline: auto;
}
.blog-category-nav__list {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}
.blog-category-nav__list > li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog-category-nav__item {
  min-height: 44px;
  padding: 8px 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid var(--color-brand-primary);
  border-radius: 9999px;
  background-color: var(--color-neutral-white);
  color: var(--color-brand-primary);
  font-size: var(--fz16);
  line-height: 1.4;
  text-decoration: none;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
@media only screen and (max-width: 768px) {
  .blog-category-nav__item {
    font-size: var(--fz14);
  }
}
.blog-category-nav__item:hover {
  opacity: 1;
  background-color: var(--color-brand-background);
}
.blog-category-nav__item[aria-current=page] {
  background-color: var(--color-brand-primary);
  color: var(--color-neutral-white);
}
.blog-category-nav__item[aria-current=page]:hover {
  background-color: var(--color-brand-primary);
}

/* ===== 診療時間テーブル =====（フッター用）
   - 8列（診療時間ラベル + 月〜日）× 4行（thead + 3行 tbody）
   - 行間 dashed border（#112f7c）
   - 「●」は受診可、「-」は休診
*/
.hours-table {
  width: 100%;
  border-bottom: 1px dashed var(--color-table-border);
  background-color: var(--color-neutral-white);
  border-collapse: collapse;
}
.hours-table th, .hours-table td {
  padding: 1em;
  font-size: var(--fz16);
  line-height: 1.2;
  color: var(--color-text-primary);
  text-align: center;
  font-weight: 400;
  border-top: 1px dashed var(--color-table-border);
}
@media only screen and (max-width: 768px) {
  .hours-table th, .hours-table td {
    padding: 1em 0.5em;
    font-size: var(--fz14);
  }
}
.hours-table thead tr th {
  border-top: none;
  font-weight: 500;
}
.hours-table th[scope=row] {
  width: 128px;
}
@media only screen and (max-width: 768px) {
  .hours-table th[scope=row] {
    width: 96px;
  }
}
.hours-table .is-available,
.hours-table .is-unavailable {
  color: var(--color-brand-primary);
}

/* ///////////////////////////////////////////
  _home.scss
  トップページ固有スタイル
  セクション順: Hero → Introduction → 特色 → お悩み → お知らせ → カレンダー
  ※ Hero (.hero) のスタイルもここに統合
/////////////////////////////////////////// */
/* ===== Hero（上: スライダーバナー / 下: テキスト帯） =====
   スライダー: Splide.js + AutoScroll 拡張で連続左スクロール（ベルトコンベア型）。
              focus: 'center' + viewport > fixedWidth により左右のスライドが見切れる。
              各スライドは 16:9（.splide__slide の aspect-ratio:16/9）。
   テキスト:  スライダーの下に横幅いっぱいの白帯として配置、中央寄せ（introduction の上）。

   寸法（slide 幅は固定、高さ = 幅 × 9/16 ＝ 16:9）:
   - PC:  slide 幅712px → 約400px、gap 40
   - TAB: slide 幅600px → 約338px、gap 20
   - SP:  slide 幅320px → 180px、gap 15
*/
.hero {
  background-color: var(--color-neutral-white);
  width: 100%;
  /* 縦積み: 上にスライダー（バナー）、下に hero__text（白帯）。テキストは introduction の上。 */
  /* スライダー（バナー、ブロック配置）
   * 各スライドは 16:9（aspect-ratio）。banner 高さ = スライド高さ = fixedWidth × 9/16。
   * PC: fixedWidth 890px → 約500px（従来のバナー高さを維持）。TAB/SP は各 fixedWidth に応じた 16:9。
   * 停止/再開ボタン（.hero__play-toggle）の配置基準にするため position: relative。
   */
}
.hero__slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* 各スライドを 16:9 に統一（PC・SP 共通）。
   * Splide は fixedWidth（home.js）で幅を制御し、aspect-ratio で高さが width × 9/16 に決まる。
   * （home.js は height オプション未指定のまま＝CSS の aspect-ratio が高さを決定）
   */
}
.hero__slider .splide__slide {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.hero__slider .splide__slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.hero {
  /* テキストブロック（スライダーの下・横幅いっぱいの白帯／中央寄せ）
   * 背景白はバナー下の帯として全幅に伸ばし、テキストは中央寄せにする。
   */
}
.hero__text {
  width: 100%;
  padding: 40px 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  gap: 32px;
  color: var(--color-text-primary);
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .hero__text {
    padding: 32px 50px;
    gap: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .hero__text {
    padding: 24px 7vw;
    gap: 16px;
  }
}
.hero__headline {
  font-weight: 300;
  font-size: var(--fz40);
  line-height: 1.2;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .hero__headline {
    font-size: var(--fz32);
  }
}
@media only screen and (max-width: 768px) {
  .hero__headline {
    font-size: var(--fz24);
  }
}
.hero__sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
  font-size: var(--fz20);
  font-weight: 400;
  line-height: 1.6;
}
@media print, screen and (max-width: 1019px) {
  .hero__sub {
    font-size: var(--fz16);
  }
}
.hero {
  /* 駅情報・施設認定: タイポグラフィは共通、color のみ異なる */
}
.hero__sub-station {
  color: var(--color-brand-primary);
}
.hero__sub-cert {
  color: var(--color-text-primary);
}
.hero {
  /* 自動スクロール一時停止/再開ボタン（WCAG 2.2.2 Level A 対応）
   * - スライダーは aria-hidden + pointer-events: none のため、本ボタンが
   *   全ユーザー（タッチ含む）に対する唯一の停止/再開手段
   * - Hero 右下に配置し、半透明背景＋白枠で動画背景上でも視認性確保
   * - .is-paused 状態クラスで pause/play アイコンを切替
   */
}
.hero__play-toggle {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--color-neutral-white);
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.hero__play-toggle:hover {
  background-color: rgba(0, 0, 0, 0.75);
  opacity: 1;
}
@media only screen and (max-width: 768px) {
  .hero__play-toggle {
    bottom: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
  }
}
.hero__play-toggle-icon {
  display: block;
}
@media only screen and (max-width: 768px) {
  .hero__play-toggle-icon {
    width: 12px;
    height: 12px;
  }
}
.hero {
  /* 状態を示すアイコン（State convention）:
   * 既定（再生中）: ▶ アイコンを表示（現在再生中であることを示す）
   * 一時停止中:   ⏸ アイコンを表示（現在停止していることを示す）
   * ※ aria-label 側はクリック時の動作（action）を記述しているため、視覚=状態 / 音声=動作 の役割分担
   */
}
.hero__play-toggle-icon--pause {
  display: none;
}
.hero__play-toggle.is-paused .hero__play-toggle-icon--play {
  display: none;
}
.hero__play-toggle.is-paused .hero__play-toggle-icon--pause {
  display: block;
}

.page--home {
  /* ===== PC: 各セクションのインナーコンテンツを 1200px キャップ・中央配置 =====
     セクション自体（背景色）は viewport 右端まで広がるが、
     中身（見出し・カードグリッド・テキスト等）は 1200px までで頭打ち、
     さらに親セクション内で中央配置（「特色と専門性」と同じ振る舞い）。
  */
}
@media print, screen and (min-width: 1020px) {
  .page--home .introduction,
  .page--home .features,
  .page--home .worries,
  .page--home .news,
  .page--home .calendar {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .page--home .introduction > *,
  .page--home .features > *,
  .page--home .worries > *,
  .page--home .news > *,
  .page--home .calendar > * {
    max-width: var(--contentMaxWidth);
    width: 100%;
  }
}
.page--home {
  /* ===== Introduction（導入文 + 医院外観 + メッセージ） ===== */
}
.page--home .introduction {
  padding-block: 80px;
  padding-inline: var(--sectionPadInline);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 80px;
}
@media only screen and (max-width: 768px) {
  .page--home .introduction {
    padding-block: 7vw;
    gap: 30px;
  }
}
.page--home .introduction__lead {
  font-size: var(--fz32);
  line-height: 1.4;
  color: var(--color-brand-primary);
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .page--home .introduction__lead {
    font-weight: 500;
    font-size: var(--fz20);
  }
}
.page--home .introduction__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 50px;
}
@media only screen and (max-width: 768px) {
  .page--home .introduction__container {
    gap: 24px;
  }
}
.page--home .introduction__image {
  width: 100%;
  aspect-ratio: 960/450;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (max-width: 768px) {
  .page--home .introduction__image {
    aspect-ratio: 320/180;
  }
}
.page--home .introduction__message {
  font-size: var(--fz16);
  line-height: 1.8;
  color: var(--fontColor);
}
@media only screen and (max-width: 768px) {
  .page--home .introduction__message {
    font-size: var(--fz14);
  }
}
.page--home .introduction__message p + p {
  margin-top: 1.4em;
}
.page--home {
  /* ===== 特色と専門性（青背景セクション） ===== */
}
.page--home .features {
  background-color: var(--color-brand-primary);
  padding-block: 80px;
  padding-inline: var(--sectionPadInline);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 50px;
}
@media only screen and (max-width: 768px) {
  .page--home .features {
    padding-block: 7vw;
    gap: 30px;
  }
}
.page--home .features__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  color: var(--color-neutral-white);
  text-align: center;
  line-height: 1.6;
}
@media only screen and (max-width: 768px) {
  .page--home .features__header {
    gap: 8px;
  }
}
.page--home .features {
  /* 半リーディング除去: subtitle と title の間の視覚距離を flex gap (20px) と一致させる
     1em / 1lh が要素ごとに自動解決されるため一行で両方に効く */
}
.page--home .features__subtitle, .page--home .features__title {
  margin-block: calc((1em - 1lh) / 2);
}
.page--home .features__subtitle {
  font-size: var(--fz24);
}
@media only screen and (max-width: 768px) {
  .page--home .features__subtitle {
    font-size: var(--fz16);
  }
}
.page--home .features__title {
  font-size: var(--fz40);
}
@media only screen and (max-width: 768px) {
  .page--home .features__title {
    font-size: var(--fz32);
  }
}
.page--home {
  /* ===== 歯並びのお悩み（白背景セクション） ===== */
}
.page--home .worries {
  padding-block: 80px;
  padding-inline: var(--sectionPadInline);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 50px;
}
@media only screen and (max-width: 768px) {
  .page--home .worries {
    padding-block: 7vw;
    gap: 30px;
  }
}
.page--home .worries__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}
.page--home .worries__title {
  font-size: var(--fz40);
  line-height: 1.4;
  color: var(--color-brand-primary);
}
.page--home .worries__title .small {
  display: block;
  font-size: var(--fz24);
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--home .worries__title .small {
    font-size: var(--fz16);
  }
}
@media only screen and (max-width: 768px) {
  .page--home .worries__title {
    font-size: var(--fz24);
  }
}
.page--home .worries__lead {
  font-size: var(--fz16);
  line-height: 1.6;
  color: var(--color-text-primary);
}
@media only screen and (max-width: 768px) {
  .page--home .worries__lead {
    font-size: var(--fz14);
  }
}
.page--home {
  /* ===== お知らせ / スタッフブログ =====
     基本スタイル（padding / 見出し font / gap）は共通モジュール `.news` に集約
     （スタッフブログのセクションラッパーも .news を流用）。
     ここではトップ固有の上書きのみ記述。
     → 共通モジュール: src/assets/scss/02_module/_module.scss `.news` / `.blog-cards` を参照 */
}
.page--home .news {
  background-color: var(--color-neutral-white);
}
.page--home .notifications__list {
  gap: 0;
}
.page--home .notification {
  border: 1px solid var(--color-border);
}
.page--home .notification + .notification {
  border-top: 0;
}
.page--home .notification__link {
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.page--home .notification__link:hover {
  opacity: 1;
  background-color: var(--color-brand-background);
}
@media only screen and (max-width: 768px) {
  .page--home .news__title {
    font-size: var(--fz24);
  }
}
.page--home .blog {
  -webkit-padding-before: 40px;
          padding-block-start: 40px;
}
@media only screen and (max-width: 768px) {
  .page--home .blog {
    -webkit-padding-before: 30px;
            padding-block-start: 30px;
  }
}
.page--home {
  /* ===== 診療カレンダー ===== */
}
.page--home .calendar {
  padding-block: 40px 80px;
  padding-inline: var(--sectionPadInline);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 50px;
}
@media only screen and (max-width: 768px) {
  .page--home .calendar {
    padding-block: 7vw;
    gap: 24px;
  }
}
.page--home .calendar__title {
  font-size: var(--fz32);
  line-height: 1.4;
  color: var(--color-brand-primary);
}
@media only screen and (max-width: 768px) {
  .page--home .calendar__title {
    font-size: var(--fz24);
  }
}
.page--home .calendar__container {
  width: 100%;
  aspect-ratio: 966/500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (max-width: 768px) {
  .page--home .calendar__container {
    aspect-ratio: 320/400;
  }
}
.page--home .calendar__container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ///////////////////////////////////////////
  _clinic.scss
  「はじめての方へ」（/clinic/index.html）専用スタイル

  構成（ページ内の DOM 出現順）:
    1. セクション共通     全セクションの共通余白・白背景指定
    2. .clinic-greeting   あいさつセクション
    3. .clinic-features   7つの特長（追加原稿、デザインなし）
    4. .clinic-facility   院内のご案内（カードグリッド）
    5. .clinic-card       院内案内カード（本ページ専用）
    6. .clinic-standards  施設基準に関する掲示（左ボーダー見出し）

  ※ ページタイトル（.pagetitle）は他下層ページでも使用するため
     `02_module/_module.scss` 側に移動済み

  - 全スタイルは .page--clinic スコープ内
  - PC は Figma 準拠（80px padding、660px 画像、3列カード）
  - TAB/SP は Figma デザインなし → 適宜作成
    - TAB: 縦余白 50px、カード 2 列
    - SP: 縦余白 7vw、左右 7vw、カード 1 列

  背景色の交互配置（DOM 順）:
    あいさつ（薄青 / main 継承）→ 7 つの特長（白）
      → 院内のご案内（薄青 / main 継承）→ 施設基準（白）
    7つの特長・施設基準を白背景化することで、白背景上で subhead の白背景が
    埋もれる箇所が出るため、HTML 側で `.subhead--brand` バリアントを併記。
    また、白背景セクション内の白いカード（features__item）は薄青に、
    薄青背景セクション内の薄青カード本体（clinic-card__body）は白に、
    それぞれ「埋もれない方の色」に反転している。
/////////////////////////////////////////// */
.page--clinic {
  /* ============================================================
    1. セクション共通（あいさつ／7つの特長／院内のご案内／施設基準）
    Figma の各セクション padding 80px を全幅で適用
  ============================================================ */
}
.page--clinic .clinic-greeting,
.page--clinic .clinic-features,
.page--clinic .clinic-facility,
.page--clinic .clinic-standards {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--clinic .clinic-greeting,
  .page--clinic .clinic-features,
  .page--clinic .clinic-facility,
  .page--clinic .clinic-standards {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--clinic .clinic-greeting,
  .page--clinic .clinic-features,
  .page--clinic .clinic-facility,
  .page--clinic .clinic-standards {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--clinic .clinic-greeting,
  .page--clinic .clinic-features,
  .page--clinic .clinic-facility,
  .page--clinic .clinic-standards {
    padding-block: 7vw;
  }
}
.page--clinic .clinic-features,
.page--clinic .clinic-standards {
  background-color: var(--color-neutral-white);
}
.page--clinic {
  /* ============================================================
    2. あいさつセクション
  ============================================================ */
}
.page--clinic .clinic-greeting__inner {
  max-width: var(--contentMaxWidth);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--clinic .clinic-greeting__inner {
    gap: 24px;
  }
}
.page--clinic .clinic-greeting__image {
  width: 100%;
  margin: 0;
}
.page--clinic .clinic-greeting__image img {
  display: block;
  width: 100%;
  height: auto;
}
.page--clinic .clinic-greeting__title {
  width: 100%;
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  .page--clinic .clinic-greeting__title {
    font-size: var(--fz24);
  }
}
.page--clinic .clinic-greeting__text {
  width: 100%;
  color: var(--color-text-primary);
  line-height: 1.8;
}
.page--clinic .clinic-greeting__text > p + p {
  margin-top: 1.8em;
}
.page--clinic .clinic-greeting__list {
  width: 100%;
  color: var(--color-text-primary);
  line-height: 1.8;
  padding-left: 1.5em;
}
.page--clinic .clinic-greeting__list > li {
  list-style: disc;
}
.page--clinic {
  /* ============================================================
    3. 西村矯正歯科クリニック.の7つの特長（追加原稿、Figma デザインなし）
    - セクション背景: 白（背景色の交互配置で features 白）
    - 各項目（<li>）は薄青カード（白セクション上に浮かせる）
    - 締めブロック内 subhead は `.subhead--brand`（薄青）で白セクションに埋もれない
    - PC: 番号バッジ + 本文の 2 カラム、SP: 縦積み
    - 番号は <ol> セマンティクスでも伝達、視覚バッジは aria-hidden で重複読み回避
  ============================================================ */
}
.page--clinic .clinic-features__inner {
  max-width: var(--contentMaxWidth);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--clinic .clinic-features__inner {
    gap: 24px;
  }
}
.page--clinic .clinic-features__title {
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  .page--clinic .clinic-features__title {
    font-size: var(--fz24);
  }
}
.page--clinic .clinic-features__list {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
@media only screen and (max-width: 768px) {
  .page--clinic .clinic-features__list {
    gap: 16px;
  }
}
.page--clinic .clinic-features__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 24px;
  padding: 32px;
  background-color: var(--color-brand-background);
}
@media only screen and (max-width: 768px) {
  .page--clinic .clinic-features__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
    padding: 24px 16px;
  }
}
.page--clinic .clinic-features__number {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 64px;
  color: var(--color-brand-primary);
  font-family: "LINE Seed JP", var(--baseFont);
  font-size: var(--fz40);
  font-weight: 500;
  line-height: 1;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--clinic .clinic-features__number {
    width: auto;
    font-size: var(--fz32);
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
    text-align: center;
  }
}
.page--clinic .clinic-features__body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  color: var(--color-text-primary);
  line-height: 1.8;
}
@media only screen and (max-width: 768px) {
  .page--clinic .clinic-features__body {
    gap: 8px;
  }
}
.page--clinic .clinic-features__heading {
  color: var(--color-brand-primary);
  font-size: var(--fz20);
  font-weight: 500;
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  .page--clinic .clinic-features__heading {
    font-size: var(--fz16);
  }
}
.page--clinic .clinic-features__sublist {
  margin: 0;
  padding-left: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
.page--clinic .clinic-features__sublist > li {
  list-style: disc;
}
.page--clinic .clinic-features__closing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.page--clinic .clinic-features__closing-body {
  padding: 24px 16px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
  color: var(--color-text-primary);
  line-height: 1.8;
}
@media only screen and (max-width: 768px) {
  .page--clinic .clinic-features__closing-body {
    padding: 16px 0 0;
    gap: 16px;
  }
}
.page--clinic {
  /* ============================================================
    4. 院内のご案内（クリニックカードグリッド）
  ============================================================ */
}
.page--clinic .clinic-facility__inner {
  max-width: var(--contentMaxWidth);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--clinic .clinic-facility__inner {
    gap: 24px;
  }
}
.page--clinic .clinic-facility__title {
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  .page--clinic .clinic-facility__title {
    font-size: var(--fz24);
  }
}
.page--clinic .clinic-facility__grid {
  margin: 0;
  padding: 0;
  display: -ms-grid;
  display: grid;
  gap: 20px;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--clinic .clinic-facility__grid {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
@media print, screen and (min-width: 1020px) {
  .page--clinic .clinic-facility__grid {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}
.page--clinic {
  /* ============================================================
    5. 院内案内カード（<li class="clinic-card">）
    Figma: thumb (250x166 ≒ aspect 250/166) + 本体 padding 24px
    - 本体は白（カード全体が白）。院内のご案内セクションが薄青背景化された
      ため、Figma の薄青ボディから白に反転（薄青背景上で薄青ボディが埋もれる
      問題を回避、ユーザー承認の背景色交互配置ルール優先）
    - PC は同行内でタイトル位置を揃えるため subgrid を使用
    - DOM 順は body → thumb（見出し・本文を先に読み上げ）、視覚順は order で thumb → body に戻す
  ============================================================ */
}
.page--clinic .clinic-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: var(--color-neutral-white);
}
.page--clinic .clinic-card__thumb {
  width: 100%;
  aspect-ratio: 250/166;
  overflow: hidden;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.page--clinic .clinic-card__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.page--clinic .clinic-card__body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
  padding: 24px;
  background-color: var(--color-neutral-white);
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
@media only screen and (max-width: 768px) {
  .page--clinic .clinic-card__body {
    gap: 16px;
    padding: 16px;
  }
}
.page--clinic .clinic-card__title {
  color: var(--color-brand-primary);
  font-size: var(--fz20);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
.page--clinic .clinic-card__text {
  color: var(--color-text-primary);
  line-height: 1.6;
}
.page--clinic .clinic-card__title, .page--clinic .clinic-card__text {
  margin-block: calc((1em - 1lh) / 2);
}
@media print, screen and (min-width: 1020px) {
  .page--clinic .clinic-card {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: subgrid;
    grid-template-rows: subgrid;
    -ms-grid-row-span: 3;
    grid-row: span 3;
    row-gap: 0;
  }
  .page--clinic .clinic-card .clinic-card__body {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: subgrid;
    grid-template-rows: subgrid;
    -ms-grid-row-span: 2;
    grid-row: span 2;
    row-gap: 24px;
  }
  .page--clinic .clinic-card .clinic-card__title {
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
  }
}
.page--clinic {
  /* ============================================================
    6. 施設基準に関する掲示
    Figma: 各項目は左 4px 青ボーダーの subHeading + 本文（pt 24px / px 16px）
    ※ 左ボーダー見出しは `.subhead`（02_module/_module.scss）に切り出し済み
    ※ 本セクションは白背景（背景色の交互配置）のため、subhead は
       `.subhead--brand` バリアント（薄青背景）で埋没を回避（HTML 側で並記）
  ============================================================ */
}
.page--clinic .clinic-standards__inner {
  max-width: var(--contentMaxWidth);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--clinic .clinic-standards__inner {
    gap: 24px;
  }
}
.page--clinic .clinic-standards__title {
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  .page--clinic .clinic-standards__title {
    font-size: var(--fz24);
  }
}
.page--clinic .clinic-standards__lead {
  color: var(--color-text-primary);
  line-height: 1.8;
}
.page--clinic .clinic-standards__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.page--clinic .clinic-standards__body {
  padding: 24px 16px 0;
  color: var(--color-text-primary);
  line-height: 1.8;
}
@media only screen and (max-width: 768px) {
  .page--clinic .clinic-standards__body {
    padding: 16px 0 0;
  }
}
.page--clinic .clinic-standards__list {
  padding-left: 24px;
}
.page--clinic .clinic-standards__list > li {
  list-style: disc;
}

/* ///////////////////////////////////////////
  _doctor.scss
  「院長プロフィール」（/clinic/doctor/index.html）専用スタイル

  構成:
    1. .doctor-intro       院長近影 + 役職・氏名・資格表記（PC: 左右 1:1 二等分 / TAB・SP: 縦積み）
    2. .doctor-career      経歴セクション（略歴 + リスト群）
       - .doctor-history   略歴テーブル（破線テーブル）
       - .doctor-list      disc リスト
       - .doctor-license   認定証・資格証カード（PC 3列 / TAB 2列 / SP 1列）
    3. .doctor-message     院長メッセージ（理由 / 受賞）
       - --filled バリアント: 白背景
       - 通常: ページ背景（薄コーポレート）に透過
       - 共通 subhead モジュール（.subhead / .subhead--brand）で見出し表現
    4. .doctor-papers      研究業績 論文（番号付きリスト、白背景）

  - 全スタイルは .page--doctor スコープ内
  - PC は Figma 準拠（80px padding、2 カラムレイアウト）
  - TAB/SP は Figma デザインなし → 適宜作成
    - TAB: 縦余白 50px、2 カラム維持または縦積み
    - SP: 縦余白 7vw、左右 7vw、縦積み
/////////////////////////////////////////// */
.page--doctor {
  /* ============================================================
    セクション共通余白
    Figma の各セクション padding 80px を全幅で適用
  ============================================================ */
}
.page--doctor .doctor-intro,
.page--doctor .doctor-career,
.page--doctor .doctor-message,
.page--doctor .doctor-papers {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--doctor .doctor-intro,
  .page--doctor .doctor-career,
  .page--doctor .doctor-message,
  .page--doctor .doctor-papers {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--doctor .doctor-intro,
  .page--doctor .doctor-career,
  .page--doctor .doctor-message,
  .page--doctor .doctor-papers {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-intro,
  .page--doctor .doctor-career,
  .page--doctor .doctor-message,
  .page--doctor .doctor-papers {
    padding-block: 7vw;
  }
}
.page--doctor .doctor-papers {
  background-color: var(--color-neutral-white);
}
.page--doctor .doctor-career {
  -webkit-padding-before: 0;
          padding-block-start: 0;
}
.page--doctor {
  /* ============================================================
    1. 院長近影 + 役職・氏名・資格表記
    PC: 横並び 1:1 二等分（gap 80px）。画像が横長 4:3（800×600）に変更されたため
        Figma の固定幅 2 カラム（写真 400px / 右側 486px）から均等分割へ変更
    TAB / SP: 縦積み（画像は max-width 800px で中央寄せ）
  ============================================================ */
}
.page--doctor .doctor-intro__inner {
  max-width: var(--contentMaxWidth);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 80px;
}
@media print, screen and (max-width: 1019px) {
  .page--doctor .doctor-intro__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--doctor .doctor-intro__inner {
    gap: 40px;
  }
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-intro__inner {
    gap: 24px;
  }
}
.page--doctor .doctor-intro__portrait {
  margin: 0;
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
}
@media print, screen and (max-width: 1019px) {
  .page--doctor .doctor-intro__portrait {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 100%;
    max-width: 800px;
  }
}
.page--doctor .doctor-intro__portrait img {
  width: 100%;
  height: auto;
}
.page--doctor .doctor-intro__body {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}
@media print, screen and (max-width: 1019px) {
  .page--doctor .doctor-intro__body {
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-intro__body {
    gap: 24px;
  }
}
.page--doctor {
  /* ============================================================
    Manager Info
  ============================================================ */
}
.page--doctor .doctor-intro__manager {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1em;
  text-align: center;
}
.page--doctor .doctor-intro__role {
  color: var(--color-brand-primary);
  font-size: var(--fz20);
  font-weight: 400;
  line-height: 1.6;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-intro__role {
    font-size: var(--fz16);
  }
}
.page--doctor .doctor-intro__name {
  color: var(--color-brand-primary);
  font-weight: 400;
  line-height: 1.6;
}
.page--doctor .doctor-intro__name .doctor-intro__name-ja {
  display: block;
  font-size: var(--fz32);
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-intro__name .doctor-intro__name-ja {
    font-size: var(--fz24);
  }
}
.page--doctor .doctor-intro__name .doctor-intro__name-en {
  display: block;
  font-size: var(--fz16);
}
.page--doctor {
  /* ============================================================
    半リーディング除去（hgroup 内の視覚距離正規化）
    - .doctor-intro__name-ja (h2 内の最初): 上端のみ crop
    - .doctor-intro__name-en (h2 内の最後): 下端のみ crop
      （和名と英名の間は line-height 自然行間を維持）
  ============================================================ */
}
.page--doctor .doctor-intro__name-ja {
  -webkit-margin-before: calc((1em - 1lh) / 2);
          margin-block-start: calc((1em - 1lh) / 2);
}
.page--doctor .doctor-intro__name-en {
  -webkit-margin-after: calc((1em - 1lh) / 2);
          margin-block-end: calc((1em - 1lh) / 2);
}
.page--doctor {
  /* ============================================================
    資格表記（4 項目の箇条書き、中央寄せ、--fz20、line-height 1.8）
    各項目の間を破線で区切る（マーカーなしの ul/li）
  ============================================================ */
}
.page--doctor .doctor-intro__qualifications {
  list-style: none;
}
.page--doctor .doctor-intro__qualifications li {
  font-size: var(--fz20);
  padding: 0.25em 0.5em;
  background-color: var(--color-neutral-white);
  border-radius: 8px;
  color: var(--color-brand-primary);
  text-align: center;
  line-height: 1.6;
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-intro__qualifications li {
    font-size: var(--fz16);
  }
}
.page--doctor .doctor-intro__qualifications li div {
  display: block;
  font-size: 80%;
  color: var(--color-text-primary);
}
.page--doctor .doctor-intro__qualifications li + li {
  margin-top: 0.5em;
}
.page--doctor {
  /* ============================================================
    2. 経歴セクション
    略歴（左）+ 学位・資格 / 所属学会 / 著書 / 趣味（右）の 2 カラム
  ============================================================ */
}
.page--doctor .doctor-career__inner {
  max-width: var(--contentMaxWidth);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 80px;
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-career__inner {
    gap: 40px;
  }
}
.page--doctor .doctor-career__columns {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media print, screen and (min-width: 1020px) {
  .page--doctor .doctor-career__columns {
    -ms-grid-columns: 1fr 80px 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--doctor .doctor-career__columns {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 56px;
  }
}
.page--doctor .doctor-career__col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
  min-width: 0;
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-career__col {
    gap: 24px;
  }
}
.page--doctor .doctor-career__col--list {
  gap: 80px;
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-career__col--list {
    gap: 40px;
  }
}
.page--doctor .doctor-career__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 32px;
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-career__block {
    gap: 16px;
  }
}
.page--doctor .doctor-career__title {
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-career__title {
    font-size: var(--fz24);
  }
}
.page--doctor {
  /* ============================================================
    略歴（doctor-history）
    Figma: 各行の上下に破線（top/bottom）、左右ボーダーなし
    年月 130px / 内容 1fr の 2 カラム

    実装メモ:
    - 年月（dt）→ 事象（dd）の対応関係は table（2D 相関データ）よりも
      dl（定義リスト）の方が意味的に適切なため <dl> を採用
    - CSS Grid（auto-placement）で dt を 1 列目、dd を 2 列目に自動配置
    - 破線は border-top を dt / dd 両方に付与（row 単位で連続）
    - dl 直下に div ラッパーは作らず、各 dt / dd に個別クラスでハイライト指定
  ============================================================ */
}
.page--doctor .doctor-history {
  width: 100%;
  margin: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 130px 1fr;
  grid-template-columns: 130px 1fr;
  color: var(--color-text-primary);
  line-height: 1.6;
  border-bottom: 1px dashed var(--color-table-border);
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-history {
    -ms-grid-columns: 96px 1fr;
    grid-template-columns: 96px 1fr;
  }
}
.page--doctor .doctor-history > dt,
.page--doctor .doctor-history > dd {
  margin: 0;
  padding: 1em;
  border-top: 1px dashed var(--color-table-border);
}
.page--doctor .doctor-history > dt {
  font-weight: 400;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-history > dt {
    padding-inline: 0 8px;
  }
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-history > dd {
    padding-inline: 8px 0;
  }
}
.page--doctor .doctor-history > .doctor-history__highlight {
  font-weight: 700;
}
.page--doctor {
  /* ============================================================
    disc リスト（学位・資格 / 所属学会 / 著書 / 趣味）
  ============================================================ */
}
.page--doctor .doctor-list {
  width: 100%;
  padding-left: 1.5em;
  color: var(--color-text-primary);
  line-height: 1.6;
}
.page--doctor .doctor-list > li {
  list-style: disc;
}
.page--doctor .doctor-list > li:not(:last-child) {
  margin-bottom: 8px;
}
.page--doctor {
  /* ============================================================
    認定証・資格証（カード形式の画像ギャラリー）
    経歴セクション（.doctor-career__inner）下部に、2 カラムの下へ全幅で配置
    （.doctor-career__inner の flex gap 80px / SP 40px がそのまま上の余白になる）
    PC 3 列 / TAB 2 列 / SP 1 列。画像は横長 4:3（600×450）
  ============================================================ */
}
.page--doctor .doctor-license {
  width: 100%;
  margin: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 16px 1fr 16px 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--doctor .doctor-license {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-license {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.page--doctor .doctor-license__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.page--doctor .doctor-license__figure {
  margin: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background-color: var(--color-neutral-white);
  padding: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}
.page--doctor .doctor-license__img {
  width: 100%;
  height: auto;
}
.page--doctor .doctor-license__caption {
  color: var(--color-text-primary);
  line-height: 1.6;
  text-align: center;
}
.page--doctor {
  /* ============================================================
    3. 院長メッセージ（理由 / 受賞）
    Figma: タイトル + 導入文 + 複数サブセクション（subhead + body）
    --filled バリアントは白背景、通常はページ背景（薄コーポレート）に透過
  ============================================================ */
}
.page--doctor .doctor-message--filled {
  background-color: var(--color-neutral-white);
}
.page--doctor .doctor-message__inner {
  max-width: var(--contentMaxWidth);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-message__inner {
    gap: 24px;
  }
}
.page--doctor .doctor-message__title {
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-message__title {
    font-size: var(--fz24);
  }
}
.page--doctor .doctor-message__intro {
  color: var(--color-text-primary);
  line-height: 1.8;
}
.page--doctor .doctor-message__subsection {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
.page--doctor .doctor-message__body {
  color: var(--color-text-primary);
  line-height: 1.8;
}
.page--doctor .doctor-message__body > * + * {
  margin-top: 1.6em;
}
.page--doctor .doctor-message__list {
  width: 100%;
  padding-left: 1.5em;
}
.page--doctor .doctor-message__list > li {
  list-style: disc;
}
.page--doctor .doctor-message__list > li:not(:last-child) {
  margin-bottom: 8px;
}
.page--doctor .doctor-message__figure {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}
.page--doctor .doctor-message__figure img {
  width: 100%;
  height: auto;
}
.page--doctor .doctor-message__caption {
  color: var(--color-text-primary);
  text-align: center;
}
.page--doctor {
  /* ============================================================
    4. 研究業績 論文
    Figma: 番号付き <ol>（list-decimal）、強調部分は <strong>
  ============================================================ */
}
.page--doctor .doctor-papers__inner {
  max-width: var(--contentMaxWidth);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-papers__inner {
    gap: 24px;
  }
}
.page--doctor .doctor-papers__title {
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--doctor .doctor-papers__title {
    font-size: var(--fz24);
  }
}
.page--doctor .doctor-papers__list {
  width: 100%;
  padding-left: 1.5em;
  color: var(--color-text-primary);
}
.page--doctor .doctor-papers__list > li {
  list-style: decimal;
}
.page--doctor .doctor-papers__list > li:not(:last-child) {
  margin-bottom: 1em;
}
.page--doctor .doctor-papers__list strong {
  font-weight: 700;
  color: var(--color-brand-primary);
}

/* ///////////////////////////////////////////
  _access.scss
  「アクセス・診療時間」（/clinic/access/index.html）専用スタイル

  構成:
    1. .access-overview   アクセス概要（外観 + 住所 + 周辺地図 + アクセス手段）
    2. .access-parking    提携駐車場のご案内（白背景）
       - .parking-card    駐車場外観カード（PC/TAB 3列 / SP 1列、枠・背景なし）
    3. .access-hours      診療時間（既存 .hours-table を流用）

  - 全スタイルは .page--access スコープ内
  - PC は Figma 準拠（80px padding、660px 画像幅）
  - TAB/SP は Figma デザインなし → 適宜作成
    - TAB: 縦余白 50px
    - SP: 縦余白 7vw、左右 7vw
/////////////////////////////////////////// */
.page--access {
  /* ============================================================
    セクション共通余白
    Figma の各セクション padding 80px を全幅で適用
  ============================================================ */
}
.page--access .access-overview,
.page--access .access-parking,
.page--access .access-hours {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--access .access-overview,
  .page--access .access-parking,
  .page--access .access-hours {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--access .access-overview,
  .page--access .access-parking,
  .page--access .access-hours {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--access .access-overview,
  .page--access .access-parking,
  .page--access .access-hours {
    padding-block: 7vw;
  }
}
.page--access .access-parking {
  background-color: var(--color-neutral-white);
}
.page--access {
  /* ============================================================
    1. アクセス概要
    所在地・アクセス（h2）→ 外観 → クリニック名/住所 + 周辺地図 → アクセス手段（h3 仙台駅から）
  ============================================================ */
}
.page--access .access-overview__inner {
  max-width: var(--contentMaxWidth);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 80px;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--access .access-overview__inner {
    gap: 56px;
  }
}
@media only screen and (max-width: 768px) {
  .page--access .access-overview__inner {
    gap: 40px;
  }
}
.page--access .access-overview__title {
  width: 100%;
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--access .access-overview__title {
    font-size: var(--fz24);
  }
}
.page--access {
  /* h2「所在地・アクセス」→ 外観画像の間隔だけ縮める（PC 40px / SP 24px）
     `.access-overview__inner` の親 gap（PC 80px / TAB 56px / SP 40px）から差分を
     負の margin-top で打ち消す。flex gap と margin は collapse しないので合算になる */
}
.page--access .access-overview__title + .access-overview__exterior {
  margin-top: -40px;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--access .access-overview__title + .access-overview__exterior {
    margin-top: -16px;
  }
}
@media only screen and (max-width: 768px) {
  .page--access .access-overview__title + .access-overview__exterior {
    margin-top: -16px;
  }
}
.page--access .access-overview__exterior {
  width: 100%;
  margin: 0;
}
.page--access .access-overview__exterior img {
  width: 100%;
  height: auto;
}
.page--access .access-overview__location {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 24px;
}
@media only screen and (max-width: 768px) {
  .page--access .access-overview__location {
    gap: 16px;
  }
}
.page--access {
  /* クリニック名（24px primary）と住所（20px text-primary）を縦並びで中央寄せ。
     1 つの <p> 内に 2 つの <span> を配置し、内側で line-height 1.8 を維持。
     上下端の半リーディングは calc((1em - 1lh) / 2) で除去 */
}
.page--access .access-overview__address {
  margin: 0;
  text-align: center;
  line-height: 1.8;
}
.page--access .access-overview__address-name {
  display: block;
  color: var(--color-brand-primary);
  font-size: var(--fz24);
  font-weight: 400;
  -webkit-margin-before: calc((1em - 1lh) / 2);
          margin-block-start: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--access .access-overview__address-name {
    font-size: var(--fz20);
  }
}
.page--access .access-overview__address-text {
  display: block;
  color: var(--color-text-primary);
  font-size: var(--fz20);
  font-weight: 400;
  -webkit-margin-after: calc((1em - 1lh) / 2);
          margin-block-end: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--access .access-overview__address-text {
    font-size: var(--fz16);
  }
}
.page--access .access-overview__map {
  width: 100%;
  aspect-ratio: 660/338;
}
.page--access .access-overview__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.page--access .access-overview__transit {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--access .access-overview__transit {
    gap: 16px;
  }
}
.page--access .access-overview__transit-title {
  color: var(--color-brand-primary);
  font-size: var(--fz24);
  font-weight: 400;
  line-height: 1.6;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--access .access-overview__transit-title {
    font-size: var(--fz20);
  }
}
.page--access .access-overview__transit-list {
  width: 100%;
  padding-left: 1.5em;
  color: var(--color-text-primary);
  line-height: 1.8;
}
.page--access .access-overview__transit-list > li {
  list-style: disc;
}
.page--access .access-overview__transit-list > li:not(:last-child) {
  margin-bottom: 8px;
}
.page--access {
  /* ============================================================
    2. 提携駐車場のご案内（白背景）
  ============================================================ */
}
.page--access .access-parking__inner {
  max-width: var(--contentMaxWidth);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--access .access-parking__inner {
    gap: 24px;
  }
}
.page--access .access-parking__title {
  width: 100%;
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--access .access-parking__title {
    font-size: var(--fz24);
  }
}
.page--access .access-parking__text {
  width: 100%;
  color: var(--color-text-primary);
  line-height: 1.8;
}
.page--access .access-parking__text > p + p {
  margin-top: 1.8em;
}
.page--access .access-parking__map {
  display: block;
  width: 100%;
  margin: 0;
}
.page--access .access-parking__map img {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
}
.page--access {
  /* ============================================================
    提携駐車場の外観カード（画像 + 名称キャプション）
    access-parking は白背景セクションのため、カード地・枠線は付けず
    画像＋キャプションのみを 3 列で並べる（ユーザー選択）。
    PC / TAB 3 列（駐車場は 3 件で 1 行に収まる）/ SP 1 列。
    （.access-parking__inner の flex gap 40px / SP 24px がそのまま上の余白になる）
  ============================================================ */
}
.page--access .parking-card {
  width: 100%;
  margin: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 40px 1fr 40px 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--access .parking-card {
    gap: 16px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.page--access .parking-card__figure {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}
.page--access .parking-card__img {
  width: 100%;
  height: auto;
}
.page--access .parking-card__caption {
  color: var(--color-text-primary);
  line-height: 1.6;
  text-align: center;
}
.page--access {
  /* ============================================================
    3. 診療時間
    既存 .hours-table（02_module/_module.scss）を流用
  ============================================================ */
}
.page--access .access-hours__inner {
  max-width: var(--contentMaxWidth);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--access .access-hours__inner {
    gap: 16px;
  }
}
.page--access .access-hours__title {
  width: 100%;
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--access .access-hours__title {
    font-size: var(--fz24);
  }
}
.page--access .access-hours__body {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}
.page--access .access-hours__note {
  color: var(--color-text-primary);
  line-height: 1.6;
}

/* ///////////////////////////////////////////
  _recruit.scss
  「採用情報」（/recruit/index.html）専用スタイル

  構成:
    1. .recruit-lead   リード文（青帯と募集要項の間、薄コーポレート背景の main から透過）
    2. .recruit-info   募集要項テーブル（白背景、左 th 300px / 右 td 1fr）

  - 全スタイルは .page--recruit スコープ内
  - PC は Figma 準拠（80px padding、th 300px）
  - TAB/SP は Figma デザインなし → 適宜作成
    - TAB: 縦余白 50px、th 200px に縮小
    - SP: 縦余白 7vw、左右 7vw、th/td を縦積み（block 表示）
/////////////////////////////////////////// */
.page--recruit {
  /* ============================================================
    セクション共通余白
    Figma の各セクション padding 80px を全幅で適用
  ============================================================ */
}
.page--recruit .recruit-lead,
.page--recruit .recruit-info {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--recruit .recruit-lead,
  .page--recruit .recruit-info {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--recruit .recruit-lead,
  .page--recruit .recruit-info {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--recruit .recruit-lead,
  .page--recruit .recruit-info {
    padding-block: 7vw;
  }
}
.page--recruit .recruit-info {
  background-color: var(--color-neutral-white);
}
.page--recruit {
  /* ============================================================
    1. リード文
    Figma: 青帯と募集要項の間に縦余白 80px。テキストは段落単独、
    <strong> でブランドカラー強調
  ============================================================ */
}
.page--recruit .recruit-lead__inner {
  max-width: var(--contentMaxWidth);
  margin: 0 auto;
}
.page--recruit .recruit-lead__text {
  color: var(--color-text-primary);
  line-height: 1.8;
}
.page--recruit .recruit-lead__text strong {
  color: var(--color-brand-primary);
  font-weight: 700;
}
.page--recruit {
  /* ============================================================
    2. 募集要項テーブル
    Figma: 左 th 300px（薄コーポレート背景 + brand-primary 文字 + medium）
          右 td 1fr（lightgray 背景 + text-primary 文字 + regular）
          セル padding 16px、行間 1px hairline（白背景透過で表現）
  ============================================================ */
}
.page--recruit .recruit-info__inner {
  max-width: var(--contentMaxWidth);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--recruit .recruit-info__inner {
    gap: 24px;
  }
}
.page--recruit .recruit-info__title {
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--recruit .recruit-info__title {
    font-size: var(--fz24);
  }
}
.page--recruit {
  /* テーブル本体
     border-collapse: separate + border-spacing: 0 で行間を 0、
     行間の hairline は tr 同士の境界に <tr> + <tr> の上 border で表現 */
}
.page--recruit .recruit-info__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  line-height: 1.6;
}
.page--recruit .recruit-info__table th, .page--recruit .recruit-info__table td {
  padding: 1em;
  text-align: left;
  vertical-align: top;
}
.page--recruit .recruit-info__table th[scope=row] {
  width: 300px;
  background-color: var(--color-brand-background);
  color: var(--color-brand-primary);
  font-weight: 500;
  font-size: var(--fz16);
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--recruit .recruit-info__table th[scope=row] {
    width: 200px;
  }
}
@media only screen and (max-width: 768px) {
  .page--recruit .recruit-info__table th[scope=row] {
    display: block;
    width: 100%;
  }
}
.page--recruit .recruit-info__table td {
  background-color: var(--color-neutral-lightgray);
  color: var(--color-text-primary);
}
@media only screen and (max-width: 768px) {
  .page--recruit .recruit-info__table td {
    display: block;
    width: 100%;
  }
}
.page--recruit .recruit-info__table tr + tr th,
.page--recruit .recruit-info__table tr + tr td {
  border-top: 1px solid var(--color-neutral-white);
}
@media only screen and (max-width: 768px) {
  .page--recruit .recruit-info__table tr + tr td {
    border-top: 0;
  }
}
.page--recruit {
  /* メールリンク（スパム対策で JS 動的生成、デフォルトはリンクスタイル） */
}
.page--recruit .recruit-info__mail {
  color: var(--color-brand-primary);
  font-weight: 700;
  text-decoration: underline;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  word-break: break-all;
}

/* ///////////////////////////////////////////
  _contact.scss
  「お問い合わせ」（/contact/index.html）専用スタイル

  構成:
    1. .contact-phone   お電話でのお問い合わせ（薄コーポレート背景透過）
    2. .contact-mail    メールでのお問い合わせ（白背景セクション）
      └ .contact-form   フォーム本体（600px キャップ）

  - 全スタイルは .page--contact スコープ内
  - PC は Figma 準拠（80px padding、フォーム幅 600px）
  - TAB/SP は Figma デザインなし → 適宜作成
    - TAB: 縦余白 50px、左右 30px
    - SP: 縦余白 7vw、左右 7vw（フォーム幅は 100%）
/////////////////////////////////////////// */
.page--contact {
  /* ============================================================
    セクション共通余白
    Figma の各セクション padding 80px を全幅で適用
  ============================================================ */
}
.page--contact .contact-phone,
.page--contact .contact-mail {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--contact .contact-phone,
  .page--contact .contact-mail {
    padding: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--contact .contact-phone,
  .page--contact .contact-mail {
    padding: 50px 30px;
  }
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-phone,
  .page--contact .contact-mail {
    padding: 7vw;
  }
}
.page--contact .contact-mail {
  background-color: var(--color-neutral-white);
}
.page--contact {
  /* ============================================================
    1. お電話でのお問い合わせ
    Figma: ブランド見出し（32px primary）+ 中央寄せの電話番号 48px
  ============================================================ */
}
.page--contact .contact-phone__inner {
  max-width: var(--contentMaxWidth);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-phone__inner {
    gap: 24px;
  }
}
.page--contact .contact-phone__title {
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-phone__title {
    font-size: var(--fz24);
  }
}
.page--contact .contact-phone__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 24px;
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-phone__body {
    gap: 16px;
  }
}
.page--contact .contact-phone__number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 12px;
  color: var(--color-brand-primary);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-size: var(--fz32);
}
@media print, screen and (min-width: 1020px) {
  .page--contact .contact-phone__number {
    font-size: 3rem;
  }
}
.page--contact .contact-phone__number a {
  color: inherit;
  text-decoration: none;
}
.page--contact .contact-phone__number a:hover {
  opacity: 0.7;
}
.page--contact .contact-phone__icon {
  width: 20px;
  height: 20px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-phone__icon {
    width: 16px;
    height: 16px;
  }
}
.page--contact .contact-phone__hours {
  color: var(--color-text-primary);
  text-align: center;
  line-height: 1.6;
  font-size: var(--fz16);
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-phone__hours {
    font-size: var(--fz14);
  }
}
.page--contact {
  /* ============================================================
    2. メールでのお問い合わせ
    Figma: 白背景 + 左揃えの見出し（32px primary）+ 説明文 + 中央寄せフォーム

    親は align-items: stretch（既定）で子要素を横幅いっぱいに伸ばし、
    フォーム本体だけ align-self: center + max-width で中央寄せにする方式。
    見出し/説明文側に「親の align-items を打ち消す width:100%」を書く必要がなくなり、
    意図が読みやすい構造になる。
  ============================================================ */
}
.page--contact .contact-mail__inner {
  max-width: var(--contentMaxWidth);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 80px;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--contact .contact-mail__inner {
    gap: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-mail__inner {
    gap: 32px;
  }
}
.page--contact .contact-mail__title {
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-mail__title {
    font-size: var(--fz24);
  }
}
.page--contact .contact-mail__intro {
  color: var(--color-text-primary);
  line-height: 1.8;
  font-size: var(--fz16);
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-mail__intro {
    font-size: var(--fz14);
  }
}
.page--contact {
  /* ============================================================
    3. フォーム本体
    Figma: 幅 600px、フィールド間 40px、ラベルとインプット間 16px

    親 .contact-mail__inner の align-items: stretch（既定）を活かしつつ、
    フォームだけ align-self: center + max-width: 600px で中央寄せキャップ。
  ============================================================ */
}
.page--contact .contact-form {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--contact .contact-form {
    max-width: 600px;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
  }
}
.page--contact .contact-form__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form__body {
    gap: 24px;
  }
}
.page--contact .contact-form {
  /* 各フィールド（ラベル + インプット） */
}
.page--contact .contact-form__field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form__field {
    gap: 8px;
  }
}
.page--contact .contact-form {
  /* fieldset を .contact-form__field と同等のレイアウトに揃える
     ブラウザ既定の border / padding / margin / inline-size をリセット */
}
.page--contact .contact-form__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}
.page--contact .contact-form {
  /* ラベル（項目名 + 必須バッジ） */
}
.page--contact .contact-form__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 24px;
  margin: 0;
}
.page--contact .contact-form__label .label-text {
  color: var(--color-brand-primary);
  font-size: var(--fz24);
  line-height: 1;
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form__label .label-text {
    font-size: var(--fz16);
  }
}
.page--contact .contact-form__label .required {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: var(--color-brand-primary);
  color: var(--color-neutral-white);
  font-size: var(--fz16);
  line-height: 1;
  padding: 8px 6px;
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form__label .required {
    padding: 4px 6px;
    font-size: var(--fz12);
  }
}
.page--contact .contact-form {
  /* legend を .contact-form__label と同じ見た目に揃える
     <legend> は HTML 仕様上、親 <fieldset> の flex レイアウトに
     通常参加しない特殊要素（既定では fieldset の上端に固定描画される）。
     そのため親 .contact-form__field の gap: 16px が legend と次の子要素の間に効かず、
     明示的に margin-bottom を当てて間隔を確保する必要がある。

     HTML 上は `class="contact-form__label contact-form__legend"` と併用するため、
     `__label` の `margin: 0` を上書きするには本ルールが `__label` より後ろに
     定義されている必要がある（同一詳細度時はソース後勝ち）。 */
}
.page--contact .contact-form__legend {
  padding: 0;
  width: 100%;
  margin-bottom: 16px;
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form__legend {
    margin-bottom: 8px;
  }
}
.page--contact .contact-form {
  /* テキスト入力・テキストエリア共通 */
}
.page--contact .contact-form__input {
  display: block;
  width: 100%;
  background-color: var(--color-border);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--fz16);
  line-height: 1.6;
}
@media print, screen and (min-width: 1020px) {
  .page--contact .contact-form__input {
    height: 50px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--contact .contact-form__input {
    height: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form__input {
    height: 40px;
  }
}
.page--contact .contact-form__input:focus {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}
.page--contact .contact-form__input[type=number] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}
.page--contact .contact-form__input[type=number]::-webkit-outer-spin-button, .page--contact .contact-form__input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.page--contact .contact-form textarea.contact-form__input {
  height: auto;
  min-height: 200px;
  resize: vertical;
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form textarea.contact-form__input {
    min-height: 120px;
  }
}
.page--contact .contact-form {
  /* 年齢フィールド: 小さな入力 + 「歳」ラベル */
}
.page--contact .contact-form__age {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}
.page--contact .contact-form__input--age {
  width: 80px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.page--contact .contact-form__age-unit {
  color: var(--color-text-primary);
  font-size: var(--fz20);
  line-height: 1;
}
.page--contact .contact-form {
  /* ラジオボタン（性別） */
}
.page--contact .contact-form__radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form__radio {
    gap: 24px;
  }
}
.page--contact .contact-form__radio label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  cursor: pointer;
}
.page--contact .contact-form__radio label input[type=radio] {
  width: 32px;
  height: 32px;
  accent-color: var(--color-brand-primary);
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form__radio label input[type=radio] {
    width: 24px;
    height: 24px;
  }
}
.page--contact .contact-form__radio label span {
  color: var(--color-text-primary);
  font-size: var(--fz20);
  line-height: 1;
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form__radio label span {
    font-size: var(--fz16);
  }
}
.page--contact .contact-form__radio {
  /* CF7 出力対応：男性/女性は .wpcf7-radio > .wpcf7-list-item > label と入れ子で出力されるため、
     .contact-form__radio 直下 label を前提とした上の gap が効かない（直下は単一の
     .wpcf7-form-control-wrap になる）。実際に選択肢が並ぶ .wpcf7-radio を flex 化して
     選択肢間に同じ間隔（PC 40px / SP 24px）を作る。静的HTMLには .wpcf7-radio が無いため無害。 */
}
.page--contact .contact-form__radio .wpcf7-radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form__radio .wpcf7-radio {
    gap: 24px;
  }
}
.page--contact .contact-form {
  /* 個人情報の取り扱いボックス */
}
.page--contact .contact-form__privacy {
  width: 100%;
  background-color: var(--color-neutral-white);
  border: 1px solid var(--color-text-primary);
  border-radius: 8px;
  padding: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 24px;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form__privacy {
    padding: 1em;
    gap: 16px;
  }
}
.page--contact .contact-form__privacy-title {
  color: var(--color-brand-primary);
  font-size: var(--fz24);
  line-height: 1.4;
  margin: 0;
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form__privacy-title {
    font-size: var(--fz16);
  }
}
.page--contact .contact-form__privacy-text {
  color: var(--color-text-primary);
  font-size: var(--fz16);
  line-height: 1.6;
  margin: 0;
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form__privacy-text {
    font-size: var(--fz14);
  }
}
.page--contact .contact-form__privacy-text a {
  color: var(--color-brand-primary);
  font-weight: 700;
  text-decoration: underline;
}
.page--contact .contact-form {
  /* 同意チェックボックス */
}
.page--contact .contact-form__consent {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  cursor: pointer;
}
.page--contact .contact-form__consent input[type=checkbox] {
  width: 32px;
  height: 32px;
  accent-color: var(--color-brand-primary);
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form__consent input[type=checkbox] {
    width: 24px;
    height: 24px;
  }
}
.page--contact .contact-form__consent span {
  color: var(--color-text-primary);
  font-size: var(--fz20);
  line-height: 1;
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form__consent span {
    font-size: var(--fz16);
  }
}
.page--contact .contact-form .wpcf7-list-item {
  margin: 0;
}
.page--contact .contact-form .wpcf7-list-item label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  cursor: pointer;
}
.page--contact .contact-form {
  /* Cloudflare Turnstile */
}
.page--contact .contact-form__turnstile {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.page--contact .contact-form {
  /* 送信ボタン
     ボタン本体のスタイルは共通モジュール `.btn` + `.btn--submit` に集約。
     HTML/CF7 出力では submit 要素に `class="btn btn--submit"` を付与する。
     ここではボタンを中央寄せするラッパー余白だけを担う。
     CF7 が出力する `.wpcf7-submit` はクラス指定なしでも .btn を継承するよう
     後方互換のフォールバックを残す（CF7 設定で class:btn class:btn--submit を付け忘れた場合の保険） */
}
.page--contact .contact-form__submit {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.page--contact .contact-form__submit .wpcf7-submit:not(.btn) {
  cursor: pointer;
}
.page--contact .contact-form {
  /* ======================
    エラー表示（共通 + CF7 互換）
  ====================== */
}
.page--contact .contact-form__error,
.page--contact .contact-form .wpcf7-not-valid-tip {
  display: block;
  color: #c00;
  font-size: var(--fz14);
  line-height: 1.6;
  margin-top: 8px;
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form__error,
  .page--contact .contact-form .wpcf7-not-valid-tip {
    font-size: var(--fz12);
  }
}
.page--contact .contact-form .is-error,
.page--contact .contact-form .wpcf7-not-valid {
  outline: 2px solid #c00;
  outline-offset: 2px;
}
.page--contact .contact-form .wpcf7-response-output {
  width: 100%;
  text-align: center;
  border-radius: 8px;
  line-height: 1.6;
  padding: 1em;
  font-size: var(--fz16);
}
@media only screen and (max-width: 768px) {
  .page--contact .contact-form .wpcf7-response-output {
    font-size: var(--fz14);
  }
}
.page--contact .contact-form .wpcf7-mail-sent-ok,
.page--contact .contact-form .wpcf7 form.sent .wpcf7-response-output,
.page--contact .contact-form .is-success-demo {
  border: 2px solid #398f14;
  color: #398f14;
  background-color: #f0f9eb;
}
.page--contact .contact-form .wpcf7-validation-errors,
.page--contact .contact-form .wpcf7 form.invalid .wpcf7-response-output,
.page--contact .contact-form .wpcf7 form.unaccepted .wpcf7-response-output,
.page--contact .contact-form .is-error-demo {
  border: 2px solid #c00;
  color: #c00;
  background-color: #fef2f2;
}
.page--contact .contact-form .wpcf7-mail-sent-ng,
.page--contact .contact-form .wpcf7 form.failed .wpcf7-response-output {
  border: 2px solid #c00;
  color: #c00;
  background-color: #fef2f2;
}
.page--contact .contact-form .wpcf7 form.spam .wpcf7-response-output {
  border: 2px solid #e8a100;
  color: #e8a100;
  background-color: #fffbeb;
}
.page--contact .contact-form .wpcf7-spinner {
  display: block;
  margin: 24px auto 0;
}

/* ///////////////////////////////////////////
  _news.scss
  「お知らせ一覧」（/news/index.html）+ 投稿詳細（/news/post_single/index.html）専用スタイル

  構成（一覧）:
    1. <section class="news"> + .notifications / .notification
       → HTML / CSS ともにトップページと完全共通。共通モジュール
         （_module.scss 定義済み）の `.news` / `.notifications` /
         `.notification` をそのまま流用し、本ファイルでは上書きしない。
         本ページ固有の差分は HTML 側のみ（`.news__title` に `.sr-only` を併用）。
    2. .pagination       WP `the_posts_pagination()` 互換ページャー（本ファイルで定義）

  - 全スタイルは .page--post-archive スコープ内（WP archive.php / category.php 互換）
  - PC は Figma 準拠（80px padding はトップ `.news` モジュールに集約）
  - TAB/SP は Figma デザインなし → 既存ページ（recruit / contact）と統一

  投稿詳細（.page--post-single）スタイルは設計メモへ移動済み:
  → ai_review/notes/_post-single-legacy-styles.md
  一覧ページ完成後、投稿詳細ページ実装時に新方式（@use / var(--*) /
  新ブレークポイント mixins）へ書き換えながら順次取り込む。
/////////////////////////////////////////// */
.page--post-archive {
  /* ============================================================
    1. お知らせ一覧
    HTML / CSS ともにトップページと完全共通化。
    共通モジュール（`src/assets/scss/02_module/_module.scss`）の以下を流用:
      ・`.news` セクションラッパー（padding / gap / 見出し font）
      ・`.notifications` リストコンテナ（縦並び flex / gap 16px）
      ・`.notification` 各カード（白背景 padding 24px / アンカー全面ラップ）

    検証メモ:
      ・本ページでは pagetitle 青帯の h1「お知らせ」が既にあるため、
        `.news__title` には `.sr-only` を併用して視覚的に隠す（HTML 側で対応）。
      ・トップの「これまでのお知らせ」リンク右寄せ用 `align-items: flex-end` は、
        本ページで `.notifications__list { width: 100% }` が効くため見た目に影響なし。
      ・SP の日付フォント・gap も module デフォルト（トップと完全一致）。
    Figma 一覧の指示（カード内 gap 20px / SP 大きめ日付）とは差分が出るが、
    サイト内統一性を優先してトップ準拠とする運用判断（ユーザー承認済み）。
  ============================================================ */
  /* ============================================================
    2. ページネーション（WP `the_posts_pagination()` 互換）

    HTML 構造:
      <nav class="navigation pagination">
        <div class="nav-links">
          <a class="prev page-numbers" href="...">«</a>
          <span class="page-numbers current" aria-current="page">1</span>
          <a class="page-numbers" href="...">2</a>
          <span class="page-numbers dots">…</span>
          <a class="next page-numbers" href="...">»</a>
        </div>
      </nav>
  ============================================================ */
}
.page--post-archive .pagination {
  padding-block: 40px 80px;
  padding-inline: var(--sectionPadInline);
}
@media only screen and (max-width: 768px) {
  .page--post-archive .pagination {
    padding: 0 7vw 7vw 7vw;
  }
}
.page--post-archive .pagination .nav-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
.page--post-archive .pagination .page-numbers {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: var(--fz16);
  line-height: 1;
  text-decoration: none;
  -webkit-transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
@media only screen and (max-width: 768px) {
  .page--post-archive .pagination .page-numbers {
    font-size: var(--fz14);
  }
}
.page--post-archive .pagination .page-numbers {
  /* 現在のページ（クリック不可、ブランドカラー塗り） */
}
.page--post-archive .pagination .page-numbers.current {
  background-color: var(--color-brand-primary);
  color: var(--color-neutral-white);
  pointer-events: none;
}
.page--post-archive .pagination .page-numbers {
  /* 他のページ番号（ホバーで反転） */
}
.page--post-archive .pagination .page-numbers:not(.current):not(.dots):not(.prev):not(.next) {
  background-color: var(--color-brand-background);
  color: var(--color-brand-primary);
}
.page--post-archive .pagination .page-numbers:not(.current):not(.dots):not(.prev):not(.next):hover {
  background-color: var(--color-brand-primary);
  color: var(--color-neutral-white);
  opacity: 1;
}
.page--post-archive .pagination .page-numbers {
  /* 前へ・次へ（背景なし、矢印のみ） */
}
.page--post-archive .pagination .page-numbers.prev, .page--post-archive .pagination .page-numbers.next {
  background: none;
  color: var(--color-brand-primary);
  font-size: var(--fz20);
}
@media only screen and (max-width: 768px) {
  .page--post-archive .pagination .page-numbers.prev, .page--post-archive .pagination .page-numbers.next {
    font-size: var(--fz18);
  }
}
.page--post-archive .pagination .page-numbers.prev:hover, .page--post-archive .pagination .page-numbers.next:hover {
  background: none;
  opacity: 0.6;
}
.page--post-archive .pagination .page-numbers {
  /* 省略記号「…」 */
}
.page--post-archive .pagination .page-numbers.dots {
  background: none;
  color: var(--color-text-primary);
  pointer-events: none;
}

/* ///////////////////////////////////////////
  投稿詳細（.page--post-single）スタイル

  Figma node 7210:7201 準拠。
  構成（main 内）:
    1. .pagetitle              共通モジュール（_module.scss）流用
    2. .news-single            記事ラッパー（max-width / padding 管理）
       ├ .news-single__header  記事タイトル（h2）+ 日付
       ├ .news-single__body    白背景ボックス（padding 40px / gap 80px）
       │  ├ .entry-content     本文（Gutenberg 出力 + 各種ブロックスタイル）
       │  └ .post-navigation   前後記事ナビ（WP `the_post_navigation()` 互換）
       └ .news-single__back    お知らせ一覧へ戻るリンク

  旧コード（旧方式）の参考: ai_review/notes/_post-single-legacy-styles.md
  （新方式 @use / var(--*) / 新ブレークポイント mixins へ書き換えながら取り込み済み）

  - PC は Figma 準拠（80px padding、本文ボックス内 40px）
  - TAB/SP は Figma デザインなし → 既存ページ（recruit / contact / news）と統一
  - 全スタイルは `.page--post-single` スコープ内
/////////////////////////////////////////// */
.page--post-single {
  /* ============================================================
    1. 記事ラッパー
    Figma: post article = padding 80px / gap 40px。
    PC は 1200px キャップ（本文ボックスは内側で 886px = 1200 - 80*2 + 余白）。
  ============================================================ */
}
.page--post-single .news-single {
  width: 100%;
  max-width: var(--contentMaxWidth);
  margin-inline: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}
@media print, screen and (min-width: 1020px) {
  .page--post-single .news-single {
    padding: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--post-single .news-single {
    padding: 50px 30px;
  }
}
@media only screen and (max-width: 768px) {
  .page--post-single .news-single {
    padding: 7vw;
    gap: 24px;
  }
}
.page--post-single {
  /* ============================================================
    2. 記事ヘッダー（タイトル h2 + 日付）
    Figma: タイトル 32px / brand-primary、日付 16px / text-primary / 中央寄せ。
  ============================================================ */
}
.page--post-single .news-single__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--post-single .news-single__header {
    gap: 16px;
  }
}
.page--post-single .news-single__title {
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-brand-primary);
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .page--post-single .news-single__title {
    font-size: var(--fz20);
  }
}
.page--post-single {
  /*
    カテゴリー名（スタッフブログのみ。WP の content-single.php がタイトル直下に出力）
    カテゴリー別一覧へのピル型リンクを中央寄せで横並び（複数カテゴリー対応）。
    見た目は一覧の .blog-category-nav__item と揃えつつ、記事メタ情報として一回り小さく。
  */
}
.page--post-single .news-single__categories {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  list-style: none;
}
.page--post-single .news-single__categories > li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.page--post-single .news-single__category {
  min-height: 44px;
  padding: 8px 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid var(--color-brand-primary);
  border-radius: 9999px;
  background-color: var(--color-neutral-white);
  color: var(--color-brand-primary);
  font-size: var(--fz14);
  line-height: 1.4;
  text-decoration: none;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.page--post-single .news-single__category:hover {
  opacity: 1;
  background-color: var(--color-brand-background);
}
.page--post-single {
  /*
    日付は Figma 通り中央寄せ。<time> 子要素を含む <p> ラッパーで実装。
    投稿詳細ページの「公開日」として、本文と区別する意図で中央寄せ採用。
  */
}
.page--post-single .news-single__date {
  font-size: var(--fz16);
  line-height: 1.4;
  color: var(--color-text-primary);
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .page--post-single .news-single__date {
    font-size: var(--fz14);
  }
}
.page--post-single {
  /* ============================================================
    3. 本文ボックス（白背景）
    Figma: bg white / padding 40px / gap 80px / 中央寄せ。
    本文 + 前後ナビを内包する。
  ============================================================ */
}
.page--post-single .news-single__body {
  background-color: var(--color-neutral-white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 80px;
}
@media print, screen and (min-width: 1020px) {
  .page--post-single .news-single__body {
    padding: 40px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--post-single .news-single__body {
    padding: 32px;
  }
}
@media only screen and (max-width: 768px) {
  .page--post-single .news-single__body {
    padding: 24px 16px;
    gap: 40px;
  }
}
.page--post-single {
  /* ============================================================
    4. 本文 .entry-content（Gutenberg 出力対応）
    WP 移行時の <?php the_content(); ?> 出力にスタイルを当てる前提。
    親 .news-single__body の align-items: center を打ち消すため width 100%。
  ============================================================ */
}
.page--post-single .entry-content {
  width: 100%;
  font-size: var(--fz16);
  line-height: 1.8;
  color: var(--color-text-primary);
}
@media only screen and (max-width: 768px) {
  .page--post-single .entry-content {
    font-size: var(--fz14);
  }
}
.page--post-single .entry-content {
  /* 段落 */
}
.page--post-single .entry-content > p {
  margin-block: 0;
}
.page--post-single .entry-content > p:not(:first-child) {
  margin-top: 1.5em;
}
.page--post-single .entry-content {
  /* 見出し（h2 / h3 / h4）— 記事タイトル h2 と区別するためサイズダウン */
}
.page--post-single .entry-content > h2,
.page--post-single .entry-content > h3,
.page--post-single .entry-content > h4 {
  color: var(--color-brand-primary);
  font-weight: 700;
  line-height: 1.4;
}
.page--post-single .entry-content > h2:not(:first-child),
.page--post-single .entry-content > h3:not(:first-child),
.page--post-single .entry-content > h4:not(:first-child) {
  margin-top: 2em;
}
.page--post-single .entry-content > h2,
.page--post-single .entry-content > h3,
.page--post-single .entry-content > h4 {
  margin-bottom: 1em;
}
.page--post-single .entry-content > h2 {
  font-size: var(--fz24);
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--color-brand-primary);
}
@media only screen and (max-width: 768px) {
  .page--post-single .entry-content > h2 {
    font-size: var(--fz20);
  }
}
.page--post-single .entry-content > h3 {
  font-size: var(--fz20);
  padding-left: 12px;
  border-left: 4px solid var(--color-brand-primary);
}
@media only screen and (max-width: 768px) {
  .page--post-single .entry-content > h3 {
    font-size: var(--fz18);
  }
}
.page--post-single .entry-content > h4 {
  font-size: var(--fz18);
}
@media only screen and (max-width: 768px) {
  .page--post-single .entry-content > h4 {
    font-size: var(--fz16);
  }
}
.page--post-single .entry-content {
  /* リンク */
}
.page--post-single .entry-content a {
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page--post-single .entry-content a:hover {
  opacity: 0.7;
}
.page--post-single .entry-content {
  /* 強調 */
}
.page--post-single .entry-content strong {
  font-weight: 700;
}
.page--post-single .entry-content em {
  font-style: italic;
}
.page--post-single .entry-content {
  /* リスト */
}
.page--post-single .entry-content > ul,
.page--post-single .entry-content > ol {
  margin-block: 1.5em 0;
  padding-left: 1.5em;
}
.page--post-single .entry-content > ul li,
.page--post-single .entry-content > ol li {
  margin-block: 0.4em;
}
.page--post-single .entry-content > ul > li {
  list-style: disc;
}
.page--post-single .entry-content > ol > li {
  list-style: decimal;
}
.page--post-single .entry-content {
  /* 引用 */
}
.page--post-single .entry-content > blockquote {
  margin-block: 1.5em 0;
  padding: 16px 24px;
  background-color: var(--color-neutral-lightgray);
  border-left: 4px solid var(--color-brand-primary);
  color: var(--color-text-primary);
  font-style: italic;
}
.page--post-single .entry-content > blockquote > p {
  margin: 0;
}
.page--post-single .entry-content {
  /* 画像 + キャプション */
}
.page--post-single .entry-content > figure {
  margin-block: 1.5em 0;
}
.page--post-single .entry-content > figure img {
  width: 100%;
  height: auto;
  display: block;
}
.page--post-single .entry-content > figure figcaption {
  margin-top: 8px;
  text-align: center;
  font-size: var(--fz14);
  color: var(--color-text-primary);
  opacity: 0.8;
}
@media only screen and (max-width: 768px) {
  .page--post-single .entry-content > figure figcaption {
    font-size: var(--fz12);
  }
}
.page--post-single .entry-content {
  /*
    テーブル
    SP では幅広テーブルが画面外にはみ出さないよう display: block + overflow-x: auto で横スクロール化。
    Gutenberg のテーブルブロック（<figure class="wp-block-table"><table>...</table></figure>）にも
    同等の対応を後段の .wp-block-table 側で施している。
  */
}
.page--post-single .entry-content > table {
  width: 100%;
  margin-block: 1.5em 0;
  border-collapse: collapse;
}
@media only screen and (max-width: 768px) {
  .page--post-single .entry-content > table {
    display: block;
    overflow-x: auto;
  }
}
.page--post-single .entry-content > table th,
.page--post-single .entry-content > table td {
  padding: 1em;
  border: 1px solid var(--color-border);
  text-align: left;
}
@media only screen and (max-width: 768px) {
  .page--post-single .entry-content > table th,
  .page--post-single .entry-content > table td {
    padding: 8px 12px;
  }
}
.page--post-single .entry-content > table thead th {
  background-color: var(--color-brand-background);
  color: var(--color-brand-primary);
  font-weight: 700;
}
.page--post-single .entry-content {
  /* 区切り線 */
}
.page--post-single .entry-content > hr {
  margin-block: 2em;
  border: 0;
  border-top: 1px solid var(--color-border);
}
.page--post-single .entry-content {
  /* ===== Gutenberg ブロック対応 ===== */
  /*
    テーブルブロック（figure.wp-block-table > table）
    Gutenberg の標準出力は figure でラップされるため、横スクロールは figure 側に持たせる。
    table 自体のスタイル定義はそのまま流用したいので、`> table` のスタイルを再宣言せず .wp-block-table table 経由で適用。
  */
}
.page--post-single .entry-content .wp-block-table {
  margin-block: 1.5em 0;
}
@media only screen and (max-width: 768px) {
  .page--post-single .entry-content .wp-block-table {
    overflow-x: auto;
  }
}
.page--post-single .entry-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}
.page--post-single .entry-content .wp-block-table table th,
.page--post-single .entry-content .wp-block-table table td {
  padding: 1em;
  border: 1px solid var(--color-border);
  text-align: left;
}
@media only screen and (max-width: 768px) {
  .page--post-single .entry-content .wp-block-table table th,
  .page--post-single .entry-content .wp-block-table table td {
    padding: 8px 12px;
  }
}
.page--post-single .entry-content .wp-block-table table thead th {
  background-color: var(--color-brand-background);
  color: var(--color-brand-primary);
  font-weight: 700;
}
.page--post-single .entry-content {
  /* 画像ブロック */
}
.page--post-single .entry-content .wp-block-image {
  margin-block: 1.5em 0;
}
.page--post-single .entry-content .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
}
.page--post-single .entry-content .wp-block-image figcaption {
  margin-top: 8px;
  text-align: center;
  font-size: var(--fz14);
  opacity: 0.8;
}
.page--post-single .entry-content {
  /* ボタンブロック（基底 .btn の縮小版として実装、is-style-outline は枠線のみ） */
}
.page--post-single .entry-content .wp-block-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 16px;
  margin-block: 1.5em 0;
}
.page--post-single .entry-content .wp-block-buttons.is-content-justification-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.page--post-single .entry-content .wp-block-buttons.is-content-justification-right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.page--post-single .entry-content .wp-block-button__link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 50px;
  padding: 1em 2em;
  border-radius: 50px;
  background-color: var(--color-brand-primary);
  color: var(--color-neutral-white);
  font-size: var(--fz16);
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.page--post-single .entry-content .wp-block-button__link:hover {
  opacity: 0.7;
}
.page--post-single .entry-content .wp-block-button__link:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}
.page--post-single .entry-content .wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  border: 2px solid var(--color-brand-primary);
  color: var(--color-brand-primary);
}
.page--post-single .entry-content {
  /* ギャラリーブロック（columns-N に応じて grid 列数を切り替え） */
}
.page--post-single .entry-content .wp-block-gallery {
  display: -ms-grid;
  display: grid;
  gap: 16px;
  margin-block: 1.5em 0;
}
.page--post-single .entry-content .wp-block-gallery.columns-2 {
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
}
.page--post-single .entry-content .wp-block-gallery.columns-3 {
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
}
.page--post-single .entry-content .wp-block-gallery.columns-4 {
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 768px) {
  .page--post-single .entry-content .wp-block-gallery.columns-2, .page--post-single .entry-content .wp-block-gallery.columns-3, .page--post-single .entry-content .wp-block-gallery.columns-4 {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
.page--post-single .entry-content .wp-block-gallery .wp-block-image {
  margin: 0;
}
.page--post-single .entry-content {
  /* カラムブロック */
}
.page--post-single .entry-content .wp-block-columns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  margin-block: 1.5em 0;
}
@media only screen and (max-width: 768px) {
  .page--post-single .entry-content .wp-block-columns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
  }
}
.page--post-single .entry-content .wp-block-columns .wp-block-column {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
}
.page--post-single .entry-content {
  /* 埋め込みブロック（YouTube 等は 16:9 アスペクト比） */
}
.page--post-single .entry-content .wp-block-embed {
  margin-block: 1.5em 0;
}
.page--post-single .entry-content .wp-block-embed .wp-block-embed__wrapper {
  position: relative;
  aspect-ratio: 16/9;
}
.page--post-single .entry-content .wp-block-embed .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.page--post-single .entry-content .wp-block-embed figcaption {
  margin-top: 8px;
  text-align: center;
  font-size: var(--fz14);
  opacity: 0.8;
}
.page--post-single .entry-content {
  /* プルクォート（強調引用） */
}
.page--post-single .entry-content .wp-block-pullquote {
  margin-block: 1.5em 0;
  padding: 24px;
  border-block: 4px solid var(--color-brand-primary);
  text-align: center;
}
.page--post-single .entry-content .wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font-style: normal;
}
.page--post-single .entry-content .wp-block-pullquote blockquote p {
  margin: 0;
  font-size: var(--fz20);
  color: var(--color-brand-primary);
}
@media only screen and (max-width: 768px) {
  .page--post-single .entry-content .wp-block-pullquote blockquote p {
    font-size: var(--fz18);
  }
}
.page--post-single .entry-content .wp-block-pullquote blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: var(--fz14);
  font-style: normal;
  color: var(--color-text-primary);
}
.page--post-single .entry-content {
  /* カバーブロック（背景画像 + オーバーレイテキスト） */
}
.page--post-single .entry-content .wp-block-cover {
  position: relative;
  min-height: 240px;
  margin-block: 1.5em 0;
  padding: 32px;
  background-size: cover;
  background-position: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--color-neutral-white);
}
.page--post-single .entry-content .wp-block-cover .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
}
.page--post-single .entry-content {
  /* 区切り線（wp-block-separator） */
}
.page--post-single .entry-content .wp-block-separator {
  margin-block: 2em;
  border: 0;
  border-top: 1px solid var(--color-border);
}
.page--post-single .entry-content {
  /* スペーサー（wp-block-spacer） */
}
.page--post-single .entry-content .wp-block-spacer {
  display: block;
}
.page--post-single .entry-content {
  /* テキスト配置（has-text-align-*） */
}
.page--post-single .entry-content .has-text-align-left {
  text-align: left;
}
.page--post-single .entry-content .has-text-align-center {
  text-align: center;
}
.page--post-single .entry-content .has-text-align-right {
  text-align: right;
}
.page--post-single .entry-content {
  /* フォントサイズ（has-*-font-size） */
}
.page--post-single .entry-content .has-small-font-size {
  font-size: var(--fz14);
}
@media only screen and (max-width: 768px) {
  .page--post-single .entry-content .has-small-font-size {
    font-size: var(--fz12);
  }
}
.page--post-single .entry-content .has-regular-font-size {
  font-size: var(--fz16);
}
@media only screen and (max-width: 768px) {
  .page--post-single .entry-content .has-regular-font-size {
    font-size: var(--fz14);
  }
}
.page--post-single .entry-content .has-medium-font-size {
  font-size: var(--fz20);
}
@media only screen and (max-width: 768px) {
  .page--post-single .entry-content .has-medium-font-size {
    font-size: var(--fz16);
  }
}
.page--post-single .entry-content .has-large-font-size {
  font-size: var(--fz24);
}
@media only screen and (max-width: 768px) {
  .page--post-single .entry-content .has-large-font-size {
    font-size: var(--fz20);
  }
}
.page--post-single .entry-content .has-x-large-font-size {
  font-size: var(--fz32);
}
@media only screen and (max-width: 768px) {
  .page--post-single .entry-content .has-x-large-font-size {
    font-size: var(--fz24);
  }
}
.page--post-single {
  /* ============================================================
    5. 前後記事ナビゲーション（WP `the_post_navigation()` 互換）
    Figma: border-top + padding-top 40px、2 列均等、各列に label 14px + title 16px underline。
    DOM 構造: <nav.navigation.post-navigation> > <h2.screen-reader-text> + <div.nav-links>
              > <div.nav-previous> + <div.nav-next>
  ============================================================ */
}
.page--post-single .post-navigation {
  width: 100%;
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}
@media only screen and (max-width: 768px) {
  .page--post-single .post-navigation {
    padding-top: 24px;
  }
}
.page--post-single .post-navigation .nav-links {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 80px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--post-single .post-navigation .nav-links {
    gap: 40px;
  }
}
@media only screen and (max-width: 768px) {
  .page--post-single .post-navigation .nav-links {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.page--post-single .post-navigation .nav-previous a,
.page--post-single .post-navigation .nav-next a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}
@media only screen and (max-width: 768px) {
  .page--post-single .post-navigation .nav-previous a,
  .page--post-single .post-navigation .nav-next a {
    gap: 8px;
  }
}
.page--post-single .post-navigation .nav-previous a:hover .nav-title,
.page--post-single .post-navigation .nav-next a:hover .nav-title {
  opacity: 0.7;
}
.page--post-single .post-navigation .nav-previous a:focus-visible,
.page--post-single .post-navigation .nav-next a:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 4px;
  border-radius: 2px;
}
.page--post-single .post-navigation .nav-label {
  font-size: var(--fz14);
  line-height: 1.6;
  color: var(--color-text-primary);
}
@media only screen and (max-width: 768px) {
  .page--post-single .post-navigation .nav-label {
    font-size: var(--fz12);
  }
}
.page--post-single .post-navigation .nav-title {
  font-size: var(--fz16);
  line-height: 1.6;
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media only screen and (max-width: 768px) {
  .page--post-single .post-navigation .nav-title {
    font-size: var(--fz14);
  }
}
.page--post-single .post-navigation {
  /* 次の記事だけ右寄せにする Figma 仕様 */
}
.page--post-single .post-navigation .nav-next a {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  text-align: right;
}
@media only screen and (max-width: 768px) {
  .page--post-single .post-navigation .nav-next a {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    text-align: left;
  }
}
.page--post-single {
  /* ============================================================
    6. お知らせ一覧へ戻るリンク
    Figma にはないが UX 上の主要導線として残置（ユーザー承認済み）。
    既存共通モジュール `.btn--text` を流用、中央寄せ。
  ============================================================ */
}
.page--post-single .news-single__back {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* ///////////////////////////////////////////
  _privacy-policy.scss
  「プライバシーポリシー」（/privacy-policy/index.html）専用スタイル

  構成（main 内）:
    1. .pagetitle          下層ページ共通の青帯（共通モジュール `_module.scss` 流用）
    2. .policy             本文ラッパー（max-width / padding / gap 集約）
       ├ .policy__lead     冒頭リード文
       ├ .policy__date     制定日・改定日（右寄せ）
       └ .policy-section   各項目（h3 `.subhead` + 本文 `.policy-section__body`）× 15
          └ .policy-section__list  番号付き / 箇条書きリスト両対応（ol / ul）

  - 「はじめての方へ > 施設基準に関する掲示」と同じ「左 4px 青ボーダー見出し + 本文ブロック」構造を流用
  - 左 4px 青ボーダー見出し本体は共通モジュール `.subhead`（`02_module/_module.scss`）を流用
  - 全スタイルは `.page--privacy-policy` スコープ内
  - PC は Figma 準拠（80px padding、gap 40px）
  - TAB/SP は Figma デザインなし → 既存下層ページ（clinic / news 等）の方針に合わせて自作
/////////////////////////////////////////// */
.page--privacy-policy {
  /* ============================================================
    1. 本文ラッパー
    Figma: Main Container padding 80px / gap 40px。
    PC は contentMaxWidth で中央寄せ、TAB/SP は edge spacing。
  ============================================================ */
}
.page--privacy-policy .policy {
  width: 100%;
  max-width: var(--contentMaxWidth);
  margin-inline: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 40px;
}
@media print, screen and (min-width: 1020px) {
  .page--privacy-policy .policy {
    padding: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--privacy-policy .policy {
    padding: 50px 30px;
  }
}
@media only screen and (max-width: 768px) {
  .page--privacy-policy .policy {
    padding: 7vw;
    gap: 24px;
  }
}
.page--privacy-policy {
  /* ============================================================
    2. リード文
  ============================================================ */
}
.page--privacy-policy .policy__lead {
  color: var(--color-text-primary);
  font-size: var(--fz16);
  line-height: 1.8;
}
@media only screen and (max-width: 768px) {
  .page--privacy-policy .policy__lead {
    font-size: var(--fz14);
  }
}
.page--privacy-policy {
  /* ============================================================
    3. 制定日・改定日（右寄せ）
    Figma: text-right、line-height 1.8、文字色 text-primary。
  ============================================================ */
}
.page--privacy-policy .policy__date {
  color: var(--color-text-primary);
  font-size: var(--fz16);
  line-height: 1.8;
  text-align: right;
}
@media only screen and (max-width: 768px) {
  .page--privacy-policy .policy__date {
    font-size: var(--fz14);
  }
}
.page--privacy-policy {
  /* ============================================================
    4. 各項目セクション（見出し + 本文）
    Figma: subHeading（共通モジュール .subhead）+ Text Container（pt 24 / px 16）。
  ============================================================ */
}
.page--privacy-policy .policy-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.page--privacy-policy .policy-section__body {
  padding: 24px 16px 0;
  color: var(--color-text-primary);
  font-size: var(--fz16);
  line-height: 1.8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
@media only screen and (max-width: 768px) {
  .page--privacy-policy .policy-section__body {
    padding: 16px 0 0;
    font-size: var(--fz14);
    gap: 16px;
  }
}
.page--privacy-policy .policy-section__body a {
  color: var(--color-brand-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.page--privacy-policy .policy-section__body a:hover {
  opacity: 0.7;
}
.page--privacy-policy .policy-section__body strong {
  font-weight: 700;
}
.page--privacy-policy {
  /*
    番号付き / 箇条書きリスト両対応
    `_common.scss` の reset で `li { list-style: none }` が当たっているため、
    li 自身に list-style を再指定して上書き（`_clinic.scss` の `.clinic-standards__list` と同方針）。
    Figma 仕様: ms 24px（左マージン 24px）。
  */
}
.page--privacy-policy .policy-section__list {
  padding-left: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
}
.page--privacy-policy .policy-section__list > li {
  list-style: decimal;
}
.page--privacy-policy ul.policy-section__list > li {
  list-style: disc;
}
.page--privacy-policy {
  /*
    お問い合わせ先ブロック
    クリニック名（strong）→ TEL → メール → 住所 の縦並び。
    HTML 側は <address> 要素でラップしているため、デフォルトの italic を
    font-style: normal で打ち消す（フッター .footer__address と同方針）。
    リンク（tel: / mailto:）は本文リンクと同じ装飾。
  */
}
.page--privacy-policy .policy-section__contact {
  font-style: normal;
  line-height: 1.8;
}
.page--privacy-policy .policy-section__contact strong {
  font-weight: 700;
}

/* ///////////////////////////////////////////
  _case.scss
  不正咬合・症例集ページ共通スタイル

  1. .page--case
     /case/index.html のタイプ別カテゴリー一覧

  2. .page--case-category
     /case/[type]/index.html の症例カテゴリー詳細
     さらに下層の症例詳細ページと区別するため、detail ではなく category として命名

  3. .page--case-detail
     /case/[type]/[number]/index.html の個別症例詳細
     ページタイトル / 関連症例一覧 / カテゴリ間ナビは .page--case-category と共通スタイルを使用
/////////////////////////////////////////// */
/* ============================================================
  1. 症例カテゴリー一覧（/case/index.html）
============================================================ */
.page--case {
  /* ページタイトルは共通モジュール（.pagetitle / .pagetitle__heading）を流用。
     見出しの margin: 0 等は 02_module/_module.scss に集約済み（個別指定不要）。 */
  /* カテゴリーカード一覧
     各タイプを白背景カードとして縦に並べる
  ---------------------------------------- */
}
.page--case .case-category-list {
  width: 100%;
  margin: 0;
  padding-inline: var(--sectionPadInline);
  padding-block: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
  list-style: none;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--case .case-category-list {
    padding-block: 50px;
    gap: 32px;
  }
}
@media only screen and (max-width: 768px) {
  .page--case .case-category-list {
    padding: 7vw;
    gap: 24px;
  }
}
.page--case .case-category-list__item {
  margin: 0;
  padding: 0;
  list-style: none;
}
.page--case {
  /* カテゴリーカード本体
     一覧ページではこの block が1カテゴリを表す
  ---------------------------------------- */
}
.page--case .case-category {
  width: 100%;
}
.page--case .case-category__inner {
  width: 100%;
  max-width: 966px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
  padding: 40px;
  background-color: var(--color-neutral-white);
}
@media only screen and (max-width: 768px) {
  .page--case .case-category__inner {
    gap: 24px;
    padding: 4vw;
  }
}
.page--case .case-category__title {
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--case .case-category__title {
    font-size: var(--fz20);
  }
}
.page--case .case-category__body {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: 80px;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--case .case-category__body {
    gap: 40px;
  }
}
@media only screen and (max-width: 768px) {
  .page--case .case-category__body {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.page--case .case-category__image {
  width: 100%;
}
.page--case .case-category__image img {
  display: block;
  width: 100%;
  height: auto;
}
.page--case .case-category__content {
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--case .case-category__content {
    gap: 24px;
  }
}
.page--case .case-category__text {
  width: 100%;
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--fz16);
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--case .case-category__text {
    font-size: var(--fz14);
  }
}
.page--case .case-category__text > p {
  margin: 0;
}
.page--case .case-category__text > p + p {
  margin-top: 1em;
}
.page--case .case-category__link {
  width: 100%;
  padding-inline: 32px;
  white-space: normal;
}
@media only screen and (max-width: 768px) {
  .page--case .case-category__link {
    padding-inline: 24px;
  }
}

/* ============================================================
  2. 症例カテゴリー詳細（/case/[type]/index.html）
  3. 症例詳細（/case/[type]/[number]/index.html）も
     ページタイトル / 関連症例一覧 / カテゴリ間ナビは同じスタイルを利用するため、
     共通部分は両方のページクラスを並列で受ける
============================================================ */
.page--case-category,
.page--case-detail {
  /* ページタイトル（共通 .pagetitle を流用）
     構造・スタイル（eyebrow = .pagetitle__category、見出し、半リーディング除去）は
     02_module/_module.scss に集約済み。
     症例ページのリード文（eyebrow）は長文のため、SP のみフォントサイズを縮小する
     差分だけここで上書きする（PC/TAB は共通の fz24 のまま）。
  ---------------------------------------- */
}
@media only screen and (max-width: 768px) {
  .page--case-category .pagetitle__category,
  .page--case-detail .pagetitle__category {
    font-size: var(--fz16);
  }
}
.page--case-category,
.page--case-detail {
  /* セクション共通
     body 背景が `--bgColor`（= 薄コーポレート `--color-brand-background`）に
     設定済みのため、セクション側ではデフォルト背景を指定せず透過で受ける。
     白背景にしたい場合のみ --white modifier を付与する
     （プロジェクト慣習: _clinic.scss / _doctor.scss / _news.scss も同様の構造）

     section 自体が「左右パディング + 中央寄せ + 縦並び gap」を担い、
     直接の子要素を max-width: 966px で中央配置する（inner ラッパー不要）
  ---------------------------------------- */
}
.page--case-category .case-category-section,
.page--case-detail .case-category-section {
  width: 100%;
  padding-block: 80px;
  padding-inline: var(--sectionPadInline);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--case-category .case-category-section,
  .page--case-detail .case-category-section {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--case-category .case-category-section,
  .page--case-detail .case-category-section {
    padding: 7vw;
    gap: 24px;
  }
}
.page--case-category .case-category-section > *,
.page--case-detail .case-category-section > * {
  width: 100%;
  max-width: 966px;
}
.page--case-category .case-category-section--white,
.page--case-detail .case-category-section--white {
  background-color: var(--color-neutral-white);
}
.page--case-category .case-category-section__title,
.page--case-category .case-category-intro-title,
.page--case-detail .case-category-section__title,
.page--case-detail .case-category-intro-title {
  margin: 0;
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--case-category .case-category-section__title,
  .page--case-category .case-category-intro-title,
  .page--case-detail .case-category-section__title,
  .page--case-detail .case-category-intro-title {
    font-size: var(--fz20);
  }
}
.page--case-category,
.page--case-detail {
  /* イントロ見出しブロック
     リード文（呼びかけ）と見出しを縦並びで表示。
     見出し本体は .case-category-intro-title、その上に並ぶ呼びかけ文は .case-category-intro-lead。
  ---------------------------------------- */
}
.page--case-category .case-category-intro-block,
.page--case-detail .case-category-intro-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
.page--case-category .case-category-intro-lead,
.page--case-detail .case-category-intro-lead {
  margin: 0;
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--case-category .case-category-intro-lead,
  .page--case-detail .case-category-intro-lead {
    font-size: var(--fz20);
  }
}
.page--case-category,
.page--case-detail {
  /* 数式・関係式表現
     段落内の強調ではなく「式」を表すために専用クラスを用意
  ---------------------------------------- */
}
.page--case-category .case-category-formula,
.page--case-detail .case-category-formula {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--fz16);
  font-weight: 700;
  line-height: 1.8;
}
@media only screen and (max-width: 768px) {
  .page--case-category .case-category-formula,
  .page--case-detail .case-category-formula {
    font-size: var(--fz14);
  }
}
.page--case-category,
.page--case-detail {
  /* 導入ブロック
     画像と説明文をPC/TABは2カラム、SPは縦積みで表示
  ---------------------------------------- */
}
.page--case-category .case-category-media,
.page--case-detail .case-category-media {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: 80px;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--case-category .case-category-media,
  .page--case-detail .case-category-media {
    gap: 40px;
  }
}
@media only screen and (max-width: 768px) {
  .page--case-category .case-category-media,
  .page--case-detail .case-category-media {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.page--case-category .case-category-media__image,
.page--case-detail .case-category-media__image {
  aspect-ratio: 443/266;
  overflow: hidden;
}
.page--case-category .case-category-media__image img,
.page--case-detail .case-category-media__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.page--case-category,
.page--case-detail {
  /* 本文テキスト共通
     段落間は本文コンポーネント側で管理し、HTMLに空段落を作らない。
     1 クラスで「導入文・解説本文・院長メッセージ・ステップ本文」を兼ねる。
     文脈ごとの差分（padding やリスト前のマージンリセット）は親セレクタで上書きする
  ---------------------------------------- */
}
.page--case-category .case-category-text,
.page--case-detail .case-category-text {
  color: var(--color-text-primary);
  font-size: var(--fz16);
  line-height: 1.8;
}
@media only screen and (max-width: 768px) {
  .page--case-category .case-category-text,
  .page--case-detail .case-category-text {
    font-size: var(--fz14);
  }
}
.page--case-category .case-category-text > *,
.page--case-detail .case-category-text > * {
  margin: 0;
}
.page--case-category .case-category-text > * + *,
.page--case-detail .case-category-text > * + * {
  margin-top: 1.6em;
}
.page--case-category .case-category-text strong,
.page--case-detail .case-category-text strong {
  font-weight: 700;
}
.page--case-category,
.page--case-detail {
  /* 解説ブロック
     共通 .subhead の下に本文を置く基本形
  ---------------------------------------- */
}
.page--case-category .case-category-block,
.page--case-detail .case-category-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.page--case-category .case-category-block > .case-category-text,
.page--case-detail .case-category-block > .case-category-text {
  padding: 32px 16px 0;
}
@media only screen and (max-width: 768px) {
  .page--case-category .case-category-block > .case-category-text,
  .page--case-detail .case-category-block > .case-category-text {
    padding: 24px 0 0;
  }
}
.page--case-category,
.page--case-detail {
  /* 治療ステップブロック
     Figmaでは本文導入から32px後に点線が入り、各ステップは上下32pxで区切る

     余白ルールの方針:
     - step-list は基本 32px の上余白（前に導入の p が来るケースを想定）
     - 見出し直下に直接 step-list が来る場合は親 padding-top（32px）と
       step-list の margin-top（32px）が二重に加算されて広すぎるので、:first-child のときだけ 0 に戻す
     - step-list 直後に補足本文（p 等）が続く場合、汎用の `> * + * { margin-top: 0 }`
       で余白が消えるため、:not(:first-child) で step-list 以外の直接子要素にも 32px を当てる
  ---------------------------------------- */
}
.page--case-category .case-category-block--steps > .case-category-text > * + *,
.page--case-detail .case-category-block--steps > .case-category-text > * + * {
  margin-top: 0;
}
.page--case-category .case-category-block--steps > .case-category-text > * + *:not(.case-category-step-list),
.page--case-detail .case-category-block--steps > .case-category-text > * + *:not(.case-category-step-list) {
  /* step-list 以外の本文要素は、step-list と隣接する場合も含めて 32px の上余白で揃える */
  margin-top: 32px;
}
@media only screen and (max-width: 768px) {
  .page--case-category .case-category-block--steps > .case-category-text > * + *:not(.case-category-step-list),
  .page--case-detail .case-category-block--steps > .case-category-text > * + *:not(.case-category-step-list) {
    margin-top: 24px;
  }
}
.page--case-category .case-category-block--steps > .case-category-text > .case-category-step-list,
.page--case-detail .case-category-block--steps > .case-category-text > .case-category-step-list {
  margin-top: 32px;
}
@media only screen and (max-width: 768px) {
  .page--case-category .case-category-block--steps > .case-category-text > .case-category-step-list,
  .page--case-detail .case-category-block--steps > .case-category-text > .case-category-step-list {
    margin-top: 24px;
  }
}
.page--case-category .case-category-block--steps > .case-category-text > .case-category-step-list:first-child,
.page--case-detail .case-category-block--steps > .case-category-text > .case-category-step-list:first-child {
  margin-top: 0;
}
.page--case-category .case-category-step-list,
.page--case-detail .case-category-step-list {
  margin: 32px 0 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
  border-top: 1px dashed var(--color-brand-primary);
}
@media only screen and (max-width: 768px) {
  .page--case-category .case-category-step-list,
  .page--case-detail .case-category-step-list {
    margin-top: 24px;
  }
}
.page--case-category .case-category-step,
.page--case-detail .case-category-step {
  list-style: none;
  padding-block: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
  border-bottom: 1px dashed var(--color-brand-primary);
}
@media only screen and (max-width: 768px) {
  .page--case-category .case-category-step,
  .page--case-detail .case-category-step {
    padding-block: 24px;
    gap: 16px;
  }
}
.page--case-category,
.page--case-detail {
  /* 見出し下の余白は親 .case-category-step の gap が担う。
     ここで margin-bottom を指定すると後段の @include trim-leading
     （margin-block を再設定する）に上書きされて余白が消えるため、
     margin は 0 に固定し、間隔は flex gap 側で制御する。 */
}
.page--case-category .case-category-step__title,
.page--case-detail .case-category-step__title {
  margin: 0;
  color: var(--color-brand-primary);
  font-size: var(--fz20);
  font-weight: 700;
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--case-category .case-category-step__title,
  .page--case-detail .case-category-step__title {
    font-size: var(--fz16);
  }
}
.page--case-category,
.page--case-detail {
  /* ステップ本文内の小見出し（h5）。
     親 .case-category-text の `> * + * { margin-top: 1.6em }` で見出し前の余白を確保し、
     見出し自体のサイズ・行送りは本文と揃える（区切りは font-weight: 700 で表現）。
     直後の段落とは「見出し ↔ 説明」関係なので余白 0 で密着させる */
}
.page--case-category .case-category-step__label,
.page--case-detail .case-category-step__label {
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
}
.page--case-category .case-category-step__label + *,
.page--case-detail .case-category-step__label + * {
  margin-top: 0;
}
.page--case-category,
.page--case-detail {
  /* 症例集セクション
     1600px 以上の大画面では、見出し（h2）と list の左端を揃えるため
     セクション内の全子要素を max-width: 1600px に統一する */
}
@media (min-width: 1600px) {
  .page--case-category .case-category-studies > *,
  .page--case-detail .case-category-studies > * {
    max-width: 1600px;
  }
}
.page--case-category,
.page--case-detail {
  /* 症例カード一覧
     画像パスは /case/[type]/[number]/before.jpg 形式で管理する
     （症例詳細ページ実装に伴い 2026-05-25 に .png → .jpg 方針へ統一。
     既存 .png 参照ファイルは順次 .jpg へ差し替え予定）。
     1600px 以上の大画面では 4 カラムまで広げて症例を見渡しやすくする
     （幅自体は親 .case-category-studies > * の max-width: 1600px が制御）
  ---------------------------------------- */
}
.page--case-category .case-study-list,
.page--case-detail .case-study-list {
  width: 100%;
  margin: 0;
  padding: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
}
@media only screen and (max-width: 768px) {
  .page--case-category .case-study-list,
  .page--case-detail .case-study-list {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1600px) {
  .page--case-category .case-study-list,
  .page--case-detail .case-study-list {
    -ms-grid-columns: (minmax(0, 1fr))[4];
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.page--case-category .case-study-list__item,
.page--case-detail .case-study-list__item {
  margin: 0;
  padding: 0;
  list-style: none;
}
.page--case-category .case-study-card,
.page--case-detail .case-study-card {
  height: 100%;
  padding: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
  background-color: var(--color-neutral-white);
}
@media only screen and (max-width: 768px) {
  .page--case-category .case-study-card,
  .page--case-detail .case-study-card {
    padding: 4vw;
    gap: 16px;
  }
}
.page--case-category .case-study-card__image,
.page--case-detail .case-study-card__image {
  aspect-ratio: 1000/442;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: var(--color-neutral-white);
}
.page--case-category .case-study-card__image img,
.page--case-detail .case-study-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.page--case-category .case-study-card__link,
.page--case-detail .case-study-card__link {
  margin-top: auto;
}

/* ============================================================
  関連ページナビゲーション（共有コンポーネント / グローバル）
  ※ 元は .page--case-category / .page--case-detail スコープ内にあったが、
     矯正治療カテゴリ（/orthodontics/faq/ 等）でも同一構造で流用するため、
     page スコープ外（グローバル）に配置。症例ページはクラス名据え置きで動作継続。
  ※ 以下のブロックはインデントが 2 スペース残っているが、ネストではなくトップレベル。
     前後ページとカテゴリ一覧を同じ薄コーポレート背景上にまとめる。
     背景は body の `--bgColor` を透過で受けるため指定しない。
     nav 自体が「左右パディング + 中央寄せ + 縦並び gap」を担う（inner ラッパー不要）。
     1600px 以上の大画面では pager / list の左端を揃えるため max-width を一括拡張
  ============================================================ */
.case-category-nav {
  width: 100%;
  padding-block: 50px;
  padding-inline: var(--sectionPadInline);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 32px;
}
@media only screen and (max-width: 768px) {
  .case-category-nav {
    padding: 7vw;
    gap: 24px;
  }
}
.case-category-nav > * {
  width: 100%;
  max-width: 966px;
}
@media (min-width: 1600px) {
  .case-category-nav > * {
    max-width: 1600px;
  }
}

/* pager は「次のページボタン」用途のためコンパクトに収める。
   親 .case-category-nav > * の 1600px 拡張から除外し、常に 966px で頭打ちにする
   （list の左端とは揃わないが、ボタン要素として横に伸びすぎない方が UX 上適切） */
.case-category-nav__pager {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media only screen and (max-width: 768px) {
  .case-category-nav__pager {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
@media (min-width: 1600px) {
  .case-category-nav__pager {
    max-width: 966px;
  }
}

/* pager が「次のページ」のみの場合
   2カラム構造を維持しつつ、右カラム（2列目）にリンクを配置する
---------------------------------------- */
.case-category-nav__pager--next-only .case-category-nav__pager-link--next {
  -ms-grid-column: 2;
      grid-column-start: 2;
}
@media only screen and (max-width: 768px) {
  .case-category-nav__pager--next-only .case-category-nav__pager-link--next {
    -ms-grid-column: auto;
        grid-column-start: auto;
  }
}

.case-category-nav__pager-link {
  min-width: 0;
  padding: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  background-color: var(--color-neutral-white);
  color: var(--color-text-primary);
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
  /* ロールオーバー: 背景色は変えず（白のまま）、文字を brand-primary に。
     内側のアイコンは進行方向（next: 右、prev: 左）に 4px スライドする。
     pager-link は body の薄コーポレート背景上の白カードなので、
     hover で背景色を薄コーポレートに変えると周囲と同化して埋もれてしまう */
}
.case-category-nav__pager-link:hover {
  color: var(--color-brand-primary);
  opacity: 1;
}
.case-category-nav__pager-link:hover .case-category-nav__pager-icon {
  -webkit-transform: translateX(4px);
      -ms-transform: translateX(4px);
          transform: translateX(4px);
}

.case-category-nav__pager-link--next {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.case-category-nav__pager-icon {
  width: 24px;
  height: 24px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 24px;
          flex: 0 0 24px;
  position: relative;
  border-radius: 50%;
  background-color: var(--color-brand-primary);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.case-category-nav__pager-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--color-neutral-white);
  -webkit-transform: translate(-35%, -50%);
      -ms-transform: translate(-35%, -50%);
          transform: translate(-35%, -50%);
}

/* prev は scaleX(-1) で水平反転。hover 時の translateX も反転座標系で計算されるため、
   translateX(4px) は視覚的に左方向への移動になる */
.case-category-nav__pager-link--prev .case-category-nav__pager-icon {
  -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
          transform: scaleX(-1);
}

.case-category-nav__pager-link--prev:hover .case-category-nav__pager-icon {
  -webkit-transform: scaleX(-1) translateX(4px);
      -ms-transform: scaleX(-1) translateX(4px);
          transform: scaleX(-1) translateX(4px);
}

.case-category-nav__pager-text {
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  line-height: 1.4;
}

.case-category-nav__pager-label {
  color: var(--color-text-primary);
  font-size: var(--fz14);
}

.case-category-nav__pager-title {
  color: var(--color-brand-primary);
  font-size: var(--fz16);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media only screen and (max-width: 768px) {
  .case-category-nav__pager-title {
    font-size: var(--fz14);
  }
}

/* カテゴリ間ナビゲーションリスト
   1600px 以上の大画面では 5 カラムまで広げる（全 9 項目を 2 行に収める想定）。
   幅自体は親 .case-category-nav > * の max-width: 1600px が制御
---------------------------------------- */
.case-category-nav__list {
  margin: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 8px minmax(0, 1fr) 8px minmax(0, 1fr);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .case-category-nav__list {
    -ms-grid-columns: (minmax(0, 1fr))[2];
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 768px) {
  .case-category-nav__list {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1600px) {
  .case-category-nav__list {
    -ms-grid-columns: (minmax(0, 1fr))[5];
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.case-category-nav__list > li {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-category-nav__item {
  min-height: 48px;
  height: 100%;
  padding: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  border-left: 4px solid var(--color-border);
  background-color: var(--color-neutral-white);
  color: var(--color-text-primary);
  font-size: var(--fz16);
  line-height: 1.4;
  text-decoration: none;
  -webkit-transition: color 0.2s ease, border-color 0.2s ease;
  transition: color 0.2s ease, border-color 0.2s ease;
}
@media only screen and (max-width: 768px) {
  .case-category-nav__item {
    font-size: var(--fz14);
  }
}
.case-category-nav__item::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: auto;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--color-brand-primary);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.case-category-nav__item:hover {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
  opacity: 1;
}
.case-category-nav__item {
  /* カレントページ表示（script.js の initCurrentPageMarker が動的付与）。
     case-category-nav 全体が body の薄コーポレート背景に乗っているため、
     カレント時は背景色を変えず（白のまま）、ボーダー色・文字色・太字で表現する */
}
.case-category-nav__item[aria-current=page] {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
  font-weight: 700;
}
.case-category-nav__item {
  /* 親階層リンク（aria-current="location"）— script.js の initCurrentAncestorMarker が動的付与。
     page と区別するため border 色のみブランドカラーにし、color / font-weight は変えない。
     例: /case/crowding/01/ 閲覧時、「不正咬合の特徴とタイプ別治療法」「デコボコ歯」リンクに付与 */
}
.case-category-nav__item[aria-current=location] {
  border-color: var(--color-brand-primary);
}

/* ============================================================
  3. 症例詳細（/case/[type]/[number]/index.html）専用スタイル
     - 治療前 / 治療後の口腔内写真ブロック
     - 症例データテーブル（主訴・治療期間・治療費 等）
     - 院長コメント / リスクと副作用
     関連症例一覧 (.case-category-studies / .case-study-*) と
     カテゴリ間ナビ (.case-category-nav) は section 2 と共通スタイルを使う
============================================================ */
.page--case-detail {
  /* 概要セクション
     治療前 / 治療後 / テーブル を一塊として 80px の paddings で囲む。
     Figma では「画像」セクション（p-80px）に続いて「テーブル」セクション
     （pt-0 / pb-80px）が連続しており、間に白背景の切れ目を作らない構造。
     1 セクションに統合し、子要素間を gap で制御するほうが SCSS がシンプル
  ---------------------------------------- */
}
.page--case-detail .case-detail-overview {
  width: 100%;
  padding-block: 80px;
  padding-inline: var(--sectionPadInline);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 80px;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--case-detail .case-detail-overview {
    padding-block: 50px;
    gap: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--case-detail .case-detail-overview {
    padding: 7vw;
    gap: 32px;
  }
}
.page--case-detail .case-detail-overview > * {
  width: 100%;
  max-width: 966px;
}
.page--case-detail {
  /* 治療前 / 治療後の縦並びラッパー
  ---------------------------------------- */
}
.page--case-detail .case-detail-images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 80px;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--case-detail .case-detail-images {
    gap: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--case-detail .case-detail-images {
    gap: 32px;
  }
}
.page--case-detail {
  /* 各画像セクションのコンテナ。
     <figure> として描き、内側に <figcaption><h2></h2></figcaption> と
     画像ラッパー <div class="..._photo"> を持つ構造。
     figure のデフォルト margin は _common.scss で 0 にリセット済 */
}
.page--case-detail .case-detail-image-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--case-detail .case-detail-image-group {
    gap: 16px;
  }
}
.page--case-detail .case-detail-image-group > figcaption {
  display: block;
  margin: 0;
  padding: 0;
}
.page--case-detail .case-detail-image-group__title {
  margin: 0;
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--case-detail .case-detail-image-group__title {
    font-size: var(--fz20);
  }
}
.page--case-detail {
  /* 写真の白マット（24px パディング）。
     親 .case-detail-image-group が figure に昇格したため、こちらは <div> として使う
     （Figma は 20px だが、プロジェクトの 8 の倍数ルール＋親ページとの統一を優先）
  ---------------------------------------- */
}
.page--case-detail .case-detail-image-group__photo {
  margin: 0;
  padding: 24px;
  background-color: var(--color-neutral-white);
}
@media only screen and (max-width: 768px) {
  .page--case-detail .case-detail-image-group__photo {
    padding: 4vw;
  }
}
.page--case-detail .case-detail-image-group__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000/442;
  -o-object-fit: cover;
     object-fit: cover;
}
.page--case-detail {
  /* 症例データテーブル
     - th: 薄コーポレート濃いめ背景・ブランドカラー文字・幅 300px 固定
     - td: 白背景・本文カラー・残り幅
     - 行間 1px を border-spacing で表現（body 背景の薄コーポレートが透けて区切り線になる）
     - SP は th/td を縦積みにして可読性を確保
  ---------------------------------------- */
}
.page--case-detail .case-detail-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 1px;
  margin-block: -1px;
}
.page--case-detail .case-detail-table th,
.page--case-detail .case-detail-table td {
  padding: 16px;
  font-size: var(--fz16);
  line-height: 1.6;
  vertical-align: middle;
  text-align: left;
}
@media only screen and (max-width: 768px) {
  .page--case-detail .case-detail-table th,
  .page--case-detail .case-detail-table td {
    font-size: var(--fz14);
    padding: 12px 16px;
  }
}
.page--case-detail .case-detail-table th {
  width: 300px;
  background-color: var(--color-brand-background-strong);
  color: var(--color-brand-tertiary);
  font-weight: 500;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--case-detail .case-detail-table th {
    width: 220px;
  }
}
@media only screen and (max-width: 768px) {
  .page--case-detail .case-detail-table th {
    width: 100%;
    display: block;
  }
}
.page--case-detail .case-detail-table td {
  background-color: var(--color-neutral-white);
  color: var(--color-text-primary);
  font-weight: 400;
}
@media only screen and (max-width: 768px) {
  .page--case-detail .case-detail-table td {
    width: 100%;
    display: block;
  }
}
.page--case-detail .case-detail-table {
  /* SP では table 構造全体を block 化して縦積みに統一。
     `th, td` だけを display: block にすると親 `tr` (display: table-row) との不整合で
     一部ブラウザで幅が auto-shrink するため、table / tbody / tr もまとめて block 化する。
     行間の視覚区切りは tr+tr の margin-top で body 背景 (薄コーポレート) を透かして表現 */
}
@media only screen and (max-width: 768px) {
  .page--case-detail .case-detail-table {
    display: block;
    border-spacing: 0;
    margin-block: 0;
  }
  .page--case-detail .case-detail-table tbody,
  .page--case-detail .case-detail-table tr {
    display: block;
  }
  .page--case-detail .case-detail-table tr + tr {
    margin-top: 8px;
  }
}
.page--case-detail {
  /* 院長コメント / リスクと副作用の共通セクション
     構造は .case-category-section と同等（中央寄せ + max-width 966px）
  ---------------------------------------- */
}
.page--case-detail .case-detail-section {
  width: 100%;
  padding-block: 80px;
  padding-inline: var(--sectionPadInline);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--case-detail .case-detail-section {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--case-detail .case-detail-section {
    padding: 7vw;
    gap: 24px;
  }
}
.page--case-detail .case-detail-section > * {
  width: 100%;
  max-width: 966px;
}
.page--case-detail .case-detail-section--white {
  background-color: var(--color-neutral-white);
}
.page--case-detail .case-detail-section__title {
  margin: 0;
  color: var(--color-brand-primary);
  font-size: var(--fz32);
  font-weight: 400;
  line-height: 1.4;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--case-detail .case-detail-section__title {
    font-size: var(--fz20);
  }
}
.page--case-detail {
  /* 院長コメント本文
     段落間余白は段落側 margin-top で管理（HTML に空 <p> を作らない）
  ---------------------------------------- */
}
.page--case-detail .case-detail-text {
  color: var(--color-text-primary);
  font-size: var(--fz16);
  line-height: 1.8;
}
@media only screen and (max-width: 768px) {
  .page--case-detail .case-detail-text {
    font-size: var(--fz14);
  }
}
.page--case-detail .case-detail-text > * {
  margin: 0;
}
.page--case-detail .case-detail-text > * + * {
  margin-top: 1.6em;
}
.page--case-detail {
  /* リスクと副作用のリスト
     _common.scss でグローバルに list-style: none が当たっているため、
     ここで明示的に disc マーカーを復活させる（24px の左パディングで「・」位置を確保）
  ---------------------------------------- */
}
.page--case-detail .case-detail-risk-list {
  margin: 0;
  padding-left: 24px;
  color: var(--color-text-primary);
  font-size: var(--fz16);
  line-height: 1.8;
  list-style: disc;
}
@media only screen and (max-width: 768px) {
  .page--case-detail .case-detail-risk-list {
    font-size: var(--fz14);
    padding-left: 20px;
  }
}
.page--case-detail .case-detail-risk-list > li {
  margin: 0;
  padding: 0;
  list-style: disc;
}
.page--case-detail .case-detail-risk-list > li + li {
  margin-top: 0.4em;
}
.page--case-detail .case-detail-risk-list a {
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ///////////////////////////////////////////
  _whitening.scss
  「ホワイトニング」（/whitening/index.html）専用スタイル

  構成（ページ内の DOM 出現順）:
    1. .pagetitle              共通モジュール（青帯）を流用
    2. .whitening-section      導入（薄青 / main 継承）
    3. .whitening-section--white  ホーム推奨理由（白背景）
         - .whitening-lead-media リード左に画像（PC/TAB 横並び / SP 縦積み）
         - .whitening-item       subhead + 本文（理由 3 点）
         - .whitening-note       留意点（青枠ボックス）
    4. .whitening-section      成功のための注意点（薄青 / main 継承）
         - .whitening-item       subhead + 本文（注意点 3 点）
    5. .whitening-section--white  矯正との相乗効果（白背景、eyebrow + h2）

  流用パーツ（既存モジュール）:
    - .pagetitle / .pagetitle__heading（02_module/_module.scss）
    - .subhead / .subhead--brand（02_module/_module.scss）
        ※ 白背景セクション（理由）の subhead は .subhead--brand（薄青背景）で埋没回避
        ※ 薄青背景セクション（注意点）の subhead は基底 .subhead（白背景）で浮かせる
    - .section-pad（01_layout/_common.scss、左右 padding を委譲）

  背景色の交互配置（DOM 順）: 薄青 → 白 → 薄青 → 白
    main 継承の薄青セクションは個別 bg 指定なし、白セクションのみ --white で上書き
    （_clinic.scss と同じ交互配置・埋没回避の方針）

  - 全スタイルは .page--whitening スコープ内
  - PC は Figma 準拠（縦 padding 80px / コンテンツ最大 1200px / 要素間 40px）
  - TAB/SP は Figma デザインなし → 既存下層ページ（_clinic.scss）の規約に準拠
    - TAB: 縦余白 50px / SP: 縦余白 7vw・要素間 24px
/////////////////////////////////////////// */
.page--whitening {
  /* ============================================================
    1. セクション共通（導入／理由／注意点／相乗効果）
    Figma の各セクション縦 padding 80px を全幅で適用。
    左右 padding は HTML の .section-pad（--sectionPadInline）に委譲。
  ============================================================ */
}
.page--whitening .whitening-section {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--whitening .whitening-section {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--whitening .whitening-section {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--whitening .whitening-section {
    padding-block: 7vw;
  }
}
.page--whitening .whitening-section--white {
  background-color: var(--color-neutral-white);
}
.page--whitening .whitening-section__lead {
  color: var(--color-text-primary);
  line-height: 1.8;
}
.page--whitening {
  /* ============================================================
    リード文の左に画像を添えるレイアウト（推奨理由セクション）
    PC/TAB: 画像左（固定 340px・最大 40%）+ リード右。リードが短いため天地中央寄せ。
    SP: 縦積み（画像上 → リード下）。
    上下余白は .section-stack の flex gap（PC 40px / SP 24px）が担う。
  ============================================================ */
}
.page--whitening .whitening-lead-media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
@media print, screen and (min-width: 769px) {
  .page--whitening .whitening-lead-media {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 40px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.page--whitening .whitening-lead-media > .whitening-section__lead {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
}
.page--whitening .whitening-lead-media__figure {
  margin: 0;
}
@media print, screen and (min-width: 769px) {
  .page--whitening .whitening-lead-media__figure {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 340px;
            flex: 0 0 340px;
    max-width: 40%;
  }
}
.page--whitening .whitening-lead-media__img {
  display: block;
  width: 100%;
  height: auto;
}
.page--whitening {
  /* ============================================================
    相乗効果セクションの見出しグループ（eyebrow + h2）
    Figma: 呼びかけ文「専門医の視点」(24px) を本見出し(32px)の上に小さく配置。
    呼びかけ文は見出しではなく <p> とする（case ページの見出し方針と統一）。
  ============================================================ */
}
.page--whitening .whitening-section__heading-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
.page--whitening .whitening-section__eyebrow {
  color: var(--color-brand-primary);
  font-size: var(--fz24);
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  .page--whitening .whitening-section__eyebrow {
    font-size: var(--fz20);
  }
}
.page--whitening .whitening-section__text {
  color: var(--color-text-primary);
  line-height: 1.8;
}
.page--whitening .whitening-section__text > p + p {
  margin-top: 1.8em;
}
.page--whitening {
  /* ============================================================
    subhead + 本文の項目（理由 3 点 / 注意点 3 点で共通）
    Figma: subHeading（左 4px 青ボーダー）+ Text Container（pt 24px / px 16px）
    ※ subhead 自体は共通モジュール .subhead を HTML 側で付与
       （白背景セクションは .subhead--brand、薄青背景は基底 .subhead）
  ============================================================ */
}
.page--whitening .whitening-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.page--whitening .whitening-item__body {
  padding: 24px 16px 0;
  color: var(--color-text-primary);
  line-height: 1.8;
}
@media only screen and (max-width: 768px) {
  .page--whitening .whitening-item__body {
    padding: 16px 0 0;
  }
}
.page--whitening {
  /* ============================================================
    留意点ボックス（青枠の注意ボックス）
    Figma: border 1px solid primary / padding 24px / gap 16px
    subhead（左ボーダーのみ）とは別装飾のため専用クラスで実装。
  ============================================================ */
}
.page--whitening .whitening-note {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--color-brand-primary);
}
.page--whitening .whitening-note__title {
  color: var(--color-brand-primary);
  font-size: var(--fz20);
  font-weight: 400;
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  .page--whitening .whitening-note__title {
    font-size: var(--fz16);
  }
}
.page--whitening .whitening-note__text {
  color: var(--color-text-primary);
  line-height: 1.8;
}

/* ///////////////////////////////////////////
  _faq.scss
  「よくある質問」（/orthodontics/faq/index.html）専用スタイル

  構成（ページ内の DOM 出現順）:
    1. .pagetitle              共通モジュール（青帯）を流用。eyebrow「矯正治療」+ 見出し
    2. .faq-section            Q&A セクション（薄青 / main 継承、白 subhead が映える）
         - .faq-item             subhead（質問）+ 本文（回答）
    3. .case-category-nav      関連ページナビ（02_module/_module.scss のグローバル共有部品を流用）

  流用パーツ:
    - .pagetitle / .pagetitle__category / .pagetitle__heading（02_module/_module.scss）
    - .subhead（02_module/_module.scss）
        本セクションは薄青背景（main 継承）のため、基底 .subhead（白背景）で質問見出しを浮かせる
        ＝ whitening の「注意点」セクションと同じ使い分け
    - .section-pad（左右 padding）
    - .case-category-nav（症例ページから流用。矯正治療カテゴリ 12 ページのナビ + pager）
        現在ページ（よくある質問）の aria-current="page" は script.js が動的付与

  - 全スタイルは .page--faq スコープ内（関連ページナビはグローバル）
  - PC は Figma 準拠（縦 padding 80px / コンテンツ最大 1200px / 項目間 40px）
  - TAB/SP は既存下層ページ（_whitening.scss / _clinic.scss）の規約に準拠
/////////////////////////////////////////// */
.page--faq {
  /* ============================================================
    Q&A セクション
    Figma の縦 padding 80px を全幅で適用。左右は .section-pad に委譲。
  ============================================================ */
}
.page--faq .faq-section {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--faq .faq-section {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--faq .faq-section {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--faq .faq-section {
    padding-block: 7vw;
  }
}
.page--faq .faq-list {
  max-width: var(--contentMaxWidth);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--faq .faq-list {
    gap: 24px;
  }
}
.page--faq .faq-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.page--faq .faq-item__body {
  padding: 24px 16px 0;
  color: var(--color-text-primary);
  line-height: 1.8;
}
@media only screen and (max-width: 768px) {
  .page--faq .faq-item__body {
    padding: 16px 0 0;
  }
}
.page--faq .faq-item__body > p + p {
  margin-top: 1.8em;
}
.page--faq .faq-item__body a {
  color: var(--color-brand-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page--faq .faq-item__body a:hover {
  opacity: 0.7;
}
.page--faq .faq-item__body strong {
  font-weight: 700;
}

/* ///////////////////////////////////////////
  _price.scss
  「治療費（料金表）」（/orthodontics/price/index.html）専用スタイル

  構成（ページ内の DOM 出現順）:
    1. .pagetitle                共通モジュール（青帯）を流用（eyebrow「矯正治療」+ h1「治療費」）
    2. .price-section            気になる治療費用（薄青 / main 継承、subhead は基底 .subhead）
    3. .price-section--white     シミュレーション（白背景、コスト表 .price-sim ×6）
    4. .price-section            料金表（薄青 / main 継承、初期費用〜オプションの仕様表 .price-fee）
    5. .price-section--white     医療費控除（白背景、subhead は .subhead--brand、手続き表 .price-def）

  背景色の交互配置（DOM 順）: 薄青 → 白 → 薄青 → 白
    （_whitening.scss / _clinic.scss と同じ交互配置・埋没回避の方針。
     薄青セクションの subhead は白背景の基底 .subhead で浮かせ、
     白セクションの subhead は .subhead--brand（薄青背景）で埋没回避）

  テーブル方針（採用情報ページの手法を流用）:
    - .price-def : 医療費控除「手続きに必要な準備」の定義表。
        色分け（背景塗り）を使わず、罫線＋文字の太さで階層を作るシンプル方針。
        見出し行は濃い 2px 下罫線、左 th は太字、行間は薄グレー hairline で区切る。
        （SP も縦積みせず 2 列を維持）
    - .price-sim : シミュレーションのコスト表。caption 帯＋ゼブラ＋合計行ハイライト。
    - .price-fee : 料金表の仕様表。強め着色の左 th（中央）＋白の右寄せ金額・rowspan 対応。
        SP は横スクロールせず、行をブロック化して縦積みにリフロー（th を薄青見出しバー化、
        項目＋金額は「ラベル左・金額右」の 1 行）。

  - 全スタイルは .page--price スコープ内
  - PC は Figma 準拠（縦 padding 80px / コンテンツ最大 1200px）
  - TAB/SP は Figma デザインなし → 既存下層ページ（_whitening.scss）の規約に準拠
/////////////////////////////////////////// */
.page--price {
  /* ============================================================
    セクション共通（whitening と同じ全幅帯 + インナー中央寄せ）
    左右 padding は HTML の .section-pad（--sectionPadInline）に委譲。
  ============================================================ */
}
.page--price .price-section {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--price .price-section {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--price .price-section {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--price .price-section {
    padding-block: 7vw;
  }
}
.page--price .price-section--white {
  background-color: var(--color-neutral-white);
}
.page--price .price-section__lead {
  color: var(--color-text-primary);
  line-height: 1.8;
}
.page--price .price-section__lead > p + p {
  margin-top: 1.8em;
}
.page--price .price-section__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--price .price-section__head {
    gap: 24px;
  }
}
.page--price {
  /* ============================================================
    subhead + 本文の項目（気になる治療費用 / 医療費控除で共通）
    Figma: subHeading（左 4px 青ボーダー）+ Text Container（pt 24px / px 16px）
    ※ subhead 自体は共通モジュール .subhead を HTML 側で付与
       （薄青背景セクションは基底 .subhead、白背景セクションは .subhead--brand）
  ============================================================ */
}
.page--price .price-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 50px;
}
@media only screen and (max-width: 768px) {
  .page--price .price-items {
    gap: 24px;
  }
}
.page--price .price-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.page--price .price-item__body {
  padding: 24px 16px 0;
  color: var(--color-text-primary);
  line-height: 1.8;
}
@media only screen and (max-width: 768px) {
  .page--price .price-item__body {
    padding: 16px 0 0;
  }
}
.page--price .price-item__body > p + p,
.page--price .price-item__body > ul + p,
.page--price .price-item__body > p + ul,
.page--price .price-item__body > ol + p,
.page--price .price-item__body > p + ol {
  margin-top: 1.8em;
}
.page--price .price-mark {
  font-weight: 700;
  color: var(--color-brand-primary);
}
.page--price .price-bullets {
  padding-left: 1.25em;
}
.page--price .price-bullets > li {
  list-style-type: disc;
}
.page--price .price-bullets > li + li {
  margin-top: 0.4em;
}
.page--price .price-steps {
  padding-left: 0;
}
.page--price .price-steps > li {
  list-style: decimal inside;
}
.page--price .price-steps > li::marker {
  color: var(--color-brand-primary);
  font-weight: 700;
}
.page--price .price-steps > li + li {
  margin-top: 1.8em;
}
.page--price {
  /* ============================================================
    ※注釈（リード末尾・テーブル下の補足）
  ============================================================ */
}
.page--price .price-note {
  color: var(--color-text-primary);
  line-height: 1.8;
}
.page--price .price-note > p + p,
.page--price .price-note > p + ul,
.page--price .price-note > ul + p {
  margin-top: 0.8em;
}
.page--price .price-notelist {
  list-style: none;
  padding-left: 0;
}
.page--price .price-notelist > li {
  padding-left: 1.2em;
  text-indent: -1.2em;
}
.page--price .price-notelist > li::before {
  content: "※";
}
.page--price .price-notelist > li + li {
  margin-top: 0.8em;
}
.page--price {
  /* ============================================================
    料金表（初期費用〜オプション）のブロック単位グループ
    h2（仕様表見出し）+ table + ※注釈 を 1 ブロックとして縦並び。
  ============================================================ */
}
.page--price .price-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
@media only screen and (max-width: 768px) {
  .page--price .price-block {
    gap: 16px;
  }
}
.page--price .price-block__note {
  color: var(--color-text-primary);
  line-height: 1.8;
  margin-top: -16px;
}
@media only screen and (max-width: 768px) {
  .page--price .price-block__note {
    margin-top: 0;
  }
}
.page--price {
  /* ============================================================
    A. シミュレーション コスト表（.price-sim）
       caption 帯（薄青）＋ ゼブラ（白／ライトグレー）＋ 合計行（薄青・太字）
       列構成: th[scope=row]（項目・左）｜ td（金額・右寄せ）
    ============================================================ */
}
.page--price .price-sim {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.6;
}
.page--price .price-sim__caption,
.page--price .price-sim caption {
  caption-side: top;
  text-align: left;
  background-color: var(--color-brand-background);
  border-left: 4px solid var(--color-brand-primary);
  color: var(--color-brand-primary);
  font-weight: 400;
  font-size: var(--fz20);
  line-height: 1.4;
  padding: 8px 16px;
  margin-bottom: 32px;
}
@media only screen and (max-width: 768px) {
  .page--price .price-sim__caption,
  .page--price .price-sim caption {
    font-size: var(--fz16);
    margin-bottom: 24px;
  }
}
.page--price .price-sim th, .page--price .price-sim td {
  padding: 0.8em 1em;
  vertical-align: top;
}
@media only screen and (max-width: 768px) {
  .page--price .price-sim th, .page--price .price-sim td {
    padding: 12px;
  }
}
.page--price .price-sim tbody tr:first-child th,
.page--price .price-sim tbody tr:first-child td {
  border-top: 1px dashed var(--color-table-border);
}
.page--price .price-sim tbody tr:last-child th,
.page--price .price-sim tbody tr:last-child td {
  border-bottom: 1px dashed var(--color-table-border);
}
.page--price .price-sim th[scope=row] {
  text-align: left;
  font-weight: 400;
  color: var(--color-text-primary);
}
.page--price .price-sim td {
  text-align: right;
  white-space: nowrap;
  color: var(--color-text-primary);
}
.page--price .price-sim tbody tr:nth-of-type(odd) th,
.page--price .price-sim tbody tr:nth-of-type(odd) td {
  background-color: var(--color-neutral-white);
}
.page--price .price-sim tbody tr:nth-of-type(even) th,
.page--price .price-sim tbody tr:nth-of-type(even) td {
  background-color: var(--color-neutral-lightgray);
}
.page--price .price-sim__total th, .page--price .price-sim__total td {
  background-color: var(--color-brand-background);
  color: var(--color-brand-primary);
  font-weight: 700;
}
.page--price .price-sim-heading {
  color: var(--color-brand-primary);
  font-size: var(--fz24);
  font-weight: 500;
  line-height: 1.4;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-brand-primary);
}
@media only screen and (max-width: 768px) {
  .page--price .price-sim-heading {
    font-size: var(--fz20);
  }
}
.page--price .price-sim-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 80px 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
@media only screen and (max-width: 768px) {
  .page--price .price-sim-grid {
    gap: 40px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.page--price .price-sim-pair {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 80px 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
@media only screen and (max-width: 768px) {
  .page--price .price-sim-pair {
    gap: 40px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.page--price {
  /* ============================================================
    B. 料金表 仕様表（.price-fee）
       左 th（強め薄青・中央）｜ 中列 td（項目・左）｜ 右 td（金額・右寄せ）
       2 列の行は金額セルを colspan="2" で右端まで伸ばす。rowspan 対応。
    ============================================================ */
}
.page--price .price-fee {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.6;
}
.page--price .price-fee th, .page--price .price-fee td {
  padding: 0.8em 1em;
  vertical-align: middle;
  border: 1px solid var(--color-neutral-white);
}
.page--price .price-fee th[scope=row],
.page--price .price-fee th[scope=rowgroup] {
  width: 220px;
  background-color: var(--color-brand-background-strong);
  color: var(--color-brand-tertiary);
  font-weight: 500;
  text-align: center;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--price .price-fee th[scope=row],
  .page--price .price-fee th[scope=rowgroup] {
    width: 180px;
  }
}
.page--price .price-fee td {
  background-color: var(--color-neutral-white);
  color: var(--color-text-primary);
  border-color: var(--color-brand-background);
}
.page--price .price-fee__item {
  text-align: left;
}
.page--price .price-fee__amount {
  text-align: right;
}
.page--price .price-fee {
  /* SP: 横スクロールさせず縦積みにリフロー（rowspan 表でも読みやすく）。
     - テーブル/行/セルをブロック化（rowspan は無効化されるが、見出し th が
       先頭行にだけ残るのを利用して「グループ見出しバー」として機能させる）
     - 行ヘッダー th[scope=row] は全幅の薄青見出しバー（左寄せ）
     - 項目 __item + 金額 __amount は 1 行に「ラベル左・金額右」（flex）
     - 2 列行（th + 金額 colspan）はバー直下に金額を右寄せ
     - 行間は薄青の細罫線で区切る */
}
@media only screen and (max-width: 768px) {
  .page--price .price-fee {
    display: block;
  }
  .page--price .price-fee tbody {
    display: block;
  }
  .page--price .price-fee tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    border-top: 1px solid var(--color-brand-background);
  }
  .page--price .price-fee tr:first-child {
    border-top: 0;
  }
  .page--price .price-fee th, .page--price .price-fee td {
    border: 0;
    padding: 10px 12px;
  }
  .page--price .price-fee th[scope=row],
  .page--price .price-fee th[scope=rowgroup] {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    width: auto;
    text-align: left;
  }
  .page--price .price-fee__item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    min-width: 0;
    font-weight: 500;
  }
  .page--price .price-fee__amount {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    text-align: right;
  }
  .page--price .price-fee__amount[colspan] {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
    margin-left: 0;
  }
}
.page--price {
  /* ============================================================
    C. 医療費控除「手続きに必要な準備」定義表（.price-def）
       色分けなし・罫線ベースのシンプル表:
       collapse、見出し行は濃い 2px 下罫線＋太字、左 th は太字、
       行間は薄グレー hairline（--color-border）で区切る。
       ※全セル背景塗りなし・文字色は --color-text-primary。
       ※SP も th/td 縦積みせず 2 列を維持。
    ============================================================ */
}
.page--price .price-def {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.6;
  margin-block: 1em;
}
.page--price .price-def th, .page--price .price-def td {
  padding: 16px;
  text-align: left;
  vertical-align: top;
}
@media only screen and (max-width: 768px) {
  .page--price .price-def th, .page--price .price-def td {
    padding: 12px;
  }
}
.page--price .price-def thead th {
  color: var(--color-text-primary);
  font-weight: 700;
  border-bottom: 2px solid var(--color-text-primary);
}
.page--price .price-def tbody th[scope=row] {
  width: 240px;
  color: var(--color-text-primary);
  font-weight: 700;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--price .price-def tbody th[scope=row] {
    width: 200px;
  }
}
@media only screen and (max-width: 768px) {
  .page--price .price-def tbody th[scope=row] {
    width: auto;
    white-space: nowrap;
  }
}
.page--price .price-def tbody td {
  color: var(--color-text-primary);
}
.page--price .price-def tbody tr + tr th,
.page--price .price-def tbody tr + tr td {
  border-top: 1px solid var(--color-border);
}

/* ///////////////////////////////////////////
  _risk.scss
  「矯正歯科治療に伴う一般的なリスク・副作用」（/orthodontics/risk/index.html）専用スタイル

  構成（DOM 出現順）:
    1. .pagetitle          共通モジュール（青帯。eyebrow「矯正治療」+ h1）
    2. .risk-section       リスク・副作用（薄青 / main 継承の単一セクション）
         - .risk-section__lead  リード文
         - .risk-list           20 項目の番号付きリスト（ol、各項目上端＋リスト下端に dashed 罫線）
         - .risk-note           ※出典注記
    3. .case-category-nav  関連ページナビ（グローバル共有部品を流用。本ファイルでは未定義）

  方針:
    - 全スタイルは .page--risk スコープ内
    - 背景は薄青のみの単一セクション（交互配置なし）。青見出し h2 は持たず、
      ページ見出しは pagetitle の h1 のみ（FAQ と同方針）
    - 縦積み・幅・中央寄せは共通 .section-stack（gap 40px / SP 24px / max 1200px）を流用
    - PC は Figma 準拠（縦 padding 80px / gap 40px / 項目 padding 16px / 番号ぶら下げ 24px）
    - line-height 由来の半リーディングを trim-leading で除去し、要素間の見た目 gap を
      Figma（text-box-trim 前提）どおりにする。罫線（list の上下端）はテキストではないため
      gap はそのまま glyph↔罫線 = 40px に揃う。
/////////////////////////////////////////// */
.page--risk {
  /* ============================================================
    セクション（whitening/price と同じ全幅帯 + インナー中央寄せ）
    左右 padding は HTML の .section-pad（--sectionPadInline）に委譲。
    縦 padding は Figma の 80px（TAB/SP は下層共通の規約に準拠）。
  ============================================================ */
}
.page--risk .risk-section {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--risk .risk-section {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--risk .risk-section {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--risk .risk-section {
    padding-block: 7vw;
  }
}
.page--risk .risk-section__lead,
.page--risk .risk-note {
  color: var(--color-text-primary);
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
.page--risk {
  /* ============================================================
    リスク・副作用一覧（.risk-list）
    Figma: 各項目を上端 dashed 罫線で区切り（先頭項目の上端＋項目間）、
      リスト下端も dashed。番号は左にぶら下げ、項目 padding 16px。
    ※番号は list-marker を使わず CSS カウンタ + flex 2 カラムで描画する。
      グローバル reset（_common.scss の `ol, ul, li { list-style: none }`）下では
      outside マーカーが罫線外へはみ出し、本文との余白も不自然になるため。
    ※list-style:none により Safari/VoiceOver がリストとして認識しなくなる不具合があるため、
      HTML 側の <ol> に role="list" を付与して順序リストの意味を保つ
      （_normalize.scss のコメント方針に準拠）。
  ============================================================ */
}
.page--risk .risk-list {
  width: 100%;
  padding: 0;
  counter-reset: risk-item;
  border-bottom: 1px dashed var(--color-table-border);
}
.page--risk .risk-list > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  padding: 1em 1em 1em 0;
  border-top: 1px dashed var(--color-table-border);
  color: var(--color-text-primary);
  line-height: 1.6;
  counter-increment: risk-item;
}
.page--risk .risk-list > li::before {
  content: counter(risk-item) ".";
  -webkit-box-flex: 0;
      -ms-flex: 0 0 1.5em;
          flex: 0 0 1.5em;
  text-align: right;
  -webkit-font-feature-settings: "tnum";
          font-feature-settings: "tnum";
}

/* ///////////////////////////////////////////
  _orthodontics.scss — 矯正治療トップ（/orthodontics/index.html）専用

  構成: pagetitle → 目次(.toc) → タイミング → 進め方 → 虫歯予防 → .case-category-nav
  背景: 薄青 → 白(--white) → 薄青 → 白(--white) → 薄青（whitening と同方針）
  流用: .pagetitle / .section-title / .section-stack / .subhead(--brand) / .section-pad
    ※ subhead は 白セクション=--brand（薄青背景）／薄青セクション=基底（白背景）
  余白: 外縁ギャップ・固定 gap のみ trim-leading で半リーディングを除去。
        段落間の 1 行アキ（Figma の空行<p>）は trim せず margin 1.8em で再現。
  PC は Figma 準拠 / TAB・SP はデザインなし → 下層ページ規約（_whitening 等）に準拠。
/////////////////////////////////////////// */
.page--orthodontics .ortho-section {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--orthodontics .ortho-section {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--orthodontics .ortho-section {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--orthodontics .ortho-section {
    padding-block: 7vw;
  }
}
.page--orthodontics .ortho-section--white {
  background-color: var(--color-neutral-white);
}
.page--orthodontics .toc__box {
  width: 100%;
  background-color: var(--color-neutral-white);
  padding: 1em;
}
.page--orthodontics .toc__list {
  margin: 0;
  padding-left: 24px;
  color: var(--color-brand-primary);
  line-height: 1.8;
  list-style: none;
}
.page--orthodontics .toc__list > li {
  list-style: decimal;
}
.page--orthodontics .toc__link {
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page--orthodontics .ortho-block {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .page--orthodontics .ortho-block + .ortho-block {
    margin-top: 8px;
  }
}
.page--orthodontics .ortho-block__body {
  padding: 1.5em 1.25em 0;
  color: var(--color-text-primary);
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--orthodontics .ortho-block__body {
    padding: 1.5em 0 0;
  }
}
.page--orthodontics .ortho-block__body > * + * {
  margin-top: 1.8em;
}
.page--orthodontics .ortho-block__body--flow {
  margin-block: 0;
  padding-top: 32px;
}
@media only screen and (max-width: 768px) {
  .page--orthodontics .ortho-block__body--flow {
    padding-top: 24px;
  }
}
.page--orthodontics .ortho-cluster > * + * {
  margin-top: 0;
}
.page--orthodontics .ortho-topic {
  color: var(--color-brand-primary);
  font-weight: 700;
  line-height: 1.8;
  font-size: var(--fz16);
}
.page--orthodontics .ortho-reasons {
  width: 100%;
  list-style: none;
}
.page--orthodontics .ortho-reasons > li > * + * {
  margin-top: 0;
}
.page--orthodontics .ortho-reasons > li {
  padding-block: 24px;
}
@media only screen and (max-width: 768px) {
  .page--orthodontics .ortho-reasons > li {
    padding-block: 16px;
  }
}
.page--orthodontics .ortho-reasons > li + li {
  border-top: 1px dashed var(--color-brand-primary);
}
.page--orthodontics .ortho-reasons > li:first-child {
  padding-top: 0;
}
.page--orthodontics .ortho-reasons > li:last-child {
  padding-bottom: 0;
}
.page--orthodontics .ortho-reasons__title {
  font-weight: 700;
  line-height: 1.8;
  color: var(--color-text-primary);
}
.page--orthodontics .ortho-reasons--brand .ortho-reasons__title {
  color: var(--color-brand-primary);
}
.page--orthodontics .ortho-reasons__item--media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
@media print, screen and (min-width: 769px) {
  .page--orthodontics .ortho-reasons__item--media {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 40px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.page--orthodontics .ortho-reasons__text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
}
.page--orthodontics .ortho-reasons__text > * + * {
  margin-top: 0;
}
.page--orthodontics .ortho-reasons__media {
  margin: 0;
}
@media print, screen and (min-width: 769px) {
  .page--orthodontics .ortho-reasons__media {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 340px;
            flex: 0 0 340px;
    max-width: 40%;
  }
}
.page--orthodontics .ortho-reasons__img {
  display: block;
  width: 100%;
  height: auto;
}
.page--orthodontics .ortho-bullets {
  padding-left: 24px;
  line-height: 1.8;
  list-style: none;
}
.page--orthodontics .ortho-bullets > li {
  list-style: disc;
}
.page--orthodontics .ortho-flow {
  width: 100%;
  list-style: none;
}
.page--orthodontics .ortho-flow__step {
  border-bottom: 1px dashed var(--color-brand-primary);
  padding-top: 32px;
  padding-bottom: 32px;
}
.page--orthodontics .ortho-flow__step:first-child {
  padding-top: 0;
}
.page--orthodontics .ortho-flow--media .ortho-flow__step {
  padding-top: 24px;
  padding-bottom: 24px;
}
.page--orthodontics .ortho-flow--media .ortho-flow__step:first-child {
  padding-top: 0;
}
.page--orthodontics .ortho-flow--media .ortho-flow__step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
@media print, screen and (min-width: 769px) {
  .page--orthodontics .ortho-flow--media .ortho-flow__step {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 40px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.page--orthodontics .ortho-flow__media {
  margin: 0;
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
}
@media print, screen and (min-width: 769px) {
  .page--orthodontics .ortho-flow__media {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 340px;
            flex: 0 0 340px;
    max-width: 40%;
  }
}
.page--orthodontics .ortho-flow__img {
  display: block;
  width: 100%;
  height: auto;
}
.page--orthodontics .ortho-flow__text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
.page--orthodontics .ortho-flow__text > p {
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
.page--orthodontics .ortho-flow__title {
  color: var(--color-brand-primary);
  font-size: var(--fz20);
  font-weight: 700;
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--orthodontics .ortho-flow__title {
    font-size: var(--fz16);
  }
}

/* ///////////////////////////////////////////
  _implant.scss — スケレタルアンカレッジを用いた矯正治療（/orthodontics/implant/）専用

  構成: pagetitle(eyebrow+h1) → introduction → 5つのメリット → 検討すべき欠点とリスク → 院長メッセージ → .case-category-nav
  背景: 薄青(intro) → 白(メリット) → 薄青(欠点) → 白(院長) → 薄青(pager)（白のみ --white）
  流用: .pagetitle(+__category) / .section-title(h2) / .section-stack / .subhead / .section-pad / .case-category-nav
  方針: 矯正治療トップ(_orthodontics)と同方針（per-page スコープ）。5つのメリットは clinic「特長」(.clinic-features)の見た目を踏襲。
        余白は外縁ギャップに trim-leading、段落間 1 行アキは margin 1.8em。
/////////////////////////////////////////// */
.page--implant .implant-section {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--implant .implant-section {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--implant .implant-section {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--implant .implant-section {
    padding-block: 7vw;
  }
}
.page--implant .implant-section--white {
  background-color: var(--color-neutral-white);
}
.page--implant .implant-figure {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  width: 600px;
  max-width: 100%;
}
.page--implant .implant-figure__img {
  display: block;
  width: 100%;
  aspect-ratio: 600/384;
  -o-object-fit: cover;
     object-fit: cover;
}
.page--implant .implant-text,
.page--implant .implant-block__body {
  color: var(--color-text-primary);
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
.page--implant .implant-text > * + *,
.page--implant .implant-block__body > * + * {
  margin-top: 1.8em;
}
.page--implant .implant-block__body {
  padding: 1.5em 1.25em 0;
}
@media only screen and (max-width: 768px) {
  .page--implant .implant-block__body {
    padding: 1.5em 0 0;
  }
}
.page--implant .implant-block {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .page--implant .implant-block + .implant-block {
    margin-top: 8px;
  }
}
.page--implant .implant-cluster > * + * {
  margin-top: 0;
}
.page--implant .implant-deflist {
  line-height: 1.8;
}
.page--implant .implant-deflist > dt {
  font-weight: 700;
}
.page--implant .implant-deflist > dd + dt {
  margin-top: 0.8em;
}
@media only screen and (max-width: 768px) {
  .page--implant .implant-deflist {
    margin-top: 0.8em;
  }
}
.page--implant {
  /* ============================================================
    5つのメリット — clinic「7つの特長」(.clinic-features) の見た目を踏襲
    薄青カード（番号バッジ + 見出し + 本文）。白セクション上で表示。
  ============================================================ */
}
.page--implant .implant-merits__list {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
@media only screen and (max-width: 768px) {
  .page--implant .implant-merits__list {
    gap: 16px;
  }
}
.page--implant .implant-merits__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 24px;
  padding: 32px;
  background-color: var(--color-brand-background);
}
@media only screen and (max-width: 768px) {
  .page--implant .implant-merits__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
    padding: 24px 16px;
  }
}
.page--implant .implant-merits__number {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 64px;
  color: var(--color-brand-primary);
  font-family: "LINE Seed JP", var(--baseFont);
  font-size: var(--fz40);
  font-weight: 500;
  line-height: 1;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--implant .implant-merits__number {
    width: auto;
    font-size: var(--fz32);
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
    text-align: center;
  }
}
.page--implant .implant-merits__body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  color: var(--color-text-primary);
  line-height: 1.8;
}
@media only screen and (max-width: 768px) {
  .page--implant .implant-merits__body {
    gap: 8px;
  }
}
.page--implant .implant-merits__heading {
  color: var(--color-brand-primary);
  font-size: var(--fz20);
  font-weight: 500;
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  .page--implant .implant-merits__heading {
    font-size: var(--fz16);
  }
}

/* ///////////////////////////////////////////
  _insurance.scss — 健康保険でできる矯正治療（/orthodontics/insurance/）専用

  構成: pagetitle(eyebrow+h1) → 導入文 → 保険適用となる「3つのケース」 → 当院で保険治療を受けるメリット → 院長メッセージ → .case-category-nav
  背景: 薄青(導入) → 白(3つのケース) → 薄青(メリット) → 白(院長メッセージ) → 薄青(pager)（白のみ --white）
  流用: .pagetitle(+__category) / .section-title(h2) / .section-stack / .subhead(+--brand) / .section-pad / .case-category-nav
  方針: implant / orthodontics と同方針（per-page スコープ。既存ページには非干渉）。
  余白対策（line-height 由来 gap）:
    - subhead↔本文・section gap・固定 auto-layout gap(24px) は @include trim-leading で
      半リーディングを除去し、CSS 値＝Figma の glyph 間距離に一致させる。
    - 段落グループ間の「空行（1行アキ）」は margin 1.8em で再現（trim しない）。
      Figma の空行（&nbsp;）は line-height ぶんのアキを意図しているため。
/////////////////////////////////////////// */
.page--insurance .insurance-section {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--insurance .insurance-section {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--insurance .insurance-section {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--insurance .insurance-section {
    padding-block: 7vw;
  }
}
.page--insurance .insurance-section--white {
  background-color: var(--color-neutral-white);
}
.page--insurance {
  /* ============================================================
    本文テキスト（導入文 / 院長メッセージ）
    - 段落グループ間の「空行」は margin 1.8em（trim せず Figma の空行を再現）
    - 外縁は trim-leading で section padding / section-stack gap と視覚距離を一致
  ============================================================ */
}
.page--insurance .insurance-text {
  color: var(--color-text-primary);
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
.page--insurance .insurance-text > * + * {
  margin-top: 1.8em;
}
.page--insurance .insurance-text__highlight {
  color: var(--color-brand-primary);
  font-weight: 700;
}
.page--insurance .insurance-cluster > * + * {
  margin-top: 0;
}
.page--insurance .insurance-lead {
  color: var(--color-text-primary);
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
.page--insurance {
  /* ============================================================
    ブロック（subhead + 本文）— 3つのケース / メリット 共通
    subhead は 白セクション=.subhead--brand（薄青バー）/ 薄青セクション=.subhead（白バー）
  ============================================================ */
}
.page--insurance .insurance-block {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .page--insurance .insurance-block + .insurance-block {
    margin-top: 8px;
  }
}
.page--insurance .insurance-block__body {
  color: var(--color-text-primary);
  line-height: 1.8;
  padding: 1.5em 1.25em 0;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--insurance .insurance-block__body {
    padding: 1.5em 0 0;
  }
}
.page--insurance .insurance-block__body--gap > * + * {
  margin-top: 1em;
}
.page--insurance .insurance-bullets {
  padding-left: 1.5em;
}
.page--insurance .insurance-bullets > li {
  list-style: disc;
}
.page--insurance {
  /* ============================================================
    指定疾患一覧ブロック（ケース3 内）
    - 見出し(h4) + 導入文 は密着、その後「空行」を挟んで 疾患名 / 結び文 → margin 1.8em
  ============================================================ */
}
.page--insurance .insurance-disease {
  line-height: 1.8;
}
.page--insurance .insurance-disease > * + * {
  margin-top: 1.8em;
}
.page--insurance .insurance-disease__head > * + * {
  margin-top: 0;
}
.page--insurance .insurance-disease__title {
  color: var(--color-brand-primary);
  font-weight: 700;
}

/* ///////////////////////////////////////////
  _invisible.scss — 目立たない矯正治療（/orthodontics/invisible/）専用

  構成: pagetitle(eyebrow+h1) → 導入文 → 1.セラミックブラケット → 2.舌側矯正 → 3.マウスピース型 → 院長メッセージ → .case-category-nav
  背景: 薄青(導入) → 白(セラミック) → 薄青(舌側) → 白(マウスピース) → 薄青(院長メッセージ / pager)（白のみ --white）
  流用: .pagetitle(+__category) / .section-title(h2) / .section-stack / .subhead(+--brand) / .section-pad / .btn / .case-category-nav
  方針: implant / insurance と同方針（per-page スコープ。既存ページには非干渉）。

  余白対策（line-height 由来 gap）— 二重トリムと詳細度衝突を避けるための役割分担:
    - .invisible-block__body は「padding（subhead からの距離）」だけを持ち、trim はしない。
    - 本文の実体は必ず .invisible-text / .invisible-lead でラップし、そちら側が trim と行間を持つ
      （= トリムは1階層のみ。body と二重に掛けない）。
    - 段落グループ間の「空行（1行アキ）」は .invisible-text の `> * + *` margin 1.8em で再現。
    - 固定 auto-layout gap（24px）は __body--gap を flex+gap にして表現（margin ではなく gap なので
      子の trim margin と衝突しない＝CSS 値＝glyph 間距離に一致）。
/////////////////////////////////////////// */
.page--invisible .invisible-section {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--invisible .invisible-section {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--invisible .invisible-section {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--invisible .invisible-section {
    padding-block: 7vw;
  }
}
.page--invisible .invisible-section--white {
  background-color: var(--color-neutral-white);
}
.page--invisible {
  /* ============================================================
    本文テキストの基本ブロック
    - .invisible-text : 段落グループ間に空行(1.8em)。外縁 trim。
    - .invisible-lead : 単一段落 / 空行なしの連続行（タイト）。外縁 trim。
    - .invisible-cluster : .invisible-text 内のタイト・グループ（trim なし）。
  ============================================================ */
}
.page--invisible .invisible-text {
  color: var(--color-text-primary);
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
.page--invisible .invisible-text > * + * {
  margin-top: 1.8em;
}
.page--invisible .invisible-lead {
  color: var(--color-text-primary);
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
.page--invisible .invisible-cluster > * + * {
  margin-top: 0;
}
.page--invisible .invisible-label {
  font-weight: 700;
}
.page--invisible .invisible-label--brand {
  color: var(--color-brand-primary);
}
.page--invisible .invisible-term {
  color: var(--color-brand-primary);
}
.page--invisible {
  /* ============================================================
    ブロック（subhead + 本文）— 各治療法セクション共通
    subhead は 白セクション=.subhead--brand（薄青バー）/ 薄青セクション=.subhead（白バー）
  ============================================================ */
}
.page--invisible .invisible-block {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .page--invisible .invisible-block + .invisible-block {
    margin-top: 8px;
  }
}
.page--invisible .invisible-block__body {
  padding: 1.5em 1.25em 0;
}
@media only screen and (max-width: 768px) {
  .page--invisible .invisible-block__body {
    padding: 1.5em 0 0;
  }
}
.page--invisible .invisible-block__body--gap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
@media only screen and (max-width: 768px) {
  .page--invisible .invisible-block__body--gap {
    gap: 16px;
  }
}
.page--invisible .invisible-deflist {
  line-height: 1.8;
}
.page--invisible .invisible-deflist > dt {
  font-weight: 700;
}
.page--invisible .invisible-deflist > dd + dt {
  margin-top: 0.8em;
}
.page--invisible {
  /* ============================================================
    画像
    - .invisible-figure        : 全幅バナー（舌側セクション）
    - .invisible-figure--split : 左右2分割の組写真（セラミックセクション）。中央寄せ・gap 40。
  ============================================================ */
}
.page--invisible .invisible-figure {
  width: 100%;
}
.page--invisible .invisible-figure__img {
  width: 100%;
  height: auto;
  display: block;
}
.page--invisible .invisible-figure--split {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  max-width: 700px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
}
@media only screen and (max-width: 768px) {
  .page--invisible .invisible-figure--split {
    gap: 16px;
  }
}
.page--invisible .invisible-figure--split .invisible-figure__img {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.page--invisible .invisible-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.page--invisible {
  /* ============================================================
    院長メッセージの見出しグループ（eyebrow「院長メッセージ」+ h2「矯正専門医を選ぶべき理由」）
    Figma は1テキストboxの連続2行＝タイトに重ねる。h2 は共通 .section-title を流用。
  ============================================================ */
}
.page--invisible .invisible-eyebrow {
  margin: 0;
  color: var(--color-brand-primary);
  font-size: var(--fz24);
  line-height: 1.4;
  -webkit-margin-before: calc((1em - 1lh) / 2);
          margin-block-start: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--invisible .invisible-eyebrow {
    font-size: var(--fz20);
  }
}

/* ///////////////////////////////////////////
  _invisalign.scss — マウスピース型矯正装置（インビザライン®）（/orthodontics/invisalign/）専用

  構成: pagetitle(eyebrow+h1) → 導入文(+画像2枚) → 4つのメリット → 注意点と限界 → 選ばれる理由 → 注意事項(薬機法) → .case-category-nav
  背景: 薄青(導入) → 白(メリット) → 薄青(注意点) → 白(選ばれる理由) → 薄青(注意事項 / pager)（白のみ --white）
  流用: .pagetitle(+__category) / .section-title(h2) / .section-stack / .subhead(+--brand) / .section-pad / .case-category-nav
  方針: implant / insurance / invisible と同方針（per-page スコープ。既存ページには非干渉）。
        subhead は 白セクション=.subhead--brand（薄青バー）/ 薄青セクション=.subhead（白バー）。

  余白対策（line-height 由来 gap）:
    本ページは導入文下の画像2枚（.invisalign-figures）以外は図・リスト・ボタンが無く、本文は基本「単一段落」のため構成は最小。
    - .invisalign-block__body は padding（subhead からの距離）だけを持ち trim はしない。
    - 本文の実体は .invisalign-text が trim と行間を持つ（= トリムは1階層のみ）。
    - 導入文 / セクションリードも .invisalign-text を直接 <p> に付与し、section-stack の
      gap(40px) を glyph 基準の距離に一致させる。
/////////////////////////////////////////// */
.page--invisalign .invisalign-section {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--invisalign .invisalign-section {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--invisalign .invisalign-section {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--invisalign .invisalign-section {
    padding-block: 7vw;
  }
}
.page--invisalign .invisalign-section--white {
  background-color: var(--color-neutral-white);
}
.page--invisalign .invisalign-text {
  color: var(--color-text-primary);
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
.page--invisalign .invisalign-figures {
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 40px 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--invisalign .invisalign-figures {
    gap: 24px;
  }
}
@media only screen and (max-width: 768px) {
  .page--invisalign .invisalign-figures {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.page--invisalign .invisalign-figures__item {
  margin: 0;
}
.page--invisalign .invisalign-figures__img {
  display: block;
  width: 100%;
  height: auto;
}
.page--invisalign .invisalign-block {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .page--invisalign .invisalign-block + .invisalign-block {
    margin-top: 8px;
  }
}
.page--invisalign .invisalign-block__body {
  padding: 1.5em 1.25em 0;
}
@media only screen and (max-width: 768px) {
  .page--invisalign .invisalign-block__body {
    padding: 1.5em 0 0;
  }
}

/* ///////////////////////////////////////////
  _mtm.scss — 限局矯正（MTM）（/orthodontics/mtm/）専用

  構成: pagetitle(eyebrow+h1) → 導入文 → このようなお悩みの方へ → 補綴前矯正としての重要性 → 万能ではない注意 → 院長メッセージ → .case-category-nav
  背景: 薄青(導入) → 白(お悩み) → 薄青(補綴前矯正) → 白(万能ではない) → 薄青(院長メッセージ / pager)（白のみ --white）
  流用: .pagetitle(+__category) / .section-title(h2) / .section-stack / .section-pad / .case-category-nav
  方針: invisible / invisalign と同方針（per-page スコープ。既存ページには非干渉）。subhead ブロックは無く、各セクションは「h2 + 本文」のみ。

  余白対策（line-height 由来 gap）— invisible と同じ役割分担:
    - 本文は必ず .mtm-text でラップし、そちらが trim と行間 1.8 を持つ（トリムは1階層）。
    - 段落グループ間の「空行（1行アキ）」は .mtm-text の `> * + *` margin 1.8em で再現（補綴前矯正）。
    - 空行を挟まず連続する段落・段落→箇条書きは .mtm-cluster（margin 0）で密着（導入 / 万能ではない / 院長メッセージ）。
    - .mtm-bullets は親 .mtm-text から行間・色を継承し trim は持たない（外縁 trim は親が担当）。
/////////////////////////////////////////// */
.page--mtm .mtm-section {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--mtm .mtm-section {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--mtm .mtm-section {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--mtm .mtm-section {
    padding-block: 7vw;
  }
}
.page--mtm .mtm-section--white {
  background-color: var(--color-neutral-white);
}
.page--mtm .mtm-text {
  color: var(--color-text-primary);
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
.page--mtm .mtm-text > * + * {
  margin-top: 1.8em;
}
.page--mtm .mtm-cluster > * + * {
  margin-top: 0;
}
.page--mtm .mtm-bullets {
  padding-left: 1.5em;
}
.page--mtm .mtm-bullets > li {
  list-style: disc;
}
.page--mtm .mtm-term {
  color: var(--color-brand-primary);
}

/* ///////////////////////////////////////////
  _bridal.scss — 結婚式を考慮した矯正治療（/orthodontics/bridal/）専用

  構成: pagetitle(eyebrow+h1) → 導入(h2+画像+導入文) → 治療の進め方 → よくあるご質問(Q&A) → 専門医としての視点(eyebrow+h2) → .case-category-nav
  背景: 薄青(導入) → 白(進め方) → 薄青(Q&A) → 白(専門医視点 / pager は薄青)（白のみ --white）
  流用: .pagetitle(+__category) / .section-title(h2) / .section-stack / .subhead(+--brand) / .section-pad / .case-category-nav
  方針: invisible / invisalign / mtm と同方針（per-page スコープ。既存ページには非干渉）。
        subhead は 白セクション=.subhead--brand（薄青バー）/ 薄青セクション=.subhead（白バー）。

  余白対策（line-height 由来 gap）— invisible と同じ役割分担:
    - .bridal-block__body は padding（subhead からの距離）だけを持ち trim はしない。
    - 本文の実体は .bridal-text が trim と行間 1.8 を持つ（トリムは1階層）。
    - 段落グループ間の「空行（1行アキ）」は .bridal-text の `> * + *` margin 1.8em で再現（専門医視点）。
    - 空行を挟まず連続する2文は .bridal-cluster（margin 0）で密着（導入）。
    - Q&A の「答え + 補足説明」の固定 24px gap は __body--gap を flex+gap で表現（子の trim と非衝突）。
/////////////////////////////////////////// */
.page--bridal .bridal-section {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--bridal .bridal-section {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--bridal .bridal-section {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--bridal .bridal-section {
    padding-block: 7vw;
  }
}
.page--bridal .bridal-section--white {
  background-color: var(--color-neutral-white);
}
.page--bridal .bridal-figure {
  width: 100%;
}
.page--bridal .bridal-figure__img {
  display: block;
  width: 100%;
  height: auto;
}
.page--bridal .bridal-text {
  color: var(--color-text-primary);
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
.page--bridal .bridal-text > * + * {
  margin-top: 1.8em;
}
.page--bridal .bridal-cluster > * + * {
  margin-top: 0;
}
.page--bridal .bridal-answer {
  color: var(--color-brand-primary);
  font-weight: 700;
}
.page--bridal {
  /* ============================================================
    ブロック（subhead + 本文）— 進め方 / Q&A 共通
    subhead は 白セクション=.subhead--brand（薄青バー）/ 薄青セクション=.subhead（白バー）
  ============================================================ */
}
.page--bridal .bridal-block {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .page--bridal .bridal-block + .bridal-block {
    margin-top: 8px;
  }
}
.page--bridal .bridal-block__body {
  padding: 1.5em 1.25em 0;
}
@media only screen and (max-width: 768px) {
  .page--bridal .bridal-block__body {
    padding: 1.5em 0 0;
  }
}
.page--bridal .bridal-block__body--gap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
@media only screen and (max-width: 768px) {
  .page--bridal .bridal-block__body--gap {
    gap: 16px;
  }
}
.page--bridal {
  /* ============================================================
    専門医としての視点の見出しグループ（eyebrow「専門医としての視点」+ h2「計画的な治療中断の重要性」）
    Figma は1テキストboxの連続2行＝タイトに重ねる。h2 は共通 .section-title を流用。
  ============================================================ */
}
.page--bridal .bridal-eyebrow {
  margin: 0;
  color: var(--color-brand-primary);
  font-size: var(--fz24);
  line-height: 1.4;
  -webkit-margin-before: calc((1em - 1lh) / 2);
          margin-block-start: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--bridal .bridal-eyebrow {
    font-size: var(--fz20);
  }
}

/* ///////////////////////////////////////////
  _duration.scss — 治療期間を短くする工夫 / 痛みを小さくする工夫（/orthodontics/duration/）専用

  構成: pagetitle(eyebrow+h1)
        → セクション1 治療期間(薄青/main継承): h2 + 画像(.duration-figure) + リード + block×3(subhead + 本文/箇条書き)
        → セクション2 痛みへの配慮(白): h2 + リード + block×3(subhead + 本文)
        → セクション3 抜かない方針(薄青/main継承): h2 + 複数段落リード + block×3(subhead + 本文/h4/箇条書き)
        → .case-category-nav
  背景: 薄青(sec1) → 白(sec2) → 薄青(sec3) → 薄青(pager)（白のみ --white）
  流用: .pagetitle(+__category) / .section-title(h2) / .section-stack / .subhead(+--brand) / .section-pad / .case-category-nav
  方針: bridal / invisible / mtm と同方針（per-page スコープ。既存ページには非干渉）。
        subhead は 白セクション=.subhead--brand（薄青バー）/ 薄青セクション=.subhead（白バー）。

  余白対策（line-height 由来 gap）— bridal と同じ役割分担:
    - セクション内の縦 40px(SP 24px) gap は .section-stack の flex gap。
      各テキスト要素の facing edge を trim-leading で半リーディング除去することで、
      flex gap が「グリフ to グリフ / グリフ to subhead バー」で Figma の 40px に一致する
      （負の margin が半リーディングを相殺し、gap がグリフ基準で測られる）。
    - .duration-block__body は padding（subhead バー底からの距離 24px）だけを持ち trim はしない。
    - 本文の実体は .duration-text が trim と行間 1.8 を「1 階層だけ」担う。
    - 段落グループ間の「空行（1 行アキ）」は .duration-text の `> * + *` margin 1.8em で再現。
    - 空行を挟まず連続する要素（連続2文 / topic+本文 / 本文+箇条書き）は
      .duration-cluster（margin 0）で密着させ、Figma の「アキなし連続」を表現。
/////////////////////////////////////////// */
.page--duration .duration-section {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--duration .duration-section {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--duration .duration-section {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--duration .duration-section {
    padding-block: 7vw;
  }
}
.page--duration .duration-section--white {
  background-color: var(--color-neutral-white);
}
.page--duration .duration-figure {
  width: 100%;
  margin: 0;
}
.page--duration .duration-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.page--duration {
  /* ============================================================
    本文テキスト（リード / 各 body 内の流し込み）
    - line-height 1.8、外縁（先頭行の上・末尾行の下）を trim-leading で半リーディング除去。
      → .section-stack の flex gap / __body の padding がグリフ基準で効くようにする。
    - 直下の子要素（段落グループ）間は 1 行アキ（margin 1.8em）。
      Figma の「空段落で 1 行空ける」を margin で再現（空 <p> は使わずセマンティックに）。
  ============================================================ */
}
.page--duration .duration-text {
  color: var(--color-text-primary);
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
.page--duration .duration-text > * + * {
  margin-top: 1.8em;
}
.page--duration .duration-cluster > * + * {
  margin-top: 0;
}
.page--duration .duration-topic {
  color: var(--color-brand-primary);
  font-weight: 700;
  line-height: 1.8;
}
.page--duration .duration-bullets {
  margin-top: 1em;
  padding-left: 24px;
  list-style: disc;
}
@media only screen and (max-width: 768px) {
  .page--duration .duration-bullets {
    padding-left: 20px;
  }
}
.page--duration .duration-bullets > li {
  list-style: disc;
}
.page--duration .duration-bullets > li + li {
  margin-top: 0.4em;
}
.page--duration {
  /* ============================================================
    ブロック（subhead + 本文）
    subhead は HTML 側で 白セクション=.subhead--brand / 薄青セクション=.subhead を付与。
  ============================================================ */
}
.page--duration .duration-block {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .page--duration .duration-block + .duration-block {
    margin-top: 8px;
  }
}
.page--duration .duration-block__body {
  padding: 1.5em 1.25em 0;
}
@media only screen and (max-width: 768px) {
  .page--duration .duration-block__body {
    padding: 1.5em 0 0;
  }
}

/* ///////////////////////////////////////////
  _designed.scss — 設計された予知的な矯正治療（/orthodontics/designed/）専用

  構成: pagetitle(eyebrow+h1)
        → イントロ(薄青/main継承): h2(2行) + リード3段落(各間1行アキ)
        → 症例紹介(白): h2 + フルワイド口腔内写真 + リード + subhead ブロック×6
            ・1 CDS分析（図1 + 分析結果） … 図 + テキスト横並び（.designed-media）
            ・2 2つの治療戦略（Plan A | Plan B） … 2カラム（.designed-cols）
            ・3 実現可能性（密着2段落）
            ・4 側方予測図（図2 + 説明 → 破線区切り → 図3-1 | 図3-2 + 詳細）
            ・患者様が選ぶインフォームド・チョイス / 当院のこだわり
        → .case-category-nav
  背景: 薄青(intro) → 白(case) → 薄青(pager)（白セクションのみ --white）
  流用: .pagetitle(+__category) / .section-title(h2) / .section-stack / .subhead(--brand) / .section-pad / .case-category-nav
  方針: bridal / duration と同方針（per-page スコープ。既存ページ非干渉）。
        症例紹介は白セクションなので subhead は全て .subhead--brand（薄青バー）。

  余白対策（line-height 由来 gap）:
    - 縦 40px(SP24px) gap は .section-stack / .designed-block__body の flex gap。
      各テキストの facing edge を trim-leading で半リーディング除去し gap をグリフ基準化。
    - 本文実体は .designed-text が trim+行間1.8 を1階層担当。
      段落グループ間1行アキ=`> *+*` 1.8em、空行なし連続=.designed-cluster(margin0)。
    - 図・2カラム行と本文の間（Figma の Text Container gap 40px）は __body の flex gap で表現。

  画像: aspect-ratio は CSS で指定せず、width/height 属性（966×335 / 300×399＝Figma 領域サイズ）で
        比率を確定し `width:100%; height:auto` で表示（ユーザー指示）。JPEG は node+sharp で領域サイズに変換済み。
/////////////////////////////////////////// */
.page--designed .designed-section {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--designed .designed-section {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--designed .designed-section {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--designed .designed-section {
    padding-block: 7vw;
  }
}
.page--designed .designed-section--white {
  background-color: var(--color-neutral-white);
}
.page--designed {
  /* ===== 本文テキスト ===== */
}
.page--designed .designed-text {
  color: var(--color-text-primary);
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
.page--designed .designed-text > * + * {
  margin-top: 1.8em;
}
.page--designed .designed-cluster > * + * {
  margin-top: 0;
}
.page--designed .designed-bullets {
  padding-left: 24px;
  list-style: disc;
}
@media only screen and (max-width: 768px) {
  .page--designed .designed-bullets {
    padding-left: 20px;
  }
}
.page--designed .designed-bullets > li {
  list-style: disc;
}
.page--designed .designed-bullets > li + li {
  margin-top: 0.4em;
}
.page--designed {
  /* ===== 本文内の brand サブ見出し(h4) ===== */
}
.page--designed .designed-label {
  color: var(--color-brand-primary);
  font-size: var(--fz20);
  font-weight: 400;
  line-height: 1.4;
  margin-block: calc((1em - 1lh) / 2);
}
@media only screen and (max-width: 768px) {
  .page--designed .designed-label {
    font-size: var(--fz16);
  }
}
.page--designed .designed-topic {
  color: var(--color-brand-primary);
  font-weight: 700;
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
.page--designed {
  /* ===== 図（figure + figcaption） ===== */
}
.page--designed .designed-figure {
  width: 300px;
  max-width: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}
@media only screen and (max-width: 768px) {
  .page--designed .designed-figure {
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
  }
}
.page--designed .designed-figure--wide {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .page--designed .designed-figure--wide {
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
  }
}
.page--designed .designed-figure__img {
  display: block;
  width: 100%;
  height: auto;
}
.page--designed .designed-figure__caption {
  color: var(--color-text-primary);
  text-align: center;
  line-height: 1.8;
  margin-block: calc((1em - 1lh) / 2);
}
.page--designed {
  /* ===== ブロック（subhead + 本文） ===== */
}
.page--designed .designed-block {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .page--designed .designed-block + .designed-block {
    margin-top: 8px;
  }
}
.page--designed .designed-block__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
  padding: 1.5em 1.25em 0;
}
@media only screen and (max-width: 768px) {
  .page--designed .designed-block__body {
    gap: 24px;
    padding: 1.5em 0 0;
  }
}
.page--designed {
  /* ===== 図 + テキストの横並び（図1+分析結果 / 図2+説明） ===== */
}
.page--designed .designed-media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 80px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--designed .designed-media {
    gap: 40px;
  }
}
@media only screen and (max-width: 768px) {
  .page--designed .designed-media {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 24px;
  }
}
.page--designed .designed-media--center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 768px) {
  .page--designed .designed-media--center {
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
}
.page--designed .designed-media__text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
.page--designed {
  /* ===== Plan A / Plan B の2カラム ===== */
}
.page--designed .designed-cols {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media only screen and (max-width: 768px) {
  .page--designed .designed-cols {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24px;
  }
}
.page--designed .designed-cols__col {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
.page--designed {
  /* ===== 破線区切りの追加情報（図3-1/3-2 + 詳細） ===== */
}
.page--designed .designed-extra {
  border-top: 1px dashed var(--color-brand-primary);
  padding-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 768px) {
  .page--designed .designed-extra {
    padding-top: 24px;
    gap: 24px;
  }
}
.page--designed .designed-extra__info {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
.page--designed .designed-figpair {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 80px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--designed .designed-figpair {
    gap: 40px;
  }
}
@media only screen and (max-width: 768px) {
  .page--designed .designed-figpair {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 24px;
  }
}

/* ///////////////////////////////////////////
  _404.scss
  404 エラーページ専用スタイル（WordPress: 404.php / `.page--404`）

  構成（DOM 出現順）:
    1. .pagetitle      共通モジュールの青帯（h1「ページが見つかりません」）。流用のみで未上書き。
    2. .error-404      本文セクション（薄青・main 継承）
         - .error-404__inner  中央寄せの縦積みコンテナ（読みやすい 640px キャップ）
             - .error-404__lead    エラー説明文
             - .error-404__action  トップへ戻るボタン（共通 .btn）
             - .error-404__links   主要ページへのクイックリンク（自己復帰の導線 / UX §7 404-handling）

  方針:
    - 全スタイルは .page--404 スコープ内に閉じる
    - 縦余白は下層共通の section-padding（PC80 / TAB50 / SP7vw）に統一し、他ページと体裁を揃える
    - 404 は中央寄せが定石。本文・ボタン・リンクをセンタリングして間延びを防ぐ
/////////////////////////////////////////// */
.page--404 {
  /* 本文セクション。左右 padding は HTML 側の .section-pad に委譲、縦は共通 mixin で付与。 */
}
.page--404 .error-404 {
  width: 100%;
}
@media print, screen and (min-width: 1020px) {
  .page--404 .error-404 {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1019px) {
  .page--404 .error-404 {
    padding-block: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--404 .error-404 {
    padding-block: 7vw;
  }
}
.page--404 {
  /* 中央寄せの縦積みコンテナ。テキスト行長を抑えるため 640px でキャップして中央配置。 */
}
.page--404 .error-404__inner {
  max-width: 640px;
  margin-inline: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  gap: 32px;
}
@media only screen and (max-width: 768px) {
  .page--404 .error-404__inner {
    gap: 24px;
  }
}
.page--404 {
  /* エラー説明文（本文サイズは body 継承＝PC16 / SP14、行間は本文用に 1.8）。 */
}
.page--404 .error-404__lead {
  margin: 0;
  line-height: 1.8;
  color: var(--color-text-primary);
}
.page--404 {
  /* ボタンラッパ（共通 .btn を内包）。p のデフォルトマージンを除去。 */
}
.page--404 .error-404__action {
  margin: 0;
}
.page--404 {
  /* 主要ページへのクイックリンク行。折り返し可・中央寄せ。 */
}
.page--404 .error-404__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px 32px;
}
.page--404 .error-404__list a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 44px;
  color: var(--color-brand-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}