/*
Theme Name: 春日井 れお接骨院
Theme URI:
Author: Nexora（辻本 陽春）
Author URI: https://nexoraworks.jp
Description: 春日井 れお接骨院の専用テーマ。クラシックテーマ形式。配布テーマは使わず自作しています。
             ブロックテーマにしないのは、サイトエディターで院長がテンプレートごと壊せるためです。
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: 制作物として貴院に譲渡。第三者への再配布は不可
Text Domain: reo
*/

/* このファイルの本体は、デモ（01_デモHP/B案_紺/css/style.css）と同じ内容です。
   CSSの中に画像は書いていないので、パスの書き換えは要りません。
   デモ側を直したら、ここにも同じものを入れてください（scratchpad/synccss.py）。 */

@charset "UTF-8";
/* ==========================================================================
   春日井 れお接骨院  紺×青緑版デモ  style.css

   01_デモHP/A案_生成り（生成り×緑）とは別案です。色だけでなく版面から作り直しています。
   配色の方向は「清潔・信頼（紺×青緑×白）」。

   配色は実サイト90件を機械的に走査し、紺と青緑を実際に併用していた24件の
   実測値から決めました。要点は3つです。

     1. 青緑は明度40〜50%の高彩度（#0099c7 #11b7da #009ec2 など）。
        暗く濁った青緑は「清潔」ではなく「沈んだ」印象になります。
     2. 紺は明度10〜20%まで落とす（#011835 #002060 #001871 など）。
        中途半端に明るいと紺ではなく濃いグレーに見えます。
     3. 青緑は「面で使う」か「文字で使う」かを決め切る。
        両方に散らすと色がちぐはぐに見えます。ここでは面型を採りました。
   ========================================================================== */

:root{
  /* 紺 ── 面と文字の主役 */
  --navy:#0d2440;
  --navy-d:#071626;
  --navy-l:#1b3b5e;

  /* 青緑 ── 面で使う。白文字が乗る明度に調整してある */
  --teal:#0a7f9e;
  --teal-d:#086a85;
  --teal-br:#28a9cb;   /* 紺の面の上に置くアクセント */

  /* 文字 */
  --ink:#22303a;
  --ink-sub:#5d6f7c;
  --ink-faint:#8a9aa5;   /* 白地で 2.90。文字には使わない。ロゴの添え字と罫だけ */

  /* 面 ── 白と、ごくわずかに青い白の2種類だけ */
  --bg:#ffffff;
  --bg-sub:#f4f8fa;
  --line:#dbe6ec;
  --line-soft:#eaf1f5;

  /* LINEの緑。縁とアイコンにだけ使います */
  --line-green:#06c755;
  --line-green-d:#05a948;

  --font-jp:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
  --font-en:"Inter","Zen Kaku Gothic New",sans-serif;

  --content:1140px;
  --pad:clamp(20px,12px + 2vw,56px);
  --r:3px;                        /* 角丸は3px。丸みは付けない */
  --dur:460ms;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-jp);font-size:16px;line-height:1.9;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
;
  /* 日本語は漢字と漢字のあいだならどこでも改行されるので、「場合」が「場／合」に、
     「いただきます。」が「いただきま／す。」に割れる。
     auto-phrase はブラウザの文節解析で折るので、語の途中で切れなくなる。
     未対応のブラウザ（Safari・Firefox）では、いまと同じ挙動に戻るだけ */
  word-break:auto-phrase}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.55;font-weight:700;letter-spacing:.04em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--teal-br);outline-offset:3px}

