@charset "UTF-8";

/* =========================================================
   四条大宮 くまクリニック - 共通スタイル
   デザインカンプ（1920px幅）からの実測値をもとに構成
   ========================================================= */

/* ---------------------------------------------------------
   1. デザイントークン
   --------------------------------------------------------- */
:root {
  /* 色（新カンプ kuma.xd のノードの塗り値。旧カンプの JPG の目視測定から置き換えた） */
  --c-cyan: #00afeb;
  --c-cyan-deep: #00a2e9;
  /* 在宅医療ページの定義ボックス・サポートカードの見出し */
  --c-cyan-light: #26c2ff;
  /* 先頭へ戻るボタンの地（#73）。白を載せて 3:1 を満たす深さまで --c-cyan を沈めた色
     （対白 3.42:1。--c-cyan に白は 2.52:1 で WCAG 2.2 1.4.11 に届かない）。
     3:1 はアイコンと輪郭の下限で、文字の 4.5:1 には足りないので文字には使わない */
  --c-cyan-contrast: #0195c9;
  --c-pink: #f66683;
  --c-badge-from: #fab77a;
  --c-badge-to: #f59488;
  --c-text: #1a1a1a;
  --c-text-sub: #555555;
  --c-bg-gray: #f8f8f8;
  --c-box: #f6f6f6;
  --c-placeholder: #e9e9e9;
  --c-rule: #cccccc;
  --c-border: #dddddd;
  /* ヘッダーの 3 ボタンを無効にしている間の地（#111）。彩度を落として、押せるシアンの
     ボタンと一目で別物にする。このサイトのグレーはすべて無彩色なので青みは混ぜない。
     **明るさは輪郭のコントラストで決まっている。** 白い帯・白いドロワーの上に置くので、
     WCAG 2.2 1.4.11（操作部品の輪郭 3:1）を満たす上限が #949494（3.03:1）。
     余裕を見て #8c8c8c にした（対白 3.36:1、塗った絵で測った最悪値 3.21:1）。
     載せる文字は有効時と同じ白（#124）。3.36:1 で本文の 4.5:1 には届かない */
  --c-disabled: #8c8c8c;

  /* レイアウト（1920px幅カンプの実測値）
     ヘッダー: 白帯 1920×120。要素の縦中心はいずれも y≒59
     コンテンツ: x 360〜1560 */
  --header-h: 120px;
  --content-w: 1200px;
  --content-pad: 40px;

  /* タイポグラフィ */
  /* 指定フォント: Kosugi Maru（Google Fonts）。丸ゴシック系でフォールバック */
  --font-base: "Kosugi Maru", "Hiragino Maru Gothic ProN", "Hiragino Sans",
    "Yu Gothic", "Meiryo", sans-serif;
  --line-rule: 35px; /* 罫線付き本文の1行の高さ */
}

/* ---------------------------------------------------------
   2. リセット
   --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* アンカーリンクがヘッダーに隠れないように */
  scroll-padding-top: 40px;
  /* タップした瞬間に UA が描く網掛けを消す。要素の border box に描かれるので、
     円のボタン（.gnav-toggle / .to-top）では角丸を無視した正方形に見える（#108）。
     継承するプロパティなので、押せる要素を数え上げずに文書全体へ届く */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: #fff;
  color: var(--c-text);
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

a:hover {
  opacity: 0.75;
}

table {
  border-collapse: collapse;
}

/* ---------------------------------------------------------
   3. 画像プレースホルダ
   素材支給までの仮置き。枠側で寸法を持ち、img は流し込むだけ。
   --------------------------------------------------------- */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--c-placeholder);
  color: #9a9a9a;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-align: center;
}

.ph > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 枠いっぱいに切らず全体を見せる素材（ロゴ・線画アイコン）。
   素材の縦横比が枠と違うため cover だと端が切れる */
.header__logo .ph > img,
.footer__logo .ph > img,
.card__icon > img,
.dept__icon > img {
  object-fit: contain;
}

/* 線画アイコンは XD では 90×90 の枠に「高さ 80・幅は絵柄なり」で中央に置かれている。
   SVG 側の viewBox は絵柄の外接矩形そのままなので、余白はここで作る。
   max-width は縦横比が枠（90/80 = 1.125）より横長の絵のためにある —— #150 の
   `icon-line-heart-pulse.svg` は 1.247 で、高さ側だけを抑えると幅が枠を越える */
.card__icon > img,
.dept__icon > img {
  width: auto;
  max-width: 100%;
  max-height: 80px;
}

/* ---------------------------------------------------------
   4. レイアウト（コンテナとセクション帯）
   --------------------------------------------------------- */
.container {
  width: min(var(--content-w), 100% - var(--content-pad) * 2);
  margin-inline: auto;
}

/* セクションの帯（白 / #f8f8f8 の交互）。カンプでは画面幅いっぱいに敷く。
   帯の上端からピルまで 100、最後の要素から帯の下端まで 150 が基本 */
.section {
  padding: 100px 0 150px;
}

/* 下余白だけカンプが違う帯（特長 170 / 診察時間 144 / 処置・検査とエリア 146）。
   カンプの下余白は帯の最後が箱なら 150 ぴったりだが、1 行のテキストで終わる帯は 144〜146
   になる。XD のテキスト枠と CSS の行箱の差（行箱はインクの下に行間が残る）なので、
   テキストで終わる 2 帯だけ 146 にすると帯の高さがカンプと一致する。
   `.section--treat` は #153 で home-care.html から about.html へ移したが、146 は
   「1 行のテキストで終わる帯」から出た値なので中身と一緒に持って行く。当院紹介のカンプに
   この帯は無いので、同ページの 140（`.section--tight`）は当てない */
.section--feature {
  padding-bottom: 170px;
}

.section--hours {
  padding-bottom: 144px;
}

.section--treat,
.section--area {
  padding-bottom: 146px;
}

/* 当院紹介のネーミングの由来・基本理念はカンプの下余白が 140 */
.section--tight {
  padding-bottom: 140px;
}

.section--gray {
  background: var(--c-bg-gray);
}

/* ---------------------------------------------------------
   5. ヘッダー
   --------------------------------------------------------- */
/* カンプは白帯 1920×120。通常フローに置く（旧実装は くま型パネルの margin-top と
   対にするため初期包含ブロック基準の position:absolute だった）。 */
.header {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding: 0 50px;
  background: #fff;
  z-index: 20;
}

/* 帯は不透明ではなく背景ぼかし（XD: fillOpacity 0.5 / blurAmount 25 / brightnessAmount 25）。
   トップのヒーロー写真だけが帯の下を通るので、効果が見えるのはトップだけ
   （他 3 ページは帯の下が白で、不透明の白と同じ見た目になる）。
   非対応ブラウザでは写真が 50% で透けて黒文字が読めなくなるため、
   既定は上の不透明のままにして、対応ブラウザだけ半透明に切り替える。
   XD の明度は加算（カンプ実測で +58/255）だが CSS の brightness() は乗算なので、
   地の不透明度を 0.5 → 0.6 に上げて帳尻を合わせている
   （結果 = 153 + 0.5×背景。カンプ実測の 156.5 + 0.5×背景 と 4 以内で一致する） */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header {
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(25px) brightness(1.25);
    backdrop-filter: blur(25px) brightness(1.25);
  }
}

/* ロゴ 233.5×70 / x=50。ロゴ自体の縦横比は 370:113 なので枠に contain で収める。
   ヘッダーは白地なので、ワードマークが濃色の logo-dark.svg を使う
   （フッターはシアン地なのでワードマークが白の logo.svg のまま） */
.header__logo {
  flex: none;
  display: block;
  width: 234px;
}

.header__logo .ph {
  aspect-ratio: 370 / 113;
  background: transparent;
  color: var(--c-cyan-deep);
}

/* 電話番号 268×48 / x=309。「おーいくまさん」は番号の上に載る小さな帯。
   吹き出しはフローの中に置く（縦の flex）。フロー外に出すと帯の中央そろえの対象が
   番号だけになり、吹き出しのぶんだけかたまりが上に寄る。カンプは吹き出しを含めた
   かたまりの中心が帯の中心（y≒59）に載っている。
   flex にすると <p> の行箱も無くなる。行箱があると、支柱（本文の line-height 1.9）が
   中の番号より高い幅で余りが下に落ち、番号が数 px 上に浮く。

   --tel-num（番号の文字サイズ）が電話番号エリアの唯一のつまみ。吹き出しの幅・文字・
   しっぽ・隙間はすべてここから引く。「おーいくまさん」は 0193 の語呂合わせなので、
   吹き出しは 0193 の 4 桁にぴったり載らないと意味が伝わらない —— 番号のサイズを
   段ごとに変えるこのサイトでは、吹き出しを番号から独立に持つと段のどこかで必ずずれる */
.header__tel {
  --tel-num: 32px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--tel-num) * 0.16);
  margin-left: 20px;
  color: var(--c-cyan-deep);
  white-space: nowrap;
}

.header__tel-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.header__tel-label {
  padding: 3px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.2;
}

.header__tel-number {
  font-size: var(--tel-num);
  letter-spacing: 0.01em;
  line-height: 1;
}

/* 番号の上に出る小さな吹き出し。カンプでは 0193 の 4 桁にぴったり載る
   （帯 x496→577 / 0193 のインク x497→577）。右端そろえは align-items:flex-end に任せ、
   幅は 0193 の 4 桁ぶんを --tel-num から引く（この書体・この字間での 0193 のインク幅は
   番号の文字サイズの 2.0 倍。撮影画像の列で実測）。カンプの帯はインクを左右 0.5 ずつ
   食む（帯 81 / インク 80）ので 2.03 倍にする。
   文字とその余白もカンプの比（帯 81 に対し文字の送り 63、左右 9 ずつ）で決める。
   幅を持たせて text-align:center で置くので、余白は左右に自動で割れる。
   letter-spacing は置かない。CTA の text-indent は末尾の字間の打ち消しなので、
   字間の無いここでは要らない（字面の左右のベアリング差から出るずれは 0.11px）。

   帯の高さは行の高さではなく padding で作る。高さは 1.6em で、上下の振り分けは
   幾何ではなく**塗った絵から出した値**。
   幾何どおりに割ると（この字面は行箱の上から 0.0525em / 下から 0.0775em にあるので
   上 0.3125 / 下 0.2875em。.cta__balloon がこれ）4 段のうち 2 段で字面が 1px 上に寄る ——
   Blink は書体の ascent / descent を整数 px に丸めてからベースラインを置き、地の箱も
   丸めるので、帯の y の小数部で結果が 1px 跳ぶ。字面 4.4〜7.1px のこの寸法では
   その 1px が帯の高さの 1/7 で、偏りとして見える。
   padding-top を振って 4 段すべてで塗られた字面が帯の上下対称に落ちる窓を探すと
   0.379〜0.384 の 1 つだけで、その中央を採った（測り方は docs/design-notes.md §8）。
   **1.37em では窓が存在しない**（1.43em 以上で初めて現れる）。帯を高くするのは意匠の
   判断ではなく、字面を中央に置くための必要条件。
   帯が高くなったぶんは番号が 0.5〜0.8px 下がるだけで吸収される —— .header がかたまりを
   縦中央に置くので、かたまりの中心はカンプの y≒59 に載ったまま動かない。
   **ヘッダーの寸法（番号の大きさ・帯の高さ・gap）を変えると窓は動く。**#85 で番号を
   大きくするなら測り直す。 */
.header__tel-note {
  position: relative;
  width: calc(var(--tel-num) * 2.03);
  border-radius: 999px;
  background: var(--c-cyan);
  color: #fff;
  padding: 0.3815em 0 0.2185em;
  font-size: calc(var(--tel-num) * 0.222);
  line-height: 1;
  text-align: center;
}

