/* 各ページ「見せる版」（2026-10-21 大樹さんの了承で本番へ）
 *
 * 入れる場所（出すと決まったら）：テーマの css/page.css
 * ブログ記事（css/blog.css）・トップ（css/top.css）と同じ言葉：藍の扉・銅の細い糸・明朝・Cormorant の番号と英字・水彩・ずらした細い額
 *
 * ⚠️このファイルを読むのは、固定ページ・施術案内・施術者・お客様の声・一覧だけ（トップ・広告LP・ブログ記事は読まない）
 * ⚠️「html.p-on」は js/page.js が付ける。JSが動かないときは何も変わらない（今の見た目のまま全部読める）
 * ⚠️本文（DB）は1文字も変えない。症状別のページは本文に class が付いている（.nayami .pillars .nagare .menu .fine .still-note .must）ので、それを拾う
 * ⚠️写真・絵は動かさない。動くのは銅の糸だけ
 */

html.p-on {
  --p-ai: #1B3F7A;
  --p-ai-2: #15325F;
  --p-dou: #9C5A34;
  --p-dou-soft: #C8875A;
  --p-line: #06C755;
  --p-line-ink: #08361C;
  --p-latin: "Cormorant Garamond", "Times New Roman", serif;
  --p-rule: color-mix(in srgb, var(--ai) 22%, transparent);
  --p-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.p-on:not([data-theme="light"]) { --p-dou: #C8875A; } }
:root.p-on[data-theme="dark"] { --p-dou: #C8875A; }

html.p-on .p-moved { display: none !important; }
html.p-on section.p-sec { padding-top: 0; }
html.p-on section.p-sec .crumbs:empty { display: none; }

/* 英字の飾り（ぜんぶ同じ字） */
html.p-on .p-kick, html.p-on .p-en, html.p-on .p-card-k, html.p-on .p-letter {
  font-family: var(--p-latin); font-style: italic; font-weight: 400; font-size: 15px; line-height: 1;
  letter-spacing: .08em; white-space: pre; margin: 0;
}

/* ════════════ ① 扉：藍の面に明朝の題、水彩の地に絵、銅の糸 ════════════ */
html.p-on .p-door {
  position: relative; max-width: none; width: 100vw; padding: 0; text-align: left;
  margin: 0 0 clamp(44px, 7vw, 92px) calc(50% - 50vw);
}
html.p-on section .head.p-door .rule, html.p-on section .head.p-door .en { display: none; }
html.p-on .p-stage { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--p-ai), var(--p-ai-2)); }
html.p-on .p-frame { position: relative; background: var(--p-wash); }
html.p-on .p-art { position: relative; margin: 0; isolation: isolate; aspect-ratio: 1 / 1; }
html.p-on .p-art.p-tall { aspect-ratio: 3 / 5; }
html.p-on .p-art img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; border-radius: 0; max-width: none; }
/* 細い額（内側の線）と、右下にずらした銅の額 */
html.p-on .p-art::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(27, 63, 122, .16); z-index: 2; pointer-events: none; }
html.p-on .p-art::before { content: ""; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid var(--p-dou-soft); opacity: .6; z-index: 0; pointer-events: none; }
html.p-on .p-art.p-photo::after { display: none; }
html.p-on .p-art.p-photo img { object-fit: cover; object-position: 50% 30%; mix-blend-mode: normal; }
html.p-on .p-intro { position: relative; color: #fff; }
html.p-on .p-kick { color: #E7C3A4; margin-bottom: 18px; }
html.p-on .p-door .p-title {
  font-family: var(--min); font-weight: 500; color: #fff; text-align: left; margin: 0; padding: 0; border: 0;
  letter-spacing: .07em; line-height: 1.6; text-wrap: balance;
}
html.p-on .p-door .p-title::before, html.p-on .p-door .p-title::after { display: none; }
html.p-on .p-door .p-t1 { display: block; font-size: clamp(1.5rem, 6.2vw, 2.05rem); text-wrap: balance; }
html.p-on .p-door .p-t2 {
  display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .28);
  font-size: .9rem; line-height: 1.8; color: #D3DEE8; letter-spacing: .06em;
}
html.p-on .p-door .p-lab { display: block; font-size: .82rem; letter-spacing: .3em; color: #D3DEE8; margin-bottom: 10px; }
html.p-on .p-door p.p-door-lead {
  margin: 22px 0 0; padding: 0; border: 0; background: none;
  font-family: var(--min); font-size: 1.02rem; line-height: 2.05; color: #E6EDF6; letter-spacing: .05em;
}
html.p-on .p-door p.cert {
  margin: 18px 0 0; font-size: 12px; letter-spacing: .16em; color: #E7C3A4;
}
svg.p-thread { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
svg.p-thread path {
  fill: none; stroke: var(--p-dou-soft); stroke-width: 1.25; vector-effect: non-scaling-stroke;
  stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: p-draw 2.4s .4s cubic-bezier(.6, 0, .2, 1) forwards;
}
@keyframes p-draw { to { stroke-dashoffset: 0; } }

/* スマホ：上に水彩の地と絵、下に藍の面と題 */
@media (max-width: 899px) {
  html.p-on .p-frame { padding: 26px 20px 34px; background: var(--p-wash); }
  html.p-on .p-art { width: min(62vw, 260px); margin: 0 auto; }
  html.p-on .p-art.p-tall { width: min(40vw, 170px); }
  html.p-on .p-intro { padding: 30px 20px 34px; }
  html.p-on .p-noart .p-intro { padding: 40px 20px 40px; }
  svg.p-thread { display: none; }
  /* 施術者：写真は縦長の額 */
  html.p-on .p-meishi .p-art { aspect-ratio: 4 / 5; width: min(64vw, 260px); }
}

/* PC：左に藍の面と題、右に水彩の地と絵（トップ・ブログ記事の扉と同じ組み方。こちらは動かない一枚） */
@media (min-width: 900px) {
  /* 右半分は水彩の地、左は藍の面（::before）。糸はその上、絵と字はさらに上 */
  html.p-on .p-stage { display: grid; grid-template-columns: 46vw minmax(0, 1fr); min-height: min(72svh, 640px); background: var(--p-wash); }
  html.p-on .p-stage::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 46vw; background: linear-gradient(160deg, var(--p-ai), var(--p-ai-2)); }
  html.p-on .p-intro { z-index: 2; grid-column: 1; grid-row: 1; align-self: center; padding: 64px clamp(28px, 4vw, 56px) 64px clamp(28px, 6vw, 88px); }
  html.p-on .p-frame { z-index: 2; grid-column: 2; grid-row: 1; display: grid; place-items: center; padding: 48px clamp(28px, 4vw, 64px); background: none; }
  html.p-on .p-art { height: min(calc(72svh - 96px), 520px); width: auto; }
  svg.p-thread { z-index: 1; }
  html.p-on .p-door .p-t1 { font-size: clamp(1.7rem, 2.5vw, 2.4rem); line-height: 1.6; letter-spacing: .08em; }
  html.p-on .p-door p.p-door-lead { font-size: 1.08rem; }
  html.p-on .p-noart .p-stage { display: block; min-height: 0; background: linear-gradient(160deg, var(--p-ai), var(--p-ai-2)); }
  html.p-on .p-noart .p-stage::before { display: none; }
  html.p-on .p-noart .p-intro { max-width: 1084px; margin: 0 auto; padding: clamp(64px, 8vw, 104px) clamp(28px, 5vw, 56px); }
  html.p-on .p-noart .p-door .p-t1, html.p-on .p-noart .p-t1 { max-width: 22em; }
  svg.p-thread { opacity: .9; }
  /* 施術者：名刺（藍の面）と写真の額 */
  html.p-on .p-meishi .p-art { aspect-ratio: 4 / 5; }
  html.p-on .p-meishi .p-intro { justify-self: center; width: min(calc(100% - 64px), 440px); padding: 0; }
}
/* 施術者の名刺：藍の面の上に白い札。名前は明朝、資格は銅の小さな字 */
html.p-on .p-meishi .p-intro {
  background: var(--ground); color: var(--ink); padding: 34px 28px 30px; border-top: 2px solid var(--p-dou-soft);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .45);
}
@media (max-width: 899px) { html.p-on .p-meishi .p-frame { padding-bottom: 64px; } html.p-on .p-meishi .p-intro { margin: -36px 20px 28px; z-index: 2; } }
@media (min-width: 900px) { html.p-on .p-meishi .p-intro { padding: 44px 40px 38px; } }
html.p-on .p-meishi .p-kick { color: var(--p-dou); }
html.p-on .p-meishi .p-title { color: var(--ai); }
html.p-on .p-meishi .p-lab { color: var(--ink-3); }
html.p-on .p-meishi .p-t1 { font-size: clamp(2rem, 8vw, 2.7rem); letter-spacing: .18em; }
html.p-on .p-meishi p.cert { color: var(--p-dou); margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--p-rule); }

