@charset "UTF-8";
/* =========================================================================
   common.css — サイト共通（リセット / デザイントークン / ヘッダー / フッター）
   おはな メディカルクリニック
   ========================================================================= */

/* ---- Google Fonts（Noto Sans JP + Roboto）------------------------------
   和文は Noto Sans JP。PSD（design/top_07.psd）が Medium/SemiBold/Bold を
   使い分けており、デバイスフォント（游ゴシック）では Regular と Bold の
   2ウェイトしか無いため 500/600 が効かず、全体が細くなってしまう。
   採用ページの PSD も Noto Sans JP なので、全ページこれで揃える。
   英字・数字だけ Roboto を当てる（--num）。 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap");


/* ---- 一時非表示 --------------------------------------------------- */

/* header.php: 電話番号とWEB予約ボタン */
body .hide-header-contact{
  display:none;
}

/* page/index.php: 診療カレンダー */
body .hide-calendar{
  display:none;
}

/* page/about.php: 施設紹介セクション */
body .hide-facility{
  display:none;
}

/* page/about.php: 医院情報テーブルのTEL行 */
body .hide-tel-row{
  display:none;
}

/* page/about.php: 医院情報テーブルのFAX行 */
body .hide-fax-row{
  display:none;
}

/* page/recruit.php: 募集職種一覧 */
body .hide-jobs{
  display:none;
}

/* page/visit.php: 当院の施設基準 */
body .hide-standard{
  display:none;
}

/* ---- デザイントークン --------------------------------------------------- */
:root {
  --teal: #3cb8c3;
  /* 主要アクセント（ボタン等）*/
  --teal-dark: #2fa1ab;
  /* hover */
  --teal-100: #e6f6f8;
  /* 淡いティール */
  --navy: #12458c;
  /* 見出し・ナビ */
  --navy-dark: #0e3a78;
  /* フッターバー */
  --mint: #ecf8fa;
  /* セクション背景 */
  --mint-2: #e2f2f4;
  --ink: #333c46;
  /* 本文 */
  --ink-muted: #6a7681;
  --line: #d8e4ea;
  /* カレンダー（design/top_09.psd 実測）。丸＝凡例、-bg＝日付セルの地色。 */
  --cal-pink: #ffa4a4;
  --cal-pink-bg: #ffd1d1;
  /* 休診日 */
  --cal-yellow: #fad989;
  --cal-yellow-bg: #fbe1a1;
  /* 午前休診 */
  --cal-purple: #a7acef;
  --cal-purple-bg: #d3d5f7;
  /* 午後休診 */
  --cal-green: #a3e0ba;
  --cal-green-bg: #bee9cf;
  /* 休日当番医 */
  --cal-line: #6d889f;
  /* 表の内側の罫線 */
  --white: #ffffff;
  --container: calc(1120 * var(--s));
  --radius: calc(16 * var(--rs));
  --radius-pill: calc(999 * var(--rs));

  /* 和文は Noto Sans JP（PSDと同じ）。未読込時の代替はデバイスフォント。
     ウェイト固定名（游ゴシック Medium 等）を先頭に置くと bold が効かなくなるため、
     代替側の先頭は重み中立の名前にする。 */
  --sans: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --num: "Roboto", var(--sans);
  --yugo: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --header-h: calc(128 * var(--s));

  /* 1デザインpx。基準幅 1204.8px で原寸、それ以下は等比縮小。
     PSD準拠で組んだフッター（と採用ページ）がこの単位で寸法を持つ。 */
  --s: min(1px, calc(100vw / 1204.8));

  /* 角丸専用の1デザインpx。--s と同じく縮むが 0.8 で止まる。
     角丸は「かたち」であって寸法ではないので、--s のまま等比で縮めると
     375pxで 10px→3.1px / 5px→1.6px となり、ほぼ直角に見えてしまう。
     下限0.8なら 10px→8px、5px→4px で丸みが残る（拡大方向には効かない）。
     ＊border-radius と --radius 系だけがこれを使う。 */
  --rs: max(0.8px, var(--s));

  /* セクションの下padding と フッターの上padding。
     最後のセクションがミント地だと、同じ地色のフッターと地続きになって
     この2つが1つの大きなアキに見えるため、その場合だけ差し引いている
     （下の main > .section--mint:last-of-type）。
     どちらかを変えるときは、この2つが対で使われていることに注意すること。 */
  --section-pb: calc(185 * var(--s));
  --footer-pt: calc(80 * var(--s));
}

/* ---- リセット ----------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* 地色はミント。ヘッダー・フッターと同色にして、本文の外側
   （iOSのラバーバンド、固定バーの裏、コンテンツが短いページの余り）が
   白く抜けないようにする。白い部分は main 側で個別に指定する。 */
