/* ブログ記事「見せる版」（2026-10-21 本番へ。戻し方は before_edit/hp_blog_miseru_20261021/元に戻す.md）
 *
 * 入れる場所：テーマの css/blog.css（single.php から、ブログ記事のときだけ読む）
 * トップ（css/top.css）と同じ言葉でそろえる：藍の面・銅の細い線・明朝・Cormorant の番号と英字・水彩・ずらした細い額
 *
 * ⚠️ブログ記事（body.single-post）だけ。施術者・お客様の声・トップ・LPには当たらない
 * ⚠️本文（DB）は1文字も変えない。直書きの style="" は属性で拾って上書きする（公開193本で6種類にそろっている）
 * ⚠️古い記事（68本）は本文が <div><div> に包まれている。「.entry >」の直下指定にしない
 * ⚠️「html.b-on」は js/blog.js が付ける。JSが動かないときは、前半の「土台」だけが効く（それでも全部読める）
 * ⚠️写真・絵は動かさない。動くのは藍の幕・額縁（clip-path）・銅の線・文字の濃さだけ
 */

body.single-post {
  --b-ai: #1B3F7A;
  --b-ai-2: #15325F;
  --b-dou: #9C5A34;
  --b-dou-soft: #C8875A;
  --b-line: #06C755;
  --b-line-ink: #08361C;
  --b-latin: "Cormorant Garamond", "Times New Roman", serif;
  --b-rule: color-mix(in srgb, var(--ai) 22%, transparent);
  /* 水彩の地（絵の線画の下に敷く。暗い表示でも紙の色のまま） */
  --b-wash: radial-gradient(60% 70% at 22% 30%, rgba(176, 200, 230, .55), transparent 70%),
            radial-gradient(50% 60% at 82% 72%, rgba(232, 205, 178, .45), transparent 70%),
            radial-gradient(70% 80% at 60% 20%, rgba(214, 228, 244, .7), transparent 75%),
            #F4F7FB;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.single-post { --b-dou: #C8875A; }
}
:root[data-theme="dark"] body.single-post { --b-dou: #C8875A; }

/* ════════════════════ 土台（JSが無くても効く） ════════════════════ */

/* 本文の文字（.post p が当たって 13.76px・灰色だったのを、9/16に決めた値へ） */
body.single-post .entry p:not([class]),
body.single-post .entry li {
  font-size: 1.06rem; line-height: 2.05; color: var(--ink-2); font-weight: 400; letter-spacing: .02em;
}
body.single-post .entry li { line-height: 1.95; margin-bottom: .5em; }
@media (max-width: 760px) {
  body.single-post .entry p:not([class]), body.single-post .entry li { font-size: 1.04rem; line-height: 2.0; }
}
body.single-post .entry p:empty { display: none; }
body.single-post .entry strong {
  font-weight: 500; color: var(--ink);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--b-dou) 55%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-skip-ink: all;
}
body.single-post .entry ul li::marker { color: var(--b-dou); }

/* 小見出し */
body.single-post .entry h3 { font-weight: 500; color: var(--ink); border-bottom-color: var(--b-rule); }

/* 本文のボタン：トップと同じ緑（文字は濃い緑で読めるように 5.99:1）。noteは藍の枠 */
body.single-post .entry a[style*="#06C755"] {
  background: var(--b-line) !important; color: var(--b-line-ink) !important; font-weight: 700 !important;
  letter-spacing: .06em; padding: 14px 22px !important; border-radius: 4px !important; text-decoration: none !important;
  display: inline-flex !important; align-items: center; justify-content: center;
}
body.single-post .entry a[style*="#f0a500"] {
  background: transparent !important; color: var(--ai) !important; border: 1px solid var(--ai) !important;
  font-weight: 500 !important; letter-spacing: .06em; padding: 13px 22px !important; border-radius: 4px !important;
  text-decoration: none !important;
}