/* ════════════ ② 本文の文字 ════════════ */
html.p-on .entry p:not([class]), html.p-on .entry li { color: var(--ink-2); }
html.p-on .entry p.p-lead {
  font-family: var(--min); font-size: 1.12rem; line-height: 2.1; color: var(--ink); letter-spacing: .04em;
}
html.p-on .entry strong { font-weight: 500; color: var(--ink); }
html.p-on .entry ul li::marker { color: var(--p-dou); }
html.p-on .entry h3 { font-weight: 500; color: var(--ink); }

/* 目次：上下の細線と Contents */
html.p-on .entry .toc { background: transparent; border: 0; border-top: 1px solid var(--p-rule); border-bottom: 1px solid var(--p-rule); padding: 22px 2px 14px; border-radius: 0; }
html.p-on .entry .toc > .t { font-family: var(--min); font-weight: 500; color: var(--ai); display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
html.p-on .entry .toc > .t::before { content: "Contents"; width: auto; height: auto; background: none; font-family: var(--p-latin); font-style: italic; font-weight: 400; font-size: 15px; letter-spacing: .08em; color: var(--p-dou); }
html.p-on .entry .toc li { padding-left: 44px; margin-bottom: 10px; }
html.p-on .entry .toc li::before { font-family: var(--p-latin); font-weight: 300; font-size: 1.3rem; line-height: 1.3; color: var(--p-dou); top: 0; }
html.p-on .entry .toc li.d2 { display: none; }

/* ════════════ ③ 章の扉：大きな番号・英字・明朝の題 ════════════ */
html.p-on .p-chead {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px;
  margin: clamp(72px, 11vw, 120px) 0 clamp(24px, 4vw, 36px); padding-top: 24px; position: relative;
  border-top: 1px solid var(--p-rule);
}
html.p-on .p-chead::before { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 1px; background: var(--p-dou); }
html.p-on .entry > .p-chead:first-child, html.p-on .entry > .toc + .p-chead { margin-top: 24px; }
html.p-on .p-no { display: flex; align-items: baseline; gap: 10px; }
html.p-on .p-no .n { font-family: var(--p-latin); font-weight: 300; font-size: clamp(60px, 15vw, 76px); line-height: .82; color: var(--p-dou); font-variant-numeric: lining-nums; }
html.p-on .p-no .of { font-family: var(--p-latin); font-style: italic; font-size: 13px; color: var(--ink-3); letter-spacing: .08em; }
html.p-on .p-side { min-width: 0; }
html.p-on .p-en { color: var(--p-dou); margin-bottom: 12px; }
html.p-on .entry h2.p-h2 {
  border: 0; padding: 0; margin: 0; position: static; background: none;
  font-family: var(--min); font-weight: 500; color: var(--ai); text-align: left;
  font-size: clamp(1.3rem, 4.6vw, 1.8rem); line-height: 1.62; letter-spacing: .06em; text-wrap: balance;
}
html.p-on .entry h2.p-h2::before, html.p-on .entry h2.p-h2::after { display: none; }
@media (min-width: 900px) {
  html.p-on .p-chead { grid-template-columns: 120px minmax(0, 1fr); column-gap: 32px; align-items: end; padding-top: 30px; }
  html.p-on .p-chead::before { width: 120px; }
  html.p-on .p-no { flex-direction: column; align-items: flex-start; align-self: start; gap: 8px; }
  html.p-on .p-no .n { font-size: 96px; }
}
/* 書類のページ（特商法・プライバシー）：番号を小さく、静かに */
html.p-on.p-k-doc .p-no .n { font-size: 44px; }
html.p-on.p-k-doc .p-chead { margin-top: 56px; }

/* ════════════ ④ 料金：値札と料金表 ════════════ */
html.p-on .entry p.p-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  margin: 0 0 1.4em; padding: 0 0 16px; border-bottom: 1px solid var(--p-rule);
}
html.p-on .p-price .y { font-family: var(--min); font-size: 1.15rem; color: var(--ai); letter-spacing: .04em; }
html.p-on .p-price .y .n, html.p-on .p-ptable .y .n, html.p-on .entry .menu .yen .n {
  font-family: var(--p-latin); font-weight: 400; font-size: 2.3em; line-height: 1; letter-spacing: .01em; margin-right: 2px; font-variant-numeric: lining-nums;
}
html.p-on .p-price .x { font-size: .82rem; color: var(--ink-3); letter-spacing: .1em; }
html.p-on .p-price .m { font-size: .9rem; color: var(--ink-2); letter-spacing: .06em; margin-left: auto; }

