@charset "UTF-8";
/*
Theme Name: Suusan
Theme URI: https://suusanosteopathy.com/
Author: 大樹AI（スティル）
Description: すーさん夫婦の龍ケ崎整体院の専用テーマ。青・白・赤（フランス）。見本Gを土台にHEALと入れ替えるために作った。ページのURLは一切変えない。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: 私用
Text Domain: suusan
*/

/* ═══════════════════════════════════════════════════════════
   ⚠️このテーマを触る人へ
   ・色は :root の変数だけを直す。個々の箇所に色を書かない。
   ・本文（固定ページ・記事）はWordPressの管理画面で編集する。
     テンプレートに文章を埋め込まない（大樹さんが直せなくなるため）。
   ・記事は blog_agent.py が REST API で投稿する。テーマは関係しない。
   ═══════════════════════════════════════════════════════════ */


  /* 🔴Chromeの「文字の自動拡大」を止める（2026-09-16に実測して発見）
     既定の text-size-adjust: auto だと、スマホでブラウザがブロックごとに文字を勝手に拡大する。
     実測：h3に 1.06rem（16.96px）と指定したのに **20px** で表示されていた。
            h2は 21.12px 指定が 22px。指定と実際がずれ、大きさがばらついて見えていた。
     100% にすると、指定した大きさがそのまま出る。 */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  :root {
    --ground:  #FFFFFF;
    --pale:    #F2F6FB;
    --ink:     #121B2B;
    --ink-2:   #3A4A63;
    --ink-3:   #6B7A90;
    --faint:   #A3AFC0;
    --hair:    #DCE2EC;
    --hair-2:  #BFC9D8;
    --ai:      #1B3F7A;
    --ai-pale: #E7EDF7;

    --min: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --got: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  
  --aka:#B4544B;        /* 差し色の赤。強くしない */
  --aka-pale:#FBEFEE;   /* 赤の面。ほぼ白に近い霧の赤 */
  --aka-hair:#EBD6D3;
}

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground:  #0C111A;
      --pale:    #121826;
      --ink:     #E6EBF3;
      --ink-2:   #B2BECE;
      --ink-3:   #8A97A8;
      --faint:   #616E80;
      --hair:    #1E2635;
      --hair-2:  #333E50;
      --ai:      #8FB0E0;
      --ai-pale: #16203010;
    
  --aka:#D98C84;
  --aka-pale:#25171610;
  --aka-hair:#3A2724;
}
  }

  :root[data-theme="dark"] {
    --ground:  #0C111A;
    --pale:    #121826;
    --ink:     #E6EBF3;
    --ink-2:   #B2BECE;
    --ink-3:   #8A97A8;
    --faint:   #616E80;
    --hair:    #1E2635;
    --hair-2:  #333E50;
    --ai:      #8FB0E0;
    --ai-pale: #16203010;
  
  --aka:#D98C84;
  --aka-pale:#25171610;
  --aka-hair:#3A2724;
}

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--got);
    font-weight: 400;
    font-size: 16.5px;
    line-height: 2.15;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  .wrap { max-width: 940px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
  .mid { max-width: 640px; margin-inline: auto; }

  .ribbon {
    font-size: 11.5px; letter-spacing: 0.18em; text-align: center;
    padding: 11px 16px; color: var(--faint); font-weight: 300;
  }

  /* ---------- 頭 ---------- */

  header.site { border-block: 1px solid var(--hair); background: var(--pale); }

  header.site .bar {
    max-width: 940px; margin: 0 auto;
    padding: 18px clamp(20px, 5vw, 56px);
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
  }

  .brand { font-family: var(--min); font-weight: 600; font-size: 1rem; letter-spacing: 0.16em; }
  .brand small { display: block; font-family: var(--got); font-weight: 300; font-size: 9.5px; letter-spacing: 0.34em; color: var(--faint); margin-top: 6px; }

  nav.top { display: flex; gap: clamp(14px, 2.4vw, 24px); font-size: 12.5px; letter-spacing: 0.1em; flex-wrap: wrap; font-weight: 300; }
  nav.top a { color: var(--ink-2); text-decoration: none; transition: color .3s; }
  nav.top a:hover { color: var(--ai); }
  nav.top a:focus-visible { outline: 2px solid var(--ai); outline-offset: 4px; }

  /* ---------- 主景：全面写真＋中央の一文 ---------- */

  .kv { position: relative; }

  .kv .photo {
    aspect-ratio: 21 / 10;
    min-height: 420px;
    background: var(--pale);
    border-bottom: 1px solid var(--hair);
    display: flex; align-items: center; justify-content: center;
    color: var(--faint); font-size: 12px; letter-spacing: 0.16em;
    text-align: center; line-height: 2.2; font-weight: 300;
  }

  @media (max-width: 700px) { .kv .photo { aspect-ratio: 4 / 5; min-height: 340px; } }

  .kv-words { text-align: center; padding: clamp(52px, 8vw, 96px) 0 clamp(48px, 7vw, 88px); }

  .thread { width: 1px; height: clamp(40px, 7vw, 76px); background: var(--hair-2); margin: 0 auto clamp(28px, 4vw, 44px); }

  h1 {
    font-family: var(--min);
    font-weight: 600;
    font-size: clamp(1.6rem, 4.4vw, 2.6rem);
    line-height: 2;
    letter-spacing: 0.14em;
    margin: 0 0 clamp(24px, 3.6vw, 38px);
    text-wrap: balance;
  }

  h1 .ai { color: var(--ai); }

  .kv-words p {
    font-size: 0.97rem; color: var(--ink-2); font-weight: 300;
    max-width: 30em; margin: 0 auto; letter-spacing: 0.04em;
  }

  /* ================= 追従の予約バー ================= */
  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--hair-2); background: color-mix(in srgb, var(--pale) 94%, transparent); backdrop-filter: blur(12px);
    transform: translateY(101%); transition: transform .45s cubic-bezier(.2,.7,.3,1);
  }
  .dock.up { transform: none; }
  .dock a {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 16px 10px; text-decoration: none;
    font-family: var(--min); font-size: .98rem; font-weight: 600; letter-spacing: .1em; color: var(--ink);
  }
  .dock a + a { border-left: 1px solid var(--hair); }
  .dock a.main { background: var(--ai); color: var(--pale); }
  .dock a small { font-family: var(--got); font-size: 10.5px; font-weight: 400; letter-spacing: .06em; opacity: .88; }
  .dock a:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
  /* 🔴375px幅で「電話で予約」と番号が横に並びきらず、2行に折れていた（2026-09-17に実測）。
     左の枠だけ縦積みにする。番号は下に小さく置く。 */
  .dock a:first-child { flex-direction: column; gap: 2px; line-height: 1.35; }
  .dock a:first-child small { letter-spacing: .04em; }
  @media (min-width: 821px) { .dock { display: none; } }
  @media (max-width: 820px) { footer.site { padding-bottom: 96px; } }

  /* ================= 初回の流れ ================= */
  .nagare { display: flex; flex-direction: column; }
  .stepr {
    display: grid; grid-template-columns: 78px 1fr auto; gap: clamp(16px, 3vw, 32px);
    align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--hair);
  }
  .stepr:first-child { border-top: 1px solid var(--hair-2); }
  .stepr .st { font-family: var(--min); font-size: 13px; letter-spacing: .2em; color: var(--ai); }
  .stepr h3 { font-family: var(--min); font-size: 1.05rem; font-weight: 600; letter-spacing: .05em; line-height: 1.85; margin: 0 0 7px; }
  .stepr p { font-size: .92rem; color: var(--ink-2); margin: 0; line-height: 2.05; }
  .stepr .min { font-family: var(--min); font-size: .92rem; color: var(--ink-3); white-space: nowrap; }
  @media (max-width: 640px) { .stepr { grid-template-columns: 1fr; gap: 8px; } .stepr .min { order: -1; } }

  /* ================= こんなお悩みに ================= */
  .nayami { display: flex; flex-wrap: wrap; gap: 10px; }
  .nayami span { border: 1px solid var(--hair-2); padding: 10px 22px; font-size: .94rem; color: var(--ink-2); letter-spacing: .04em; }
  .nayami-note { margin-top: 26px; font-size: .93rem; color: var(--ink-2); }

  /* ================= よくある質問 ================= */
  .qa { border-top: 1px solid var(--hair-2); }
  .qa details { border-bottom: 1px solid var(--hair); }
  .qa summary {
    list-style: none; cursor: pointer; padding: 24px 40px 24px 0; position: relative;
    font-family: var(--min); font-size: 1.02rem; font-weight: 600; letter-spacing: .05em; line-height: 1.85;
  }
  .qa summary::-webkit-details-marker { display: none; }
  .qa summary::after {
    content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
    border-right: 1px solid var(--ai); border-bottom: 1px solid var(--ai);
    transform: translateY(-70%) rotate(45deg); transition: transform .3s;
  }
  .qa details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
  .qa summary:focus-visible { outline: 2px solid var(--ai); outline-offset: 3px; }
  .qa .ans { padding: 0 0 26px; font-size: .93rem; color: var(--ink-2); line-height: 2.1; margin: 0; }

  /* ---------- 節 ---------- */

  section { padding: clamp(66px, 10vw, 124px) 0; }
  section.pale { background: var(--pale); border-block: 1px solid var(--hair); }

  .head { text-align: center; margin-bottom: clamp(38px, 5.6vw, 66px); }

  .head .en {
    font-size: 10px; letter-spacing: 0.44em; color: var(--ai);
    display: block; margin-bottom: 16px; font-weight: 400;
  }

  h2 {
    font-family: var(--min); font-weight: 600;
    font-size: clamp(1.25rem, 3.2vw, 1.6rem);
    letter-spacing: 0.16em; line-height: 1.95; margin: 0;
    text-wrap: balance;
  }

  .head .rule { width: 34px; height: 1px; background: var(--hair-2); margin: 22px auto 0; }

  p { margin: 0 0 22px; }
  p:last-child { margin-bottom: 0; }
  strong { font-weight: 500; color: var(--ink); }

  /* ---------- 柱：極細の罫だけで区切る ---------- */

  .pillars { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4.6vw, 56px) clamp(38px, 5.6vw, 70px); }
  @media (max-width: 700px) { .pillars { grid-template-columns: 1fr; } }

  .pillar { padding-top: 24px; border-top: 1px solid var(--hair-2); }

  .pillar h3 {
    font-family: var(--min); font-weight: 600;
    font-size: 1.06rem; letter-spacing: 0.08em; line-height: 1.95;
    margin: 0 0 12px;
  }

  .pillar p { font-size: 0.93rem; color: var(--ink-2); font-weight: 300; margin: 0; line-height: 2.1; }

  /* ---------- 品目 ---------- */

  .menu { border-top: 1px solid var(--hair-2); }

  .row {
    display: grid; grid-template-columns: 1fr auto; gap: 10px 28px;
    align-items: baseline; padding: 26px 0;
    border-bottom: 1px solid var(--hair);
  }

  .row .nm { font-family: var(--min); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.08em; }
  .row .nm span { display: block; font-family: var(--got); font-weight: 300; font-size: 0.84rem; color: var(--ink-3); margin-top: 7px; letter-spacing: 0.03em; }
  .row .yen { font-family: var(--min); font-size: clamp(1.2rem, 2.8vw, 1.45rem); font-weight: 500; white-space: nowrap; color: var(--ai); }

  .fine {
    margin-top: 30px; padding: 22px 26px;
    background: var(--ai-pale); font-size: 0.9rem; font-weight: 300;
    color: var(--ink-2); line-height: 2.1;
  }

  .fine p { margin: 0; }

  /* ---------- 施術者 ---------- */

  .two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5.4vw, 68px); }
  @media (max-width: 700px) { .two { grid-template-columns: 1fr; } }

  .who { text-align: center; }
  .who .photo { aspect-ratio: 1 / 1; border-radius: 50%; max-width: 220px; margin: 0 auto; }
  .who h3 { font-family: var(--min); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.2em; margin: 26px 0 8px; }
  .who .cert { font-size: 10.5px; letter-spacing: 0.2em; color: var(--ai); margin: 0 0 20px; }
  .who p { font-size: 0.92rem; color: var(--ink-2); font-weight: 300; margin: 0; text-align: left; line-height: 2.1; }

  .photo {
    background: var(--ground);
    border: 1px solid var(--hair);
    display: flex; align-items: center; justify-content: center;
    color: var(--faint); font-size: 11.5px; letter-spacing: 0.14em;
    text-align: center; line-height: 2; font-weight: 300;
  }

  section.pale .photo { background: var(--pale); }

  /* ---------- 記事 ---------- */

  .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.6vw, 42px); }
  @media (max-width: 760px) { .posts { grid-template-columns: 1fr; gap: 32px; } }

  a.post { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 14px; }
  a.post .photo { aspect-ratio: 4 / 3; transition: opacity .4s; }
  a.post:hover .photo { opacity: .72; }
  a.post:focus-visible { outline: 2px solid var(--ai); outline-offset: 6px; }

  .post .meta { font-size: 10.5px; letter-spacing: 0.18em; color: var(--faint); display: flex; gap: 14px; }
  .post .meta em { font-style: normal; color: var(--ai); }
  .post h3 { font-family: var(--min); font-size: 0.99rem; font-weight: 600; letter-spacing: 0.05em; line-height: 1.95; margin: 0; }
  .post p { font-size: 0.86rem; color: var(--ink-3); font-weight: 300; margin: 0; line-height: 2; }

  /* ---------- 案内 ---------- */

  .info { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
  @media (max-width: 760px) { .info { grid-template-columns: 1fr; } }

  .info .photo { aspect-ratio: 1 / 1; }

  dl.dl { margin: 0; }
  dl.dl dt { font-size: 10px; letter-spacing: 0.26em; color: var(--faint); margin-bottom: 8px; }
  dl.dl dd { margin: 0 0 28px; font-size: 0.95rem; font-weight: 300; line-height: 2; }
  dl.dl dd:last-child { margin-bottom: 0; }
  dl.dl .tel { font-family: var(--min); font-size: clamp(1.5rem, 3.6vw, 1.85rem); font-weight: 500; letter-spacing: 0.08em; color: var(--ai); display: block; margin-bottom: 6px; }

  /* ---------- 締め ---------- */

  .fin { text-align: center; padding: clamp(80px, 12vw, 150px) 0; border-top: 1px solid var(--hair); }
  .fin p { color: var(--ink-2); font-weight: 300; max-width: 28em; margin: 0 auto 40px; font-size: 0.95rem; }

  .acts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

  a.btn {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 18px 44px;
    font-family: var(--min); font-size: 1rem; font-weight: 500; letter-spacing: 0.18em;
    text-decoration: none; border: 1px solid var(--ai); color: var(--ai);
    background: transparent; position: relative; overflow: hidden; transition: color .4s;
  }

  a.btn::before {
    content: ""; position: absolute; inset: 0; background: var(--ai);
    transform: translateY(101%); transition: transform .45s cubic-bezier(.2,.7,.3,1);
  }
  a.btn:hover::before { transform: translateY(0); }
  a.btn > * { position: relative; }
  a.btn:hover { color: var(--pale); }
  a.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  a.btn small { font-family: var(--got); font-size: 10.5px; font-weight: 300; letter-spacing: 0.1em; opacity: .9; }

  a.btn.plain { border-color: var(--hair-2); color: var(--ink-2); }
  a.btn.plain::before { background: var(--ink); }
  a.btn.plain:hover { color: var(--ground); }

  /* ---------- 脚 ---------- */

  footer.site {
    background: var(--pale); border-top: 1px solid var(--hair);
    padding: 54px 0 64px; font-size: 12.5px; line-height: 2.2;
    color: var(--ink-3); font-weight: 300; text-align: center;
  }

  footer.site .men { font-size: 11px; color: var(--faint); margin: 24px auto 0; max-width: 44em; line-height: 2.05; }

  /* ---------- 動き ---------- */

  .rise { opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.3,1); }
  .rise.on { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .rise { opacity: 1; transform: none; transition: none; }
    a.btn, a.btn::before, a.post .photo, nav.top a { transition: none; }
  }