body {
  margin: 0;
  font-family: var(--sans);
  font-size: calc(17 * var(--s));
  font-weight: 400;
  color: var(--ink);
  line-height: 1.9;
  background: var(--mint);
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, p, figure {
  margin: 0;
}
button {
  font-family: inherit;
  cursor: pointer;
}
table {
  border-collapse: collapse;
}
/* 英字・数字だけ Roboto に切り替えるユーティリティ */
.font_roboto {
  font-family: var(--num);
}

/* ---- レイアウト --------------------------------------------------------- */
.container {
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
}
/* PSD実測: 隣接セクション間の余白は約270〜290px（=上下パディング約140pxずつ）*/
/* ---- セクションの地色 --------------------------------------------------
   PSD（01/04 とも）実測: セクションの地色は**上端だけ角丸60px**の全幅ブロックで、
   ミントと白が交互に積まれている。角の外側には「前のセクションの地色」が覗く
   ＝ 各セクションが前のセクションに 60px 食い込んでいる、という作り。
   これを再現するため:
     ・全セクションが自分の地色を持つ（白も明示。持たないと角丸が見えない）
     ・2つ目以降は margin-top:-60px で前セクションに重ね、
       同じ60pxを padding-top に足して見た目の余白は変えない
   背景の描画順は DOM 順なので、後のセクションが前のセクションの上に乗る。*/
.section {
  padding: calc(116 * var(--s)) 0 var(--section-pb);
  background: var(--white);
  border-radius: calc(60 * var(--rs)) calc(60 * var(--rs)) 0 0;
}
.section+.section {
  margin-top: calc(-60 * var(--s));
  padding-top: calc(116 * var(--s));
}
.section--mint {
  background: var(--mint);
}
/* 最後のセクションがミント地のときだけ、フッターの上padding分を引く。
   地色が同じで境目が見えないぶん、下padding(185) + フッター上padding(80) が
   まとめて1つのアキに見えてしまうため。

   :last-child ではなく :last-of-type にしているのは、main の末尾に section
   以外の要素が来ても「最後のセクション」を拾えるようにするため。
   ＊ページ個別に padding を持たせているセクション（index.css の
     main>.section.greeting など）は詳細度が同じで後から読まれるので、
     そちらが優先される。あちらは既にフッター込みで詰めてある値なので、
     ここで二重に引かないようにこの詳細度のままにしておくこと。 */
main>.section--mint:last-of-type {
  padding-bottom: calc(var(--section-pb) - var(--footer-pt));
}
/* body をミントにしたぶん、白地はここで明示する。
   ミントで見せたいセクションは .section--mint で個別に戻す */
main {
  display: block;
  background: var(--white);
}

/* セクション見出し（design/top_09.psd 実測: 36px Bold #004A8E 字間.025em）。
   PSDには英語サブ（NEWS / Calendar / Medical）が無いので廃止した。
   使っているのはトップページだけ（.sec-head=中央 / .head-inline=左）。*/
.sec-head,
.head-inline {
  font-size: calc(36 * var(--s));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .025em;
  color: #004a8e;
}
.sec-head {
  text-align: center;
}

/* ---- PC/SPの折り返し切替 ------------------------------------------------
   <br class="pc_none"> … SPだけで改行する
   <br class="sp_none"> … PCだけで改行する
   もとはトップ専用の index.css に置いていたが、診療科ページのボタンでも
   使うため共通へ移した。ティザーサイトと同じクラス名・同じ仕組み。 */
.pc_none {
  display: none;
}

/* ---- 汎用グリッド（SPで1カラム化）------------------------------------- */
.grid {
  display: grid;
  gap: calc(24 * var(--s));
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ---- ボタン ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(7 * var(--s));
  height: calc(46 * var(--s));
  padding: 0 calc(28 * var(--s));
  border-radius: var(--radius-pill);
  font-size: calc(13 * var(--s));
  font-weight: 700;
  letter-spacing: .04em;
  border: none;
  transition: background .2s, transform .1s, color .2s;
}
.btn__arrow {
  width: calc(22 * var(--s));
  height: calc(22 * var(--s));
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .2s;
}
.btn__arrow::after {
  content: "";
  width: calc(11 * var(--s));
  height: calc(9 * var(--s));
  background-color: currentColor;
  -webkit-mask: url("../img/common/icon-arrow-mask.png") no-repeat center / contain;
  mask: url("../img/common/icon-arrow-mask.png") no-repeat center / contain;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}
.btn--teal {
  background: var(--teal);
  color: #fff;
}
.btn--teal .btn__arrow {
  background-image: url("../img/common/btn_arrow.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.btn--teal .btn__arrow::after {
  content: none;
}
/* ホバーは白地＋ティールの枠線。枠線は border ではなく inset の box-shadow で描く。
   border だと通常時とホバー時でボックスサイズが変わり、高さと文字位置がずれる
   （box-shadow はレイアウトに影響しないので padding の調整も要らない）。*/
.btn--teal:hover {
  background: #fff;
  color: var(--teal);
  box-shadow: inset 0 0 0 2px var(--teal);
}
.btn--teal:hover .btn__arrow {
  background-image: url("../img/common/btn_arrow_hover.png");
  transform: translateX(4px);
}
.btn--teal:active {
  transform: scale(.98);
}
/* ダウンロード系ボタン（PDF DL等）用のアイコン差し替え。ホバーでも矢印には戻さず、
   ダウンロードアイコンのまま配色を反転させる（通常=白丸＋ティール矢印 /
   ホバー=ティール丸＋白矢印。ホバー時はボタンの地が白に変わるため）。
   PSD（top_07「問診票」/ 01_内科…「禁煙外来」）のアイコンは btn_arrow.png と同じ
   「白い丸＋ティールの矢印」で、丸ごと1枚の画像。旧 icon-download.png は矢印だけを
   切り出したもので丸が無く、ティール地に矢印が乗るだけになっていたので差し替えた。
   （ファイル名を変えているのは、CSS内の url() の画像にはバージョンが付かず
     同名差し替えだとキャッシュで古い画像が出るため）*/
.btn--teal .btn__arrow--download {
  background-image: url("../img/common/icon-download-circle.png");
}
/* 矢印ボタンの translateX(4px)（右へ進む合図）は下向き矢印には合わないので、
   ページ内リンクの矢印と同じく下へ3px動かす。汎用ルール
   .btn--teal:hover .btn__arrow と同詳細度なので、後ろに置いて上書きしている。*/
.btn--teal:hover .btn__arrow--download {
  background-image: url("../img/common/icon-download-circle_hover.png");
  transform: translateY(3px);
}
.btn--outline {
  background: #fff;
  color: var(--navy);
  border: 1.5px solid var(--teal);
}
.btn--outline .btn__arrow {
  background: var(--teal);
  color: #fff;
  /* .btn__arrow の transition は transform だけなので、丸と矢印の配色も追従させる。
     （transform を書き落とすと矢印が瞬間移動する）*/
  transition: transform .2s, background-color .2s, color .2s;
}
/* ホバーは .btn--teal と逆向きの反転。通常時が白地＋ティール枠なので、
   ホバーでティール地＋白文字にする（枠線は同色になって溶ける）。
   丸も反転させて 白丸＋ティール矢印 にする。
   ＊.btn--teal:hover のように box-shadow で枠を描き足す必要はない。
     こちらは通常時から border を持っていてボックスサイズが変わらないため。 */
.btn--outline:hover {
  background: var(--teal);
  color: #fff;
}
.btn--outline:hover .btn__arrow {
  background: #fff;
  color: var(--teal);
  transform: translateX(4px);
}

/* =========================================================================
   ヘッダー
   ========================================================================= */
/* スクロール追従はしない。ただしドロップダウンを本文より前に出すため
   position は relative のまま残して z-index を効かせる */
.site-header {
  position: relative;
  z-index: 100;
  background: #ecf8fa;
}
.site-header__inner {
  width: min(100% - 48px, calc(1280 * var(--s)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: calc(4 * var(--s));
  padding: calc(16 * var(--s)) 0 0;
}
.site-header__logo img {
  width: calc(426 * var(--s));
}
/* 電話・WEB予約（design/top_07.psd「★ヘッダー > 右」実測。@1x px × var(--s)）*/
.header-contact {
  display: flex;
  align-items: center;
  gap: calc(34 * var(--s));
  justify-self: end;
  grid-column: 3;
}
.header-contact__tel {
  text-align: right;
  line-height: 1.3;
}
.header-contact__tel .num {
  font-family: var(--num);
  font-weight: 700;
  font-size: calc(28.9 * var(--s));
  letter-spacing: -.02em;
  color: #004a8e;
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--s));
}
.header-contact__tel .num .tel-icon {
  width: calc(20.5 * var(--s));
  height: calc(24 * var(--s));
  object-fit: contain;
}
/* 「電話予約」ラベルはSPの固定バー専用。PCは番号だけを出す（PSD準拠）*/
.header-contact__tel .num__label {
  display: none;
}
/* PSD実測は注釈9.3px・バッジ8.1pxだが、小さすぎるのでユーザー指示で
   注釈11px・バッジ10pxに上げている（PSDより大きい） */
.header-contact__tel .closed {
  display: block;
  font-size: calc(11 * var(--s));
  letter-spacing: -.1em;
  color: #004a8e;
  margin-top: calc(5 * var(--s));
  font-weight: 500;
}
.header-contact__tel .closed b {
  display: inline-block;
  min-width: calc(40 * var(--s));
  background: var(--navy);
  color: #fff;
  border-radius: calc(2 * var(--rs));
  /* PSD実測2px。4pxでは丸すぎた */
  padding: calc(1 * var(--s)) calc(6 * var(--s));
  margin-right: calc(5 * var(--s));
  font-size: calc(10 * var(--s));
  letter-spacing: .025em;
  font-weight: 500;
  text-align: center;
}
/* WEB予約ボタン（PSD: 172×46.5 / 文字19px・字間0.1em）。
   従来 .btn の既定12pxのままで、トップページだけ index.css が19pxに
   上書きしていた。ヘッダーのボタンは全ページ共通でPSD値にする */
.site-header .btn--teal {
  height: calc(46.5 * var(--s));
  padding: 0 calc(25 * var(--s)) 0 calc(31 * var(--s));
  gap: calc(7 * var(--s));
  font-size: calc(20 * var(--s));
  letter-spacing: .1em;
}
.site-header .btn--teal .btn__arrow {
  width: calc(22.5 * var(--s));
  height: calc(22.5 * var(--s));
}

.gnav {
  grid-column: 1 / -1;
  grid-row: 2;
}
/* PSDに項目間の「/」区切りは無く、47.5pxのアキで並ぶ（実測：各項目の間隔が一定）。
   ただし実装のナビはPSDの「診療科目」1項目を「内科・専門外来」「外科・小児科」の
   2項目に割ったぶん横に長い。列間47.5pxのままでは 1204.8px 未満のどの幅でも2行になる
   （項目の合計833.8 + アキ332.5 = 1166.3 は基準幅1204.8の96.8%を占めるのに対し、
     内枠は 100% - 48px。--s は 100vw 基準＝スクロールバー込みで縮むのに対し内枠は
     100%＝スクロールバーを除いた幅なので、狭い画面ほど内枠が相対的に狭くなる）。
   769pxで1行に収まる上限は約42pxなので、フォント読み込み前後の差を見込んで40pxにする。
   ＊項目を増やすとまた折り返す。増やすときはこの値を計算し直すこと。*/
.gnav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(4 * var(--s)) calc(40 * var(--s));
  margin: calc(5 * var(--s)) 0 calc(22 * var(--s));
}
.gnav__list li {
  position: relative;
}
.gnav__list a {
  font-weight: 700;
  font-size: calc(19 * var(--s));
  color: #004A8E;
  letter-spacing: .05em;
  transition: color .2s;
}
.gnav__list a:hover, .gnav__list a[aria-current="page"] {
  color: var(--teal);
}

/* 診療科目ドロップダウン（PC: ホバーで表示）
   PSD「★ヘッダー > ドロップダウン」実測: 151.5×227 / 角丸5px / 線2px #3CB8C3 /
   影なし / 内側の余白 上19・左27・下20 / 項目は16px・行送り28.75px・#004A8E */
.gnav__dropdown {
  display: none;
  flex-direction: column;
  gap: calc(12.75 * var(--s));
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 2px solid var(--teal);
  border-radius: calc(5 * var(--rs));
  /* PSD実測5px。12pxでは丸すぎた */
  padding: calc(19 * var(--s)) calc(27 * var(--s)) calc(20 * var(--s));
  min-width: calc(151.5 * var(--s));
  z-index: 50;
}
.gnav__has-dropdown:hover .gnav__dropdown,
.gnav__has-dropdown:focus-within .gnav__dropdown {
  display: flex;
}
/* 開閉ボタンはSP専用。PCはホバーで開くので出さない */
.gnav__toggle {
  display: none;
}
.gnav__dropdown li {
  width: 100%;
}
.gnav__dropdown a {
  display: block;
  padding: 0;
  font-size: calc(17 * var(--s));
  font-weight: 600;
  line-height: 1;
  letter-spacing: .05em;
  padding: calc(5 * var(--s)) 0 calc(5 * var(--s));
  color: #004A8E;
  white-space: nowrap;
}
/* PSDは選択中の項目を文字色だけで示す（下地の敷きは無い）*/
.gnav__dropdown a:hover, .gnav__dropdown a[aria-current="page"] {
  color: var(--teal);
}

/* ハンバーガー（PCでは非表示）*/
.hamburger {
  display: none;
}
/* ナビ背面（SPのみ。指定はレスポンシブ節）*/
.gnav__overlay {
  display: none;
}

/* 診療時間テーブル（フッターと access ページで共有。フッター側の見た目は
   下の「フッター」節で .site-footer 配下だけ上書きする）*/
.hours {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--teal);
  border-radius: var(--radius);
  overflow: hidden;
}
.hours th, .hours td {
  text-align: center;
  padding: calc(12 * var(--s)) calc(6 * var(--s));
  font-size: .95rem;
}
.hours thead th {
  color: var(--navy);
  font-weight: 700;
  border-bottom: 1.5px solid var(--line);
}
.hours thead th:first-child {
  color: var(--ink);
}
.hours tbody th {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  font-family: var(--num);
}
.hours tbody tr:not(:last-child) td, .hours tbody tr:not(:last-child) th {
  border-bottom: 1px solid var(--line);
}
.hours .o {
  color: var(--teal);
  font-size: 1.1rem;
}
/* ● 診療 */
.hours .x {
  color: var(--ink-muted);
}
/* / 休診 */

/* =========================================================================
   フッター（design/05_採用情報_03.psd のスマートオブジェクト
   「★最下部（フッター）.psb」準拠。数値は @1x 実寸px × var(--s)）

   背景の構成（PSD実測 @1x。フッター上端を 0 とする）:
     0    … ミント #ECF8FA（上のセクションから続く地色）
     272  … 波 wave_02.png（ミント→白、高さ224）
     496  … 白 #FFFFFF
     728  … コピーライト帯 #12458C（高さ40.5）
   地図・外観写真・ロゴ・診療時間表の上半分はミントの上に乗る。
   ========================================================================= */
.site-footer {
  position: relative;
  margin-top: 0;
  /* 波より下は白。ミントは .footer-top が持つ */
  background: #FFFFFF;
  color: #12458C;
  text-align: left;
  line-height: 1.9;
}
/* 地図・写真〜診療時間表までのブロック。ミント地と波をここに持たせる。
   ★波をフッター側に置いて下端から数えると、下にフッターナビが入ったぶん
     波が下がってナビに重なる。このラッパーの下端（＝診療時間表の下）を
     基準にすれば、下に何を足しても波の位置は動かない。 */