html.p-on .p-card {
  position: relative; background: var(--ground); border: 1px solid var(--ai);
  padding: 28px 22px 22px; margin: clamp(40px, 6vw, 64px) 12px clamp(40px, 6vw, 64px) 0;
  box-shadow: 12px 12px 0 -1px var(--ground), 12px 12px 0 0 color-mix(in srgb, var(--p-dou-soft) 70%, transparent);
}
html.p-on .p-card-k { color: var(--p-dou); margin-bottom: 12px !important; }
html.p-on .p-card-t { font-family: var(--min); font-size: 1.2rem; color: var(--ai); letter-spacing: .08em; margin: 0 0 16px; line-height: 1.6; }
html.p-on table.p-ptable { width: 100%; border-collapse: collapse; margin: 0; border-top: 1px solid var(--p-rule); display: table; overflow: visible; }
html.p-on .p-ptable th, html.p-on .p-ptable td { border: 0; border-bottom: 1px solid var(--p-rule); background: none; padding: 16px 0; vertical-align: baseline; }
html.p-on .p-ptable th { text-align: left; font-family: var(--min); font-weight: 500; font-size: 1rem; line-height: 1.7; letter-spacing: .05em; padding-right: 12px; }
html.p-on .entry .p-ptable th a { color: var(--ink); border: 0 !important; text-decoration: none !important; }
html.p-on .p-ptable td.t { font-size: .84rem; color: var(--ink-3); white-space: nowrap; padding-right: 14px; }
html.p-on .p-ptable td.y { text-align: right; white-space: nowrap; font-family: var(--min); color: var(--ai); font-size: 1rem; }
html.p-on .p-ptable td.y .n { font-size: 1.9em; }
html.p-on .p-ptable td.y .c { display: block; margin-top: 6px; font-family: var(--got); font-size: .76rem; color: var(--ink-2); letter-spacing: .04em; }
html.p-on .p-card-n { margin: 16px 0 0; font-size: .86rem; line-height: 1.95; color: var(--ink-2); }
@media (max-width: 520px) {
  html.p-on .p-ptable tr { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--p-rule); padding: 14px 0; }
  html.p-on .p-ptable th, html.p-on .p-ptable td { border: 0; padding: 0; }
  html.p-on .p-ptable th { grid-column: 1 / -1; margin-bottom: 6px; }
  html.p-on .p-ptable td.t { align-self: end; }
}
@media (min-width: 900px) { html.p-on .p-card { padding: 36px 40px 30px; } }