/* ── 2026-09-16：青・白・赤（フランス）。白が地、青が芯、赤は「ここを見て」の印だけ ──
   ⚠️前の版は存在しないクラス名に当てていて、赤がほぼ出ていなかった。
     実在するクラスだけに当て直した（.en / .rule / .st / a.btn / .pillar / .brand small）。*/

/* ① 各セクションの英字ラベル（ABOUT, MENU …）＝9箇所。入口で必ず目に入る */
.head .en, .en { color: var(--aka); letter-spacing: 0.46em; }

/* ② 見出し下の短い線。青から赤へ流す（34px→48pxに伸ばして見えるように） */
.head .rule, .rule {
  width: 48px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--ai) 0 24px, var(--aka) 24px 48px);
}

/* ③ 手順の番号 01〜05 */
.stepr .st { color: var(--aka); font-weight: 600; }

/* ④ 電話ボタン＝このページで一番押してほしい場所。赤で囲い、hoverで赤に沈む */
a.btn { border-color: var(--aka); color: var(--aka); }
a.btn::before { background: var(--aka); }
a.btn.plain { border-color: var(--hair-2); color: var(--ink-2); }
a.btn.plain::before { background: var(--ink); }

/* ⑤ 考え方の4枠。上の罫の左端だけ赤くして、頭を揃える */
.pillar { position: relative; }
.pillar::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 28px; height: 2px; background: var(--aka);
}

/* ⑥ ロゴ脇のローマ字 */
.brand small { color: var(--aka); }

/* ═══════════════════════════════════════════════════════════
   ここからWordPress用に足した分（見本Gには無かったもの）
   2026-09-16
   ═══════════════════════════════════════════════════════════ */

/* ---------- 記事本文 ---------- */

.entry {
  max-width: 760px; margin: 0 auto;
  font-size: 1rem; line-height: 2.05; color: var(--ink-2); font-weight: 300;
}
.entry > * { margin: 0 0 1.7em; }
.entry > *:last-child { margin-bottom: 0; }