.footer-top {
  position: relative;
  /* フッター上の余白はフッター自身ではなくここが持つ */
  padding: var(--footer-pt) 0 calc(51 * var(--s));
  background: #ECF8FA;
}
/* ミント→白の波。塗りが白・上が透明なので、ミントの上に置くだけで境界になる */
.footer-top::after {
  content: "";
  display: block;
  width: 100%;
  height: calc(280 * var(--s));
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  background: url("../img/common/wave_02.png") repeat-x center bottom;
  background-size: calc(1500 * var(--s)) auto;
  z-index: 1;
  pointer-events: none;
}
.footer-top>* {
  position: relative;
  z-index: 2;
}
.site-footer>* {
  position: relative;
  z-index: 2;
}
.site-footer .container {
  width: calc(1100 * var(--s));
  margin-inline: auto;
}

/* ----- 地図＋外観写真 ----- */
.footer-media {
  display: grid;
  grid-template-columns: calc(540 * var(--s)) calc(540 * var(--s));
  justify-content: space-between;
}
.footer-media__map,
.footer-media__photo {
  margin: 0;
  border-radius: calc(10 * var(--rs));
  overflow: hidden;
  aspect-ratio: 540 / 335;
}
.footer-media__map {
  line-height: 0;
}
.site-footer .map-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.footer-media__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- 医院情報 ----- */
.footer-info {
  display: grid;
  /* 1fr は auto 最小値でトラックが中身の幅まで膨らむ（グリッドのブロウアウト）。
     診療時間表が親を突き破るので minmax(0, 1fr) で最小値を 0 にする */
  /* 左は住所の最長行「内科・呼吸器内科…アレルギー科」(29字) が入る幅。
     17px×29字＝493px ＋ .footer-info__addr の左マージン8.5px で 501.5px。
     右は .container(1120) の残り。505 + gap77.5 + 表537 = 1119.5 で収まる。
     住所のサイズを変えたらこの3つを一緒に見直すこと。 */
  grid-template-columns: calc(505 * var(--s)) minmax(0, 1fr);
  gap: calc(77.5 * var(--s));
  align-items: start;
  margin-top: calc(50 * var(--s));
  padding: 0;
}
.footer-info__logo {
  width: calc(413.5 * var(--s));
  margin-left: calc(3.5 * var(--s));
}
.footer-info__addr {
  margin: calc(21.5 * var(--s)) 0 0 calc(8.5 * var(--s));
  font-size: calc(17 * var(--s));
  font-weight: 500;
  line-height: 1.613;
  letter-spacing: 0;
  color: #12458C;
  /* 改行は <br> で指定済み。診療科目の行が折り返すと行数が変わるので止める。
     止めるぶん、左カラムの幅（.footer-info）でこの行が入るようにしてある */
  white-space: nowrap;
}
/* ----- 診療時間表（共有パーツ .hours をフッターだけPSD準拠に上書き） ----- */
.site-footer .hours {
  /* 左カラムを広げたぶん狭める（.footer-info のコメント参照）*/
  width: calc(537 * var(--s));
  height: calc(174.5 * var(--s));
  /* 罫線は細いので var(--s) では縮めず固定pxで置く。
     色はPSD実測 #12458C（従来 #004A8E は別系統の青だった）*/
  border: 2px solid #12458C;
  border-radius: calc(10 * var(--rs));
  /* border-radius と padding-inline を効かせるため collapse を解く */
  border-collapse: separate;
  border-spacing: 0;
  overflow: visible;
  padding-inline: calc(24.5 * var(--s));
  background: #FFFFFF;
  table-layout: fixed;
}
.site-footer .hours th,
.site-footer .hours td {
  padding: 0;
  text-align: center;
  font-weight: 700;
  color: #12458C;
}
.site-footer .hours thead tr {
  height: calc(60.5 * var(--s));
}
/* 曜日は1文字ずつ別セルで中央寄せなので字間は持たせない
   （1文字に字間を付けると右にだけアキが出て中心がずれる）*/
.site-footer .hours thead th {
  font-size: calc(17.5 * var(--s));
  letter-spacing: 0;
  color: #12458C;
  border-bottom: 2px solid #12458C;
}
.site-footer .hours thead th:first-child {
  width: calc(121 * var(--s));
  letter-spacing: .025em;
}
/* 時間はPSDでは和文フォント。基底の .hours tbody th が var(--num)（Roboto）を
   当てているので、ここで明示的に打ち消す */
.site-footer .hours tbody th {
  font-family: inherit;
  font-size: calc(15 * var(--s));
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  color: #12458C;
}
.site-footer .hours tbody td {
  font-size: calc(15 * var(--s));
}
/* 行間の区切り線はPSDに無い */
.site-footer .hours tbody tr:not(:last-child) td,
.site-footer .hours tbody tr:not(:last-child) th {
  border-bottom: 0;
}
.site-footer .hours .o {
  color: #3CB8C3;
  font-size: calc(16 * var(--s));
}
.site-footer .hours .x {
  color: #12458C;
}

.footer-closed {
  margin: calc(13.5 * var(--s)) 0 0;
  text-align: right;
  font-size: calc(17 * var(--s));
  font-weight: 500;
  line-height: calc(25.5 * var(--s));
  letter-spacing: -.05em;
  color: #12458C;
}
.footer-closed b {
  display: inline-block;
  min-width: calc(66.5 * var(--s));
  margin-right: calc(11 * var(--s));
  padding: 0 calc(8 * var(--s));
  border-radius: calc(3 * var(--rs));
  background: #12458C;
  color: #FFFFFF;
  font-weight: 500;
  letter-spacing: .025em;
  text-align: center;
}

/* ----- フッターナビ -----------------------------------------------------
   design/top_12.psd「下部_info > ナビ のコピー」実測（@1x = PSD値÷2）:
     ナビ全体 … x205〜1298（幅1093）／y5393.5〜5691（高297.5）
     親項目   … NotoSansJP Bold 19px #12458C 行送り50/38
     子項目   … NotoSansJP Medium 17px #12458C 行送り50/34
     縦罫線   … PSDは幅2.5pxだが 1px にする（ユーザー指示）。色 #3CB8C3、
                罫線→文字のアキ 約18px
     子項目のピッチ … 36〜37.5px（PSDは手置きでばらつくので36で揃えた）
     子を持たない列（採用情報/お知らせ/アクセス）のピッチ … 約50px

   列の幅はPSDの座標を再現せず、中身の幅なり＋space-between で配る。
   PSDの列位置は文字が流れた結果なので、固定するとラベルを変えた時に崩れる。
   ------------------------------------------------------------------------ */
.footer-nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(24 * var(--s));
  margin-top: calc(20 * var(--s));
}
/* グループはSPで左右2列に分けるための入れ物。PCでは透過させて、
   中の6列がそのまま .footer-nav の flex アイテムとして横一列に並ぶ。 */
.footer-nav__group {
  display: contents;
}
.footer-nav__parent {
  display: block;
  font-size: calc(19 * var(--s));
  font-weight: 700;
  line-height: calc(50 / 38);
  color: #12458C;
  transition: color .2s;
}
/* 子を持たない列は親項目が縦に積まれる。PSD実測のピッチ50pxに合わせる */
.footer-nav__parent+.footer-nav__parent {
  margin-top: calc(50 * var(--s) - 25 * var(--s));
}
.footer-nav__sub {
  list-style: none;
  margin: calc(18 * var(--s)) 0 0;
  /* 縦罫線と、罫線→文字のアキ */
  padding: 0 0 0 calc(18 * var(--s));
  /* 線幅は var(--s) で縮めない（1px を下回ると環境によって消える） */
  border-left: 1px solid var(--teal);
}
.footer-nav__sub li+li {
  /* 行ボックスは 17×50/34 = 25px。ピッチは PSD実測の36pxより詰めている */
  margin-top: calc(8 * var(--s));
}
.footer-nav__sub a {
  font-size: calc(17 * var(--s));
  font-weight: 500;
  line-height: calc(50 / 34);
  color: #12458C;
  transition: color .2s;
}
.footer-nav a:hover {
  color: var(--teal);
}
/* 開閉ボタンはSP専用。PCは常に開いている */
.footer-nav__toggle {
  display: none;
}

/* ----- コピーライト帯（全幅） ----- */
.footer-copy {
  margin-top: calc(80 * var(--s));
  padding: 0;
  height: calc(42.5 * var(--s));
  background: #12458C;
  color: #FFFFFF;
  text-align: center;
  font-size: calc(15.5 * var(--s));
  font-weight: 500;
  line-height: calc(42.5 * var(--s));
  letter-spacing: .025em;
}

/* =========================================================================
   ページトップ
   ---------------------------------------------------------------------------
   画像は @2x（196×196）。実寸98px・右3%・下60px はユーザー指示。
   幅と下位置は他のパーツと同じ var(--s) で等比縮小する（右は % なので指定不要）。
   SPは固定バー（58px）の上に逃がすので、下位置はSP側で別に持っている。

   #top は id を持つ要素が無いときブラウザが文書先頭へ送る予約フラグメント。
   html に scroll-behavior:smooth があるので、戻る動き自体にJSは要らない。
   JSが要るのは出し入れ（body.is-scrolled）だけで、common.js が付け外しする。
   ========================================================================= */