/* しっぽ。カンプは帯の横中央から下に出る細い三角（実測 3.7×4.4 / 帯の高さ 11.3 に対する比）。
   CTA の .cta__balloon::after は 0.27em × 0.3em で意匠が違うので、作り方だけ揃えて寸法は借りない。
   吹き出しの文字サイズ基準の em で持つので、--tel-num を変えれば一緒に縮む。
   透明ボーダーではなく clip-path で作るのは、ボーダーの太さが整数 px に丸められて
   段の下のほうで細りすぎるため（幅 3.2px の指定が 2px になる）。
   絶対配置なので吹き出しの箱の高さには入らない —— 下へ伸びるぶんは吹き出しと番号の
   隙間（.header__tel の gap）に収まるので、かたまりの上下中央そろえは動かない */
.header__tel-note::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0.45em;
  height: 0.53em;
  margin-left: -0.225em;
  background: var(--c-cyan);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* グロナビ。カンプでは地無しの黒文字 3 項目（16px）。項目の中心は x=820/961/1101。
   ボタン 3 個は同じ .gnav の中に置いてある（1240px 以下でまとめてドロワーへ入れるため）。
   flex:1 で残り幅を取り、ナビとボタンの双方に margin-left:auto を効かせて
   「電話番号 → ナビ」「ナビ → ボタン」の間隔を等分する。
   カンプの間隔は 171 / 137 で、1920px では 154 / 154 になる（狭い幅でも先に潰れない） */
.gnav {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.gnav__list {
  display: flex;
  align-items: center;
  margin-left: auto;
  white-space: nowrap;
}

.gnav__link {
  display: block;
  padding: 0 18px;
  color: var(--c-text);
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.gnav__link[aria-current="page"] {
  color: var(--c-cyan-deep);
}

/* シアンの丸ボタン 3 個。各 180×50 / 角丸 60 / x=1310・1500・1690 */
.header__actions {
  flex: none;
  display: flex;
  gap: 10px;
  margin-left: auto;
  white-space: nowrap;
}

/* 中身は <button>。ボタンは書体を継承しないので font-family を明示し、
   UA の枠を border: 0 で落とす（.gnav-toggle と同じ手） */
.header__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 50px;
  padding: 0 8px;
  border: 0;
  border-radius: 60px;
  background: var(--c-cyan);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
}

/* 3 個とも無効（#111）。連携する外部システムの URL が未定で、押しても行き先が無い。
   押す前から無効と分かるように地だけを無彩色へ落とし、文字は有効時と同じ白のまま残す（#124）。
   この組み合わせは 3.36:1 で本文の 4.5:1 には届かない。地を白文字が 4.5:1 を満たす濃さ
   （#767676 以下）まで沈める手は採らない —— 濃い地は押せるボタンに見えてしまい、
   無効であることが伝わらなくなる。無効でも文言は読ませる ——
   何のボタンかが伝わらないと、押したときに出る案内の意味も取れない。
   a:hover の opacity（2章）は <button> 化で自然に外れる。押せそうな反応を残さない */
.header__btn[aria-disabled="true"] {
  background: var(--c-disabled);
  cursor: default;
}

/* ボタンと案内の組。案内をボタンの真下に置くための基準 */
.header__action {
  position: relative;
}

/* 無効なボタンを押したときに出る案内（#111）。hidden の付け外しは main.js 6 節。
   白地に --c-cyan の輪郭。既存の吹き出し（.header__tel-note / .cta__balloon）は
   シアン地に白文字で 2.52:1 しかなく、必ず読ませたいこの文には使えない。形だけ借りる。
   **display は宣言しない** —— 宣言すると hidden 属性（UA の display: none）に作者スタイルが
   勝ってしまい、JS が隠せなくなる。宣言しなくても width が効くのは、絶対配置が
   ブロック化するから。ドロワー（15章）も絶対配置のままにしてあるので、
   どの幅でもこれが成り立つ。
   折り返しは HTML の <br> で決める（.intro__title などと同じ流儀）。text-wrap: balance に
   任せると「こちらの機能は9/1以 / 降に公開となります」と「以降」の途中で折れる。
   幅は max() で、デスクトップでは <br> の 2 行目（実測 151px）が収まる下限から取り、
   ドロワーではボタン幅に合わせる。1920px でいちばん右のボタン（中心 x=1780）の下でも
   200px なら 1680〜1880 に収まり、画面の外へ出ない。
   pointer-events を切るのは、ドロワーで隣のボタンに重なるため —— 素通しにして下のボタンを
   そのまま押せるようにする（案内は別の場所を押せば閉じる）。
   ドロワーでは向きが上下逆になる（15章、#126） */
.header__note {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 1;
  translate: -50% 0;
  margin-top: 10px;
  width: max(100%, 200px);
  padding: 8px 14px;
  border: 1px solid var(--c-cyan);
  border-radius: 10px;
  background: #fff;
  color: var(--c-text);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  white-space: normal;
  pointer-events: none;
}

/* しっぽ。既存の 2 つは clip-path の三角だが、あれは輪郭を持たない塗りだけの三角。
   ここは輪郭があるので、45 度に回した正方形の隣り合う 2 辺にだけ輪郭を引いて「^」を作る。
   正方形の白い地が吹き出しの上辺の輪郭を跨いで覆うので、しっぽの内側と吹き出しの内側がつながる。
   **重ねる量は「回転後の左右の角が吹き出しの輪郭線に乗る」ところで止める（#130）。**
   その角は輪郭線 2 本の末端なので、白地の中まで入ると短い斜線が 2 本突き出して見える。
   塗りだけの 2 つは地も吹き出しも同じシアンで、跨いだ先が見えないからこの制約が無い。
   絶対配置の基準はパディングボックス（＝枠線 1px の内側）なので、-4px で回転後の中心と左右の角が
   吹き出しの外形の上端にちょうど乗る。半端な値は使えない —— -4.5px は -5px に丸められて描かれる（実測） */
.header__note::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: -4px;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  border: 1px solid var(--c-cyan);
  border-width: 1px 0 0 1px;
  background: #fff;
  rotate: 45deg;
}

/* ハンバーガー（ドロワーに切り替わる幅から表示） */
.gnav-toggle {
  display: none;
  position: absolute;
  top: 50%;
  right: 16px;
  margin-top: -23px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-cyan);
  cursor: pointer;
  z-index: 30;
}

.gnav-toggle__bar,
.gnav-toggle__bar::before,
.gnav-toggle__bar::after {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  background: #fff;
  translate: -50% 0;
  transition: translate 0.25s ease, rotate 0.25s ease, opacity 0.2s ease;
}

.gnav-toggle__bar {
  top: 50%;
  margin-top: -1px;
}

.gnav-toggle__bar::before,
.gnav-toggle__bar::after {
  content: "";
  left: 0;
  translate: 0 0;
}

.gnav-toggle__bar::before {
  top: -7px;
}

.gnav-toggle__bar::after {
  top: 7px;
}

.gnav-toggle[aria-expanded="true"] .gnav-toggle__bar {
  background: transparent;
}

.gnav-toggle[aria-expanded="true"] .gnav-toggle__bar::before {
  translate: 0 7px;
  rotate: 45deg;
}

.gnav-toggle[aria-expanded="true"] .gnav-toggle__bar::after {
  translate: 0 -7px;
  rotate: -45deg;
}

/* ---------------------------------------------------------
   6. 見出し
   --------------------------------------------------------- */
/* ピンクのピル型セクション見出し。カンプは 角丸 10 / 白 24px で、幅は 300 / 400 / 500 の 3 種。
   文字数は 4〜7 / 11 / 16 なので、24px の字面（全角 24px）に左右 66px を足すと
   4〜7文字→228〜300（min-width が効いて 300）、11文字→396、16文字→504 になり、
   4 アートボードのピルが 1 つの規則で出る。300 は下限として横に伸ばす */
.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 300px;
  min-height: 60px;
  padding: 0 66px;
  margin: 0 auto 50px;
  border-radius: 10px;
  background: var(--c-pink);
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-align: center;
}

/* ページタイトル（下層ページ）
   カンプは 2 行とも `#00AFEB`（= --c-cyan）で 24px / 40px、字送りは 0。
   ヘッダー（120）の下 56 から 24px の行、その 21 下に 40px の行が来る。
   行送りを 1 にして行箱＝字面にし、余白は padding / margin で持つ */
.page-title {
  padding: 56px 0 0;
  color: var(--c-cyan);
  text-align: center;
}

.page-title__sub {
  display: block;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.page-title__main {
  display: block;
  margin-top: 21px;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
}

/* お知らせのページタイトル。カンプは上段の小見出しが無く、ヘッダーの帯の下 89px から
   40px の行（行送り 60）が始まる。字送りはインク幅（4文字 159.2px）から 0 と読める。
   色とウェイトは #62 で `.page-title` 側に統一したので、ここは差分だけ持つ */
.page-title--solo {
  padding-top: 89px;
  font-size: 40px;
  line-height: 60px;
}

/* ---------------------------------------------------------
   7. 罫線付きの本文（カンプの薄い横罫を再現）
   --------------------------------------------------------- */
/* 罫の色は --rule-color で差し替える（シアン地では白）。
   1行の高さ = 罫のピッチなので --line-rule を両方に使う */
.ruled {
  --rule-color: var(--c-rule);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--line-rule) - 1px),
    var(--rule-color) calc(var(--line-rule) - 1px),
    var(--rule-color) var(--line-rule)
  );
  font-size: 14px;
  line-height: var(--line-rule);
}

/* ---------------------------------------------------------
   8. カード
   --------------------------------------------------------- */
/* カンプのカードは 590×320 / 角丸 20 / 影は dx3 dy3 ぼかし5 黒16%。
   内側の余白は左右 50・上 30。アイコン枠 90×90 の右 50 から見出しが始まる。

   寸法は**リストの幅（1200px = 100cqw）を分母にした比率**で書く。固定 px だと
   コンテンツ幅が 1200 を割った時点（1264px 以下）にアイコンと余白の 190px が
   居座り、見出しの入る幅だけが潰れて「頼れるホームド／クタ／ー・」のように
   単語の途中で折り返す。比率にすると 1行あたりの文字数がカンプと同じまま縮む。
   文字は下限を付けて小さくなり過ぎないようにしている（767px 以下は 1 段組みに
   なってこの比率が成立しないので、その帯で固定値に差し替える） */
.card {
  padding: 2.5cqw 4.1667cqw;
  border-radius: 20px;
  background: #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.16);
}

.card__head {
  display: flex;
  align-items: center;
  gap: 4.1667cqw;
  margin-bottom: 1.25cqw;
}

.card__icon {
  flex: 0 0 auto;
  width: 7.5cqw;
  height: 7.5cqw;
  background: transparent;
}

.card__icon > img {
  max-height: 6.6667cqw;
}

.card__title {
  color: var(--c-cyan);
  font-size: max(17px, 2.5cqw);
  font-weight: 400;
  line-height: 1.3333;
}

.card__body {
  --line-rule: max(24px, 2.5cqw);
  font-size: max(13px, 1.3333cqw);
  min-height: calc(var(--line-rule) * 4);
}

