/* =====================================================================
   サイト共通の仕上げ（全ページの <head> 末尾で読み込む）
   ---------------------------------------------------------------------
   各ページのインライン CSS の後に読み込み、配色トークン・文字組み・
   動きの節度・共通の問い合わせ枠をそろえる。
   参考：noriyasukatano/japanese-web-design（日本語の文字組み原則と
   業種別実測データ。医療・ヘルスケアは「やさしい・ナチュラル」54%、
   「清潔感」46%、配色トーン「明るい」78%・「柔らかい」56%、
   店舗・施設紹介タイプは情報を削らない「網羅性優先」）
   ===================================================================== */

/* ---- 1. 配色トークン --------------------------------------------------
   ・生成りベージュの背景をやめ、白に近い淡い色へ（清潔感・明るさ）
   ・緑は白文字をのせても WCAG AA（4.5:1）を満たす濃さに（#16765D＝5.6:1）
   ・補足文字（日付・注記）の灰色も 4.5:1 以上に
   ・カードの影は薄く、角丸は小さめにして「量産型カード」感を抑える */
:root{
  --bg:#F7F9F6;
  --white:#FFFFFF;
  --text:#26302C;
  --sub:#55605B;
  --light:#646E69;
  --green:#16765D;
  --green-l:#E4F3EC;
  --green-d:#12634F;
  --warm:#F5A050;
  --warm-l:#FFF4E6;
  --leaf:#2E7D4A;     /* アレルギー科LPの緑（白文字 5.1:1） */
  --leaf-l:#E8F5EC;
  --leaf-d:#236B3D;
  --border:#E2EBE6;
  --shadow:0 1px 3px rgba(20,48,38,.05);
  --r:14px;
  --rs:8px;
}
html body{background:var(--bg)!important;color:var(--text)!important}
/* ヘッダーの半透明背景も生成りから白へ */
html body .hd{background:rgba(255,255,255,.94)!important}

/* ---- 2. 日本語の文字組み -------------------------------------------- */
/* 禁則処理：行頭に句読点・閉じ括弧を置かない */
body{line-break:strict;word-break:normal;overflow-wrap:break-word;font-kerning:normal}
/* 見出し：約物を詰め（palt）、字間をわずかに広げ、行末の泣き別れを防ぐ */
h1,h2,h3,h4,.st-t,.page-hero h1{font-feature-settings:"palt";letter-spacing:.04em;text-wrap:balance}
/* 本文・リード：段落末の孤立文字を防ぐ */
p,li,dd,td,.st-d{text-wrap:pretty}
/* 数字の桁がそろうように（電話番号・診療時間・料金） */
table,.ct-date,.col-date,time,[href^="tel:"]{font-variant-numeric:tabular-nums}

/* ---- 3. 白文字をのせるボタンのコントラスト ------------------------------
   オレンジ（--warm）に白文字は 2.1:1 で読みにくいため、濃い茶の文字に */