/* 症状別のページの料金（.menu .row）：同じ値札の並び */
html.p-on .entry .menu { border-top: 1px solid var(--p-rule); }
html.p-on .entry .menu .row { border-bottom: 1px solid var(--p-rule); padding: 18px 0; align-items: baseline; }
html.p-on .entry .menu .yen { font-family: var(--min); color: var(--ai); font-size: 1.05rem; }
html.p-on .entry .menu .yen .n { font-size: 1.9em; }

/* ════════════ ⑤ 症状別のページの部品 ════════════ */
/* お悩み：銅の細い枠の札 */
html.p-on .entry .nayami span { border: 1px solid color-mix(in srgb, var(--p-dou-soft) 55%, transparent); background: var(--ground); color: var(--ink-2); font-family: var(--min); letter-spacing: .05em; }
/* 柱：小さなローマ数字と細線 */
html.p-on .entry .pillars { counter-reset: pl; }
html.p-on .entry .pillar { counter-increment: pl; border-top: 1px solid var(--p-rule); padding-top: 22px; }
html.p-on .entry .pillar::before {
  content: counter(pl, lower-roman) "."; position: static; display: block; width: auto; height: auto; background: none;
  font-family: var(--p-latin); font-style: italic; font-size: 1.5rem; line-height: 1; color: var(--p-dou); margin-bottom: 12px;
}
html.p-on .entry .pillar h3 { font-family: var(--min); color: var(--ai); border: 0; padding: 0; margin: 0 0 .6em; font-size: 1.1rem; }
/* はじめての日の流れ：縦の糸に番号 */
html.p-on .entry .nagare { border-left: 1px solid var(--p-rule); margin-left: 8px; padding-left: 0; }
html.p-on .entry .stepr { border: 0; padding: 0 0 26px 26px; position: relative; }
html.p-on .entry .stepr::before { content: ""; position: absolute; left: -4px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--ground); border: 1px solid var(--p-dou); }
html.p-on .entry .stepr .st { font-family: var(--p-latin); font-weight: 300; font-size: 2rem; line-height: 1; color: var(--p-dou); letter-spacing: 0; }
/* スマホ：番号と所要時間を1行に（テーマは所要時間を番号の上に出していた） */
@media (max-width: 640px) {
  html.p-on .entry .stepr { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: baseline; }
  html.p-on .entry .stepr .min { order: 0; grid-column: 2; grid-row: 1; }
  html.p-on .entry .stepr > div { grid-column: 1 / -1; }
}
html.p-on .entry .stepr h3 { font-family: var(--min); color: var(--ink); border: 0; padding: 0; }
html.p-on .entry .stepr .min { font-family: var(--p-latin); font-style: italic; color: var(--ink-3); letter-spacing: .06em; }
/* 細い注記 */
html.p-on .entry .fine { background: transparent; border: 0; border-left: 1px solid var(--p-dou-soft); padding: 2px 0 2px 18px; border-radius: 0; }
/* 医療機関へ（赤旗）：いちばん目立たせる。差し色の赤を残し、白地に枠 */
html.p-on .entry .still-note { background: var(--aka-pale); border: 1px solid var(--aka-hair); border-left: 3px solid var(--aka); border-radius: 0; padding: 22px 22px 10px; }
html.p-on .p-chead-warn .p-no .n, html.p-on .p-chead-warn .p-en { color: var(--aka); }
html.p-on .p-chead-warn::before { background: var(--aka); }
/* お受けいただく前に：小さな字の書類 */
html.p-on .entry .must { background: transparent; border: 0; border-top: 1px solid var(--p-rule); border-bottom: 1px solid var(--p-rule); border-radius: 0; padding: 22px 2px 10px; }
html.p-on .entry .must li { font-size: .9rem; line-height: 1.95; }
html.p-on .entry .must h3 { font-family: var(--min); color: var(--ai); }
/* もっと詳しく：矢印つきの細線の並び */
html.p-on .entry ul.ryu-list a { font-family: var(--min); }
/* 図：右下にずらした銅の額 */
html.p-on .entry figure.fig { position: relative; }
html.p-on .entry figure.fig > img { position: relative; z-index: 1; border: 1px solid var(--p-rule); background: var(--ground); }
html.p-on .entry figure.fig::before {
  content: ""; position: absolute; left: 12px; top: 12px; right: -12px; aspect-ratio: var(--ar, 3 / 2); border: 1px solid var(--p-dou-soft); opacity: .55; z-index: 0;
}
html.p-on .entry figure.fig { margin-right: 12px; }
html.p-on .entry figure.fig .cap { font-family: var(--min); }