/* 特長：2列 */
.feature-list {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.feature-list .card {
  min-height: 26.6667cqw;
}

/* 診療科目：2列の横並びカード。寸法の比率化の理由は .card と同じ */
.dept-list {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.dept-list > li {
  display: flex;
}

/* カンプは 590×150 / 角丸 20。内側の余白は左右 40・上下 30 */
.dept {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2.5cqw;
  min-height: 12.5cqw;
  padding: 2.5cqw 3.3333cqw;
  border-radius: 20px;
  background: #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.16);
}

.dept__icon {
  flex: 0 0 auto;
  width: 7.5cqw;
  height: 7.5cqw;
  background: transparent;
}

.dept__icon > img {
  max-height: 6.6667cqw;
}

.dept__title {
  color: var(--c-cyan);
  font-size: max(17px, 2.5cqw);
  font-weight: 400;
  line-height: 1.3333;
}

/* 見出しの括弧書きは割らない。和文は既定でどこでも折れるので、320px 幅の
   「内科（消化器・呼吸器）」は「…消化器・／呼吸器）」と括弧の途中で切れる ——
   design-notes「特長・診療科目カードの寸法」の行と同じ壊れ方。
   丸ごと次の行へ送って「内科／（消化器・呼吸器）」にする */
.dept__title-note {
  white-space: nowrap;
}

.dept__text {
  margin-top: 1.1667cqw;
  font-size: max(13px, 1.3333cqw);
  line-height: 1.75;
}

/* リンクカードの丸い矢印。円 28φ で中心はカード右端から 43 */
.dept--link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2.4167cqw;
  width: 2.3333cqw;
  height: 2.3333cqw;
  margin-top: -1.1667cqw;
  border-radius: 50%;
  /* 三角は XD の実測で 7×8。円の中心から右へ 1.5 ずれている */
  background: var(--c-pink)
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M12 10 L19 14 L12 18 Z' fill='%23fff'/%3E%3C/svg%3E")
    center / 28px 28px no-repeat;
}

/* サポートカード（3列・在宅医療ページ）
   カンプは 390×390 / 角丸 20 / 間隔 15、影は .card と同じ dx3 dy3 ぼかし5 黒16.1%。
   カード上端から アイコン 64、アイコンの箱 76、見出しのベースライン 200、本文の枠 231。
   寸法は .card と同じ理由でリスト幅（1200px = 100cqw）基準の比率で書く。
   固定 px だと 1263px 幅でカードの内寸が 229px しかなく、字面 270px の
   「緩和ケア・お看取り」が単語の途中で折り返す */
.support-list {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* cqw をコンテナ自身のプロパティに書くと親のコンテナ（ここでは表示域）基準で
     解決されてしまうので、間隔だけは固定 px で書く */
  gap: 15px;
}

.support {
  display: flex;
  flex-direction: column;
  min-height: 32.5cqw;
  /* 下余白 20 はカンプに無い（カンプは本文が箱の 39 上で終わる余りの結果）。
     中間幅で本文が 5 行になると余りが 0 になり、丸角に文字が触るので下限として持たせる。
     1920px では中身が 371 で min-height の 390 に収まるので寸法は変わらない */
  padding: 5.3333cqw 3.4167cqw 1.6667cqw;
  border-radius: 20px;
  background: #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.16);
}

/* 3点の絵柄は高さが 69.84 / 75.44 / 71.56 でそろっていない。箱は一番高いものに合わせ、
   絵は原寸のまま中央に置く（箱が縮む幅では max-height で比例して縮む） */
.support__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.3333cqw;
}

.support__icon > img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

.support__title {
  margin-top: 2.3833cqw;
  color: var(--c-cyan-light);
  font-size: max(19px, 2.5cqw);
  font-weight: 400;
  line-height: 1.3333;
  text-align: center;
}

.support__body {
  --line-rule: max(24px, 2.5cqw);
  margin-top: 1.8667cqw;
  font-size: max(13px, 1.3333cqw);
}

/* 定義ボックス（在宅医療とは / 訪問診療とは）
   カンプは 590×250 / 角丸 20 / #F6F6F6 / 間隔 20。ボックス上端から見出しのベースライン 65、
   本文の枠 94（左右余白 50・幅 490）。下余白は本文の行高と同じ式にして見た目にも 1 文字分を
   確保し、高さは min-height で持つ（Kosugi Maru は代替フォントなので 1 行増えると溢れる）。
   寸法をリスト幅基準の比率で書く理由は .card と同じ */
.def-list {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 間隔を cqw で書けない理由は .support-list と同じ */
  gap: 20px;
}

.def {
  min-height: 20.8333cqw;
  padding: 2.8cqw 4.1667cqw max(24px, 2.5cqw);
  border-radius: 20px;
  background: var(--c-box);
}

.def__title {
  margin-bottom: 1.7cqw;
  color: var(--c-cyan-light);
  font-size: max(19px, 2.5cqw);
  font-weight: 400;
  line-height: 1.3333;
  text-align: center;
}

.def__body {
  --line-rule: max(24px, 2.5cqw);
  font-size: max(13px, 1.3333cqw);
}

/* ---------------------------------------------------------
   9. ボタン
   --------------------------------------------------------- */
/* カンプは 200×50 / 角丸 50 / 地なしの枠線 1px。文字と枠線は同色 */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 50px;
  margin: 22px auto 0;
  border: 1px solid currentColor;
  border-radius: 50px;
  color: var(--c-cyan);
  font-size: 14px;
  letter-spacing: 0.02em;
  text-align: center;
}

/* シアン地に載るボタン（院長のごあいさつ） */
.btn--on-cyan {
  color: #fff;
}

/* --- 院内掲示事項の PDF ボタン ---
   カンプに無い追加。塗りのピルは `.btn`（200px 固定・枠線・14px）ではなく
   ヘッダーの `.header__btn` と同じ意匠で、幅だけ文言に合わせて伸ばす。
   高さは `.pill` と同じ 60、上の余白も `.pill` の下余白と同じ 50 にして帯の律を保つ。
   狭い幅の寸法は 15章にある。基本の指定を 15章より後ろの章に置くと、
   同じ詳細度では後ろが勝ってメディアクエリが効かないので、この章に書いている。 */
.notice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 60px;
  padding: 12px 40px;
  margin: 50px auto 0;
  border-radius: 60px;
  background: var(--c-cyan);
  color: #fff;
  font-size: 18px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-align: center;
  /* 和文は既定でどこでも折れるので、素のままだと 375px 幅で
     「…ウェブサイトへの掲／載事項一覧」と語の途中で切れる。keep-all にすると
     折り返せるのは文言に入っている半角空白の位置だけになり、
     「院内掲示事項 及び」と「ウェブサイトへの掲載事項一覧」の 2 行に割れる。
     長いほうの塊は折れなくなるので、それが入る大きさを 15章で確保する */
  word-break: keep-all;
}

/* --- ページ先頭へ戻るボタン ---
   カンプに無い追加（#73）。スクロール量の多いレイアウトなので全ページの右下に置く。
   出現の切り替えだけ main.js が持ち、スクロールの速さと減光設定時の即ジャンプは
   2章の scroll-behavior と 16章の上書きに任せている。
   狭い幅の寸法は 15章にある。基本の指定を 15章より後ろの章に置くと、
   同じ詳細度では後ろが勝ってメディアクエリが効かないので、この章に書いている。 */
.to-top {
  /* 山形の一辺。軸の長さと連動するので、寸法を変えるのはここだけでよい */
  --to-top-arrow: 14px;
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-cyan-contrast);
  /* 白の輪は、シアンの帯やフッター・写真の上に来たときの輪郭。地の色だけでは
     --c-cyan の帯との比が 1.36:1 しかなく、円のかたちが読めなくなる。
     白地・灰地の上では見えないので、明るい地では素の円のままになる */
  box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s, box-shadow 0.2s ease;
  /* ドロワー（28）とトグル（30）の下、本文の上 */
  z-index: 25;
}

/* 隠すのは visibility なので、出ていないあいだはタブ順と読み上げからも外れる。
   フォーカス中でも先頭に着いたら隠す。隠れるとフォーカスは body に落ち、
   次の Tab は文書の先頭（ヘッダーのロゴ）へ行くので、見えている位置と合う。
   :focus-visible で出したままにすると、フォーカスが文書末尾のこのボタンに
   留まり、次の Tab が文書の外へ出てしまう（Chromium で実測） */
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

/* 地の色は変えない。薄くすると白の矢印が 3:1 を割るため、手応えは影の濃さで出す */
.to-top:hover {
  box-shadow: 0 0 0 2px #fff, 0 6px 16px rgba(0, 0, 0, 0.24);
}

/* 矢印は CSS で描く（.gnav-toggle__bar と同じ流儀。素材もアイコンフォントも足さない）。
   ::before が山形、::after が軸。どちらもボタンの中心に重ねて置く */
.to-top::before,
.to-top::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

/* 2 辺だけに線を引いた正方形を 45 度回すと上向きの山形になる。
   回転の中心はボタンの中心なので、頂点は中心から 一辺÷√2 だけ上に来る */
.to-top::before {
  width: var(--to-top-arrow);
  height: var(--to-top-arrow);
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  rotate: 45deg;
}

/* 軸の長さ = 一辺 × √2。こうすると軸の上端が山形の頂点と一致する */
.to-top::after {
  width: 2px;
  height: calc(var(--to-top-arrow) * 1.41);
  background: #fff;
}

/* ---------------------------------------------------------
   10. 診察時間テーブル
   --------------------------------------------------------- */
.hours {
  overflow-x: auto;
}

/* カンプの表は 600×240。1列目 149.2 ＋ 曜日 7 列 64.3 / 3 行 79.8 */
.hours__table {
  width: 600px;
  margin: 0 auto;
  border: 1px solid var(--c-border);
  table-layout: fixed;
  text-align: center;
}

.hours__table th,
.hours__table td {
  height: 80px;
  border: 1px solid var(--c-border);
  font-weight: 400;
}

.hours__table thead th {
  font-size: 20px;
}

/* 1列目だけ広いので字間を開けて幅を埋める（カンプの「受付時間」は 104px 幅） */
.hours__table thead th:first-child {
  width: 150px;
  letter-spacing: 0.28em;
}

/* 時間帯は 1列目（150px）に収める。診察時間は最も参照される情報なので、
   カンプにある伸ばし棒の前後のスペースを詰めて（Kosugi Maru の空白は 0.5em ある）
   その分を文字の大きさに回している。22px で「16:00−19:00」のインクは 132px */
.hours__table tbody th {
  padding: 0 8px;
  font-size: 22px;
  white-space: nowrap;
}

/* ●／− はカンプでは #00A2E9（= --c-cyan-deep）。--c-cyan より一段深い */
.hours__table tbody td {
  color: var(--c-cyan-deep);
  font-size: 24px;
}

.hours__note {
  margin-top: 21px;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}

.hours__note span + span {
  margin-left: 1.6em;
}

/* ---------------------------------------------------------
   11. 下部CTA
   --------------------------------------------------------- */
/* 下余白 144 は電話番号のインク位置合わせの結果（フッターの上端を 6660 に合わせる） */
.cta {
  padding: 100px 0 144px;
  text-align: center;
}

.cta__lead {
  color: var(--c-cyan-deep);
  font-size: 50px;
  font-weight: 400;
  line-height: 1.2;
}

/* カンプの電話番号のかたまりは 6422〜6509 で、上端は吹き出し。
   --tel-num（番号の文字サイズ）がこのかたまりの唯一のつまみで、吹き出しの幅・文字・
   しっぽ・番号との隙間はすべてここから引く（ヘッダーの .header__tel と同じ作り）。
   「おーいくまさん」は 0193 の語呂合わせなので、吹き出しがその 4 桁に載らないと
   読みが伝わらない —— 番号のサイズを段ごとに変えるこのサイトでは、吹き出しの寸法を
   番号から独立に持つとどこかの段で必ずずれる。
   吹き出しはフローの中に置く（縦の flex の 1 段目）。絶対配置のままだと箱の高さを
   持たず、余白の詰まるモバイルで見出しに被る（#83。767px 以下で 10.1px 食い込んでいた）。
   gap はカンプの「帯の下端 → 番号のインク上端 16」を実装の 0193 の幅（カンプの 0.93 倍。
   カンプの数字はアウトライン化された別の書体で字面が広い）へ縮めた 14.9 から、番号の箱の
   上端とインク上端のずれ 8.5 を引いた値。しっぽが下へ出るぶんもここに収まる。
   インラインではなくブロックの flex にして、中央そろえは fit-content + auto で取る。
   インラインのままだと行箱の支柱（body の line-height 1.9）が絡み、しかも縦の flex の
   ベースラインは 1 段目＝吹き出しの行から取られるため、支柱のほうが高くなる狭い段で
   margin-top より下へ押し出される（767px 段で実測 +0.9px）。番号の位置を body の
   行送りに握らせないためにブロックにする。
   margin-top は見出しの箱の下端からの距離で、段ごとに違う。吹き出しがフローに入った
   ぶん（帯の高さ + gap）を引いて、番号のインク位置が動かない値にしてある ——
   .cta の下余白 144 と対でフッターの上端をカンプの y6660 に載せているので、
   かたまりが動くとフッターも動く */
