/* 金継ぎ 追補CSS — 鍼灸マッサージ院 和からだみなおし処
   2026-08-27 金継ぎ診断の修理を反映（散らかり度 63/73/73 → 10/10/10・破れ0）。
   base.html で最後に読み込む＝本体のCSSは1行も変えずにここだけで上書きする。
   外すときはこのファイルの link を base.html から消すだけでよい。 */
/* ── 1. 破れ: 低コントラスト ──
   白文字は白のまま、地を「同じ色相のまま深く」して床(4.5)に載せる。
   役割の色（金・オレンジ・LINEの緑・青）は色相を保つので意味は消えない。 */
html body .tp-sym-note                { color: #6B7280 !important; }
html body .copy                       { color: #6B7280 !important; }
html body .tp-slider::after           { color: #6B7280 !important; }
html body .tp-btn-gold                { background: #886F1D !important; border-color: #886F1D !important; }
html body .tp-btn-gold:hover          { background: #6E5A17 !important; border-color: #6E5A17 !important; }
html body .tp-book-promo .bp-btn-amzn { background: #B45309 !important; }
html body .cf-btn-primary             { background: #1D4ED8 !important; }
html body .cf-btn-line                { background: #047230 !important; }
html body .cf-btn-orange              { background: #B45309 !important; }

/* ── 2. 乱れ: 文字サイズの段数（役割ごとに段を決める）──
   本文 {14/16/22.4}・見出しh3 {16.8/20.8}・ボタン {13.8/15.2}・その他 {13.1/15.4/25.6} */
html body .tp-sym-card li             { font-size: 16px !important; }
html body .cf-card p                  { font-size: 16px !important; }
html body .tp-sym-note                { font-size: 16px !important; }
html body .tp-flow-card p             { font-size: 16px !important; }
html body .tp-career                  { font-size: 16px !important; }
html body .foot-brand                 { font-size: 16px !important; }
html body .copy                       { font-size: 14px !important; }
html body .tp-flow-card h3            { font-size: 16.8px !important; }
html body .cf-card h4                 { font-size: 16.8px !important; }
html body .tp-prof-r h4               { font-size: 16.8px !important; }
html body .tp-sym-card .tp-sym-h      { font-size: 16.8px !important; }
html body .tp-card-title              { font-size: 15.2px !important; }
html body .tp-book-promo .bp-btn      { font-size: 15.2px !important; }
html body .tp-menu-link               { font-size: 15.2px !important; }
html body .tp-card-desc               { font-size: 13.8px !important; }
html body .tp-card-price              { font-size: 13.8px !important; }
html body .nav-inner                  { font-size: 13.8px !important; }
html body .foot-nav                   { font-size: 13.8px !important; }
/* 「その他」の役割は {13.6 / 15.4 / 24} の3段（正規化で段が動いたので合わせ直した・2026-08-27） */
html body .tp-flow-arrow                    { font-size: 15.4px !important; }
html body .tp-flow-num                      { font-size: 15.4px !important; }
html body .tp-book-promo .bp-desc           { font-size: 15.4px !important; }
html body .tp-pillar                        { font-size: 13.6px !important; }
html body .tp-book-promo .bp-label          { font-size: 13.6px !important; }

/* h3 は全幅で {20.8 / 16.8} の2段に揃える（20.8 を先・16.8 を後に置いて上書き順を作る） */
html body .home-body h3               { font-size: 20.8px !important; }
html body .tp-h3                      { font-size: 20.8px !important; }
html body .tp-prof-r h3               { font-size: 20.8px !important; }
html body .tp-flow-card h3            { font-size: 16.8px !important; }
html body .cf-card h4                 { font-size: 16.8px !important; }
html body .tp-prof-r h4               { font-size: 16.8px !important; }
html body .tp-sym-card .tp-sym-h      { font-size: 16.8px !important; }
/* 本文は {14 / 16 / 22.4} の3段 */
html body p.tp-p                      { font-size: 16px !important; }
html body .tp-sec p                   { font-size: 16px !important; }
/* ボタンは {13.8 / 15.2} の2段（幅768px以下でナビだけ15pxに割れていた） */
html body div.wrap.nav-inner > a,
html body .nav-inner .nav-item > a    { font-size: 13.8px !important; }

/* ── 3. 乱れ: 角丸を3種へ {12/16/999} ── */
html body .home-body h2               { border-radius: 12px !important; }
html body .tp-hero video              { border-radius: 12px !important; }
html body .tp-book-promo .bp-cover img { border-radius: 12px !important; }
html body .tp-book-promo              { border-radius: 16px !important; }
html body .cf-section                 { border-radius: 16px !important; }

/* ── 4. 乱れ: 似て非なる色 ──
   生成り3色（#FAF8F5 / #FAF5EF / #F8F5F0）は白へ潰さず、いちばん面積の広い
   #FAF8F5 に統合する＝「温かい」の狙いを残したまま段を減らす。
   罫線の #CCCCCC・#E5E7EB は同じ役割の暖色の線 #E3DED4 へ寄せる。 */
html body .home-body .cf-card         { background: #FAF8F5 !important; }
html body .home-body .cf-section      { border-color: #E3DED4 !important; }
html body .tp-career                  { border-color: #E3DED4 !important; }
html body .tp-career th               { border-color: #E3DED4 !important; }
html body .tp-career td               { border-color: #E3DED4 !important; }

/* ── 5. 幅768px以下（タブレット・スマホ）── */
@media (max-width: 768px) {
  /* 5-1 破れ: 低コントラスト */
  html body a.nagomi-map-link         { background: #B45309 !important; }
  html body .nagomi-news-detail       { background: #B45309 !important; }
  html body .nagomi-news-label-mag    { background: #047230 !important; }
  html body .nagomi-cta-line          { background: #047230 !important; }
  html body .nagomi-cta-web           { background: #B45309 !important; }

  /* 5-2 破れ: 極小文字（7〜11px）を段の中へ引き上げる */
  html body .nagomi-news-label        { font-size: 13.6px !important; }
  html body .nagomi-news-title        { font-size: 13.6px !important; }
  html body .nagomi-hours-day         { font-size: 13.6px !important; }
  html body .nagomi-hours-time        { font-size: 13.6px !important; }
  html body .nagomi-info-address      { font-size: 14px !important; }
  html body .nagomi-news-detail       { font-size: 13.8px !important; }
  html body a.nagomi-map-link         { font-size: 13.8px !important; }
  html body .nagomi-cta-btn span      { font-size: 13.8px !important; }
  html body .nagomi-info-hours h3     { font-size: 16.8px !important; }
  html body .nagomi-info-access h3    { font-size: 16.8px !important; }
  html body .tp-menu-link             { font-size: 15.2px !important; }

  /* 5-3 破れ: 小タップ標的（両辺24px以上） */
  html body a.nagomi-map-link   { display: block !important; box-sizing: border-box !important;
                                  min-height: 32px !important; padding: 8px 12px !important; }
  html body .nagomi-news-detail { display: inline-block !important; box-sizing: border-box !important;
                                  min-height: 26px !important; min-width: 48px !important;
                                  padding: 8px 12px !important; text-align: center !important; }

  /* 5-4 乱れ: 絶望のz-index（層は 1/10/100 の3段） */
  html body #nagomi-cta-bar     { z-index: 100 !important; }

  /* 5-5 乱れ: 角丸を3種へ */
  html body .nav-burger span    { border-radius: 999px !important; }
  html body .nagomi-news-label  { border-radius: 12px !important; }
  html body .nagomi-news-detail { border-radius: 999px !important; }
  html body a.nagomi-map-link   { border-radius: 12px !important; }
  html body .nagomi-info-hours  { border-radius: 16px !important; }
  html body .nagomi-info-access { border-radius: 16px !important; }
  html body .nagomi-info-news   { border-radius: 16px !important; }

  /* 5-6 乱れ: 生成りの統合（新着バーの地も同じ1色へ） */
  html body #nagomiInfoBar      { background: #FAF8F5 !important; }
}

/* ── 6. 型紙 center-share を外す（手順3・本文だけ左揃えに戻す）──
   見出しと短い一文（注記・住所・電話）は中央のまま。長く読む本文だけ左へ戻す。
   行の頭が毎行そろうので、読む負担が下がる。文言は1文字も変えていない。 */
html body .tp-sec p        { text-align: left !important; }
html body p.tp-p           { text-align: left !important; }
html body .tp-flow-card p  { text-align: left !important; }
html body .tp-prof-r p     { text-align: left !important; }
/* 予約ブロック（.tp-book）は .tp-sec の中にあるが、長い本文ではなく短い一文なので中央のまま。2026-09-21 */
html body .tp-book p       { text-align: center !important; }

/* ── 7. 対話フォーマット（ハリーちゃん×院長の記事・82本で共有）──
   フェーズ1。共有クラスだけをここで直す（ページ固有の色はソース側で寄せる）。
   金は3種（#C9A96E / #8B6F1F / #B8902F）に割れていたので #795E2D の1本へ統合。
   テラコッタ #C4694E は文字にも地にも使われるので、深めれば両方の用途で床を越える。 */
html body .speaker-name          { font-size: 13px !important; color: #795E2D !important; }
html body .r-cat                 { font-size: 12px !important; color: #795E2D !important; }
html body .bubble-doctor p strong { color: #9B4B34 !important; }
html body .bubble-harry p strong  { color: #9B4B34 !important; }
html body .info-box p            { color: #6B7280 !important; }

/* ── 8. 主要動線をひとつに（手順4①・2026-08-27 社長承認）──
   本命は Web予約フォーム。固定バーは3つ横並びで本命が右端だったので、
   Web予約を widthで倍に取り、電話・LINEは控えめにして「次の一歩」を1つに見せる。
   行き先・文言・並びのDOMは変えていない（幅と色だけ）。 */
@media (max-width: 768px) {
  html body #nagomi-cta-bar               { display: flex !important; }
  html body #nagomi-cta-bar .nagomi-cta-btn { flex: 1 1 0 !important; }
  html body #nagomi-cta-bar .nagomi-cta-web { flex: 1 1 0 !important; font-weight: 800 !important; }
  html body #nagomi-cta-bar .nagomi-cta-tel,
  html body #nagomi-cta-bar .nagomi-cta-line { opacity: 0.92 !important; }
}

/* ── 9. トップの地図（社長要望 2026-08-27）──
   幅768px以下では画面の横いっぱいに広げる。容れ物の <p> の左右余白を
   打ち消して、画面幅ぶんだけ外へはみ出させる（全幅の帯にする定石）。
   整列台帳が指摘していた「地図が中央から左へずれる」も、全幅にすることで解消する。 */
html body .home-body .tp-map { display: block !important; width: 100% !important;
                               border: 0 !important; aspect-ratio: 16 / 10 !important; height: auto !important;
                               margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 768px) {
  html body .home-body #access > p:has(> .tp-map) { margin-left: 0 !important; margin-right: 0 !important;
                                                    padding-left: 0 !important; padding-right: 0 !important; }
  html body .home-body .tp-map { width: 100vw !important;
                                 margin-left: calc(50% - 50vw) !important;
                                 margin-right: calc(50% - 50vw) !important;
                                 aspect-ratio: 4 / 3 !important;
                                 border-radius: 0 !important; }
}

/* ── 10. 内部リンクボタンは中央（社長要望 2026-08-27）──
   記事もページも自前の <style> を持っていて左寄せがばらばらに残るので、
   追補CSS側でまとめて中央に寄せる。矢印つきのカードは矢印だけ右端に残す。 */
html body .tp-menu-link,
html body .tp-btn-gold,
html body a.linkbtn,
html body .related-btn,
html body .related-card,
html body .as-card,
html body .tp-card,
html body .guide-card,
html body .sk-info-btn,
html body .bp-btn,
html body .fv-btn,
html body .cta-btn,
html body .cta-btn-web,
html body .mn-btn,
html body .nagomi-cta-btn,
html body a.nagomi-map-link,
html body .nagomi-news-detail { text-align: center !important; }

html body .related-btn,
html body .related-card,
html body .as-card,
html body .tp-card            { justify-content: center !important; }

/* 文字のかたまり自体も中央に（左寄せの入れ子を打ち消す） */
html body .related-btn-text,
html body .related-card-text,
html body .as-card-text,
html body .tp-card-body       { text-align: center !important; }

/* 矢印は右端に残す＝押せる場所が分かるように */
html body .as-card::after,
html body .related-card::after { margin-left: auto !important; }

/* ── 11. ボタンそのものを中央に（社長指摘 2026-08-27）──
   本文を左揃えに戻したとき、ボタン1個だけを包んでいる <p> まで左揃えになり、
   ボタンが画面の左端に寄ってしまっていた。ボタンを含む段落だけ中央へ戻す。
   （中の文字ではなく、ボタンの箱そのものの位置の話） */
html body .tp-sec p:has(> .tp-menu-link),
html body .tp-sec p:has(> .bp-btn),
html body .tp-sec p:has(> .linkbtn),
html body .home-body p:has(> .tp-menu-link),
html body .home-body p:has(> .bp-btn),
html body .article-body p:has(> .linkbtn),
html body .article-body p:has(> .cta-btn),
html body p:has(> a.tp-btn-gold)   { text-align: center !important; }

/* 保険: ボタン自体をインラインブロックのまま左右autoで中央に置ける形にする */
html body .tp-menu-link,
html body .bp-btn             { margin-left: auto !important; margin-right: auto !important; }

/* ── 12. メニューの階層を復活（社長要望 2026-08-27）──
   WordPress時代は「料金/メニュー」「通院中の方へ」「治療院情報」の下に
   子メニューがぶら下がっていた。移設で消えていたので戻す。
   PCはホバーで開き、スマホはタップ（チェックボックス）で開く＝JSは使わない。 */
html body .nav-item.has-sub { position: relative; display: inline-block; }

/* PC: ホバーで下に出す */
@media (min-width: 769px) {
  html body .nav-item.has-sub > .subnav {
    display: none; position: absolute; left: 50%; transform: translateX(-50%);
    top: 100%; z-index: 100; min-width: 220px; padding: 8px 0;
    background: #2C1810; border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  }
  html body .nav-item.has-sub:hover > .subnav,
  html body .nav-item.has-sub:focus-within > .subnav { display: block; }
  html body .nav-item.has-sub > .subnav a {
    display: block; padding: 10px 18px; white-space: nowrap; text-align: center;
    font-size: 13.8px; color: #FFFFFF; text-decoration: none;
  }
  html body .nav-item.has-sub > .subnav a:hover { background: #795E2D; }
  html body .nav-item.has-sub > .sub-caret { display: none; }
}

/* スマホ: 親の右に▼、タップで開く */
@media (max-width: 768px) {
  html body .nav-item.has-sub { display: block; width: 100%; }
  html body .nav-item.has-sub > a { display: inline-block; }
  html body .nav-item.has-sub > .sub-caret {
    display: inline-block; width: 44px; height: 44px; line-height: 44px;
    text-align: center; cursor: pointer; vertical-align: middle;
    color: #3E4A3D; font-size: 13.8px;
  }
  html body .nav-item.has-sub > .sub-caret::after { content: "▼"; display: inline-block; transition: transform .2s; }
  html body .nav-item.has-sub > .sub-toggle:checked ~ .sub-caret::after { transform: rotate(180deg); }
  html body .nav-item.has-sub > .subnav { display: none; }
  html body .nav-item.has-sub > .sub-toggle:checked ~ .subnav { display: block; }
  html body .nav-item.has-sub > .subnav {
    background: #FAF8F5 !important; margin: 0 0 4px !important;
  }
  html body .nav-item.has-sub > .subnav a {
    display: block; padding: 13px 16px 13px 34px; text-align: left;
    font-size: 13.8px; color: #3E4A3D !important; text-decoration: none;
    border-top: 1px solid #E3DED4;
  }
  html body .nav-item.has-sub > .subnav a::before { content: "└ "; color: #795E2D; }
}

/* ── 2026-10-15 追補：お問い合わせブロックを和からだの色に（白地・線は#E3DED4）。著作権表示の色は他ページの近似色と衝突するので据え置き ── */
html body .cf-card                    { background: #FFFFFF !important; border: 1px solid #E3DED4 !important; }
html body .cf-section                 { border-color: #E3DED4 !important; }
html body .home-body .tp-voice-note, html body .home-body .tp-book-note { color: #6B7280 !important; }
html body .home-body .tp-book         { background: #FFFFFF !important; }

/* ── 2026-10-16 追補：会話型の記事（81ページ）とサイト共通部品の文字の段をそろえる（色は変えない）── */
html body aside.wrap > p              { font-size: 14px !important; }
html body div.wrap > a                { font-size: 14px !important; }
html body .speaker-name               { font-size: 12px !important; }
html body .bubble-harry > p, html body .bubble-doctor > p { font-size: 16px !important; }
html body .bubble-harry > p + p, html body .bubble-doctor > p + p { margin-top: 8px !important; }