.entry h2 {
  font-family: var(--min); font-weight: 600;
  font-size: clamp(1.2rem, 2.6vw, 1.42rem); letter-spacing: .06em; line-height: 1.75;
  color: var(--ink); margin: 3.2em 0 1.2em; padding: 0 0 0 18px;
  border-left: 3px solid var(--ai);           /* 青の柱 */
  position: relative;
}
.entry h2::before {                            /* 柱の上端だけ赤く差す */
  content: ""; position: absolute; left: -3px; top: 0; width: 3px; height: 26%;
  background: var(--aka);
}
.entry h3 {
  font-family: var(--min); font-weight: 600;
  font-size: 1.08rem; letter-spacing: .05em; line-height: 1.9;
  color: var(--ink); margin: 2.6em 0 .9em;
  padding-bottom: .55em; border-bottom: 1px solid var(--hair);
}
.entry h4 {
  font-family: var(--got); font-weight: 500; font-size: 1rem;
  color: var(--ink); margin: 2.2em 0 .7em; letter-spacing: .04em;
}
.entry h5 { font-weight: 500; font-size: .96rem; color: var(--ink-2); margin: 1.8em 0 .6em; }

.entry p { margin: 0 0 1.7em; }
.entry strong { font-weight: 500; color: var(--ink); }
.entry a { color: var(--ai); text-decoration: none; border-bottom: 1px solid var(--ai-pale); }
.entry a:hover { border-bottom-color: var(--ai); }

.entry ul, .entry ol { padding-left: 1.4em; margin: 0 0 1.7em; }
.entry li { margin-bottom: .6em; }
.entry ul li::marker { color: var(--aka); }

.entry hr { border: 0; height: 1px; background: var(--hair); margin: 2.6em 0; }

.entry blockquote {
  margin: 0 0 1.7em; padding: 20px 26px;
  background: var(--pale); border-left: 3px solid var(--hair-2);
  font-size: .95rem; color: var(--ink-2);
}

.entry img { max-width: 100%; height: auto; display: block; }
.entry figure { margin: 2.2em 0; }
.entry figure img { width: 100%; }
.entry figcaption {
  font-size: .82rem; color: var(--ink-3); text-align: center;
  margin-top: 10px; line-height: 1.8;
}

.entry table {
  width: 100%; border-collapse: collapse; font-size: .92rem; margin: 0 0 1.7em;
}
.entry th, .entry td {
  border: 1px solid var(--hair); padding: 11px 14px; text-align: left; vertical-align: top;
}
.entry th { background: var(--pale); font-weight: 500; color: var(--ink); }

/* 横に広いものだけ、その箱の中で横スクロールさせる（ページ全体を横に動かさない） */
.entry .scrollx, .entry table { overflow-x: auto; }

/* ---------- 目次 ---------- */

.toc {
  background: var(--pale); border: 1px solid var(--hair);
  padding: 24px 28px; margin: 0 0 2.6em; font-size: .93rem;
}
.toc > .t {
  font-family: var(--min); font-size: .95rem; font-weight: 600; letter-spacing: .1em;
  color: var(--ink); display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.toc > .t::before { content: ""; width: 22px; height: 2px; background: var(--aka); }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { margin: 0 0 9px; padding-left: 30px; position: relative; line-height: 1.8; }
.toc li::before {
  counter-increment: toc; content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: .1em;
  font-family: var(--min); font-size: .8rem; color: var(--aka); letter-spacing: .06em;
}
.toc li.d2 { padding-left: 52px; font-size: .89rem; }
.toc li.d2::before { left: 22px; color: var(--faint); }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--ai); }

/* ---------- 記事の頭・脚 ---------- */

.post-head { max-width: 760px; margin: 0 auto clamp(30px, 5vw, 52px); text-align: center; }
.post-head h1 {
  font-family: var(--min); font-weight: 600;
  font-size: clamp(1.35rem, 3.6vw, 1.95rem); letter-spacing: .05em; line-height: 1.8;
  color: var(--ink); margin: 0 0 18px;
}
.post-head .meta { font-size: .82rem; color: var(--ink-3); letter-spacing: .1em; }
.post-head .meta span + span::before { content: "／"; margin: 0 .5em; color: var(--faint); }
.post-thumb { max-width: 900px; margin: 0 auto clamp(34px, 5.4vw, 56px); }
.post-thumb img { width: 100%; height: auto; display: block; }

.post-foot { max-width: 760px; margin: clamp(46px, 6vw, 72px) auto 0; }
.post-nav { display: flex; gap: 20px; justify-content: space-between; font-size: .88rem; }
.post-nav a { color: var(--ink-2); text-decoration: none; }
.post-nav a:hover { color: var(--ai); }

/* ---------- 記事一覧 ---------- */

.list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3.6vw, 44px); }
@media (max-width: 900px) { .list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .list { grid-template-columns: 1fr; } }

.pager { display: flex; justify-content: center; gap: 8px; margin-top: clamp(40px, 5vw, 64px); }
.pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--hair); color: var(--ink-2);
  font-size: .86rem; text-decoration: none; font-family: var(--min);
}
.pager .page-numbers.current { border-color: var(--aka); color: var(--aka); }
.pager a.page-numbers:hover { border-color: var(--ai); color: var(--ai); }

/* ---------- パンくず ---------- */

.crumbs {
  font-size: .78rem; color: var(--ink-3); letter-spacing: .06em;
  margin-bottom: clamp(24px, 3.4vw, 40px);
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ai); }
.crumbs span + span::before { content: "›"; margin: 0 .6em; color: var(--faint); }

/* ---------- 今ある本文が使っているclass（移行のため残す） ---------- */

.tcdce-body { margin: 0; }

.still-disclaimer {
  font-size: .85rem; line-height: 1.95; color: var(--ink-3);
  background: var(--pale); border: 1px solid var(--hair);
  padding: 16px 20px; margin: 0 0 1.9em;
}
.still-note {
  font-size: .9rem; line-height: 2; color: var(--ink-2);
  border-left: 3px solid var(--aka); background: var(--aka-pale);
  padding: 15px 20px; margin: 0 0 1.7em;
}

/* ---------- WordPressが自分で付けるclass ---------- */

.alignleft  { float: left;  margin: .4em 1.6em 1.2em 0; }
.alignright { float: right; margin: .4em 0 1.2em 1.6em; }
.aligncenter, .alignnone { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption {
  font-size: .82rem; color: var(--ink-3); text-align: center; margin-top: 8px;
}
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 10px; left: 10px; z-index: 999; width: auto; height: auto;
  clip: auto; background: var(--ground); color: var(--ink); padding: 10px 18px;
  border: 1px solid var(--ai);
}
@media (max-width: 600px) {
  .alignleft, .alignright { float: none; margin: 1.2em auto; }
}

/* ═══════════════════════════════════════════════════════════
   写真・患者さんの言葉・院の様子（2026-09-16に追加）
   ⚠️写真は object-fit: cover で枠に合わせる。伸び縮みさせない。
   ═══════════════════════════════════════════════════════════ */

/* 写真の枠に実物が入ったとき */
.photo.has-img { display: block; padding: 0; overflow: hidden; background: var(--pale); }
.photo.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo.has-img.top img    { object-position: 50% 24%; }   /* 人物：顔が切れないように上寄せ */
.photo.has-img.center img { object-position: 50% 50%; }

.kv .photo.has-img { min-height: 0; }
@media (max-width: 700px) { .kv .photo.has-img { aspect-ratio: 4 / 5; } }

/* 主景の文字を写真の上に重ねる */
.kv.overlay .photo.has-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,14,26,.42) 0%, rgba(8,14,26,.16) 42%, rgba(8,14,26,.50) 100%);
}
.kv.overlay { position: relative; }
.kv.overlay .kv-words {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 0 20px; z-index: 2;
}
.kv.overlay .kv-words h1 { color: #fff; text-shadow: 0 1px 24px rgba(8,14,26,.4); }
.kv.overlay .kv-words p  { color: rgba(255,255,255,.93); text-shadow: 0 1px 18px rgba(8,14,26,.45); }
.kv.overlay .thread { background: rgba(255,255,255,.55); }
@media (max-width: 700px) {
  .kv.overlay .kv-words h1 { font-size: clamp(1.28rem, 6.2vw, 1.7rem); }
}

/* ---------- 通ってくださっている方の言葉 ---------- */

.voices { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3.6vw, 46px); }
@media (max-width: 800px) { .voices { grid-template-columns: 1fr; } }

.voice {
  background: var(--ground); border: 1px solid var(--hair);
  padding: clamp(26px, 3.4vw, 38px);
  display: flex; flex-direction: column; gap: 16px;
}
.voice .q {
  font-family: var(--min); font-size: .98rem; line-height: 2.1;
  color: var(--ink); font-weight: 500; margin: 0;
  padding-left: 20px; border-left: 2px solid var(--aka);
}
.voice .q + .q { margin-top: -4px; }
.voice .by {
  font-size: .82rem; color: var(--ink-3); letter-spacing: .08em; margin: 0;
}
.voice .by::before { content: "── "; color: var(--faint); }

.voice-note {
  max-width: 44em; margin: clamp(30px, 4vw, 46px) auto 0;
  font-size: .84rem; line-height: 2; color: var(--ink-3); text-align: center;
}

/* ---------- 院の様子（写真を並べる） ---------- */

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery .photo { aspect-ratio: 1 / 1; }

/* ---------- お悩みの並び（見本Gの .nayami を写真つきに） ---------- */

.nayami-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 4.6vw, 60px); align-items: center; }
@media (max-width: 860px) { .nayami-wrap { grid-template-columns: 1fr; } }
.nayami-wrap .photo { aspect-ratio: 4 / 5; }