.cta__tel-wrap {
  --tel-num: 70px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--tel-num) * 0.09);
  width: fit-content;
  margin: 29px auto 0;
}

.cta__tel {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--c-cyan-deep);
}

.cta__tel:hover {
  opacity: 0.8;
}

/* カンプの TEL 枠は 58×49 / 角丸 3 */
.cta__tel-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 49px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 17px;
  line-height: 1.2;
}

/* カンプの番号はアウトライン化文字。字面の高さより横幅（420px）を合わせている
   （Kosugi Maru は数字の字面が低いので、高さを合わせると横に溢れる） */
.cta__tel-number {
  font-size: var(--tel-num);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* 番号の上に出る吹き出し。カンプでは 0193 の 4 桁にぴったり載る
   （帯 x1062→1208 / 0193 のインク x1063→1209、どちらも幅 147）。
   幅は 0193 の「送り枠」ではなく実インクから引く。Kosugi Maru のこの字間では
   インク幅 = 番号の文字サイズ × 1.9475（送り枠は 2.04 で、左 0.0425 / 右 0.05 の
   ベアリングが外側に付く）。右端そろえは align-items:flex-end に任せるが、それだけだと
   帯が送り枠の右端に付いて右のベアリングぶん外へ出るので、margin-right で 0.05 戻す。
   これで帯の左右が 0193 のインクに一致する。
   文字の大きさはカンプの比で決める（カンプの帯 146 に対し文字のインク 110 = 0.753。
   文字サイズ 0.2 倍でその比になる）。字間 0.08em を残したうえでの値なので、
   字間を触ると帯からあふれる。

   帯の高さだけはカンプより高くしてある（カンプ比 1.333em に対し 1.6em）。帯の幅は 0193 に
   固定なので、カンプ比のままだと上下の余白が左右の 1/5 しかなく、文字が窮屈に見える。
   もう一つ理由があって、**ブラウザは字面を 1px 刻みにしか置かない**（帯の位置は連続に
   動くのに字面は動かない。1/8px ずつずらして実測）。カンプ比では 375px 段の上下の余白が
   1.5px しかなく、この ±0.5px がそのまま偏りとして見える。1.6em にすると余白が 2.3px に
   なり埋もれる。

   帯の高さは行の高さではなく padding で作る。この書体の字面は行箱の上から 0.0525em /
   下から 0.0775em の位置にあって上下非対称なので、行の高さで高さを作ると半送りが上下
   同じだけ付いて字面が 0.0125em 上に寄る。上 0.3125 / 下 0.2875em にすると字面の上下が
   0.365em ずつで揃う。
   text-indent は末尾の字間の打ち消し。text-align:center は字間を含んだ送り幅を中央に置くので、
   何もしないと字面が末尾の 0.08em の半分ぶん左へ寄る。
   角丸は 999px。カンプは丸端で、12px 固定だと帯の低くなるモバイルで角丸の矩形に化ける */
.cta__balloon {
  position: relative;
  width: calc(var(--tel-num) * 1.9475);
  margin-right: calc(var(--tel-num) * 0.05);
  border-radius: 999px;
  background: var(--c-cyan);
  color: #fff;
  padding: 0.3125em 0 0.2875em;
  font-size: calc(var(--tel-num) * 0.2);
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-indent: 0.08em;
}

/* しっぽ。カンプは帯の横中央から下に出る三角（実測 幅 4 / 高さ 4.5、帯の高さ 20 に対する比）。
   吹き出しの文字サイズ基準の em で持つので、--tel-num を変えれば一緒に縮む。
   透明ボーダーではなく clip-path で作るのは、ボーダーの太さが整数 px に丸められて
   狭い段で細りすぎるため。絶対配置なので吹き出しの箱の高さには入らず、
   下へ出るぶんは .cta__tel-wrap の gap に収まる */
.cta__balloon::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0.27em;
  height: 0.3em;
  margin-left: -0.135em;
  background: var(--c-cyan);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ---------------------------------------------------------
   12. フッター
   --------------------------------------------------------- */
.footer {
  padding: 51px 0 97px;
  background: var(--c-cyan);
  color: #fff;
  text-align: center;
}

.fnav {
  display: flex;
  justify-content: center;
  font-size: 16px;
}

.fnav__item + .fnav__item {
  border-left: 1px solid rgba(255, 255, 255, 0.6);
}

.fnav__link {
  display: block;
  padding: 0 22px;
  line-height: 1.2;
}

.footer__logo {
  width: 328px;
  margin: 51px auto 22px;
}

.footer__logo .ph {
  aspect-ratio: 370 / 113;
  background: transparent;
  color: #fff;
}

.footer__address,
.footer__tel {
  font-size: 15px;
  line-height: 2;
}

.footer__tel span + span {
  margin-left: 1.4em;
}

/* ---------------------------------------------------------
   13. トップページ
   カンプ（1920×7056）の実測値。y はアートボード原点から。
   --------------------------------------------------------- */
/* --- ヒーロー ---
   カンプは写真を y=0 から 1920×1280 で敷き、上端 1000 で切っている。
   その上 120px を半透明の白帯（ヘッダー）が覆うので、帯の下に出るのは 880px 分。
   枠を 1920:1000 にして負のマージンでヘッダーの下へ回すと、
   background-size: cover ＋ top がそのままカンプの切り出しと一致する。
   中の要素（キャッチ・バッジ・お知らせ導線）は枠に対する % で置く
   （枠が固定比なので、どの幅でもカンプと同じ構図になる）。 */
.hero-b {
  --hero-img: url("../img/hero-photo.jpg");
  position: relative;
  container-type: inline-size;
  margin-top: calc(var(--header-h) * -1);
  aspect-ratio: 1920 / 1000;
}

/* 写真は背景で敷く。代替テキストを持たせるため要素は残し role="img" を付ける */
.hero-b__media {
  position: absolute;
  inset: 0;
  background-color: var(--c-placeholder);
  background-image: var(--hero-img);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

/* 縦書きキャッチ。インク枠 x 752〜919 / y 307.6〜642。字送り 27.1・行送り 47.7。
   カンプの色は #232323。#182 の写真は 2 人の間の壁が帯の全高で明るく、字面のコントラストは
   8 幅の実測で最小 14.33・4.5:1 割れ 0.00%（PC / SP とも）。
   白の淡い光彩は #160 の写真（字面の 4.4% が 4.5:1 を割っていた）のために入れたもので、
   いまは無くても最小 13.03・割れ 0.00% になる。外すかは #183 で決める。
   字の形は変えたくないので縁取り（-webkit-text-stroke）ではなく影。em なので
   15px〜36px のどの段でも同じ見え方になる */
.hero-b__catch {
  position: absolute;
  top: 30.5%;
  right: 51.5%;
  color: var(--c-text);
  font-size: max(15px, 1.406cqw);
  font-weight: 400;
  line-height: 1.767;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-shadow: 0 0 0.15em #fff, 0 0 0.3em #fff;
}

/* 開院バッジ。円 261φ / 左 73・上 672。中の文字は円に対する比率で決まっているので
   バッジ自身をコンテナにして cqw で組む */
.badge {
  position: absolute;
  top: 67.2%;
  left: 3.802%;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 13.594%;
  aspect-ratio: 1;
  border-radius: 50%;
  /* XD: 線形グラデーション。勾配線が円より短いので色止めを内側に寄せる */
  background: linear-gradient(
    242.5deg,
    var(--c-badge-from) 13%,
    var(--c-badge-to) 87%
  );
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
  color: #fff;
  text-align: center;
  z-index: 2;
}

/* 「2026.9.1」27px ＋ その下の白罫 110.8×2 を border-bottom で兼ねる */
.badge__date {
  width: 42.45cqw;
  margin-top: 16.17cqw;
  padding-bottom: 2.34cqw;
  border-bottom: 2px solid #fff;
  font-size: 10.345cqw;
  font-weight: 700;
  line-height: 1;
}

.badge__open {
  margin-top: 4.83cqw;
  font-size: 20.31cqw;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.17;
}

/* お知らせ導線。カンプは白 800×80 / 角丸 96（高さの半分で丸に落ちる）。
   中身は assets/data/news.json の最新1件を main.js が描く（3章）。描けなかったときは
   枠ごと出さないので、HTML 側は hidden を持っている。
   文字はカンプ（1920px で 16px）より 1 段大きい（#138）。cqw の基準は全幅の .hero-b なので
   係数だけ上げても 1600px 未満では下限に張り付いたまま動かない。下限も本文の 15px に上げる */
.news-bar {
  position: absolute;
  top: 86.5%;
  left: 29.167%;
  display: flex;
  align-items: center;
  width: 41.667%;
  height: 8%;
  border-radius: 999px;
  background: #fff;
  font-size: max(15px, 0.9375cqw);
  z-index: 2;
}

/* `display: flex` を持つこのセレクタは `[hidden]` の UA 規則（display: none）に勝つので、
   非表示の指定を明示する。書き忘れると取得失敗時に空の白バーがヒーローの上に残る */
.news-bar[hidden] {
  display: none;
}

/* リンクはバー全体（800×80）に効かせる。カンプの「▼」を出さないので、バー全体が
   押せることが唯一の手がかりになる。
   中身は左そろえ（#69）。カンプは日付と件名のかたまりを x=757 に中央そろえしているが、
   短い件名だと左に大きな空きが出るので、この 1 点だけカンプに従わない */
.news-bar__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7em;
  width: 100%;
  height: 100%;
  padding: 0 6%;
  color: var(--c-pink);
}

/* 日付はカンプでは黒。件名だけがピンク */
.news-bar__date {
  flex: none;
  color: var(--c-text);
}

/* カンプは件名に下線が付く。リセットで a の text-decoration を消しているので明示する。
   件名が長くなっても折り返せない（バーの高さは固定）ので 1 行のまま切る。
   flex アイテムの min-width は既定が auto で、0 にしないと縮まず ellipsis が出ない */
.news-bar__title {
  min-width: 0;
  overflow: hidden;
  text-decoration: underline;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 導入 ---
   カンプは画面を左右に二分し、左にシアン 960×960、右に縦写真 960×960。
   テキストは 500 幅で、左右・上下とも 230 前後の余白で中央に置かれている。
   余白を % で持たせると 1920px でちょうど正方形になり、狭い幅でも比率が崩れない。
   文字は「枠の半分」が狭くなると小さくなり過ぎるので max() で下限を付ける */
/* cqw はコンテナの「コンテンツボックス」基準なので、余白を持つセル側をコンテナに
   すると padding のぶん基準が縮む。セクション（＝画面幅）をコンテナにして、
   カンプの 1920px を分母に書く */
.intro {
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.intro__text {
  display: grid;
  align-content: center;
  padding: 24.27% 23.958%;
  background: var(--c-cyan);
  color: #fff;
}

.intro__title {
  margin-bottom: 0.8em;
  font-size: max(21px, 1.5625cqw);
  font-weight: 400;
  line-height: 1.667;
}

.intro__lead {
  font-size: max(15px, 0.8333cqw);
  line-height: 1.875;
}

/* 写真は行の高さいっぱいに伸ばす（`align-self` の既定が stretch）。
   `aspect-ratio` を持たせると伸びずに正方のままになり、文字が正方に収まらない幅で
   シアンの帯だけが下に伸びて隙間が出る。1920px で 960×960 になる下限だけ与える
   （`50cqw` = セクション幅の半分 = セルの幅） */
.intro__photo {
  min-height: 50cqw;
}

/* 枠の高さは行（＝文字側）で決まるので、写真が枠の高さを決めないよう絶対配置で敷く。
   `.ph > img` の `height: 100%` は、枠の高さが未確定だと原寸比まで伸びてしまう */
.intro__photo > img,
.greeting__photo > img {
  position: absolute;
  inset: 0;
}

/* 写真は #111 で桜と鹿（縦 1080×1620）からひまわり（横 2011×1248）に替わった。
   カンプの写真では無くなったので、XD の置き位置に合わせるための切り出しの調整
   （object-position: center 57.14% / transform-origin: right center / scale: 1.05）は
   意味を失い、外してある。とくに scale: 1.05 は右端を軸に拡大するので、
   横長写真では切り出しが右へ寄って左のひまわりを削る。
   いまは .ph > img の素の cover（中央）で入っている（3章） */

/* --- 院長のごあいさつ ---
   導入と同じ二分割で、左が写真・右がシアン。カンプにセクション見出しは無い。
   写真は原版 747×1024 を幅 960 に合わせ、上端から 960 で切っている
   （= cover ＋ top と一致する） */
.greeting {
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* 導入と同じ理由で行の高さいっぱいに伸ばす（`.intro__photo` のコメント参照） */
.greeting__photo {
  min-height: 50cqw;
}

.greeting__photo > img {
  object-position: center top;
}

.greeting__body {
  display: grid;
  align-content: center;
  padding: 26.72% 23.958%;
  background: var(--c-cyan);
  color: #fff;
}

.greeting__role {
  font-size: max(12px, 0.7292cqw);
  line-height: 1.714;
}

.greeting__name {
  margin-bottom: 0.633em;
  font-size: max(21px, 1.5625cqw);
  font-weight: 400;
  line-height: 2;
}

/* シアン地なので罫は白。行送り 35 / 本文 16 の比を保ったまま縮む */
.greeting .ruled {
  --rule-color: #fff;
  --line-rule: max(32.8px, 1.8229cqw);
  font-size: max(15px, 0.8333cqw);
}

.greeting .btn {
  width: max(140px, 10.4167cqw);
  height: max(35px, 2.6042cqw);
  margin: 1.25cqw 0 0;
  font-size: max(12px, 0.7292cqw);
}

/* --- アクセス --- */
/* お知らせの内覧会の箱でも同じ枠を使う（カンプの寸法・素材が同一）。
   地を透明にしているので、箱の #F8F8F8 が透過PNGの背景として透ける */
.access__map {
  /* 手描きマップ 900×650 を XD は 600×430 で描いている */
  aspect-ratio: 600 / 430;
  margin-inline: auto;
  width: min(600px, 100%);
  /* マップPNGは背景が透過で、カンプでも帯のグレーが透けている。
     .ph の仮置きグレー（--c-placeholder）だけ消す */
  background: transparent;
}

.access__address {
  margin-top: 50px;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}

.access__note {
  margin-top: 24px;
  font-size: 14px;
  line-height: 28px;
  text-align: center;
}

/* ---------------------------------------------------------
   14. 下層ページ
   --------------------------------------------------------- */
/* --- 下層ページ共通 --- */
/* メインビジュアル。当院紹介と在宅医療で縦横比も上マージンも同値なので 1 つの規則で出す
   —— カンプはどちらも 1200×675・角丸30px で、上端も同じ y=317。
   **幅だけは別値**—— 在宅医療は素材が DPR2 に届かず #179 で 800 に落とした（`design-notes` §5）。
   どちらも支給素材が入った（#113 / #112）。どちらも `.ph--parallax` は付けない —— 切り出しが
   枠に張り付いていて、118% に伸ばす分の上下の余白が足りない（当院紹介は 0%、在宅医療は
   枠の高さの 5.2% で、要る 18% に届かない。数値は `docs/assets-manifest.md`）。
   モバイルの上マージン（15 章）だけは 34 / 30 と別値のまま。

   以下、この章の写真枠に共通する角丸の持ち方（#142）。
   角丸はカンプ幅（1200 / 560 / 540）に対する比率で書き、枠幅に比例させる。固定値のままだと
   モバイルで枠が 1/3 以下に縮むのに角丸が縮まず、枠に対する比率が 3.6 倍に膨らむ。
   border-radius のパーセンテージは水平半径が幅・垂直半径が高さに対して解くので、同じ px を
   返す組（比率 ÷ 縦横比）で書く。こうすると角は常に真円のまま、下限・上限も両軸同時に効く。
   下限は 12px。比率のままだと 375px 幅で 5.6〜8.4px まで落ち、同じページに並ぶカード
   （角丸 20px 固定。カンプの枠幅 390 とモバイルの枠幅がほぼ同じで、比率がずれないので
   固定のまま）より角が立つ。カンプの最小の角丸は 10px（.pill / .header__note）なので、
   12px はこのサイトの意匠の内側に収まる。届かない枠には下限を書かない。
   上限は、モバイルで 1 段組みになって枠幅がカンプ幅を超える枠にだけ要る。
   比率はカンプの角丸をそのまま比率に直した値だが、`.director__photo` だけは
   カンプに従わない（理由はその規則のコメント） */
.clinic-photo,
.hc-hero {
  aspect-ratio: 1200 / 675;
  margin: 56px auto 0;
  /* 30/1200 = 2.5%、垂直は 30/675 = 4.4444%。下の `width` が頭打ちにするので上限は要らない。
     枠幅に比例するので `.hc-hero` は 800 幅で 20px になる */
  border-radius: max(12px, 2.5%) / max(12px, 4.4444%);
}

.clinic-photo {
  width: min(1200px, 100%);
}

/* 素材が DPR2 に届く幅で頭打ちにする。`sizes` の段の切れ目 864px はこの 800 から出る（#179） */
.hc-hero {
  width: min(800px, 100%);
}

/* --- 当院紹介 --- */
/* 院長について。カンプは 写真 540 ＋ 間 70 ＋ 本文 590。
   ピルはカラムの外（ページ中央）で、写真より上に来る */
.director {
  display: grid;
  grid-template-columns: 540px 1fr;
  gap: 70px;
  align-items: start;
}

/* 枠は 540×540 の正方（カンプのマスクと同じ）。写真は縦長で、cover が 42% を捨てる。
   37.5% は #159 の支給素材で焼いた絵から決めた値 —— 静止時と視差の両端（±7%）の
   3 状態で、頭上に空が残り、聴診器を持つ手が枠の下に入る。
   カンプの幾何（540×932 の上から 147）から出した値ではない */
.director__photo {
  aspect-ratio: 1 / 1;
  /* 角丸だけカンプに従わない（#142）。カンプは 540 幅に 50px（9.26%）で、幅がほぼ同じ
     院内写真の枠（560 幅に 20px = 3.57%）の 2.6 倍あり、同じページに並ぶと 1 枚だけ
     角が丸い。院内写真と同じ比率にそろえる（540 幅で 19.3px）。正方なので水平・垂直とも
     同じ値でよい */
  border-radius: clamp(12px, 3.5714%, 20px);
}

.director__photo > img {
  object-position: center 37.5%;
}

.director__caption {
  margin-top: 27px;
  font-size: 16px;
  line-height: 1.625;
  text-align: center;
}

.director__caption b {
  display: block;
  margin-top: 10px;
  color: var(--c-cyan);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3333;
}

/* 任意改行は 1 行目が 1 行に収まるときだけ生かす（#144）。収まらないまま <br> を残すと
   「地域 / でも」で割れて 2 文字の行ができる。折り返しを決めるのは <br> のままで、
   収まらないと分かる幅でだけ取り下げて 1 文として流す。
   列幅は表示域ではなくグリッドの 1fr で決まるので、この <p> 自身をクエリコンテナにして測る
   （<br> は子なので親を足さずに済む）。
   閾値の 19em は 1 行目が全角 19 字ぶん（字送りは normal）だから。コンテナクエリの em は
   コンテナ自身の font-size で解決されるので、30px 帯の 570px と 20px 帯の 380px に
   1 本で足りる（いずれも実測）。
   container-type は contain を立てないので margin-bottom は畳まれない（実測） */
.director__lead {
  container-type: inline-size;
  margin-bottom: 30px;
  color: var(--c-cyan);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3333;
}

@container (max-width: 19em) {
  .director__lead br {
    display: none;
  }
}

.director__bio {
  font-size: 16px;
  line-height: 1.875;
}

.director__bio p + p {
  margin-top: 10px;
}

/* ネーミングの由来。カンプは #F8F8F8 の帯の中に 1200×600・角丸30px の写真枠を置き、
   本文をその下に全幅で流す（旧カンプは全幅の背景写真だった）。
   写真は 2000×1333 を幅 1200（= 1200×800）に敷いて上から 163.5 を切っている
   → トリミング幅 200px に対して 82%。
   撮影者クレジットの要否は未確認（docs/design-notes.md §6） */
.naming__photo {
  width: min(1200px, 100%);
  aspect-ratio: 1200 / 600;
  /* 30/1200 = 2.5%、垂直は 30/600 = 5% */
  border-radius: max(12px, 2.5%) / max(12px, 5%);
}

.naming__photo > img {
  object-position: center 82%;
}

.naming__text {
  margin-top: 30px;
  font-size: 16px;
  line-height: 2.125;
}

.naming__text p + p {
  margin-top: 20px;
}

/* 基本理念。標語「愛 熱 和」はカンプではアウトライン化テキストなので SVG で書き出した
   （1字ずつ色が違う。tmp/58/xdtool/extract_motto.py）。カンプはピルの下 88px
   （.pill の下余白 50 ＋ 38）に 510×123 を置き、説明までが 54px */
.creed__motto {
  width: min(510px, 100%);
  /* 隣接する .pill の下余白（50）と相殺されるので、カンプの 88 を総量で書く */
  margin: 88px auto 54px;
}

.creed__text {
  font-size: 18px;
  line-height: 2;
  text-align: center;
}

/* 基本理念の写真（#154 → #173 → #180 → #196 で素材が替わった）。**カンプに無い追加**なので
   寸法の出どころを書いておく。表示幅は院長写真（`.director__photo`）と同じ 540。**比率は原本のまま**で、
   枠に合わせて切らない方針を継続。
   #196 は #154/#173/#180 と違い**同じ集合写真の版違いではない**——支給素材に患者の子どもが
   写っていたため（個人情報）、手術着姿の医師単独のポートレートに差し替えた。
   原本は 1671×1301（白フチ・角丸マスクの焼き込みとも無し）で 1080/841。
   （#180 は 4000×2400 で 1080/648、#173 は白フチを落とした 2967×2077 で 1080/756、
   #154 は 2282×1856 で 1080/878）。
   角丸はカンプ値が無いので `.director__photo` と同じ流儀に従う（院内写真の 20/560 =
   3.5714% を当てて 540 幅で 19.3px。#142）。垂直は同じ絶対値になるように
   3.5714 × 1080/841 = 4.5864%。 */
.creed__photo {
  width: min(540px, 100%);
  aspect-ratio: 1080 / 841;
  margin: 54px auto 0;
  border-radius: max(12px, 3.5714%) / max(12px, 4.5864%);
}

/* 中身が未定のセクション（見出しのみ・高さだけ確保）。home-care.html で使用中 */
.tbd {
  min-height: 400px;
}

/* 院内写真サムネイル。カンプは 560×370・角丸20px の枠が 2 列 3 行（列間 80 / 行間 94）で、
   ラベル 20px は枠の下。枠の左端はコンテンツ列より 10px 左（350）だが、
   560 × 2 ＋ 80 = 1200 でコンテンツ幅と一致するので 360 起点に正規化している */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 隣接する .pill の下余白（50）と相殺されるので、カンプの 62 を総量で書く */
  margin-top: 62px;
  column-gap: 80px;
  row-gap: 47px;
}

.photo-grid .ph {
  aspect-ratio: 560 / 370;
  /* 20/560 = 3.5714%、垂直は 20/370 = 5.4054%。≤767px では 1 段組みになって
     枠幅がカンプの 560 を超えるので上限を置く */
  border-radius: clamp(12px, 3.5714%, 20px) / clamp(12px, 5.4054%, 20px);
}

.photo-grid__label {
  margin-top: 13px;
  font-size: 20px;
  line-height: 1.7;
  text-align: center;
}

/* --- 在宅医療・訪問診療 --- */
/* 表示幅は .hc-hero と揃える（#200） */
.hc-lead {
  width: min(800px, 100%);
  margin: 38px auto 0;
  font-size: 16px;
  line-height: 30px;
}

.hc-def {
  margin-top: 63px;
}

/* 導入（メインビジュアル / リード / 定義ボックス）は見出しを持たないので section 帯では
   なく素の container に置く（about.html の院内写真と同じ形）。下の帯までは 149 */
.hc-intro {
  margin-bottom: 149px;
}

/* 当院で可能な処置・検査
   帯は #153 で about.html に移ったが、寸法は在宅医療のカンプ由来のまま（移設先のカンプに
   この帯は無い）。コンテンツ幅が両ページとも 1200 なので段幅も変わらない。
   カンプは 18px / 行送り 30 の 2 段組み。段幅 560・段間 70（コンテンツ 1200 の中で 365〜1555）。
   項目は行送り 60 で、上端 +43 に実線の罫（#CECECE / 1px）。定義・サポートの本文の罫は
   背景グラデーション（.ruled）だが、こちらはカンプが実線なので border でそのまま引く。
   段の振り分けはカンプが決めているので段ごとに ul を置く（columns は幅で振り分けが変わる） */
.treat {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 70px;
  padding: 0 5px;
}

.treat__item {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--c-rule);
  font-size: 18px;
  line-height: 30px;
}

.treat__item + .treat__item {
  margin-top: 16px;
}

/* 長いほうの段の最後の罫から 47（カンプ実測） */
.treat__note {
  margin-top: 47px;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}

/* 対応可能エリア
   枠の寸法はカンプのクリップ 1200×700・角丸20px のまま。中身は Google マップの
   スクリーンショットではなく実地図（#97。docs/design-notes.md §5）。
   .ph のグレーはタイルを読み込むまでの地として残す */
.hc-area__map {
  width: min(1200px, 100%);
  aspect-ratio: 1200 / 700;
  margin-inline: auto;
  /* 20/1200 = 1.6667%、垂直は 20/700 = 2.8571% */
  border-radius: max(12px, 1.6667%) / max(12px, 2.8571%);
}

/* 地図の器。.ph > img は直下子セレクタなので div には効かず、
   .ph の align-items: center も個別に解かないと枠の高さいっぱいに広がらない */
.hc-area__canvas {
  width: 100%;
  align-self: stretch;
}

/* 地図が出せないときに枠へ残す文（HTML に静的に置き、地図が立ち上がったら JS が外す）。
   .ph の既定色 #9a9a9a は地の --c-placeholder に対して 2.30:1 しか無く、
   仮置きラベルなら許されても利用者に読ませる文では 4.5:1 に届かない */
.hc-area__fallback {
  color: var(--c-text);
  font-size: 16px;
  letter-spacing: normal;
}

.hc-area__note {
  margin-top: 28px;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}

/* --- お知らせ ---
   カンプ（1920×3276）の実測では本文の幅は他ページと同じ x 360〜1560（1200px）だが、
   長文の可読性を優先して実装では 850px に狭めている（.container の縮小もそのまま効く）。
   文字は 16px / 行送り 30 で、段落の間が 20 空く。代替フォントでは折り返し位置が
   カンプと一致しないので、<br> で行を作らず段落の構成（7段落）だけ合わせている */
.news {
  max-width: 850px;
}

.news__date {
  margin-top: 48px;
  text-align: center;
}

/* 日付バッジ 125×30（角丸 114 は高さの半分を超えるので丸に落ちる）。
   カンプの字は Arial だが、フッターの住所と同じく共通フォントで組む。
   幅は下限にして、字幅が伸びたときは溢れずに広がるようにする */
.news__date time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 125px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--c-pink);
  color: #fff;
  font-size: 16px;
  line-height: 1;
}