.page-top {
  position: fixed;
  right: 3%;
  bottom: calc(60 * var(--s));
  /* ドロワー(200)とその背面(190)より下、本文より上。開いたメニューには重ねない */
  z-index: 100;
  width: calc(98 * var(--s));
  /* img の下に行間ぶんの隙間を作らない */
  line-height: 0;
  /* スクロールし始めると common.js が body に .is-scrolled を付ける。
     SPの固定バーと同じ合図を使う（別々のしきい値だと出る順がずれる）。
     visibility も切るのは、隠れているあいだタブキーで拾わせないため
     （opacity だけだと見えないボタンにフォーカスが入る）。
     visibility は transition が効かないので delay で遅らせて消す。 */
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
body.is-scrolled .page-top {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, transform .3s ease, visibility 0s;
}
.page-top img {
  display: block;
  width: 100%;
  height: auto;
}
/* 上向きの矢印なので、ホバーでは上へ動かす（DLボタンが下へ動くのと同じ考え方） */
.page-top:hover {
  transform: translateY(-3px);
}

/* =========================================================================
   レスポンシブ
   ========================================================================= */
@media (max-width: 768px) {
  /* ヘッダー：ロゴ + ハンバーガー
     以前は1024pxで切り替えていた（800〜900px幅で電話番号バッジ・WEB予約ボタン・
     グローバルナビが並びきらず不自然に折り返すため）。
     ヘッダーの寸法を var(--s) の等比縮小に統一したことで、どの幅でも
     PSDと同じ比率で収まるようになったので、SPと同じ768pxまで下げた。
     ＊このブロックは下の @768 ブロックより前に置くこと。同じ幅で効くので、
       打ち消しの前後関係が入れ替わると崩れる。*/
  :root {
    --header-h: 64px;
  }

  /* grid をやめて flex にする。電話が固定バーに出る構成（out of flow）でも、
     ヘッダー内のアイコンになる構成（in flow）でも、列数を切り替えずに
     「ロゴが左・残りが右」が成立するため */
  .site-header__inner {
    width: 92%;
    display: flex;
    align-items: center;
    padding: 10px 0;
    gap: 12px;
  }
  .site-header__logo {
    margin-right: auto;
  }
  .site-header__logo img {
    width: 240px;
  }

  /* ---- ヘッダーの電話・WEB予約を画面下の固定バーにする ----
     マークアップはPCと同じ .header-contact をそのまま使う（ソースは1つ）。
     ハンバーガーを開かなくても予約・電話に届くようにするため。
     z-index はオフキャンバスナビ(200)より下。メニューを開いたら隠れてほしいため。 */
  .header-contact {
    display: grid;
    /* 子の数だけ等幅の列を作る。現在は「WEB予約 | 電話予約」の2列。
       WEB予約ボタンを出さない運用に戻しても、電話だけの1列に自動で割れる */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    grid-column: auto;
    justify-self: stretch;
    /* 白背景のコンテンツの上でバーの上端が見分けられればよい。
       ぼかしと濃さを落として、境目の1〜2pxだけ薄く陰るようにする */
    box-shadow: 0 -1px 4px rgba(18, 69, 140, .14);
    /* 開いた直後は出さず、スクロールし始めてから下からせり上がる。
       ページトップと同じ body.is-scrolled で切り替えて、出る間を揃える。
       visibility も切るのは、隠れているあいだタブキーで拾わせないため。 */
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  body.is-scrolled .header-contact {
    transform: none;
    visibility: visible;
    transition: transform .3s ease, visibility 0s;
  }
  /* WEB予約を左、電話予約を右に置く（PCの並びとは逆） */
  .header-contact .btn {
    order: 1;
  }
  .header-contact__tel {
    order: 2;
  }

  /* 長方形2つが隙間なく並ぶ見た目にする。.btn 側の角丸と左右パディングを打ち消す。
     ホームバー領域はバーに余白を作らず、ボタンの塗りごと下へ伸ばして避ける */
  /* font-size / gap / 矢印もPC側は var(--s) 基準なので、ここで固定pxに戻す
     （--s は画面幅に比例して縮むため、SPでは6px前後になってしまう）*/
  .header-contact .btn {
    width: 100%;
    height: auto;
    min-height: 58px;
    padding: 0 12px env(safe-area-inset-bottom);
    border-radius: 0;
    gap: 7px;
    font-size: 16px;
    letter-spacing: .05em;
  }
  .header-contact .btn .btn__arrow {
    width: 22px;
    height: 22px;
  }
  /* 指でタップすると :hover が離しても残り、白抜き＋矢印がずれた状態で固まる。
     このバーは常時表示なので居座ると目立つ。ホバーの見た目を打ち消して
     常に通常表示にする（PCヘッダー内の同じボタンには従来どおり効く）*/
  .header-contact .btn--teal:hover {
    background: var(--teal);
    color: #fff;
    box-shadow: none;
  }
  .header-contact .btn--teal:hover .btn__arrow {
    background-image: url("../img/common/btn_arrow.png");
    transform: none;
  }
  .header-contact__tel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    padding: 0 8px env(safe-area-inset-bottom);
    background: #fff;
    text-align: center;
    line-height: 1.3;
  }
  /* 1行目に「📞 電話予約 000-0000-0000」を並べる。
     WEB予約が無いあいだはこのバーが電話だけになるので、番号まで出して
     そのままタップ発信できるようにする（バー全体が tel: リンク）。
       📞 電話予約 000-0000-0000
                  [休診日] 火曜・土曜の午後・日曜・祝日 */
  .header-contact__tel .num {
    font-size: 20px;
    gap: 6px;
    color: var(--navy);
  }
  .header-contact__tel .num .tel-icon {
    width: 16px;
    height: 19px;
  }
  /* 和文なのでヘッダーの数字用フォント(--num)ではなく本文フォントに戻す。
     番号より一段小さくして、視線が番号へ行くようにする */
  .header-contact__tel .num__label {
    display: block;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .05em;
  }
  /* SPは番号を出さない（ボタンをタップすれば発信できるので数字は不要／
     .no-reserve-url の丸ボタンのときと同じ扱い）。
     読み上げには残すので display:none にはしない。消すと tel: リンクの
     読み上げ名が「電話予約」だけになり、何番に掛かるか分からなくなる。 */
  .header-contact__tel .num__digits {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* 休診日は1行に収める。狭い画面でも折り返さないよう字を可変にする
     （折り返すとバーの高さが変わり、下の逃げ幅と合わなくなるため） */
  .header-contact__tel .closed {
    margin-top: 0;
    font-size: 10px;
    color: var(--navy);
    white-space: nowrap;
  }
  /* PC側はPSD準拠で var(--s) 基準の小さな値にしているが、--s は画面幅に比例して
     縮むため、そのままだとSPで 2〜3px になって読めない。ここで打ち消す */
  .header-contact__tel .closed b {
    min-width: 0;
    padding: 1px 4px;
    margin-right: 4px;
    border-radius: 2px;
    font-size: inherit;
  }

  /* ---- WEB予約が無いあいだの電話（body.no-reserve-url）----------------
     固定バーは「WEB予約と電話が並ぶ」ための作りなので、電話1つだけのために
     画面下を58px占有するのは割に合わない。ヘッダーのハンバーガー左に
     アイコンだけの丸ボタンとして置く。
     ＊WEB予約URLを入れれば .no-reserve-url が外れ、従来の固定バーに戻る。
       このブロックより上の固定バーの指定は消さずに残してあること。 */
  .no-reserve-url .header-contact {
    position: static;
    display: block;
    z-index: auto;
    box-shadow: none;
  }
  .no-reserve-url .header-contact__tel {
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    background: var(--teal);
  }
  .no-reserve-url .header-contact__tel .num {
    font-size: 0;
    gap: 0;
  }
  /* PSDのアイコンはネイビー。ティールの丸に乗せるので白に置き換える */
  .no-reserve-url .header-contact__tel .num .tel-icon {
    width: 20px;
    height: 23px;
    filter: brightness(0) invert(1);
  }
  /* 番号・ラベル・休診日は見た目には出さないが、読み上げには残す。
     display:none にすると tel: リンクの読み上げ名が空になる */
  .no-reserve-url .header-contact__tel .num__label,
  .no-reserve-url .header-contact__tel .num__digits,
  .no-reserve-url .header-contact__tel .closed {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* 固定バーが無いので本文下の逃げも要らない（下の html body を打ち消す）*/
  html body.no-reserve-url {
    padding-bottom: 0;
  }

  /* ナビが画面上端まで来るので、その前面に出して常に押せるようにする
     （.gnav は 200、背面は 190。いずれもヘッダーの重なり文脈の中） */
  .hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    justify-self: end;
    position: relative;
    z-index: 210;
  }
  .hamburger span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--navy);
    transition: transform .3s, opacity .3s;
    margin-inline: auto;
  }
  .hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* グローバルナビ：オフキャンバス（画面全体ではなく右寄せの260px幅パネル）
     ヘッダーの下から生やすと上端が中途半端に開いて見えるので、画面の一番上まで
     伸ばし、ヘッダーの高さぶんを padding で空けて項目がハンバーガーに
     かぶらないようにする */
  .gnav {
    position: fixed;
    inset: 0 0 0 auto;
    width: 260px;
    z-index: 200;
    background: #ffffff;
    padding-top: var(--header-h);
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y: auto;
    grid-column: auto;
    grid-row: auto;
  }
  .gnav.is-open {
    transform: translateX(0);
  }

  /* パネルの外側。タップで閉じるための当たり判定を兼ねる。
     背面の要素を誤タップしないよう、薄く覆う */
  .gnav__overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(18, 69, 140, .25);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .gnav__overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  .gnav__list {
    flex-direction: column;
    align-items: stretch;
    padding: 0 20px 24px;
    gap: 0;
    margin-top: 0;
  }
  .gnav__list li:not(:last-child)::after {
    display: none;
  }
  .gnav__list li {
    border-bottom: 1px solid var(--line);
  }
  .gnav__list a {
    display: block;
    padding: 11px 4px;
    font-size: 1.05rem;
  }
  /* 診療科目ドロップダウン（SP: 既定は畳んでおき、矢印ボタンで開く）。
     親リンクはページへ飛ばしたいので、開閉は隣の .gnav__toggle が受ける。

     li を flex-wrap にして「リンク＋ボタン」を1行目、サブリストを2行目に置く。
     こうするとボタンが align-self:stretch で1行目の高さに自動で揃い、
     リンクの padding を変えても追従する（絶対配置だと高さを手で持つことになる）。 */
  .gnav__has-dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .gnav__has-dropdown>a {
    flex: 1 1 auto;
  }
  .gnav__toggle {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    /* タップ領域を確保しつつ、右端の余白はリンクの padding と合わせる */
    padding: 0 4px 0 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }
  /* 山形の矢印。border 2辺を45度回して作る（画像を足さない）。
     閉＝下向き（∨）、開＝上向き（∧）。回すと視覚的な重心がずれるので
     margin で見え方を合わせている。 */
  .gnav__toggle::before {
    content: "";
    width: 9px;
    height: 9px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  .gnav__has-dropdown.is-open>.gnav__toggle {
    color: var(--teal);
  }
  .gnav__has-dropdown.is-open>.gnav__toggle::before {
    margin-top: 4px;
    transform: rotate(-135deg);
  }
  .gnav__dropdown {
    /* PCで付けている枠線・角丸はここでは外す。
       SPは浮かぶパネルではなくメニュー内のインデントリストのため */
    display: flex;
    flex: 0 0 100%;
    position: static;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0 0 0 16px;
    min-width: 0;
    gap: 0;
    /* 開閉は display ではなく高さで行う。display:none はトランジションできない。
       高さの実測値は common.js が入れる（ここは畳んだ状態）。
       下アキ4pxも一緒に動かさないと、閉じても4px残って線が浮く。
       visibility を切るのは、畳んでいるあいだ中のリンクをタブキーで
       拾わせないため（height:0 + overflow:hidden だけでは focus できてしまう）。
       visibility は transition が効かないので、閉じるときだけ delay で遅らせる。 */
    height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: height .3s ease, padding-bottom .3s ease, visibility 0s linear .3s;
  }
  /* ＊PC用の :hover / :focus-within は display:flex を当てるだけなので、
     SPの既定も display:flex にした今は打ち消し不要（畳むのは高さ側の役目）。 */
  .gnav__has-dropdown.is-open .gnav__dropdown {
    padding-bottom: 4px;
    visibility: visible;
    transition: height .3s ease, padding-bottom .3s ease, visibility 0s;
  }
  .gnav__dropdown li {
    border-bottom: 1px solid var(--line);
  }
  .gnav__dropdown li:last-child {
    border-bottom: none;
  }
  .gnav__dropdown a {
    padding: 8px 4px;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--ink);
  }
  .gnav__dropdown>li:first-of-type a {
    padding-top: 0;
  }

  /* バーに隠れる分だけ本文の下に逃げを作る。値は .header-contact の実高さと
     同じにすること（現在58px = .btn / .header-contact__tel の min-height）。
     ここが大きいとページ最下部までスクロールしたときに差分ぶんの隙間が出る。
     WordPress コアの global-styles（theme.json由来のインラインCSS）が
     body{padding-bottom:0} を common.css より後ろで出力するため、
     単に body と書くと後勝ちで潰される。html を足して詳細度で上回らせる。 */
  html body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 768px) {
  /* SPの値。--section-pb / --footer-pt を差し替えれば、
     main > .section--mint:last-of-type の引き算もそのまま追従する */
  :root {
    --section-pb: 100px;
    --footer-pt: 50px;
  }
  /* 角丸はSPだと60pxが大きすぎるので40pxに落とし、食い込み量も合わせる */
  .section {
    padding: 60px 0 var(--section-pb);
    border-radius: 40px 40px 0 0;
  }
  .section+.section {
    margin-top: -40px;
    padding-top: 60px;
  }

  .hours th, .hours td {
    padding: 10px 2px;
    font-size: .8rem;
  }

  /* ---- フッター ---- */
  /* 波はミント地の下端から 40px 上に置く（PCは下端ぴったり）。
     PSDにSP版が無いので、PC実装の見え方をそのまま持ってきている。
     波より下は .site-footer が白なので、白を敷き直す必要はない。 */
  .footer-top::after {
    bottom: 40px;
    height: 40vw;
    background-size: 120% 100%;
  }
  .footer-top {
    padding-top: var(--footer-pt);
    /* PCの 51px は入れない。SPは波をミント地の下端から40px上に置く作りで、
       ここに padding を足すとそのぶん波が下がる */
    padding-bottom: 0;
  }
  /* 波の下端からミント地の下端までの 40px を白で埋める */
  .footer-top::before {
    content: "";
    display: block;
    width: 100%;
    height: 40px;
    background-color: #FFFFFF;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
  }
  .site-footer .container {
    width: 90%;
  }

  .footer-media {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .footer-media__map,
  .footer-media__photo {
    border-radius: 10px;
    aspect-ratio: 16 / 10;
  }

  .footer-info {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 36px;
  }
  .footer-info__logo {
    width: 240px;
    margin-left: 0;
  }
  .footer-info__addr {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.8;
    /* PC用の nowrap を解除（SPは幅が足りず診療科目の行がはみ出す）*/
    white-space: normal;
  }

  /* 表はSPでも潰さない。ただし親の幅を絶対に超えさせない。
     table-layout:fixed ＋ 時間列を固定幅にして、曜日8列を残りで等分する。
     nowrap を外さないと時間セルの内容幅が優先されて表がはみ出す。 */
  .footer-info__right {
    min-width: 0;
  }
  .site-footer .hours {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding-inline: 4px;
    border-radius: 6px;
    border-width: 1px;
  }
  .site-footer .hours th,
  .site-footer .hours td {
    padding: 0;
  }
  .site-footer .hours thead tr {
    height: 38px;
  }
  .site-footer .hours thead th {
    font-size: 13px;
    letter-spacing: 0;
    border-width: 1px;
  }
  .site-footer .hours thead th:first-child {
    width: 33%;
  }
  .site-footer .hours tbody tr {
    height: 36px;
  }
  .site-footer .hours tbody th {
    font-size: 13px;
    white-space: normal;
  }
  .site-footer .hours tbody td {
    font-size: 12px;
  }
  .site-footer .hours .o {
    font-size: 12px;
  }

  .footer-closed {
    margin-top: 12px;
    text-align: left;
    font-size: 13px;
    line-height: 22px;
  }
  .footer-closed b {
    min-width: 56px;
    margin-right: 8px;
    border-radius: 3px;
  }

  /* PSDにSP版が無い。1列だと縦に長くなりすぎるので2列に落とす。
     ★multi-column（columns:2）は使わないこと。段組みは中身の高さを見て
       バランスを取り直すので、プルダウンを開いた瞬間に項目が左右の段を
       行き来してしまう。grid なら各項目の置き場所が固定される。
     ★flex-wrap でも位置は固定できるが、grid のほうが行の対応が明示的で
       align-items:start と合わせて上揃えにしやすい。
     並びは左列に上から3つ、右列に残りを置く:
       ホーム        当院について
       内科・専門外来  ご来院の方へ
       外科・小児科    採用情報／お知らせ／アクセス

     ★grid の2列にはしないこと。grid は行を左右で共有するので、片方の
       プルダウンを開くと同じ行のもう片方も一緒に下がる。
       グループ（3列ずつ）を独立した縦積みにすれば左右が干渉しない。
     ★multi-column（columns:2）も不可。中身の高さでバランスを取り直すため、
       開いた瞬間に項目が左右の段を行き来する。 */
  .footer-nav {
    display: flex;
    align-items: flex-start;
    gap: 0 20px;
    margin-top: 32px;
  }
  .footer-nav__group {
    display: flex;
    flex-direction: column;
    /* 親項目どうしのアキ。下の .footer-nav__parent+.footer-nav__parent と
       同じ値にすること（片方だけ変えると採用情報から下だけピッチが変わる）*/
    gap: 26px;
    flex: 1 1 0;
    min-width: 0;
  }
  .footer-nav__parent {
    font-size: 16px;
  }
  /* 子を持たない列（採用情報／お知らせ／アクセス）は親項目が縦に並ぶ。
     他の親項目は列どうしなので .footer-nav__group の gap（26px）で空く。
     ここも同じ 26px にして、右列を上から下まで同じピッチで通す。
     ＊.footer-nav__group の gap と必ず揃えること。片方だけ変えると
       採用情報から下だけピッチが変わる。 */
  .footer-nav__parent+.footer-nav__parent {
    margin-top: 26px;
  }
  /* 親項目と矢印ボタンを1行に並べる。ボタンは親の高さに自動で揃う */
  .footer-nav__col:has(.footer-nav__toggle) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .footer-nav__col>.footer-nav__parent {
    flex: 1 1 auto;
  }
  .footer-nav__toggle {
    display: flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #12458C;
    cursor: pointer;
  }
  /* 山形の矢印。border 2辺を45度回して作る（画像を足さない）。
     閉＝下向き（∨）、開＝上向き（∧）。ヘッダーナビと同じ作り。 */
  .footer-nav__toggle::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  .footer-nav__col.is-open>.footer-nav__toggle {
    color: var(--teal);
  }
  .footer-nav__col.is-open>.footer-nav__toggle::before {
    margin-top: 3px;
    transform: rotate(-135deg);
  }
  /* 既定は畳む。高さは common.js が実測値を入れて動かす
     （display:none はトランジションできない）。
     visibility も切って、畳んでいるあいだタブキーで拾わせない。 */
  .footer-nav__sub {
    flex: 0 0 100%;
    margin-top: 0;
    padding-left: 12px;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: height .3s ease, margin-top .3s ease, visibility 0s linear .3s;
  }
  .footer-nav__col.is-open>.footer-nav__sub {
    margin-top: 10px;
    visibility: visible;
    transition: height .3s ease, margin-top .3s ease, visibility 0s;
  }
  .footer-nav__sub li+li {
    margin-top: 6px;
  }
  .footer-nav__sub a {
    font-size: 14px;
  }

  .footer-copy {
    margin-top: 50px;
    height: auto;
    padding: 12px 5%;
    font-size: 12px;
    line-height: 1.6;
  }

  /* 汎用グリッド → 1カラム */
  .grid-2, .grid-3 {
    grid-template-columns: 1fr;
  }

  .sec-head,
  .head-inline {
    font-size: 26px;
  }
}

/* =========================================================================
   下層ページ共通コンポーネント
   ---------------------------------------------------------------------------
   出典と単位:
     design/01_内科、呼吸器内科、睡眠障害内科、禁煙外来_03_修正済.psd
     design/04_ご来院の方へ_03.psd
   どちらもキャンバス 3000px の @2x。**このブロックの数値は PSD実測値 ÷ 2**
   （= @1x 実寸px）を固定pxで書いている。ヘッダー・フッター・採用ページの
   var(--s) 方式とは別で、下層ページの本文パーツは縮まないほうが読みやすい。
   例外は FV の波だけ（画像タイルなので背景サイズを固定pxで持つ）。
   ========================================================================= */

/* ---- ページヒーロー（写真 + 縦書きページタイトル）---------------------
   PSD「01_FV」実測 @1x（.page-hero の上端 = ヘッダー下端 を 0 とする）:
     0     … ミント #ECF8FA
     29.5  … 写真の上端（角丸20px、1146.5×411.5）
     158   … 白い波 wave_02.png（1500×282）の上端
     297   … 波の塗りがミントを切る位置（画像左端の塗り上端が139.5px）
     440   … 波の下端 = ミント帯の下端。以降は白（main の地色）
     458   … パンくずの上端
   ミント帯を 440px で止めているのは、波の塗り上端が最大205px（画像 x=1125）
   なので 158+205=363 < 440 → ミントは必ず波の白で隠れきる、という実測から。
   ここを触るときは wave_02.png の塗り上端を測り直すこと。*/
.page-hero {
  position: relative;
  /* 波(::before)を .page-hero の中に閉じ込める。付けないと絶対配置の波が
     後続のパンくずより前面に来る余地が残る */
  isolation: isolate;
  /* 地色は白（main）。上端から360pxだけミントを敷き、下端を波で切る */
  background: linear-gradient(var(--mint), var(--mint)) no-repeat top center / 100% calc(360 * var(--s));
}
/* ミント→白の波。塗りが白・上が透明なので、ミントの上に置くだけで境界になる。
   wave_02.png は左右端の塗り上端が同じ（@1x 140px）ので repeat-x で継ぎ目が出ない。

   scaleX(-1) は「右側が山・左側が谷」にするための左右反転（ユーザー指示）。
   wave_02.png 単体の塗り上端（@1x）は 山=x465(1px) ／ 谷=x1245(218.5px) で、
   そのままだと山が左・谷が右になる。background-position は center のままなので
   反転は要素の中央対称になり、どの画面幅でも同じ見え方になる。
   （background-position-x を半周期ずらす手もあるが、それだと画面端の高さが
     140px→49px に変わってしまうため、端の高さが変わらない反転を採用した）*/
.page-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(78 * var(--s));
  height: calc(282 * var(--s));
  z-index: 0;
  background: url("../img/common/wave_02.png") repeat-x center top;
  background-size: calc(1500 * var(--s)) auto;
  transform: scaleX(-1);
  pointer-events: none;
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  /* PSD: 写真の左端99 〜 タイトル枠の右端1350.5 = 1251.5。
     サイトはコンテンツ幅を PSD1098 → 1120（×1.02）で組んでいるので、
     FVも同じ倍率にしてヘッダー内枠(1280px)と左右を揃える */
  width: min(100% - 48px, calc(1280 * var(--s)));
  margin-inline: auto;
  /* grid ではなく flex。grid の 1fr カラムだと、写真の幅が確定するのが
     行の高さを決める計算より後になり、写真の高さ（= aspect-ratio 由来）が
     行に返らないことがある。実際 iOS Safari で .page-hero が写真より低くなり、
     直後のパンくずが写真に重なった。flex なら幅が先に確定してから
     高さが決まるので、写真の高さがそのまま .page-hero の高さになる。 */
  display: flex;
  gap: calc(44 * var(--s));
  /* タイトルは写真と同じ高さに伸ばさない（PSD実測で上端揃え）*/
  align-items: flex-start;
}
.page-hero__img {
  /* grid の 1fr 相当（残り幅を全部取る）。min-width:0 がないと
     flex アイテムの既定 min-width:auto で画像が縮まなくなる */
  flex: 1 1 0%;
  min-width: 0;
  border-radius: calc(20 * var(--rs));
  overflow: hidden;
}
/* PC の写真の高さはここで決まる（PSD 1146.5×411.5 = 2.79:1）。
   これが無いと元画像の比率(1.5:1)のまま縦に伸び、1440pxで高さ780pxになる。
   SPは .page-hero__img（ラッパー）側の aspect-ratio で高さが確定するので
   img は width/height とも定寸になり、この比率は効かない（＝SPに影響しない）。*/