html body .hd-bk,html body .m-bk,html body .nav-bk,html body .s-bk,html body .s-tel,
html body .btn-warm,html body .c-bk,html body .hv-badge,
html body .tbl-head.warm-h{color:#3A2614!important}
/* 青・ピンクの見出し帯（料金表）の白文字も濃い文字に */
html body .tbl-head.blue-h,html body .tbl-head[style*="FF7EA0"]{color:var(--text)!important}
/* ヘッダーの電話ボタン：ナビの灰色指定に負けて緑地に灰色文字になっていたのを白に */
html body .hd-tel,html body .nav-tel{color:#fff!important}
/* 休診日・必須など赤系の文字、ピンク・オレンジの文字を AA の濃さに */
html body th.hl,html body .req{color:#C62828!important}
/* 隔週土曜などの記号（■）はオレンジを濃く */
html body td.sat{color:#B8650F!important}
html body .job-tag.now{color:#C2185B!important}
html body p.title{color:#B25E12!important}
html body a[style*="--warm-d"]{color:#A65A12!important}
html body .note{color:var(--sub)!important}

/* ---- 4. 動きは節度をもって ------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}
  .anim,.fade,.fi{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---- 5. 縦組のアクセント（トップ「かかりつけ」見出しのみ・PC幅） ---------
   短い見出し1か所だけに使う「部分使用」。丸ゴシック×縦組で、誠実さとやさしさ */
@media (min-width:900px){
  .warm-sec > div:last-child{display:grid;grid-template-columns:1fr auto;column-gap:40px;align-items:start}
  .warm-sec > div:last-child > *{grid-column:1}
  .warm-sec > div:last-child > h2.st-t{grid-column:2;grid-row:1 / span 6;writing-mode:vertical-rl;text-orientation:mixed;font-feature-settings:"vpal";
    font-size:28px;line-height:1.9;letter-spacing:.14em;margin:0;padding-right:16px;border-right:3px solid var(--green);text-wrap:wrap}
  .warm-sec > div:last-child > h2.st-t::before{display:none}
}

/* ---- 6. 共通の問い合わせ枠（訪問診療 → 外来） ----------------------- */
.cta2{max-width:960px;margin:56px auto 48px;padding:0 20px;display:grid;gap:16px}
.cta2-box{border-radius:var(--r);padding:32px 28px;text-align:center}
.cta2-box h2{font-family:var(--fa,'Zen Maru Gothic',sans-serif);font-size:19px;font-weight:700;margin:0 0 8px}
.cta2-box h2::before{content:none!important;display:none!important}
.cta2-box p{font-size:13.5px;line-height:1.9;margin:0 0 18px}
.cta2-houmon{background:var(--green-d)!important}
.cta2-houmon h2{color:#fff!important}
.cta2-houmon p{color:rgba(255,255,255,.92)!important}
.cta2-out{background:var(--white)!important;border:2px solid var(--green)}
.cta2-out h2{color:var(--green-d)!important}
.cta2-out p{color:var(--sub)!important}
.cta2-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cta2-b{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:var(--rs);
  font-size:14.5px;font-weight:700;text-decoration:none!important}
.cta2-b-light{background:#fff!important;color:var(--green-d)!important}
.cta2-b-line{background:#06C755!important;color:#fff!important}
.cta2-b-outline-w{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.7)}
.cta2-b-solid{background:var(--green)!important;color:#fff!important}
.cta2-b-outline{background:var(--white)!important;color:var(--green-d)!important;border:1px solid var(--green)}
.cta2-b:focus-visible{outline:3px solid var(--warm);outline-offset:2px}
@media (max-width:600px){.cta2{margin:40px auto 32px}.cta2-box{padding:26px 18px}.cta2-b{flex:1 1 100%}}
.cta2-note{font-size:12.5px!important;margin:14px 0 0!important;color:var(--sub)!important}

/* ---- 挿絵（assets/illust.js）と訪問エリアの地図 ---------------------------
   コラム以外のページでも <div class="ill" data-ill="キー" data-cap="説明"> を
   置けば挿絵になる。線画は配色トークンに追従し、1見出しに1点までに抑える */
.ill-fig{margin:24px auto;text-align:center;max-width:320px}
.ill-fig svg{width:100%;height:auto;display:block}
.ill-fig figcaption{font-size:12px;color:var(--sub)!important;margin-top:8px;line-height:1.75;text-align:center}
.ill-fig .bg{fill:var(--green-l);opacity:.55}
.ill-fig .s{fill:none;stroke:var(--green-d);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ill-fig .s2{fill:none;stroke:var(--light);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ill-fig .w{fill:none;stroke:var(--warm);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ill-fig .f{fill:var(--green);opacity:.16;stroke:none}
.ill-fig .wf{fill:var(--warm);opacity:.28;stroke:none}
.ill-fig .d{fill:var(--green-d);stroke:none}
.ill-fig .t{fill:var(--green-d);stroke:none;font-family:var(--fa);font-size:15px;font-weight:700}
@media (max-width:600px){.ill-fig{margin:20px auto;max-width:280px}}
/* コラム本文の挿絵は column-detail.html 側の寸法を優先 */
html body .article .ill-fig{max-width:none;margin:26px 0}

.area-map{max-width:680px;margin:40px auto 0;padding:0 4px}
.area-map svg{width:100%;height:auto;display:block}
.area-map .sea{fill:#E3EEF5}
.area-map .sea-t{fill:#5E7A8C;font-size:16px;letter-spacing:.3em;text-anchor:middle}
.area-map .full{fill:var(--green);fill-opacity:.32;stroke:var(--green-d);stroke-width:2;stroke-linejoin:round}
.area-map .part{fill:var(--green-l);stroke:var(--green-d);stroke-width:2;stroke-dasharray:6 5;stroke-linejoin:round}
.area-map .river{fill:none;stroke:#7FA9C4;stroke-width:3;stroke-linecap:round}
.area-map .fuji{fill:#fff;stroke:var(--light);stroke-width:2;stroke-linejoin:round}
.area-map .snow{fill:var(--light);opacity:.35}
.area-map text{font-family:var(--fa,'Zen Maru Gothic',sans-serif);text-anchor:middle}
.area-map .lbl{fill:var(--text);font-size:19px;font-weight:700}
.area-map .sub{fill:var(--sub);font-size:14px}
.area-map .key{fill:var(--sub);font-size:14px;text-anchor:start}
.area-map .pin{fill:var(--warm);stroke:#fff;stroke-width:2}
.area-map .pin-ring{fill:var(--warm);opacity:.25}
.area-map .pin-t{fill:#9A4F0C;font-size:15px;font-weight:700;text-anchor:end}
.area-map figcaption{font-size:12.5px;color:var(--sub)!important;line-height:1.8;margin-top:10px;text-align:center}
@media (max-width:600px){
  .area-map{margin-top:28px}
  .area-map .lbl{font-size:24px}
  .area-map .sub,.area-map .key{font-size:18px}
  .area-map .pin-t{font-size:20px}
}