/* =========================================================================
   みかづき透析クリニック  v2 デザイン（2026-10-05 採用：E01「夜明けとともに」＋F08「会話の見本」）
   -------------------------------------------------------------------------
   お手本 … 10_デザイン案/トップ採用_2026-10-05/index.html（＋_common.css）
   使い方 … assets/v2-部品の使い方.md（下層ページの型・部品の名前・小さな見本）
   旧CSS  … assets/mikazuki.css は消さずに残しています（functions.php の読み込みを戻せば元どおり）

   ★ 決まり（HPリニューアル/CLAUDE.md 1〜4章・_v2設計書.md）
     ・紺＋金＋白。金は「罫・線」と「紺の地の上の文字」だけ。白地の文字に金を使うときは --gold-w
     ・金のベタ塗りは「見学のご予約」（.btn.gold）だけ。1画面に1つ
     ・見出しは明朝、本文はゴシック。塗りアイコンは使わない
     ・改行は .w（文節）／.bun（文）で。両端そろえ（justify）は使わない
     ・スマホは左の軸1本（中央そろえの文を混ぜない）・押せるものは高さ48px以上
     ・動きは「強調」だけ。ふわっと出す演出は使わない。JSが無くても全部読める

   ★ 地の色の考え方（いちばん大事）
     節（section）ごとに地の色を持ちます。class="sky night|day" ＋ 地の色の名前（.sky-night など）。
     文字・罫の色は「役割の変数」で持ち、夜の節／朝の節で切り替えます。
       --fg 本文 / --fg2 補足 / --rule 罫 / --accent 飾りの英字・番号 / --ln 強調の罫 / --hl 見出し / --inv 反転
     JS（mikazuki-v2.js）が動くと、ページ全体の地の色を「読む位置」で決め（html.dawn）、
     夜⇄朝の切り替えは文字のない隙間で一気に行います。JSが無いときは節ごとの固定の色で全部見えます。

   目次
     0. 色・書体の変数        1. 土台                 2. 夜と朝（役割の変数・地の色）
     3. 文字の部品             4. ボタン・リンク        5. ヘッダー（スマホのメニュー含む）
     6. フッター               7. トップ専用の節         8. 下層ページの部品
     9. お知らせ・記事         10. フォーム              11. 固定ページ本文（.entry）
     12. コンシェルジュの窓    13. 幅ごとの調整          14. 動きを減らす設定
     ★ v2.1 下層ページの部品（.pg-door .pg-keys .pg-toc .pg-subnav .pg-head .pg-split .pg-steps .pg-next）… 14. のあと
     ★ v2.2 本文の部品（.pg-say .pg-body .pg-night .pg-wide .pg-figs .pg-list）… いちばん最後の塊
   ========================================================================= */


/* =========================================================================
   0. 色・書体の変数（_common.css と同じ値。ここ1か所で持つ）
   ========================================================================= */
:root{
  --navy:#14224E; --navy2:#0B132C; --navy-soft:#2b3a68;
  --gold:#F3CF65;      /* 紺の地の上の罫・文字だけ（10.2:1） */
  --gold-d:#BEA55E;    /* 白地の罫だけ。文字には使わない（2.4:1） */
  --gold-p:#F1DEA4;
  --gold-w:#7D6430;    /* 白地で読ませる金（5.6:1）。飾りの英字・番号だけ */
  --ink:#1A1A1A; --head:#1A1A1A; --muted:#5A5A5A;
  --line:#e6e4de; --paper:#faf9f6;
  --mincho:"Yu Mincho","YuMincho","Hiragino Mincho ProN","ヒラギノ明朝 ProN W3","MS PMincho",serif;
  --gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Yu Gothic Medium","Yu Gothic","Noto Sans JP",sans-serif;
  --body:var(--gothic);
  --pf:"Playfair Display",serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gut:clamp(20px,5.2vw,48px);   /* 左右の余白 */
  --wrapw:1120px;                 /* 内容の最大幅 */
  --readw:680px;                  /* 読む列の幅（R03） */
  --hd-h:84px;                    /* ヘッダーの高さ（スマホは70px） */
}


/* =========================================================================
   1. 土台
   ========================================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:2.05;letter-spacing:.045em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;text-align:left}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-weight:400;margin:0;font-family:var(--mincho)}
p{margin:0 0 1.5em}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
address{font-style:normal}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 改行の3段階：.w＝文節／.bun＝文。この中では折らない（auto-phrase は iOS で効かないので当てにしない） */
.w,.bun{display:inline-block}

/* 強調の合図は1つ（黄色の下線マーカー）。太字と重ねない */
mark,.mark{background:linear-gradient(transparent 58%,rgba(243,207,101,.42) 58%);color:inherit;font-weight:inherit}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold-d);outline-offset:3px}

/* 本文へ飛ぶリンク（キーボードの方のため。ふだんは隠す） */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;color:var(--navy);padding:12px 18px;border:1px solid var(--navy)}

.wrap{max-width:calc(var(--wrapw) + var(--gut) * 2);margin:0 auto;padding:0 var(--gut)}
/* 読む列（680px）。文字は左そろえのまま、列だけを中央に置く */
.narrow{max-width:calc(var(--readw) + var(--gut) * 2);margin:0 auto;padding:0 var(--gut)}
section{position:relative}


/* =========================================================================
   2. 夜と朝（役割の変数・地の色）
   -------------------------------------------------------------------------
   .v-night / .v-day … いつでもこの色（写真の上のヘッダーや扉など）
   .night / .day     … JSが無いときはこの色。JSが動くと body の色（is-day）に従う
   ========================================================================= */
.v-night,html:not(.dawn) .night,html.dawn body:not(.is-day){
  --fg:#fff;--fg2:rgba(255,255,255,.8);--rule:rgba(255,255,255,.2);
  --accent:var(--gold);--ln:var(--gold);--hl:#fff;--inv:var(--navy)}
.v-day,html:not(.dawn) .day,html.dawn body.is-day{
  --fg:var(--ink);--fg2:var(--muted);--rule:var(--line);
  --accent:var(--gold-w);--ln:var(--gold-d);--hl:var(--navy);--inv:#fff}
.sky{background:var(--sky);color:var(--fg)}
/* 2026-10-05 背景も文字と同じ瞬間に切り替える（切り替えは文字のない隙間で起きる。0.35秒のずれで一瞬「紺の地に黒い文字」になっていた） */
html.dawn body{background:var(--bg,#0B132C)}
html.dawn .sky{background:transparent}

/* 地の色の名前（テンプレートに style= を書かずに済むように）。夜は上の3つ、朝は下の3つ */
.sky-night{--sky:#0B132C}   /* 夜：いちばん深い紺（ヒーロー・扉・お知らせ） */
.sky-navy {--sky:#14224E}   /* 夜：紺 */
.sky-dusk {--sky:#2b3a68}   /* 夜：明けがた（流れの③だけ） */
.sky-mist {--sky:#EAEBEF}   /* 朝：紺を9%だけ白に溶かした色（流れの④だけ） */
.sky-paper{--sky:#faf9f6}   /* 朝：生成り */
.sky-white{--sky:#ffffff}   /* 朝：白 */


/* =========================================================================
   3. 文字の部品
   ========================================================================= */
/* 飾りの英字（小見出しの上） */
.en{display:block;font-family:var(--pf);font-style:italic;font-size:13px;letter-spacing:.16em;color:var(--accent);margin:0 0 14px;line-height:1.6}
/* 節の見出し */
h2.sec{font-size:clamp(25px,3vw,33px);line-height:1.7;letter-spacing:.12em;color:var(--hl);margin:0 0 28px}
/* 小見出し */
h3.sub{font-size:clamp(19px,1.9vw,22px);line-height:1.7;letter-spacing:.1em;color:var(--hl);margin:0 0 14px}
/* 導入の文 */
.lead{font-size:clamp(16px,1.6vw,17.5px);line-height:2.15;color:var(--fg);max-width:36em}
/* 本文の段落（下層ページ）。B19＋P09：行送り2.1・601px以上は40字まで */
.txt{font-size:16px;line-height:2.1;color:var(--fg);max-width:40em}
/* 補足・注記（医療広告ガイドラインの4点セットは .evi-note） */
.note{font-size:14px;line-height:1.95;color:var(--fg2);max-width:52em}
.evi-note{font-size:13px;line-height:1.9;color:var(--fg2);letter-spacing:.03em;max-width:52em}
/* 節の上下の余白 */
.pad{padding:clamp(72px,10vw,132px) 0}
.pad-s{padding:clamp(56px,7vw,96px) 0}
.pad-t0{padding-top:0}

/* 箇条書き（金の短い罫が頭につく） */
.dots{margin:0 0 1.6em}
.dots>li{position:relative;padding-left:22px;margin:0 0 .6em;line-height:1.95;color:var(--fg)}
.dots>li::before{content:"";position:absolute;left:0;top:.98em;width:10px;height:1px;background:var(--ln)}

/* 区切りの罫つきの一覧（コンセプトの「環境」と同じ形） */
.env{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.env li{padding:16px 14px 16px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.85;color:var(--fg)}
.env li:nth-child(odd){border-right:1px solid var(--rule);margin-right:14px}

/* 文と写真を左右に（スマホは写真が上） */
.split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,84px);align-items:center}
.split.rev>:first-child{order:2}
.split figure img,.ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split .lead:last-child,.split .txt:last-child{margin-bottom:0}


/* =========================================================================
   4. ボタン・リンク
   -------------------------------------------------------------------------
   .btn.line … 基本。1px枠＋文字。夜でも朝でも読める（色は役割の変数から）
   .btn.gold … 「見学のご予約」だけ。1画面に1つ
   .btn.dark … 紺の塗り。送信ボタンなど、どうしても要るときだけ
   ========================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;
  padding:14px 30px;border:1px solid var(--navy);color:var(--navy);background:transparent;
  font-family:var(--mincho);font-size:15.5px;letter-spacing:.14em;text-decoration:none;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn:hover{background:var(--navy);color:#fff}
.btn.line{border-color:var(--fg);color:var(--fg)}
.btn.line:hover{background:var(--fg);color:var(--inv)}
.btn.dark{background:var(--navy);color:#fff}
.btn.dark:hover{background:var(--navy2)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.btn.gold:hover{background:#f7dc8a;color:var(--navy)}
.btn[disabled]{opacity:.55;cursor:default}
.btns{display:flex;flex-wrap:wrap;gap:14px}

/* 文の中の「次へ進む」リンク（押せる高さ48px） */
a.more{display:inline-flex;align-items:center;gap:.5em;min-height:48px;padding:10px 0;
  font-family:var(--mincho);font-size:15.5px;letter-spacing:.1em;color:var(--hl);
  text-decoration:underline;text-decoration-color:var(--ln);text-decoration-thickness:1px;text-underline-offset:7px}
a.more:hover{text-decoration-thickness:2px}
.more-line{margin:18px 0 0}


/* =========================================================================
   5. ヘッダー（全ページ共通）
   ヒーロー／扉の上に置き、追いかけてきません（お手本と同じ）。
   1101px以上はナビを横に並べ、それより狭いと「メニュー」ボタンで全画面に開きます。
   ========================================================================= */
.hd{position:fixed;inset:0 0 auto 0;z-index:20;color:#fff;transition:background-color .3s,box-shadow .3s}
/* 2026-10-05 ヘッダーは読み進めても上に残す（今の本番と同じ）。写真の上では透明、下では夜の帯に。
   最後の節（金の「見学のご予約」がある）が見えているあいだは、ヘッダーの金を枠にして金ベタを1つに保つ */
.hd.stuck{background:rgba(11,19,44,.96);box-shadow:0 1px 0 rgba(243,207,101,.28)}
.hd.stuck .hd-in{min-height:64px}
.hd.quiet .btn.gold{background:transparent;color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
html{scroll-padding-top:76px}
.hd-in{display:flex;align-items:center;gap:24px;min-height:var(--hd-h)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand img{width:42px;height:42px;flex:0 0 auto}
.brand .nm{font-family:var(--mincho);font-size:17px;letter-spacing:.14em;line-height:1.35}
.brand small{display:block;font-family:var(--pf);font-size:9.5px;letter-spacing:.24em;color:rgba(255,255,255,.7)}
.nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,24px);font-size:14px;letter-spacing:.12em}
.nav a{text-decoration:none;color:rgba(255,255,255,.88);padding:10px 0;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -1px 0 var(--gold)}
.nav-more{display:none}
.hd .btn.gold{min-height:46px;padding:10px 20px;font-size:14px;white-space:nowrap}
.hd .btn.gold[aria-current="page"]{box-shadow:0 0 0 1px var(--navy2),0 0 0 2px var(--gold)}
/* メニューのボタン（三本線）。狭い画面だけ */
.hd-tg{display:none;position:relative;width:48px;height:48px;flex:0 0 48px;padding:0;
  border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;cursor:pointer}
.hd-tg span{position:absolute;left:13px;right:13px;height:1px;background:currentColor;transition:transform .3s var(--ease),opacity .3s}
.hd-tg span:nth-child(1){top:16px}
.hd-tg span:nth-child(2){top:23.5px}
.hd-tg span:nth-child(3){top:31px}
.hd.open .hd-tg span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hd.open .hd-tg span:nth-child(2){opacity:0}
.hd.open .hd-tg span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
html.nav-lock{overflow:hidden}

@media (max-width:1100px){
  .hd-tg{display:block}
  .nav{display:none}
  .hd-in>.brand,.hd-in>.btn,.hd-in>.hd-tg{position:relative;z-index:2}
  .hd-in{gap:12px}
  /* 開いたとき：夜の地の全画面 */
  .hd.open .nav{display:flex;position:fixed;inset:0;z-index:1;flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy2);padding:calc(var(--hd-h) + 12px) var(--gut) 48px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .hd.open .nav>a{display:flex;align-items:center;min-height:58px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.16);
    font-family:var(--mincho);font-size:18px;letter-spacing:.12em;color:#fff}
  .hd.open .nav>a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--gold);padding-left:14px}
  .hd.open .nav-more{display:flex;flex-direction:column;margin-top:22px}
  .nav-more a{display:flex;align-items:center;gap:10px;min-height:52px;font-size:16px;letter-spacing:.08em;color:rgba(255,255,255,.88)}
}


/* =========================================================================
   6. フッター（全ページ共通・朝の白）
   ========================================================================= */
.ft{padding:clamp(56px,7vw,88px) 0 36px;border-top:1px solid var(--rule)}
.ft-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,4fr);gap:clamp(32px,5vw,64px)}
.ft .brand{margin:0}
.ft .brand img{width:38px;height:38px}
.ft .brand .nm{font-size:16px;color:var(--hl)}
.ft .brand small{font-family:var(--gothic);font-size:12px;letter-spacing:.12em;color:var(--fg2);margin-bottom:2px}
.ft-addr{font-size:14.5px;line-height:1.95;color:var(--fg);margin:20px 0 0}
.ft-tel{margin:4px 0 0}
.ft-tel a{display:inline-flex;align-items:center;min-height:48px;font-family:var(--mincho);font-size:22px;letter-spacing:.08em;color:var(--hl);text-decoration:none}
.ft-note{font-size:13.5px;line-height:1.9;color:var(--fg2);margin:4px 0 0}
.ft-note .w:not(:last-child)::after{content:"／";margin:0 .3em}
.ft-h{font-family:var(--mincho);font-size:15px;letter-spacing:.14em;line-height:1.6;color:var(--hl);margin:0 0 6px;padding-bottom:10px;border-bottom:1px solid var(--ln)}
.ft-nav a{display:flex;align-items:center;min-height:42px;font-size:14.5px;line-height:1.6;color:var(--fg);text-decoration:none}
.ft-nav a:hover{color:var(--hl);text-decoration:underline;text-decoration-color:var(--ln);text-underline-offset:5px}
.ft-hours li{font-size:14px;line-height:1.85;color:var(--fg);padding:5px 0}
.ft-hours li small{display:block;font-size:13px;color:var(--fg2)}
.ft-sns{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:16px}
.ft-sns a{display:inline-flex;align-items:center;gap:9px;min-height:48px;font-size:14px;color:var(--fg);text-decoration:none}
.ft-sns small{font-size:12.5px;color:var(--fg2);margin-left:2px}
.ft-copy{margin:clamp(40px,5vw,56px) 0 0;padding-top:20px;border-top:1px solid var(--rule);
  font-family:var(--pf);font-size:11.5px;letter-spacing:.14em;line-height:1.8;color:var(--fg2)}

/* SNSの印（線で象った簡略な印。塗らない） */
.sns-ig,.sns-line{display:inline-block;width:20px;height:20px;flex:0 0 auto;position:relative;
  border:1px solid currentColor;border-radius:6px;opacity:.9}
.sns-ig::before{content:"";position:absolute;inset:4px;border:1px solid currentColor;border-radius:50%}
.sns-ig::after{content:"";position:absolute;right:3.5px;top:3.5px;width:2px;height:2px;background:currentColor;border-radius:50%}
.sns-line{border-radius:7px 7px 7px 1px}
.sns-line::before{content:"";position:absolute;left:4px;right:4px;top:5.5px;height:1px;background:currentColor}
.sns-line::after{content:"";position:absolute;left:4px;right:7px;top:9.5px;height:1px;background:currentColor}


/* =========================================================================
   7. トップ専用の節（お手本 index.html と同じ値）
   ========================================================================= */

/* ---- ヒーロー（夜の玄関）。冒頭の縦組みの一行は中央（41型） ---- */
.hero{position:relative;min-height:max(580px,100svh);display:flex;overflow:hidden;background:var(--navy2)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,19,44,.72) 0%,rgba(11,19,44,.2) 34%,rgba(11,19,44,.35) 66%,#0B132C 100%),
             radial-gradient(ellipse 34% 62% at 50% 50%,rgba(11,19,44,.5) 0%,rgba(11,19,44,0) 100%)}
.hero-in{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;padding-top:clamp(96px,13vh,130px);padding-bottom:clamp(64px,9vh,96px)}
.hero-vert{--fs:clamp(25px,calc((100svh - 300px) / 15.2),44px);writing-mode:vertical-rl;font-family:var(--mincho);
  font-size:var(--fs);line-height:1.25;letter-spacing:.24em;color:#fff;margin:0;white-space:nowrap;
  text-shadow:0 0 18px rgba(255,255,255,.22),0 1px 18px rgba(0,0,0,.45)}
.hero-vert .ph{display:inline}
.hero-note{position:absolute;z-index:2;right:var(--gut);bottom:72px;margin:0;writing-mode:vertical-rl;
  font-family:var(--pf);font-style:italic;font-size:12px;letter-spacing:.28em;color:rgba(255,255,255,.72)}
/* 一度だけ、ほのかに灯る（強調①）。CSSだけで動くので、JSが落ちても最後は必ず見えます */
@keyframes dawnGlow{
  0%{opacity:0;filter:blur(8px);text-shadow:0 0 0 rgba(243,207,101,0)}
  55%{opacity:1;filter:blur(0);text-shadow:0 0 30px rgba(243,207,101,.55),0 0 6px rgba(243,207,101,.35)}
  100%{opacity:1;filter:none;text-shadow:0 0 18px rgba(255,255,255,.22),0 1px 18px rgba(0,0,0,.45)}}
.hero-vert .ph{animation:dawnGlow 2.6s var(--ease) both;animation-delay:calc(.35s + var(--i,0) * 1s)}

/* ---- 序：リード ---- */
.intro{padding:8px 0 clamp(80px,10vw,120px)}
.intro .lead{font-size:clamp(16.5px,1.8vw,19px);margin:0 0 34px}

/* ---- 要点4つ ---- */
.facts ul{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
.facts li{padding:30px 26px 34px 0;border-right:1px solid var(--rule);margin-right:26px}
.facts li:last-child{border-right:0;margin-right:0}
.facts b{display:block;font-family:var(--mincho);font-weight:400;font-size:clamp(19px,1.8vw,22px);letter-spacing:.1em;line-height:1.6;color:var(--hl);margin:0 0 10px}
.facts small{display:block;font-size:14px;line-height:1.95;color:var(--fg2)}

/* ---- お知らせ（トップ・夜の地・G15「日付が上・題が下（間6px）」の2つだけ） ---- */
.news-top{padding:clamp(64px,8vw,104px) 0 0}
.news-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,80px);align-items:start}
.news-grid h2.sec{margin-bottom:18px}
.news-grid .lead{margin:0}
.news-top .more-line{margin-top:10px}

/* ---- 共感 ---- */
.empathy q{quotes:none;display:block;font-family:var(--mincho);font-size:clamp(23px,3vw,34px);line-height:1.85;letter-spacing:.1em;color:var(--hl);margin:0 0 30px}
.empathy q .ul .w{box-shadow:inset 0 -1px 0 var(--ln);padding-bottom:2px}

/* ---- 週3回の暦（強調③：通う日が順に灯る） ---- */
.koyomi-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,80px);align-items:center}
.koyomi{border:1px solid var(--rule);padding:clamp(18px,3vw,34px)}
.k-row+.k-row{margin-top:26px}
.k-lab{font-family:var(--mincho);font-size:16px;letter-spacing:.14em;color:var(--fg);margin:0 0 10px;line-height:1.6}
.k-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.k-days li{position:relative;border:1px solid var(--rule);min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:border-color .9s var(--ease),background-color .9s var(--ease),box-shadow .9s var(--ease)}
.k-days .d{font-family:var(--mincho);font-size:17px;line-height:1.4;color:var(--fg2);transition:color .9s var(--ease)}
.k-days .m{font-size:12px;letter-spacing:.08em;line-height:1.4;color:var(--fg2);min-height:1.4em}
.k-days .on{border-color:var(--ln);background:rgba(243,207,101,.07);box-shadow:0 0 22px rgba(243,207,101,.16)}
.k-days .on .d,.k-days .on .m{color:var(--accent)}
.k-days .off{border-style:dashed}
html.v2js .koyomi:not(.in) .on{border-color:var(--rule);background:transparent;box-shadow:none}
html.v2js .koyomi:not(.in) .on .d{color:var(--fg2)}
html.v2js .koyomi:not(.in) .on .m{color:transparent}
html.v2js .koyomi .on,html.v2js .koyomi .on .d,html.v2js .koyomi .on .m{transition-delay:calc(.25s + var(--i,0) * .38s)}
.k-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:24px 0 0;padding-top:18px;border-top:1px solid var(--rule)}
.k-cap b{font-family:var(--mincho);font-weight:400;font-size:18px;letter-spacing:.12em;color:var(--hl)}
.k-cap span{font-size:14px;color:var(--fg2)}

/* ---- コンセプト ---- */
.concept-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,84px);align-items:start}
.concept figure img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 40%}

