@charset "UTF-8";
/* =====================================================================
   common.css ─ 全ページ共通スタイル
   名古屋医療センター サイトリニューアル
   ---------------------------------------------------------------------
   ここに入れるもの：カラートークン／ヘッダー／グローバルナビ／
                     ドロワー／パンくず／フッター／共通ユーティリティ
   ここに入れないもの：TOPページ固有・部門ページ固有・診療科ページ固有
                     （それぞれ top.css / clinic.css / department.css へ）
   ---------------------------------------------------------------------
   読み込み順： common.css → 各ページ種別CSS
   ===================================================================== */


/* ═══════════════════════════════════════
   1. RESET & DESIGN TOKENS
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: clip; }

:root {
  /* ── ブランドカラー（確定版：NMCロゴカラー #1DA58F 基調／2026.9 決定） ── */
  --blue:    #1DA58F;   /* 主色：ロゴ・CTA・アクセント */
  --blue-d:  #028090;   /* 濃：hover */
  --blue-m:  #00A896;   /* 中：見出し強調・アイコン */
  --blue-l:  #A8DED3;   /* 淡：罫・装飾ライン */
  --blue-bg: #E9F7F4;   /* 極淡：バッジ背景 */
  --teal:    #4FC3AE;   /* 副色：グラデーション始点・再診ラベル */

  /* ── ニュートラル ── */
  --ink:     #1F2429;   /* 見出し・本文 */
  --ink-2:   #4A5158;   /* 本文（やや薄） */
  --gray:    #6B7280;   /* 補助テキスト */
  --gray-l:  #9AA1A9;   /* 英字サブラベル */
  --line:    #E4E7EB;   /* 罫線 */
  --chip:    #F1F2F4;   /* チップ・淡い面 */
  --bg-gray: #F3F4F6;   /* セクション背景（グレー） */
  --bg-warm: #F4F3F0;   /* セクション背景（ウォーム） */

  /* ── セクション配色（テーマ差分） ── */
  --band-1:  #E3F4F0;   /* FV下グラデーション帯 左 */
  --band-2:  #F3FAF8;
  --band-4:  #F1FAF6;
  --band-5:  #E5F7EE;   /* 同 右 */
  --grad-a:  #4FC3AE;   /* グラデーションボタン 始点 */
  --grad-b:  #028090;   /* 同 終点 */
  --emph-shadow: rgba(29,165,143,.14);   /* 強調カードの影 */

  /* お知らせバッジ */
  --badge-imp-bg:  #FCE6EA;  --badge-imp-fg:  #C2415F;
  --badge-norm-bg: #DFF1EC;  --badge-norm-fg: #1B8272;
  --badge-rec-bg:  #E2F0F3;  --badge-rec-fg:  #2A7C8B;

  /* 採用セクション */
  --recruit-base:   #9CBDB6;            /* 写真未配置時の下地 */
  --recruit-veil-1: rgba(4,70,80,.62); /* 写真に重ねる幕 左 */
  --recruit-veil-2: rgba(4,70,80,.36);
  --recruit-veil-3: rgba(4,70,80,.18); /* 同 右 */

  /* 受付時間ラベル */
  --rcp-first: #1DA58F;
  --rcp-re:    #028090;

  /* ── 旧NMCトークン（部門・診療科ページが参照中。統一時に整理） ── */
  --main:    #1da58f;
  --sub1:    #00a896;
  --sub2:    #028090;
  --light:   #f0f9f8;
  --dark:    #052026;
  --util-bg: #044650;
  --accent:  #1DA58F;
  --navy:    #1F2429;
  --label:   #1F2429;
  --lgray:   #F3F4F6;
  --border:  #E4E7EB;
  --wf-dkk:  #6B7280;
  --wf-dk:   #9AA1A9;
  --shadow:  0 1px 3px rgba(31,36,41,.06), 0 6px 20px rgba(31,36,41,.06);

  /* ── レイアウト ── */
  --header-h: 92px;                    /* ヘッダーの高さ（未スクロール時） */
  --header-h-min: 74px;                /* ヘッダーの高さ（スクロールで縮んだ後） */
  --stick-top: 92px;                   /* スティッキー要素のオフセット。
                                          ヘッダーの伸縮に合わせて
                                          common.js が実測値で上書きする */
  --px:      clamp(20px, 4vw, 64px);   /* 左右の基本余白 */
  --inner:   1556px;                   /* 枠幅（左右padding込み。内容幅 約1430px） */

  /* ── 書体 ── 見出しは Noto Serif JP（Google Fonts・商用利用可） */
  --font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-sans:  'Noto Sans JP', 'Hiragino Sans', sans-serif;
}