.news__title {
  margin-top: 50px;
  font-size: 30px;
  font-weight: 400;
  line-height: 30px;
  text-align: center;
}

.news__letter {
  margin-top: 64px;
  font-size: 16px;
  line-height: 30px;
}

.news__letter p + p {
  margin-top: 20px;
}

.news__closing {
  margin-top: 44px;
  font-size: 16px;
  line-height: 30px;
  text-align: right;
}

/* 差出。カンプは 3 行が独立した段落で、行の間が 20 空く（＝行の送りは 50） */
.news__sign {
  margin-top: 32px;
  font-size: 16px;
  line-height: 50px;
  text-align: right;
}

.news__sign-date {
  display: block;
  text-align: left;
}

/* 内覧会の案内。カンプは #F8F8F8 の箱 1200×1080（角丸 20）。
   上下のだんだらの帯（#116）はカンプに無い。箱の幅いっぱいに縦横比のまま伸ばすので、
   帯は流し込みで置き、左右と上下の余白は内側の .open-house__inner が持つ */
.open-house {
  /* カンプの間隔は差出の最終行の枠下端（1309）から 57。こちらは行送り 50 の半行送りが
     最終行の下に 10 残るので、インクの位置を合わせるとカンプより 8 詰めた値になる */
  margin-top: 49px;
  border-radius: 20px;
  background: var(--c-bg-gray);
  /* 角丸で帯の角を切る */
  overflow: hidden;
}