/* ---- 透析の日の流れ（強調②：金の点が線を進み、段のすき間で夜が明ける） ---- */
.flow{--mk:56px;--cg:clamp(24px,3.6vw,44px)}
.fl-head{padding:clamp(88px,11vw,140px) 0 clamp(8px,2vw,24px)}
.fl-head-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:end}
.fl-head h2.sec{margin:0}
.fl-head .lead{margin:0}
.fl-body{position:relative}
.step{--pt:clamp(48px,6vw,76px);--ring:var(--sky);padding:var(--pt) 0}
html.dawn .step{--ring:var(--bg,#0B132C)}
.st-in{position:relative;display:grid;grid-template-columns:var(--mk) minmax(0,440px) minmax(0,1fr);column-gap:var(--cg);
  grid-template-areas:"mk body ph";align-items:start}
/* 線（JSが無くても見える細い線）。段から段へつながる */
.rail{position:absolute;left:calc(var(--mk) / 2);top:calc(var(--pt) * -1);bottom:calc(var(--pt) * -1);width:1px;margin-left:-.5px;background:var(--rule)}
.step:first-child .rail{top:calc(var(--mk) / 2)}
.step:last-child .rail{bottom:auto;height:calc(var(--pt) + var(--mk) / 2)}
.mk{grid-area:mk;position:relative;z-index:2;width:var(--mk);height:var(--mk);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mincho);font-size:calc(var(--mk) * .4);line-height:1;
  background:var(--navy);color:var(--gold);border:1.5px solid var(--gold);box-shadow:0 0 0 6px var(--ring);
  transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
.st-body{grid-area:body;min-width:0;padding-top:4px}
.st-body .en{margin:0 0 4px}
.st-h{font-size:clamp(22px,2.2vw,26px);line-height:1.6;letter-spacing:.08em;color:var(--hl);margin:0 0 12px}
.st-p{margin:0 0 14px;font-size:16px;color:var(--fg)}
.st-tags{display:flex;flex-wrap:wrap;gap:8px}
.st-tags li{font-size:13px;line-height:1.5;letter-spacing:.06em;padding:5px 10px;border:1px solid var(--fg2);color:var(--fg)}
.st-ph{grid-area:ph;margin:0;overflow:hidden;aspect-ratio:16/10}
.st-ph img{width:100%;height:100%;object-fit:cover}
/* 金の点と、通った線（JSがあり、動きを減らす設定でないときだけ） */
.fl-fill,.fl-dot{display:none;position:absolute;top:0;left:0;pointer-events:none}
html.flowjs .fl-fill,html.flowjs .fl-dot{display:block}
.fl-fill{width:2px;margin-left:-1px;background:var(--ln);z-index:1}
.fl-dot{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--gold);z-index:3;will-change:transform;
  box-shadow:0 0 0 3px var(--navy),0 0 0 6px var(--bg,#fff),0 0 22px 6px rgba(243,207,101,.35)}
/* 点が来る前の段は、番号を線だけで（文字は読める明るさのまま） */
html.flowjs .step:not(.lit) .mk{background:var(--ring);color:var(--fg2);border-color:var(--fg2)}
.fl-end{padding:0 0 clamp(80px,10vw,124px)}
.flow-note{margin:0;padding:18px 0 0 calc(var(--mk) + var(--cg));font-size:14px;line-height:1.9;color:var(--fg2);border-top:1px solid var(--rule)}

/* ---- F08 会話の見本（見本の吹き出しが1回だけ順に出る＝この節の強調） ---- */
.talk-lead{margin:0}
.talk-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(36px,6vw,88px);align-items:center;margin-top:clamp(36px,4vw,48px)}
.cv-phone{background:#fff;border:1px solid #d9d6cc;border-radius:28px;overflow:hidden;box-shadow:0 18px 50px -24px rgba(11,19,44,.28)}
.cv-hd{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #e6e4de;background:#fff}
.cv-hd img{width:30px;height:30px}
.cv-hd b{display:block;font-family:var(--mincho);font-weight:400;font-size:15.5px;letter-spacing:.08em;line-height:1.4;color:var(--ink)}
.cv-hd small{display:block;font-size:12.5px;line-height:1.4;color:var(--muted);letter-spacing:.04em}
.cv-body{display:flex;flex-direction:column;gap:12px;padding:20px 16px 22px;background:var(--paper);min-height:420px}
.cv-b{max-width:88%;padding:12px 15px;border-radius:14px;font-family:var(--gothic);font-size:15px;line-height:1.85;letter-spacing:.03em;margin:0}
.cv-b.bot{align-self:flex-start;background:var(--navy);color:#fff;border-bottom-left-radius:4px}
.cv-b.usr{align-self:flex-end;background:#fff;color:var(--navy);border:1px solid var(--navy);border-bottom-right-radius:4px}
.cv-b b{font-weight:600}
.cv figcaption{margin:12px 0 0;font-size:13.5px;line-height:1.8;color:var(--fg2);text-align:center}
html.v2js .cv .cv-b{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(.3s + var(--i,0) * .6s)}
html.v2js .cv.in .cv-b{opacity:1;transform:none}
/* 本物の最初の質問と5つの答え（下層ページの .cz-ask でも同じ部品を使う） */
.pick-col{max-width:560px}
.pick-q{font-size:clamp(22px,2.2vw,26px);line-height:1.6;letter-spacing:.1em;color:var(--hl);margin:0 0 8px}
.pick-how{font-size:15px;line-height:1.9;color:var(--fg);margin:0 0 20px}
.pick{display:grid;gap:10px}
.pick .btn{display:flex;justify-content:space-between;width:100%;min-height:60px;padding:12px 20px 12px 22px;text-align:left;font-size:16.5px;letter-spacing:.08em;line-height:1.5}
.pick .btn::after{content:"";flex:0 0 auto;width:8px;height:8px;margin-left:14px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.pick-note{margin:18px 0 0;font-size:14.5px;line-height:1.9;color:var(--fg2)}
/* 区切りは前の語の後ろに付ける（行頭に記号が来ないように） */
.pick-note .w:not(:last-child)::after{content:"・"}

/* ---- 運動と数字（強調④：数字を数え上げ、罫が伸びる） ---- */
.ex-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,84px);align-items:center}
.ex-grid img{width:100%;aspect-ratio:4/3;object-fit:cover}
.data{margin-top:clamp(48px,6vw,72px);padding-top:clamp(32px,4vw,44px);border-top:1px solid var(--rule)}
.data-nums{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px)}
.data-nums p{margin:0}
.data-nums .lab{display:block;font-family:var(--mincho);font-size:16.5px;letter-spacing:.1em;color:var(--fg);line-height:1.7}
.data-nums .num{display:block;font-family:var(--mincho);color:var(--hl);font-size:clamp(52px,7vw,84px);line-height:1.15;letter-spacing:.02em;font-variant-numeric:tabular-nums;margin:6px 0 4px}
.data-nums .num small{font-size:.42em;margin-left:.08em}
.data-nums .cap{display:block;font-size:14px;color:var(--fg2);line-height:1.8}
.data-nums .rl{display:block;height:1px;background:var(--ln);margin:14px 0 0;transform-origin:left;transition:transform 1.6s var(--ease) .3s}
html.v2js .data:not(.in) .rl{transform:scaleX(0)}
.data .evi-note{margin:30px 0 0}
.data .more-line{margin-top:8px}

/* ---- 6つのこと ---- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,4vw,56px)}
.svc li{padding:30px 0 34px;border-top:1px solid var(--rule)}
.svc .no{font-family:var(--pf);font-size:15px;letter-spacing:.12em;color:var(--accent)}
.svc .ek{font-family:var(--pf);font-style:italic;font-size:11.5px;letter-spacing:.18em;color:var(--accent);margin-left:10px}
.svc h3{font-size:clamp(19px,1.7vw,21px);line-height:1.65;letter-spacing:.08em;color:var(--hl);margin:12px 0 10px}
.svc p{font-size:15px;line-height:2;color:var(--fg);margin:0}

/* ---- ご家族へ・連携 ---- */
.family-sec{padding:clamp(56px,7vw,96px) 0 0}
.family{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px)}
.family h3{font-size:21px;letter-spacing:.1em;color:var(--hl);margin:0 0 14px;line-height:1.7}
.family p{font-size:15.5px;color:var(--fg);margin:0}
.family .box{border-top:1px solid var(--ln);padding-top:24px}

/* ---- 診療時間・アクセス ---- */
.acc-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,80px)}
.hours{width:100%;border-collapse:collapse;font-size:15px;line-height:1.8}
.hours th,.hours td{border-top:1px solid var(--rule);padding:16px 10px 16px 0;text-align:left;vertical-align:top}
.hours th{font-family:var(--mincho);font-weight:400;letter-spacing:.08em;width:42%;color:var(--hl)}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:1px solid var(--rule)}
.hours small{display:block;font-size:13.5px;color:var(--fg2)}
.addr{font-size:15.5px;line-height:2;margin:22px 0 0}
.addr a{text-decoration:none;border-bottom:1px solid var(--ln)}
.acc-grid figure img{width:100%;border:1px solid var(--rule)}

/* ---- 最後：朝の白、金の水平線（強調⑤） ---- */
.cta{padding:clamp(88px,11vw,150px) 0 clamp(80px,10vw,128px);overflow:hidden}
.horizon{position:relative;height:1px;margin:0 0 clamp(48px,6vw,72px)}
.horizon::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(190,165,94,0) 0%,var(--gold-d) 18%,var(--gold) 50%,var(--gold-d) 82%,rgba(190,165,94,0) 100%);
  transform-origin:left;transition:transform 2.6s var(--ease)}
.horizon::after{content:"";position:absolute;left:0;right:0;top:-6px;height:13px;background:radial-gradient(ellipse at 50% 50%,rgba(243,207,101,.35),rgba(243,207,101,0) 70%);
  opacity:1;transition:opacity 1.6s var(--ease) 2s}
html.v2js .horizon:not(.in)::before{transform:scaleX(0)}
html.v2js .horizon:not(.in)::after{opacity:0}
.cta h2.sec{font-size:clamp(27px,3.4vw,38px)}
.cta .btns{margin:34px 0 26px}
.cta .btn{min-height:58px;padding:16px 34px;font-size:16px}
.cta .notes{font-size:14px;color:var(--fg2);line-height:1.95;margin:0}


/* =========================================================================
   8. 下層ページの部品
   型：① 夜の扉 .pg-hero → ② 朝の節（白と生成りを交互）→ ③ ご相談 .cz-ask → ④ 最後 .cta
   ========================================================================= */

/* ---- ① 夜の扉：紺の地＋写真（暗く覆う）＋飾り英字＋ページ名。ページ名だけが一度ほのかに灯る ---- */
.pg-hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(380px,58vh,560px);overflow:hidden;background:var(--navy2)}
.pg-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.pg-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,19,44,.8) 0%,rgba(11,19,44,.42) 38%,rgba(11,19,44,.6) 72%,#0B132C 100%)}
.pg-hero-in{position:relative;z-index:2;width:100%;padding-top:calc(var(--hd-h) + 56px);padding-bottom:clamp(36px,5vw,56px)}
.pg-hero .en{margin-bottom:12px}
.pg-title{font-size:clamp(28px,3.6vw,42px);line-height:1.6;letter-spacing:.14em;color:#fff;margin:0;
  text-shadow:0 0 18px rgba(255,255,255,.22),0 1px 18px rgba(0,0,0,.45);
  animation:dawnGlow 2.6s var(--ease) .35s both}
.pg-sub{margin:14px 0 0;font-size:15px;line-height:1.95;color:rgba(255,255,255,.85);max-width:36em}
/* パンくず（扉の下のほう） */
.crumb{margin:22px 0 0;font-size:13px;letter-spacing:.08em;line-height:1.6;color:rgba(255,255,255,.72)}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center}
.crumb li+li::before{content:"／";margin:0 .7em;color:rgba(255,255,255,.45)}
.crumb a{display:inline-flex;align-items:center;min-height:48px;color:inherit;text-decoration:none}
.crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.crumb [aria-current]{color:rgba(255,255,255,.9)}

/* ---- 節の見出しの組（英字＋見出し＋導入） ---- */
.sec-head{margin:0 0 clamp(32px,4vw,48px)}
.sec-head h2.sec{margin-bottom:18px}
.sec-head .lead{margin:0}

/* ---- 番号つきの手順（左の軸1本。番号は線の丸） ---- */
.steps{border-top:1px solid var(--rule);counter-reset:st}
.steps>li{counter-increment:st;position:relative;padding:24px 0 26px 66px;border-bottom:1px solid var(--rule)}
.steps>li::before{content:counter(st);position:absolute;left:0;top:22px;width:46px;height:46px;border:1px solid var(--ln);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--mincho);font-size:18px;line-height:1;color:var(--accent)}
.steps h3{font-size:clamp(18px,1.8vw,20px);line-height:1.7;letter-spacing:.08em;color:var(--hl);margin:6px 0 6px}
.steps p{margin:0;font-size:15.5px;line-height:2;color:var(--fg)}
.steps p+p{margin-top:.6em}

/* ---- カード D16：番号＋欧文＋縦罫。塗りアイコンは使わない ---- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,52px) clamp(24px,4vw,56px)}
.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start}
.card .no{font-family:var(--pf);font-size:15px;letter-spacing:.12em;line-height:1.6;color:var(--accent);padding-top:1px}
.card .tx{border-left:1px solid var(--ln);padding:0 0 4px 18px;min-width:0}
.card .en{font-size:11.5px;letter-spacing:.18em;margin:0 0 6px}
.card h3{font-size:clamp(19px,1.7vw,21px);line-height:1.65;letter-spacing:.08em;color:var(--hl);margin:0 0 10px}
.card p{font-size:15px;line-height:2;color:var(--fg);margin:0 0 14px}
.card p:last-child{margin-bottom:0}
.card .btn{margin-top:4px}
/* /rehab/ の形（D04＋D10＋D12）：面＋左に金の太罫・間28px・英字なし・番号なし */
.cards.is-panel{grid-template-columns:1fr;gap:28px}
.cards.is-panel .card{display:block;background:#fff;border-left:3px solid var(--gold-d);padding:24px clamp(20px,3vw,32px);
  /* 白い札の中は、ページが夜の色でも常に「朝の文字色」（白地に白い文字を防ぐ） */
  --fg:var(--ink);--fg2:var(--muted);--rule:var(--line);--accent:var(--gold-w);--ln:var(--gold-d);--hl:var(--navy);color:var(--fg)}
.sky-white .cards.is-panel .card{background:var(--paper)}
.cards.is-panel .card .tx{border-left:0;padding:0}

/* ---- 表 ---- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:1.8;color:var(--fg)}
.tbl caption{text-align:left;font-family:var(--mincho);font-size:17px;letter-spacing:.1em;color:var(--hl);padding:0 0 10px}
.tbl th,.tbl td{border-top:1px solid var(--rule);padding:14px 12px 14px 0;text-align:left;vertical-align:top}
.tbl tr:last-child>th,.tbl tr:last-child>td{border-bottom:1px solid var(--rule)}
.tbl thead th{font-family:var(--gothic);font-size:13.5px;letter-spacing:.08em;color:var(--fg2);font-weight:400}
.tbl tbody th{font-family:var(--mincho);font-weight:400;letter-spacing:.06em;color:var(--hl)}
.tbl small{display:block;font-size:13.5px;color:var(--fg2)}
/* 曜日の表（●／−） */
.tbl.week th,.tbl.week td{text-align:center;padding:12px 4px}
.tbl.week tbody th{text-align:left;padding-left:0;white-space:nowrap}
.tbl.week .o{color:var(--accent)}
.tbl.week .x{color:var(--fg2)}
/* 項目と中身の一覧（所在地・最寄り駅…） */
.dl{border-top:1px solid var(--rule)}
.dl>div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.dl dt{font-family:var(--mincho);font-size:15px;letter-spacing:.08em;line-height:1.85;color:var(--hl)}
.dl dd{margin:0;font-size:15px;line-height:1.85;color:var(--fg)}
.dl dd a{color:var(--hl);text-underline-offset:4px}