/* 予約の箱（本文の途中）：トップと同じ淡い藍の帯 */
html.p-on .yoyaku-mid { border: 0; border-top: 1px solid var(--p-rule); background: var(--pale); border-radius: 0; }
html.p-on .yoyaku-mid .t { font-family: var(--min); color: var(--ai); }
html.p-on .yoyaku-mid a.line { color: var(--p-line-ink); font-weight: 700; }

/* 関連記事：絵つきのカード（ブログ記事と同じ） */
html.p-on .entry .kanren { border-top: 0; padding-top: 0; margin-top: clamp(64px, 9vw, 104px); }
html.p-on .entry .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.p-on .entry .kanren .k-hd::before { content: "Read next"; display: block; margin-bottom: 14px; font-family: var(--p-latin); font-style: italic; font-weight: 400; font-size: 15px; letter-spacing: .08em; color: var(--p-dou); }
html.p-on .entry .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; }
html.p-on .entry .kanren .k-item { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; scroll-snap-align: start; border: 1px solid var(--p-rule); background: var(--ground); }
html.p-on .entry .kanren .k-ph { flex: none; width: 100%; height: auto; aspect-ratio: 1200 / 756; position: relative; background: var(--p-wash); overflow: hidden; }
html.p-on .entry .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.p-on .entry .kanren .k-tt { padding: 14px 14px 16px; font-family: var(--min); font-size: .95rem; line-height: 1.7; color: var(--ink); border-top: 1px solid var(--p-rule); }
@media (min-width: 900px) { html.p-on .entry .kanren .k-list { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; padding: 0; margin: 0; } }