/* 左右の余白 150 は箱の幅の 12.5% なので、コンテンツ幅が縮んでも比率のまま詰まる。
   箱の中身はすべて中央そろえ */
.open-house__inner {
  padding: 50px 12.5% 63px;
}

/* だんだらの帯（2581×204 の透過PNG）。塗りつぶしの縁が箱の外側に来る向きで、
   内側には 26px ぶん（箱の幅 1200px で約 12px）の透明な余白が最初から入っている */
.open-house__dandara {
  margin: 0;
}

.open-house__dandara img {
  display: block;
  width: 100%;
  height: auto;
}

/* カンプでは記事見出しと同じ文。色だけシアン */
.open-house__title {
  color: var(--c-cyan);
  font-size: 30px;
  font-weight: 400;
  line-height: 30px;
  text-align: center;
}

/* カンプはラベルと値の 2 列だったが、場所の 2 行目にラベルが付かなくなったので
   行ごとに中央そろえの 1 段落にした（#116） */
.open-house__info {
  margin-top: 65px;
  font-size: 17px;
  line-height: 30px;
  text-align: center;
}

/* 上の余白は行送りと同じ 30 ＝ 日時の並びとのあいだに空行 1 行（#116） */
.open-house__gift {
  margin-top: 30px;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}

.open-house__map {
  margin-top: 44px;
}

.open-house__address {
  margin-top: 50px;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}

/* だんだらの意匠の説明（#116）。灰色の箱の直下に置き、本文 16 に対して 1 段小さい 14 */
.news__dandara-note {
  margin-top: 20px;
  font-size: 14px;
  line-height: 26px;
  text-align: center;
}

/* ---------------------------------------------------------
   15. レスポンシブ
   --------------------------------------------------------- */

/* ヘッダーは ロゴ / 電話番号 / グロナビ 3項目 / シアンのボタン 3個 が横一列に並ぶ。
   1920px カンプでの素の占有幅は 234 + 268 + 425 + 560 = 約 1490px（左右の余白 100 を除く）。
   1710px から一段縮め、その寸法（ロゴ200 / 電話197 / ナビ413 / ボタン460）で横一列に
   収まる下限は 1332px。これは電話が 199 だった時点の実測で、#74 で 197 に縮んだぶん
   下限も 2px ほど下がる（切り替えの 1340px はそのままで足りる。1340px を跨いだ
   下限の測り直しには、ドロワーへ切り替えるこのメディアクエリを外す必要がある）。
   ナビは #147 で 1 字増え、padding 12 のままなら 431 で、1341〜1345px で右端のボタンが
   画面外へ出た。この帯の .gnav__link の padding を 12 → 9 にして 413 に戻してある。
   広げ直すならこの下限ごと測り直す。
   余裕を見て 1340px からドロワーに切り替える。
   前の意匠（ロゴ / 中央のピル / 開院バッジ）は 1240px が下限だったが、
   詰まる要素が変わったので測り直した値に差し替えている。 */
@media screen and (max-width: 1710px) {
  :root {
    --header-h: 108px;
    --content-pad: 32px;
  }

  .header {
    padding: 0 3vw;
  }

  .header__logo {
    width: 200px;
  }

  .header__tel {
    --tel-num: 26px;
    margin-left: 18px;
  }

  .header__tel-link {
    gap: 6px;
  }

  .gnav__link {
    padding: 0 9px;
    font-size: 15px;
  }

  .header__actions {
    gap: 8px;
  }

  .header__btn {
    width: 148px;
    height: 46px;
    font-size: 15px;
  }
}

@media screen and (max-width: 1024px) {
  :root {
    --header-h: 100px;
  }

  .header__logo {
    width: 190px;
  }

  .header__tel {
    --tel-num: 24px;
  }

  /* ヒーローの中の要素（キャッチ・バッジ・お知らせ導線）は枠に対する % と
     cqw で組んであるので、この帯では触らない */
  .cta__lead {
    font-size: 36px;
  }

  .cta__tel-label {
    width: 46px;
    height: 39px;
    font-size: 14px;
  }

  .cta__tel-wrap {
    --tel-num: 52px;
    margin-top: 36px;
  }

  .director {
    grid-template-columns: 380px 1fr;
    gap: 48px;
  }

  /* 段間はカンプの 70 のままだと段幅が痩せるので詰める */
  .treat {
    gap: 0 40px;
  }

  /* コンテンツ幅が縮むと 80px の列間が枠に対して広くなりすぎる
     （カンプの比率は 80/1200 = 6.7%） */
  .photo-grid {
    column-gap: 40px;
    row-gap: 36px;
  }
}

/* グロナビをドロワーに切り替える幅（実測 1332px + 余裕。旧実装は 1240px）。
   ナビ 3 項目とボタン 3 個の両方がヘッダーに収まらなくなるので、まとめてドロワーへ入れる。
   ヘッダーに残すのはロゴと電話番号（クリニックの一次導線なので落とさない）。
   ドロワーの表示切り替えに transform を使わないのは、打ち消しを避けるため
   （translate プロパティで書く。docs/design-notes.md §9 と skill の禁則） */