/* 冒頭・末尾の免責：塗りをやめて上下の細線。文は全部見せる */
body.single-post .entry div[style*="#2e8b57"],
body.single-post .entry div[style*="#f5f5f5"] {
  background: transparent !important; border: 0 !important;
  border-top: 1px solid var(--hair) !important; border-bottom: 1px solid var(--hair) !important;
  border-radius: 0 !important; padding: 14px 2px !important; color: var(--ink-2) !important;
  font-size: .86rem !important; line-height: 1.95 !important;
}
body.single-post .entry div[style*="#f5f5f5"] p { font-size: .86rem; line-height: 1.95; }

/* 途中のLINE・最後のLINE・note・院情報の箱：角丸と太枠をやめ、白地に細線 */
body.single-post .entry div[style*="#f0f9f0"],
body.single-post .entry div[style*="2px solid #06C755"],
body.single-post .entry div[style*="solid #f0a500"],
body.single-post .entry div[style*="2px solid #4CAF50"] {
  background: var(--ground) !important; border: 1px solid var(--b-rule) !important;
  border-radius: 0 !important; padding: 26px 22px !important; box-shadow: none !important;
}
body.single-post .entry div[style*="#f0f9f0"] { border-left: 2px solid var(--b-line) !important; }
body.single-post .entry div[style*="solid #f0a500"] { border-top: 2px solid var(--b-dou) !important; }
body.single-post .entry div[style*="#f0f9f0"] p,
body.single-post .entry div[style*="2px solid #06C755"] p,
body.single-post .entry div[style*="solid #f0a500"] p,
body.single-post .entry div[style*="2px solid #4CAF50"] p { font-size: .94rem; line-height: 1.95; margin: 0 0 .8em; color: var(--ink-2) !important; }
body.single-post .entry div[style*="#f0f9f0"] strong { text-decoration: none; font-family: var(--min); }
body.single-post .entry div[style*="2px solid #06C755"] h3,
body.single-post .entry div[style*="solid #f0a500"] h3,
body.single-post .entry div[style*="2px solid #4CAF50"] h3 {
  color: var(--ai) !important; border: 0 !important; padding: 0 !important; margin: 0 0 .7em !important;
  font-family: var(--min); font-weight: 500; font-size: 1.08rem !important; line-height: 1.75;
}
/* 院情報の箱のもう1つの形（2026-10-21追記）：blog_agent.py の指示文に「2px solid #2e8b57」の院情報の箱が残っている（公開194本では0本）。
   出たときに上の免責の形（#2e8b57 を拾う）にならないよう、ほかの箱と同じ白地に細線へそろえる */
body.single-post .entry div[style*="2px solid #2e8b57"] {
  background: var(--ground) !important; border: 1px solid var(--b-rule) !important;
  border-radius: 0 !important; padding: 26px 22px !important; box-shadow: none !important;
  font-size: inherit !important; line-height: inherit !important;
}
body.single-post .entry div[style*="2px solid #2e8b57"] p { font-size: .94rem; line-height: 1.95; margin: 0 0 .8em; color: var(--ink-2) !important; }
body.single-post .entry div[style*="2px solid #2e8b57"] h3 {
  color: var(--ai) !important; border: 0 !important; padding: 0 !important; margin: 0 0 .7em !important;
  font-family: var(--min); font-weight: 500; font-size: 1.08rem !important; line-height: 1.75;
}
body.single-post .prof-box .nt, body.single-post .entry .byline span { color: var(--ink-3); }

/* ════════════════════ 見せる版（html.b-on のときだけ） ════════════════════ */

/* 上の余白（テーマの section の padding）が扉を押し下げるので消す。トップの .tp-hero{padding:0} と同じ理由 */
html.b-on section.b-sec { padding-top: 0; }
html.b-on section.b-sec .crumbs:empty { display: none; }
html.b-on .single-post .b-moved { display: none !important; }