body {
  overflow-x: clip;
  font-family: var(--font-sans);
  font-size: 1rem; font-weight: 400;
  color: var(--ink); background: #fff;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .02em; line-height: 1.8;
}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; }

/* 内側コンテナ（全セクション共通の横幅制御） */
.inner {
  max-width: var(--inner);
  margin-inline: auto;
  padding-inline: var(--px);
}

/* アイコンのグラデーション色（ページ側で --icon-1 / --icon-2 を上書き可能） */
.grad-stop-1 { stop-color: var(--icon-1, #028090); }
.grad-stop-2 { stop-color: var(--icon-2, #4FC3AE); }

/* SVGスプライト格納用（画面には出さない）
   display:none にすると <use> からのグラデーション参照が解決されないため、
   サイズ0＋absolute で隠す */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ═══════════════════════════════════════
   2. HEADER（全ページ共通）
   ─ 白背景・1段組。更新はこのファイルのみでOK
═══════════════════════════════════════ */
#siteHeader {
  position: sticky; top: 0; z-index: 200;
  background: #fff;
  border-bottom: 2px solid var(--blue);   /* グローバルナビ下のブランドカラーライン */
  transition: box-shadow .2s ease;
}
#siteHeader.scrolled { box-shadow: 0 2px 14px rgba(31,36,41,.08); }

.hdr-main {
  width: 100%;
  padding: 0 clamp(18px, 2.6vw, 46px);
  height: var(--header-h);
  display: flex; align-items: center;
  gap: clamp(.8rem, 2vw, 2rem);
  transition: height .2s ease;
}
#siteHeader.scrolled .hdr-main { height: var(--header-h-min); }

/* ── ロゴ（マーク画像＋文字組はテキスト）── */
.logo-wrap { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.logo-mark {
  height: 46px; width: auto; flex-shrink: 0;
  transition: height .2s ease;
}
#siteHeader.scrolled .logo-mark { height: 38px; }
.logo-org  { display: block; font-size: .68rem; font-weight: 700; color: var(--ink); letter-spacing: .01em; line-height: 1.3; }
.logo-name {
  display: block;
  font-size: 1.28rem; font-weight: 700;
  color: var(--ink); letter-spacing: .02em; line-height: 1.25;
  transition: font-size .2s ease;
}
#siteHeader.scrolled .logo-name { font-size: 1.12rem; }
.logo-en {
  display: block;
  font-size: .58rem; font-weight: 700; color: var(--blue);
  letter-spacing: .04em; line-height: 1.4;
}

/* ── グローバルナビ ── */
.gnav { display: flex; margin-left: auto; align-items: stretch; }
.gn {
  display: flex; align-items: center;
  padding: .4rem clamp(.55rem, 1.1vw, 1.15rem);
  font-size: .88rem; font-weight: 400;
  color: var(--ink); white-space: nowrap;
  border-left: 1px solid var(--line);
  letter-spacing: .04em;
  transition: color .15s, background .15s;
}
.gn:last-of-type { border-right: 1px solid var(--line); }
.gn:hover { color: var(--blue); background: var(--blue-bg); }
.gn.gn-cur { color: var(--blue); font-weight: 500; }

/* ── 右側アイコンボタン ── */
.hdr-icons { display: flex; flex-shrink: 0; gap: clamp(.4rem, 1.2vw, 1.1rem); }
.hdr-icon {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .18rem;
  padding: .3rem .35rem; min-width: 3.2rem;
  color: var(--blue-m); font-size: .58rem; letter-spacing: .02em;
  border-radius: 6px; transition: background .15s, color .15s;
}
.hdr-icon svg { width: 1.35rem; height: 1.35rem; }
.hdr-icon:hover { background: var(--blue-bg); color: var(--blue); }

/* ── 採用情報だけは横長・青系にして存在感を出す（病院ご要望）──
   ほかの2つ（お問い合わせ・アクセス）はアイコン＋小さな文字の縦組みのまま */
.hdr-icon.is-recruit {
  flex-direction: row; gap: .5rem;
  min-width: 0; padding: .55rem 1.1rem;
  border-radius: 2rem;
  background: #1A62D2; color: #fff;
  font-size: .78rem; font-weight: 500; letter-spacing: .06em;
  box-shadow: 0 1px 3px rgba(26,98,210,.25), 0 6px 16px rgba(26,98,210,.22);
  transition: background .2s, box-shadow .2s, transform .2s;
}
.hdr-icon.is-recruit svg { width: 1.15rem; height: 1.15rem; stroke: #fff; }
.hdr-icon.is-recruit span { white-space: nowrap; }
.hdr-icon.is-recruit::after {
  content: ''; width: 5px; height: 5px; flex-shrink: 0; margin-left: .15rem;
  border-top: 1.2px solid rgba(255,255,255,.9); border-right: 1.2px solid rgba(255,255,255,.9);
  transform: rotate(45deg);
}
.hdr-icon.is-recruit:hover {
  background: #114FAF; color: #fff;
  box-shadow: 0 2px 6px rgba(26,98,210,.3), 0 10px 22px rgba(26,98,210,.28);
}
/* ヘッダーが縮んだときは少しコンパクトに */
#siteHeader.scrolled .hdr-icon.is-recruit { padding: .45rem .95rem; font-size: .74rem; }

/* ── ハンバーガー（PC・SP 共通で常時表示）── */
.menu-btn {
  display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 6px;
  width: 2.6rem; height: 2.6rem; flex-shrink: 0;
  margin-left: clamp(.3rem, 1vw, .9rem);
  padding-left: clamp(.4rem, 1.2vw, 1rem);
  border-left: 1px solid var(--line);
  cursor: pointer; background: none; border-top: 0; border-right: 0; border-bottom: 0;
  border-radius: 0;
}
.menu-btn span {
  display: block; width: 22px; height: 1.5px;
  background: var(--ink); border-radius: 1px;
  transition: transform .25s ease, opacity .2s ease;
}
.menu-btn:hover span { background: var(--blue); }
.menu-btn.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity: 0; }
.menu-btn.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }


/* ═══════════════════════════════════════
   2a. 緊急お知らせ帯（全ページ共通）
   ─ ヘッダーの内側・グローバルナビの上に入れる。
     スティッキーヘッダーごと画面上部に残るため、
     スクロールしても帯は見えたままになる。
   ─ 運用：/inc/emergency.html を全ページでSSIインクルードし、
     平常時はファイルの中身を空にしておく。掲載・解除は
     この1ファイルの差し替えだけで全ページに反映される。
   ─ Lv.1（注意・黄）＝閉じられる／Lv.2（緊急・赤）＝閉じられない
═══════════════════════════════════════ */
.emg-bar { width: 100%; }
.emg-inner {
  max-width: var(--inner); margin-inline: auto;
  padding: .7rem clamp(18px, 2.6vw, 46px);
  display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.1rem);
}
.emg-icon { width: 20px; height: 20px; flex-shrink: 0; }
.emg-label {
  flex-shrink: 0; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; padding: .2rem .7rem; border-radius: 2rem;
}
.emg-text {
  flex: 1; min-width: 0;
  font-size: .82rem; line-height: 1.65; letter-spacing: .02em;
}
.emg-text time { font-variant-numeric: tabular-nums; margin-right: .6rem; opacity: .85; }
.emg-link {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .04em;
  padding: .4rem 1rem; border-radius: 2rem; border: 1px solid currentColor;
  transition: background .2s, color .2s;
}
.emg-link::after {
  content: ''; width: 5px; height: 5px;
  border-top: 1.2px solid currentColor; border-right: 1.2px solid currentColor;
  transform: rotate(45deg);
}
.emg-close {
  flex-shrink: 0; width: 26px; height: 26px; border: 0; cursor: pointer;
  background: none; color: inherit; opacity: .7; position: relative;
}
.emg-close:hover { opacity: 1; }
.emg-close::before, .emg-close::after {
  content: ''; position: absolute; left: 6px; top: 12px; width: 14px; height: 1.4px;
  background: currentColor;
}
.emg-close::before { transform: rotate(45deg); }
.emg-close::after  { transform: rotate(-45deg); }

/* ── Lv.2 緊急（赤）── */
.emg-bar.emg-lv2 { background: #B8344A; color: #fff; }
.emg-lv2 .emg-label { background: rgba(255,255,255,.18); color: #fff; }
.emg-lv2 .emg-link:hover { background: #fff; color: #B8344A; }
.emg-lv2 .emg-icon { stroke: #fff; }

/* ── Lv.1 注意（黄）── */
.emg-bar.emg-lv1 { background: #FDF3DA; color: #6B4A05; border-bottom: 1px solid #F0DFB4; }
.emg-lv1 .emg-label { background: #F5C761; color: #4A3200; }
.emg-lv1 .emg-link:hover { background: #6B4A05; color: #FDF3DA; }
.emg-lv1 .emg-icon { stroke: #A8760B; }

/* ── TOPのメインビジュアル上に出す緊急パネル（Lv.2のみ）── */
.emg-panel { background: #FBEEF0; border-bottom: 1px solid #F2D3D9; }
.emg-panel-inner {
  max-width: var(--inner); margin-inline: auto;
  padding: clamp(1.4rem, 2.6vw, 2.2rem) var(--px);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 2.5vw, 2.4rem); flex-wrap: wrap;
}
.emg-panel-date { font-size: .72rem; color: #9A4455; letter-spacing: .08em; margin-bottom: .5rem; }
.emg-panel-title {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.9vw, 1.5rem); font-weight: 500;
  color: #8E2437; letter-spacing: .08em; line-height: 1.6; margin-bottom: .6rem;
}
.emg-panel-body { font-size: .82rem; color: var(--ink-2); line-height: 1.95; letter-spacing: .02em; }
.emg-panel-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 1.2rem;
  min-width: 13rem; padding: .95rem 1.6rem;
  background: #B8344A; border-radius: 3rem;
  font-size: .84rem; font-weight: 500; color: #fff; letter-spacing: .08em;
  transition: background .2s;
}
.emg-panel-btn::after {
  content: ''; width: 5px; height: 5px;
  border-top: 1.2px solid rgba(255,255,255,.85); border-right: 1.2px solid rgba(255,255,255,.85);
  transform: rotate(45deg);
}
.emg-panel-btn:hover { background: #992A3C; }

@media (max-width: 860px) {
  /* 帯が画面を占有しすぎないよう、SPではボタンを文中リンクに落とす */
  .emg-inner { flex-wrap: wrap; padding: .55rem 18px .6rem; gap: .3rem .6rem; }
  .emg-icon { width: 17px; height: 17px; }
  .emg-label { font-size: .68rem; padding: .15rem .6rem; }
  .emg-text { flex-basis: 100%; order: 3; font-size: .76rem; line-height: 1.6; }
  .emg-link {
    order: 4; font-size: .74rem; padding: 0; border: 0;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .emg-link:hover { background: none; }
  .emg-lv2 .emg-link:hover { color: #fff; }
  .emg-lv1 .emg-link:hover { color: #6B4A05; }
  .emg-close { order: 2; margin-left: auto; width: 22px; height: 22px; }
  .emg-close::before, .emg-close::after { left: 4px; top: 10px; width: 13px; }
}


/* ═══════════════════════════════════════
   2b. ドロワーメニュー（PC・SP 共通）
═══════════════════════════════════════ */
.drawer-veil {
  position: fixed; inset: 0; z-index: 240;
  background: rgba(31,36,41,.42);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.drawer-veil.open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; z-index: 250;
  width: min(420px, 88vw); height: 100dvh;
  background: #fff;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.4rem 1.6rem 3rem;
  box-shadow: -8px 0 32px rgba(31,36,41,.12);
}
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer:not(.open) { visibility: hidden; }

.drawer-head { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.drawer-close {
  width: 2.4rem; height: 2.4rem; border: 0; background: none; cursor: pointer;
  position: relative; border-radius: 6px; color: var(--ink);
}
.drawer-close::before, .drawer-close::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 20px; height: 1.5px; background: currentColor;
}
.drawer-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.drawer-close::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.drawer-close:hover { background: var(--chip); color: var(--blue); }

.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem .2rem; font-size: 1rem; letter-spacing: .04em;
  border-bottom: 1px solid var(--line);
  transition: color .15s, padding-left .15s;
}
.drawer-nav a::after {
  content: ''; width: 7px; height: 7px; flex-shrink: 0;
  border-top: 1.5px solid var(--gray-l); border-right: 1.5px solid var(--gray-l);
  transform: rotate(45deg);
}
.drawer-nav a:hover { color: var(--blue); padding-left: .6rem; }
.drawer-nav a:hover::after { border-color: var(--blue); }

/* ドロワー内の主要ボタン（採用情報・アクセス・お問い合わせ）
   ヘッダー右のアイコンはSPで隠れるため、同じ導線をここにも置きます */
.drawer-act { margin: 1.4rem 0 .2rem; }
.drawer-act .da-main {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  height: 52px; border-radius: 2rem;
  background: #1A62D2; color: #fff;
  font-size: .92rem; font-weight: 500; letter-spacing: .04em;
  box-shadow: 0 6px 16px rgba(26,98,210,.22);
}
.drawer-act .da-main::after {
  content: ''; width: 7px; height: 7px;
  border-top: 1.6px solid #fff; border-right: 1.6px solid #fff;
  transform: rotate(45deg); margin-left: .1rem;
}
.drawer-act .da-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .6rem; }
.drawer-act .da-sub {
  display: flex; align-items: center; justify-content: center;
  height: 46px; border-radius: 2rem;
  border: 1px solid var(--blue-l); background: #fff; color: var(--blue-d);
  font-size: .82rem; letter-spacing: .03em;
}
.drawer-act .da-sub:hover { background: var(--blue-bg); }

.drawer-sub {
  display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1rem;
  margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.drawer-sub a { font-size: .8rem; color: var(--gray); padding: .45rem 0; }
.drawer-sub a:hover { color: var(--blue); }

.drawer-tel {
  margin-top: 1.6rem; padding: 1rem 1.2rem;
  background: var(--bg-gray); border-radius: 10px;
}
.drawer-tel-lbl { font-size: .68rem; color: var(--gray); letter-spacing: .06em; }
.drawer-tel-num { font-size: 1.3rem; font-weight: 700; color: var(--blue); letter-spacing: .03em; }
.drawer-tel-note { font-size: .68rem; color: var(--gray); }

body.drawer-open { overflow: hidden; }


/* ═══════════════════════════════════════
   3. パンくず
═══════════════════════════════════════ */
.breadcrumb-wrap {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: .6rem var(--px);
}
.breadcrumb {
  max-width: var(--inner); margin: 0 auto;
  display: flex; align-items: center; gap: .45rem;
  font-size: .72rem; color: var(--gray);
  letter-spacing: .03em; flex-wrap: wrap;
}
.breadcrumb a { color: var(--gray); text-decoration: none; transition: color .15s; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .bc-sep { color: var(--gray-l); }


/* ═══════════════════════════════════════
   4. FOOTER（全ページ共通）
   ─ 白背景・軽量。更新はこのファイルのみでOK
═══════════════════════════════════════ */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--line);
  padding: clamp(2.6rem, 5vw, 4.2rem) 0 1.6rem;
}
.footer-inner {
  max-width: var(--inner); margin-inline: auto;
  padding-inline: var(--px);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2.1fr;
  gap: clamp(2rem, 5vw, 4rem);
}

.fc-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.6rem; }
.fc-brand .logo-mark { height: 50px; width: auto; }
.fc-org  { display: block; font-size: .68rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.fc-name { display: block; font-size: 1.16rem; font-weight: 700; color: var(--ink); letter-spacing: .02em; line-height: 1.25; }
.fc-en   { display: block; font-size: .56rem; font-weight: 700; color: var(--blue); letter-spacing: .04em; }
.fc-addr { font-size: .8rem; color: var(--ink-2); line-height: 1.9; margin-bottom: .7rem; }
.fc-tel  { font-size: .8rem; color: var(--ink-2); line-height: 2; }
.fc-tel b { display: inline-block; width: 2.6rem; font-size: .68rem; font-weight: 400; color: var(--gray); }

.fnav {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1.4rem clamp(1rem, 2.5vw, 2.4rem);
}
.fc-col-title {
  font-size: .78rem; font-weight: 500; color: var(--ink);
  letter-spacing: .04em; margin-bottom: 1.1rem;
}
.fc-link {
  display: block; font-size: .78rem; color: var(--ink-2);
  padding: .3rem 0; transition: color .12s;
}
.fc-link:hover { color: var(--blue); }

/* フッター最下部の共通リンク（サイトマップ・情報公開・個人情報保護方針） */
.footer-util {
  max-width: var(--inner); margin: clamp(2rem, 4vw, 3.4rem) auto 0;
  padding: 0 var(--px);
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem;
}
.footer-util a {
  font-size: .74rem; color: var(--ink-2); letter-spacing: .03em;
  transition: color .12s;
}
.footer-util a:hover { color: var(--blue); }

.footer-btm {
  max-width: var(--inner); margin: 1.2rem auto 0;
  padding: 1.2rem var(--px) 0;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .66rem; color: var(--gray-l); letter-spacing: .03em;
}

@media (max-width: 1000px) {
  .footer-inner { grid-template-columns: 1fr; }
  .fnav { grid-template-columns: repeat(2, 1fr); }
}
/* スマホではフッターのメニューを隠します（縦に長くなりすぎるため）。
   サイトマップへの導線は、下の .footer-util とドロワーから入れます。 */
@media (max-width: 768px) {
  .fnav { display: none; }
  .footer-util { margin-top: clamp(1.4rem, 4vw, 2rem); }
}


/* ═══════════════════════════════════════
   5. 共通ユーティリティ
═══════════════════════════════════════ */
/* ワイヤーフレーム用の注釈ラベル（公開時に削除可） */
.wf-note {
  display: inline-block;
  background: #FEF3C7; color: #78350F;
  font-size: .62rem; font-weight: 700;
  padding: .12rem .45rem; border-radius: 3px;
  margin-left: .35rem; vertical-align: middle;
  font-family: 'JetBrains Mono', monospace; letter-spacing: .04em;
}
/* 画像プレースホルダー */
.wf-ph {
  background: var(--lgray);
  border: 1.5px dashed var(--wf-dk);
  border-radius: 8px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .4rem; color: var(--wf-dkk);
  font-size: .78rem; text-align: center; line-height: 1.6; padding: 1rem;
}
/* 電話番号は視認性の高い等幅フォントで統一（WG3決定） */
.tel-num, .rc-tel, .side-info-tel, .fc-tel {
  font-family: 'Source Code Pro', monospace;
  letter-spacing: .02em;
}
/* スクリーンリーダー用 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* ═══════════════════════════════════════
   5b. 共通UIパーツ
   ─ TOP・部門ページで共有する見出し／ボタン／丸矢印など
     （もとは top.css にあったものを共通化）
═══════════════════════════════════════ */

.sec-title-lg {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.7vw, 2.25rem);
  font-weight: 500; color: var(--ink);
  letter-spacing: .12em; line-height: 1.55;
}
.sec-lead {
  font-size: .84rem; color: var(--ink-2);
  line-height: 2.1; letter-spacing: .03em;
}
/* 英字サブラベル（Ambulatory 等） */
.en-sub {
  display: block;
  font-size: .62rem; font-weight: 400; color: var(--gray-l);
  letter-spacing: .06em; line-height: 1.4;
}

/* ── 丸矢印（CSSのみ・画像不使用）── */
.c-arrow {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1px solid #C9CED4; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s;
}
.c-arrow::before {
  content: ''; width: 5px; height: 5px;
  margin-left: -2px;
  border-top: 1.2px solid var(--gray); border-right: 1.2px solid var(--gray);
  transform: rotate(45deg); transition: border-color .2s;
}
.c-arrow.sm { width: 18px; height: 18px; }
.c-arrow.sm::before { width: 4px; height: 4px; }

/* ── ボタン ──
   画像付き角丸カードは hover でわずかに拡大、
   その他のボタンは薄く色がつく程度に留める（デザイン指定）        */
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 1.4rem; min-width: 11.2rem;
  padding: .95rem 1.6rem;
  background: #fff; border: 1px solid var(--blue-l); border-radius: 3rem;
  font-size: .84rem; letter-spacing: .08em; color: var(--ink);
  transition: background .2s, border-color .2s, color .2s;
}
.btn-pill::after {
  content: ''; width: 5px; height: 5px;
  border-top: 1.2px solid var(--gray); border-right: 1.2px solid var(--gray);
  transform: rotate(45deg); transition: border-color .2s;
}
.btn-pill:hover { background: var(--blue-bg); border-color: var(--blue-m); color: var(--blue); }
.btn-pill:hover::after { border-color: var(--blue); }

.btn-blue {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 2.6rem;
  background: var(--blue); border-radius: 3rem;
  font-size: .92rem; font-weight: 500; color: #fff; letter-spacing: .08em;
  transition: background .2s;
}
.btn-blue:hover { background: var(--blue-d); }

.btn-grad {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 1.4rem; min-width: 11.2rem;
  padding: .95rem 1.6rem;
  background: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 100%);
  border-radius: 3rem; border: 1px solid transparent;
  font-size: .84rem; font-weight: 500; color: #fff; letter-spacing: .08em;
  transition: filter .2s;
}
.btn-grad::after {
  content: ''; width: 5px; height: 5px;
  border-top: 1.2px solid rgba(255,255,255,.85); border-right: 1.2px solid rgba(255,255,255,.85);
  transform: rotate(45deg);
}
.btn-grad:hover { filter: brightness(1.08); }

/* ── 画像プレースホルダー（写真差し替え前）── */


.grad-band {
  background:
    linear-gradient(112deg, var(--band-1) 0%, var(--band-2) 30%, #FFFFFF 52%, var(--band-4) 78%, var(--band-5) 100%);
}


/* ═══════════════════════════════════════
   6. 標準下層ページ
   ─ 新デザインへ移行済み：page.css（＋ clinic.css の共通骨格）を参照
═══════════════════════════════════════ */


/* ═══════════════════════════════════════
   7. レスポンシブ（ヘッダー）
   ─ ハンバーガーはPC・SPとも常時表示のまま
═══════════════════════════════════════ */
/* ノートPC幅（およそ1240〜1500px）では、ロゴ・ナビ・アイコンが並びきらず
   ハンバーガーが画面外へ押し出されてしまうため、間隔と文字サイズを詰めます。 */
@media (max-width: 1500px) {
  .hdr-main { gap: clamp(.45rem, 1vw, 1rem); padding: 0 clamp(16px, 1.6vw, 28px); }
  .gn { padding: .4rem .46rem; font-size: .78rem; letter-spacing: .02em; }
  .hdr-icons { gap: .45rem; }
  .hdr-icon { min-width: 2.4rem; }
  .hdr-icon.is-recruit { padding: .45rem .8rem; font-size: .72rem; }
  .hdr-icon.is-recruit::after { display: none; }
  .menu-btn { margin-left: .4rem; padding-left: .5rem; }
  .logo-en { font-size: .5rem; }
}
@media (max-width: 1280px) {
  .hdr-icon.is-recruit { padding: .5rem .85rem; font-size: .72rem; }
  .hdr-icon.is-recruit::after { display: none; }
  .gn { padding: .4rem .6rem; font-size: .8rem; }
  .hdr-icon { min-width: 2.6rem; }
  .hdr-main { gap: clamp(.5rem, 1.2vw, 1rem); }
}
/* 採用ボタンのぶんナビが窮屈になる帯域では、ナビを先にドロワーへ送る */
@media (max-width: 1260px) {
  .gnav { display: none; }
  .hdr-icons { margin-left: auto; }
}
@media (max-width: 1100px) {
  .gnav { display: none; }          /* ナビはドロワーへ集約 */
  .hdr-icons { margin-left: auto; }
}
@media (max-width: 768px) {
  :root { --header-h: 68px; --header-h-min: 56px; --stick-top: 68px; }
  .logo-mark { height: 34px; }
  .logo-org  { font-size: .56rem; }
  .logo-name { font-size: 1rem; }
  .logo-en   { display: none; }
  /* スマホでは「お問い合わせ」「アクセス」のアイコンを隠し、
     採用情報ボタンとハンバーガーだけにします（横幅が足りずはみ出すため）。
     隠した2つはドロワー内の「アクセス」「お問い合わせ」から入れます。 */
  .hdr-icon:not(.is-recruit) { display: none; }
  .hdr-icon span { display: none; }
  .hdr-icon { min-width: 2.2rem; }
  /* 採用情報はSPでも文字を残す（存在感を保つ） */
  .hdr-icon.is-recruit { min-width: 0; padding: .42rem .7rem; font-size: .66rem; gap: .35rem; }
  .hdr-icon.is-recruit span { display: inline; }
  .hdr-icon.is-recruit svg { width: 1rem; height: 1rem; }
  .hdr-icon.is-recruit::after { display: none; }
}
/* 小さめのスマホ（iPhone SE など）でも収まるよう、ロゴと採用ボタンをさらに詰めます */
@media (max-width: 400px) {
  .hdr-main { gap: .5rem; padding: 0 14px; }
  .logo-mark { height: 30px; }
  .logo-org  { font-size: .5rem; }
  .logo-name { font-size: .92rem; letter-spacing: 0; }
  .hdr-icon.is-recruit { padding: .4rem .6rem; font-size: .62rem; gap: .28rem; }
  .menu-btn { margin-left: .2rem; padding-left: .45rem; }
}


/* ═══════════════════════════════════════
   8. アクセシビリティ
═══════════════════════════════════════ */
a:focus-visible, .gn:focus-visible, .menu-btn:focus-visible,
.tab-btn:focus-visible, button:focus-visible {
  outline: 2px solid var(--sub2); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}