/* ---------- 掲載すべき事項（費用・リスク）の囲み ---------- */

.must {
  border: 1px solid var(--hair); background: var(--ground);
  padding: clamp(22px, 3vw, 30px); margin-top: clamp(30px, 4vw, 44px);
  font-size: .89rem; line-height: 2; color: var(--ink-2);
}
.must h3 {
  font-family: var(--min); font-size: .98rem; font-weight: 600; letter-spacing: .1em;
  color: var(--ink); margin: 0 0 12px; display: flex; align-items: center; gap: 10px;
}
.must h3::before { content: ""; width: 20px; height: 2px; background: var(--aka); }
.must ul { margin: 0; padding-left: 1.3em; }
.must li { margin-bottom: .5em; }
.must li::marker { color: var(--faint); }

/* お悩みの節の写真。縦位置の写真なので、頭が切れないよう下寄りを見せる */
.nayami-wrap .photo.nayami-photo img { object-position: 50% 62%; }
/* 主景の強調は、暗い写真の上なので白のまま太くする（青は沈んで読めない） */
.kv.overlay h1 .ai { color: #fff; border-bottom: 3px solid var(--aka); padding-bottom: .06em; }

/* ---------- WordPressで動かして見つかった不具合（2026-09-16） ---------- */

/* 院名のリンクが既定の青い下線になっていた */
.brand a, .site .brand a { color: inherit; text-decoration: none; }
.brand a:hover { opacity: .72; }

/* 目次：h3の項目まで通し番号が続いて分かりにくかった。h3は番号を出さない */
.toc li.d2::before { content: "—"; counter-increment: none; color: var(--faint); font-size: .72rem; }

/* パンくずが長いタイトルで2行になると詰まる */
.crumbs { line-height: 1.9; }

/* 記事一覧のカード */
a.post h3 {
  font-family: var(--min); font-size: 1rem; font-weight: 600;
  letter-spacing: .04em; line-height: 1.85; margin: 0; color: var(--ink);
}
a.post p { font-size: .86rem; color: var(--ink-3); line-height: 1.95; margin: 0; font-weight: 300; }
a.post .meta { font-size: .78rem; color: var(--faint); letter-spacing: .1em; }

/* 下のメニュー */
.fnav { display: flex; flex-wrap: wrap; gap: 4px 22px; justify-content: center; margin: 22px 0 0; }
.fnav a { font-size: .82rem; color: var(--ink-3); text-decoration: none; }
.fnav a:hover { color: var(--ai); }

/* 主景の縦横比。⚠️HTMLに直接書かないこと（インライン指定は下の画面幅の指定に勝ってしまう）
   実測（2026-09-16）：style="aspect-ratio:21/9" と書いていたため、
   スマホでも21:9のままになり、細長い帯になっていた。 */
.kv.overlay .photo.has-img { aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .kv.overlay .photo.has-img { aspect-ratio: 4 / 5; } }

/* トップに並べる記事を6件にしたので、3列×2段になるよう間隔を詰める（2026-09-16） */
#blog .posts { row-gap: clamp(34px, 4.4vw, 52px); }
@media (max-width: 760px) { #blog .posts { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (max-width: 460px) { #blog .posts { grid-template-columns: 1fr; } }
#blog a.post h3 { font-size: .95rem; line-height: 1.8; }

/* ---------- 一覧カードは「絵」だけを見せる（2026-09-16） ----------
   アイキャッチは 1200x900 で、上の 576px が挿絵、その下が記事タイトルの帯。
   カードでそのまま出すと、絵の中と HTML の両方にタイトルが出て二重になる。
   → カードは上の 576px だけを切り出す（1200/576 ＝ 約25:12）。
   ⚠️アイキャッチの作り（compose.py の ART_H）を変えたら、ここの比率も直すこと。 */
a.post .photo.has-img { aspect-ratio: 1200 / 576; }
a.post .photo.has-img img { object-position: 50% 0; }

/* ---------- 院のようす：3枚並び（2026-09-16） ----------
   ⚠️同じ施術室の写真を2枚並べない（見ていて「同じ絵が2つ」に見える）。
     院内の写真は施術室の別カットしか無いので、入口・施術室・施術者の3枚にした。 */
.gallery.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .gallery.three { grid-template-columns: 1fr; gap: 12px; } }
.gallery.three .photo { aspect-ratio: 4 / 3; }

/* ---------- アクセスの地図 ----------
   ⚠️外観写真は古い緑の掲示が写っている（柔整師法24条で貼り替えた前のもの）。
     撮り直すまでは地図を置く。写真に戻すときは掲示の色を必ず確認すること。 */
.info .photo.map { aspect-ratio: 1 / 1; padding: 0; overflow: hidden; background: var(--pale); border: 1px solid var(--hair); }
.info .photo.map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) { .info .photo.map { aspect-ratio: 4 / 3; } }

/* ---------- お悩みのタグをリンクにする（2026-09-16） ----------
   ⚠️飛び先はトップページの本文に書いてある。
     将来ここをLPに差し替えるときは、固定ページ「トップページ」の a href を直すだけでよい。
     テーマ側に飛び先を埋め込まないこと。 */
.nayami a.tag {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--hair-2); padding: 10px 20px 10px 22px;
  font-size: .94rem; color: var(--ink-2); letter-spacing: .04em;
  text-decoration: none; background: var(--ground);
  transition: border-color .3s, color .3s, background .3s;
  position: relative;
}
.nayami a.tag span { border: 0; padding: 0; }
.nayami a.tag::after {
  content: "›"; color: var(--faint); font-size: 1rem; line-height: 1; transition: color .3s;
}
.nayami a.tag:hover {
  border-color: var(--ai); color: var(--ai); background: var(--ai-pale);
}
.nayami a.tag:hover::after { color: var(--aka); }
.nayami a.tag:focus-visible { outline: 2px solid var(--ai); outline-offset: 3px; }

/* 施術者の節を主景の直下へ移したので、上の余白を少し詰める */
#staff { padding-top: clamp(52px, 7vw, 86px); }

/* ⚠️本番で見つかった：症状タグにブラウザ既定の下線と青が乗っていた（2026-09-16）
   .entry a の指定と、リンクの既定色を打ち消す。 */
.nayami a.tag,
.nayami a.tag:link,
.nayami a.tag:visited { text-decoration: none; border-bottom: 0; color: var(--ink-2); }
.nayami a.tag:hover { text-decoration: none; border-bottom: 0; color: var(--ai); }
.nayami a.tag span { text-decoration: none; border: 0; }

/* 🔴保険：JSが動かなくても中身は必ず見える（2026-09-16）
   もともと .rise { opacity:0 } だけ書いてあり、JSが削られた結果トップが真っ白になった。
   <html class="js"> が付いたときだけ隠す。JSが読めなければ class が付かないので、そのまま見える。 */