/* ── ① 扉：水彩の地に線画の挿絵、藍の面に明朝の題、銅の糸 ── */
html.b-on .single-post .post-head.b-door {
  position: relative; max-width: none; width: 100vw; padding: 0; text-align: left;
  margin: 0 0 clamp(44px, 7vw, 96px) calc(50% - 50vw);
  --p: 0; --hdr: 0px; --hdrh: 0px;
}
html.b-on .b-stage { position: relative; overflow: hidden; background: var(--ground); }
html.b-on .b-panel { position: absolute; inset: 0; background: linear-gradient(160deg, var(--b-ai), var(--b-ai-2)); }
html.b-on .b-frame { position: relative; background: var(--b-wash); }
html.b-on .b-art { position: relative; margin: 0; overflow: hidden; }
/* 🔴絵は動かさない：transform で位置を決めるだけ。アニメーションはかけない */
/* ⚠️本文に置かれた絵（42本）は style="width:100%;height:auto" を持つので !important で上書きする */
html.b-on .b-art img {
  display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover;
  mix-blend-mode: multiply; border-radius: 0 !important;
}
/* 写真（32本は院内の写真）は水彩の地と重ねない */
html.b-on .b-art:not(.b-band) img { mix-blend-mode: normal; }
/* 題の帯がある絵（1200×900）は、上の63%だけを見せる */
html.b-on .b-art.b-band img {
  position: absolute; top: 0; left: 50%; width: auto !important; height: calc(100% / .63) !important; transform: translateX(-50%);
}
html.b-on .b-intro { position: relative; color: #fff; }
html.b-on .b-kick, html.b-on .b-after .b-k, html.b-on .b-rail .b-k, html.b-on .b-card-k, html.b-on .b-visit-k, html.b-on .b-en {
  font-family: var(--b-latin); font-style: italic; font-weight: 400; font-size: 15px; line-height: 1;
  letter-spacing: .08em; white-space: pre; margin: 0;
}
html.b-on .b-kick { color: #E7C3A4; margin-bottom: 18px; }
html.b-on .b-door h1 {
  font-family: var(--min); font-weight: 500; color: #fff; text-align: left;
  font-size: clamp(1.5rem, 6.4vw, 2.05rem); line-height: 1.62; letter-spacing: .07em;
  margin: 0 0 22px; text-wrap: balance;
}
html.b-on .b-door .meta {
  display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .28); color: #D3DEE8; font-size: 12.5px; letter-spacing: .06em;
}
html.b-on .b-door .meta span { color: #D3DEE8; }
html.b-on .b-door .meta span + span::before { content: "／"; margin: 0 .6em; color: rgba(255, 255, 255, .4); }
html.b-on .b-door .meta span:first-child { font-family: var(--b-latin); font-size: 14px; letter-spacing: .1em; }
svg.b-thread { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
svg.b-thread path {
  fill: none; stroke: var(--b-dou-soft); stroke-width: 1.25; vector-effect: non-scaling-stroke;
  stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: b-draw 2.4s .5s cubic-bezier(.6, 0, .2, 1) forwards;
}
@keyframes b-draw { to { stroke-dashoffset: 0; } }
html.b-on .b-scroll { display: none; }
html.b-on .b-after { display: none; }

/* スマホ：上に水彩の挿絵（画面いっぱいの幅）、下に藍の面と題。動きは銅の糸だけ */
@media (max-width: 899px) {
  html.b-on .b-panel { top: auto; height: auto; bottom: 0; }
  html.b-on .b-frame { padding: 26px 0 0; }
  html.b-on .b-art { aspect-ratio: 8 / 5; margin: 0 20px; }
  html.b-on .b-art::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(27, 63, 122, .18); pointer-events: none; }
  html.b-on .b-noart .b-frame { display: none; }
  html.b-on .b-stage { background: linear-gradient(160deg, var(--b-ai), var(--b-ai-2)); }
  html.b-on .b-panel { display: none; }
  html.b-on .b-frame { background: var(--b-wash); padding-bottom: 26px; }
  html.b-on .b-intro { padding: 30px 20px 34px; }
  svg.b-thread { display: none; }   /* トップと同じく、スマホでは糸を引かない（題に重なるため） */
}

/* PC：トップと同じ組み方。左に藍の面と題、右に水彩の地と挿絵。下へ送ると藍が引き、額縁が絵の際まで退く */
@media (min-width: 900px) {
  html.b-on .b-door.b-anim { height: 165svh; }
  html.b-on .b-stage { height: calc(100svh - var(--hdrh)); min-height: 520px; }
  html.b-on .b-door.b-anim .b-stage { position: sticky; top: var(--hdr); }
  html.b-on .b-panel { right: auto; width: 44vw; opacity: calc(1 - var(--p) * 1.8); }
  html.b-on .b-frame {
    position: absolute; top: 0; bottom: 0; left: 44vw; right: 0; display: grid; place-items: center;
    clip-path: inset(calc(var(--p) * 12%) calc(var(--p) * 2.4vw) calc(var(--p) * 12%) calc(var(--p) * 2.4vw));
  }
  html.b-on .b-art { width: min(46vw, 760px); aspect-ratio: 1200 / 756; }
  html.b-on .b-art::after {
    content: ""; position: absolute; inset: 14px; border: 1px solid rgba(27, 63, 122, .16); pointer-events: none;
  }
  html.b-on .b-frame::after {
    content: ""; position: absolute; width: min(46vw, 760px); aspect-ratio: 1200 / 756;
    transform: translate(14px, 14px); border: 1px solid var(--b-dou-soft); opacity: .55; pointer-events: none;
  }
  html.b-on .b-noart .b-panel { width: 100vw; }
  html.b-on .b-noart .b-frame { display: none; }
  html.b-on .b-intro {
    position: absolute; left: clamp(28px, 6vw, 88px); top: 0; bottom: 0; width: calc(44vw - clamp(28px, 6vw, 88px) - 48px);
    display: flex; flex-direction: column; justify-content: center; opacity: calc(1 - var(--p) * 2.4);
  }
  html.b-on .b-door h1 { font-size: clamp(1.6rem, 2.45vw, 2.45rem); line-height: 1.7; letter-spacing: .08em; margin-bottom: 28px; }
  html.b-on .b-kick { margin-bottom: 22px; }
  svg.b-thread { opacity: calc(1 - var(--p) * 2.2); }
  html.b-on .b-scroll {
    display: block; position: absolute; left: clamp(28px, 6vw, 88px); bottom: max(22px, 5%); margin: 0;
    font-family: var(--b-latin); font-size: 12px; letter-spacing: .3em; color: #fff; opacity: calc(.85 - var(--p) * 3);
  }
  html.b-on .b-scroll i { display: inline-block; vertical-align: middle; width: 48px; height: 1px; margin-left: 12px; background: linear-gradient(90deg, #fff, transparent); animation: b-drip 2.2s infinite; transform-origin: left; }
  @keyframes b-drip { 0% { transform: scaleX(0); } 55% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

  /* 額縁が退いたあとの白い画面：この記事の章 */
  html.b-on .b-door.b-anim .b-after {
    display: block; position: absolute; left: clamp(28px, 6vw, 88px); top: 50%; transform: translateY(-50%);
    width: calc(44vw - clamp(28px, 6vw, 88px) - 24px); opacity: var(--a, 0); pointer-events: none;
  }
  html.b-on .b-after[aria-hidden="false"] { pointer-events: auto; }
  html.b-on .b-after .b-k { color: var(--b-dou); margin-bottom: 14px; }
  html.b-on .b-after .b-kt { font-family: var(--min); font-size: clamp(1.4rem, 2.2vw, 2rem); color: var(--ai); letter-spacing: .08em; margin: 0 0 26px; line-height: 1.5; }
  html.b-on .b-after ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--b-rule); }
  html.b-on .b-after li { border-bottom: 1px solid var(--b-rule); }
  html.b-on .b-after a { border: 0 !important; background: none !important; display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 12px 0; text-decoration: none; color: var(--ink-2); font-size: .9rem; line-height: 1.7; }
  html.b-on .b-after a .n { font: 300 1.25rem/1.3 var(--b-latin); color: var(--b-dou); }
}

/* ── ② 記事の頭の残り：目次・書いた人・書き出し ── */
html.b-on .single-post .toc {
  background: transparent; border: 0; border-top: 1px solid var(--b-rule); border-bottom: 1px solid var(--b-rule);
  padding: 22px 2px 14px; border-radius: 0;
}
html.b-on .single-post .toc > .t { font-family: var(--min); font-weight: 500; color: var(--ai); display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
html.b-on .single-post .toc > .t::before {
  content: "Contents"; width: auto; height: auto; background: none;
  font-family: var(--b-latin); font-style: italic; font-weight: 400; font-size: 15px; letter-spacing: .08em; color: var(--b-dou);
}
html.b-on .single-post .toc li.d2 { display: none; }
html.b-on .single-post .toc li { padding-left: 44px; margin-bottom: 10px; }
html.b-on .single-post .toc li::before { font-family: var(--b-latin); font-weight: 300; font-size: 1.3rem; line-height: 1.3; color: var(--b-dou); top: 0; }
html.b-on .single-post .toc a { color: var(--ink-2); text-decoration: none; }
html.b-on .single-post .entry .byline { border-bottom: 0; }
html.b-on .single-post .entry p.b-lead {
  font-family: var(--min); font-size: 1.14rem; line-height: 2.1; color: var(--ink); letter-spacing: .04em;
}
/* 箱の見出し・ボタンの絵文字（WordPressが画像に置きかえたもの）を出さない。WordPress側が !important なのでこちらも */
html.b-on .single-post article img.emoji, html.b-on .single-post article img.wp-smiley { display: none !important; }

/* 症状のページ・空いている日の2つの丸いボタン → トップと同じ「文字と矢印」 */
html.b-on .single-post .entry nav.jump { display: flex; flex-wrap: wrap; gap: 6px 26px; border-top: 1px solid var(--b-rule); padding-top: 16px; }
html.b-on .single-post .entry nav.jump a {
  border: 0 !important; border-radius: 0 !important; padding: 4px 0 !important; background: none !important;
  color: var(--ai) !important; font-size: .92rem; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--b-rule);
}

/* ── ③ 章の扉：大きな番号・英字・明朝の題 ── */
html.b-on .single-post .b-chead {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: end;
  margin: clamp(80px, 12vw, 136px) 0 clamp(26px, 4vw, 40px); padding-top: 26px; position: relative;
  border-top: 1px solid var(--b-rule);
}
html.b-on .single-post .b-chead::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 1px; background: var(--b-dou);
}
html.b-on .single-post .b-no { display: flex; flex-direction: column; align-items: flex-start; align-self: start; }
html.b-on .single-post .b-no .n {
  font-family: var(--b-latin); font-weight: 300; font-size: clamp(64px, 17vw, 76px); line-height: .82; letter-spacing: .01em; color: var(--b-dou);
  font-variant-numeric: lining-nums;
}
html.b-on .single-post .b-no .of { font-family: var(--b-latin); font-style: italic; font-size: 13px; color: var(--ink-3); margin-top: 8px; letter-spacing: .08em; }
html.b-on .single-post .b-side { min-width: 0; }
html.b-on .single-post .b-en { color: var(--b-dou); margin-bottom: 12px; }
html.b-on .single-post .entry h2.b-h2 {
  border: 0; padding: 0; margin: 0; position: static;
  font-family: var(--min); font-weight: 500; color: var(--ai);
  font-size: clamp(1.32rem, 4.6vw, 1.85rem); line-height: 1.62; letter-spacing: .06em; text-wrap: balance;
}
html.b-on .single-post .entry h2.b-h2::before, html.b-on .single-post .entry h2.b-h2::after { display: none; }
@media (max-width: 899px) {
  html.b-on .single-post .b-chead { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  html.b-on .single-post .b-no { flex-direction: row; align-items: baseline; gap: 10px; }
  html.b-on .single-post .b-no .of { margin: 0; }
}

/* ── ④ 問いと答え：淡い藍の札。Q は銅の斜体 ── */
html.b-on .single-post .b-qa {
  background: var(--pale); padding: 24px 22px 8px; margin: 0 0 14px; border-top: 1px solid var(--b-rule);
}
html.b-on .single-post .b-qa + .b-qa { margin-top: 0; }
html.b-on .single-post .entry .b-qa h3.b-q {
  border: 0; padding: 0; margin: 0 0 .9em; font-size: 1.08rem; line-height: 1.8; color: var(--ink); letter-spacing: .04em;
}
html.b-on .single-post .entry .b-qa h3.b-q::first-letter { font-family: var(--b-latin); font-style: italic; font-weight: 400; font-size: 1.6em; color: var(--b-dou); }
html.b-on .single-post .entry .b-qa p:not([class]) { font-size: .98rem; line-height: 2; }
html.b-on .single-post .entry .b-qa p:not([class])::first-letter { color: var(--ai); }
html.b-on .single-post .entry .b-qa > :last-child { margin-bottom: 1.2em; }
html.b-on .single-post .b-chead + .b-qa, html.b-on .single-post .b-qa:first-child { margin-top: 0; }

/* ── ⑤ まとめ・章の一覧：一枚のカード。右下にずらした細い額（トップの施術者の写真と同じ形） ── */
html.b-on .single-post .b-card {
  position: relative; background: var(--ground); border: 1px solid var(--ai);
  padding: 30px 24px 22px; margin: clamp(56px, 8vw, 88px) 12px clamp(56px, 8vw, 88px) 0;
}
/* 右下にずらした銅の細い額。影2枚で描く（カードの下に隠れる所は見えない） */
html.b-on .single-post .b-card {
  box-shadow: 12px 12px 0 -1px var(--ground), 12px 12px 0 0 color-mix(in srgb, var(--b-dou-soft) 70%, transparent);
}
html.b-on .single-post .b-card-k { color: var(--b-dou); margin-bottom: 14px !important; }
html.b-on .single-post .b-card-t { font-family: var(--min); font-size: 1.2rem; color: var(--ai); letter-spacing: .08em; margin: 0 0 18px; line-height: 1.6; }
html.b-on .single-post .b-card .b-chead { margin-top: 0; border-top: 0; padding-top: 0; }
html.b-on .single-post .b-card .b-chead::before { display: none; }
html.b-on .single-post .entry .b-card h3 { border: 0; padding: 0; margin: 0 0 .9em; color: var(--ai); font-size: 1.15rem; }
html.b-on .single-post .b-card ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--b-rule); }
html.b-on .single-post .b-card li { margin: 0; padding: 0; border-bottom: 1px solid var(--b-rule); line-height: 1.7; }
html.b-on .single-post .b-card li a { border: 0 !important; background: none !important; text-decoration: none !important; display: grid; grid-template-columns: 44px 1fr; gap: 6px; padding: 13px 0; color: var(--ink-2); text-decoration: none; font-size: .95rem; }
html.b-on .single-post .b-card li a .n { font: 300 1.3rem/1.3 var(--b-latin); color: var(--b-dou); }
html.b-on .single-post .b-card li::marker { content: none; }
html.b-on .single-post .b-card > :last-child { margin-bottom: 0; }

/* ── ⑥ 途中の箱（プロフィール・予約の箱）をトップの言葉に ── */
html.b-on .single-post .prof-box { background: transparent; border: 0; border-top: 1px solid var(--b-rule); border-bottom: 1px solid var(--b-rule); border-radius: 0; }
html.b-on .single-post .prof-box .nm { font-family: var(--min); font-weight: 500; color: var(--ai); }
html.b-on .single-post .prof-box .ph { position: relative; }
html.b-on .single-post .yoyaku-mid { border: 0; border-top: 1px solid var(--b-rule); background: var(--pale); }
html.b-on .single-post .yoyaku-mid a.line { color: var(--b-line-ink); font-weight: 700; }

/* ── ⑦ 院への扉：藍の面＋水彩（本文の院情報の箱を、そのまま中に入れる） ── */
html.b-on .single-post .b-visit {
  position: relative; width: 100vw; margin: clamp(72px, 10vw, 120px) 0 0 calc(50% - 50vw);
  background: linear-gradient(160deg, var(--b-ai), var(--b-ai-2)); color: #fff;
  padding: clamp(56px, 9vw, 120px) 0;
}
html.b-on .single-post .b-visit-in {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px;
  max-width: 1084px; margin: 0 auto; padding: 0 20px;
}
html.b-on .single-post .b-visit-k { color: #E7C3A4; margin-bottom: 20px !important; }
html.b-on .single-post .b-visit .b-info {
  background: transparent !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 0 !important; padding: 22px 0 0 !important; margin: 0 !important; color: #D3DEE8 !important;
}
html.b-on .single-post .b-visit .b-info h3 {
  color: #fff !important; font-family: var(--min); font-weight: 500; font-size: clamp(1.4rem, 5vw, 2rem) !important;
  line-height: 1.55; letter-spacing: .08em; margin: 0 0 18px !important; border: 0 !important; padding: 0 !important;
}
html.b-on .single-post .b-visit .b-info p { color: #D3DEE8 !important; font-size: .93rem; line-height: 1.95; margin: 0 0 .5em; }
html.b-on .single-post .b-visit .b-info a { color: #fff !important; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .5); }
html.b-on .single-post .b-visit .b-info a[href*="line.me"] {
  display: inline-flex; margin-top: 10px; background: var(--b-line); color: var(--b-line-ink) !important; font-weight: 700;
  text-decoration: none; padding: 13px 22px; border-radius: 4px; letter-spacing: .06em;
}
html.b-on .single-post .b-visit-name { font-family: var(--min); font-size: 1.6rem; margin: 0 0 18px; }
html.b-on .single-post .b-visit-acts { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
html.b-on .single-post .b-btn.ghost {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 4px;
  color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .06em; font-size: .95rem;
}
html.b-on .single-post .b-btn.ghost::after { content: "→"; color: #E7C3A4; font-weight: 400; }
html.b-on .single-post .b-visit-art { position: relative; margin: 0; max-width: 300px; aspect-ratio: 1 / 1; order: -1; }
html.b-on .single-post .b-visit-art::after { content: ""; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid var(--b-dou-soft); opacity: .6; }
html.b-on .single-post .b-visit-art img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  html.b-on .single-post .b-visit-in { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(48px, 7vw, 110px); align-items: center; padding: 0 clamp(28px, 5vw, 56px); }
  html.b-on .single-post .b-visit-art { order: 0; max-width: none; }
}

/* ── ⑧ 関連記事：絵つきのカード。絵は題の帯を切って上だけ ── */
html.b-on .single-post .kanren.b-kanren { max-width: none; border-top: 0; padding-top: 0; margin: clamp(64px, 9vw, 104px) 0 0; }
html.b-on .single-post .b-kanren .k-hd { font-family: var(--min); font-weight: 500; font-size: clamp(1.3rem, 4vw, 1.7rem); color: var(--ai); letter-spacing: .08em; margin-bottom: 24px; }
html.b-on .single-post .b-kanren .k-hd::before {
  content: "Read next"; display: block; margin-bottom: 14px;
  font-family: var(--b-latin); font-style: italic; font-weight: 400; font-size: 15px; letter-spacing: .08em; color: var(--b-dou);
}
html.b-on .single-post .b-kanren .k-list {
  display: grid; grid-auto-flow: column; grid-auto-columns: 74%; grid-template-columns: none; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 14px; margin: 0 -20px; scrollbar-width: thin;
}
html.b-on .single-post .b-kanren .k-item {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; scroll-snap-align: start;
  border: 1px solid var(--b-rule); background: var(--ground);
}
html.b-on .single-post .b-kanren .k-item:hover { background: var(--ground); border-color: var(--ai); }
html.b-on .single-post .b-kanren .k-ph { flex: none; width: 100%; height: auto; aspect-ratio: 1200 / 756; position: relative; background: var(--b-wash); overflow: hidden; }
html.b-on .single-post .b-kanren .k-ph img { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% / .63); object-fit: cover; object-position: 50% 0; mix-blend-mode: multiply; }
html.b-on .single-post .b-kanren .k-tt {
  padding: 16px 16px 18px; font-family: var(--min); font-size: .98rem; line-height: 1.7; color: var(--ink); -webkit-line-clamp: 3;
  border-top: 1px solid var(--b-rule);
}
@media (min-width: 900px) {
  html.b-on .single-post .b-kanren .k-list { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; padding: 0; margin: 0; }
}

/* 前後の記事 */
html.b-on .single-post .post-foot { border-top: 1px solid var(--b-rule); padding-top: 22px; }
html.b-on .single-post .post-nav a { font-family: var(--min); font-size: .92rem; line-height: 1.8; }

/* ── ⑨ PC：余白を生かした段組み。左に章の番号を吊るし、右に「いま読んでいる章」のしおり ── */
html.b-on .single-post .b-rail { display: none; }
@media (min-width: 900px) {
  html.b-on body.single-post section.b-sec .wrap.mid { max-width: 1240px; }
  html.b-on .single-post article.post { max-width: 828px; margin-inline: auto; }
  html.b-on .single-post .entry { max-width: none; margin-inline: 0; padding-left: 188px; position: relative; }
  html.b-on .single-post .post-foot { max-width: none; margin-left: 0; margin-right: 0; }
  html.b-on .single-post .b-chead { margin-left: -188px; grid-template-columns: 140px minmax(0, 1fr); column-gap: 48px; padding-top: 34px; }
  html.b-on .single-post .b-chead::before { width: 140px; }
  html.b-on .single-post .b-no .n { font-size: 112px; }
  html.b-on .single-post .entry h2.b-h2 { font-size: clamp(1.6rem, 2.3vw, 2rem); }
  html.b-on .single-post .b-card .b-chead { margin-left: 0; grid-template-columns: auto minmax(0, 1fr); }
  html.b-on .single-post .b-card .b-no .n { font-size: 72px; }
  html.b-on .single-post .b-card { padding: 40px 40px 30px; }
  html.b-on .single-post .b-kanren .k-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  html.b-on .single-post article.post { max-width: 1084px; }
  html.b-on .single-post .entry.b-has-rail { padding-right: 256px; }
  html.b-on .single-post .entry.b-has-rail > .toc { display: none; }
  html.b-on .single-post .b-rail { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 200px; margin: 0; }
  html.b-on .single-post .b-rail-in { position: sticky; top: 110px; padding-top: 4px; }
  html.b-on .single-post .b-rail .b-k { color: var(--b-dou); margin-bottom: 14px; display: block; }
  html.b-on .single-post .b-rail ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--b-rule); }
  html.b-on .single-post .b-rail li { margin: 0; border-bottom: 1px solid var(--b-rule); }
  html.b-on .single-post .b-rail a { position: relative; border: 0 !important; background: none !important; text-decoration: none !important; display: grid; grid-template-columns: 34px 1fr; gap: 4px; padding: 11px 0; text-decoration: none; color: var(--ink-3); font-size: .8rem; line-height: 1.65; transition: color .3s; }
  html.b-on .single-post .b-rail a .n { font: 300 1.05rem/1.4 var(--b-latin); color: var(--ink-3); transition: color .3s; }
  html.b-on .single-post .b-rail a .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html.b-on .single-post .b-rail a.done .n { color: var(--b-dou-soft); }
  html.b-on .single-post .b-rail a.cur { color: var(--ai); }
  html.b-on .single-post .b-rail a.cur::before { content: ""; position: absolute; left: -14px; top: 18px; width: 8px; height: 1px; background: var(--b-dou); }
  html.b-on .single-post .b-rail a.cur .n { color: var(--b-dou); }
  html.b-on .single-post .b-kanren .k-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1440px) and (min-height: 600px) {
  /* 広い画面の「症状から探す」は左に貼りつく欄になるが、記事では段組みとぶつかるので下に置く */
  html.b-on body.single-post .lprail { position: static; transform: none; width: auto; margin-top: 0; padding: 52px 0 58px; background: var(--pale); border-top: 1px solid var(--hair); opacity: 1; visibility: visible; }
  html.b-on body.single-post .lprail .rail-in { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 940px; margin: 0 auto; padding: 0 56px; background: none; border: 0; box-shadow: none; max-height: none; }
}

/* 動きを減らす設定：扉は止まった1枚。銅の糸は最初から引いてある */
@media (prefers-reduced-motion: reduce) {
  svg.b-thread path { animation: none; stroke-dashoffset: 0; }
  html.b-on .b-scroll i { animation: none; }
  html.b-on .single-post .b-rail a, html.b-on .single-post .b-rail a .n { transition: none; }
}