/* ---- よくあるご質問（<details>） ---- */
.faq{border-top:1px solid var(--rule)}
.faq>li{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;position:relative;display:flex;align-items:baseline;gap:14px;min-height:64px;
  padding:17px 44px 17px 0;font-family:var(--mincho);font-size:17px;line-height:1.75;letter-spacing:.06em;color:var(--hl)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";flex:0 0 auto;font-family:var(--pf);font-style:italic;font-size:18px;line-height:1;color:var(--accent)}
.faq summary::after{content:"";position:absolute;right:12px;top:50%;width:10px;height:10px;margin-top:-7px;
  border-right:1px solid var(--ln);border-bottom:1px solid var(--ln);transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.faq .a{margin:0;padding:0 0 26px 31px;font-size:15.5px;line-height:2.05;color:var(--fg)}
.faq-tap{font-size:14px;color:var(--fg2);margin:0 0 14px}

/* ---- ③ ご相談（F08 の右側と同じ「どなたのご相談ですか？＋5つの答え」を小さめに） ---- */
.cz-ask{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6vw,80px);align-items:start}
.cz-ask .pick-q{font-size:clamp(22px,2.4vw,28px)}
.cz-ask .pick-how{margin:0}
.cz-ask .pick .btn{min-height:56px;font-size:16px}

/* ---- 数字の棒（/hd/ /rehab/ 用。数字の数え上げと棒だけは動いてよい） ----
   <span class="bar" style="--to:85.4%"><i></i></span>  ← style= は CSS変数だけ */
.bar{display:block;position:relative;height:6px;background:var(--rule);overflow:hidden;margin:10px 0 0}
.bar>i{position:absolute;left:0;top:0;bottom:0;width:var(--to,0);background:var(--ln);transition:width 1.6s var(--ease) .3s}
html.v2js [data-watch]:not(.in) .bar>i{width:0}

/* ---- 写真1枚（説明つき） ---- */
.fig img{width:100%}
.fig figcaption{margin:10px 0 0;font-size:13.5px;line-height:1.8;color:var(--fg2)}


/* =========================================================================
   9. お知らせ・記事
   mikazuki_news_item() の出力：li.ni.ni-{event|news|notice} > a > (span.ni-ph) span.ni-body >
     span.ni-meta(span.ni-kind, time) / span.ni-t / span.ni-when / span.ni-x
   ========================================================================= */
.newslist{border-top:1px solid var(--rule)}
.newslist .ni{border-bottom:1px solid var(--rule)}
.newslist .ni>a{display:block;padding:22px 0;min-height:48px;text-decoration:none;color:inherit}
.newslist .ni>a:hover .ni-t{text-decoration:underline;text-decoration-color:var(--ln);text-underline-offset:6px}
.ni-ph{display:block;margin:0 0 14px;overflow:hidden}
.ni-ph img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s var(--ease)}
.newslist .ni>a:hover .ni-ph img{transform:scale(1.03)}
.ni-body{display:block;min-width:0}
.ni-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 8px}
.ni-meta time{font-family:var(--pf);font-size:13px;letter-spacing:.08em;line-height:1.6;color:var(--fg2)}
/* 区分：催し＝金の枠／休診＝紺の塗り（見落とすと困る）／お知らせ＝線だけ */
.ni-kind{display:inline-block;padding:2px 10px;font-size:12.5px;letter-spacing:.1em;line-height:1.7;white-space:nowrap;border:1px solid var(--rule);color:var(--fg2)}
.ni-event .ni-kind{border-color:var(--ln);color:var(--accent)}
.ni-notice .ni-kind{background:var(--hl);border-color:var(--hl);color:var(--inv)}
.ni-t{display:block;font-family:var(--mincho);font-size:17px;line-height:1.75;letter-spacing:.06em;color:var(--hl)}
.ni-when{display:block;margin-top:6px;font-size:15px;line-height:1.8;color:var(--fg)}
.ni-x{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;font-size:15px;line-height:1.9;color:var(--fg2)}
/* G15（トップ）：日付が上・題が下、間6px。写真・区分・抜粋は出さない（PHP 側 $brief=true） */
.newslist.is-brief .ni>a{padding:18px 0}
.newslist.is-brief .ni-meta{margin-bottom:6px}
/* これからの催し：金の線で「まだ間に合う」 */
.newslist.upcoming{border-top:0}
.newslist.upcoming .ni{border-bottom:0;border-left:2px solid var(--ln);margin-bottom:14px}
.newslist.upcoming .ni>a{padding:18px 18px}
/* 記事ページ：催しの「いつ・どこで・申し込み」 */
.ev{margin:0 0 34px;border-top:1px solid var(--rule)}
.ev>div{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.ev dt{font-family:var(--mincho);font-size:15px;letter-spacing:.08em;color:var(--fg2)}
.ev dd{margin:0;font-size:15.5px;line-height:1.85;color:var(--fg)}
.ev dd a{display:inline-block;padding:11px 0;margin:-11px 0;color:var(--hl);text-underline-offset:4px}
.ev-done{display:inline-block;margin-left:10px;padding:2px 10px;font-size:12.5px;letter-spacing:.08em;border:1px solid var(--rule);color:var(--fg2)}
.ni-meta-solo{margin-bottom:22px}
.backlink{margin:40px 0 0}
.backlink a{display:inline-flex;align-items:center;min-height:48px;color:var(--hl);text-underline-offset:5px}
/* ページ送り */
.pager{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 14px;
  border:1px solid var(--rule);font-size:14px;color:var(--fg);text-decoration:none}
.pager .current{border-color:var(--hl);color:var(--hl)}


/* =========================================================================
   10. フォーム（/contact/ の #mkz-contact。ほかのフォームは class="form" で同じ見た目）
   ★ 入力欄の文字は16px。これより小さいと iPhone が入力時に画面を拡大します
   ========================================================================= */
#mkz-contact p,.form p{margin:0 0 24px}
.flabel{display:block;font-family:var(--gothic);font-size:15px;letter-spacing:.08em;line-height:1.7;color:var(--fg);margin:0 0 8px}
.req{display:inline-block;margin-left:8px;padding:0 8px;font-size:12.5px;line-height:1.7;letter-spacing:.06em;border:1px solid #a8443c;color:#a8443c;vertical-align:1px}
#mkz-contact input,#mkz-contact select,#mkz-contact textarea,
.form input,.form select,.form textarea{
  display:block;width:100%;min-height:52px;padding:12px 14px;border:1px solid #cfccc2;border-radius:0;background:#fff;
  font-family:var(--gothic);font-size:16px;line-height:1.7;letter-spacing:.03em;color:var(--ink);
  -webkit-appearance:none;appearance:none;transition:border-color .2s ease,box-shadow .2s ease}
#mkz-contact select,.form select{padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
#mkz-contact textarea,.form textarea{min-height:180px;line-height:1.9;resize:vertical}
#mkz-contact input:focus,#mkz-contact select:focus,#mkz-contact textarea:focus,
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(20,34,78,.12)}
#mkz-contact .note,.form .note{margin:0 0 26px}
#mkz-contact button,.form button{font-family:var(--mincho)}
.fmsg{min-height:1.6em;margin:16px 0 0;font-size:15px;line-height:1.8}
.hp{position:absolute;left:-9999px}


/* =========================================================================
   11. 固定ページ本文（.entry）── 管理画面で書いた本文をそのまま整える
   ★ 本文の中の style=（旧デザインの緑の箱やボタン）は、ここで紺・金の形に上書きします。
     文言は変えません。見た目だけです
   ========================================================================= */
.entry{font-size:16px;line-height:2.1;color:var(--fg);max-width:40em}
.entry>:first-child{margin-top:0}
.entry>:last-child{margin-bottom:0}
.entry p{margin:0 0 1.4em}
.entry h2{font-size:clamp(21px,2.3vw,25px);line-height:1.7;letter-spacing:.1em;color:var(--hl);margin:2.2em 0 .9em;padding-top:1.1em;border-top:1px solid var(--rule)}
.entry h3{font-size:clamp(18px,1.9vw,20px);line-height:1.7;letter-spacing:.08em;color:var(--hl);margin:1.9em 0 .6em}
.entry h4{font-size:17px;line-height:1.7;letter-spacing:.06em;color:var(--hl);margin:1.6em 0 .5em}
.entry ul,.entry ol{margin:0 0 1.6em}
.entry li{position:relative;line-height:1.95;margin:0 0 .5em}
.entry ul>li{padding-left:22px}
.entry ul>li::before{content:"";position:absolute;left:0;top:.98em;width:10px;height:1px;background:var(--ln)}
.entry ol{counter-reset:en}
.entry ol>li{counter-increment:en;padding-left:2em}
.entry ol>li::before{content:counter(en) ".";position:absolute;left:0;top:0;font-family:var(--mincho);color:var(--accent)}
.entry strong,.entry b{font-weight:inherit;background:linear-gradient(transparent 58%,rgba(243,207,101,.42) 58%)}
.entry a{color:var(--hl);text-decoration:underline;text-decoration-color:var(--ln);text-underline-offset:5px}
.entry img{margin:1.6em 0;height:auto}
.entry figure{margin:1.6em 0}
.entry figcaption{font-size:13.5px;color:var(--fg2);margin-top:8px}
.entry blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:1px solid var(--ln);color:var(--fg)}
.entry table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:15px}
.entry th,.entry td{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:12px 10px 12px 0;text-align:left;vertical-align:top}
.entry th{font-family:var(--mincho);font-weight:400;color:var(--hl)}
.entry hr{border:0;border-top:1px solid var(--rule);margin:2.4em 0}
.entry .lead{max-width:none}
/* 本文の中の style= を、ブランドの形へ（色・角丸・塗りを外す） */
.entry [style]{border-radius:0!important;font-weight:inherit!important}
.entry p[style*="background"],.entry p[style*="border"],.entry div[style*="background"],.entry div[style*="border"]{
  background:transparent!important;border:1px solid var(--rule)!important;border-left:2px solid var(--ln)!important;
  padding:16px 20px!important;color:var(--fg)!important}
.entry p[style*="color"]:not([style*="background"]){color:var(--fg2)!important;font-size:14px!important;line-height:1.95!important}
.entry a[style]{display:inline-flex!important;align-items:center;justify-content:center;min-height:52px;padding:12px 26px!important;margin:6px 12px 6px 0!important;
  background:transparent!important;border:1px solid var(--fg)!important;color:var(--fg)!important;
  font-family:var(--mincho);font-size:15.5px;letter-spacing:.12em;line-height:1.5;text-decoration:none!important}
.entry a[style]:hover{background:var(--fg)!important;color:var(--inv)!important}


/* =========================================================================
   12. コンシェルジュの窓（mikazuki-v2.js が開く。本体 concierge.html は触らない）
   ========================================================================= */
.cz-back{position:fixed;inset:0;z-index:900;background:rgba(11,19,44,.55);opacity:0;transition:opacity .3s}
.cz-back.on{opacity:1}
.cz-pane{position:fixed;z-index:901;background:#fff;display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(11,19,44,.4);
  transition:transform .38s var(--ease),opacity .3s}
.cz-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 18px;background:#0B132C;color:#fff;
  font-family:var(--mincho);font-size:15px;letter-spacing:.1em;line-height:1.5}
.cz-bar small{display:block;font-family:var(--pf);font-style:italic;font-size:11px;letter-spacing:.2em;color:var(--gold)}
.cz-close{min-width:96px;min-height:48px;border:1px solid rgba(255,255,255,.7);background:transparent;color:#fff;
  font:15px/1 var(--gothic);letter-spacing:.08em;cursor:pointer}