.rise { opacity: 1; transform: none; }
html.js .rise { opacity: 0; transform: translateY(20px); }
html.js .rise.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .rise { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════
   文字の大きさと折り返し（2026-09-16・本番を見て直した）
   見つかった問題
     ・院名が 1rem（16px）で小さい。看板として弱い
     ・見出しが「オステオパシーと／は」のように語の途中で折り返していた
     ・上のメニューが 12.5px で、スマホだと押しにくい
   ═══════════════════════════════════════════════════════════ */

/* ---------- 院名（サイトの看板） ---------- */
.brand {
  font-size: clamp(1.12rem, 2.2vw, 1.38rem);
  letter-spacing: .12em; line-height: 1.5;
}
.brand small {
  font-size: 10px; letter-spacing: .3em; margin-top: 7px;
}
@media (max-width: 700px) {
  .brand { font-size: 1.08rem; letter-spacing: .08em; }
  header.site .bar { padding: 16px 20px; gap: 14px; }
}

/* ---------- 上のメニュー：押せる大きさにする ---------- */
nav.top { font-size: 13.5px; gap: clamp(12px, 2.2vw, 26px); row-gap: 4px; }
nav.top a { padding: 7px 0; display: inline-block; }
@media (max-width: 700px) {
  nav.top { font-size: 13px; gap: 14px 16px; }
  nav.top a { padding: 8px 0; }
}

/* ---------- 見出しの折り返し ----------
   ⚠️日本語は語の途中でも折り返る。「オステオパシーと／は」が実際に起きた。
     word-break: auto-phrase があれば文節で折る。無いブラウザは balance で行数をそろえる。 */
h1, h2, h3,
.post-head h1, .head h2, .kv-words h1, .entry h2, .entry h3, a.post h3, .voice .q {
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  text-wrap: balance;
  line-break: strict;
}
/* 長い一文の本文は balance を効かせない（かえって読みにくい） */
.entry p, .kv-words p, .fine p, .nayami-note { text-wrap: pretty; }

/* ---------- 記事・固定ページの見出しの大きさ ---------- */
.post-head h1 { font-size: clamp(1.4rem, 3.4vw, 2.05rem); line-height: 1.7; letter-spacing: .04em; }
@media (max-width: 700px) { .post-head h1 { font-size: 1.32rem; line-height: 1.65; } }

/* ---------- 本文の読みやすさ ---------- */
.entry { font-size: 1.02rem; line-height: 2.1; }
@media (max-width: 700px) {
  .entry { font-size: .98rem; line-height: 2.0; }
  .entry h2 { font-size: 1.15rem; margin-top: 2.6em; }
  .entry h3 { font-size: 1.02rem; }
  .wrap, .wrap.mid { padding-left: 20px; padding-right: 20px; }
}

/* ---------- 節の見出し（トップ） ---------- */
.head h2 { line-height: 1.75; }
@media (max-width: 700px) {
  .head h2 { font-size: clamp(1.18rem, 5.4vw, 1.5rem); letter-spacing: .04em; }
  .head .en { font-size: 9.5px; letter-spacing: .34em; }
}

/* ═══════════════════════════════════════════════════════════
   スマホ（375px）で実測して決めた文字の大きさ　2026-09-16
   実測してから決めた。目分量ではない。
     英字ラベル 9.5px → 読めない
     柱の本文 14.88px / フッター 12.5px → 日本語の下限（15.5 / 13.5）を割っていた
     柱の見出し 20px → 本文との差が開きすぎて、ばらついて見えた
   決めた下限：本文 15.5px ／ 補助 13.5px ／ ラベル 11px
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  /* 院名＝看板。ここは大きく */
  .brand { font-size: 1.2rem; letter-spacing: .06em; line-height: 1.55; }
  .brand small { font-size: 10.5px; letter-spacing: .26em; margin-top: 8px; }

  /* 上のメニュー */
  nav.top { font-size: 14px; gap: 12px 18px; }
  nav.top a { padding: 9px 0; }

  /* 英字ラベル：小さすぎて読めなかった */
  .head .en, .en { font-size: 11px; letter-spacing: .26em; }

  /* 節の見出し */
  .head h2 { font-size: 1.32rem; line-height: 1.7; letter-spacing: .03em; }
  .head { margin-bottom: 30px; }

  /* 考え方の4枠：見出しと本文の差を詰める */
  .pillar h3 { font-size: 1.06rem; line-height: 1.75; margin-bottom: 10px; }
  .pillar p  { font-size: .97rem; line-height: 2.0; }
  .pillars { gap: 30px; }

  /* 手順 */
  .stepr h3 { font-size: 1.02rem; }
  .stepr p  { font-size: .95rem; line-height: 2.0; }
  .stepr .st { font-size: 12.5px; }

  /* 料金 */
  .menu .nm { font-size: 1.02rem; }
  .menu .nm span { font-size: .86rem; }
  .yen { font-size: 1.2rem; }

  /* 施術者 */
  .who h3 { font-size: 1.14rem; letter-spacing: .12em; margin-top: 22px; }
  .who .cert { font-size: 11px; letter-spacing: .14em; }
  .who p { font-size: .97rem; line-height: 2.0; }
  .who .photo { max-width: 180px; }

  /* 患者さんの声 */
  .voice { padding: 22px 20px; }
  .voice .q { font-size: .99rem; line-height: 2.0; padding-left: 16px; }
  .voice .by { font-size: .84rem; }
  .voice-note { font-size: .84rem; line-height: 1.95; }

  /* 記事カード */
  a.post h3 { font-size: .99rem; line-height: 1.8; }
  a.post .meta { font-size: 12.5px; }
  a.post p { font-size: .88rem; }

  /* 補助テキスト・脚 */
  .fine, .fine p, .nayami-note { font-size: .93rem; line-height: 1.95; }
  footer.site .min { font-size: 13.5px; line-height: 2.0; }
  footer.site .fine { font-size: 12.5px; line-height: 1.9; }
  footer.site .nm { font-size: 1.02rem; }
  .must { font-size: .93rem; line-height: 1.95; padding: 20px 18px; }
  .qa summary { font-size: 1.02rem; padding: 20px 34px 20px 0; }
  .qa .ans { font-size: .95rem; line-height: 2.0; }
  dl.dl dd { font-size: .97rem; }
  dl.dl dt { font-size: 10.5px; }
  .crumbs { font-size: 12.5px; }
  .toc { font-size: .95rem; padding: 20px 18px; }
  .still-disclaimer { font-size: .88rem; }
}

/* 節と節のあいだ。スマホでは少し詰める（縦に長くなりすぎるため） */
@media (max-width: 760px) {
  section { padding-top: 54px; padding-bottom: 54px; }
  .fin { padding-top: 60px; padding-bottom: 60px; }
}

/* ═══════════════════════════════════════════════════════════
   お客様の声（2026-09-16に作り直し）
   ⚠️記事カードの型を使わない理由：
     声は短く、写真が無いものもある。記事と同じ型だと
     写真なしのものに大きな空枠が出て、縦に間延びして読めなかった。
   ═══════════════════════════════════════════════════════════ */

.voice.has-photo { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: start; }
.voice-photo { border-radius: 4px; overflow: hidden; background: var(--pale); aspect-ratio: 4 / 3; }
.voice-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.voice-body > *:last-child { margin-bottom: 0; }
.voice-body p { margin: 0 0 14px; }

@media (max-width: 700px) {
  .voice.has-photo { grid-template-columns: 1fr; gap: 16px; }
  .voice-photo { aspect-ratio: 16 / 9; max-width: 100%; }
}

/* 一覧では2列。声が短いので詰めて見せる */
.voices { align-items: start; }

/* ═══════════════════════════════════════════════════════════
   ページの途中に置く予約ボタン（2026-09-16・大樹さんの指示）
   ⚠️テーマから出す。本文に書かない（WordPressに削られるため）。
   ═══════════════════════════════════════════════════════════ */

.yoyaku-mid {
  margin: clamp(40px, 5.6vw, 64px) auto;
  max-width: 760px;
  background: var(--ai-pale);
  border: 1px solid var(--hair);
  padding: clamp(26px, 3.6vw, 36px) clamp(20px, 3.4vw, 34px);
  text-align: center;
}
.yoyaku-mid .t {
  font-family: var(--min); font-size: clamp(1.02rem, 2.4vw, 1.16rem); font-weight: 600;
  letter-spacing: .05em; line-height: 1.85; color: var(--ink); margin: 0 0 8px;
}
.yoyaku-mid .s { font-size: .9rem; color: var(--ink-2); line-height: 1.95; margin: 0 0 20px; font-weight: 300; }
.yoyaku-mid .acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 0; }
.yoyaku-mid a.line {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #06C755; color: #fff; text-decoration: none; border: 0;
  padding: 15px 30px; font-size: 1rem; font-weight: 500; letter-spacing: .08em;
  font-family: var(--got); border-radius: 4px; transition: opacity .3s;
  min-width: 210px;
}
.yoyaku-mid a.line:hover { opacity: .86; }
.yoyaku-mid a.tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--aka); text-decoration: none; border: 1px solid var(--aka);
  padding: 15px 28px; font-family: var(--min); font-size: 1rem; font-weight: 500;
  letter-spacing: .08em; border-radius: 4px; background: var(--ground);
  transition: background .3s, color .3s; min-width: 210px;
}
.yoyaku-mid a.tel small { font-family: var(--got); font-size: 11.5px; font-weight: 300; letter-spacing: .04em; }
.yoyaku-mid a.tel:hover { background: var(--aka); color: #fff; }
.yoyaku-mid .note { font-size: .82rem; color: var(--ink-3); margin: 16px 0 0; line-height: 1.85; }

@media (max-width: 700px) {
  .yoyaku-mid { padding: 24px 18px; margin: 36px auto; }
  .yoyaku-mid .acts { flex-direction: column; gap: 10px; }
  .yoyaku-mid a.line, .yoyaku-mid a.tel { width: 100%; min-width: 0; padding: 16px 20px; }
  .yoyaku-mid .t { font-size: 1.04rem; }
  .yoyaku-mid .s { font-size: .9rem; }
}

/* ═══════════════════════════════════════════════════════════
   文字の大きさと色の見直し　2026-09-16（計算して決めた。目分量ではない）

   ① 本文を大きく：15.68px → 17px
      40〜60代の方が読むサイトなので、15px台は小さい。

   ② 🔴リンクが本文と同じ色だった（rgb 58,74,99）＝リンクだと分からない
      青にして下線を付ける。

   ③ 🔴補助文字の色が薄すぎた
      --ink-3 #6B7A90 は白地でコントラスト 4.36。**基準（4.5）に届いていない。**
      淡い青地の上では 4.02 でさらに低い。
      → #5E6B80 にする（白地 5.40 ／ 淡い青地 4.97）。どちらも基準を超える。
      ⚠️--faint（2.22）は**線や飾りだけ**に使う。文字には使わない。
   ═══════════════════════════════════════════════════════════ */

:root { --ink-3: #5E6B80; }
:root:not([data-theme="light"]) { }

/* ---------- ① 本文を大きく ---------- */
.entry { font-size: 1.06rem; line-height: 2.05; }
.entry h2 { font-size: clamp(1.28rem, 2.7vw, 1.5rem); }
.entry h3 { font-size: 1.14rem; }
.entry h4 { font-size: 1.05rem; }
.entry li { font-size: 1em; }
.toc { font-size: .99rem; }
.post-head h1 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); }

@media (max-width: 760px) {
  .entry { font-size: 1.04rem; line-height: 2.0; }
  .entry h2 { font-size: 1.22rem; }
  .entry h3 { font-size: 1.08rem; }
  .post-head h1 { font-size: 1.36rem; }
  .toc { font-size: .97rem; }
}