.page-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1146.5 / 411.5;
}
/* 縦書きタイトル。PSD: 枠の内寸60（= 文字40 + 左右padding10）／
   線2px #3CB8C3／文字は游ゴシックBold 40px・字間0.05em・色は線と同じティール。
   字間は PSD の Tracking 0.1 ではなく実測の字送り42px（=0.05em）を採用
   （Photoshop の縦組みかなカーニングで実描画が詰まるため。スキル §9.2）。
   上端は写真の上端から14px下。
   角丸なし・地は白（PSDは角丸5px／地は透過だが、ユーザー指示で上書き）。*/
.page-hero__title {
  /* grid の auto カラム相当（中身の幅のまま・縮まない）*/
  flex: 0 0 auto;
  writing-mode: vertical-rl;
  /* h1 で出力する（parts/page-hero.php）。UA既定の margin-block 0.67em を消すので
     一括指定にすること。margin-top だけだと下に 0.67em 残って写真と底が揃わない。
     記事詳細だけは本文に h1 があるため div で出るが、指定はどちらにも効く。*/
  margin: calc(14 * var(--s)) 0 0;
  border: 2px solid var(--teal);
  border-radius: calc(5 * var(--rs));
  background: #fff;
  padding: calc(6 * var(--s)) calc(10 * var(--s));
  font-size: calc(40 * var(--s));
  line-height: 1;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--teal);
}