.cz-close:hover{background:#fff;color:#0B132C}
.cz-pane iframe{flex:1;width:100%;border:0;display:block;background:#fff}
.cz-side{top:0;right:0;bottom:0;width:min(460px,100vw);transform:translateX(100%)}
.cz-sheet{left:0;right:0;bottom:0;height:min(88svh,860px);transform:translateY(100%)}
.cz-modal{left:50%;top:50%;width:min(480px,calc(100vw - 24px));height:min(820px,calc(100svh - 40px));transform:translate(-50%,-46%);opacity:0}
.cz-pane.on{transform:none;opacity:1}
.cz-modal.on{transform:translate(-50%,-50%)}
.cz-embed{width:100%;border:0;display:block;background:#fff}
html.cz-lock{overflow:hidden}
@media (min-width:901px){.cz-sheet{left:50%;right:auto;width:560px;margin-left:-280px}}
@media (max-width:760px){
  .cz-side,.cz-modal{left:0;right:0;top:auto;bottom:0;width:auto;height:92svh;margin:0;transform:translateY(100%);opacity:1}
  .cz-pane.on{transform:none}
}


/* ---- かたまりの間をあける（style= を書かないため）。部品の margin より後に置いて勝たせる ---- */
.mt-m.mt-m{margin-top:clamp(40px,5vw,56px)}
.mt-l.mt-l{margin-top:clamp(64px,8vw,104px)}


/* =========================================================================
   13. 幅ごとの調整
   ========================================================================= */
/* ---- 601px以上：本文は40字まで（B19＋P09） ---- */
@media (max-width:600px){
  .txt,.entry{max-width:none}
}

/* ---- タブレット（761〜1020px） ---- */
@media (min-width:761px) and (max-width:1020px){
  .facts ul{grid-template-columns:1fr 1fr}
  .facts li:nth-child(2){border-right:0;margin-right:0}
  .facts li:nth-child(n+3){border-top:1px solid var(--rule)}
  .svc,.cards{grid-template-columns:1fr 1fr}
  .st-in{grid-template-columns:var(--mk) minmax(0,1fr) minmax(0,1fr)}
  .talk-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
  .ft-grid{grid-template-columns:1fr 1fr}
  .ft-grid>:first-child{grid-column:1 / -1}
}

/* ---- スマホ（〜760px）：左の軸1本・押せるもの48px以上 ---- */
@media (max-width:760px){
  :root{--hd-h:70px}
  .hd-in{gap:10px}
  .brand{gap:8px}
  .brand img{width:34px;height:34px}
  .brand .nm{font-size:14.5px;letter-spacing:.08em}
  .brand small{display:none}
  .ft .brand small{display:block}
  .hd .btn.gold{min-height:48px;padding:8px 12px;font-size:13px;letter-spacing:.08em}
  .hero-in{padding-top:92px;padding-bottom:72px}
  .hero-note{bottom:56px}
  .facts ul{grid-template-columns:1fr}
  .facts li{border-right:0;margin-right:0;padding:22px 0 24px;border-bottom:1px solid var(--rule)}
  .koyomi-wrap,.concept-grid,.ex-grid,.acc-grid,.family,.fl-head-grid,.news-grid,.split,.cz-ask{grid-template-columns:1fr}
  .split.rev>:first-child{order:0}
  .split figure,.split .ph{order:-1}
  .fl-head-grid,.news-grid{gap:20px}
  .k-days{gap:4px}
  .k-days li{min-height:64px}
  .k-days .d{font-size:16px}
  .k-days .m{font-size:11px;letter-spacing:0}
  .env{grid-template-columns:1fr}
  .env li:nth-child(odd){border-right:0;margin-right:0}
  .data-nums{grid-template-columns:1fr;gap:32px}
  .svc,.cards,.cards.c2{grid-template-columns:1fr}
  .btns{flex-direction:column}
  .btns .btn{width:100%}
  .hours th{width:auto;display:block;padding-bottom:2px}
  .hours td{display:block;border-top:0;padding-top:0}
  .hours tr{display:block;border-top:1px solid var(--rule)}
  .hours th{border-top:0}
  .hours tr:last-child th{border-bottom:0}
  /* 流れ：写真は段の上、番号は左の軸1本 */
  .flow{--mk:44px;--cg:16px}
  .step{--pt:44px}
  .st-in{grid-template-columns:var(--mk) minmax(0,1fr);grid-template-areas:". ph" "mk body"}
  .st-ph{margin:0 0 20px;aspect-ratio:3/2}
  .st-h{font-size:21px}
  .st-p{font-size:15.5px}
  /* 会話の見本 */
  .talk-grid{grid-template-columns:1fr;gap:40px}
  .cv{max-width:380px;width:100%}
  .cv-body{min-height:0}
  .cv figcaption{text-align:left}
  .pick .btn{min-height:58px;font-size:16px;padding:12px 18px}
  /* 下層ページ */
  .pg-hero{min-height:clamp(320px,78vw,420px)}
  .pg-title{font-size:clamp(25px,7vw,30px);letter-spacing:.1em}
  .steps>li{padding-left:58px}
  .steps>li::before{width:42px;height:42px;font-size:17px}
  .faq summary{font-size:16px;min-height:60px}
  .faq .a{padding-left:0;font-size:15px}
  .dl>div{grid-template-columns:1fr;gap:2px}
  .ev>div{grid-template-columns:1fr;gap:2px}
  .tbl{font-size:14.5px}
  .ft-grid{grid-template-columns:1fr;gap:40px}
  .ft-nav a{min-height:48px;font-size:15px}
  .entry h2{margin-top:1.8em}
}


/* =========================================================================
   14. 動きを減らす設定：最初から全部見える・動かない
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important}
  html.v2js .cv .cv-b{opacity:1;transform:none}
  html.v2js .koyomi:not(.in) .on{border-color:var(--ln);background:rgba(243,207,101,.07)}
  html.v2js .koyomi:not(.in) .on .d,html.v2js .koyomi:not(.in) .on .m{color:var(--accent)}
  html.v2js .data:not(.in) .rl,html.v2js .horizon:not(.in)::before{transform:none}
  html.v2js .horizon:not(.in)::after{opacity:1}
  html.v2js [data-watch]:not(.in) .bar>i{width:var(--to,0)}
}

/* ===== v2.1 下層ページの部品 ===== */
/* =========================================================================
   v2.1 下層ページの部品（2026-10-05・_v2.1下層ページ設計書.md）
   -------------------------------------------------------------------------
   骨組み（全ページこの順）：
     ① 夜の扉 .pg-door → ② 要点 .pg-keys → ③ 目次 .pg-toc（＋読み進めると細い帯 .pg-subnav：JSが作る）
     → ④ 本文の節 .pg-sec（.pg-head／.pg-split／.pg-steps／カード）→ ⑤ 次に読む .pg-next
     → ⑥ ご相談 .cz-ask → ⑦ 最後 .cta（金の地平線）
   ・扉・要点・目次＝夜（sky night sky-night）。本文＝朝（白と生成りを交互）。夜→朝の移ろいはトップだけ
   ・動くのは、扉のページ名が一度灯ることだけ（＋各ページの数字・地平線）。目次の帯の印は「状態」で、動きではない
   ・v2 の .pg-hero／.split／.steps は、まだ作り直していないページが使っているので残しています
   ・写し方は v2-部品の使い方.md の「v2.1 下層ページ」の章
   ========================================================================= */

/* ---- ① 夜の扉：写真＋夜の覆い（62〜78%）。ページ名は縦組みの明朝で中央。英字とパンくずは左下 ---- */
.pg-door{position:relative;display:flex;flex-direction:column;min-height:max(420px,68vh);overflow:hidden;background:var(--navy2);color:#fff}
.pg-door>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
/* 覆いはいちばん薄い所でも 0.62（白い写真の上でも白い文字が 4.5:1 以上）。中央は縦の一行のために少し濃く、下は要点の夜へつなぐ */
.pg-door::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* 2026-10-05 写真がほとんど見えなかったので、トップのヒーローと同じ考え方に：まん中は薄く写真を見せ、
     縦のページ名の後ろだけ楕円で濃くする（そこで白い文字の 4.5:1 を確保）。上と下は濃く（ヘッダーとパンくず・要点の夜へ） */
  background:radial-gradient(ellipse 26% 60% at 50% 46%,rgba(11,19,44,.6) 0%,rgba(11,19,44,0) 100%),
             linear-gradient(180deg,rgba(11,19,44,.72) 0%,rgba(11,19,44,.3) 30%,rgba(11,19,44,.38) 62%,rgba(11,19,44,.86) 86%,#0B132C 100%)}
.pg-door-in{position:relative;z-index:2;flex:1;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px);
  padding:calc(var(--hd-h) + 28px) var(--gut) 24px}
/* トップの .hero-vert と同じ扱い。.ph ごとに1列（右から左へ） */
.pg-door-title{writing-mode:vertical-rl;font-family:var(--mincho);font-weight:400;font-size:clamp(30px,5vh,46px);line-height:1.3;letter-spacing:.24em;
  color:#fff;margin:0;white-space:nowrap;text-shadow:0 0 18px rgba(255,255,255,.22),0 1px 18px rgba(0,0,0,.45)}
.pg-door-title .ph{display:block;animation:dawnGlow 2.6s var(--ease) both;animation-delay:calc(.35s + var(--i,0) * 1s)}
/* 縦の一行の左に添える小さな列（任意）。ページの別名など。灯りはページ名のあと */
.pg-door-sub{writing-mode:vertical-rl;font-family:var(--mincho);font-size:clamp(15px,2vh,18px);line-height:1.5;letter-spacing:.24em;
  color:rgba(255,255,255,.88);margin:0;white-space:nowrap;align-self:center;animation:dawnGlow 2.6s var(--ease) 1.2s both}
.pg-door-foot{position:relative;z-index:2;width:100%;padding-bottom:clamp(14px,2.4vw,28px)}
.pg-door-foot .en{margin:0}
.pg-door .crumb{margin:0;color:rgba(255,255,255,.84)}
.pg-door .crumb [aria-current]{color:#fff}

/* ---- ② 要点（トップの要点4つと同じ顔：金の罫が上・英字・明朝の見出し・小さな一文）。扉のすぐ下、夜のまま ---- */
.pg-keys{padding:clamp(12px,2vw,24px) 0 clamp(56px,7vw,88px)}
/* 3つでも4つでも、その数で横に並ぶ（grid-auto-flow:column） */
.pg-keys-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0 clamp(20px,3vw,40px)}
.pg-keys-list>li{border-top:1px solid var(--ln);padding:24px 0 10px}
.pg-keys-list .en{margin:0 0 8px}
.pg-keys-list b{display:block;font-family:var(--mincho);font-weight:600;font-size:clamp(19px,1.8vw,22px);letter-spacing:.1em;line-height:1.6;color:var(--hl);margin:0 0 8px}
.pg-keys-list small{display:block;font-size:14px;line-height:1.95;color:var(--fg2)}

/* ---- ③ 目次「このページの内容」：番号つきのリンク。枠で囲んで「道しるべ」と分かるように ---- */
.pg-toc-sec{padding:0 0 clamp(72px,9vw,120px)}
.pg-toc{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start;
  border:1px solid var(--rule);padding:clamp(26px,4vw,48px) clamp(22px,4vw,52px)}
.pg-toc-label{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:13.5px;letter-spacing:.14em;line-height:1.6;color:var(--fg2)}
.pg-toc-label::before{content:"";flex:0 0 auto;width:28px;height:1px;background:var(--ln)}
.pg-toc h2.sec{font-size:clamp(22px,2.4vw,28px);margin:0 0 14px}
.pg-toc .note{margin:0}
.pg-toc-list{border-top:1px solid var(--rule)}
.pg-toc-list a{display:grid;grid-template-columns:2.6em minmax(0,1fr) auto;align-items:center;column-gap:10px;min-height:64px;padding:10px 6px 10px 0;
  border-bottom:1px solid var(--rule);text-decoration:none;color:var(--fg)}
.pg-toc-list .no{font-family:var(--pf);font-size:15px;letter-spacing:.12em;line-height:1.4;color:var(--accent)}
.pg-toc-list .t{font-family:var(--mincho);font-size:17.5px;letter-spacing:.08em;line-height:1.65;color:var(--hl)}
/* 下向きの印（線だけ。塗らない） */
.pg-toc-list .ar{width:9px;height:9px;margin:0 6px 5px 0;border-right:1.5px solid var(--ln);border-bottom:1.5px solid var(--ln);transform:rotate(45deg)}
.pg-toc-list a:hover .t{text-decoration:underline;text-decoration-color:var(--ln);text-underline-offset:6px}

/* ---- ③' 目次の細い帯（mikazuki-v2.js が .pg-toc から作る。節が4つ以上のページだけ）
        ヘッダーのすぐ下に残り、いま読んでいる節に印（aria-current）。最後の節が見えている間は隠す ---- */
.pg-subnav{position:fixed;left:0;right:0;top:64px;z-index:19;background:rgba(11,19,44,.96);box-shadow:0 1px 0 rgba(255,255,255,.12);
  visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s}
.pg-subnav.on{visibility:visible;opacity:1;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s}
.pg-subnav-sc{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pg-subnav-sc::-webkit-scrollbar{display:none}
.pg-subnav ol{display:flex;gap:clamp(20px,2.6vw,36px);width:max-content;min-width:100%;
  padding:0 max(var(--gut),calc((100% - var(--wrapw)) / 2))}
.pg-subnav a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 2px;white-space:nowrap;text-decoration:none;
  font-family:var(--mincho);font-size:14.5px;letter-spacing:.1em;color:rgba(255,255,255,.82);box-shadow:inset 0 -2px 0 transparent}
.pg-subnav a .no{font-family:var(--pf);font-size:12px;letter-spacing:.1em;color:var(--gold)}
.pg-subnav a:hover{color:#fff}
.pg-subnav a[aria-current]{color:#fff;box-shadow:inset 0 -2px 0 var(--gold)}

/* ---- ④ 本文の節 ---- */
/* 目次から飛んだとき、ヘッダー（64px）＋帯（48px）の下に見出しが来るように（html の scroll-padding-top 76px に足される） */
.pg-sec{scroll-margin-top:56px}
.pg-sec:focus{outline:0}
/* 節の見出し：英字の小見出し（番号つき）＋明朝の見出し＋金の短い罫 */
.pg-head{margin:0 0 clamp(32px,4vw,48px)}
.pg-head .en{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.pg-no{font-style:normal;letter-spacing:.12em}
.pg-no::after{content:"";display:inline-block;width:18px;height:1px;margin-left:12px;vertical-align:middle;background:var(--ln)}
.pg-head h2.sec{margin:0}
.pg-head h2.sec::after{content:"";display:block;width:48px;height:1px;margin-top:22px;background:var(--ln)}
.pg-head .lead{margin:26px 0 0}
.pg-head .lead+.lead{margin-top:1.1em}

/* 写真と文の2段組。PCは左右を交互に（.ph-left で写真を左へ）。写真は読み進めても見えたまま（sticky）。スマホは写真が上 */
.pg-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,84px);align-items:start}
.pg-split.ph-left{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.pg-split.ph-left>.pg-split-ph{order:-1}
.pg-split-ph{margin:0;position:sticky;top:136px}
.pg-split-ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pg-split-ph figcaption{margin:10px 0 0;font-size:13.5px;line-height:1.8;color:var(--fg2)}
.pg-split-tx>:last-child{margin-bottom:0}

/* 手順：トップの「流れ」と同じ線と丸番号。金の点は動かさない（静止） */
.pg-steps{--mk:52px;--gap:clamp(18px,2.6vw,32px);counter-reset:pgst}
.pg-steps>li{counter-increment:pgst;position:relative;min-height:calc(var(--mk) + 12px);padding:0 0 clamp(30px,4vw,44px) calc(var(--mk) + var(--gap))}
.pg-steps>li:last-child{padding-bottom:0}
.pg-steps>li::before{content:counter(pgst);position:absolute;left:0;top:0;z-index:2;width:var(--mk);height:var(--mk);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--mincho);font-size:calc(var(--mk) * .4);line-height:1;
  background:var(--navy);color:var(--gold);border:1.5px solid var(--gold);box-shadow:0 0 0 6px var(--sky,#fff)}
.pg-steps>li::after{content:"";position:absolute;left:calc(var(--mk) / 2);top:calc(var(--mk) / 2);bottom:calc(var(--mk) / -2);width:1px;margin-left:-.5px;background:var(--ln)}
.pg-steps>li:last-child::after{display:none}
.pg-steps .en{margin:4px 0 2px}
.pg-steps h3{font-size:clamp(19px,2vw,22px);line-height:1.6;letter-spacing:.08em;color:var(--hl);margin:9px 0 8px}
.pg-steps .en+h3{margin-top:0}
.pg-steps p{margin:0;font-size:16px;line-height:2;color:var(--fg);max-width:40em}
.pg-steps p+p{margin-top:.6em}

/* ---- ⑤ 次に読むページ：写真つきのカード。カード全体が1つのリンク ---- */
.pg-next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,32px)}
.pg-next.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-next>li{display:flex}
.pg-next a{flex:1;display:grid;grid-template-rows:auto 1fr;min-height:48px;text-decoration:none;color:var(--fg);border:1px solid var(--rule);background:var(--sky,#fff);
  transition:border-color .3s var(--ease)}
.pg-next-ph{display:block;overflow:hidden}
.pg-next-ph img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .6s var(--ease)}
.pg-next-tx{position:relative;display:block;padding:20px 52px 22px 22px}
.pg-next-tx .en{margin:0 0 4px}
.pg-next-tx b{display:block;font-family:var(--mincho);font-weight:400;font-size:clamp(19px,1.8vw,21px);letter-spacing:.1em;line-height:1.6;color:var(--hl)}
.pg-next-tx small{display:block;margin-top:6px;font-size:14.5px;line-height:1.85;color:var(--fg2)}
.pg-next-ar{position:absolute;right:20px;bottom:24px;font-family:var(--mincho);font-size:18px;line-height:1;color:var(--accent)}
.pg-next a:hover{border-color:var(--ln)}
.pg-next a:hover .pg-next-ph img{transform:scale(1.03)}
.pg-next a:hover b{text-decoration:underline;text-decoration-color:var(--ln);text-underline-offset:6px}

/* ---- 幅ごと ---- */
@media (min-width:761px) and (max-width:1020px){
  .pg-keys-list{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-toc{grid-template-columns:minmax(0,1fr)}
  .pg-next-tx{padding:18px 44px 20px 18px}
}
@media (max-width:760px){
  .pg-door{min-height:max(420px,60svh)}
  .pg-door-in{padding-top:calc(var(--hd-h) + 20px)}
  .pg-door-title{font-size:clamp(28px,4.4svh,36px);letter-spacing:.2em}
  .pg-door-sub{font-size:15px;letter-spacing:.2em}
  .pg-keys-list{grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}
  .pg-keys-list>li{padding:20px 0 14px}
  .pg-toc{grid-template-columns:minmax(0,1fr);gap:20px;padding:24px 20px}
  .pg-toc-list .t{font-size:16.5px}
  /* 帯は横に送れる。右の端を薄くして「まだ続く」と分かるように */
  .pg-subnav-sc{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .pg-subnav a{font-size:14px}
  .pg-split,.pg-split.ph-left{grid-template-columns:minmax(0,1fr);gap:28px}
  .pg-split-ph,.pg-split.ph-left>.pg-split-ph{order:-1;position:static}
  .pg-split-ph img{aspect-ratio:3/2}
  .pg-steps{--mk:44px}
  .pg-steps h3{margin-top:6px;font-size:19px}
  .pg-steps p{font-size:15.5px}
  /* スマホのカードは「写真が左・文が右」の横長に（縦に長くしない） */
  .pg-next,.pg-next.c2{grid-template-columns:minmax(0,1fr);gap:14px}
  .pg-next a{grid-template-rows:none;grid-template-columns:34% minmax(0,1fr)}
  .pg-next-ph img{height:100%;aspect-ratio:auto;min-height:112px}
  .pg-next-tx{padding:14px 40px 14px 16px}
  .pg-next-tx b{font-size:18px}
  .pg-next-tx small{font-size:14px;line-height:1.75}
  .pg-next-ar{right:14px;bottom:auto;top:50%;margin-top:-9px}
}
/* ===== /v2.1 下層ページの部品 ===== */

/* ===== page: hd ===== */
/* /hd/（page-hd.php）だけの見た目。2026-10-05 v2 化のときに足しました */
/* 院長の写真（縦長）は顔が切れないように上寄せ */
.pg-hd-director figure img{object-position:center 28%}
/* 連携先の一覧：罫で区切った名前の並び（広い画面3列・タブレット2列・スマホ1列＝左の軸1本） */
.pg-hd-partners .names-grp+.names-grp{margin-top:clamp(44px,5vw,64px)}
.pg-hd-partners .names-head .en{margin:0 0 4px}
.pg-hd-partners .names-head h3.sub{margin:0 0 16px}
.pg-hd-partners .names{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,3vw,40px);border-top:1px solid var(--rule)}
.pg-hd-partners .names>li{padding:13px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.8;letter-spacing:.04em;color:var(--fg)}
.pg-hd-partners .names>li.more{color:var(--fg2)}
@media (min-width:761px) and (max-width:1020px){
  .pg-hd-partners .names{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .pg-hd-partners .names{grid-template-columns:1fr}
  .pg-hd-partners .names>li{padding:7px 0;line-height:1.7}   /* 2026-10-05 42件で縦に長いので、スマホだけ行間を詰める（押す所ではないので48pxは要らない） */
}
/* ===== /page: hd ===== */

/* ===== page: service ===== */
/* /service/（page-service.php）だけの見た目。2026-10-05 v2 化のときに足しました */
/* 送迎範囲（dl.dl）を本文の下に少しあけて置き、続く一文は一覧のすぐ下に */
.pg-sv-area{margin-top:28px}
.pg-sv-area-note{margin:12px 0 0}
/* ===== /page: service ===== */


/* ===== page: recruit ===== */
/* .lbl＝文章のなかの強調（「まず話を聞いてみたい」）。太字にせず、見出しの色だけ（旧CSSと同じ扱い） */
.pg-recruit .lbl{font-weight:inherit;color:var(--hl)}
/* ===== /page: recruit ===== */


/* ===== page: rehab ===== */
/* /rehab/（page-rehab.php）だけの見た目。2026-10-05 v2 化のときに足しました。名前はすべて .rh- で始まります
   ・R03：本文は読む列（.narrow 680px）1本。カードは .cards.is-panel（D04＋D10＋D12）
   ・動くのは FIMの帯が伸びることだけ（数字・棒と同じ「強調」）。ほかは動かしません */

/* 節の中の最後の段落の下余白を消す（節の余白と二重にしない） */
.rh .narrow>:last-child{margin-bottom:0}
/* 導入の文が2つ続くとき */
.rh-head .lead+.lead{margin-top:1.1em}
/* 文の中の強調。太字にしない（旧CSSの .plain と同じ扱い。強調の合図は黄色のマーカー1つ） */
.rh-plain{font-weight:inherit}

/* ---- 時間の流れ（時刻つき・線）：番号の代わりに時刻。手順（.steps）とは形を分ける ----
   線は1px、印は白抜きの丸に金の細罫（塗らない）。時刻は「読ませる文字」なので --accent（白地で5.6:1） */
.rh-time{margin:0 0 20px}
.rh-time>li{position:relative;display:grid;grid-template-columns:5.4em minmax(0,1fr);column-gap:10px;row-gap:2px;
  padding:0 0 clamp(26px,3vw,34px) clamp(22px,2.4vw,30px)}
.rh-time>li:last-child{padding-bottom:0}
.rh-time>li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--rule)}
.rh-time>li:first-child::before{top:15px}
.rh-time>li:last-child::before{bottom:auto;height:15px}
.rh-time>li::after{content:"";position:absolute;left:-4px;top:10px;width:9px;height:9px;border-radius:50%;
  background:var(--bg,var(--sky,#fff));border:1px solid var(--ln)}
.rh-time time{grid-column:1;grid-row:1 / span 2;align-self:start;font-family:var(--pf);font-style:italic;
  font-size:clamp(17px,1.9vw,22px);line-height:1.35;letter-spacing:.04em;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.rh-time b{grid-column:2;display:block;font-family:var(--mincho);font-weight:400;font-size:17.5px;line-height:1.75;letter-spacing:.06em;color:var(--hl)}
.rh-time span{grid-column:2;display:block;font-size:15px;line-height:1.95;color:var(--fg2)}

/* ---- 器具の写真2枚（縦に積む） ---- */
.rh-shots{display:grid;gap:28px;margin:0 0 34px}
.rh-shots img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ---- 外部の研究の出典（カードの中） ---- */
.cards .card p.rh-src{margin:12px 0 0;font-size:13.5px;line-height:1.85;color:var(--fg2)}

/* ---- 約束の額（このページの核）：金の細罫の二重。文字は左そろえ ---- */
.rh-promise{border:1px solid var(--ln);box-shadow:inset 0 0 0 5px var(--bg,var(--sky,#fff)),inset 0 0 0 6px var(--ln);
  padding:clamp(34px,5vw,56px) clamp(24px,4.5vw,52px)}
.rh-promise h2.rh-q{font-size:clamp(22px,2.6vw,29px);line-height:1.8;margin:0 0 22px}
.rh-promise .dots{margin:4px 0 1.6em}
.rh-promise>:last-child{margin-bottom:0}

/* ---- 数字で見ると：4つの数字（.data）と、FIMの帯 ---- */
.data.rh-data{margin-top:0}
.rh-fim{margin-top:clamp(44px,5vw,60px)}
.rh-fim h3.sub{font-size:clamp(17px,1.7vw,19px)}
.rh-fim-bar{display:flex;height:34px;overflow:hidden;border:1px solid var(--rule)}
.rh-fim-bar>span{flex:0 0 auto;width:var(--to,0);display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:13px;letter-spacing:.04em;line-height:1;white-space:nowrap;transition:width 1.6s var(--ease) .3s}
.rh-fim .k{background:#14224E;color:#fff}
.rh-fim .u{background:#DDE1EA;color:#14224E}
.rh-fim .d{background:#faf9f6;color:#5A5A5A}
html.v2js .rh-fim:not(.in) .rh-fim-bar>span{width:0}
.rh-fim-legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px;font-size:14px;line-height:1.8;color:var(--fg)}
.rh-fim-legend>span{display:inline-flex;align-items:center;gap:8px}
.rh-fim-legend i{display:inline-block;width:12px;height:12px;border:1px solid var(--rule)}
.evi-note.rh-evi{margin:28px 0 0}
/* 出典の箱 */
.rh-source{margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--rule);font-size:13.5px;line-height:1.95;letter-spacing:.03em;color:var(--fg2)}
.rh-source b{font-weight:400;color:var(--hl)}
.rh-source a{display:inline-block;padding:12px 0;margin:-12px 0;color:var(--hl);text-underline-offset:4px}
#evidence .more-line{margin-top:24px}

/* ---- ご相談：読む列（680px）の中なので1列に ---- */
.cz-ask.rh-ask{grid-template-columns:minmax(0,1fr);gap:28px}

/* ---- 幅ごと ---- */
@media (max-width:900px){
  /* 帯の中の文字は細い区画では読めないので出さず、下の凡例に任せる（旧CSSと同じ） */
  .rh-fim-bar>span{font-size:0}
  .rh-fim-legend{font-size:14.5px}
}
@media (max-width:760px){
  /* 時刻は見出しの上へ。左の軸1本 */
  .rh-time>li{grid-template-columns:minmax(0,1fr);padding-left:22px}
  .rh-time time,.rh-time b,.rh-time span{grid-column:1;grid-row:auto}
  .rh-time time{font-size:16px;line-height:1.5}
  .rh-time b{font-size:16.5px}
  .rh-time>li::after{top:7px}
  .rh-time>li:first-child::before{top:12px}
  .rh-time>li:last-child::before{height:12px}
  .rh-fim-bar{height:30px}
  .rh-shots{gap:22px}
}
@media (prefers-reduced-motion:reduce){
  html.v2js .rh-fim:not(.in) .rh-fim-bar>span{width:var(--to,0)}
}
/* ===== /page: rehab ===== */

/* ===== 2026-10-05 流れ②の動画（旧サイトの院内ツアー冒頭） ===== */
.st-ph video{width:100%;height:100%;object-fit:cover;display:block;background:var(--navy2)}

/* ===== v2.1 page: hd ===== */
/* /hd/（page-hd.php）v2.1。2026-10-05 院長の写真（縦長 750×1000）は、PCでは縦長のまま（4:5）見せる。
   上寄せ（顔が切れない）は上の「page: hd」の .pg-hd-director figure img のまま。スマホは部品の既定（3:2・写真が上） */
@media (min-width:761px){
  .pg-hd-director .pg-split-ph img{aspect-ratio:4/5}
}
/* ===== /v2.1 page: hd ===== */

/* ===== v2.1 page: contact ===== */
/* /contact/（page-contact.php）v2.1。フォームの入力欄は読む列の幅（680px）まで。見出し（.pg-head）は他の節と同じ左の軸 */
.pg-ct-form #mkz-contact{max-width:var(--readw)}
/* ===== /v2.1 page: contact ===== */


/* ===== v2.1 page: rehab ===== */
/* /rehab/（page-rehab.php）を v2.1 の骨組みにしたときに足したもの（2026-10-05）。名前はすべて .rh- で始まります
   ・R03（読む列1本・680px）のまま v2.1 の部品を入れるための調整だけ。上の「page: rehab」の塊はそのまま使っています */

/* 扉：ページ名「リハビリテーション」は9字で1列の目安（8字）を1字こえるので、このページだけ少し小さく（語の途中で列を分けない） */
.rh-door .pg-door-title{font-size:clamp(26px,4vh,38px);letter-spacing:.16em}

/* 目次の左側に、冒頭の「歩くことの大切さ」の導入2つをそのまま置く */
.rh-toc .lead{font-size:15.5px;line-height:2.05;margin:0;max-width:none}
.rh-toc .lead+.lead{margin-top:.9em}

/* 目次の1項目にまとめた節の中の小さな節（h3）。罫で区切り、目次・ほかのページから直接来ても帯の下に見出しが来るように */
.rh-block{margin-top:clamp(64px,8vw,96px);padding-top:clamp(44px,5vw,60px);border-top:1px solid var(--rule);scroll-margin-top:56px}
.rh-block:focus{outline:0}
.rh-subhead{margin:0 0 clamp(26px,3vw,36px)}
.rh-subhead .en{margin:0 0 6px}
.rh-subhead h3.sub{font-size:clamp(21px,2.3vw,25px);margin:0}
.rh-subhead .lead{margin:20px 0 0}
.rh-block>:last-child{margin-bottom:0}

/* 約束の額（05）は .pg-head の外なので、番号と英字の間をほかの節と同じに */
.rh-promise>.en{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}

/* 数字の節は生成りの地になったので、FIMの帯の「低下」（生成り）が地に溶けないよう白に */
.sky-paper .rh-fim .d{background:#fff}

/* 次に読む：読む列（680px）の中なので、パソコンでも「写真が左・文が右」の横長を縦に3つ（スマホは共通の形のまま） */
@media (min-width:761px){
  .rh-next{grid-template-columns:minmax(0,1fr);gap:16px}
  .rh-next a{grid-template-rows:none;grid-template-columns:36% minmax(0,1fr)}
  .rh-next .pg-next-ph img{height:100%;aspect-ratio:auto;min-height:150px}
  .rh-next .pg-next-tx{align-self:center;padding:20px 56px 20px 26px}
  .rh-next .pg-next-ar{bottom:auto;top:50%;margin-top:-9px}
}

@media (max-width:760px){
  .rh-door .pg-door-title{font-size:clamp(24px,3.6svh,32px);letter-spacing:.14em}
  .rh-toc .lead{font-size:15px}
  .rh-block{margin-top:56px;padding-top:40px}
  .rh-subhead h3.sub{font-size:20px}
}
/* ===== /v2.1 page: rehab ===== */

/* ===== v2.1 page: page/news/404 ===== */
/* page.php（/qa/ と本文のページ /sougei/ など）・index.php（/news/）・single.php（記事）・404.php だけの見た目。
   2026-10-05 v2.1 化のときに足しました。名前はすべて .pgn- で始まります */

/* 扉のページ名を横組みに（長い題のとき）。縦の1列は8字までが目安なので、それより長い題は左下に横組みで置く。
   左の端は .wrap と同じ線（スマホは左の軸1本）。灯り方（.ph）は縦組みと同じ */
.pg-door-in.pgn-yoko{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:0;
  padding:calc(var(--hd-h) + 28px) max(var(--gut),calc((100% - var(--wrapw)) / 2)) 18px}
.pgn-yoko .pg-door-title{writing-mode:horizontal-tb;white-space:normal;max-width:24em;
  font-size:clamp(24px,3vw,36px);line-height:1.7;letter-spacing:.1em;word-break:auto-phrase;line-break:strict;overflow-wrap:anywhere}
/* 横組みの題は扉の下のほうに来るので、覆いを下半分で 0.66 以上に（白い写真の上でも白い文字が 4.5:1 以上） */
.pg-door.pgn-low::after{background:linear-gradient(180deg,rgba(11,19,44,.72) 0%,rgba(11,19,44,.46) 28%,rgba(11,19,44,.66) 44%,rgba(11,19,44,.8) 70%,#0B132C 100%)}
/* 縦組みの題が長くなっても扉からはみ出さない（8字で次の列へ折り返す）。8字までなら何も変わらない */
.pg-door-title.pgn-fit{white-space:normal;max-height:10.2em}

/* 文の中のリンク（お電話・公式LINE・Instagram）も押せる高さ48pxに（行の高さは変えない） */
.pgn-note a{display:inline-block;padding:12px 0;margin:-12px 0}

@media (max-width:760px){
  .pg-door-in.pgn-yoko{padding-top:calc(var(--hd-h) + 20px);padding-bottom:14px}
  .pgn-yoko .pg-door-title{font-size:clamp(22px,6.2vw,26px);letter-spacing:.08em}
}
/* ===== /v2.1 page: page/news/404 ===== */

/* ===== v2.1 page: medical ===== */
/* /medical/（page-medical.php）だけの見た目。2026-10-05 v2.1 化のときに足しました */
/* 最後の節：もとの「フォームで連絡する」を、ボタンの下の文字リンクに。下の住所との間を少しあける */
.cta .pg-md-form{margin:-6px 0 18px}
/* ===== /v2.1 page: medical ===== */

/* ===== v2.1 page: recruit ===== */
/* /recruit/（page-recruit.php）だけの見た目。2026-10-05 v2.1 化のときに足しました */
/* 働く環境：写真と文の2段組の、文の列に入れるカード（D16）は1列に（3列だと文字が縦に細く割れるため） */
.cards.pg-rc-cards{grid-template-columns:minmax(0,1fr);gap:clamp(28px,3vw,40px)}
/* 募集している職種：広い画面では2列（左から順に読む）。スマホは1列＝左の軸1本 */
@media (min-width:761px){
  .dots.pg-rc-pos{columns:2;column-gap:clamp(32px,5vw,72px);max-width:44em}
  .dots.pg-rc-pos>li{break-inside:avoid}
}
/* 最後の節：もとの「フォームで問い合わせる」を、ボタンの下の文字リンクに */
.cta .pg-rc-form{margin:-6px 0 18px}
/* ===== /v2.1 page: recruit ===== */

/* ===== v2.1 page: contact（扉の写真） ===== */
/* band-counsel.jpg はまん中にスタッフの顔があり、PCでは縦のページ名がちょうど顔に重なる。PCだけ写真を左寄せにして、顔をページ名の右へ逃がす */
@media (min-width:761px){
  .pg-door.pg-ct-door>img{object-position:30% 45%}
}
/* ===== /v2.1 page: contact（扉の写真） ===== */

/* ===== v2.1 page: page/news/404（追記） ===== */
/* 横組みの題の幅を24em→26emに。/sougei/ の題が PC・タブレットで「みか／づき」と院名の途中で折れていたため（1280・1024・900で確認） */
.pgn-yoko .pg-door-title{max-width:26em}
/* ===== /v2.1 page: page/news/404（追記） ===== */

/* ===== v2.2 本文の部品 ===== */
/* =========================================================================
   v2.2 本文の部品（2026-10-05・_v2.2本文設計書.md）── 下層ページの「最初の画面より下」をトップの世界に
   -------------------------------------------------------------------------
   .pg-say   一言の見出し（本文の一文を大きな明朝で。h2 にも p にも付けられる）
   .pg-body  読む列（PC：見出しを左・本文を右の2段／1020px以下は1段。本文 16.5px・行送り2.1・1行34〜38字）
   .pg-night 夜の帯（紺の地に金の二重罫の額。そのページの芯の一文。PCは中央・スマホは左そろえ。額は一度だけ描かれる）
   .pg-wide  画面いっぱいの写真（高さ 56vh／スマホ 40svh）＋下に小さな説明
   .pg-figs  大きな数字（トップの .data／.data-nums をそのまま使い、数字だけ Playfair に）
   .pg-list  番号の並び（トップの「6つのこと」.svc をそのまま使う。左に金の縦棒の箱の置きかえ）
   ・トップの部品（.data／.data-nums／.svc）は class を重ねて使う＝同じ規則を共有。ここには「違う所」だけを書く
   ・色は役割の変数だけ（--fg --fg2 --rule --accent --ln --hl）。白・生成り・紺のどの地でも読める
   ・動くのは「夜の帯の額が一度描かれる」と「数字の数え上げ・罫が伸びる」（トップと同じ見張り [data-watch]）だけ
   ・書き方の見本と決まり：_v2.2作業中_2026-10-05/v2.2-本文の部品.md
   ========================================================================= */

/* ---- 一言の見出し .pg-say：節の頭で、その節を言い切る本文の一文（新しい文は作らない） ---- */
.pg-say{font-family:var(--mincho);font-weight:400;font-size:clamp(24px,2.8vw,36px);line-height:1.75;letter-spacing:.1em;color:var(--hl);
  margin:0 0 clamp(28px,3.4vw,40px);max-width:18em}
h2.sec.pg-say{font-size:clamp(24px,2.8vw,36px);line-height:1.75}
.pg-head h2.sec.pg-say{margin:0}

/* ---- 読む列 .pg-body：PCは「見出し（左・読み進めても見えたまま）／本文（右）」の2段。トップのコンセプト・暦と同じ構え ---- */
.pg-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:start}
.pg-body-hd{position:sticky;top:136px}
.pg-body-hd .pg-head{margin:0}
/* 見出しが「名前」（例：無料送迎サポート）のときは小さく置き、下の p.pg-say を主役に */
.pg-body-hd h2.sec:not(.pg-say){font-size:clamp(20px,1.9vw,23px);line-height:1.7}
.pg-body-hd p.pg-say{margin:30px 0 0}
/* 本文：16.5px・行送り2.1・1行36字まで（字間 .045em ぶんを足した幅） */
.pg-body-tx{min-width:0;max-width:37.6em;font-size:16.5px}
.pg-body-tx .txt,.pg-body-tx .lead{font-size:16.5px;line-height:2.1;max-width:none;margin:0 0 1.6em}
.pg-body-tx .note{margin:0 0 1.6em}
.pg-body-tx>:last-child{margin-bottom:0}
/* 段が1つだけのとき（見出しなしで本文を読む列にする） */
.pg-body.is-one{grid-template-columns:minmax(0,1fr)}
.pg-body.is-one .pg-body-tx{max-width:37.6em}
/* 本文のあとに続く数字・番号の並び */
.pg-body+.pg-list,.pg-figs+.pg-list{margin-top:clamp(48px,6vw,72px)}

/* ---- 夜の帯 .pg-night：紺の地・金の細罫の二重の額。中は1〜3行だけ ---- */
.pg-night{padding:clamp(80px,10vw,136px) 0}
.pg-night-fr{position:relative;max-width:880px;margin:0 auto;padding:clamp(48px,6vw,80px) clamp(28px,5vw,72px);text-align:center}
.pg-night-fr::before,.pg-night-fr::after{content:"";position:absolute;pointer-events:none;border:1px solid var(--ln)}
.pg-night-fr::before{inset:0}
.pg-night-fr::after{inset:6px}
.pg-night-fr .en{margin:0 0 22px}
.pg-night-q{font-family:var(--mincho);font-size:clamp(24px,3vw,36px);line-height:1.9;letter-spacing:.1em;color:var(--hl);margin:0}
.pg-night-fr .lead{margin:26px auto 0;max-width:34em}
/* 額が一度だけ描かれる（中央から左右へ。文字は最初から見えたまま）。JSが無い・動きを減らす設定では最初から額がある */
html.v2js .pg-night-fr::before,html.v2js .pg-night-fr::after{transition:clip-path 1.6s var(--ease) .15s}
html.v2js .pg-night-fr::after{transition-delay:.45s}
html.v2js .pg-night-fr:not(.in)::before,html.v2js .pg-night-fr:not(.in)::after{clip-path:inset(0 50% 0 50%)}

/* ---- 画面いっぱいの写真 .pg-wide：節と節のあいだに1枚。説明は写真の下（写真の上に文字を置かない＝どんな写真でも 4.5:1） ---- */
.pg-wide{padding:0}
.pg-wide figure{margin:0}
.pg-wide img{width:100%;height:clamp(320px,56vh,640px);object-fit:cover;object-position:var(--pos,center 50%)}
.pg-wide figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;padding-top:14px;padding-bottom:18px}
.pg-wide figcaption .en{margin:0;font-size:12px}
.pg-wide figcaption .t{font-family:var(--mincho);font-size:14px;line-height:1.8;letter-spacing:.08em;color:var(--fg2)}

/* ---- 大きな数字 .pg-figs：class="data pg-figs" ＋ .data-nums（トップの数字と同じ組み・同じ見張り）。数字は Playfair ---- */
.pg-figs .data-nums{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pg-figs .num{font-family:var(--pf);font-weight:400;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.01em}
.pg-figs .num small{font-family:var(--mincho);font-size:.34em;letter-spacing:.06em;margin-left:.12em}
.pg-figs .num small.pre{margin:0 .12em 0 0}
.pg-figs .cap{margin-top:2px}

/* ---- 番号の並び .pg-list：class="svc pg-list"（番号＋英字＋明朝の見出し＋文。罫で区切る）。2列にするなら .c2 ---- */
.pg-list.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-list p{font-size:15.5px}
.pg-list p+p{margin-top:.6em}

/* ---- 幅ごと ---- */
@media (min-width:761px) and (max-width:1020px){
  /* 番号の並びはタブレットでも3列（2列だと3つ目が1つだけ残る）。.c2 は2列のまま */
  .pg-list:not(.c2){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1020px){
  /* タブレットからは1段（2段だと本文が1行25字ほどになり、読む列が細すぎる） */
  .pg-body{grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,40px)}
  .pg-body-hd{position:static}
}
@media (max-width:760px){
  .pg-say,h2.sec.pg-say{font-size:clamp(23px,6.4vw,26px);letter-spacing:.08em}
  .pg-body-hd p.pg-say{margin-top:22px}
  .pg-body-tx,.pg-body-tx .txt,.pg-body-tx .lead{font-size:16px}
  /* 夜の帯：スマホは左の軸1本（額の中も左そろえ） */
  .pg-night{padding:72px 0}
  .pg-night-fr{text-align:left;padding:36px 22px 38px}
  .pg-night-q{font-size:clamp(20px,5.6vw,23px);letter-spacing:.06em;line-height:1.95}
  .pg-night-fr .lead{margin-left:0}
  .pg-wide img{height:max(240px,40svh)}
  .pg-wide figcaption{padding-bottom:14px}
  .pg-figs .data-nums{grid-template-columns:1fr;gap:28px}
  .pg-list.c2{grid-template-columns:1fr}
  .pg-list p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  html.v2js .pg-night-fr:not(.in)::before,html.v2js .pg-night-fr:not(.in)::after{clip-path:none}
}
/* ===== /v2.2 本文の部品 ===== */

/* ===== v2.2 page: medical ===== */
/* /medical/（page-medical.php）の v2.2 本文だけの見た目。2026-10-05 */
/* お受けできることの大きな数字：「8:30〜19:00」は字数が多く、84px だと3列の1列（PC 331px）に収まらず2行に割れる。この数字だけ小さく */
.pg-figs .num.pg-md-time{font-size:clamp(44px,5.2vw,66px)}
/* ===== /v2.2 page: medical ===== */

/* ===== v2.2 page: recruit ===== */
/* /recruit/（page-recruit.php）の v2.2 本文だけの見た目。2026-10-05 */
/* 働く環境の大きな数字：「8:30〜19:00」は字数が多く 84px だと2行に割れるので、この数字だけ小さく（/medical/ と同じ大きさ） */
.pg-figs .num.pg-rc-time{font-size:clamp(44px,5.2vw,66px)}
/* 応募の流れ：働くスタッフの写真を左の段（見出しの下）に。タブレット・スマホ（1段）では見出しと手順のあいだ */
.pg-rc-apply-ph{margin:clamp(28px,3vw,40px) 0 0}
.pg-rc-apply-ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (min-width:761px) and (max-width:1020px){
  .pg-rc-apply-ph{max-width:520px}
}
/* ===== /v2.2 page: recruit ===== */

/* ===== v2.2 page: medical（追記） ===== */
/* ご紹介の流れ：手順のあとの注記。読む列の .note は上の余白が0になるので、手順の最後と離す（.mt-m は .pg-body-tx .note に負ける） */
.pg-body-tx .pg-steps+.note.pg-md-flow-note{margin-top:clamp(28px,3vw,36px)}
/* ===== /v2.2 page: medical（追記） ===== */

/* ===== v2.2 page: hd ===== */
/* /hd/（page-hd.php）v2.2 本文。部品は「v2.2 本文の部品」のまま。ここは院長の写真・コンセプトの並び・連携先の一覧のあいだだけ */
/* 01 コンセプト：番号の並びは見出しだけ（文が無いので見出しの下をあけない） */
.pg-hd-concept h3{margin-bottom:0}
/* 02 院長：写真は左の段の見出しの下。PCは縦長のまま（4:5）。上寄せは「page: hd」の .pg-hd-director figure img */
.pg-hd-dr-ph{margin:clamp(28px,3vw,40px) 0 0;max-width:400px}
.pg-hd-dr-ph img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* 05 連携実績：見出し＋本文の2段のあとに、連携先の一覧 */
.pg-hd-partners .pg-body+.names-grp{margin-top:clamp(56px,7vw,88px)}
@media (min-width:761px) and (max-width:1020px){
  .pg-hd-dr-ph{max-width:360px}
}
@media (max-width:760px){
  /* スマホは横長（3:2）で全幅。縦長のままだと1画面が写真だけになる */
  .pg-hd-dr-ph{max-width:none;margin-top:24px}
  .pg-hd-dr-ph img{aspect-ratio:3/2}
}
/* ===== /v2.2 page: hd ===== */

/* ===== v2.2 page: contact ===== */
/* /contact/（page-contact.php）v2.2 本文。フォーム（#mkz-contact）の見た目は 10章と「v2.1 page: contact」のまま */
/* 02 3つの窓口：番号の並び（.svc.pg-list）の中にボタン。PC・タブレットはボタンを各列の下にそろえる（文の長さが違っても横一線） */
.pg-ct-ways>li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr auto;align-items:start}
.pg-ct-ways>li>.no,.pg-ct-ways>li>.ek{align-self:baseline}
.pg-ct-ways>li>h3,.pg-ct-ways>li>p,.pg-ct-ways>li>.btn{grid-column:1/-1}
.pg-ct-ways>li>.btn{justify-self:start;margin-top:22px}
/* 03 入力フォーム：右の段（入力欄の幅は 680px まで＝「v2.1 page: contact」） */
.pg-ct-form-col{min-width:0}
/* 04 アクセス：見出しのすぐ下に大きな数字、そのあと地図＋一覧 */
.pg-ct-access .pg-head+.pg-figs{margin-top:0}
.pg-ct-access .pg-figs+.acc-grid{margin-top:clamp(48px,6vw,72px)}
/* ===== /v2.2 page: contact ===== */

/* ===== v2.2 page: rehab ===== */
/* /rehab/（page-rehab.php）の本文を v2.2 の部品にしたときに足したもの（2026-10-05）。名前は .rh- で始まるか、.rh の中だけに効きます
   ・R03（読む列1本・680px）のまま：本文は .narrow の中の .pg-body.is-one（1段）
   ・D04＋D10＋D12 のカード（.cards.is-panel）はそのまま。上の「page: rehab」「v2.1 page: rehab」の塊もそのまま使っています */

/* 1段の読む列：見出しの段（.pg-body-hd）は読み進めても残す（sticky）の指定を外す（1段だと下の本文に重なるため）。
   一言の見出しと本文のあいだは、2段のときほど空けない。下の時刻の流れ・カードとのあいだは前の .pg-head と同じ */
.rh .pg-body.is-one{gap:clamp(22px,2.6vw,32px);margin:0 0 clamp(32px,4vw,48px)}
.rh .pg-body.is-one .pg-body-hd{position:static}
.rh .pg-body.is-one .pg-body-tx{max-width:none}
.rh .narrow>.pg-body.is-one:last-child{margin-bottom:0}

/* 05 無理をさせない（紺の地）：見出しは前と同じ大きさ。額は読む列の幅いっぱい・中も左そろえ（同じ節に左そろえの一覧があるので軸1本） */
.rh-night h2.rh-q{font-size:clamp(22px,2.6vw,29px);line-height:1.8}
.rh-night .pg-night-fr{max-width:none;margin:clamp(36px,4.4vw,52px) 0;text-align:left;padding:clamp(36px,4.6vw,56px) clamp(24px,4vw,44px)}
.rh-night .pg-night-q{font-size:clamp(23px,2.5vw,30px);line-height:1.9}
.rh-night .dots{margin-bottom:1.6em}

@media (max-width:760px){
  .rh .pg-body.is-one{gap:20px}
  .rh-night .pg-night-fr{margin:36px 0;padding:30px 20px 32px}
  .rh-night .pg-night-q{font-size:clamp(20px,5.6vw,23px);letter-spacing:.06em;line-height:1.95}
}
/* ===== /v2.2 page: rehab ===== */

/* ===== v2.2 page: page/news ===== */
/* page.php（/qa/ と本文のページ /sougei/ /shukujitsu-touseki/ /tenin/）・index.php（/news/）・single.php（記事）の本文。
   2026-10-05 v2.2（_v2.2本文設計書.md）。名前はすべて .pgn- で始まります。色は役割の変数だけ（白・生成り・紺のどの地でも読める） */

/* ---- Q&A：左＝導入の一文（管理画面の本文）＋タップの案内（読み進めても見えたまま）／右＝質問の一覧 ---- */
.pgn-qa .pg-head{margin:0 0 24px}
.pgn-qa .pg-head .en{margin:0}
.pgn-qa .pg-head::after{content:"";display:block;width:48px;height:1px;margin-top:20px;background:var(--ln)}
.pgn-qa-lead{max-width:none;font-family:var(--mincho);font-size:clamp(18px,1.6vw,19.5px);line-height:2.05;letter-spacing:.08em;color:var(--hl)}
.pgn-qa-lead .lead,.pgn-qa-lead p{font-size:inherit;line-height:inherit;color:inherit;max-width:none;margin:0 0 1em}
.pgn-qa-lead>:last-child{margin-bottom:0}
.pgn-qa .faq-tap{margin:26px 0 0}
/* 質問：トップの「6つのこと」と同じ言葉づかい（番号 Q.01 は Playfair・質問は大きな明朝・金の罫で区切る） */
.pgn-faq{counter-reset:pgnq;border-top:1px solid var(--ln)}
.pgn-faq>li{counter-increment:pgnq}
.pgn-faq summary{display:block;min-height:0;padding:28px 52px 30px 0;font-size:clamp(19px,1.75vw,22px);line-height:1.75;letter-spacing:.08em;word-break:auto-phrase}
.pgn-faq summary::before{content:"Q." counter(pgnq,decimal-leading-zero);display:inline-block;width:100%;margin:0 0 8px;font-style:normal;font-size:15px;line-height:1.6;letter-spacing:.12em}
.pgn-faq summary::after{right:10px}
.pgn-faq summary:hover{text-decoration:underline;text-decoration-color:var(--ln);text-underline-offset:7px;text-decoration-thickness:1px}
.pgn-faq .a{padding:0 52px 34px 0;font-size:16.5px;line-height:2.1;max-width:none}
.pgn-faq .a::before{content:"A.";display:block;margin:0 0 6px;font-family:var(--pf);font-size:15px;line-height:1.6;letter-spacing:.12em;color:var(--accent)}

/* ---- 本文のページ・記事の本文（管理画面の中身）：見出し（h2）を一言の見出しの大きさ＋番号（飾り）＋金の短い罫に ---- */
.entry.pgn-entry{counter-reset:pgnh;max-width:37.6em;font-size:16.5px;line-height:2.1}
.entry.pgn-entry p{margin:0 0 1.6em}
.entry.pgn-entry h2{counter-increment:pgnh;border-top:0;padding-top:0;margin:clamp(64px,8vw,96px) 0 clamp(26px,3vw,34px);
  font-size:clamp(23px,2.5vw,30px);line-height:1.75;letter-spacing:.1em;word-break:auto-phrase}
.entry.pgn-entry>h2:first-child{margin-top:0}
.entry.pgn-entry h2::before{content:counter(pgnh,decimal-leading-zero);display:block;margin:0 0 12px;font-family:var(--pf);font-size:14px;line-height:1.6;letter-spacing:.14em;color:var(--accent)}
.entry.pgn-entry h2::after{content:"";display:block;width:48px;height:1px;margin-top:22px;background:var(--ln)}
.entry.pgn-entry li{line-height:2;margin:0 0 .7em}
.entry.pgn-entry ol>li::before{font-family:var(--pf);font-size:15px;line-height:2.2}
/* 本文の中の色の箱（旧サイトの「左に色の縦棒の箱」）→ 上下の金の罫にはさんだ明朝の一文（左の縦棒をやめる） */
.entry.pgn-entry p[style*="background"],.entry.pgn-entry p[style*="border"],.entry.pgn-entry div[style*="background"],.entry.pgn-entry div[style*="border"]{
  border:0!important;border-top:1px solid var(--ln)!important;border-bottom:1px solid var(--ln)!important;padding:20px 0!important;
  font-family:var(--mincho);font-size:17px;line-height:1.95;letter-spacing:.08em;color:var(--hl)!important}
/* PC（1021px以上）：見出しが左・本文が右の2段（トップのコンセプト・暦と同じ構え）。最初の見出しより前の文は、2段にまたがる導入 */
@media (min-width:1021px){
  .entry.pgn-entry.pgn-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,6vw,88px);row-gap:0;align-items:start;max-width:none}
  .pgn-split>*{grid-column:2;min-width:0;max-width:37.6em}
  .entry.pgn-entry.pgn-split>h2{grid-column:1;grid-row:span 3;max-width:none;margin:clamp(64px,8vw,96px) 0 0}
  .entry.pgn-entry.pgn-split>h2+*{margin-top:clamp(64px,8vw,96px)}
  .entry.pgn-entry.pgn-split>h2:first-child,.entry.pgn-entry.pgn-split>h2:first-child+*{margin-top:0}
  .entry.pgn-entry.pgn-split>:not(h2):not(h2 ~ *){grid-column:1 / -1;max-width:40em;font-size:18px;line-height:2.05}
}

/* ---- お知らせの一覧（トップの G15 と同じ「日付が上・題が下（間6px）」を大きく）。1件の形は mikazuki_news_item() のまま ---- */
.newslist.pgn-nl{border-top:1px solid var(--ln)}
.pgn-nl .ni>a{padding:28px 0 30px}
.pgn-nl .ni-meta{margin:0 0 6px}
.pgn-nl .ni-meta time{order:-1;font-size:16px;letter-spacing:.1em;color:var(--fg2)}
.pgn-nl .ni-t{font-size:clamp(18.5px,1.7vw,21px);line-height:1.75;letter-spacing:.08em}
.pgn-nl .ni-when{font-size:15.5px}
@media (min-width:761px){
  /* 写真のある記事は、写真を右に小さく（題と日付が左の軸に並ぶ） */
  .pgn-nl .ni.has-photo>a{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:28px;align-items:start}
  .pgn-nl .ni.has-photo .ni-ph{order:2;margin:0}
  .pgn-nl .ni-ph img{aspect-ratio:3/2}
}
/* これからの催し＝夜の帯（.pg-night）。額の中は一覧なので、PCでも左そろえ（軸は1本） */
.pgn-up .pg-night-fr{text-align:left;max-width:880px}
.pgn-up .pg-head{margin:0 0 clamp(26px,3vw,36px)}
.pgn-up .newslist.upcoming .ni{border-left:0;border-bottom:1px solid var(--rule);margin:0}
.pgn-up .newslist.upcoming .ni>a{padding:24px 0 26px}

/* ---- 記事：催しは「区分＋いつ・どこで」を左の段（見えたまま）、本文を右の段。お知らせは読む列1本 ---- */
.pgn-post.is-one{gap:0}
.pgn-post .pg-body-hd .ev{margin:0}
.pgn-post .pg-body-tx .entry.pgn-entry{max-width:none}

@media (max-width:760px){
  .pgn-qa .pg-head::after{margin-top:16px}
  .pgn-qa-lead{font-size:17.5px}
  .pgn-faq summary{padding:22px 38px 24px 0;font-size:18px;line-height:1.8}
  .pgn-faq summary::after{right:6px}
  .pgn-faq .a{padding:0 0 26px;font-size:16px}
  .entry.pgn-entry{font-size:16px}
  .entry.pgn-entry h2{font-size:clamp(22px,6.2vw,25px);letter-spacing:.08em;margin-top:64px}
  .entry.pgn-entry p[style*="background"],.entry.pgn-entry p[style*="border"],.entry.pgn-entry div[style*="background"],.entry.pgn-entry div[style*="border"]{font-size:16.5px}
  .pgn-nl .ni>a{padding:22px 0 24px}
  .pgn-nl .ni-t{font-size:18px}
  .pgn-up .newslist.upcoming .ni>a{padding:20px 0 22px}
}
/* ===== /v2.2 page: page/news ===== */

/* ===== v2.2 共通の直し（2026-10-05 Claude） =====
   1本の列（.is-one＝/rehab/ の R03 など）では、見出しの「止まって残る」を使わない。
   PCで見出しが下の本文の上に重なって残っていた（リハビリの作業で見つかった）。 */
.pg-body.is-one .pg-body-hd{position:static;top:auto}

/* ===== 集客の動線（2026-10-05 Claude） =====
   ・トップの「流れ」「6つのこと」「ご家族の方へ」「連携」「アクセス」から、くわしいページへ進めるように文字リンク（a.more）を足した
   ・フッターに「目的からさがす」（検索の受け皿 /sougei/ /shukujitsu-touseki/ /tenin/）
   ・フォーム：メールかお電話のどちらか1つで送れる（.req.is-either） */
.fl-end .fl-more{margin:6px 0 0;padding-left:calc(var(--mk) + var(--cg))}
.family .more-line{margin:14px 0 0}
.family .more-line+.more-line{margin-top:0}
.acc-grid .more-line{margin-top:10px}
.ft-h.ft-h2{margin-top:26px}
.req.is-either{border-color:var(--fg2);color:var(--fg2)}
#mkz-contact .fhint{margin:-4px 0 18px;font-size:14px;line-height:1.8;color:var(--fg2)}

/* ===== トップの並べ替えと、スマホの長さ（2026-10-05 Claude） =====
   近藤さん「スマホで縦にスクロールすると少し長い」「運動・リハビリを入りやすい位置に」「介護相談を適切な位置に」
   ・運動と数字（#exercise）を要点のすぐ下・夜の地へ。お知らせは朝の地・アクセスの前へ
   ・ご家族の節に「介護のご相談」を足して3つ並び（PC）
   ・スマホだけ：節の上下の余白・流れの段の間・写真の高さ・6つのことの間・フッターのリンク（2列）を詰める。
     文字の大きさ・押せる所の高さ（48px以上）は変えない */
/* 3つ並びはPC（1021px以上）だけ。幅の指定なしで書くと、スマホの1列（13章）を上書きして3列のままになる（2026-10-05 近藤さんのスマホで実際に起きた） */
@media (min-width:1021px){.family{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:761px) and (max-width:1020px){
  .family{grid-template-columns:1fr 1fr}
  .family .box:last-child{grid-column:1 / -1}
}
.news-top.pad{padding:clamp(64px,8vw,104px) 0}
@media (max-width:760px){
  .pad{padding:56px 0}
  .empathy.pad{padding:48px 0}
  .news-top.pad{padding:56px 0}
  .family-sec{padding-top:48px}
  .family{gap:32px}
  .family .box{padding-top:20px}
  .step{--pt:24px}
  .fl-head{padding:60px 0 4px}
  .talk-grid{gap:28px;margin-top:24px}
  .cv-body{gap:10px;padding:16px 14px 18px}
  .st-ph{aspect-ratio:2.2/1;margin-bottom:14px}
  .fl-end{padding-bottom:56px}
  .ex-grid{gap:24px}
  .ex-grid img{aspect-ratio:16/9}
  .data{margin-top:36px;padding-top:28px}
  .data-nums{gap:24px}
  .svc li{padding:20px 0 22px}
  .ft-grid{gap:28px}
  .ft-grid .ft-nav{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .ft-nav a{font-size:14.5px;line-height:1.5}
}

/* 6つのこと（.svc.is-fold）：ボタンはPCでは見出しそのままの見た目 */
.svc-tg{all:unset;display:block;cursor:default;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit}
.svc-tg:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media (max-width:760px){
  .svc.fold-on li{padding:0}
  .svc.fold-on h3{margin:0}
  .svc.fold-on .svc-tg{cursor:pointer;display:flex;width:100%;box-sizing:border-box;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:4px 0}
  .svc.fold-on .svc-tg::after{content:"";flex:none;width:12px;height:12px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s var(--ease)}
  .svc.fold-on li.open .svc-tg::after{transform:rotate(-135deg) translate(-3px,-3px)}
  .svc.fold-on li p{display:none}
  .svc.fold-on li.open p{display:block;padding:0 0 18px}
  .svc.fold-on li>.no,.svc.fold-on li>.ek{display:inline-block;margin-top:14px}
  .ft-h-hours,.ft-hours{display:none}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.svc.fold-on .svc-tg::after{transition:none}}

/* 横にめくる枠の中の「読み上げ用の文字（.sr・absolute）」が枠の外へ出てページを広げないよう、枠を基準にする */
[data-hscroll]{position:relative}

/* =====================================================================
   G03 横に送るカード（2026-10-05 夜 近藤さんが採用・トップ）
   スマホ（〜760px）… 要点・流れ・6つのこと・ご家族／介護／連携・会話の見本を、横にめくるカードに
                       （カードは幅の82%＝次のカードが少し見える）。位置「1 / 6」と線の矢印ボタン
   761px以上        … ふつうに並べる（流れ・6つのこと・ご家族は3列）
   ★ 並べ方（grid）は 761px以上の media の中だけに書く（スマホの1列を上書きしない）
   ★ #concept／#exercise／.facts の直しはトップだけ（:is(.home,.preview-front)）。/hd/ にも id="concept" がある
   ===================================================================== */
.hs-bar{display:none}
.g3-card{min-width:0;border:1px solid var(--rule);display:flex;flex-direction:column}
.sky-paper .g3-card{background:#fff}
.g3-ph{margin:0;overflow:hidden;aspect-ratio:3/2;background:var(--navy2)}
.g3-ph img,.g3-ph video{width:100%;height:100%;object-fit:cover;display:block}
.g3-bd{padding:18px 20px 22px;flex:1}
.g3-meta{display:flex;align-items:center;gap:12px;margin:0 0 8px;line-height:1.4}
.g3-meta .en{display:inline;margin:0}
.g3-no{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--ln);display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mincho);font-size:15px;line-height:1;color:var(--accent)}
.g3-meta .no{font-family:var(--pf);font-size:15px;letter-spacing:.12em;color:var(--accent)}
.g3-meta .ek{font-family:var(--pf);font-style:italic;font-size:11.5px;letter-spacing:.18em;color:var(--accent)}
.g3-h{font-size:19px;line-height:1.6;letter-spacing:.08em;color:var(--hl);margin:0 0 8px}
.g3-p{font-size:15px;line-height:1.9;color:var(--fg);margin:0}
.g3-card .more-line{margin:10px 0 0}
.g3-card .more-line+.more-line{margin-top:0}
.g3-lead{margin:-14px 0 28px}
.g3-note{margin:22px 0 0;font-size:14.5px;line-height:1.9;color:var(--fg2)}
.g3-famsec{padding-bottom:0}

/* ---- 761px以上：並べて見せる ---- */
@media (min-width:761px){
  .g3-flow .g3-cards,.g3-svc,.g3-fam{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
  .g3-famsec .g3-card{border-width:1px 0 0;border-color:var(--ln)}
  .g3-famsec .g3-bd{padding:18px 0 0}
}
@media (min-width:1021px){
  .g3-talk{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
}

/* ---- スマホ（〜760px）：横にめくる ---- */
@media (max-width:760px){
  .hs-bar{display:flex;align-items:center;gap:8px;min-height:48px;margin:0 0 12px}
  .hs-pos{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 auto 0 0;font-size:15px;line-height:1.6;color:var(--fg2)}
  .hs-n{font-family:var(--pf);font-size:16px;letter-spacing:.1em;color:var(--hl);font-variant-numeric:tabular-nums}
  .hs-btn{flex:none;position:relative;width:48px;height:48px;padding:0;border:1px solid var(--fg2);background:transparent;color:var(--fg);cursor:pointer;border-radius:0}
  .hs-btn::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translate(-65%,-50%) rotate(45deg)}
  .hs-prev::before{transform:translate(-35%,-50%) rotate(-135deg)}
  .hs-btn:disabled{opacity:.3;cursor:default}
  .hs-btn:focus-visible{outline:2px solid var(--ln);outline-offset:2px}

  .g3-hs{margin:0 calc(var(--gut) * -1);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .g3-hs::-webkit-scrollbar{display:none}
  .g3-hs:focus-visible{outline:2px solid var(--ln);outline-offset:-2px}
  .g3-hs>.g3-cards{display:flex;align-items:stretch;gap:12px;width:max-content;margin:0;padding:0 var(--gut) 2px;border-top:0}
  .g3-hs>.g3-cards>*{flex:0 0 auto;width:calc((100vw - var(--gut) * 2) * .82);max-width:none;min-width:0;scroll-snap-align:start}

  /* 要点4つ：文字だけのカード */
  :is(.home,.preview-front) .facts{padding-top:8px}
  :is(.home,.preview-front) .facts .g3-hs>.g3-cards>li{border:1px solid var(--rule);margin:0;padding:20px 20px 22px}
  :is(.home,.preview-front) .facts .g3-hs small{font-size:15px;line-height:1.9}
  :is(.home,.preview-front) .facts .wrap{padding-bottom:8px}

  /* 会話の見本：2枚目は見本 */
  .g3-talkhs{margin-top:4px}
  .g3-hs>.g3-talk{gap:16px;align-items:start}
  .g3-talk .pick .btn{padding:12px 14px 12px 16px;font-size:15.5px}
  .g3-talk .cv-phone{border-radius:22px}

  /* 運動の数字は2つを横に（注記はすぐ下にそのまま） */
  :is(.home,.preview-front) #exercise .data-nums{grid-template-columns:1fr 1fr;gap:18px}
  :is(.home,.preview-front) #exercise .data-nums .num{font-size:44px}
  :is(.home,.preview-front) #exercise .data-nums .lab{font-size:15px;line-height:1.6}
  /* 2026-10-05 近藤さんのスマホで「数字とバーが左右でずれる」：右の見出しが2行に折れるため。
     見出し・数字・説明・線を左右で同じ段にそろえる（subgrid）。使えない古いブラウザは、見出しと説明に2行ぶんの高さを取って近づける */
  :is(.home,.preview-front) #exercise .data-nums .lab{min-height:3.2em}
  :is(.home,.preview-front) #exercise .data-nums .cap{min-height:3.6em}
  @supports (grid-template-rows:subgrid){
    :is(.home,.preview-front) #exercise .data-nums{grid-template-rows:repeat(4,auto);row-gap:0}
    :is(.home,.preview-front) #exercise .data-nums>p{display:grid;grid-row:span 4;grid-template-rows:subgrid}
    :is(.home,.preview-front) #exercise .data-nums .lab,:is(.home,.preview-front) #exercise .data-nums .cap{min-height:0}
    :is(.home,.preview-front) #exercise .data-nums .lab{align-self:end}
  }

  /* コンセプトの4つは2列に */
  :is(.home,.preview-front) #concept .env{grid-template-columns:1fr 1fr}
  :is(.home,.preview-front) #concept .env li:nth-child(odd){border-right:1px solid var(--rule);margin-right:12px}
  :is(.home,.preview-front) #concept .env{margin-top:8px}
  :is(.home,.preview-front) #concept figure img{aspect-ratio:16/9}
  :is(.home,.preview-front) .koyomi-wrap .lead{margin-bottom:0}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .g3-hs{scroll-behavior:smooth}
}

/* =========================================================================
   v3 仕上げ（2026-10-05 夜 近藤さん「プロのウェブデザイナーとして全体を整えて」）
   ・中身・並び・色（紺＋金＋白）は変えない。MOROのホームページから「書体」と「写真の動き」の技法だけを借りた
     （MOROの茶・青緑は使わない：みかづきは医療法人の別ブランドのため）
   ・書体：見出し＝しっぽり明朝／本文＝Zen角ゴシック New（functions.php で読み込み）。届かないときは今までの書体
   ・動き：大きな写真がゆっくり寄る（見えている間だけ）／見出しの金の罫が一度だけ伸びる／矢印が少し進む。
     動きを減らす設定の方には、どれも動かさない
   ・戻すとき：この節を消し、functions.php の Webフォントの行を元に戻す（控え：_サーバー控え/）
   ========================================================================= */
:root{
  --mincho:"Shippori Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN","ヒラギノ明朝 ProN W3","MS PMincho",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Yu Gothic Medium","Yu Gothic","Noto Sans JP",sans-serif;
}
body{font-kerning:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* 見出しは字間を詰めて組む（約物の空きを詰める palt）。縦組みのヒーローは除く */
h1:not(.hero-vert):not(.pg-door-title),h2,h3,.brand .nm,.btn,.pg-say,.cta h2{font-feature-settings:"palt" 1}
h2.sec,.pg-head h2.sec{font-weight:500;text-wrap:balance}
h3{font-weight:500}
.lead,.txt,p{text-wrap:pretty}

/* ---- ヘッダー：止まっている間、下の写真がすりガラス越しに見える ---- */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hd.stuck{background:rgba(11,19,44,.78);-webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px)}
}

/* ---- 見出しの金の罫：トップの節の見出しにも下層と同じ短い罫。画面に入ったら一度だけ伸びる ---- */
:is(.home,.preview-front) main section:not(.hero):not(.cta) h2.sec::after{
  content:"";display:block;width:48px;height:1px;margin-top:20px;background:var(--ln)}
h2.sec::after{transform-origin:left center;transition:transform 1.1s var(--ease) .15s}
html.v3js h2.sec:not(.v3-in)::after{transform:scaleX(0)}

/* ---- 大きな写真がゆっくり寄る（MOROの写真の章と同じ技法）。見えている間だけ動かす ---- */
.hero>img,.pg-door>img,.pg-wide img{will-change:transform}
html.v3js .hero>img,html.v3js .pg-door>img,html.v3js .pg-wide img{animation:v3kb 26s ease-in-out infinite alternate;animation-play-state:paused}
html.v3js .v3-on>img,html.v3js .pg-wide.v3-on img{animation-play-state:running}
.pg-wide{overflow:hidden}
@keyframes v3kb{from{transform:scale(1)}to{transform:scale(1.07)}}

/* ---- 押せる所の手ざわり ---- */
.btn{transition:background-color .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease)}
a.more [aria-hidden="true"]{display:inline-block;transition:transform .3s var(--ease)}
a.more:hover [aria-hidden="true"],a.more:focus-visible [aria-hidden="true"]{transform:translateX(4px)}
.pg-next a{transition:border-color .3s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.pg-next-ph img{transition:transform .9s var(--ease)}
@media (hover:hover){
  .pg-next a:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(11,19,44,.14)}
}
/* 横にめくるカードの写真は、角を少しだけ落とした額に（紙の質感）。押せない所なので浮かせない */
.g3-card{box-shadow:0 1px 0 rgba(11,19,44,.04)}
.sky-paper .g3-card{box-shadow:0 10px 26px rgba(11,19,44,.06)}
/* キーボードで動かす方の目印をはっきり */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ln,#F3CF65);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  html.v3js .hero>img,html.v3js .pg-door>img,html.v3js .pg-wide img{animation:none}
  h2.sec::after,a.more [aria-hidden="true"],.pg-next a,.pg-next-ph img,.btn{transition:none}
  html.v3js h2.sec:not(.v3-in)::after{transform:none}
}

/* =====================================================================
   v4 朝の光（2026-10-05 夜 近藤さんが10案から H10 を採用・全ページ）
   案：10_デザイン案/全体デザイン10案_2026-10-05/H10.html。これを全ページ用に組み直したもの
   ・下層ページ：扉（.pg-door＝写真の上）はトップのヒーローと同じく夜のまま。要点・目次・紺の帯・リハビリの夜の節は明るい地へ
   ・戻すとき：この節を消す（下の v3 仕上げは残る）
   ・暗いのはヒーローだけ。ほかの節は 白 #FFFFFF／生成り #FAF7F0／ミスト #EEF1F5 を交互に
   ・文字：紺 #14224E（補足は #4A5370）。飾りの英字・番号・細い罫は琥珀 #8E5218（明るい地で読める濃さ）
   ・灯り #F1C27B は「塗り」と「太めの線」だけ（見学のご予約・番号の丸・暦の通う日・見出しの罫・マーカー）
   ・base の役割の変数は html:not(.dawn) .night（0,2,1）で決まるので、html body main .sky:not(.hero)（0,3,3）で上書き
   ===================================================================== */
:root{
  --a-navy:#14224E;--a-navy2:#4A5370;--a-amber:#8E5218;--a-glow:#F1C27B;--a-glow-t:#FBEDD7;
  --a-paper:#FAF7F0;--a-mist:#EEF1F5;--a-line:rgba(20,34,78,.14);
}
body{background:#fff}

/* ---- 役割の変数：ヒーロー以外はすべて明るい地の文字色 ---- */
html body main .sky:not(.v-night),html body .ft.sky{
  --fg:var(--a-navy);--fg2:var(--a-navy2);--rule:var(--a-line);--accent:var(--a-amber);--ln:var(--a-amber);
  --hl:var(--a-navy);--inv:#fff;--bl:rgba(20,34,78,.55)}

/* ---- 地の色（並びの順に 生成り→白→ミスト… と交互） ---- */
html body .intro.sky,html body #facts.sky{--sky:var(--a-paper)}
html body #exercise.sky{--sky:#fff}
html body .empathy.sky{--sky:var(--a-mist)}
html body #koyomi.sky{--sky:#fff}
html body #concept.sky{--sky:var(--a-paper)}
html body #flow.sky{--sky:var(--a-mist)}
html body #services.sky{--sky:#fff}
html body .g3-famsec.sky{--sky:var(--a-paper)}
html body #talk.sky{--sky:#fff}
html body .news-top.sky{--sky:var(--a-paper)}
html body #access.sky{--sky:#fff}
html body .cta.sky{--sky:var(--a-mist)}
html body .ft.sky{--sky:#fff}

/* ---- ヒーロー（夜のまま）：下を濃紺で塗りつぶさず、写真の縁で朝へ切り替える ---- */
html body .hero::after{
  background:linear-gradient(180deg,rgba(11,19,44,.72) 0%,rgba(11,19,44,.2) 34%,rgba(11,19,44,.32) 66%,rgba(11,19,44,.66) 100%),
             radial-gradient(ellipse 34% 62% at 50% 50%,rgba(11,19,44,.5) 0%,rgba(11,19,44,0) 100%)}

/* ---- リード：朝の光が上からさす ---- */
html body .intro.sky{padding-top:clamp(56px,7vw,96px);
  background:linear-gradient(180deg,rgba(241,194,123,.30) 0%,rgba(241,194,123,.10) 38%,rgba(241,194,123,0) 100%),var(--sky)}

/* ---- 見出しの罫：灯り色の太めの線（琥珀→灯り） ---- */
:is(.home,.preview-front) main section:not(.hero):not(.cta) h2.sec::after,html body .pg-head h2.sec::after{width:56px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--a-amber),var(--a-glow))}
html body main .sky:not(.v-night) .en,html body .ft .en{color:var(--a-amber)}

/* ---- ボタン ---- */
html body .btn{border-radius:4px}
html body .btn.line{border-color:var(--a-navy);color:var(--a-navy)}
html body .btn.line:hover{background:var(--a-navy);color:#fff}
html body .btn.gold{background:var(--a-glow);border-color:var(--a-glow);color:var(--a-navy)}
html body .btn.gold:hover{background:#F5D3A0;border-color:#F5D3A0;color:var(--a-navy)}
html body .cta .btn.gold{box-shadow:0 14px 30px -16px rgba(142,82,24,.55)}
html body .hs-btn{border-radius:4px;border-color:var(--bl)}

/* ---- ヘッダー：写真の上は透明・読み進めると白い帯（下に灯りの細い線） ---- */
html body .hd .nav a:hover{box-shadow:inset 0 -2px 0 var(--a-glow)}
html body .hd.stuck{background:rgba(255,255,255,.96);color:var(--a-navy);box-shadow:0 1px 0 var(--a-line),0 2px 0 rgba(241,194,123,.55);--ln:var(--a-amber)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html body .hd.stuck{background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px)}
}
html body .hd.open{color:var(--a-navy);--ln:var(--a-amber)}
html body .hd.stuck .brand small,html body .hd.open .brand small{color:var(--a-navy2)}
html body .hd.stuck .nav a{color:var(--a-navy2)}
html body .hd.stuck .nav a:hover{color:var(--a-navy);box-shadow:inset 0 -2px 0 var(--a-glow)}
html body .hd.stuck .hd-tg,html body .hd.open .hd-tg{border-color:rgba(20,34,78,.4);color:var(--a-navy)}
html body .hd.quiet .btn.gold{background:transparent;color:var(--a-navy);border-color:var(--a-navy);box-shadow:none}
html body .hd.quiet:not(.stuck) .btn.gold{color:#fff;border-color:rgba(255,255,255,.8)}
@media (max-width:1100px){
  html body .hd.open .nav{background:#fff}
  html body .hd.open .nav>a{color:var(--a-navy);border-bottom-color:var(--a-line)}
  html body .hd.open .nav>a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--a-glow)}
  html body .hd.open .nav-more a{color:var(--a-navy2)}
}

/* ---- カード：白い札・細い線・やわらかな影（清潔に） ---- */
html body .g3-card{background:#fff;border:1px solid var(--a-line);border-radius:6px;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,34,78,.04),0 12px 28px -20px rgba(20,34,78,.22)}
html body .g3-no{background:var(--a-glow);border-color:var(--a-glow);color:var(--a-navy)}
html body .g3-famsec{padding-bottom:clamp(48px,7vw,96px)}
@media (min-width:761px){
  html body .g3-famsec .g3-card{border-width:1px;border-color:var(--a-line)}
  html body .g3-famsec .g3-bd{padding:20px 22px 24px}
}
@media (max-width:760px){
  html body .facts .g3-hs>.g3-cards>li{background:#fff;border-radius:6px;border-color:var(--a-line)}
}
html body .ex-grid img,html body .concept figure img,html body .acc-grid figure img{border-radius:6px}

/* ---- 運動と数字：生成りの面にまとめ、線は琥珀→灯り ---- */
html body #exercise .data{background:var(--a-paper);border-top:0;border-radius:8px;padding:clamp(24px,4vw,44px) clamp(18px,3vw,40px)}
html body #exercise .data-nums .num small{color:var(--a-amber)}
html body .data-nums .rl{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--a-amber),var(--a-glow))}

/* ---- 共感：問いの下線を灯り色のマーカーに ---- */
html body .empathy q .ul .w{box-shadow:inset 0 -.38em 0 rgba(241,194,123,.45);padding-bottom:0}

/* ---- 週3回の暦：生成りの箱、通う日は灯り色の淡い塗り＋琥珀の枠 ---- */
html body .koyomi{background:var(--a-paper);border-color:var(--a-line);border-radius:8px}
html body .k-days li{border-radius:6px}
html body .k-days .on{border-color:var(--a-amber);background:var(--a-glow-t);box-shadow:0 6px 18px -10px rgba(142,82,24,.45)}

/* ---- 最後の節：上から朝の光 ---- */
html body .cta.sky{background:radial-gradient(ellipse 80% 70% at 50% 0%,rgba(241,194,123,.30),rgba(241,194,123,0) 70%),var(--sky)}
html body .horizon::before{background:linear-gradient(90deg,rgba(241,194,123,0) 0%,#8E5218 18%,#F1C27B 50%,#8E5218 82%,rgba(241,194,123,0) 100%)}
html body .horizon::after{background:radial-gradient(ellipse at 50% 50%,rgba(241,194,123,.5),rgba(241,194,123,0) 70%)}

/* ---- フッター：白・上に細い線 ---- */
html body .ft{border-top:1px solid var(--a-line)}

/* ---- スマホ：本文15px以上 ---- */
@media (max-width:760px){
  html body .evi-note,html body .g3-note,html body .cta .notes,html body .k-cap span,html body .pick-note,
  html body .cv figcaption,html body .data-nums .cap,html body .hours small{font-size:15px}
}

/* ---- 動きを減らす設定 ---- */
@media (prefers-reduced-motion:reduce){
  html body .btn{transition:none}
  html.v2js body .koyomi:not(.in) .on{background:var(--a-glow-t);border-color:var(--a-amber)}
}

/* =====================================================================
   v4 朝の光：下層ページの部品（H10 の見本はトップだけだったので足した）
   ===================================================================== */
/* 夜の節（.sky.night）は明るい地へ。扉・ヒーロー（.v-night）は夜のまま。
   特定の節の色（トップの #facts など 0,2,2 以上）があればそちらが勝つ */
main .sky.night{--sky:var(--a-paper)}
main .pg-night.sky,main .rh-night.sky{--sky:var(--a-mist)}
/* 紺の帯（金の二重の額）は、ミストの地に琥珀の二重の額 */
html body .pg-night-fr::before,html body .pg-night-fr::after{border-color:rgba(142,82,24,.55)}
/* 細い目次の帯（読み進めると上に残る）：白い帯・紺の文字・いまの節に灯りの下線 */
html body .pg-subnav{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--a-line)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html body .pg-subnav{background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px)}
}
html body .pg-subnav a{color:var(--a-navy2)}
html body .pg-subnav a:hover,html body .pg-subnav a[aria-current]{color:var(--a-navy)}
html body .pg-subnav a[aria-current]{box-shadow:inset 0 -3px 0 var(--a-glow)}
html body .pg-subnav a .no{color:var(--a-amber)}
/* 扉（写真の上）の英字は金のまま（琥珀は暗い写真の上では読みにくい） */
html body .pg-door .en,html body .hero .en{color:var(--gold,#F3CF65)}

/* 2026-10-06 渡木マネージャーの修正：/hd/ 連携先一覧の「介護施設」は、名称の上に施設の種類を小さく（英字の小見出しと同じ色の目安） */
.pg-hd-partners .names-kind>li .kind{display:block;font-size:13px;line-height:1.5;letter-spacing:.04em;color:var(--accent);margin:0 0 2px}
@media (max-width:760px){
  .pg-hd-partners .names-kind>li{padding:9px 0}
}


/* =========================================================================
   2026-10-07 横田先生のご提案（近藤さんが3つとも了承）＋渡木マネージャーの採用情報（案A）
   ① スマホの画面の下に「相談／電話する／見学を予約」の帯（footer.php の .spbar）
   ② 横にめくるカードは1枚を画面幅いっぱいに。次のカードが右端にのぞかない（位置は「1 / 6」と矢印で伝える）
   ③ 採用情報：Airワークの求人ページへの紺のボタン
   ========================================================================= */
.spbar{display:none}
@media (max-width:760px){
  .spbar{display:grid;grid-template-columns:.8fr 1.1fr 1.3fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:15;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);
    border-top:1px solid var(--a-line);box-shadow:0 -6px 18px rgba(20,34,78,.08)}
  @supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
    .spbar{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  }
  .spbar a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px;padding:0 6px;border-radius:999px;
    font-family:var(--gothic);font-size:15px;font-weight:700;letter-spacing:.06em;line-height:1.2;text-decoration:none;white-space:nowrap}
  .spbar svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
  .spbar-cz{flex-direction:column;gap:2px !important;font-size:12px !important;color:var(--a-navy);border:1px solid var(--a-line)}
  .spbar-tel{color:var(--a-navy);border:1.5px solid var(--a-navy)}
  .spbar-visit{background:var(--a-glow);color:var(--a-navy);box-shadow:0 2px 0 rgba(142,82,24,.25)}
  .spbar a:active{transform:translateY(1px)}
  .spbar a:focus-visible{outline:2px solid var(--a-amber);outline-offset:2px}
  html.cz-lock .spbar{display:none}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}

  .g3-hs>.g3-cards{gap:var(--gut)}
  .g3-hs>.g3-cards>*{width:calc(100vw - var(--gut) * 2)}
}

.rc-job{margin:28px 0 18px}
.rc-job-btn{display:flex;align-items:center;gap:24px;max-width:30em;padding:18px 24px 18px 26px;background:var(--a-navy);color:#fff;
  text-decoration:none;border-radius:0;transition:background-color .2s}
.rc-job-btn:hover{background:#1d2d5e}
.rc-job-btn:focus-visible{outline:2px solid var(--a-amber);outline-offset:3px}
.rc-job-tx{display:flex;flex-direction:column;gap:4px;margin-right:auto}
.rc-job-en{font-family:var(--pf);font-style:italic;font-size:14px;letter-spacing:.06em;color:var(--a-glow)}
.rc-job-t{font-family:var(--mincho);font-size:18px;font-weight:600;letter-spacing:.14em;line-height:1.5}
.rc-job-ar{flex:none;position:relative;width:34px;height:1px;background:var(--a-glow);transition:transform .2s}
.rc-job-ar::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;border-top:1px solid var(--a-glow);border-right:1px solid var(--a-glow);transform:rotate(45deg);transform-origin:center}
.rc-job-btn:hover .rc-job-ar{transform:translateX(4px)}
@media (max-width:760px){
  .rc-job-btn{max-width:none;padding:16px 18px 16px 20px;gap:16px}
  .rc-job-t{font-size:17px;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){.rc-job-ar,.rc-job-btn{transition:none}}

/* 2026-10-07 18時 近藤さんのスマホで「メニューがおかしい」：下へ読み進めたあと（.hd.stuck）にメニューを開くと、
   一覧がヘッダーの高さの中に閉じ込められ、本文が透けた。すりガラス（backdrop-filter）をかけた要素の中では
   position:fixed が画面ではなくその要素を基準にするため（v3 仕上げ 10/5 で入れたもの）。メニューを開いている間だけ外す */
html body .hd.stuck.open{-webkit-backdrop-filter:none;backdrop-filter:none}

/* 2026-10-08 中口さんのチラシの写真（患者様・スタッフの人物）。横長に切り抜くとお顔が切れるので、上側を見せる */
img[src$="/rehab-before.jpg"]{object-position:50% 20%}
img[src$="/home-visit.jpg"]{object-position:50% 0}

/* ===== フッターの整理（2026-10-09 近藤さん「ごちゃついている」） =====
   SNS と系列院を全幅の帯（.ft-band）へ。SNS は同じ形のボタン（公式／スタッフの発信）、系列院は2枚のカード */
.ft-band{display:grid;grid-template-columns:1fr;gap:24px;margin-top:clamp(36px,4vw,52px);padding-top:28px;border-top:1px solid var(--a-line)}
.ft-sns2{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:20px 28px}
.ft-sns2-h{margin:0 0 10px;font-family:var(--mincho);font-size:13.5px;letter-spacing:.14em;color:var(--a-navy2)}
.ft-sns2 ul,.ft-sis2 ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ft-sns2-g:first-child ul{grid-template-columns:repeat(3,minmax(0,1fr))}
.ft-sns2-g:last-child ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.ft-sns2 a{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;border:1px solid var(--a-line);border-radius:4px;background:#fff;color:var(--a-navy);text-decoration:none;transition:border-color .2s}
.ft-sns2 a:hover{border-color:var(--a-amber)}
.ft-sns2 svg{flex:none;width:24px;height:24px;fill:none;stroke:var(--a-amber);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ft-sns2 svg .f{fill:var(--a-amber);stroke:none}
.ft-sns2 span,.ft-sis2 a{display:flex;flex-direction:column;min-width:0;font-size:14px;line-height:1.4}
.ft-sns2 small,.ft-sis2 small{font-size:12px;color:var(--a-navy2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-sis2 a{justify-content:center;min-height:56px;padding:8px 14px;border-left:3px solid var(--a-glow);background:var(--a-paper);color:var(--a-navy);text-decoration:none}
.ft-sis2 a:hover{border-left-color:var(--a-amber)}
@media (min-width:761px){.ft-sis2 ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .ft-grid>.ft-col:last-child{display:none}
  .ft-band{margin-top:32px;padding-top:24px}
  .ft-sns2{grid-template-columns:1fr;gap:18px}
  .ft-sns2-g:first-child ul,.ft-sns2-g:last-child ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-sns2-g:last-child li:last-child:nth-child(odd),.ft-sns2-g:first-child li:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){.ft-sns2 a{transition:none}}


/* =====================================================================
   介護のご相談（2026-10-09）… page-kaigo.php だけで使う。渡木マネージャーのご提案（見本 kaigo.html）から
   色は今ある値だけ（紺 #14224E・琥珀 #8E5218・灯り色 #F1C27B・罫 #d9d6cc）
   ===================================================================== */
.staff-name{font-size:1.05rem;margin:0 0 12px;color:#14224E}
/* 担当より：Instagram の写真（押すと @mikazuki_manager が開く） */
.staff-ig{display:block;margin-top:24px;max-width:280px;text-decoration:none;color:#14224E;border:1px solid #d9d6cc;background:#fff}
.staff-ig img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.staff-ig-cap{display:flex;align-items:baseline;gap:10px;padding:12px 14px;font-size:14px;letter-spacing:.06em;border-top:1px solid #d9d6cc}
.staff-ig-cap .en{font-family:"Playfair Display",serif;font-style:italic;color:#8E5218;font-size:12px}
.staff-ig:hover img,.staff-ig:focus-visible img{opacity:.9}
.staff-ig:hover .staff-ig-cap,.staff-ig:focus-visible .staff-ig-cap{text-decoration:underline;text-decoration-color:#F1C27B}
@media (max-width:700px){.staff-ig{max-width:none}}

/* 2026-10-14 渡木マネージャーの提案「フッターの並び」案A（近藤さんが選択）
   スマホでは「ご案内」「目的からさがす」を1列にそろえる。名前は変えない。全部同じ高さ（48px）の1行・細い線・右に小さな矢印。
   2列だと長い3つ（送迎・フットケア・お食事／医療機関・介護事業所の方へ／見学のご予約・お問い合わせ）が2行に折れ、左右で行がそろわなかった。
   PCは変えない（この指定は 760px 以下だけ）。元の資料：20_原稿・コンテンツ/渡木さん修正_2026-10-13_フッターと法令/ */
@media (max-width:760px){
  .ft-grid .ft-nav{display:block}
  .ft-nav li{border-bottom:1px solid var(--a-line)}
  .ft-nav a{min-height:48px;justify-content:space-between;gap:12px;font-size:15px;line-height:1.5}
  .ft-nav a::after{content:"";flex:none;width:7px;height:7px;margin-right:4px;border-top:1.5px solid var(--a-amber);border-right:1.5px solid var(--a-amber);transform:rotate(45deg)}
}

/* ===== 訪問リハビリの事例（2026-10-19）：ご相談から訪問が始まるまでの流れ。効果・経過は書かない ===== */
.mk-case-g{display:grid;grid-template-columns:1fr;gap:24px;margin-top:28px}
@media (min-width:900px){.mk-case-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mk-case{background:#fff;border:1px solid var(--a-line);border-top:3px solid var(--a-glow);border-radius:4px;padding:22px clamp(18px,2.6vw,28px) 24px}
.sky-white .mk-case{background:var(--a-paper)}
.mk-case-no{margin:0;font-size:13.5px;color:var(--a-navy2);letter-spacing:.04em}
.mk-case-no .en{display:block;font-family:"Playfair Display",serif;font-style:italic;font-size:15px;color:var(--a-amber);margin-bottom:2px}
.mk-case h4{margin:6px 0 14px;font-family:var(--mincho);font-weight:600;font-size:clamp(19px,2.2vw,22px);line-height:1.6;color:var(--a-navy)}
.mk-case-st{list-style:none;margin:0;padding:0}
.mk-case-st li{position:relative;padding:0 0 14px 24px}
.mk-case-st li::before{content:"";position:absolute;left:3px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--a-glow);box-shadow:0 0 0 3px var(--a-glow-t)}
.mk-case-st li:not(:last-child)::after{content:"";position:absolute;left:7px;top:22px;bottom:0;border-left:1px dashed var(--a-amber);opacity:.5}
.mk-case-st b{display:block;font-size:14.5px;font-weight:700;color:var(--a-amber);letter-spacing:.04em}
.mk-case-st span{display:block;font-size:15px;line-height:1.85;color:var(--a-navy)}
.mk-case-st li.is-next{margin-top:4px;padding:14px 16px 14px 36px;background:var(--a-glow-t);border-radius:4px}
.mk-case-st li.is-next::before{left:16px;top:21px;background:var(--a-amber);box-shadow:none}
.mk-case-pts{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:761px){.mk-case-pts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mk-case-pts li{padding:16px 18px;border-left:3px solid var(--a-amber);background:#fff}
.mk-case-pts b{display:block;font-family:var(--mincho);font-weight:600;font-size:16px;color:var(--a-navy);margin-bottom:4px}
.mk-case-pts span{font-size:14px;line-height:1.8;color:var(--a-navy2)}

/* ===== ご自宅でできる運動（2026-10-20）：資料の「効果」は書かない ===== */
.mx-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:24px}
@media (min-width:900px){.mx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mx-gh{margin:0 0 8px;font-family:var(--mincho);font-weight:600;font-size:16px;color:var(--a-navy);padding-bottom:6px;border-bottom:1px solid var(--a-amber)}
.mx-card{background:#fff;border:1px solid var(--a-line);border-radius:4px;margin-top:8px}
.sky-white .mx-card{background:var(--a-paper)}
.mx-card summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:12px 14px;position:relative}
.mx-card summary::-webkit-details-marker{display:none}
.mx-card summary b{font-size:15.5px;color:var(--a-navy)}
.mx-reps{font-size:12px;color:var(--a-amber);white-space:nowrap;align-self:center}
.mx-mus{grid-column:1 / -1;font-size:13.5px;line-height:1.7;color:var(--a-navy2);padding-right:18px}
.mx-card summary::after{content:"";position:absolute;right:14px;bottom:16px;width:8px;height:8px;border-right:1.5px solid var(--a-amber);border-bottom:1.5px solid var(--a-amber);transform:rotate(45deg)}
.mx-card[open] summary::after{transform:rotate(-135deg)}
.mx-card summary:focus-visible{outline:2px solid var(--a-amber);outline-offset:-2px}
.mx-steps{margin:0;padding:6px 16px 4px 32px;font-size:14.5px;line-height:1.8;color:var(--a-navy);border-top:1px dashed var(--a-line)}
.mx-care{margin:6px 14px 12px;padding:8px 10px;background:var(--a-glow-t);font-size:13.5px;line-height:1.7;color:var(--a-navy)}
.mx-steps{list-style:decimal}.mx-steps li{list-style:decimal;margin:4px 0}.hx-steps{list-style:decimal}


/* 2026-10-20 訪問リハビリのチラシから（料金の例・一緒にできること・ご利用の流れ・専用ダイヤル）＋ご自宅でできる運動の見本の写真 */
.mv-fee-note{display:block;margin-top:4px;font-size:13px;color:var(--a-navy2)}
.mv-do-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (min-width:900px){.mv-do-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mv-do-list li{background:#fff;border:1px solid var(--a-line);border-left:3px solid var(--a-amber);padding:12px 12px;font-size:15px;line-height:1.6;color:var(--a-navy)}
.sky-white .mv-do-list li{background:var(--a-paper)}
.mv-flow .pg-steps{margin-top:24px}
.mv-tel{margin:28px 0 0;padding:20px 22px;background:var(--a-navy);color:#fff;text-align:center}
.mv-tel-h{margin:0;font-family:var(--mincho);font-weight:600;font-size:16px;letter-spacing:.12em;color:var(--a-glow)}
.mv-tel-n{display:inline-block;margin:6px 0 4px;font-family:var(--pf);font-size:clamp(28px,6vw,36px);letter-spacing:.04em;color:#fff;text-decoration:none;border-bottom:1px solid var(--a-glow)}
.mv-tel-n:focus-visible{outline:2px solid var(--a-glow);outline-offset:4px}
.mv-tel-s{margin:6px 0 0;font-size:14px;line-height:1.8;color:#fff}
.mx-ph{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 14px 4px;border-top:1px dashed var(--a-line)}
.mx-ph img{display:block;width:100%;height:auto;border-radius:3px;background:var(--a-mist)}
.mx-ph.is-tall{padding-left:28px;padding-right:28px}
.mx-ph+.mx-steps{border-top:0}
@media (min-width:900px){
  .mx-ph{grid-template-columns:1fr;gap:8px}
  .mx-ph.is-tall{grid-template-columns:1fr;justify-items:center;padding-left:14px;padding-right:14px}
  .mx-ph.is-tall img{max-width:150px}
}
/* 2026-10-20 事例の場面イラスト（ChatGPTで作成） */
.mk-case-ill{margin:24px 0 0;background:#fff;border:1px solid var(--a-line);border-radius:4px;overflow:hidden}
.mk-case-ill img{display:block;width:100%;height:auto;max-height:460px;object-fit:cover;object-position:50% 8%}
.mk-case-ill figcaption{padding:10px 18px 12px;font-size:14px;line-height:1.8;color:var(--a-navy2)}
.mk-case-ill figcaption small{margin-left:4px;font-size:12px}
@media (max-width:760px){.mk-case-ill img{max-height:none;aspect-ratio:16 / 10}}
/* 2026-10-20 /rehab/「一緒にできること」に水彩のイラスト（img/do1〜8.jpg・480px角）。文字は下に、琥珀の線で区切る */
.mv-do-list.has-ill{gap:12px 10px}
.mv-do-list.has-ill li{padding:0;border-left:1px solid var(--a-line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.mv-do-list.has-ill img{display:block;width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover}
.mv-do-list.has-ill .mv-do-t{display:block;flex:1;padding:9px 11px 11px;border-top:2px solid var(--a-amber);font-size:14px;line-height:1.6}
@media (min-width:900px){.mv-do-list.has-ill{gap:16px}.mv-do-list.has-ill .mv-do-t{font-size:15px;padding:11px 14px 13px}}
.mv-do-note{margin:8px 0 0;font-size:12px;color:var(--a-navy2)}

/* =========================================================================
   2026-10-20 吉田さん「リハビリのページが縦に長すぎる。横スクロールも混ぜて見やすく」
   スマホ（〜760px）だけ、/rehab/ のカードと流れの並び12か所をトップと同じ「横にめくるカード」（G03・[data-hscroll]）にする。
   1枚を画面幅いっぱい（10/7 の決まり）。カードの見た目（D04＋D10＋D12・水彩の絵・事例）は変えない。PC は今までどおり縦に並ぶ。
   時間の流れ（.rh-time）もカードに。表（.dl）・数字（#evidence・注記と離さない）は縦のまま
   ========================================================================= */
@media (max-width:760px){
  .rh .hs-bar{margin-top:20px}
  .rh .g3-hs>.g3-cards{margin:0;align-items:flex-start}
  .rh .g3-hs>.cards.is-panel>.card{height:100%}
  .rh .g3-hs>.cards.is-panel{align-items:stretch}
  /* 絵のカード：画面いっぱいだと絵が大きすぎるので、絵は横長に切って文字を大きく */
  .rh .g3-hs>.mv-do-list.has-ill{gap:var(--gut);align-items:stretch}
  .rh .g3-hs>.mv-do-list.has-ill img{aspect-ratio:4 / 3;object-position:50% 30%}
  .rh .g3-hs>.mv-do-list.has-ill .mv-do-t{font-size:16px;padding:12px 16px 14px}
  /* 流れ（番号つき）：縦の線を外して、1枚ずつのカードに */
  .rh .g3-hs>.pg-steps{align-items:stretch}
  .rh .g3-hs>.pg-steps>li,.rh .g3-hs>.rh-time>li{min-height:0;padding:18px 18px 22px;background:#fff;border:1px solid var(--a-line);border-radius:4px}
  .rh.sky-white .g3-hs>.pg-steps>li,.rh.sky-white .g3-hs>.rh-time>li{background:var(--a-paper)}
  .rh .g3-hs>.pg-steps>li::before{position:relative;left:auto;top:auto;width:44px;height:44px;box-shadow:none}
  .rh .g3-hs>.pg-steps>li::after{display:none}
  .rh .g3-hs>.pg-steps h3{margin:12px 0 6px}
  /* 時間の流れ：縦の線と点を外し、時刻を上に */
  .rh .g3-hs>.rh-time{align-items:stretch}
  .rh .g3-hs>.rh-time>li{display:block}
  .rh .g3-hs>.rh-time>li::before,.rh .g3-hs>.rh-time>li::after{display:none}
  .rh .g3-hs>.rh-time time{display:block;margin:0 0 6px}
  /* 事例・運動の組：高さはそれぞれ（開いた運動のぶんだけ伸びる） */
  .rh .g3-hs>.mk-case-g>.mk-case{margin:0}
  .rh .g3-hs>.mx-grid>.mx-g{margin:0}
}