/* ---------- ② リンクを見て分かるように ---------- */
.entry a:not(.btn):not(.line):not(.tel),
.voice-body a, .qa .ans a, .must a {
  color: var(--ai);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(27, 63, 122, .38);
  border-bottom: 0;
}
.entry a:not(.btn):not(.line):not(.tel):hover,
.voice-body a:hover {
  color: var(--aka);
  text-decoration-color: var(--aka);
}

/* ---------- ③ 補助文字を読める濃さに ---------- */
.crumbs, .crumbs a { color: var(--ink-3); }
figcaption, .wp-caption-text, .wp-element-caption { color: var(--ink-3); font-size: .87rem; }
.yoyaku-mid .note { color: var(--ink-3); font-size: .86rem; }
.voice .by, .voice-note { color: var(--ink-3); }
a.post .meta, .post-head .meta { color: var(--ink-3); }
.still-disclaimer { color: var(--ink-3); }
.fine, .fine p { color: var(--ink-2); }
footer.site .fine { color: var(--ink-3); }
dl.dl dt { color: var(--ink-3); }

/* 図の説明・脚注は少し大きく */
@media (max-width: 760px) {
  figcaption, .wp-caption-text { font-size: .88rem; }
  .crumbs { font-size: 13px; }
  .yoyaku-mid .note { font-size: .86rem; }
}

/* 図の説明は淡い青の面の上にも乗る。白地基準だと足りないので、さらに濃くする。
   #515E73 ＝ 白地6.52 ／ 淡青地6.00（2026-09-16に計算） */
figcaption, .wp-caption-text, .wp-element-caption { color: #515E73; }

/* 🔴実測でやり直し（2026-09-16）：声に写真を左置きしたら、文字が細い縦の帯になって読めなかった。
   2列並びの箱の中で、さらに左右に割ったのが原因。写真は上に置く。 */
.voice.has-photo { display: block; }
.voice-photo {
  aspect-ratio: 16 / 9; margin-bottom: 18px;
  border-radius: 4px; overflow: hidden; background: var(--pale);
}
.voice-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.voice .q { line-height: 2.05; }

/* 声の箱じたいも、幅が狭いときは1列にする */
@media (max-width: 980px) { .voices { grid-template-columns: 1fr; } }

/* ══════════════ 症状から探す（左の欄／下の一覧） ══════════════
   HTMLは1つ。画面の幅で見え方だけ変える（inc/lp.php が出力）
     ・1440px以上 … 本文の左の余白に、縦の欄として貼りつく
     ・それ未満 ……… 本文の下に、横並びの一覧として出る
   ⚠️広告LP・予約・事務ページには出さない（suusan_rail_ok）           */

.lprail {
  --rail-w: 202px;
  display: block;
  margin: clamp(56px, 8vw, 96px) 0 0;
  padding: clamp(34px, 5vw, 52px) 0 clamp(38px, 5.5vw, 58px);
  background: var(--pale);
  border-top: 1px solid var(--hair);
}
.lprail .rail-in {
  max-width: 940px; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 34px;
  align-items: start;
}
.lprail .rail-t, .lprail .rail-all { grid-column: 1 / -1; }

.rail-t {
  font-family: var(--min); font-size: 1.14rem; letter-spacing: .06em;
  color: var(--ink); margin: 0 0 10px; font-weight: 500;
}
.rail-t span { position: relative; padding-left: 36px; display: inline-block; }
.rail-t span::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 26px; height: 2px; background: var(--aka); transform: translateY(-50%);
}

.rail-h {
  font-size: .74rem; letter-spacing: .12em; font-weight: 500;
  color: var(--ink-3); margin: 14px 0 2px;
}
.rail-g ul { list-style: none; margin: 0; padding: 0; }
.rail-g li + li { border-top: 1px solid var(--hair); }
.rail-g a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 2px; text-decoration: none;
  font-size: .95rem; line-height: 1.5; color: var(--ink-2);
  transition: color .2s ease;
}
.rail-g a::before {
  content: ""; flex: none; width: 5px; height: 5px;
  border-top: 1.5px solid var(--aka); border-right: 1.5px solid var(--aka);
  transform: rotate(45deg); transition: transform .2s ease;
}
.rail-g a:hover, .rail-g a:focus-visible { color: var(--ai); }
.rail-g a:hover::before { transform: rotate(45deg) translate(2px, -2px); }
.rail-g a.cur { color: var(--ai); font-weight: 500; }
.rail-g a.cur::before { border-width: 2px; }

.rail-all {
  justify-self: start; margin-top: 20px;
  font-size: .86rem; color: var(--ai); text-decoration: none;
  border-bottom: 1px solid var(--hair-2); padding-bottom: 3px;
}
.rail-all:hover { border-bottom-color: var(--ai); }

@media (max-width: 860px) {
  .lprail .rail-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .lprail .rail-in { grid-template-columns: 1fr; }
}