/* ---- パンくず ----------------------------------------------------------
   PSD: FVの写真と左端揃え（コンテナ1120pxではなくFVの内枠1240px）。
   写真の下端から17px下。NotoSansJP Medium 15px。
   「ホーム」= #004A8E + 下線 ／ 現在地 = #333333 ／ 区切りの＞ = 10px。
   下線は PSD実測2pxだが、個人情報保護方針の下線と同じくユーザー指示の1px。*/
.breadcrumb {
  /* .page-hero::before（波）が下へ張り出してパンくずに重なるので、
     位置指定してその前面に出す。z-index は付けない（DOM順で後なので
     位置指定するだけで波より上に描画される）*/
  position: relative;
  width: min(100% - 48px, calc(1280 * var(--s)));
  margin: calc(17 * var(--s)) auto 0;
  font-size: calc(15 * var(--s));
  font-weight: 500;
  line-height: 1.4;
  color: #333;
}
.breadcrumb a {
  color: #004a8e;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  /* text-decoration は補間できないので、色を透明にして消す
     （ご来院の方への .visit-policy .link-underline も同じ手）。 */
  text-decoration-color: currentColor;
  transition: text-decoration-color .2s;
}
.breadcrumb a:hover {
  text-decoration-color: transparent;
}
/* PSD: 「ホーム」と現在地のあいだは全角スペース2つ分＝30px、その中央に＞ */
.breadcrumb span {
  display: inline-block;
  width: calc(30 * var(--s));
  text-align: center;
  font-size: calc(10 * var(--s));
  color: #333;
}

/* ---- ページ内リンク（アンカーボタン列）--------------------------------
   2パターンある。どちらも parts/anchor-nav.php から出す。
     A アイコンなし … 04_ご来院の方へ「ページ内リンク」
        4カラム固定・端数の行は左揃え（PSDの下段が左揃え）
     B アイコンあり … 01_内科…「02_診療項目」
        1枚の枠に4カラム。アイコン円が枠の上端から24px出る
   共通: 白地／角丸10px／線2px #3CB8C3／ラベルは NotoSansJP Bold 20px
         字間0.05em 色#333333／矢印は25px円 + 白い下向き矢印10×12 */
.anchor-nav__label {
  font-size: calc(18 * var(--s));
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.4;
  color: #333;
  transition: color .2s;
}
/* PSDは10文字のラベル「お支払い方法について」だけ 19px に落としている
   （20pxだと字送り約210pxでボタン内に収まらず、右の矢印に重なる。他の9つは20px）。
   同じ考えで、10文字以上のラベルは19pxにする。判定は parts/anchor-nav.php 側。
   **.anchor-nav__label より後ろに置くこと**（同詳細度で後勝ちのため）。*/
.anchor-nav__label--long {
  font-size: calc(18 * var(--s));
}
.anchor-nav__arrow {
  width: calc(25 * var(--s));
  height: calc(25 * var(--s));
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: background-color .2s, translate .2s;
}
/* 矢印そのものは PSD から切り出した画像をマスクにして色を当てる
   （CSSで描き直すと線幅・かたちが別物になるため）*/
.anchor-nav__arrow::after {
  content: "";
  width: calc(10 * var(--s));
  height: calc(12 * var(--s));
  background-color: #fff;
  -webkit-mask: url("../img/common/icon-anchor-down.png") no-repeat center / contain;
  mask: url("../img/common/icon-anchor-down.png") no-repeat center / contain;
  transition: background-color .2s;
}
/* ホバーで矢印を円ごと少し下げる（A/B 両パターン共通）。下向き矢印なので
   下に動くこと自体が「この先の見出しへ飛ぶ」の合図になる。
   transform ではなく translate プロパティを使うのは、円の配置に
   transform: translateY(-50%)（A）と translateX(-50%)（SPのB）を既に
   使っていて、transform で上書きすると位置が壊れるため。*/
.anchor-nav a:hover .anchor-nav__arrow {
  translate: 0 3px;
}

/* ---- A: アイコンなし ---------------------------------------------------
   PSD実測 @1x: ボタン256.5×76.5／横gap24／縦gap23／ブロック幅1098。
   .container(1120px) を4等分すると262×76なので、gapだけPSD値を使う。
   上下の余白: パンくず下端→ボタン上端65、ボタン下端→次セクション上端123.5 */
.anchor-nav:not(.anchor-nav--icon) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(23 * var(--s)) calc(24 * var(--s));
  padding: calc(42 * var(--s)) 0 calc(102 * var(--s));
}
/* ちょうど6個のときだけ、4+2 に割れて2行目の右が大きく空くのを避け、
   3+3 に折り返す幅まで狭める。個数が変わると効かなくなる指定なので、
   ページ内リンクを増減したらこの数字も見直すこと。 */
.anchor-nav:not(.anchor-nav--icon):has(> a:nth-last-child(6):first-child) {
  width: calc(var(--container) - 15%);
}
/* flex-basis 262px = .container(1120px) を4等分した幅（PSD256.5 ×1.02）。
   4個ちょうどで1120pxを埋める。伸縮させない（flex-grow:0）ので
   3個・端数の行もボタン幅が変わらず、そのまま中央に並ぶ。
   ＊PSDでは端数の行は左揃えだが、ユーザー指示で常に中央寄せにしている。
   幅が足りなくなれば自然に3個→2個へ折り返すので、カラム数のメディアクエリは不要。*/