@media screen and (max-width: 1340px) {
  .gnav-toggle {
    display: block;
  }

  .header {
    padding-right: 74px;
  }

  /* 覆う面はヘッダーの帯の続きとして白地にする（旧実装はシアン地＋白文字。
     中身ぶんの高さで止まるハーフモーダルだった頃の配色で、フッターに揃えていた）。
     地は不透明の白にする —— ヘッダー本体の半透明＋ぼかし（5章の @supports）は
     借りない。トップではヒーロー写真がこの真下を通るので、透けると黒文字が読めない。
     影は 768〜1340px で要る。この帯ではドロワーは画面の一部を占めるパネルのままで、
     白地だと下のページ（白／--c-bg-gray）と地続きになり面の下端が消える。
     767px 以下は覆う面が画面外まで届くので影は見えない */
  .gnav {
    position: fixed;
    top: 0;
    left: 0;
    margin-left: 0;
    display: block;
    width: 100%;
    padding: 0 20px 28px;
    border-radius: 0 0 24px 24px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
    opacity: 0;
    visibility: hidden;
    translate: 0 -12px;
    transition: opacity 0.25s ease, translate 0.25s ease, visibility 0.25s;
    z-index: 28;
  }

  /* 上端の帯 = ヘッダーの帯の続き。高さを --header-h と同じにして、下の罫が
     ヘッダーの下端にちょうど載るようにする（この幅では 108 / 100 / 88px と変わる）。
     旧実装は .gnav の padding-top 86px という固定値で、88px の 767px 以下に
     合わせてあった —— 一様なシアンだから 768px 以上のずれが見えていなかった。
     sticky なのは、767px 以下でドロワーの中がスクロールしたときに、項目が
     上のロゴ・電話番号の裏を素通りしないようにするため（位置ありの要素なので、
     同じ重なり文脈のフロー内の項目より後に描かれる）。
     content を持つのはこのメディアクエリの中だけ ——
     デスクトップの .gnav は flex なので、余計な flex アイテムを作らない */
  .gnav::before {
    content: "";
    position: sticky;
    top: 0;
    display: block;
    height: var(--header-h);
    /* .gnav の左右パディングを打ち消して帯を全幅にする */
    margin: 0 -20px;
    border-bottom: 1px solid var(--c-rule);
    background: #fff;
  }

  .gnav.is-open {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
  }

  /* ドロワーは top:0 でヘッダーの帯ごと覆う。ロゴと電話番号をその上に出して帯を残す
     （28 = .gnav / 30 = .gnav-toggle の間）。ドロワーをヘッダーの下から始める
     top: var(--header-h) は採れない —— .gnav の position:fixed の基準は
     backdrop-filter を持つ .header で、非対応ブラウザではビューポートに戻る（15章の解説）。
     z-index なら基準が同じままなので、スクロール位置で開いても帯の見当が外れない */
  .header__logo,
  .header__tel {
    position: relative;
    z-index: 29;
  }

  .gnav__list {
    display: block;
  }

  /* 項目に罫を引く既存の流儀（.treat__item）と同じトークン */
  .gnav__item + .gnav__item {
    border-top: 1px solid var(--c-rule);
  }

  /* 文字色は上書きしない。素の --c-text（5章）＝ デスクトップのナビと同色。
     現在ページの --c-cyan-deep も同じく素のまま使う */
  .gnav__link {
    padding: 15px 6px;
    font-size: 15px;
    text-align: center;
  }

  /* ボタン 3 個もドロワーの中へ。押しやすさを保つため縦積みにする */
  .header__actions {
    display: grid;
    gap: 10px;
    margin: 20px auto 0;
    width: min(320px, 100%);
  }

  /* 塗りはヘッダーのボタンのまま。寸法だけ上書きする。無効な 3 個（#111）は
     ここでも灰地に白文字（#124）。1340px 以下で .header__btn はドロワーの中にしか無いので、
     この上書きはデスクトップのヘッダーに届かない */
  .header__btn {
    width: 100%;
    height: 48px;
  }

  /* ドロワーでは案内をボタンの**上**へ出す。向きだけを変え、重なる層であることは
     デスクトップと変えない（#126）。フローに入れる手は採れない —— 出すたびに
     下のボタンが 67.6px 押し下げられ、押した直後に押したい対象が動く（実測）。
     下向きのまま重ねる手も採れない —— 768〜1340px のドロワーは中身の高さで、
     角丸と影で下端が描かれた面。3 個目の案内がその外へ 39.6px はみ出して宙に浮く。
     上向きなら 1 個目でも上端は帯（--header-h）の 100px 以上下で、面の中に収まる。
     3 個とも同じ向きにする —— 同じ要素が 1 つの面の中で 2 方向を向くのは不具合に見える。
     幅は上書きしない —— ボタンの列が 320px（320px 幅では 280px）なので、
     基本の max(100%, 200px) がそのまま同じ値を返す */
  .header__note {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 8px;
  }

  /* しっぽも下向きへ。回す前の正方形で輪郭を引く辺を、隣り合う 2 辺のまま
     左上から右下へ移すと「^」が「v」になる。
     -4px の根拠は上向きと同じ（#130）。top: 100% はしっぽの上マージン辺を
     吹き出しの枠線の内側に置くので、上下を反転しても引く量は同じ値になる */
  .header__note::after {
    top: 100%;
    bottom: auto;
    margin-top: -4px;
    margin-bottom: 0;
    border-width: 0 1px 1px 0;
  }

  /* 導入とごあいさつはカンプの余白（左右 230 / 上下 233）が画面の半分に対して
     広すぎるので一段詰める。詰めないと本文が正方形に収まらず帯が縦に伸びる */
  .intro__text,
  .greeting__body {
    padding: 12%;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --header-h: 88px;
    --mobile-header-collapsed-h: 64px;
    --content-pad: 20px;
    --line-rule: 30px;
    /* ページ内リンクは縮小後のヘッダーより12px下へ止める */
    scroll-padding-top: calc(var(--mobile-header-collapsed-h) + 12px);
  }

  body {
    /* fixed にしたヘッダーが通常フローから抜けるぶんを戻す。
       SP の .hero-b は margin-top:0 なので、変更前と同じく帯の下から始まる */
    padding-top: var(--header-h);
    font-size: 14px;
  }

  .header {
    --mobile-header-current-h: var(--header-h);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: var(--mobile-header-current-h);
    padding-left: 16px;
  }

  .header__logo {
    width: 150px;
  }

  .header__tel {
    --tel-num: 20px;
    margin-left: 10px;
  }

  .header__tel-label {
    display: none;
  }

  /* ドロワーの白い上端帯も、スクロールに追従するヘッダー高へ合わせる。
     これが固定の --header-h のままだと、縮小後に罫が16px下へ残る */
  .gnav::before {
    height: var(--mobile-header-current-h);
  }

  /* ドロワーを画面全体を覆う面にする（1340px 以下の高さ可変のパネルを上書きする）。
     高さは `dvh` で取る。`bottom: 0` では届かない —— `.header` が `backdrop-filter`
     を持つため（5章の @supports）ヘッダーが包含ブロックになり、`.gnav` の
     `position: fixed` は実質ヘッダー基準の絶対配置になっている。`bottom: 0` は
     ヘッダーの高さ（88px）を張るだけで、中身の最小の高さに負けて止まる
     （実測。当時は上下のパディング 86+28px に負けて 114px 止まりだった）。
     `dvh` はビューポート基準の単位なので包含ブロックの差し替えに影響されない。
     ビューポート丁度にしてあるのは、ここに `--header-h` を足すと **横向きの端末で
     3 個目のボタンが押せなくなる**から —— 足したぶんは画面の外にはみ出すのに
     スクロールポートの高さには入るので、中身が収まった扱いになってスクロールが消える。
     引き換えに、少しスクロールした位置で開くと下端に隙間が出る（design-notes §5）。
     角丸は落とす（覆う面の下隅からページの中身が覗くため）。
     中身は上寄せのまま（縦中央寄せにしない） —— カンプに SP のデザインが無く、
     覆う範囲を変えるのがこの変更の目的なので、並びは作り直さない */
  .gnav {
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    /* 中身は約 460px あるので、横向きの端末（667×375 実測）では入り切らない。
       覆う面の外は動かせないので、ドロワーの中でスクロールさせる。
       `overscroll-behavior: contain` は、スクロール範囲を持たない縦向きでも
       ページ側への連鎖を止める（実測。これが無いとひと振りで覆いが流れる） */
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* カンプの位置（左下）はキャッチと重なるので右下へ移す（右上は医師の髪に載る）。
     置けるのは医師の顎（枠の上から 69.6%。肌色の画素の連結成分で実測）より下の
     白衣の上だけで、幅 320px ではそこに 88px しか残らない。96px 固定のままだと顎に食い込むので
     枠の比で頭打ちにする —— 24cqw なら 320〜400px で 76.8〜96px、400px 以上は 96px で止まる。
     円と顔の最短距離は 320px で 6.4px・375px で 7.5px（画素実測） */
  .badge {
    top: auto;
    right: 5%;
    bottom: 3%;
    left: auto;
    width: min(96px, 24cqw);
  }

  .badge__date {
    border-bottom-width: 1px;
  }

  .section {
    padding: 44px 0 50px;
  }

  .section--feature,
  .section--hours,
  .section--treat,
  .section--area {
    padding-bottom: 50px;
  }

  /* 帯の下余白と同じ扱いにする（PC の 149 はカンプ実測値） */
  .hc-intro {
    margin-bottom: 50px;
  }

  .pill {
    min-width: 0;
    margin-bottom: 32px;
    padding: 10px 22px;
    font-size: 16px;
  }

  .page-title {
    padding: 40px 0 0;
  }

  .page-title__sub {
    font-size: 14px;
  }

  .page-title__main {
    font-size: 25px;
  }

  .page-title--solo {
    padding-top: 40px;
    font-size: 25px;
    line-height: 1.5;
  }

  /* 枠を横長にして写真を引く。#182 の窓（原版 7680×4000 の x 1500 から 3200×4000）では
     医師の顔（原版 x 4050〜5675）が右で切れていた —— 患者の顔（同 1700〜2350）と並べるには
     4275px 幅が要り、4:5 では原版の全高を使っても 3200px しか取れない。
     11:10 の窓 4400×4000 を x 1450 から切り、医師は髪から耳まで・患者は顔の輪郭ごと収める（#187） */
  .hero-b {
    aspect-ratio: 11 / 10;
    --hero-img: url("../img/hero-photo-sp.jpg");
    /* 帯の下へ回り込ませない。枠が低くなると帯が覆うのは上 25% で、
       この窓はそこに医師の頭がある（頭頂は枠の上から 6.9%。画素実測） */
    margin-top: 0;
    /* お知らせバーを写真の下へ出したぶんの段（写真との間 10 ＋ バー 44 ＋ 次の帯との間 22）。
       **バーの有無で出し分けない。** `:has(.news-bar:not([hidden]))` にすると、`main.js` が
       `hidden` を外した瞬間にこの段が生まれて下の帯が 76px 落ちる —— 実測で CLS が
       375@2 / 375@3 で 0.0442・767@2 で 0.0108 になった。バーが出ないとき（取得失敗・JS 無効）は
       写真の下に 76px の余白が残るが、地は白なので次の帯との間隔が広く見えるだけで済む */
    margin-bottom: 76px;
  }

  /* 写真の明るい壁に載せる。#182 の帯（枠の x 36〜68%）はこの窓では医師の髪に載るので左へ寄せる。
     二人の間の壁は枠の x 0〜56% で、帯を 26〜56% に置くと列ごとの最暗輝度が 0.656 になる
     （36〜68% では 0.002）。字面のコントラストは 8 幅で最小 11.01・4.5:1 割れ 0.00%（画素実測。#187）。
     縦書き4行の幅は 7.068em（line-height 1.767 × 4）なので 17px では 120px 固定。
     幅が枠の 32% で止まるよう cqw で頭打ちにする（下限 15px は PC と同じ）*/
  .hero-b__catch {
    top: 22%;
    right: 44%;
    font-size: clamp(15px, 4.53cqw, 17px);
  }

  /* お知らせ導線は写真の外（すぐ下の行）へ。写真の上に 3 つとも浮かせると、
     幅 320px で開院バッジの逃げ場所が無くなる —— 医師の顎は枠の上から 69.6%、
     写真に重ねたバーの上端は 81% で、間は 39px しか空かない（バッジは 96px。実測）。
     文字は PC の 15px に届かない —— 幅 90% のバーに日付と件名が 1 行で並ぶので、
     15px にすると余白をどれだけ削っても 390px 以下で件名が切れる（実測。#138）。
     14px ＋ 左右 4% なら 375px まで収まる */
  .news-bar {
    top: 100%;
    bottom: auto;
    left: 5%;
    width: 90%;
    height: 44px;
    margin-top: 10px;
    font-size: 14px;
  }

  /* 字を大きくしたぶんの余白を左右から返す（#138）。6% のままだと 375px で件名が切れる */
  .news-bar__link {
    padding: 0 4%;
  }

  .intro,
  .greeting {
    grid-template-columns: 1fr;
  }

  .intro__text,
  .greeting__body {
    padding: 40px 20px 44px;
  }

  /* 1段組みでは写真が行に単独で入るので、伸ばす必要がなく正方に戻せる */
  .intro__photo,
  .greeting__photo {
    min-height: 0;
    aspect-ratio: 1;
  }

  .greeting .btn {
    margin-top: 22px;
  }

  .feature-list,
  .dept-list,
  .support-list,
  .def-list,
  .treat {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* 1段組みではカード幅 ≒ リスト幅になり、リスト幅基準の比率が成立しない。
     この帯だけ固定値に戻す */
  .card {
    padding: 24px 22px;
  }

  .card__head {
    gap: 16px;
    margin-bottom: 16px;
  }

  .card__icon,
  .dept__icon {
    width: 62px;
    height: 62px;
  }

  .card__icon > img,
  .dept__icon > img {
    max-height: 56px;
  }

  .card__title,
  .dept__title {
    font-size: 19px;
    line-height: 1.45;
  }

  /* 19px だと割らない「（消化器・呼吸器）」の 9 字が 171px あり、表示域 320px で
     見出しに残る 158px（320 − 余白 40 − カードの余白 44 − アイコン 62 − 間隔 16）を
     超えてカードごと横にはみ出す。この帯だけ 17px にする。表示域 349px 以上なら
     11 字が 1 行に収まり、下回ると括弧の前で 2 行になる */
  .dept__title {
    font-size: 17px;
  }

  .card__body {
    --line-rule: 26px;
    min-height: 0;
    font-size: 14px;
  }

  .feature-list .card {
    min-height: 0;
  }

  .dept {
    gap: 16px;
    min-height: 0;
    padding: 18px 22px;
  }

  .dept__text {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.9;
  }

  .dept--link::after {
    right: 14px;
    width: 24px;
    height: 24px;
    margin-top: -12px;
  }

  /* 診察時間は最も参照される情報。横スクロールに頼らず画面内に収める */
  .hours__table {
    width: 100%;
  }

  .hours__table th,
  .hours__table td {
    height: 52px;
  }

  .hours__table thead th {
    font-size: 15px;
  }

  /* 1列目は px で固定する。「16:00 − 19:00」のインクが 91px あるので、% 指定だと
     320px 幅で隣のセルにはみ出す（27% = 76px）。`table-layout: fixed` のセル幅は
     `max()` を解釈しないブラウザがあり、指定が無効になると全列が等幅に落ちる */
  .hours__table thead th:first-child {
    width: 120px;
    letter-spacing: 0.02em;
  }

  .hours__table tbody th {
    padding: 0 4px;
    font-size: 17px;
  }

  .hours__table tbody td {
    font-size: 18px;
  }

  .hours__note {
    font-size: 13px;
    line-height: 1.9;
    text-align: left;
  }

  .hours__note span {
    display: block;
  }

  .hours__note span + span {
    margin-left: 0;
  }

  .btn {
    margin-top: 20px;
  }

  /* 折れない塊「ウェブサイトへの掲載事項一覧」を収める大きさ。15px でこの塊の
     インクは 214px、左右の余白と合わせて 262px になり、320px 幅のコンテナ 280px
     に収まる。18px（インク 257px）では余白ごと溢れる */
  .notice-btn {
    min-height: 52px;
    padding: 10px 24px;
    margin-top: 36px;
    font-size: 15px;
  }

  .cta {
    padding: 50px 0 56px;
  }

  .cta__lead {
    font-size: 24px;
  }

  .cta__tel-wrap {
    --tel-num: 32px;
    margin-top: 9px;
  }

  .cta__tel {
    gap: 6px;
  }

  .cta__tel-label {
    width: 30px;
    height: 26px;
    border-radius: 2px;
    font-size: 11px;
  }

  .footer {
    padding: 40px 0 56px;
  }

  .fnav {
    flex-wrap: wrap;
    gap: 8px 0;
  }

  .fnav__link {
    padding: 0 12px;
    font-size: 13px;
  }

  .footer__logo {
    width: 220px;
    margin: 30px auto 20px;
  }

  .footer__address,
  .footer__tel {
    font-size: 12px;
    line-height: 1.9;
  }

  .footer__tel span + span {
    margin-left: 0.8em;
  }

  .director {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .director__lead {
    font-size: 20px;
  }

  .director__caption b {
    font-size: 24px;
  }

  .tbd {
    min-height: 160px;
  }

  .creed__motto {
    width: min(300px, 100%);
    margin: 56px auto 32px;
  }

  .creed__text {
    font-size: 16px;
    line-height: 1.9;
  }

  /* 標語の下余白（32）と同じ詰め方にそろえる */
  .creed__photo {
    margin-top: 32px;
  }

  /* 2列のままだと 375px で枠の幅が 107px にしかならない（カンプは 560×370） */
  .photo-grid {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .photo-grid__label {
    font-size: 16px;
  }

  .clinic-photo {
    margin-top: 34px;
  }

  .access__address {
    margin-top: 28px;
    font-size: 14px;
    line-height: 1.9;
  }

  .access__note {
    margin-top: 18px;
    font-size: 12px;
    line-height: 1.9;
  }

  /* 1段組みではカード幅 ≒ リスト幅になり、リスト幅基準の比率が成立しないので固定値に戻す */
  .support {
    min-height: 0;
    padding: 26px 22px 24px;
  }

  .support__icon {
    height: 64px;
  }

  .support__title {
    margin-top: 16px;
    font-size: 20px;
  }

  .support__body {
    --line-rule: 26px;
    margin-top: 14px;
    font-size: 14px;
  }

  .def {
    min-height: 0;
    padding: 22px 20px 24px;
  }

  .def__title {
    margin-bottom: 12px;
    font-size: 20px;
  }

  .def__body {
    --line-rule: 26px;
    font-size: 14px;
  }

  .hc-hero {
    margin-top: 30px;
  }

  .hc-lead {
    margin-top: 26px;
    font-size: 14px;
    line-height: 26px;
  }

  .hc-def {
    margin-top: 32px;
  }

  .treat {
    padding: 0;
  }

  .treat__item {
    padding-bottom: 10px;
    font-size: 15px;
    line-height: 26px;
  }

  .treat__item + .treat__item {
    margin-top: 12px;
  }

  .treat__note {
    margin-top: 30px;
    font-size: 14px;
    line-height: 26px;
  }

  .hc-area__note {
    margin-top: 20px;
    font-size: 14px;
    line-height: 26px;
  }

  /* お知らせ。1段組みなのでカンプの比率は成立しない。他ページのSPと同じ縮小率に合わせる */
  .news__date {
    margin-top: 26px;
  }

  .news__date time {
    min-width: 110px;
    font-size: 13px;
  }

  .news__title {
    margin-top: 26px;
    font-size: 20px;
    line-height: 1.5;
  }

  .news__letter {
    margin-top: 30px;
    font-size: 14px;
    line-height: 1.9;
  }

  .news__letter p + p {
    margin-top: 1.2em;
  }

  .news__closing {
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.9;
  }

  .news__sign {
    margin-top: 16px;
    font-size: 14px;
    line-height: 2.2;
  }

  .open-house {
    margin-top: 34px;
    border-radius: 16px;
  }

  .open-house__inner {
    padding: 30px 20px 36px;
  }

  .open-house__title {
    font-size: 18px;
    line-height: 1.5;
  }

  .open-house__info {
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.9;
  }

  /* 日時の行送り（14 × 1.9 ≒ 26）ぶんを空けて空行 1 行にする */
  .open-house__gift {
    margin-top: 26px;
    font-size: 13px;
    line-height: 1.9;
  }

  .open-house__map {
    margin-top: 26px;
  }

  .open-house__address {
    margin-top: 26px;
    font-size: 14px;
    line-height: 1.9;
  }

  .news__dandara-note {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.9;
  }

  /* 画面が狭いぶん、円と余白を詰めて本文にかぶる面積を減らす。
     44px は下回らない（高齢の閲覧者が指で押すため） */
  .to-top {
    --to-top-arrow: 12px;
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
  }
}

/* ---------------------------------------------------------
   16. スクロール演出
   フェードイン（.reveal）は JS が付ける html.js-reveal ゲート＋ transition で
   一度だけ動かす。パララックスはスクロール駆動アニメーション
   （animation-timeline: view()）のまま。
   振れ幅の根拠・除外した要素とその理由は docs/design-notes.md §9 に集約する。
   --------------------------------------------------------- */

/* 2. リセットの scroll-behavior: smooth を打ち消す。
   演出の有無にかかわらず、視差を減らす設定なら即座にジャンプさせる */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --- フェード＆せり上がり（一度だけ）---
   初期状態（opacity: 0）は html.js-reveal の内側にだけ置く。このクラスは
   IntersectionObserver 対応かつ減光設定なしのときに main.js が付けるので、
   JS 無効・JS エラー・非対応ブラウザでは隠す指定ごと効かず、演出導入前と
   同じ静止表示になる。is-revealed は一度付いたら外れない（main.js が unobserve する）ので、
   スクロールを戻しても同じ演出は繰り返さない。
   減光設定は JS 側でも弾いているが、二重ガードの片方として CSS 側にも残す */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal,
  .js-reveal .reveal-group > * {
    opacity: 0;
    /* 既存のセンタリングが transform: translateX(-50%) を使っているため、
       打ち消さないよう独立プロパティの translate を使う */
    translate: 0 40px;
    transition: opacity 0.7s ease-out,
      translate 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .js-reveal .reveal.is-revealed,
  .js-reveal .reveal-group > .is-revealed {
    opacity: 1;
    translate: 0 0;
  }

  /* リストのスタガー。時間ベースの transition なので transition-delay で足りる
     （view timeline と違って delay が効く）。reveal-group の子は最大 6 つ
     （当院紹介の院内写真が 2 列 3 行） */
  .js-reveal .reveal-group > *:nth-child(2) {
    transition-delay: 90ms;
  }

  .js-reveal .reveal-group > *:nth-child(3) {
    transition-delay: 180ms;
  }

  .js-reveal .reveal-group > *:nth-child(4) {
    transition-delay: 270ms;
  }

  .js-reveal .reveal-group > *:nth-child(5) {
    transition-delay: 360ms;
  }

  .js-reveal .reveal-group > *:nth-child(6) {
    transition-delay: 450ms;
  }
}

/* パララックスは二重ガードの内側に置く。初期状態も含めて内側に置くことが重要で、
   外に出すと非対応ブラウザで表示が壊れる。
   - @supports       : 非対応ブラウザは現状の静止サイトと完全に同じ表示になる
   - reduced-motion  : 視差を減らす設定なら一切動かさない */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* --- 枠内の奥行きドリフト ---
       .ph はもともと overflow: hidden の枠 ＋ object-fit: cover の子という構造なので、
       子を 118% に伸ばして上下 9% ずつはみ出させ、その範囲内で動かせば枠内で成立する。
       translate の % は img 自身の高さ基準。7% × 1.18 = 8.26% < 9% で隙間は出ない */
    @keyframes parallax-drift {
      from {
        translate: 0 -7%;
      }
      to {
        translate: 0 7%;
      }
    }

    .ph--parallax > img {
      height: 118%;
      animation: parallax-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}