/* ── 広い画面：左の余白に貼りつく縦の欄にする ── */
@media (min-width: 1440px) and (min-height: 600px) {
  .lprail {
    position: fixed; z-index: 40;
    left: max(14px, calc(50vw - 470px - var(--rail-w) - 28px));
    top: 50%; transform: translateY(-50%);
    width: var(--rail-w);
    margin: 0; padding: 0; background: none; border-top: 0;
    transition: opacity .45s ease, visibility .45s ease;
  }
  .lprail .rail-in {
    display: block; max-width: none; padding: 20px 18px 18px;
    background: var(--ground);
    border: 1px solid var(--hair); border-radius: 3px;
    box-shadow: 0 10px 34px rgba(18, 27, 43, .07);
    max-height: calc(100vh - 44px); overflow-y: auto;
  }
  .lprail .rail-t { font-size: .95rem; margin-bottom: 2px; }
  .lprail .rail-t span { padding-left: 26px; }
  .lprail .rail-t span::before { width: 18px; }
  .lprail .rail-h { font-size: .68rem; margin: 13px 0 1px; }
  .lprail .rail-g a { font-size: .84rem; padding: 9px 2px; gap: 9px; }
  .lprail .rail-all { display: block; margin-top: 15px; font-size: .78rem; }

  /* ⚠️トップの主画像に重ねない。少しスクロールしてから出す。
     JSが動かない環境では最初から出る（html.js が付かないため）。 */
  html.js .lprail { opacity: 0; visibility: hidden; }
  html.js.railon .lprail { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .lprail, .rail-g a, .rail-g a::before { transition: none; }
}

/* ── 症状タグの段組み（2026-09-16）
   もとは inline-flex の折り返しだったので、行ごとに幅が変わって
   **ガタガタに見えていた**（大樹さんの指摘）。
   等幅のマス目に変えて、矢印を右端でそろえる。                        */
.nayami {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.nayami a.tag {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px 16px 14px 18px; line-height: 1.5;
}
.nayami a.tag::after { flex: none; }

@media (max-width: 860px) { .nayami { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .nayami { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .nayami { grid-template-columns: 1fr; } }

/* ── LP本文のリード文と関連リンク（2026-09-16に当たっていないことが分かった） ── */
.entry .lead {
  font-family: var(--min);
  font-size: clamp(1.02rem, 2.4vw, 1.18rem);
  line-height: 2.1; letter-spacing: .05em;
  color: var(--ink); margin: 0 0 clamp(34px, 5vw, 52px);
  padding-left: 18px; border-left: 2px solid var(--aka);
}
.entry ul.ryu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.entry ul.ryu-list li { border-bottom: 1px solid var(--hair); }
.entry ul.ryu-list li::before { content: none; }
.entry ul.ryu-list a {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 2px; font-size: .95rem; line-height: 1.75;
  color: var(--ink-2); text-decoration: none; border-bottom: 0;
}
.entry ul.ryu-list a::before {
  content: ""; flex: none; margin-top: .58em; width: 5px; height: 5px;
  border-top: 1.5px solid var(--aka); border-right: 1.5px solid var(--aka); transform: rotate(45deg);
}
.entry ul.ryu-list a:hover { color: var(--ai); }

/* ── トップの症状タグを3つに分ける（2026-09-16）
   飛び先が増えたので、ひとかたまりだと探せない。見出しで区切る。 */
.nayami-set { display: grid; gap: clamp(20px, 2.6vw, 28px); }
.nayami-cat {
  font-size: .74rem; letter-spacing: .14em; font-weight: 500;
  color: var(--ink-3); margin: 0 0 9px; padding-left: 15px; position: relative;
}
.nayami-cat::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 8px; height: 1px; background: var(--aka);
}

/* 縦の欄はLPが15本になったので、1行を詰める */
@media (min-width: 1440px) and (min-height: 600px) {
  .lprail .rail-g a { font-size: .81rem; padding: 7px 2px; gap: 8px; }
  .lprail .rail-h { margin: 11px 0 0; }
  .lprail .rail-in { padding: 17px 16px 15px; }
}

/* トップのお悩み欄：タグが増えて写真の右に余白ができたので、写真を高さいっぱいに */
@media (min-width: 861px) {
  .nayami-wrap { align-items: stretch; }
  .nayami-wrap .photo.nayami-photo { aspect-ratio: auto; height: 100%; min-height: 460px; }
}

/* ══ 図解（2026-09-16）
   🔴画像の中に文字を入れない（画像内の文字は法令チェックを通せない）。
     そのぶん「左はここ・右はここ」をHTMLの文字で添える。
     → 読む人はどこを見るか分かり、Googleも読め、チェッカーも通せる。 */
.entry figure.fig { margin: clamp(32px, 4.6vw, 50px) 0; }
.entry figure.fig img {
  width: 100%; height: auto; display: block; border-radius: 4px;
  background: var(--pale);
}
.entry figure.fig figcaption { margin-top: 15px; }
.entry figure.fig .cap {
  font-size: .9rem; color: var(--ink-2); line-height: 1.95;
  margin: 0; text-align: center;
}
.entry figure.fig .lr {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px;
  margin-top: 16px;
}
.entry figure.fig .lr > div {
  padding-left: 14px; border-left: 2px solid var(--hair-2);
  font-size: .89rem; line-height: 1.95; color: var(--ink-2);
}
.entry figure.fig .lr b {
  display: block; font-size: .7rem; letter-spacing: .16em;
  color: var(--aka); font-weight: 600; margin-bottom: 4px;
}
@media (max-width: 560px) {
  .entry figure.fig .lr { grid-template-columns: 1fr; gap: 10px; }
}

/* 左右の説明は左寄せに戻す（.entry figcaption が中央寄せなので打ち消す） */
.entry figure.fig .lr, .entry figure.fig .lr > div, .entry figure.fig .lr b { text-align: left; }

/* ── 経歴（2026-09-16）
   🔴柔整師法24条2項の「技能・経歴の広告不可」は当院に及ばないことが確定したので書けるようになった。
   ⚠️ただし景表法は残る。経歴は**学びの事実**として書き、効果の代わりに使わない
   （「○年の実績で確かな技術」の形にしない）。書くのは裏が取れるものだけ。 */
.entry .keireki { margin: clamp(22px, 3vw, 32px) 0 0; }
.entry .keireki dl { margin: 0; display: grid; grid-template-columns: 8.5em 1fr; gap: 0; }
.entry .keireki dt {
  font-size: .78rem; letter-spacing: .08em; color: var(--ink-3); font-weight: 500;
  padding: 13px 12px 13px 0; border-top: 1px solid var(--hair);
}
.entry .keireki dd {
  margin: 0; font-size: .93rem; line-height: 1.9; color: var(--ink-2);
  padding: 13px 0; border-top: 1px solid var(--hair);
}
.entry .keireki dt:first-of-type, .entry .keireki dt:first-of-type + dd { border-top: 0; }
@media (max-width: 560px) {
  .entry .keireki dl { grid-template-columns: 1fr; }
  .entry .keireki dt { padding-bottom: 0; border-top: 1px solid var(--hair); }
  .entry .keireki dd { padding-top: 4px; border-top: 0; }
}

/* ── 🔴ボタンにカーソルを乗せると文字が消える（2026-09-16・大樹さんの指摘）
   a.btn は塗りを ::before で下から上げる作り。文字を上に出すのに
   `a.btn > * { position:relative }` を使っていたが、**これは要素の子だけに効く。**
   「LINEでご相談」のような素のテキストは持ち上がらず、塗りに隠れていた
   （電話ボタンも <small> だけ残り「電話でご予約」が消えていた）。
   → ボタン自身に重なりの文脈を作り、塗りを必ず文字の下に置く。 */
a.btn { isolation: isolate; }
a.btn::before { z-index: -1; }

/* フッターの院情報の電話番号。リンクだが色は変えない（囲みの中で浮かないように） */
footer.site .min a[href^="tel:"] { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hair-2); }
footer.site .min a[href^="tel:"]:hover { color: var(--ai); border-bottom-color: var(--ai); }


/* ═══════════════════════════════════════════════════════════════
   文字の大きさと太さを、スマホで測り直して調整（2026-09-17）

   ■ 実測して分かったこと（375px幅＝iPhoneの標準サイズで測定）
     ・本文は 16.6px あるのに **font-weight:300（細字）**だった。
       日本語の細字はスマホだと線がかすれる。当院は50代〜高齢の方の相談が多い。
     ・**見出しと本文の差が小さすぎた**：h2 は本文の1.17倍、h3 は1.04倍。
       見出しが立たず、画面が一枚の文字の壁に見えていた（ふつうは1.3〜1.5倍）。
     ・補助の文字が 14.4〜15.2px（所要時間・図の説明・注記）。小さい。

   ■ 触っていないこと
     ・色は問題なかった。コントラストは 4.97〜17.25 で、基準（4.5）を全部超えている。
     ・トップの主見出し・ロゴなど「見せる」ための細字はそのまま。細さが味なので。

   🔴このファイルには `.entry` の font-size が**5か所**あって上書きし合っている
     （1rem → 1.02 → .98 → 1.06 → 1.04）。**次に触る人は必ず実機で最後の値を測ること。**
     CSSを読んだだけでは、どれが効いているか分からない。
   ═══════════════════════════════════════════════════════════════ */

/* ── 読ませる文字は細字にしない（300 → 400） ── */
.entry,
.entry p,
.entry li,
.stepr p,
.fine p,
.nayami span,
.nayami-note,
.pillar p,
.who p,
figcaption .cap,
figcaption .lr div,
footer.site p { font-weight: 400; }

/* ── 見出しを本文からきちんと離す ── */
@media (max-width: 760px) {
  .entry h2 { font-size: 1.42rem; line-height: 1.6; }   /* 本文の約1.37倍 */
  .entry h3 { font-size: 1.2rem;  line-height: 1.75; }  /* 本文の約1.15倍 */

  /* ── 小さすぎた補助の文字を上げる ── */
  .stepr p        { font-size: 1rem; }
  .stepr .min     { font-size: .97rem; }
  .fine p         { font-size: 1rem; }
  .nayami span    { font-size: 1rem; }
  .nayami-note    { font-size: 1rem; }
  /* ⚠️`figcaption .cap` だけでは効かない。`.entry figure.fig .cap`（0.9rem）の
     ほうが詳しいので負ける。実測して気づいた。同じ詳しさで書く。 */
  .entry figure.fig .cap  { font-size: .97rem; }
  .entry figure.fig .lr div { font-size: .93rem; }

  /* 上のナビ。タップする文字が12.5px・細字だと押しにくい */
  nav.top { font-size: 14.5px; font-weight: 400; }
}


/* ═══════════════════════════════════════════════════════════════
   「こんなお悩みでいらっしゃいます」を見やすくした（2026-09-18）
   大樹さん「ここが少し見にくい」。1440px幅で測って分かったこと：

   ・症状カードの高さが **52px と 74px** の2種類あった。
     「生理前の肩こり・腰痛」のように2行になるものが、その行ごと高くしていた。
     → 並びがガタついて見える原因。**行の高さを揃える。**
   ・右の写真が **357×921px**＝縦横比0.39の極端な縦長。
     左の列（799px）より高く、**この写真1枚が節全体の高さを決めていた。**
     → 3:4に決めて、縦に真ん中で置く。
   ・カテゴリー見出し（からだの痛み・こり）が **11.8px**。小さすぎる。
   ⚠️色は触っていない。コントラストは 5.40〜17.25 で基準（4.5）を超えている。
   ═══════════════════════════════════════════════════════════════ */

/* ── カードの高さを揃える ── */
.nayami { grid-auto-rows: 1fr; }
.nayami a.tag { min-height: 58px; line-height: 1.5; }

/* ── カテゴリー見出しを読める大きさに（11.8px → 13.4px）── */
.nayami-cat { font-size: .84rem; letter-spacing: .1em; }

/* ── 右の写真を、極端な縦長から 3:4 に ── */
.nayami-wrap { align-items: center; }
.nayami-wrap .photo.nayami-photo {
  height: auto; min-height: 0; aspect-ratio: 3 / 4;
}
.nayami-wrap .photo.nayami-photo img {
  width: 100%; height: 100%; object-fit: cover;
}
/* ⚠️1列に折り返す幅では、写真が縦長のままだと画面を占領する。横長に切り替える */
@media (max-width: 860px) {
  .nayami-wrap .photo.nayami-photo { aspect-ratio: 4 / 3; }
}


/* ═══ 主画像に予約ボタンを置く（2026-09-18）═══
   🔴実測：**ページの先頭から5,479pxの間に、押せる連絡先が1つも無かった。**
   主画像を見て「ここに行こう」と思った人が、そこで行動できない状態だった。
   （ナビの小さな「ご予約」だけ。スマホは追従バーがあるが、パソコンには何も無い）
   ⚠️白い文字が載る暗い写真の上なので、LINEは緑のまま、電話は白地にする。 */
.kv-acts {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-top: clamp(20px, 3vw, 32px);
}
.kv-acts a {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  text-decoration: none; border: 0; padding: 14px 30px;
  font-family: var(--min); font-weight: 600; letter-spacing: .08em; font-size: .98rem;
  transition: opacity .3s, background .3s;
}
.kv-acts a.line { background: #06C755; color: #fff; }
.kv-acts a.line:hover { opacity: .86; }
.kv-acts a.tel { background: rgba(255,255,255,.95); color: var(--ink); }
.kv-acts a.tel small { font-family: var(--got); font-size: 11.5px; font-weight: 400; letter-spacing: .04em; }
.kv-acts a.tel:hover { background: #fff; }
.kv-acts a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* ⚠️スマホは主画像が 4:5 で余白が少ない。縦積みにして幅を抑える */
@media (max-width: 640px) {
  .kv-acts { flex-direction: column; gap: 10px; width: min(100%, 300px); margin-inline: auto; }
  .kv-acts a { width: 100%; padding: 13px 18px; font-size: .94rem; }
}


/* ═══════════════════════════════════════════════════════════════
   パソコンのヘッダーを追従させる（2026-09-18）
   大樹さん「パソコンにも追従バーがあったほうがいいですかね」

   🔴追従バーは足さないと決めた。実測にもとづく判断：
     直近90日のクリックは **スマホ367（88.4%）／パソコン36（8.7%）**。
     スマホには既に .dock（下の追従バー）がある。パソコンには今日
     主画像＋途中3か所＋最下部の5か所を作った。
     そこへさらにバーを1本足すのは、静かな作りを崩す割に取り分が薄い。
   → 代わりに **ヘッダーを上に貼りつかせ、「ご予約」をボタンにする。**
     新しい帯を増やさず、常に押せる場所が1つ増える。

   ⚠️スマホには出さない（821px以上だけ）。
     .dock が下にあるので二重になるし、スマホでヘッダーが居座ると
     本文の見える高さを毎画面ぶん奪う。境目は .dock と同じ821px。
   ⚠️body に overflow-x: hidden があると position:sticky が効かなくなる
     （body がスクロールの箱になるため）。**clip なら箱にならない。**
     対応していないブラウザは hidden のまま＝貼りつかないだけで壊れない。
   ⚠️管理バー（ログイン中だけ出る32px）のぶん下げる。
   ⚠️ページ内リンクで飛んだとき見出しがヘッダーに隠れるので scroll-margin を置く。
   ═══════════════════════════════════════════════════════════════ */

body { overflow-x: clip; }

@media (min-width: 821px) {

  header.site {
    position: sticky; top: 0; z-index: 50;
    background: var(--pale);          /* 透けないように明示（下の本文が透けると読めない） */
    transition: box-shadow .35s ease;
  }
  body.admin-bar header.site { top: 32px; }

  /* ── 下がったら1行の細い帯に畳む ──
     🔴実測（1440px）：**この頭は164pxある。** 院名321px＋メニュー687pxで
       940pxの箱に入りきらず、2行に折れていた。貼りつかせないうちは
       誰も困らなかったが、貼りつくと画面の18%を占め続ける。
     → 上にいる間は看板のまま（164px）。**下がったら1行に畳んで約50pxにする。**
       畳むときだけ箱を広げ、折り返しを禁じ、院名と字を少しだけ詰める。
     ⚠️nowrap にすると入りきらない幅では文字が潰れる。min-width:0 と
       letter-spacing を詰めて逃がす。820px以下はそもそも貼りつかない。 */
  header.site .bar { transition: padding .3s ease; }
  header.site.small .bar {
    padding-top: 9px; padding-bottom: 9px;
    max-width: min(1280px, 100%); flex-wrap: nowrap; gap: 16px;
  }
  header.site.small .brand {
    font-size: 1.04rem; letter-spacing: .03em; white-space: nowrap; flex: 0 0 auto;
  }
  header.site.small .brand small { opacity: 0; height: 0; margin-top: 0; overflow: hidden; }
  header.site.small nav.top {
    flex-wrap: nowrap; white-space: nowrap; font-size: 12.8px;
    gap: clamp(8px, 1.1vw, 20px); min-width: 0; justify-content: flex-end;
  }
  /* ⚠️body の line-height が 2.15 なので、詰めても字の箱が高いまま残る。
     実測：ここを直すまで畳んでも80pxあった（狙いは50px台）。 */
  header.site.small nav.top { line-height: 1.45; }
  header.site.small nav.top a { padding: 4px 0; }
  header.site.small { box-shadow: 0 1px 14px rgba(18, 27, 43, .07); }

  /* ── 「ご予約」だけボタンにする ──
     ⚠️href で拾う。メニューを管理画面で作り直しても効く（今は控えのリンク） */
  nav.top a[href*="/yoyaku"] {
    background: var(--ai); color: var(--pale);
    padding: 9px 20px; font-weight: 400; letter-spacing: .12em;
    transition: background .3s, color .3s, opacity .3s;
  }
  nav.top a[href*="/yoyaku"]:hover { background: var(--ink); color: var(--pale); opacity: 1; }
  nav.top a[href*="/yoyaku"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  header.site.small nav.top a[href*="/yoyaku"] { padding: 8px 16px; }

  /* 821〜1000px では7項目が2行に折れて頭が高くなる。ここだけ詰める */
  @media (max-width: 1000px) {
    nav.top { font-size: 12.8px; gap: 10px 14px; }
    nav.top a[href*="/yoyaku"] { padding: 8px 14px; }
  }

  /* ページ内リンクの着地点が頭に隠れないように */
  :target, .entry h2, .entry h3, section[id] { scroll-margin-top: 72px; }
}

/* 動きを減らす設定の人には縮ませない（高さが動くのは酔いのもと） */
@media (prefers-reduced-motion: reduce) {
  header.site, header.site .bar, nav.top a[href*="/yoyaku"] { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════
   記事どうしをつなぐ／書き手を見せる（2026-09-19）
   🔴実測：記事162本のうち153本（94%）がどこからもリンクされていなかった。
     症状別LPも28枚中19枚が記事へ1本も張っていない。
     ＝「記事→LP」の片道だけで、戻りと横の道が無かった。
   ⚠️出し方は inc/kanren.php。本文は1文字も増やしていない。
   ═══════════════════════════════════════════════════════════════ */

/* ── 書いた人の一行（記事の頭） ── */
.entry .byline {
  margin: 0 0 clamp(22px, 3vw, 32px);
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--hair);
  font-size: .86rem; line-height: 1.7; color: var(--ink-3); font-weight: 400;
}
.entry .byline strong { color: var(--ink); font-weight: 500; margin-right: .6em; }
.entry .byline span { display: inline-block; font-size: .8rem; color: var(--faint); }
@media (max-width: 640px) { .entry .byline span { display: block; margin-top: 3px; } }

/* ── プロフィールの箱（本文の途中・予約ボックスの直前） ── */
.prof-box {
  display: flex; gap: clamp(16px, 2.4vw, 26px); align-items: flex-start;
  max-width: 720px; margin: clamp(34px, 5vw, 52px) auto clamp(10px, 1.6vw, 18px);
  padding: clamp(20px, 3vw, 28px);
  background: var(--pale); border: 1px solid var(--hair);
}
.prof-box .ph { flex: 0 0 92px; }
.prof-box .ph img {
  width: 92px; height: 92px; object-fit: cover; border-radius: 50%; display: block;
  background: var(--ground);
}
.prof-box .tx { flex: 1 1 auto; min-width: 0; }
.prof-box .nm {
  font-family: var(--min); font-size: 1.1rem; font-weight: 600; letter-spacing: .06em;
  margin: 0 0 4px; color: var(--ink); line-height: 1.5;
}
.prof-box .nm small {
  font-family: var(--got); font-size: .72rem; font-weight: 400; letter-spacing: .08em;
  color: var(--faint); margin-left: .7em;
}
.prof-box .qz { margin: 0 0 10px; font-size: .84rem; line-height: 1.7; color: var(--ai); }
.prof-box .bd { margin: 0 0 8px; font-size: .92rem; line-height: 1.95; color: var(--ink-2); }
.prof-box .nt { margin: 0 0 10px; font-size: .78rem; line-height: 1.7; color: var(--faint); }
.prof-box .lk { margin: 0; font-size: .86rem; }
.prof-box .lk a { color: var(--ai); text-decoration: none; border-bottom: 1px solid var(--hair-2); }
.prof-box .lk a:hover { border-bottom-color: var(--ai); }
@media (max-width: 560px) {
  .prof-box { flex-direction: column; align-items: center; text-align: center; }
  .prof-box .ph { flex: none; }
  .prof-box .lk { margin-top: 4px; }
}

/* ── 関連記事 ── */
.kanren {
  max-width: 820px; margin: clamp(44px, 6vw, 68px) auto 0;
  padding-top: clamp(24px, 3.4vw, 34px); border-top: 1px solid var(--hair);
}
.kanren .k-hd {
  font-family: var(--min); font-size: 1.02rem; font-weight: 600; letter-spacing: .1em;
  margin: 0 0 clamp(16px, 2.2vw, 22px); color: var(--ink);
}
.kanren .k-list {
  display: grid; gap: clamp(12px, 1.8vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.kanren .k-item {
  display: flex; gap: 13px; align-items: center; text-decoration: none;
  padding: 10px; border: 1px solid var(--hair); background: var(--ground);
  transition: border-color .3s, background .3s;
}
.kanren .k-item:hover { border-color: var(--hair-2); background: var(--pale); }
.kanren .k-ph { flex: 0 0 68px; height: 68px; overflow: hidden; background: var(--pale); display: block; }
.kanren .k-ph img { width: 68px; height: 68px; object-fit: cover; display: block; }
.kanren .k-noph { border: 1px solid var(--hair); }
.kanren .k-tt {
  flex: 1 1 auto; min-width: 0; font-size: .89rem; line-height: 1.62; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kanren .k-item:hover .k-tt { color: var(--ink); }
.kanren .k-item:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; }
@media (max-width: 480px) {
  .kanren .k-list { grid-template-columns: 1fr; }
  .kanren .k-tt { -webkit-line-clamp: 2; }
}