.anchor-nav:not(.anchor-nav--icon) a {
  flex: 0 0 calc(262 * var(--s));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(60 * var(--s));
  /* PSD実測: ラベルは「ボタン幅 - 右26px」の中央に来る（矢印のぶんの逃げ）。
     左に padding を足すと最長ラベルが矢印に重なるので 0 のままにすること。*/
  padding: calc(10 * var(--s)) calc(26 * var(--s)) calc(10 * var(--s)) 0;
  border: 2px solid var(--teal);
  border-radius: calc(10 * var(--rs));
  background: #fff;
  text-align: center;
  transition: background-color .2s;
}
.anchor-nav:not(.anchor-nav--icon) .anchor-nav__arrow {
  position: absolute;
  right: calc(14 * var(--s));
  top: 50%;
  transform: translateY(-50%);
}
.anchor-nav:not(.anchor-nav--icon) a:hover {
  background-color: var(--teal);
}
.anchor-nav:not(.anchor-nav--icon) a:hover .anchor-nav__label {
  color: #fff;
}
.anchor-nav:not(.anchor-nav--icon) a:hover .anchor-nav__arrow {
  background-color: #fff;
}
.anchor-nav:not(.anchor-nav--icon) a:hover .anchor-nav__arrow::after {
  background-color: var(--teal);
}

/* ---- B: アイコンあり ---------------------------------------------------
   PSD実測 @1x: 枠851.5×176.5／左右padding58／4カラム等幅(pitch183.83)／
   アイコン円101.5・地#ECF8FA・枠上端から24px上に出る／円→ラベル16／
   ラベル→矢印16／矢印下端→枠下端23。
   カラム幅を固定にしてあるので、項目数が2つ(外科・小児科)でも枠が
   項目数ぶんに縮む（旧実装のインラインstyle max-width は不要）*/
.anchor-nav--icon {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(183.5 * var(--s));
  width: fit-content;
  max-width: calc(100% - 48px);
  /* margin-top は枠の上端基準。アイコン円は24px上へ出るので
     見た目のアキは 45-24=21px になる */
  margin: calc(45 * var(--s)) auto calc(99 * var(--s));
  /* PSD: 枠851.5×176.5（線は内側）。左右57 + 4カラム183.5 + 線4 = 852、
     高さは 下記 a の gap/負マージンと合わせて 176.5 になるよう19 */
  padding: 0 calc(57 * var(--s)) calc(19 * var(--s));
  border: 2px solid var(--teal);
  border-radius: calc(10 * var(--rs));
  background: #fff;
}
.anchor-nav--icon a {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* PSD実測の円→ラベル16／ラベル→矢印16 はインク間の値。
     line-height:1.4 の行ボックスが上下に約4pxずつ持つので11.5にする */
  gap: calc(11.5 * var(--s));
  margin-top: calc(-24 * var(--s));
}
.anchor-nav__icon {
  width: calc(101.5 * var(--s));
  height: calc(101.5 * var(--s));
  border-radius: 50%;
  background: var(--mint);
  flex-shrink: 0;
  transition: background-color .2s;
}
/* 画像はアイコン円と同じ203×203(@2x)のキャンバスに切り出してあるので、
   円いっぱいに置くだけでPSDと同じ位置・同じ大きさになる */
.anchor-nav__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.anchor-nav--icon a:hover .anchor-nav__icon {
  background-color: #d3edf0;
}
.anchor-nav--icon a:hover .anchor-nav__arrow {
  background-color: var(--teal-dark);
}

/* ---- 大見出し（ごあいさつ / 施設紹介 など）---------------------------- */
.page-h2 {
  font-size: max(24px, calc(36 * var(--s)));
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
  letter-spacing: .08em;
  margin-bottom: calc(32 * var(--s));
}

/* ---- 囲みボックス（凡例つき）-------------------------------------------
   見た目は「ご来院の方へ」のPSD（04_ご来院の方へ_04.psd）実測を基準にした。
   診療科ページ（01/02）のPSDも同じ値なので、両者はここで共通化してある。
   ＊「当院について」（03）だけ タブ30px・padding 48/34 と別値なので、
     about.css が [data-page="about"] で上書きしている。
   PSD実測 @1x: 線2px #3CB8C3 / 角丸10px / 内側 上45・左右62(=63×1.02)・下42 */
.info-box {
  position: relative;
  background: #fff;
  border: 2px solid var(--teal);
  border-radius: calc(10 * var(--rs));
  padding: calc(45 * var(--s)) calc(50 * var(--s)) calc(42 * var(--s));
  margin-top: calc(22 * var(--s));
  --box-bg: #fff;
}
/* PSD実測: 枠下端→次の枠上端 52〜59px */
.info-box+.info-box {
  margin-top: calc(56 * var(--s));
}
/* 凡例タブ。PSD実測: Bold 24px / tracking50(=.05em) / 文字の天地中央が枠の線の上に乗る。
   --tab-top ＝「枠の上端からタブの上端までの距離」。ここを起点に top と
   下半分の白マスクの両方を出すので、ページ側で変えるときは top ではなく
   --tab-top を上書きすること（値がずれるとマスクの境目が線からずれる）。
   既定は -(行送り35 ÷ 2) - 線2px = 19.5px。*/
.info-box__title {
  --tab-top: calc(19.5 * var(--s));
  position: absolute;
  top: calc(-1 * var(--tab-top));
  left: calc(34 * var(--s));
  z-index: 1;
  background: var(--box-bg);
  padding: 0 calc(13 * var(--s)) 0 calc(17 * var(--s));
  color: var(--navy);
  font-weight: 700;
  font-size: calc(24 * var(--s));
  line-height: calc(35 * var(--s));
  letter-spacing: .05em;
}
/* タブの地色はセクション地色（線をマスクするため）だが、線より下は枠の内側なので
   白で塗り直す。これが無いとミント地のセクションでタブの下半分が箱に食い込む。*/
.info-box__title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - var(--tab-top));
  background: #fff;
  z-index: -1;
}
.section--mint .info-box {
  --box-bg: var(--mint);
}
.info-box p {
  color: var(--ink);
}
/* 文単位の項目を縦積みする箇条書き（症状/疾患のタグ状dot-gridとは別）*/
.bullet-list {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--s));
}
.bullet-list li {
  display: flex;
  align-items: baseline;
  gap: calc(10 * var(--s));
  color: var(--ink);
}
.bullet-list li::before {
  content: "";
  width: calc(10 * var(--s));
  height: calc(10 * var(--s));
  min-width: calc(10 * var(--s));
  border-radius: 50%;
  background: var(--teal);
}
.info-box__notes {
  margin-top: calc(18 * var(--s));
}
.info-box__notes p {
  font-size: .85rem;
  color: var(--ink-muted);
  line-height: 1.7;
}
.link-underline {
  color: var(--navy);
  text-decoration: underline;
}

/* 経歴などの 日付 | 内容 リスト */
.def-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: calc(6 * var(--s)) calc(28 * var(--s));
}
.def-list dt {
  color: var(--teal);
  font-weight: 700;
  white-space: nowrap;
}
.def-list dd {
  margin: 0;
  color: var(--ink);
}
.simple-list li {
  padding: calc(3 * var(--s)) 0;
  color: var(--ink);
}

/* ---- 写真プレースホルダー ---------------------------------------------- */
.placeholder {
  background: #b9bfc4;
  color: #fff;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  text-align: center;
  aspect-ratio: 4 / 3;
  font-weight: 700;
  line-height: 1.7;
}
.photo-item__cap {
  text-align: center;
  font-weight: 700;
  color: var(--navy);
  margin-top: calc(12 * var(--s));
}