.wrap{max-width:var(--content);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(76px,52px + 5vw,132px)}
.sec--sub{background:var(--bg-sub)}
.sec--navy{background:var(--navy);color:#fff}
.sec--tight{padding-block:clamp(56px,40px + 3.4vw,92px)}

/* 数字はラテン書体＋等幅にして、桁が揃うようにする */
.num,.price b,.tt td,.tt th{font-family:var(--font-en);font-variant-numeric:tabular-nums}


/* ==========================================================================
   見出し
   ========================================================================== */
.hd{margin-bottom:clamp(34px,24px + 2.2vw,58px)}
.hd .lb{
  display:block;font-family:var(--font-en);font-size:12px;font-weight:600;
  letter-spacing:.18em;color:var(--teal-d);margin-bottom:10px;
}
.sec--navy .hd .lb{color:var(--teal-br)}
.hd h2{font-size:clamp(21px,17px + 1.1vw,29px);line-height:1.6}
.hd p{margin-top:16px;color:var(--ink-sub);font-size:15px;max-width:40em}
/* 節の本文。これが無いと1行66字になる */
.lead{font-size:16px;line-height:1.95;color:var(--ink);max-width:52em}
.sec--navy .hd p{color:rgba(255,255,255,.82)}


/* ==========================================================================
   ボタン ── 面に使う色は青緑1色。
   　 LINEの緑は「面」ではなく「縁とアイコン」にだけ使います。
   　 緑をベタで置くと紺・青緑と並んで3色が無関係に見えるためです。
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.04em;
  padding:15px 28px;border:1px solid transparent;border-radius:var(--r);
  text-decoration:none;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn--main{background:var(--teal);color:#fff}
.btn--main:hover{background:var(--teal-d)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--ghost:hover{background:rgba(255,255,255,.1)}
/* LINEのボタン ── 中は白、縁とアイコンだけLINEの緑。
   緑を面で使うと配色が崩れますが、縁とアイコンだけなら「LINEの印」として働きます。
   ※ 公開時は LINE公式のロゴ素材（ガイドラインあり）を使います */
.btn--line{background:#fff;color:var(--navy);border-color:var(--line-green);border-width:1.6px;font-weight:700}
.btn--line svg{fill:var(--line-green)}
.btn--line:hover{background:#f1fbf5;border-color:var(--line-green-d)}
/* 紺の面の上に置くとき、白のままだと浮きすぎないよう影を少し */
.sec--navy .btn--line,.sec--end .btn--line,.hero .btn--line{box-shadow:0 1px 0 rgba(0,0,0,.12)}

/* 電話のボタン ── 紺の縁。LINEの緑と役割が混ざらないようにします */
.btn--tel{background:#fff;color:var(--navy);border-color:var(--navy);border-width:1.6px}
.btn--tel svg{fill:var(--navy)}
.btn--tel:hover{background:var(--bg-sub)}

/* 予約以外の白ボタン */
.btn--plain{background:#fff;color:var(--navy);border-color:var(--line)}
.btn--plain:hover{background:var(--bg-sub)}


/* ==========================================================================
   休診・長期休暇のお知らせバー ── ヘッダーの上。スクロールすると流れて消えます
   （sticky で残るのはヘッダーだけです）

   地はブランドの紺より一段暗い --navy-d。ヒーローと同じ紺にすると
   「サイトの一部」に見えてしまい、臨時のお知らせとして目に留まりません。

   WordPress化したあとは、院長が管理画面から
   「表示する／しない」「文章」「表示を終える日」の3つだけ設定できるようにします。
   終了日を過ぎると自動で消えるので、消し忘れても出しっぱなしになりません。
   ========================================================================== */
.tbar{background:var(--navy-d);color:#fff;font-size:15px;line-height:1.75}
.tbar-in{
  max-width:var(--content);margin-inline:auto;padding:11px var(--pad);
  display:flex;align-items:center;gap:14px;
}
.tbar-lb{
  flex:none;font-size:12px;font-weight:700;letter-spacing:.1em;
  background:rgba(255,255,255,.2);border-radius:var(--r);padding:3px 10px;
}
.tbar p{margin:0;flex:1;min-width:0}
.tbar-x{
  flex:none;background:none;border:0;color:rgba(255,255,255,.82);cursor:pointer;
  font-size:20px;line-height:1;padding:4px 3px;font-family:inherit;
  transition:color var(--dur) var(--ease);
}
.tbar-x:hover{color:#fff}

/* ==========================================================================
   ヘッダー ── 白地。
   　 紺にすると、すぐ下の紺のヒーローと境目が消えて読みづらくなります。
   　 実測でも hrm・tanaka が白ヘッダーでした。
   ========================================================================== */
.hdr{
  position:sticky;top:0;z-index:50;background:#fff;color:var(--ink);
  border-bottom:1px solid var(--line);
  transition:transform 260ms var(--ease);
}
/* 下へスワイプしているあいだは引っ込め、上へスワイプしたら戻します。
   付け外しは main.js（.is-off）。**JSが動かないときは出したまま**にしてあります。

   引っ込めるのはヘッダーであって、下のバー（LINE・お電話）ではありません。
   375×812 で実測すると ヘッダー105px・下のバー63px。**大きいのは上**で、
   読んでいる最中に押すのは「予約」のほう。だから上を引っ込めます。

   **実際に動くのはスマホ幅だけ** —— transform は下の @media の中にあります */
.hdr-in{
  max-width:var(--content);margin-inline:auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:clamp(14px,1.6vw,28px);min-height:66px;
}
.logo{display:flex;align-items:baseline;gap:9px;text-decoration:none;flex:none}
.logo b{font-size:18px;font-weight:700;letter-spacing:.06em;color:var(--navy)}
/* ロゴの一部なので本文の基準は当てない。薄いままでよい（本人指定 2026-09-20） */
.logo small{font-size:10.5px;color:var(--ink-faint);letter-spacing:.08em}
.nav{display:flex;gap:clamp(11px,1.3vw,24px);margin-left:auto}
.nav a{
  font-size:14px;text-decoration:none;color:var(--ink);white-space:nowrap;
  padding-block:6px;border-bottom:2px solid transparent;transition:color .3s,border-color .3s;
}
.nav a:hover{color:var(--teal);border-bottom-color:var(--teal)}
.hdr-info{
  display:flex;flex-direction:column;line-height:1.45;flex:none;
  padding-left:clamp(12px,1.6vw,22px);border-left:1px solid var(--line);
}
.hdr-info .t{font-size:13px;color:var(--ink-sub);letter-spacing:.06em}
.hdr-info .v{font-family:var(--font-en);font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap}
.hdr-btns{display:flex;gap:8px;flex:none}
.hdr .btn{padding:10px 17px;font-size:14px;flex:none}


/* ==========================================================================
   ヒーロー ── 左が紺の面、右が写真。写真に文字を重ねません。
   　 重ねると写真の明暗に読みやすさが左右されるため、分けています。
   ========================================================================== */
.hero{background:var(--navy);color:#fff}
.hero-in{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.hero-txt{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,36px + 4vw,104px) var(--pad);
  width:100%;max-width:calc(var(--content) / 2);margin-left:auto;
}
.hero-eyebrow{
  font-size:12px;letter-spacing:.14em;color:var(--teal-br);
  margin-bottom:18px;font-weight:600;
}
.hero h1{font-size:clamp(27px,20px + 2.2vw,44px);line-height:1.5;letter-spacing:.05em}
.hero-lead{margin-top:24px;color:rgba(255,255,255,.82);font-size:16px;line-height:1.95;max-width:26em;font-weight:500}
.hero-pts{display:flex;flex-wrap:wrap;gap:9px;margin-top:32px}
.hero-pts li{
  font-size:13px;letter-spacing:.03em;padding:7px 14px;border-radius:var(--r);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.hero-img{position:relative;min-height:clamp(340px,44vw,600px)}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- ヒーロー写真のクロスフェード -----------------------------------------
   3枚を重ねて、同じ21秒のループを「負のdelay」でずらして再生しています。
   JavaScriptは使っていません。

   写真の枚数を変えるときは、次の3つを必ず揃えてください。
     ・スライド（.hero-slide）の数
     ・下の 33.33% という数値（= 100 ÷ 枚数）
     ・各スライドの animation-delay（= -21秒 ÷ 枚数 の倍数）

   delay を負の値にしているのは、最初の1周だけ無音の時間ができるのを防ぐためです。
   ゆっくり寄る動き（Ken Burns）はあえて入れていません。切り替わり以外は
   止めておくことで、動きの総量を増やさないようにしています。
   -------------------------------------------------------------------------- */
.hero-slide{position:absolute;inset:0;overflow:hidden;opacity:0}
.hero-slide:nth-child(1){opacity:1}   /* 動きが効かない環境ではこの1枚が残ります */
.hero-slide{animation:heroFade 21s linear infinite}
.hero-slide:nth-child(2){animation-delay:-14s}
.hero-slide:nth-child(3){animation-delay:-7s}

@keyframes heroFade{
  0%     {opacity:1}
  28%    {opacity:1}    /* ここまで表示したまま */
  33.33% {opacity:0}    /* 1.1秒かけて次の1枚へ渡す */
  94.67% {opacity:0}
  100%   {opacity:1}    /* 末尾で次の周回にフェードイン */
}


/* ==========================================================================
   お知らせ ── 細い帯。院長が管理画面から投稿できる部分
   ========================================================================== */
.news{border-bottom:1px solid var(--line);background:var(--bg)}
.news-in{
  max-width:var(--content);margin-inline:auto;padding:26px var(--pad);
  display:flex;align-items:center;gap:clamp(14px,2vw,30px);
}
.news-lb{
  flex:none;font-family:var(--font-en);font-size:12px;font-weight:600;
  letter-spacing:.16em;color:var(--teal);
}
.news-list{display:flex;flex-direction:column;gap:13px;min-width:0;flex:1}
/* 本文は15px以上にする（40〜60代が主な読み手のため） */
.news-list li{display:flex;gap:18px;align-items:baseline;font-size:16px}
.news-list time{
  flex:none;font-family:var(--font-en);font-size:13px;color:var(--ink-sub);
  font-variant-numeric:tabular-nums;
}
.news-list .t{
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
a.t:hover{color:var(--teal-d)}
a.news-lb{transition:color var(--dur) var(--ease)}
a.news-lb:hover{color:var(--teal-d)}


/* ==========================================================================
   料金 ── ご回答で「一番やりたいこと」に金額の分かりやすさが挙がっていたため、
   　 トップの早い位置に、実額で置いています
   ========================================================================== */
.price{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:clamp(16px,1.4vw,24px)}
.price-c{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:34px 32px 36px}
.sec--sub .price-c{background:#fff}
.price-c h3{font-size:17px;margin-bottom:4px}
/* 自費のカードは行が多い（10行）。他の2枚と横に並べると、その2枚が空白だらけで縦に伸びる。
   だから自費だけ幅いっぱいにし、中の行を2列で並べる。同じ金額のメニューが左右に並ぶ順に書いてある（2026-10-04） */
.price:has(.price-c--wide){grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.price-c--wide{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,3vw,48px);align-content:start}
.price-c--wide > h3,.price-c--wide > .cap,.price-c--wide > .price-note{grid-column:1/-1}
.price-c--wide .price-row:nth-of-type(2){border-top:0}
@media screen and (max-width:860px){
  .price-c--wide{display:block}
  .price-c--wide .price-row:nth-of-type(2){border-top:1px solid var(--line-soft)}
}
.price-c .cap{font-size:13px;color:var(--ink-sub);margin-bottom:26px;text-wrap:balance}
.price-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:15px 0;border-top:1px solid var(--line-soft)}
.price-row:first-of-type{border-top:0}
/* 金額は右に寄るので、名前は残りを全部使う。flex を指定しないと文字数ぶんで止まり、
   「…もう1か所」「追加」のように末尾が2文字だけ落ちる */
.price-row .n{flex:1;font-size:15px;color:var(--ink);text-wrap:balance}
.price-row .n small{display:block;font-size:13px;color:var(--ink-sub);line-height:1.75;text-wrap:balance}
.price-row b{font-family:var(--font-en);font-size:17px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.price-row b span{font-family:var(--font-jp);font-size:13px;font-weight:500;margin-left:2px}
/* カードの中の注記。罫で「このカードの話」だと分かるようにする */
.price-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:14px;color:var(--ink-sub);line-height:1.85}
/* 3枚すべてにかかる注記。カードの外に置く */
.price-all{margin-top:clamp(20px,16px + 1vw,28px);font-size:14px;color:var(--ink-sub);
  line-height:1.85;text-align:right}

/* 初めての方の総額。ページで一番大事な数字なので、表より先に、いちばん大きく出します。
   ベタ面は使いません。このセクションは「薄い地＋白いカード」で組んであり、
   ここだけ塗りつぶすと面の種類が3つになって、まとめ役ではなく広告のように見えます。
   上の太罫と下の細罫で区切り、下のカードと同じ「白＋線」の言語に揃えています。

   金額は2行ぶんをまたいで縦中央に置きます。flexで折り返すと金額が1行目だけに乗り、
   上下の罫線に対して上寄りになるため、grid で行をまたがせています。 */
.price-lead{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  column-gap:24px;row-gap:6px;
  color:var(--ink);
  border-top:2px solid var(--navy);border-bottom:1px solid var(--line);
  padding:22px 0;margin-bottom:clamp(20px,1.8vw,30px);
}
.price-lead .t{grid-column:1;grid-row:1;font-size:17px;font-weight:700;letter-spacing:.04em;color:var(--navy)}
.price-lead .brk{grid-column:1;grid-row:2;font-size:14px;color:var(--ink-sub);line-height:1.8;max-width:52em}
.price-lead .amt{
  grid-column:2;grid-row:1 / span 2;align-self:center;
  font-family:var(--font-en);font-size:clamp(28px,22px + 1.4vw,38px);
  font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15;color:var(--navy);
}
.price-lead .amt span{font-family:var(--font-jp);font-size:16px;font-weight:500;margin-left:3px}

/* 狭い画面では2段組をやめ、ラベル → 金額 → 内訳 の縦並びにします。
   横に並べると、ラベルが折り返して金額が潰れるためです */
@media screen and (max-width:560px){
  .price-lead{grid-template-columns:1fr;row-gap:10px}
  .price-lead .t{grid-row:1}
  .price-lead .amt{grid-column:1;grid-row:2;justify-self:start}
  .price-lead .brk{grid-row:3}
}

/* 70歳以上の行。該当する方に分かりやすいよう目立たせています */
.price-row--hl .n{font-weight:700}
.price-row--hl .n,.price-row--hl b{color:var(--teal)}


@media screen and (max-width:640px){
  /* 350px幅のカードに左右32pxずつは取りすぎ。品目名に200pxしか残らない */
  .price-c{padding:26px 22px 28px}
}


/* ==========================================================================
   症状 ── 白い面に、上端3pxの青緑。角丸4px（2026-09-22 に差し替え）
   --------------------------------------------------------------------------
   前は青緑のベタ面でした。症状を6ページにするにあたって作り直しています。

   理由:
   ・**6枚にすると青緑のベタは面積がほぼ倍**になる。
     実測したサイトでは差し色の面積は 0.00〜0.11画面分しかなく、そこから離れる
   ・青緑を「面」と「文字」の両方に使っていた。
     実測では、どのサイトも**面型か文字型のどちらかに決め切っている**
   → **青緑は線と「VIEW →」だけ**にした。面は白。

   組みは 3列×2行。5枚しか無いあいだは、最後の1枚を2つぶんに広げて端を埋める。
   ========================================================================== */
.symp{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media screen and (max-width:900px){.symp{grid-template-columns:repeat(2,1fr)}}
@media screen and (max-width:600px){.symp{grid-template-columns:1fr}}

/* 6つ目の症状ページができるまでは5枚。2行目は2枚のまま左に寄せる。
   一度ここで5枚目を2枠ぶんに広げてみたが、産後の骨盤だけ特別扱いする理由が無く、
   意図ではなく間違いに見えた（2026-09-22 に取りやめ）。
   6枚そろえば3列×2行がきれいに埋まる。 */

.symp > *{
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--teal);
  border-radius:4px;
  padding:26px 26px 24px;min-height:150px;
  text-decoration:none;display:flex;flex-direction:column;gap:6px;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.symp a:hover{background:var(--bg-sub);border-color:#b9cfdb;border-top-color:var(--teal-d)}
.symp b{font-size:17px;letter-spacing:.05em;line-height:1.5;color:var(--navy)}
/* 説明文は --ink-sub（5.21）より一段濃くする。
   白い面の上で 7.97 になり、明るい場所でも読みやすい。
   見た目の印象はほとんど変わらない（2026-09-22） */
.symp small{font-size:13px;color:#42535f;line-height:1.9;margin-top:2px}
/* 「詳しく →」。もとは英字の「VIEW →」だったので --font-en と広い字間だったが、
   和文になったので本文と同じ書体に戻し、字間も詰めた（2026-09-22） */
.symp .go{
  /* 節の終わりの「◯◯を詳しく」（.lnk--end）が右に寄っているので、
     カードの中の「詳しく →」も右に揃える（2026-09-22） */
  margin-top:auto;padding-top:22px;align-self:flex-end;
  font-family:var(--font-jp);font-size:13px;
  font-weight:700;letter-spacing:.06em;color:var(--teal-d);
}
/* まだページを作っていない症状。「詳しく →」のままだと押せると思わせてしまうので、
   文言も見た目も分けています。ページができたら <a> に変えて go--soon を外します */
.symp .go--soon{
  font-family:var(--font-jp);letter-spacing:.06em;color:var(--ink-sub);
}
.symp span{cursor:default}

/* 症状ページの「ほかの症状から探す」だけ小さくする */
.symp--sm > *{padding:22px 20px 20px;min-height:0}
.symp--sm b{font-size:16px;letter-spacing:.04em}
.symp--sm small{font-size:12px;line-height:1.8}


/* ==========================================================================
   全幅の写真帯 ── 面が続くと単調になるので、間に1枚だけ挟みます
   ========================================================================== */
.band{line-height:0;position:relative}
.band img{width:100%;height:clamp(190px,24vw,340px);object-fit:cover}
.band--tall img{height:clamp(250px,28vw,380px)}
/* 症状ページの先頭だけ。3:2の写真を帯で切ると上下が落ちて何の写真か分からなくなる */
.band--hero img{height:clamp(300px,36vw,480px)}
.band--inset{margin-block:clamp(40px,30px + 1.6vw,58px);border-radius:var(--r);overflow:hidden}


/* ==========================================================================
   院内のご案内
   ========================================================================== */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:2px;background:var(--line)}
.gal figure{margin:0;background:var(--bg);display:flex;flex-direction:column}
.gal img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gal figcaption{padding:13px 16px 15px;font-size:14px;color:var(--ink-sub);line-height:1.75}
.gal figcaption b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}


/* ==========================================================================
   診療時間・アクセス
   ========================================================================== */
/* 単院サイトの実測（みよし鍼灸整骨院 1425px）に合わせて縦積みに。
   地図 990x340 で横いっぱい、住所の表も横いっぱい・項目名の列は全体の33%。
   左右に割ると、地図が半分になり、住所側は右に大きな余白が残る */
.acc{display:block}
.tt{width:100%;border-collapse:collapse;font-size:14px}
.tt th,.tt td{border:1px solid var(--line);padding:13px 6px;text-align:center}
.tt thead th{background:var(--navy);color:#fff;font-weight:600;font-size:13px}
.tt tbody th{background:var(--bg-sub);font-weight:600;white-space:nowrap;font-size:13px}
.tt td{color:var(--teal);font-size:15px}
.acc-note{margin-top:12px;font-size:14px;color:var(--ink-sub);line-height:1.85}
.acc-dl{margin-top:0;display:grid;grid-template-columns:minmax(72px,max-content) 1fr;
  gap:0;font-size:15px;border-top:1px solid var(--line)}
.acc-dl dd{padding:17px 0 17px 32px;border-bottom:1px solid var(--line);margin:0;
  font-size:16px;line-height:1.8}
/* 項目名は太く、値は少し大きく。同じ太さ・同じ色だと、どこが項目か分からない */
.acc-dl dt{padding:17px 16px 17px 0;border-bottom:1px solid var(--line);
  color:var(--ink);font-size:15px;font-weight:700;white-space:nowrap}
.acc-dl dd{margin:0}
.acc-map{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;line-height:0}
.acc-map iframe{width:100%;height:clamp(260px,26vw,360px);border:0}
.acc-map{margin-bottom:clamp(26px,20px + 1.4vw,40px)}
/* もう1台の駐車場への道順（2026-10-20）。図は動かさない（実用の中身） */
.pk{margin-top:clamp(40px,30px + 2vw,64px)}
.pk-h{font-size:clamp(18px,16px + .5vw,21px);line-height:1.6;color:var(--navy);margin-bottom:18px}
.pk-figs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pk-figs figure{margin:0}
.pk-figs img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.pk-figs a{display:block;border-radius:var(--r)}
.pk-figs a:hover img{border-color:var(--teal)}
.pk-figs a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.pk-figs figcaption{margin-top:8px;font-size:14px;color:var(--ink-sub)}
.pk-steps{margin:22px 0 0;padding-left:1.6em;list-style:decimal;font-size:16px;line-height:1.9;color:var(--ink)}
.pk-steps li+li{margin-top:6px}
@media screen and (max-width:860px){.pk-figs{grid-template-columns:1fr}}
/* 2026-11-06 れおさんの直し：表を「公共交通機関」「駐車場」の見出しで分けた。
   表が分かれても項目名の列の幅がそろうように、最小の幅を決める（いちばん長い「もう1台」「お支払い」が入る幅） */
.acc-dl{grid-template-columns:minmax(5.4em,max-content) 1fr}
.acc-h{font-size:clamp(18px,16px + .5vw,21px);line-height:1.6;color:var(--navy);
  margin:clamp(32px,24px + 1.6vw,48px) 0 12px}
.acc .pk,.pk{margin-top:clamp(28px,22px + 1.2vw,40px)}
.pk-h{font-size:17px}
.acc-dl--end{margin-top:clamp(40px,30px + 2vw,64px)}


/* ==========================================================================
   施術の流れ
   ========================================================================== */
.flow{display:grid;gap:2px;background:var(--line)}
.flow li{background:var(--bg);display:grid;grid-template-columns:62px 1fr;gap:22px;padding:28px 30px;align-items:start}
.sec--sub .flow li{background:#fff}
.flow .no{
  font-family:var(--font-en);font-size:12px;font-weight:600;color:#fff;
  background:var(--navy);border-radius:var(--r);text-align:center;padding:5px 0;
  letter-spacing:.06em;
}
.flow b{display:block;font-size:17px;margin-bottom:6px}
.flow p{font-size:15px;color:var(--ink-sub);line-height:1.85;max-width:40em}


/* ==========================================================================
   院長
   ========================================================================== */
.dir{display:grid;grid-template-columns:minmax(0,330px) 1fr;gap:clamp(24px,3vw,52px);align-items:start}
.dir-img{border-radius:var(--r);overflow:hidden;line-height:0}
.dir-img img{width:100%;aspect-ratio:1/1;object-fit:cover}
/* 写真の準備中（2026-10-05）。撮影後に functions.php の REO_PHOTOS_READY を true にすると出なくなる */
.photo-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:3/2;padding:16px;background:var(--bg-sub);text-align:center;line-height:1.7}
.photo-soon-t{font-size:15px;color:var(--ink)}
.photo-soon-s{font-size:14px;color:var(--ink-sub)}
.dir-img .photo-soon{aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r)}
.dir h2{font-size:clamp(21px,17px + 1.1vw,29px);line-height:1.6;margin-bottom:16px}
.dir p{color:var(--ink);font-size:16px;line-height:2;margin-bottom:20px}
.dir-sign{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px}
.dir-sign .nm{font-size:17px;font-weight:700;letter-spacing:.06em}
.dir-sign .nm small{font-size:12px;color:var(--ink-sub);font-weight:500;margin-left:8px}
.dir-sign .tags{display:flex;gap:7px;flex-wrap:wrap}
.dir-sign .tag{font-size:12px;color:var(--teal);border:1px solid var(--teal);border-radius:var(--r);padding:3px 10px;letter-spacing:.04em}


/* ==========================================================================
   よくあるご質問
   ========================================================================== */
.faq{display:grid;gap:2px;background:var(--line)}
/* 箱の幅はほかの要素と揃えます。max-width を付けると、中央でも左端でもない
   中途半端な位置に見えるためです。読みやすさは中の文章側で担保します
   （日本語は1行40字前後を超えると読み疲れます） */
.faq details{background:var(--bg)}
.sec--sub .faq details{background:#fff}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 58px 24px 28px;position:relative;
  font-size:17px;font-weight:700;letter-spacing:.03em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:28px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 58px 26px 28px;font-size:16px;color:var(--ink-sub);line-height:1.95;max-width:56em}


/* ==========================================================================
   最後のCTA
   ========================================================================== */
/* 締めのCTA。
   2026-09-22 に一度まるごと白にしたが、**フッターも白なのでページの下が薄くなりすぎた**。
   ここはサイトで唯一「ご予約ください」と言う場所なので、面は紺に戻している。
   代わりに、読みづらかった受付時間の表だけ白いカードにした（下の .cta-info）。 */
.sec--end{background:var(--navy);color:#fff}
.cta{text-align:center}
.cta h2{font-size:clamp(21px,17px + 1.1vw,29px);color:#fff}
.cta p{margin-top:18px;color:rgba(255,255,255,.82);font-size:16px;font-weight:500;
  line-height:1.95;max-width:52em;margin-inline:auto}
.cta-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:36px}
/* 受付時間の表。
   一度これを真っ白なカードにしたが、**紺の上では白がいちばん強く、
   すぐ上の「ご予約ください」より目立ってしまった**（2026-09-22）。
   → 薄い白（7%）の面にして、囲いとしてだけ働かせる。文字は白のまま。
   ここは「ついでに確かめる情報」なので、CTAより前に出さない。 */
.cta-info{margin-top:clamp(38px,26px + 2vw,58px);
  background:rgba(255,255,255,.07);border-radius:4px;
  padding:clamp(24px,18px + 1vw,32px) clamp(18px,12px + 1vw,28px) clamp(20px,14px + 1vw,26px);
  max-width:600px;margin-inline:auto}
.cta-info .tt{max-width:520px;margin-inline:auto}
.cta-info p{margin-top:15px;font-size:15px;color:rgba(255,255,255,.82);line-height:1.9;
  max-width:38em;margin-inline:auto}
/* 受付時間の表。
   ★「●」と「−」は情報なので、青緑ではなく紺で出す。
   　 青緑は「押せる」印として使っているので、押せない表には持ち込まない。
   　 休診の「−」だけ一段引かせて、開いている日との差を出す。
   　 ただし薄くしすぎない。2026-09-22 に #98a6b0 で 2.50 まで落ちていた。 */
.tt td{color:var(--navy)}
.tt td.off{color:var(--ink-sub)}
/* 紺の面に乗せるとき */
.sec--navy .tt th,.sec--navy .tt td,
.sec--end .tt th,.sec--end .tt td{border-color:rgba(255,255,255,.34)}
.sec--navy .tt thead th,
.sec--end .tt thead th{background:rgba(255,255,255,.16);color:#fff}
.sec--navy .tt tbody th,
.sec--end .tt tbody th{background:transparent;color:#fff}
.sec--navy .tt td,
.sec--end .tt td{color:#fff;font-size:16px}
/* 休診の「−」。開いている日より一段引かせる。薄くしすぎない */
.sec--navy .tt td.off,
.sec--end .tt td.off{color:rgba(255,255,255,.62)}


/* ==========================================================================
   フッター
   ========================================================================== */
/* 2026-09-22 に紺から白へ。
   すぐ上の締めのCTAが紺なので、フッターまで紺だと面が続いて重くなる。
   ここは最後の案内なので、色を持たせずに引かせる。 */
.ft{background:#fff;color:var(--ink-sub);padding-block:40px 30px;font-size:15px;font-weight:500;
  border-top:1px solid var(--line)}
.ft-in{max-width:var(--content);margin-inline:auto;padding-inline:var(--pad);display:grid;grid-template-columns:1fr auto;gap:26px}
.ft b{color:var(--navy);font-size:17px;letter-spacing:.06em;display:block;margin-bottom:10px}
.ft-nav{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px}
.ft-nav a{text-decoration:none;color:var(--ink-sub)}
.ft-nav a:hover{color:var(--teal-d)}
.ft-cr{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-sub)}


/* ==========================================================================
   スマートフォンの固定バー
   　 狭い画面では、ヘッダーからボタンを外してこちらに集約します。
   　 追従ヘッダーに入れたままだと、上の帯が画面の2割を占めてしまうためです。
   ========================================================================== */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -2px 12px rgba(13,36,64,.12);
}
.mbar a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 8px;font-size:15px;font-weight:700;text-decoration:none;letter-spacing:.03em;
}
.mbar svg{width:18px;height:18px;flex:none}
.mbar--one{grid-template-columns:1fr}   /* 電話番号が決まるまで（LINEだけ） */
.mbar .a1{background:#fff;color:var(--navy);border-top:2.5px solid var(--line-green)}
.mbar .a1 svg{fill:var(--line-green)}
.mbar .a2{background:var(--navy);color:#fff}
.mbar .a2 svg{fill:#fff}


/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media screen and (max-width:1280px){
  .hdr-info{display:none}   /* 出しっぱなしだとボタンが押し出される */
}
/* 幅が足りなくなったらナビを2段目に落とし、横スクロールさせる。
   単に display:none にすると行き先を失うため、必ず残します。
   ヘッダーはどの幅でも追従させるので、2段でも高さが出すぎないよう詰めています */
@media screen and (max-width:900px){
  .hdr-in{flex-wrap:wrap;min-height:0;padding-block:9px 0;gap:8px}
  .hdr-btns{margin-left:auto}
  .nav{
    order:3;width:100%;margin:8px 0 0;padding:6px 0;gap:17px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    border-top:1px solid var(--line);
    /* スクロールバーを隠しているので、右端をぼかして「まだ続く」ことを示す。
       これが無いと 390px では「アクセス」が画面の外にあるまま気づかれない */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;font-size:14px;padding-block:2px}
}
@media screen and (max-width:520px){
  .logo b{font-size:16px}
  .logo small{display:none}
  .hdr .btn{padding:9px 13px;font-size:14px;gap:6px}
  .hdr .btn svg{width:16px;height:16px}
}
@media screen and (max-width:860px){
  .hero-in{grid-template-columns:1fr}
  .hero-txt{max-width:none;margin-left:0;order:2}
  .hero-img{order:1;min-height:clamp(240px,52vw,340px)}
  .acc,.dir{grid-template-columns:1fr}
  .dir-img{max-width:280px}
  .ft-in{grid-template-columns:1fr}
}
@media screen and (max-width:640px){
  /* 右の58pxは開閉の矢印を避けるためのもの。スマホでは字数を20字まで削るので詰める */
  .faq summary{padding-right:44px}
  .faq .a{padding:0 22px 22px 22px}

  /* 狭い画面では、ラベルと×を1行目に、文章を2行目に回します。
     横並びのままだと文章の幅が178pxしか残らず、4行に割れて読みにくくなるためです */
  .tbar{font-size:14px}
  .tbar-in{flex-wrap:wrap;align-items:center;gap:9px 10px;padding-block:12px}
  .tbar-lb{order:1}
  .tbar-x{order:2;margin-left:auto}
  .tbar p{order:3;flex:1 1 100%}
  body{font-size:16px;padding-bottom:64px}
  .hdr-btns{display:none}          /* 下の固定バーに集約する */
  .hdr-in{padding-block:12px 0}
  /* 境界線まで消したいので、高さのぶんより 2px 多く上げる */
  .hdr.is-off{transform:translateY(calc(-100% - 2px))}
  .mbar{display:grid}
  .news-in{flex-direction:column;align-items:flex-start;gap:10px}
  .news-list li{flex-direction:column;gap:0}
  .news-list .t{white-space:normal}
  .flow li{grid-template-columns:48px 1fr;gap:14px}
}


/* ==========================================================================
   動き ── 見出しがゆっくり上がるだけ。多用しません
   ========================================================================== */
/* 隠すのは .rv が付いたときだけ。JSが動かなければ中身はそのまま見えます。
   opacity:0 のまま取り残されると、何も表示されない画面になるためです */
.rv [data-rv]{opacity:0;transform:translateY(14px);transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
.rv [data-rv].on{opacity:1;transform:none}

/* ページを開いたときの切り替え ──────────────────────────────────────────
   白い幕が一度かかって消えます。
   料金・アクセス・症状などの下層ページは見た目が似ているため、
   ページが変わったことが分かるようにしています。

   JSは使いません。ふだんの状態を「見えない」にしてあるので、
   動きが無効でも幕が残って画面をふさぐことはありません。
   幕は .mbar（スマホの固定バー）より上に出すので z-index は 200 */
body::after{
  content:"";
  position:fixed;inset:0;z-index:200;
  background:#fff;
  pointer-events:none;
  opacity:0;visibility:hidden;
  animation:page-veil 800ms var(--ease)
}
@keyframes page-veil{
  from{opacity:1;visibility:visible}
  to{opacity:0;visibility:visible}
}
@media (prefers-reduced-motion:reduce){
  .rv [data-rv]{opacity:1;transform:none;transition:none}
  *{animation:none!important}
  .hdr{transition:none}          /* 動きは消す。出す・隠す自体はそのまま */
}
@media print{
  .hdr,.mbar,.hero-img,.tbar{display:none}
  body::after{display:none}
  body{font-size:12px}
}


/* ==========================================================================
   ここから下は 症状ページ（下層ページ）で使う部品です。
   トップページでは使いません。
   ========================================================================== */

/* ---- ページ見出し（紺の面） ---- */
.phero{background:var(--navy);color:#fff;padding-block:clamp(44px,32px + 3vw,76px)}
/* 症状ページは読む量が多いので、セクションの上下をトップページより少し詰めます */
.sub .sec{padding-block:clamp(60px,42px + 3.6vw,100px)}
.sub .hd,.sub .split-head{margin-bottom:clamp(26px,20px + 1.6vw,42px)}
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:rgba(255,255,255,.6);margin-bottom:26px}
.crumb a{text-decoration:none;color:rgba(255,255,255,.82)}
.crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.phero .label{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;
  color:var(--teal-br);border:1px solid rgba(40,169,203,.5);border-radius:var(--r);
  padding:4px 12px;margin-bottom:20px;
}
.phero h1{font-size:clamp(25px,19px + 2vw,40px);line-height:1.5;letter-spacing:.05em}
.phero-lead{margin-top:22px;color:rgba(255,255,255,.82);font-size:16px;line-height:1.95;max-width:44em;font-weight:500}

/* ---- チェックリスト ---- */
.worry{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:2px;background:var(--line)}
@media screen and (min-width:700px){.worry{grid-template-columns:repeat(3,1fr)}}
/* 白い節の上では、セルに薄い面を敷かないと2pxの罫だけになって分かれて見えない */
.worry li{
  background:var(--bg-sub);display:flex;gap:11px;align-items:flex-start;
  padding:16px 16px;font-size:15px;line-height:1.75;
}
.sec--sub .worry li,.sec--sub .notes li{background:#fff}
.worry .chk{
  flex:none;width:19px;height:19px;border-radius:var(--r);background:var(--teal);
  display:grid;place-items:center;margin-top:3px;
}
.worry .chk svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---- 原因 ---- */
.cause{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px;background:var(--line)}
/* 広い画面で4列に割れると1行15字になる。短すぎる行も読みにくいので2列で止める */
@media screen and (min-width:820px){.cause{grid-template-columns:1fr 1fr}}
.cause-item{background:var(--bg);padding:20px 18px 22px}
.sec--sub .cause-item{background:#fff}
.cause-item h3{font-size:17px;margin-bottom:8px;line-height:1.5}
.cause-item p{font-size:15px;color:var(--ink-sub);line-height:1.85;max-width:40em}

/* ---- 病院へ、の注意（紺の面の中） ---- */
/* 危険信号。紺のままにする（面が全部白いとサイトが薄くなるため）。
   ただし暗い面の上では、白い細字はにじんで細く見える。
   400 → 500、14.5 → 15.5px、行間 1.85 → 1.95 に上げて読めるようにしてある。
   ★ この数値を下げない。下げると読みづらくなる（2回指摘を受けた箇所） */
/* ==========================================================================
   泣き別れ対策
   ========================================================================== */
/* 節のリード文は1〜3行で終わるので、行を均す。
   「〜いただきます。」の「す。」だけが次の行に落ちるのを防ぐ。
   日本語は単語の区切りが無いので text-wrap:pretty はほとんど効かない
   （実測 600px幅: 現状 39字/2字 → pretty 38字/3字 → balance 21字/20字）。
   5行を超える本文ではブラウザ側が自動で無視するので、当てておいて害はない */
/* 文の途中で割れるのを防ぐ。日本語はどこでも改行できてしまうので、
   「ご案内しま／す。」のような割れ方をする。文ごとに塊にすると、その間でしか割れない。
   ★ 長い文に使うと、入りきらず横に溢れる。2〜3文の短い注記だけに使う */
.nb{display:inline-block}
/* 2文字の熟語が行をまたぐのを止める。文章は変えずに、その語だけ折らない */
.w{white-space:nowrap}

.hd p, .split-head p, .subhd p,
.phero-lead, .hero-lead, .lead,
.cta p, .cta-info p, .danger-lead, .danger-note, .danger li,
.doing p, .cause-item p, .flow p, .worry li, .vs-col li, .vs-note p,
.notes li > span, .faq .a, .post-list p, .post p,
.acc-note, .price-note, .price-lead .brk, .pnote li,
.gal figcaption, .symp small, .news-list .t{
  text-wrap:balance;
}


/* ==========================================================================
   お知らせ（一覧と記事）
   ========================================================================== */
.post-list{display:grid;gap:14px}
.post-list a{
  display:block;background:var(--bg-sub);border-radius:var(--r);padding:26px 24px 28px;
  transition:background var(--dur) var(--ease);
;text-decoration:none}
.post-list a:hover{background:var(--line-soft)}
.post-list time{
  font-family:var(--font-en);font-size:13px;font-weight:600;
  letter-spacing:.06em;color:var(--ink-sub);
}
.post-list .cat{
  margin-left:14px;font-size:12px;font-weight:600;letter-spacing:.08em;
  color:var(--teal-d);border:1px solid var(--line);border-radius:var(--r);padding:3px 9px;
}
.post-list b{display:block;margin-top:13px;font-size:17px;line-height:1.6;color:var(--ink);max-width:40em}
.post-list p{margin-top:9px;font-size:15px;color:var(--ink-sub);line-height:1.9;max-width:52em}

/* 記事の本文。院長が管理画面で書いたものがそのまま入ります。
   ★ ここの h2 だけ 20px です。節の見出し（29px）ではなく、
   　 記事の中の小見出しなので、小見出しの段に合わせています */
.post{max-width:52em}
.post p{font-size:16px;line-height:1.95;color:var(--ink)}
.post p + p{margin-top:22px}
.post h2{
  font-size:20px;line-height:1.6;letter-spacing:.02em;
  margin-top:clamp(40px,30px + 1.6vw,58px);margin-bottom:15px;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.back{margin-top:clamp(40px,30px + 1.6vw,56px)}

.danger{margin-top:clamp(46px,32px + 2.4vw,72px);background:var(--navy);color:#fff;
  border-radius:var(--r);padding:clamp(28px,22px + 1.5vw,42px)}
.danger h3{font-size:20px;line-height:1.6;letter-spacing:.03em;color:#fff}
.danger-lead{margin-top:13px;font-size:16px;font-weight:500;line-height:1.95;
  color:rgba(255,255,255,.82);max-width:52em}
.danger ul{display:grid;gap:13px;margin-top:28px}
.danger li{position:relative;padding-left:26px;font-size:16px;font-weight:500;
  line-height:1.95;color:#fff;max-width:52em}
.danger li::before{
  content:"";position:absolute;left:0;top:.7em;width:9px;height:9px;
  border-radius:50%;border:2px solid var(--teal-br);
}
.danger-note{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2);
  font-size:15px;font-weight:500;line-height:2;color:rgba(255,255,255,.82);max-width:52em}

/* 節の中の小見出し。見出しの本数を増やさずに話題を切り替えるためのもの */
.subhd{margin-top:clamp(46px,32px + 2.4vw,72px);margin-bottom:clamp(20px,16px + 1.1vw,30px)}
.subhd h3{font-size:20px;line-height:1.6;letter-spacing:.02em}
.subhd p{margin-top:11px;font-size:15px;color:var(--ink-sub);line-height:1.9;max-width:40em}

/* ---- 整形外科との違い ---- */
.vs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px;background:var(--line)}
.vs-col{background:var(--bg);padding:20px 18px 22px}
.sec--sub .vs-col,.sec--sub .vs-note{background:#fff}
.vs-col h4{font-size:17px;margin-bottom:13px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.vs-col--ours{background:var(--bg-sub)}
.sec--sub .vs-col--ours{background:#eaf3f7}
.vs-col--ours h3{color:var(--teal)}
.vs-col ul{display:grid;gap:9px}
.vs-col li{position:relative;padding-left:19px;font-size:15px;line-height:1.8;color:var(--ink)}
.vs-col li::before{content:"";position:absolute;left:2px;top:.78em;width:7px;height:7px;border-radius:50%;background:var(--line-soft);border:1.5px solid var(--ink-faint)}
.vs-col--ours li::before{background:var(--teal);border-color:var(--teal)}
/* 白文字の長い段落は読みづらいので、紺は上の罫だけにする。
   紺の面は「危険信号」と締めCTAの2つに絞っている */
.vs-note{margin-top:2px;background:var(--bg);border-top:2px solid var(--navy);padding:24px 22px 26px}
.vs-note b{display:block;font-size:17px;margin-bottom:12px;color:var(--navy)}
.vs-note p{font-size:16px;line-height:1.95;color:var(--ink-sub);max-width:52em}
.vs-note p + p{margin-top:14px}

/* ---- 当院にできること ---- */
.notes ul{display:grid;gap:2px;background:var(--line)}
.notes li{background:var(--bg-sub);padding:20px 22px}
.notes li > span{display:block;font-size:16px;color:var(--ink);line-height:1.95;max-width:52em}
.notes li b{color:var(--ink)}
.lnk{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-size:15px;
  color:var(--teal-d);border-bottom:1px solid var(--line);padding-bottom:5px;transition:border-color var(--dur) var(--ease);text-decoration:none}
.lnk::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
.lnk:hover{border-bottom-color:var(--teal-d)}
/* 節の終わりに置く「詳しく」。本文の左端にぶら下がると浮いて見えるので右下に寄せる */
.lnk--end{display:flex;width:fit-content;margin-left:auto;margin-top:clamp(30px,22px + 1.4vw,44px)}

.doing{display:grid;gap:14px;margin-top:30px}
/* 1列のままだと1行70字になる。日本語は35〜45字が範囲なので、広い画面は2列にする */
@media screen and (min-width:820px){.doing{grid-template-columns:1fr 1fr;gap:16px}}
/* 面で分ける案 */
.doing li{background:var(--bg-sub);border-radius:var(--r);padding:28px 26px 30px}
.sec--sub .doing li{background:#fff}
/* 番号 → 見出し → 説明 の3段で高低差を作る。全部同じ大きさだと平坦になる */
.doing .n{display:block;font-family:var(--font-en);font-size:12px;font-weight:600;
  letter-spacing:.16em;color:var(--teal-d);margin-bottom:13px}
.doing b{display:block;color:var(--ink);font-size:17px;line-height:1.55;margin-bottom:10px}
.doing p{font-size:15px;color:var(--ink-sub);line-height:1.9;max-width:34em}

/* ---- 読み終えた直後の予約導線 ---- */
.cta-inline{
  margin-top:34px;background:var(--bg-sub);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;
}
.sec--sub .cta-inline{background:#fff}
.cta-inline p{flex:1 1 260px;font-size:15px;line-height:1.85;max-width:40em}
/* .lnk は本文のあとに置く前提で margin-top を持っている。横並びの中では要らない */
.cta-inline .lnk{margin-top:0}

/* ---- 症状ページの料金表 ---- */
.ptable{width:100%;border-collapse:collapse;font-size:15px}
.ptable th,.ptable td{border-bottom:1px solid var(--line);padding:15px 4px;text-align:left}
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:0}
.ptable th{font-weight:500;color:var(--ink)}
.ptable th small{display:block;font-size:12px;color:var(--ink-sub)}
.ptable td{text-align:right;font-family:var(--font-en);font-weight:600;font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ptable td span{font-family:var(--font-jp);font-size:13px;font-weight:500;margin-left:2px}
.pnote{margin-top:20px;display:grid;gap:9px}
.pnote li{position:relative;padding-left:18px;font-size:14px;color:var(--ink-sub);line-height:1.85}
.pnote li::before{content:"";position:absolute;left:2px;top:.82em;width:5px;height:5px;border-radius:50%;background:var(--teal)}

/* ---- 見出しブロック ----
   トップページと同じ「見出しを上に置く」組みにそろえています。
   下層だけ左右2カラムにすると、同じサイトに見えなくなるためです */
.split{display:block}
.split-head{margin-bottom:clamp(30px,22px + 1.8vw,50px)}
.split-head h2{font-size:clamp(21px,17px + 1.1vw,29px);line-height:1.6}
.split-head p{margin-top:15px;font-size:15px;color:var(--ink-sub);line-height:1.9;max-width:40em}
.sec--navy .split-head p{color:rgba(255,255,255,.82)}
.split--next{margin-top:clamp(52px,36px + 2.8vw,84px)}

/* いま見ている症状のタイル。
   一度これを紺にしたが、**押せないカードがいちばん目立つ**という逆の形になった
   （2026-09-22 に薄い水色へ変更）。
   目を引かせたいのは「まだ見ていない5枚」のほうなので、現在地は一段引かせる。
   上端の線と「表示中」の青緑もやめる。青緑＝押せる印にしておきたいため。 */
.symp-now{
  background:var(--line-soft)!important;
  border-color:var(--line);
  border-top-color:#b9cfdb;
}
.symp-now b{color:var(--navy)}
.symp-now small{color:var(--ink-sub)}
.symp-now .go{color:var(--ink-sub)}

/* ==========================================================================
   指で押せる大きさ（44px）を確保する ── 2026-09-21
   ==========================================================================
   読む人に、腰や肩の痛い方・指がうまく動かない方が含まれます。
   「×を押したいのに消えない」「別のページに飛んだ」は、それだけで離れる理由になります。

   ★ 文字の大きさも、見た目の余白も変えません。当たり判定だけ広げます。
   ::after を重ねる方法なので、並びがずれることはありません。

   ★ 広げる量は「隣との間隔の半分まで」。
      それ以上広げると、隣の当たり判定と重なって押し間違いが増えます。

   375px で実測した値（2026-09-21）:
     ヘッダーのナビ 33px・隣とは17px  →  上下6px広げて45px（横は8px＝17pxの半分弱）
     ロゴ           30px・下とは16px  →  上下7px広げて44px
     休診バーの×    24×28px          →  上下左右10px広げて44×48px
     「◯◯を詳しく」 35px・下とは34px  →  上下5px広げて45px
   -------------------------------------------------------------------------- */
.hdr nav a,
.logo,
.tbar-x,
.lnk--end{position:relative}

.hdr nav a::after,
.logo::after,
.tbar-x::after{content:"";position:absolute}

.hdr nav a::after{inset:-6px -8px}
.logo::after{inset:-7px 0}
.tbar-x::after{inset:-10px}

/* ★ .lnk--end だけは ::before を使う。
   .lnk::after が「›」の矢印を描いているので、::after を当てると矢印が消える。
   2026-09-22 に実際これで矢印が本文の上に飛んだ。
   当たり判定を足すときは、相手に ::after / ::before が無いか先に確かめること */
.lnk--end::before{content:"";position:absolute;inset:-5px 0}

/* フッターのナビと NEWS は、行の間隔が8〜10pxしかなく、
   重ねる方法では隣と衝突します。ここだけは余白そのものを足して、
   行の間隔も広げます（狭い画面のときだけ）。 */
@media screen and (max-width:860px){
  /* 横の間隔は 4px + 左右8px の余白 = 見た目は元の20pxのまま。
     「料金」「院内」のような2文字のリンクも、当たり判定が44pxになります */
  .ft-nav{gap:20px 4px}
  .ft-nav a{display:inline-block;padding:9px 8px}
  .news-lb{padding-block:11px;margin-block:-11px}
}