/* ════════════ ⑥ 場所と受付時間の札（地図と道順） ════════════ */
html.p-on .p-access {
  position: relative; background: var(--p-wash) !important; border: 1px solid var(--ai) !important; border-radius: 0 !important;
  padding: 26px 22px 22px !important; margin: 0 12px 2em 0 !important;
  box-shadow: 12px 12px 0 -1px var(--ground), 12px 12px 0 0 color-mix(in srgb, var(--p-dou-soft) 70%, transparent);
}
html.p-on .p-access p { color: var(--ink-2); }
html.p-on .p-access dl { display: grid; grid-template-columns: 5.5em 1fr; margin: 0; border-top: 1px solid var(--p-rule); }
html.p-on .p-access dt, html.p-on .p-access dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--p-rule); font-size: .94rem; line-height: 1.8; }
html.p-on .p-access dt { color: var(--p-dou); font-family: var(--min); letter-spacing: .1em; }
html.p-on .p-access dd { color: var(--ink); }
html.p-on .p-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0 !important; }
html.p-on .entry a.p-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 4px; text-decoration: none; border: 1px solid var(--ai);
  background: var(--p-ai) !important; color: #fff !important; font-weight: 700; letter-spacing: .06em; font-size: .92rem;
  border-bottom: 1px solid var(--p-ai) !important;
}
html.p-on .entry a.p-btn::after { content: "→"; color: #E7C3A4; font-weight: 400; }
html.p-on .entry a.p-btn.ghost { background: var(--ground) !important; color: var(--ai) !important; border-color: var(--ai) !important; }
html.p-on .entry a.p-btn.ghost::after { color: var(--p-dou); }
html.p-on .p-access-built { margin-top: clamp(40px, 6vw, 64px) !important; }
@media (min-width: 900px) { html.p-on .p-access { padding: 34px 38px 30px !important; } }

/* 古い固定ページの青い文字のリンク → 藍の枠のボタン */
html.p-on .entry h5, html.p-on .entry h6 { text-align: left !important; }
html.p-on .entry a.p-linkbtn, html.p-on .entry a.p-linkbtn span { color: var(--ai) !important; }
html.p-on .entry a.p-linkbtn { display: inline-flex; gap: 10px; padding: 11px 20px; border: 1px solid var(--ai) !important; border-radius: 4px; font-family: var(--min); font-size: .98rem; text-decoration: none; }
html.p-on .entry a.p-linkbtn::after { content: "→"; color: var(--p-dou); }
html.p-on .entry span[style*="#3366ff"] { color: inherit !important; }
html.p-on .entry del { color: var(--faint); }

/* ════════════ ⑦ よくある質問：淡い藍の札。Q は銅の斜体 ════════════ */
html.p-on .p-qa { background: var(--pale); padding: 22px 22px 6px; margin: 0 0 12px; border-top: 1px solid var(--p-rule); }
html.p-on .entry .p-qa h3.p-q { border: 0; padding: 0; margin: 0 0 .8em; font-family: var(--min); font-size: 1.06rem; line-height: 1.8; color: var(--ink); letter-spacing: .04em; }
html.p-on .entry .p-qa h3.p-q::before, html.p-on .entry .p-qa h3.p-q::after { display: none; }
html.p-on .entry .p-qa h3.p-q::first-letter { font-family: var(--p-latin); font-style: italic; font-weight: 400; font-size: 1.6em; color: var(--p-dou); }
html.p-on .entry .p-qa p:not([class]) { font-size: .97rem; line-height: 2; }
html.p-on .entry .p-qa p:not([class])::first-letter { color: var(--ai); font-family: var(--p-latin); font-size: 1.3em; }
html.p-on .entry .still-disclaimer { background: transparent; border: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); border-radius: 0; padding: 14px 2px; font-size: .86rem; line-height: 1.95; }