/* ---- 情報テーブル（医院情報など）-------------------------------------- */
.info-table {
  width: 100%;
}
.info-table th, .info-table td {
  text-align: left;
  padding: calc(18 * var(--s)) calc(8 * var(--s));
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.info-table th {
  width: calc(200 * var(--s));
  color: var(--navy);
  font-weight: 700;
  white-space: nowrap;
}
.info-table td {
  color: var(--ink);
}
@media (max-width: 600px) {
  .info-table th, .info-table td {
    display: block;
    width: auto;
    padding: 6px 4px;
  }
  .info-table th {
    border-bottom: none;
    padding-bottom: 0;
  }
  .info-table td {
    padding-top: 2px;
  }
}

/* 地図 */
.map-frame {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: calc(32 * var(--s));
  border: 1px solid var(--line);
}
.map-frame img, .map-frame iframe {
  width: 100%;
  display: block;
  border: 0;
}
.map-frame img {
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
/* 画像から iframe に差し替えたので、画像と同じ比率を iframe にも与える。
   高さ属性を持たない iframe は既定で150pxになってしまうため必須。 */
.map-frame .map-embed {
  aspect-ratio: 16 / 7;
  height: auto;
}

/* ---- 下層ページ共通パーツ SP -------------------------------------------
   SPカンプは無いのでPCのPSDから起こす（psd-to-html スキル §6）。
   FVの波は「ミント帯の下端 = 波の下端」という関係が崩れるとミントが
   帯状に見えてしまうので、幅・top・height・background-size を必ずセットで
   直すこと（波の画像は 1500:282 の比率）。*/
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
  /* 幅だけは --s に任せない。375pxで 30px まで落ちてタップしづらいので
     46px で固定する（下位置と右位置は --s / % のまま） */
  .page-top {
    width: 46px;
  }
  /* 画面下の固定バー（高さ58px）の上に逃がす。
     .no-reserve-url を付ける運用に戻したときはバーが無くなるので、
     そのときだけこの指定が当たらないようにしてある。 */
  body:not(.no-reserve-url) .page-top {
    bottom: calc(115 * var(--s) + 58px + env(safe-area-inset-bottom));
  }
  /* ---- 固定バーを一時的に消しているあいだ（.hide-header-contact）--------
     バーが無いので、①本文下に空けた58pxの逃げ（下の html body）と
     ②バーを避けるためのページトップの持ち上げ、の両方が要らなくなる。
     バーの有無は header.php のクラス1つで決まるので、:has() でそれを直に見る。
     body にクラスを足す方式だと header.php と functions.php の2箇所を
     同期させることになり、原稿が確定してクラスを外すとき片方を消し忘れる。
     ⚠ 詳細度は上の body:not(.no-reserve-url) .page-top と同じ (0,2,1) なので、
        後ろに置いて勝たせている。前に動かすと効かなくなる。
     ⚠ :has() 非対応の古いブラウザではこの2ルールが無効になるだけで、
        バーがある前提の余白が残る＝対応前と同じ見え方に戻る（崩れはしない）。*/
  html:has(.hide-header-contact) body {
    padding-bottom: 0;
  }
  html:has(.hide-header-contact) .page-top {
    /* バーが無いので画面下端からの距離だけで決める。
       50px あれば iPhone のホームインジケータ（〜34px）にも被らない */
    bottom: 50px;
  }
  .pc_none {
    display: block;
  }
  .sp_none {
    display: none;
  }

  /* --- font-size 以外もPC値を継承すると狭くなりすぎる箇所（375pxで一桁px）。
     値は削除した900pxブロックで使っていたものを流用している --- */
  .grid {
    gap: 16px;
  }
  .page-h2 {
    margin-bottom: 20px;
  }
  .info-box {
    padding: 26px 20px 24px;
    margin-top: 20px;
    border-width: 1px;
  }
  .info-box+.info-box {
    margin-top: 40px;
  }
  .info-box__notes {
    margin-top: 12px;
  }
  .map-frame {
    margin-top: 20px;
  }
  /* --- ここまで --- */

  /* 経歴などの定義リストは2カラムをやめて縦積みにする（旧900pxブロック） */
  .def-list {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .def-list dd {
    margin-bottom: 12px;
  }
  /* 凡例タブ。PC側は calc(24 * var(--s)) で等比に縮むので、ここはSPの値だけ持つ */
  .info-box__title {
    --tab-top: 15px;
    left: 16px;
    padding: 0 12px;
    font-size: 18px;
    line-height: 28px;
  }
  /* 縦書きタイトルは横組みにしない（PC・タブレット・スマホで共通）。
     写真だけ、PC比率(2.79:1)のままだと帯のように潰れるので再フレーミングする。
     波: 幅820px（= 高さ154px）／ミント帯の下端は 86+154=240px */
  .page-hero {
    padding-top: 0;
    background: linear-gradient(var(--mint), var(--mint)) no-repeat top center / 100% 51vw;
  }
  .page-hero::before {
    top: 29vw;
    height: 23vw;
    background-size: 140% 100%;
    background-position: 70% top;
  }
  .page-hero__inner {
    gap: 20px;
  }
  .page-hero__img {
    aspect-ratio: 16 / 10;
  }
  .page-hero__title {
    padding: 6px 8px;
    font-size: 30px;
    border-width: 1px;
    border-radius: 3px;
  }
  .breadcrumb {
    margin-top: 12px;
    font-size: 13px;
    /* 折り返したときに行が詰まって読みにくいので広げる */
    line-height: 1.8;
  }
  .breadcrumb span {
    width: 22px;
    font-size: 9px;
  }
  /* 寸法の修飾子が付かない .btn（記事詳細の「お知らせ一覧へ」など）の受け皿。
     未指定だと PC値 calc(12 * var(--s)) を継承して 375px で 3.7px になる。
     ページ個別CSSは後から読まれるので、そちらの指定が優先される */
  /* 寸法の修飾子が付かない .btn（記事詳細の「お知らせ一覧へ」など）の受け皿。
     未指定だと PC値を継承して 375px で高さ14.3px・文字3.7pxまで潰れる。
     ページ個別CSSは後から読まれるので、そちらの指定が優先される */
  .btn {
    height: auto;
    min-height: 46px;
    padding: 0 20px;
    gap: 8px;
    font-size: 15px;
  }
  /* 矢印の丸。.header-contact / .btn--top / .service-card__btn などは
     それぞれ個別に持っているが、素の .btn 用の受け皿が無かった */
  .btn__arrow {
    width: 22px;
    height: 22px;
  }
  /* 丸の中の矢印そのもの。ここだけどこからも上書きされておらず、
     SPでは丸の大きさに関係なく 3.4×2.8px まで潰れていた
     （丸22pxのSP固定バーやトップのCTAでも同じ）。PSD比 11/22 = 0.5 を保つ */
  .btn__arrow::after {
    width: 11px;
    height: 9px;
  }
  .anchor-nav:not(.anchor-nav--icon) {
    gap: 16px;
    padding: 32px 0 56px;
  }
  /* SPは固定262pxをやめて2列で幅いっぱいに。端数は1個だけ中央に残る */
  .anchor-nav:not(.anchor-nav--icon) a {
    flex-basis: calc(50% - 8px);
    min-height: 52px;
    padding: 8px 34px 8px 10px;
    border-radius: 6px;
    border-width: 1px;
  }
  .anchor-nav:not(.anchor-nav--icon) .anchor-nav__arrow {
    right: 10px;
  }
  .anchor-nav__label {
    font-size: 15px;
  }
  /* アイコン付きは SPカンプ（ユーザー支給）で構成が変わる:
       ・共通の枠をやめ、項目ごとに独立した箱（白地・線2px・角丸16）にする
       ・箱の中はアイコン円が左、ラベルが右（PCの縦並びではない）
       ・矢印は箱の下辺をまたいで中央に置く
     カンプ実測(375px換算): 箱169×65 ／ 横gap8 ／ 縦gap24.5 ／ 左右アキ16
                          円53 ／ 左アキ14 ／ 円→ラベル13 ／ 矢印22（下辺に半分） */
  .anchor-nav--icon {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: auto;
    /* 768px付近で箱が364pxまで広がって中身が左に寄るため、500pxで止めて中央寄せ。
       狭い幅では左右16pxのアキを残す */
    width: calc(100% - 32px);
    max-width: 500px;
    /* 矢印が下辺から約11pxはみ出すので、行間はその分を足して確保する */
    margin: 32px auto 70px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    gap: 18px 6px;
  }
  .anchor-nav--icon a {
    position: relative;
    flex-direction: row;
    justify-content: flex-start;
    min-height: 65px;
    margin-top: 0;
    padding: 4px 10px;
    gap: 10px;
    border: 1px solid var(--teal);
    border-radius: 8px;
    background: #fff;
  }
  /* カンプは53pxだが、375px幅で「睡眠障害内科」(6字)が1行に収まらないため50pxに落とす */
  .anchor-nav__icon {
    width: 50px;
    height: 50px;
  }
  /* 箱の下辺の中央に、円の半分をはみ出させて置く */
  .anchor-nav--icon .anchor-nav__arrow {
    position: absolute;
    left: 50%;
    bottom: -13px;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
  }
  .anchor-nav--icon .anchor-nav__arrow::after {
    width: 9px;
    height: 11px;
  }
}

/* ---- スマホのFV（ユーザー支給のSPカンプ準拠）--------------------------
   ・写真は画面の左端いっぱい（左は角丸なしで画面外へ抜ける）
   ・縦書きタイトルはそのまま写真の右に並べる
   ・写真はほぼ正方形（やや縦長）
   タブレット幅では正方形の写真が巨大になるので、この構成は600px以下に限る。
   **上の max-width:768px ブロックより後ろに置くこと**（同詳細度で後勝ちのため。
   前に置くと aspect-ratio 等が768px側に潰される）。
   カンプ実測(375px換算): 写真293×313 @x0 ／ タイトル44×233 @x306 ／ 縦比0.74 */
@media (max-width: 600px) {
  /* 左端いっぱいに出すため内枠の左アキを捨て、右アキだけ残す */
  .page-hero__inner {
    width: 100%;
    padding-right: 24px;
  }
  /* 左は画面外へ抜けるので角丸なし。右側だけ丸める */
  .page-hero__img {
    border-radius: 0 20px 20px 0;
  }
  /* max-height なしだと、正方形の比率が画面幅にそのまま比例して
     600px幅では高さ547pxまで伸びる。カンプの375px（高さ307px）を基準に
     340pxで止め、超える幅では cover でクロップする */
  .page-hero__img {
    aspect-ratio: 15 / 16;
  }
  /* アイコン付きの箱は、円(50)と左右アキを引くとラベルに約83pxしか残らない。
     最長の「睡眠障害内科」(6字)を1行に収めるため13px・字間0に落とす */
  .anchor-nav--icon .anchor-nav__label {
    font-size: 13px;
    letter-spacing: 0;
    line-height: 1.3;
  }
}

/* ---- アイコンなしページ内リンク：スマホも2列で通す ---------------------
   ラベルは14px・字間0・左揃え（ユーザー指示。12pxでは小さすぎた）。
   14pxは2列だとかなりギリギリなので、左アキ8・矢印20pxを右6pxまで詰めて
   ラベル用の幅を稼いでいる。375pxでボタン166.5px、線(4)+左8+右26を引いて残り128.5px
   ＝9文字まで1行。10文字の「お支払い方法について」だけ2行になる
   （行内のボタンは stretch で高さが揃うので段差にはならない）。
   **paddingや矢印サイズを戻すと9文字のラベルまで折り返す**ので、触ったら要実測。
   境界は520px。これより上ならラベル15pxのままでも矢印まで10px以上のアキが取れる
   （480pxにすると481〜490pxでアキが1px未満になった）。*/
@media (max-width: 520px) {
  .anchor-nav:not(.anchor-nav--icon) {
    gap: 8px 8px;
  }
  .anchor-nav:not(.anchor-nav--icon) a {
    flex-basis: calc(50% - 4px);
    /* 基底ルールの中央寄せを解いて左揃えにする */
    justify-content: flex-start;
    text-align: left;
    padding: 8px 26px 8px 8px;
  }
  .anchor-nav:not(.anchor-nav--icon) .anchor-nav__arrow {
    right: 6px;
    width: 20px;
    height: 20px;
  }
  .anchor-nav:not(.anchor-nav--icon) .anchor-nav__arrow::after {
    width: 8px;
    height: 10px;
  }
  .anchor-nav:not(.anchor-nav--icon) .anchor-nav__label {
    font-size: 14px;
    letter-spacing: 0;
  }
}

@media (max-width: 375px) {
  .container {
    width: calc(100% - 32px);
  }
}