/* ════════════ ⑧ 症状別のご案内（一覧）：番号つきの索引 ════════════ */
html.p-on .entry .symlist { counter-reset: sy; }
html.p-on .entry .sy-list { gap: 0; border-top: 1px solid var(--p-rule); }
html.p-on .entry a.sy-item {
  counter-increment: sy; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px;
  padding: 16px 4px; border: 0 !important; border-bottom: 1px solid var(--p-rule) !important; border-radius: 0; background: none; box-shadow: none;
}
html.p-on .entry a.sy-item::before { content: counter(sy, decimal-leading-zero); grid-row: 1 / 3; font-family: var(--p-latin); font-weight: 300; font-size: 1.4rem; line-height: 1.2; color: var(--p-dou); }
html.p-on .entry a.sy-item::after { content: "→"; grid-column: 3; grid-row: 1 / 3; align-self: center; color: var(--p-dou); }
html.p-on .entry a.sy-item .sy-name { font-family: var(--min); font-size: 1.05rem; color: var(--ai); letter-spacing: .05em; }
html.p-on .entry a.sy-item .sy-sub { grid-column: 2; font-size: .86rem; color: var(--ink-3); line-height: 1.8; }
html.p-on .entry a.sy-item:hover { background: var(--pale); }
@media (min-width: 900px) { html.p-on .entry .sy-list { grid-template-columns: 1fr 1fr; column-gap: 32px; } }

/* ════════════ ⑨ 施術者：経歴の帳面 ════════════ */
html.p-on .entry .keireki dl { border-top: 1px solid var(--p-rule); }
html.p-on .entry .keireki dt { color: var(--p-dou); font-family: var(--min); letter-spacing: .08em; background: none; border-bottom: 1px solid var(--p-rule); }
html.p-on .entry .keireki dd { border-bottom: 1px solid var(--p-rule); }

/* 施術者の一覧：名刺。写真は縦の額、名前は明朝、日付は出さない */
html.p-on.p-k-staffs .list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 900px; margin: 0 auto; }
html.p-on a.p-meishi-card { border: 1px solid var(--p-rule); background: var(--ground); padding: 22px 22px 24px; }
html.p-on a.p-meishi-card .meta { display: none; }
html.p-on a.p-meishi-card .photo { aspect-ratio: 4 / 5; position: relative; overflow: visible; margin-bottom: 22px; }
html.p-on a.p-meishi-card .photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
html.p-on a.p-meishi-card .photo::after { content: ""; position: absolute; inset: 10px -10px -10px 10px; border: 1px solid var(--p-dou-soft); opacity: .6; }
html.p-on a.p-meishi-card h3 { font-family: var(--min); }
html.p-on a.p-meishi-card h3 .p-lab { display: block; font-size: .78rem; letter-spacing: .3em; color: var(--p-dou); margin-bottom: 6px; }
html.p-on a.p-meishi-card h3 .p-t1 { display: block; font-size: 1.6rem; letter-spacing: .16em; color: var(--ai); }
html.p-on a.p-meishi-card p { font-size: .9rem; color: var(--ink-2); }

/* 一覧（ブログ・施術案内）：カードの細線 */
html.p-on.p-k-list .list a.post { border-top: 1px solid var(--p-rule); padding-top: 16px; }
html.p-on.p-k-list .list a.post h3 { font-family: var(--min); color: var(--ink); }

/* ════════════ ⑩ お客様の声：手紙の札 ════════════ */
html.p-on .voices { gap: clamp(28px, 4vw, 48px); }
html.p-on .voice {
  position: relative; background: var(--ground); border: 1px solid var(--p-rule); border-top: 2px solid var(--p-dou-soft);
  padding: 26px 22px 22px; margin-right: 12px; border-radius: 0;
  box-shadow: 10px 10px 0 -1px var(--ground), 10px 10px 0 0 color-mix(in srgb, var(--ai) 18%, transparent);
}
html.p-on .voice::before, html.p-on .voice::after { display: none; }
html.p-on .p-letter { color: var(--p-dou); margin-bottom: 16px !important; }
html.p-on .voice .q { font-family: var(--min); font-size: 1.02rem; line-height: 2.1; color: var(--ink); letter-spacing: .04em; font-weight: 400; }
html.p-on .voice .by { text-align: right; font-family: var(--min); color: var(--ink-2); letter-spacing: .1em; margin-top: 10px; }
html.p-on .voice .by::before { content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 1px; background: var(--p-dou); margin-right: 12px; }
html.p-on .voice-photo { position: relative; overflow: visible; border-radius: 0; background: none; }
html.p-on .voice-photo img { position: relative; z-index: 1; border: 6px solid var(--ground); outline: 1px solid var(--p-rule); }
html.p-on .voice-note { border-top: 1px solid var(--hair); padding-top: 16px; font-size: .84rem; line-height: 1.95; }

/* 動きを減らす設定：糸は最初から引いてある */
@media (prefers-reduced-motion: reduce) { svg.p-thread path { animation: none; stroke-dashoffset: 0; } }

/* 細かな直し（見本の確認で見つけたもの） */
html.p-on .p-access .p-card-t { color: var(--ai); font-family: var(--min); }
html.p-on .entry a.p-btn, html.p-on .entry a.p-btn:hover { text-decoration: none !important; }
html.p-on .voice .q { border-left: 1px solid var(--p-dou-soft) !important; }

/* PC：本文の幅を少し広げる（640→840。章の番号を左に吊るすぶん、題が1文字だけ折り返すのを防ぐ） */
@media (min-width: 900px) {
  html.p-on section.p-sec .wrap.mid { max-width: 840px; }
  /* 絵の無い扉は、題の左端を本文の左端にそろえる */
  html.p-on .p-noart .p-intro { max-width: 840px; padding-left: clamp(20px, 5vw, 56px); padding-right: clamp(20px, 5vw, 56px); }
  html.p-on.p-k-staffs .p-noart .p-intro, html.p-on.p-k-list .p-noart .p-intro { max-width: 940px; }
}
/* 一覧のページ：最初の組の章は扉のすぐ下 */
html.p-on .entry .sy-g:first-child > .p-chead:first-child { margin-top: 48px; }
/* 書類（特商法・プライバシー）：表は帳面の形。見出しの列は銅の明朝 */
html.p-on.p-k-doc .entry table { border: 0; border-top: 1px solid var(--p-rule); border-collapse: collapse; width: 100%; }
html.p-on.p-k-doc .entry th, html.p-on.p-k-doc .entry td { border: 0; border-bottom: 1px solid var(--p-rule); background: none; padding: 16px 0; vertical-align: top; font-size: .94rem; line-height: 1.9; }
html.p-on.p-k-doc .entry th { width: 9.5em; padding-right: 18px; text-align: left; font-family: var(--min); font-weight: 500; color: var(--p-dou); letter-spacing: .06em; }
@media (max-width: 560px) {
  html.p-on.p-k-doc .entry tr { display: block; border-bottom: 1px solid var(--p-rule); padding: 12px 0; }
  html.p-on.p-k-doc .entry th, html.p-on.p-k-doc .entry td { display: block; width: auto; border: 0; padding: 2px 0; }
}
html.p-on .entry h2.p-same { display: none; }
html.p-on.p-k-doc .entry h3 { font-family: var(--min); color: var(--ai); border: 0; padding: 0; }
/* 予約のページ：空き状況の表が主役。扉は低く、絵を置かない */
html.p-on.p-k-yoyaku .p-noart .p-intro { padding-top: 30px; padding-bottom: 30px; }
@media (min-width: 900px) { html.p-on.p-k-yoyaku .p-noart .p-intro { padding-top: 48px; padding-bottom: 48px; } }
html.p-on.p-k-yoyaku .p-door { margin-bottom: 28px; }