/* ============================================================
   site.css — 書き出したサイトの見た目
   ------------------------------------------------------------
   現行サイト（整体院光／セルフル製）の見た目を再現するCSSです。
   色や文字サイズの「値そのもの」は tokens.css（CSS変数）に
   まとまっているので、色を変えたいときはそちらを直してください。

   画面幅の境目は 600px の1本だけです。
     ・601px以上 … PC
     ・600px以下 … スマホ

   ※このファイルの先頭で tokens.css を読み込んでいます。
      書き出し時は tokens.css も一緒に dist/styles/ に置かれます。
   ============================================================ */

@import url("./tokens.css");


/* ============================================================
   1. 土台（リセット）
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-text);
  background-color: var(--color-bg-body);
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  border: 0;
}

a {
  color: var(--color-text);
}

/* マウスを乗せたとき、画像やボタンを少し透かす（現行サイトと同じ） */
.hover {
  transition: opacity var(--transition-hover);
}
.hover:hover {
  opacity: var(--opacity-hover);
}

/* 回り込み（float）の後始末。text-img-block などで使います */
.clearfix::after,
.text-img-block::after {
  content: "";
  display: block;
  clear: both;
}


/* ------------------------------------------------------------
   1-2. フォント・行間・文字間・パーツ間の余白（第5弾 D。サイト設定 → layout.js の bodyClass → body のクラス）
   ------------------------------------------------------------
   実物（セルフル）は、管理画面の設定から custom-properties.php が
     --site-line-spacing（行間）／--site-character-spacing（文字間）／--parts-margin（パーツ間の余白）
   を出し、body の line-height・letter-spacing と .parts-item の margin-bottom に使っている（D 12〜16・F 19）。
   自作版は tokens.css の --line-height-base／--letter-spacing-base／--space-parts を、body のクラスで差し替える。
   出どころの記号 B・D・F は docs/デザイン基準.md 0章と同じ。
   ・narrow（狭い・初期値）… tokens.css のまま（クラスは付かない）：行間 1.6・文字間 0em・余白 32px
       整体院光の実物（B 7〜9 行）と、美容鍼の実物（管理画面で「狭い」。6月保存の custom-properties の 7〜9 行。
       9月も同じ ver=1778767282。ファイルの場所は 書き出し仕様.md 3-6）が同じ値
   ・standard（標準）・wide（広い）… 3院とも使っていない。実物の値は未確認のため【仮の値】（書き出し仕様.md 3-6）
   ・明朝 … 実物の body.site-font-mincho と同じ並び（D 20〜22）。ゴシックは tokens.css の --font-body（D 17〜19 と同じ）
   ------------------------------------------------------------ */
body.site-font-mincho {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
body.site-line-spacing-standard   { --line-height-base: 1.8; }     /* 仮の値（未確認） */
body.site-line-spacing-wide       { --line-height-base: 2; }       /* 仮の値（未確認） */
body.site-letter-spacing-standard { --letter-spacing-base: 0.05em; } /* 仮の値（未確認） */
body.site-letter-spacing-wide     { --letter-spacing-base: 0.1em; }  /* 仮の値（未確認） */
/* 見出し（h2・h3）の下の余白も、実物はパーツ間の余白と同じ値（F 14〜20 の .parts-item の margin-bottom）なので一緒に変える */
body.site-parts-margin-standard   { --space-parts: 48px; --space-heading-bottom: 48px; } /* 仮の値（未確認） */
body.site-parts-margin-wide       { --space-parts: 64px; --space-heading-bottom: 64px; } /* 仮の値（未確認） */


/* ============================================================
   2. 全体のレイアウト
   ============================================================ */

/* 中身の横幅。PC・スマホ共通で「画面の94%（上限あり）」 */
.inner,
#contents {
  width: var(--width-container);
  margin-inline: auto;
}

/* 本文の白い箱（出どころの記号は docs/デザイン基準.md 0章）：
   ・上下の余白は 3%・左右の内側の余白は無し … D 817〜824（padding: 3% 0）
     （以前は左右にも 3%〔スマホは 4%〕あったため、中身が PC 590px・スマホ 324px と現行より狭かった）
   ・長い英数字・URL も箱の中で折り返す … 実物は word-wrap: break-word（D 821）。
     自作版は、スマホで横にはみ出さないよう anywhere（折り返せる所が無い長い文字でも途中で折る）。
     表は列の幅の決まり方が変わらないよう、実物と同じ break-word のまま */
#main {
  max-width: var(--width-main-max);
  margin-inline: auto;
  padding: 3% 0;
  background-color: var(--color-bg-main);
  box-shadow: var(--shadow-card);
  overflow-wrap: anywhere;
}
#main table {
  overflow-wrap: break-word;
}

/* 記事パーツ1つ分の幅：白い箱の 94%・上限 640px（ページタイトルの h1 も同じ）… F 7〜20
   → PC 605px・スマホ 331px（現行と同じ） */
.entry-content > * {
  width: 94%;
  max-width: var(--width-parts-max);
  margin-inline: auto;
}

/* パーツどうしの縦の間隔（32px）
   本文の最後のパーツ（まとめパーツの外枠 .block-set が最後のときも。7-11）は下の余白 0 */
.parts-item {
  margin-bottom: var(--space-parts);
}
.entry-content > .parts-item:last-child,
.entry-content > .block-set:last-child {
  margin-bottom: 0;
}

/* 「コンテンツ幅最大」の指定（align: full） */
.is-full {
  max-width: none;
}

/* 文字の寄せ */
.txt-l { text-align: left; }
.txt-c { text-align: center; }
.txt-r { text-align: right; }

/* ------------------------------------------------------------
   2-4. 本文の幅「広い」（960px。サイト設定 content_width → layout.js の bodyClass → body の is-wide。2026-09-25）
   ------------------------------------------------------------
   セルフルの全体設定「メインコンテンツ最大幅」。まごころ整体院が 960px（現行の <body> に is-wide。
   data/reference/live-audit/magokoro-01.com/index.html 126 行・生データ settings.global の parts-max-width）。
   テーマは custom-properties.php が幅を計算して出す（記号は docs/デザイン基準.md 0章。B 3〜5 行）：
     パーツ 640px → 本文 640÷0.94＝680.85px → 全体 本文＋270px＝950.85px（標準＝tokens.css のまま）
   まごころの custom-properties は保存されていないため、同じ計算で 960px にした値：
     パーツ 960px → 本文 960÷0.94＝1021.2765957447px → 全体 本文＋270px＝1291.2765957447px
   ※ tokens.css の --width-container は :root で計算済みの値（950.85px を使った式）が引き継がれるので、ここで作り直す。
   標準（初期値）のときはクラスが付かない＝今までの見た目と1文字も変わらない。
   is-wide で変わるほかの所（画面 1001px 以上の院の案内の横並び：C 815〜839）は 8-1 の後ろ。
   テーマの .menu-01-pc（C 1202〜1240）の is-wide は、自作版にその部品が無いので対象外。
   ------------------------------------------------------------ */
body.is-wide {
  --width-parts-max: 960px;
  --width-main-max: 1021.2765957447px;
  --width-contents-max: 1291.2765957447px;
  --width-container: min(94%, calc(var(--width-contents-max) * 0.94));
}


/* ------------------------------------------------------------
   2-2. サイドバー（2列。第5弾 C・D：サイト設定 use_sidebar → body の double-column）
   ------------------------------------------------------------
   use_sidebar が無い・false のときは1列（下の2列の値はどれも効かない。#side は中身があれば出るが、
   PCでは隠し、スマホでは本文の下に並ぶ＝2-3・10-2）。
   実物（セルフル）の値そのまま（記号は docs/デザイン基準.md 0章）：
   ・#contents：横並び・両端ぞろえ・上ぞろえ・並びは逆向き（row-reverse）… D 728〜735
       ※ 実物の HTML は本文（<main>）が先・サイドバー（<aside>）が後ろだが、row-reverse のため
         パソコンでは【サイドバーが左・本文が右】に並ぶ（6月保存のPCの全体の写真
         lp-clone-hikari/clone/diff/000_original_desktop.png でも左）。スマホでは本文の下
   ・#main：幅 max(100% - 270px, 72%)・上限 680.85px（上限は 2. の #main のまま）… D 817〜824
   ・#side：幅 25%・上限 240px・はみ出しは隠す … D 839〜843
   ・欄（.side-nav）：下に 20px・影 … D 858〜860・C 1318〜1320
   ・見出し（h2）：オレンジの地・白 22px・内側 10px 20px・上の角だけ丸（4px）・太字にしない … C 1321〜1327・1414〜1416／H 43〜46
   ・項目：白地・上に 1px #dcdcdc の線（先頭は無し）・内側 12px 25px 12px 30px・下線なし・
           左 15px にオレンジの三角（実物は 6×9px の画像 side-icon-arrow.png。画像は使わずCSSで描く）・
           マウスを乗せると文字が右に 0.1rem … D 861〜883・C 1417〜1419
   ・スマホ（600px以下）は「10. スマホ」の後ろの第5弾の @media（本文の下に、本文と同じ幅で並ぶ）
   ------------------------------------------------------------ */
.double-column #contents {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
}
.double-column #main {
  width: max(100% - 270px, 72%);
  margin-inline: 0;
}
#side {
  width: 25%;
  max-width: 240px;
  overflow: hidden;
}
.side-nav {
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}
.side-nav-title {
  margin: 0;
  padding: 10px 20px;
  border-radius: 4px 4px 0 0;
  background: var(--color-orange);
  color: var(--color-text-inverse);
  font-size: 22px;
  font-weight: normal;
}
.side-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--color-bg-main);
}
.side-nav li {
  border-top: 1px solid var(--color-border-side);
}
.side-nav li:first-child {
  border-top: 0;
}
.side-nav a {
  position: relative;
  display: block;
  padding: 12px 25px 12px 30px;
  color: var(--color-text);
  text-decoration: none;
}
.side-nav a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 15px;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  border-left: 6px solid var(--color-orange);
  transform: translateY(-50%);
}
.side-nav a:hover {
  text-indent: 0.1rem;
}

/* ------------------------------------------------------------
   2-3. 1列（サイドバーなし）のときの決まり（2026-09-24 にテーマの1列の決まりを全部入れた）
   ------------------------------------------------------------
   実物（セルフル）のテーマは、body に single-column が付いたとき（1列）だけ、下のように変わる（記号は docs/デザイン基準.md 0章）。
   自作版は body に1列のクラスを付けないので「double-column ではない」（body:not(.double-column)）で見分ける
   （サイドバー「あり」でも中身が空なら double-column は付かない＝1列の扱い。layout.js の bodyClass）。
   どれも double-column のページには当たらないので、2列の見た目は変わらない。
   ・白い箱をやめて幅を広げる
       #contents … 画面の幅いっぱい・中身を中央に … D 1245〜1248
                   （並べ方は実物の #contents と同じ flex … D 728〜735。中の余白が外へはみ出して
                     パンくずの下の余白と重なる、といった違いが出ないように、2列と同じく flex にしておく）
       #main     … 幅いっぱい・上限なし・余白なし … D 1249〜1253 ／ 白地なし・影なし … C 192〜195
       → パーツ・h1 は今までどおり「#main の 94%・上限 640px」（F 7〜20）なので、PC は 640px で中央、
         スマホは 94%（375px の画面で 352.5px。2列は白い箱の 94% の 331px）
   ・幅が #main から決まるもの（実物の式のまま。#main が広がるので大きさが変わる）
       院の案内（#content-footer）… min(94%, 893.8px)・内側 3% … C 706〜711 → PC 893.8px（2列は白い箱の 94%＝605px）
       下層ページのメインビジュアル … PC は min(94%, 893.8px) … C 178〜180 → 893.8px（スマホは今までどおり幅いっぱい）
         ※ 実物は左端に寄るが（E 22〜24 の p の余白。2列と同じ理由）、自作版は2列と同じく中央に置く
       スマホの #main の下 24px … D 828〜833（幅 94% のほうは D 1249〜1253 の 100% が上書き）
   ・枠線の無い囲み（本文の直下。group.js が no-border を付ける）… 幅いっぱい … D 1273〜1284
       実物：.surround-block:not(.bordered) を width: auto・max-width: none・左右の外側 calc(50% - 50vw)（960px 以下は 0）。
       1列の #main は画面の幅いっぱいなので、左右 0 でも見える範囲は同じ（calc の式は、縦のスクロールバーの幅のぶん
       はみ出して横スクロールが出ることがある。実物は #site の overflow: hidden で隠している）→ 自作版は左右 0。
       中身は、実物と同じく本文と同じ上限 640px で中央（実物は中のパーツが 94%・上限 640px。
       自作版は、内側の余白の欄が空の囲みは実物と同じ〔7-10〕、数字を入れた囲みは余白の内側で上限 640px）
   ・フッターのナビ … 上に 55px … C 932〜934 ／ 横4列（25%）は2列のときだけ … C 935〜946 → 1列は縦に1項目ずつ
   ・本文の中見出し・小見出し（h2・h3・h4 の .style-title）を中央に … D 1286〜1288
       見出しの配置の指定（.txt-l など）より強くしてある：実物も見出しの寄せ方はテーマが決め、
       管理画面の「配置」はページに出ていない（取り込みは文字の見出しをいつも左にしている。scripts/lib/ の取り込みの変換）
   ・「コンテンツ幅最大」（.is-full。1. の max-width: none）も上限 640px のまま：2列では白い箱の 94% が 640px を
       超えないので、もともと 640px までだった。1列でだけ画面の 94% まで広がらないように止める
       （実物の「コンテンツ幅最大」＝.txt-m は、パーツの中の画像を幅いっぱいにするだけ。important.css 13〜16）
   ・サイドバーをPCで隠す（D 1254〜1258）… 1列でも中身があれば <aside> を出し（layout.js）、PCだけ隠す。
       スマホでは本文の下に「メニュー」「症状別メニュー」が本文と同じ幅で並ぶ（10-2）
   ・対象なし：交互ブロック（.alternating-block。D 1260〜1271）… 自作版にこのパーツが無い。
               #site の min-width: 0（D 1242〜1244）… コメントアウトされていて効いていない
   ------------------------------------------------------------ */
body:not(.double-column) #contents {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
body:not(.double-column) #main {
  width: 100%;
  max-width: 100%;
  padding: 0;
  background: none;
  box-shadow: none;
}
body:not(.double-column) #content-footer {
  width: var(--width-container);
}
/* サイドバーは1列でも中身があれば HTML に出る（layout.js の renderSidebar）。PC だけ隠す（D 1254〜1258）。
   スマホでは本文の下に並ぶ（「10-2. 第5弾のスマホ」） */
@media screen and (min-width: 601px) {
  body:not(.double-column) #side {
    display: none;
  }
}
body:not(.double-column) .entry-content > .is-full {
  max-width: var(--width-parts-max);
}
body:not(.double-column) .entry-content > .surround-block.no-border {
  width: auto;
  max-width: none;
  margin-inline: 0;
}
/* 内側の余白に数字を入れた囲みだけ（セルフルと同じ並べ方の囲みは、中のパーツが自分で「94%・上限 640px」になる。7-10） */
body:not(.double-column) .entry-content > .surround-block.no-border.pad-custom > .group-inner {
  max-width: var(--width-parts-max);
  margin-inline: auto;
}
/* 囲みの初期の背景色（#fff7e7。group.js が bg-default の目印を付ける＝背景色の欄が空か #fff7e7 で、背景画像なし）は、
   1列では白い箱が無く、地の色（#fff5ec）とほとんど同じで見えない（2026-09-24 点検4周目の指摘）。
   実物のテーマには1列だけ囲みの色を変える指定は無い（single-column の指定は D・C だけ＝docs/デザイン基準.md 13章。
   実物の「簡単設定」の囲みは枠線 #FF9900・背景 #FFF8EE で、背景は1列でも地とほぼ同じ＝枠線で見えている）。
   なので1列のときだけ、少し濃い #ffedd4 にする。決め方：2列では白い箱（#ffffff）の上に #fff7e7 が乗り、
   その差は 緑 −8・青 −24。1列の地（#fff5ec）から同じだけ引いた色＝#ffedd4（2列と同じくらいの見え方になる）。
   色は group.js が style で直接書くので、!important で上書きする（1列のときの、初期の色のときだけ）。
   2列（double-column）には当たらない＝2列の見た目は変わらない。自分で選んだ色・背景画像の囲みも変わらない */
body:not(.double-column) .surround-block.bg-default {
  background-color: #ffedd4 !important;
}
body:not(.double-column) #global-footer-nav .inner {
  padding: 55px 0 0;
}
body:not(.double-column) #global-nav-footer ul {
  display: block;
}
body:not(.double-column) #global-nav-footer li {
  width: auto;
  margin: 0;
}
body:not(.double-column) .entry-content h2.style-title,
body:not(.double-column) .entry-content h3.style-title,
body:not(.double-column) .entry-content h4.style-title {
  text-align: center;
}
@media screen and (min-width: 601px) {
  body:not(.double-column) .entry-content > .main-img-page {
    width: var(--width-container);
    max-width: none;
  }
}
@media screen and (max-width: 600px) {
  body:not(.double-column) #main {
    margin-bottom: 24px;
  }
}


/* ------------------------------------------------------------
   2-4. パンくず（下層ページ。layout.js の renderBreadcrumb）
   ------------------------------------------------------------
   ・ナビの下・本文の上。幅は本文と同じ（画面の94%・上限あり）で、文字はその中の .inner（さらに94%）… D 779〜784・C 174〜176
   ・文字 14px・行間 1.2・上に 24px（ナビの下の 20px と重なって 24px）・下に 32px … D 779〜784
   ・「TOP」のリンクはふつうの文字色＋下線（本文の青いリンクとは違う。#main の外のため）
   ・スマホ（600px以下）では出さない … D 805〜808（下の 10. スマホ）
   ------------------------------------------------------------ */
.breadcrumb {
  width: var(--width-container);
  margin: 24px auto 32px;
  font-size: var(--font-size-small);
  line-height: 1.2;
}


/* ============================================================
   3. 文字サイズ・文字色の指定
   ------------------------------------------------------------
   データ契約の「文字サイズ」「文字色」に対応するクラスです。
   ※現行サイトは記事ごとの手打ち指定だったため、
     ここの px 値は自作版で新しく決めた値です（未確認＝実測値ではありません）。
   ============================================================ */

.fs-xs { font-size: 12px; }
.fs-s  { font-size: 14px; }
.fs-m  { font-size: 16px; }
.fs-l  { font-size: 20px; }
.fs-xl { font-size: 24px; }

.tc-black  { color: #000000; }
.tc-red    { color: #ff0000; }
.tc-orange { color: var(--color-orange); }
.tc-yellow { color: #ffd800; }
.tc-green  { color: #2e9e34; }
.tc-blue   { color: #2288ee; }
.tc-white  { color: var(--color-text-inverse); }


/* ============================================================
   4. ヘッダー
   ============================================================ */

/* 現行サイトの実物のCSSに合わせた値（2026-09-23 実測。第4弾「ヘッダーをセルフルと全く同じに」）
     出どころ C = lp-clone-hikari/clone/raw/_assets/…/css/design-themes/theme-classic__qd10aae34.css
            D = 同 …/css/layout__qd10aae34.css ／ H = 同 …/css/reset__qd10aae34.css
     （docs/デザイン基準.md 0章の記号と同じ）
   並び（layout.js の renderHeader）：
     <header> … いちばん上のオレンジの帯＋PCのかたまり（左：ロゴ・住所／右：電話・ボタン・営業時間）
     その後ろ … スマホのロゴの行（#global-header-main-sp）→ ナビ（#global-nav）
   ・ヘッダーに背景色は無い（ページの地の色がそのまま見える）・行間 1.4 … C 221〜225 */
#global-header {
  position: relative;
  line-height: 1.4;
}

/* いちばん上の帯：オレンジ1色（グラデーションではない）・白文字 12px・上下 5px・左寄せ・下に 10px あける
   … C 185〜187・226〜234・1394〜1396 */
.site-title {
  margin: 0 0 10px;
  padding: 5px 0;
  background: var(--color-orange);
  color: var(--color-text-inverse);
  font-size: var(--font-size-tiny);
  font-weight: normal;
  line-height: 1.4;
}
/* 帯の中の文字の幅は本文と同じ（画面の94%・上限あり）… C 232〜234／D 23〜24（.inner は display: block） */
.site-title .inner {
  display: block;
}

/* ロゴ（画像が無いときは院名の文字）。ヘッダー・フッターの帯で共通 */
.logo {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
}
.logo a {
  text-decoration: none;
}

/* --- PCのかたまり（左右2列）… C 235〜327 ------------------------------ */
#global-header-main-pc {
  display: flex;
  justify-content: space-between;
}
/* 左：ロゴ・住所（幅44%）… C 239〜247 */
#global-header-main-pc-left {
  width: 44%;
}
#global-header-main-pc-left .logo-area {
  margin-bottom: 20px;
}
/* ロゴの右の画像（site.header_banner）を置いたときは横に並べる */
#global-header-main-pc-left .logo-area:has(.header-banner) {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-area:has(.header-banner) .logo {
  flex: 1 1 55%;
}
.header-banner {
  flex: 1 1 45%;
  margin: 0;
}
#global-header-main-pc-left .address {
  margin: 0;
  font-size: inherit;
  word-break: break-all;
}
/* 右：電話・ボタン・営業時間（幅43%）… C 248〜327 */
#global-header-main-pc-right {
  width: 43%;
}
#global-header-main-pc-right .tel-text {
  display: block;
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  word-break: break-all;
}
#global-header-main-pc-right .tel {
  display: block;
  margin: 0;
  font-size: 36px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}
/* 電話番号の左に緑の受話器（実物は tel-icon-pc.png 26×36px。画像は使わずSVGで描いたもの）… C 266〜274 */
#global-header-main-pc-right .tel .tel-number {
  display: inline-block;
  padding-left: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 36'%3E%3Cpath fill='%23099e29' d='M7.5 1.2C5.2.3 1.2 2.2.9 7.2.3 17.5 6 29.5 15.2 34.6c3.5 1.9 7.2-.2 8.4-2.2.8-1.2.5-2.5-.6-3.3l-4.6-3.3c-1.1-.8-2.5-.5-3.2.6l-1.3 1.9C9.6 25.2 6.9 19 6.5 13.5l2.2-.6c1.3-.3 2.1-1.5 1.8-2.8l-1-6.3c-.2-1.2-.9-2.2-2-2.6z'/%3E%3C/svg%3E") no-repeat left center / 26px 36px;
  font-size: inherit;
  letter-spacing: normal;
  line-height: 1.2;
  word-break: break-word;
}
/* 赤（ネット予約／お問い合わせ）と緑（LINE予約）のボタン … C 276〜301・198〜214 */
#global-header-main-pc-right .button-area {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0 3%;
  margin: 0;
}
#global-header-main-pc-right .button-area a {
  display: inline-block;
  width: 100%;
  max-width: 400px;
  min-width: 0;
  margin-bottom: 12px;
  padding: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-button);
  color: var(--color-text-inverse);
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}
#global-header-main-pc-right .button-area a span {
  display: inline-block;
  padding: 16px 0 16px 35px;
  background-repeat: no-repeat;
  background-position: left center;
}
#global-header-main-pc-right .button-area a.mail {
  background: var(--gradient-btn-mail);
  text-shadow: var(--shadow-text-btn-mail);
}
/* 白い封筒（実物は mail-icon.png 23×16px）*/
#global-header-main-pc-right .button-area a.mail span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 16'%3E%3Crect width='23' height='16' rx='1.5' fill='%23fff'/%3E%3Cpath d='M1.5 1.8l10 7.5 10-7.5' fill='none' stroke='%23bb0f0f' stroke-width='1.6'/%3E%3C/svg%3E");
  background-size: 23px 16px;
}
#global-header-main-pc-right .button-area a.line_btn {
  background: var(--gradient-btn-line);
  text-shadow: var(--shadow-text-btn-line);
}
/* 白い吹き出しに「LINE」（実物は line-icon.png を幅23pxで表示）*/
#global-header-main-pc-right .button-area a.line_btn span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 69 66'%3E%3Cpath fill='%23fff' d='M34.5 2C16 2 2 13.6 2 28c0 12.8 11.2 23.3 26.3 25.6 1 .2 2.4.7 2.7 1.6.3.8.2 2 .1 2.9l-.4 2.6c-.1.8-.6 3 2.6 1.6s17.3-10.2 23.6-17.5C61.2 40.1 67 34.6 67 28 67 13.6 53 2 34.5 2z'/%3E%3Ctext x='34.5' y='35.5' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='bold' font-size='19' fill='%23029403'%3ELINE%3C/text%3E%3C/svg%3E");
  background-size: 23px auto;
}
/* 営業時間・定休日の表（濃い灰色のラベル 104px ＋ 内容。右寄せ）… C 304〜327 */
#global-header-main-pc-right .info {
  text-align: left;
}
#global-header-main-pc-right .info dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0 3%;
  margin: 0;
  padding-top: 10px;
  overflow: hidden;
  font-size: inherit;
}
#global-header-main-pc-right .info dt {
  flex: none;
  width: 104px;
  padding: 2px 0;
  border-radius: 0;
  background: var(--color-bg-label);
  color: var(--color-text-inverse);
  font-size: 90%;
  text-align: center;
}
#global-header-main-pc-right .info dd {
  width: calc(97% - 104px);
  word-break: break-word;
}

/* --- スマホのロゴの行（ロゴ左7割・「メニュー」ボタン右15%）… C 406〜428 ---------
   PCでは出さない。スマホの見た目は「10. スマホ」に */
#global-header-main-sp {
  display: none;
}

.address {
  margin: 6px 0 0;
  font-size: var(--font-size-small);
}

/* 電話番号 */
.tel-text {
  margin: 0;
  font-size: var(--font-size-small);
}
.tel {
  margin: 0;
}
.tel-number {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}
.tel a {
  text-decoration: none;
}

/* 営業時間・定休日 */
.info dl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  font-size: var(--font-size-xsmall);
}
.info dt {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 2px;
  background-color: var(--color-bg-label);
  color: var(--color-text-inverse);
}
.info dd {
  margin: 0;
}
.holiday-notice {
  margin: 4px 0 0;
  font-size: var(--font-size-xsmall);
}

/* LINEボタン（現行サイトどおり緑のまま） */
.button-area {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.line_btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: var(--radius-button);
  background: var(--gradient-btn-line);
  box-shadow: var(--shadow-button);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-decoration: none;
  text-shadow: var(--shadow-text-btn-line);
}


/* ============================================================
   5. ナビゲーション
   ============================================================ */

/* ヘッダーは #global-nav、フッターは #global-nav-footer（id は1ページに1回だけのため別々）。

   ▼ ヘッダーのナビ（PC）… 現行サイトの実物のCSSに合わせた値（2026-09-23 実測）
     出どころ C = lp-clone-hikari/clone/raw/_assets/…/css/design-themes/theme-classic__qd10aae34.css
            B = 同 …/custom-properties__q17cdc9f6.php ／ D = 同 …/css/layout__qd10aae34.css
     （docs/デザイン基準.md 0章の記号と同じ）
     ・オレンジのグラデーションの帯、下に 1px の濃いオレンジの線 … C 351〜356・1397〜1400（色は C 48〜49）
     ・項目は「横5列の同じ幅（20%）」。6個目からは2段目の左から入る … C 365〜370（float + width 20%）
     ・並びの幅は本文と同じ（画面の94%・上限あり）… C 357〜364
     ・文字は白・太字にしない・大きさは本文と同じ 16px … C 379〜384（太さの指定なし）／B 6・D 13
     ・上下の余白 16px・左右 5px … C 379〜384
     ・区切り線は各マスの右端に、高さ70%（上下15%あけ）の 1px の線（色 #cd7b02）… C 371〜378・1405〜1407（色は C 50）
       5個目・10個目…（各段の右端）だけ線なし … C 697〜699
     ・マウスを乗せると透明度 0.6 … C 385〜387
     ・今いるページの印（下線など）は、実物には無い（WordPress の current_page_item に見た目の指定なし）
     ・ナビの下は 20px あけて本文へ … C 223（実物はナビを含むヘッダー全体の margin-bottom）
     ・スクロールしても画面の上に固定（現行サイトは「グローバルナビ固定：固定する」）
         実物の設定：<nav id="global-nav-pc" class="fixed-set">（A 226 ／ 9月の最新版 K も同じ）
         実物の動き：300px より下へスクロールすると .fixed が付き、画面の上に固定・影が付く
                     （common.js 196〜213、C 329〜337：position: fixed; top: 0; 影 rgba(0,0,0,.2) 2px 2px 3px）
         自作版：JavaScript を使わず position: sticky（ナビが画面の上端に届いたところから貼り付く）。
                 影は、対応しているブラウザでは実物と同じく 300px スクロールしてから付く（下の @supports）
   ▼ スマホ（600px以下）… 帯は出さず、右上の「メニュー」ボタンで左から引き出す（下の 10. スマホ を参照） */
#global-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  margin: 10px 0 20px;
  border-bottom: 1px solid var(--color-nav-border);
  background: var(--gradient-nav);
  overflow: hidden;
}
/* 300px スクロールしたら影を付ける（スクロールに合わせて動くCSSのしくみ。未対応のブラウザでは影なしで固定だけ） */
@keyframes fixed-shadow-pc {
  from { box-shadow: none; }
  to   { box-shadow: var(--shadow-fixed); }
}
@supports (animation-timeline: scroll()) {
  @media screen and (min-width: 601px) {
    #global-nav {
      animation: fixed-shadow-pc linear both;
      animation-timeline: scroll(root block);
      animation-range: 300px 301px;
    }
  }
}
#global-nav ul {
  display: flex;
  flex-wrap: wrap;
  width: var(--width-container);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
#global-nav li {
  position: relative;
  width: 20%;
  text-align: center;
}
#global-nav li a::after {
  content: "";
  position: absolute;
  top: 15%;
  right: 0;
  height: 70%;
  border-right: 1px solid var(--color-nav-divider);
}
#global-nav li:nth-child(5n) a::after {
  border: none;
}
#global-nav a {
  display: block;
  padding: 16px 5px;
  color: var(--color-text-inverse);
  font-weight: normal;
  text-decoration: none;
  transition: opacity var(--transition-hover);
}
#global-nav a:hover {
  opacity: var(--opacity-hover-nav);
}
/* PC：行の高さはヘッダーと同じ 1.4（実物のナビはヘッダーの中にあり、ヘッダーの行間 1.4 が効く。C 221〜225）。
   自作版のナビはヘッダーの外（sticky のため）なので、ここで同じにする。
   以前は本文の 1.6 のままで、1段が 3px ずつ高く、2段目が現行より下にずれていた（2段で 116px → 現行 110px）。
   ヘッダーに並べる項目が無く「症状別メニュー」だけのとき（.global-nav-sp-only）は、PCでは帯を出さない
   （スマホの「メニュー」の箱のためだけにある。layout.js の renderNav） */
@media screen and (min-width: 601px) {
  #global-nav {
    line-height: 1.4;
  }
  #global-nav.global-nav-sp-only {
    display: none;
  }
}

/* スマホ用の「メニュー」ボタンまわり。PCでは出さない（スマホの出し方は 10. スマホ に）。
   .sp-menu-extra は箱の中の「症状別メニュー」（第5弾。スマホの出し方は 10-2） */
.sp-menu-toggle,
.sp-menu-btn,
.sp-menu-title,
.sp-menu-lightbox,
.sp-menu-extra {
  display: none;
}

/* ▼ フッターのナビ（#global-footer-nav の中の #global-nav-footer）… 現行サイトの実物のCSSに合わせた値（2026-09-23 実測）
     ・フッターのいちばん上の白地の帯（上にオレンジ 5px の線）… C 916〜921・1420〜1422
     ・並びの幅は本文と同じ（画面の94%・上限あり）・上に 15px … C 174〜176・925〜931
     ・横4列（1項目 25%）・上下 4px … C 935〜946（現行サイトは2カラム＝double-column の指定）
     ・文字は本文と同じ 16px・色 #333・下線なし・行間 1.2・下に 8px・左に 18px … C 947〜957／H 81〜88
     ・項目の左に「白抜きの丸」（7×7px・枠 1px のオレンジ・上下の真ん中）… C 958〜969・1423〜1425
     ・マウスを乗せると下線 … C 976〜978
     ・今いるページの印は無い（WordPress の current-menu-item に見た目の指定なし）
     ・スマホ（600px以下）では出さない … C 1123〜1125（下の 10. スマホ） */
#global-footer-nav {
  width: 100%;
  overflow: hidden;
  text-align: left;
}
#global-footer-nav .inner {
  padding: 15px 0 0;
}
#global-nav-footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
#global-nav-footer li {
  width: 25%;
  margin: 4px 0;
}
#global-nav-footer a {
  position: relative;
  display: block;
  margin-bottom: 8px;
  padding-left: 18px;
  color: var(--color-text);
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1.2;
  text-decoration: none;
}
#global-nav-footer a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid var(--color-orange);
  border-radius: 100px;
  transform: translateY(-50%);
}
#global-nav-footer a:hover {
  text-decoration: underline;
}


/* ============================================================
   6. メインビジュアル
   ============================================================ */

/* 置き場所と幅は現行サイトと同じ（layout.js の renderMainVisual・render.js）：
   ・トップ（.main-img-top）… ヘッダーの下・本文の外。PCは本文と同じ幅（894px）で中央・下に 30px
                               … C 178〜183（.main-img-pc の幅）・D 739〜742。スマホは画面の幅いっぱい・下に 20px … D 743〜751
   ・下層ページ（.main-img-page）… h1 の下・本文の白い箱の中。PCは本文の幅（605px。.entry-content > * の 94%）、
                               スマホは白い箱の幅いっぱい・下に 20px（保存したスクショで確認）
     ※ 実物のPCは、画像が本文の幅のまま白い箱の左端に寄っている（p の余白の決まり E 22〜24 が中央寄せを消すため）。
       自作版は h1・本文とそろえて中央に置いている
   以前は、どのページも画面の幅いっぱいに出していた */
.main-img {
  text-align: center;
}
.main-img img {
  width: 100%;
}
.main-img-top {
  width: var(--width-container);
  margin: 0 auto 30px;
}
.entry-content > .main-img-page {
  margin-bottom: 20px;
}
/* 「簡易」パターンは、高さを抑えて切り抜き表示にします */
.main-img-simple img {
  max-height: 320px;
  object-fit: cover;
}


/* ============================================================
   7. パーツの見た目
   ============================================================ */

/* --- 7-1. 画像 --------------------------------------------- */

.img-block picture,
.img-block img {
  display: inline-block;
}
.img-block a {
  display: inline-block;
  transition: opacity var(--transition-hover);
}
.img-block a:hover {
  opacity: var(--opacity-hover);
}


/* --- 7-2. 本文 --------------------------------------------- */

.text-block p {
  margin: 0 0 var(--space-paragraph);
}
.text-block a,
.entry-content .comment a {
  color: var(--color-link);
}

/* 箇条書き（囲み＋チェックマーク。現行サイトと同じ形）
   囲み：白地・#808080 の線・内側 25px … F 465〜470（.entry-content .text-block ul）
   overflow: hidden … 本文＋画像で、囲みが画像の下にもぐらず、画像の横に収まる（F 466） */
.text-block ul,
.text-block ol,
.text-img-block ul,
.text-img-block ol {
  overflow: hidden;
  margin: 0 0 20px;
  padding: var(--box-padding);
  border: var(--box-border-width) solid var(--color-border-box);
  background-color: var(--color-bg-main);
  list-style: none;
}
.text-block ol,
.text-img-block ol {
  padding-left: calc(var(--box-padding) + 20px);
  list-style: decimal;
}
/* 1行ずつ：左に 30px あけて、そこにアイコン（F 472〜477：margin 0 0 6px・padding-left 30px・アイコンは上から 4px） */
.text-block ul li,
.text-img-block ul li {
  position: relative;
  margin: 0 0 6px;
  padding: 0 0 0 30px;
}
/* アイコン「四角にレ点」。現行はテーマの画像（list-icon-01.png。20×20px：濃い線の四角＋はみ出す赤いレ点）。
   セルフル社の画像は使わず、同じ見た目を CSS で描く（色は画像から測った値：線 #231815・レ点 #c61722）
   ::before … 四角（19×18px。線は左と下が 1px、上と右が 2px）
   ::after  … レ点（細長い四角の右と下だけに線を引き、かたむける。右上は四角からはみ出す） */
.text-block ul li::before,
.text-img-block ul li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  box-sizing: border-box;
  width: 19px;
  height: 18px;
  border: 1px solid #231815;
  border-top-width: 2px;
  border-right-width: 2px;
}
.text-block ul li::after,
.text-img-block ul li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 6px;
  box-sizing: border-box;
  width: 9px;
  height: 18px;
  border-right: 4px solid #c61722;
  border-bottom: 4px solid #c61722;
  transform: rotate(38deg);
}
.text-block ol li,
.text-img-block ol li {
  margin: 0 0 6px;
}
.text-block h5,
.text-block h6 {
  margin: var(--space-heading-top) 0 var(--space-heading-bottom);
  font-weight: var(--font-weight-bold);
}
.text-block h5 { font-size: var(--font-size-h4); }
.text-block h6 { font-size: 100%; }


/* --- 7-3. 中見出し h2 --------------------------------------- */

.style-title.heading2 {
  margin: var(--space-heading-top) auto var(--space-heading-bottom);
  padding: var(--h2-padding);
  border-left: var(--h2-border-left-width) solid var(--color-orange);
  border-bottom: var(--h2-border-bottom-width) solid var(--color-border-h2-bottom);
  background-color: var(--color-bg-main);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
}
/* トップページの本文の先頭の見出し（h2・h3・h4）は上の余白 0（テーマ page.css 27〜30：
   .page-top .entry-content > h2:first-child { margin-top: 0 }。本物はトップの記事に page-top が付く。
   自作は render.js がトップの <main> に page-top を付ける）。まとめパーツが先頭のときは、自作だけにある外枠（.block-set。7-11）の
   中の先頭の見出しも同じ（本物はまとめパーツの中身を本文の直下に並べるので、その見出しが本文の先頭になる）。
   以前はこの決まりが無く、先頭が中見出しの美容鍼トップの本文が本物より 50px 下だった（PC 1280px：本物 1851px・自作 1901px。2026-09-25） */
.page-top > .entry-content > h2:first-child,
.page-top > .entry-content > h3:first-child,
.page-top > .entry-content > h4:first-child,
.page-top > .entry-content > .block-set:first-child > h2:first-child,
.page-top > .entry-content > .block-set:first-child > h3:first-child,
.page-top > .entry-content > .block-set:first-child > h4:first-child {
  margin-top: 0;
}
.style-title .main {
  display: block;
}
/* サブ見出し（現行で24回使われている重要項目） */
.style-title .sub {
  display: block;
  margin-top: 4px;
  font-weight: normal;
  line-height: 1.4;
}


/* --- 7-4. 小見出し h3 --------------------------------------- */

.style-title.heading3 {
  margin: var(--space-heading-top) auto var(--space-heading-bottom);
  padding: var(--h3-padding);
  border-left: var(--h3-border-left-width) solid var(--color-h3-bar);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
}


/* --- 7-5. 余白 ---------------------------------------------- */
/* 下の余白は、ふつうのパーツと同じ 32px（.parts-item）。現行は「高さ（S＝30px 等の padding-bottom）＋パーツ間の余白 32px」
   （F 13〜20 の .entry-content .parts-item ／ F 1064〜1087 の .spacer-block-s など）。
   以前はここで margin-bottom: 0 にしていたため、余白パーツの下が現行より 32px 短かった（2026-09-24 点検4周目）。
   高さは spacer.js が style に書く（スマホは 10. の --sp-h） */


/* --- 7-6. 本文＋画像 ---------------------------------------- */
/* 左右の割合は、現行サイトの float-*-* をそのまま写しています（module.css 100〜168）
   HTML は「画像（img left / img right）→ 本文（text）」の順（parts/text-image.js）。
   画像だけが左右に寄り（float）、本文は float せずに画像の横へ回り込む（現行の本文は class=""）。
   本文が画像より長いときは、画像の下で全幅に戻る（現行と同じ）。
   吹き出し（2:8・8:2）だけは本文にも left / right が付き、横に並ぶ。
   画像が無いときは本文だけ（.text）を全幅で出す */

.text-img-block > div {
  box-sizing: border-box;
}
.text-img-block .left  { float: left; margin-right: 2%; }
.text-img-block .right { float: right; margin-left: 2%; }

.float-2-8 .left { width: 18%; } .float-2-8 .right { width: 78%; }
.float-3-7 .left { width: 28%; } .float-3-7 .right { width: 68%; }
.float-4-6 .left { width: 38%; } .float-4-6 .right { width: 58%; }
.float-5-5 .left { width: 48%; } .float-5-5 .right { width: 48%; }
.float-6-4 .left { width: 58%; } .float-6-4 .right { width: 38%; }
.float-7-3 .left { width: 68%; } .float-7-3 .right { width: 28%; }
.float-8-2 .left { width: 78%; } .float-8-2 .right { width: 18%; }

.text-img-block .img {
  text-align: center;
}
.text-img-block p {
  margin: 0 0 var(--space-paragraph);
}

/* 吹き出し表示（割合が 2:8 と 8:2 のとき）
   文章側に枠を付け、画像の方へ向かって三角の「ツノ」を出します */
.text-img-block.balloon > div:not(.img) {
  padding: 10px;
  border: 2px solid #dcdcdc;
  border-radius: 6px;
}
.text-img-block.balloon .left:not(.img),
.text-img-block.balloon .right:not(.img) {
  position: relative;
}
.text-img-block.balloon .left:not(.img)::before,
.text-img-block.balloon .right:not(.img)::before,
.text-img-block.balloon .left:not(.img)::after,
.text-img-block.balloon .right:not(.img)::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
/* 外側の三角（枠線の色） */
.text-img-block.balloon .left:not(.img)::before,
.text-img-block.balloon .right:not(.img)::before {
  top: 20px;
}
.text-img-block.balloon .left:not(.img)::before {
  left: 100%;
  border-width: 15px 0 15px 20px;
  border-color: transparent transparent transparent #dcdcdc;
}
.text-img-block.balloon .right:not(.img)::before {
  right: 100%;
  border-width: 15px 20px 15px 0;
  border-color: transparent #dcdcdc transparent transparent;
}
/* 内側の三角（白。外側に重ねて枠線だけ見せる） */
.text-img-block.balloon .left:not(.img)::after,
.text-img-block.balloon .right:not(.img)::after {
  top: 22px;
}
.text-img-block.balloon .left:not(.img)::after {
  left: 100%;
  border-width: 13px 0 13px 17px;
  border-color: transparent transparent transparent #fff;
}
.text-img-block.balloon .right:not(.img)::after {
  right: 100%;
  border-width: 13px 17px 13px 0;
  border-color: transparent #fff transparent transparent;
}


/* --- 7-6b. 表（本文・HTML埋め込みの中の <table>） ------------ */
/* 実物のテーマの値そのまま（2026-09-25。記号は docs/デザイン基準.md 0章）：
   ・表は幅いっぱい・線は重ねる（H 57〜61）、下に 1px #ededed・下 15px（E 36〜39）
   ・セルは左寄せ・太字にしない（H 43〜46・62〜64）、内側 8px 10px・線 1px #ccc・上下の真ん中（E 44〜49）
   ・見出しのセル（th）は太字・中央・#eee（E 50〜54）、ふつうのセル（td）は白（E 55〜57）
   ・スマホ（600px以下）はセルの文字を 80%・内側 5px（E 58〜64）
   以前は表の決まりが無く、美容鍼の料金表（HTML埋め込み・文字 13px）がスマホで 13px のまま
   「料金（税」「込）」と折り返していた（本物は 10.4px で1行）。埋め込みのコードに書かれた指定（style）は、こちらより強い */
.entry-content table {
  width: 100%;
  margin: 0 0 15px;
  border-collapse: collapse;
  border-spacing: 0;
  border-bottom: 1px solid #ededed;
}
.entry-content table caption {
  margin: 10px 0;
}
/* 下の th の決まり（太字・中央）より弱くしておく（実物もリセットの弱い指定 → テーマの th の順） */
.entry-content th,
.entry-content td {
  font-size: 100%;
  font-weight: normal;
  text-align: left;
}
.entry-content table tr th,
.entry-content table tr td {
  padding: 8px 10px;
  border: 1px solid #cccccc;
  vertical-align: middle;
}
.entry-content table th {
  font-weight: bold;
  text-align: center;
  background: #eeeeee;
}
.entry-content table td {
  background: #ffffff;
}


/* --- 7-7. HTML埋め込み（YouTubeなど） ----------------------- */

/* 文字の寄せは指定しない（実物の .html-block には寄せの指定が無い＝左。F 1016〜1037。2026-09-25）。
   以前は中央寄せにしていたため、美容鍼の料金表の文字が中央に寄っていた（本物は左）。
   動画・地図（iframe）は下の決まりで真ん中に置くので、寄せの指定が無くても真ん中のまま */
/* テーマの値そのまま（F 1019〜1029）：幅は枠いっぱい（最大 640px）・中央。
   高さは埋め込みコードの height（YouTube は 315）がそのまま効く＝スマホでも 315px（現行と同じ）。
   height の指定が無い iframe だけ、縦横比 16:9 で高さが決まる。
   ※ 以前は height: auto で上書きしていたため、スマホで 182px に縮んでいた */
.html-block iframe {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border: 0;
}
.html-block iframe.youtube {
  width: 100%;
  height: 100%;
}
/* 埋め込みのコードの中の見出し・段落・箇条書き・リンク：本物のテーマの決まりのまま（2026-09-25）。
   ・見出し … 太字にしない・大きさ 100%（reset.css 43〜46）、上 50px・下 15px、h2 140%・h3 120%・h4 110%（module.css 13〜31）
   ・段落 … 下 10px（module.css 22〜24）
   ・箇条書き … 下 20px・内側の余白なし・項目の左 20px・黒丸／番号（reset.css 11〜23・47〜49、module.css 68〜87）
   ・リンク … #2288ee（layout.css 825〜827 の #main a）
   以前はブラウザの初期値（見出しは太字・上下 1em、段落の上下 1em、箇条書きの左 40px、リンクは文字の色）で、
   美容鍼の料金表（HTML埋め込み）の見出しが太字・上が本物より 10px 狭い・「LINE」のリンクが青くなかった。
   埋め込みのコードに書かれた指定（style）は、こちらより強い */
.html-block h1,
.html-block h2,
.html-block h3,
.html-block h4,
.html-block h5,
.html-block h6 {
  margin: 50px 0 15px;
  font-weight: normal;
  font-size: 100%;
}
.html-block h2 {
  font-size: 140%;
}
.html-block h3 {
  font-size: 120%;
}
.html-block h4 {
  font-size: 110%;
}
.html-block p {
  margin: 0 0 10px;
}
.html-block ul,
.html-block ol {
  margin: 0 0 20px;
  padding: 0;
}
.html-block ul ul,
.html-block ol ol,
.html-block ul ol,
.html-block ol ul {
  margin-bottom: 0;
}
.html-block ul {
  list-style: disc outside;
}
.html-block ol {
  list-style: decimal outside;
}
.html-block li {
  margin: 0 0 0 20px;
}
.html-block a {
  color: var(--color-link);
}


/* --- 7-8. お客様の声 ---------------------------------------- */

.voice-block {
  padding: 14px;
  border: 1px dotted var(--color-border-voice);
  background-color: var(--color-bg-voice);
}
/* 見出し（一覧ページ・パーツのときだけ。個別ページではタイトルが箱の外のページの h1 になる） */
.voice-block h2 {
  position: relative;
  margin: 0 0 20px;   /* 実物 20px（F 43〜52）。以前は 24px で、声の箱が本物より 4px 高かった（2026-09-25 実測） */
  padding: 2% 3%;
  border-radius: var(--radius-button);
  background-color: var(--color-orange);
  color: var(--color-text-inverse);
  /* 実物は 28px（F 43〜52 の .voice-block h2。同じ強さの .entry-content h2 の 140% より後に読まれて勝つ）。
     以前は 140%（22.4px）で、本物より1行に入る文字が多かった（2026-09-25 実測で直した）。スマホは 10. の @media */
  font-size: 28px;
  font-weight: var(--font-weight-bold);
}
/* 一覧ページでは、見出しから個別ページへ行けます */
.voice-block h2 a {
  color: var(--color-text-inverse);
  text-decoration: none;
}
/* 見出しの下に出る、下向きの三角（吹き出しのツノ） */
.voice-block h2::after {
  content: "";
  position: absolute;
  left: 14%;
  bottom: -24px;
  border: 12px solid transparent;
  border-top-color: var(--color-orange);
}
/* 写真の枠（左に回り込む）。中は「お客様の写真 → アンケート画像」（voice.js。本物と同じく、アンケート画像もこの枠の中）。
   枠の中の画像どうしの間は 10px・最後は 0・画像は枠の幅いっぱい（テーマ F 72〜84 の .voice-block .photo div・img）。
   以前はアンケート画像をコメントの下に幅いっぱいの別枠（.survey-image）で出していて、美容鍼トップの1件目の声が
   本物より 360px 高かった（PC 1280px：本物 468px・自作 828px。2026-09-25 実測） */
.voice-block .photo {
  float: left;
  width: 200px;
  max-width: 40%;
  margin: 0 20px 15px 0;
}
.voice-block .photo div {
  margin-bottom: 10px;
}
.voice-block .photo div:last-child {
  margin: 0;
}
.voice-block .photo img {
  width: 100%;
}
.voice-block .comment p {
  margin: 0 0 var(--space-paragraph);
}

/* YouTube埋込（そのまま出力したコードの受け皿）
   テーマの値（F 96〜106 の .voice-block .youtube iframe）：幅いっぱい（最大 640px）・中央・縦横比 16:9 */
.voice-block .voice-youtube {
  clear: both;
  margin: 16px 0 0;
  text-align: center;
}
.voice-block .voice-youtube iframe {
  display: block;
  width: 100%;
  max-width: 640px;
  height: 100%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* 本文（パーツ方式） */
.voice-block .voice-parts {
  clear: both;
  margin: 16px 0 0;
}
.voice-block .voice-parts > .parts-item:last-child,
.voice-block .voice-parts > .block-set:last-child {
  margin-bottom: 0;
}

/* 先生からのメッセージ */
.voice-block .doctor-message {
  clear: both;
  margin: 16px 0 0;
  padding: 14px;
  border-left: 5px solid var(--color-orange);
  background-color: var(--color-bg-main);
}
.voice-block .doctor-message p {
  margin: 0 0 var(--space-paragraph);
}
.voice-block .doctor-message p:last-child {
  margin-bottom: 0;
}

/* お客様情報・回答者
   お客様情報は左寄せ・上に 20px（現行 K voice__post-1652.html 358行の <p class="mt-20 info">：
   important.css の .mt-20 と module.css の .entry-content p の下 10px）。
   写真の回り込みは止めない（本物のテーマの .info に clear の指定は無い。F 38〜110）。以前は clear: both で、
   コメントが短い声（整体院光 voice/post-2569）だけ、お客様情報が写真の下へ落ちて本物より 26px 高かった（2026-09-25） */
.voice-block .customer-info {
  margin: 20px 0 10px;
  text-align: left;
}
.voice-block .respondent {
  margin: 4px 0 0;
  font-size: var(--font-size-xsmall);
  text-align: right;
}

/* 一覧の先頭に固定表示する声（目印。並べ替えは一覧ページ側で行います） */
.voice-block.is-pinned {
  border-style: solid;
  border-color: var(--color-orange);
}

/* 注意書き（サイト設定の voice_disclaimer に入っているときだけ出ます）。
   お客様情報と同じく、写真の回り込みは止めない（本物の .addition は文字の大きさだけ。F 107〜109。2026-09-25） */
.voice-block .addition {
  margin: 0 0 10px;   /* 現行：.entry-content p の下 10px（箱の下の余白が現行と同じになる） */
  font-size: var(--font-size-tiny);
}


/* --- 7-8b. よくある質問 ------------------------------------- */
/* 現行（セルフルのテーマ）と同じ見た目（2026-09-24）。「Q」「A」の丸・区切り線は現行に無いので使わない。
   ・一覧ページ（collections.js の buildFaqIndexPage。K 3702-2.html 348〜369行）：
       前文 → 見出し「質問一覧」（太字にしない・上 50px）→ 白地・#808080 の線・内側 25px の枠に、黒丸の箇条書きで質問のリンク
       値：module.css 13〜31（.entry-content h2 = 140%・上 50px）／68〜87（ul の黒丸・li の左 20px）／
           F 427〜436（.list-block h2 の下 0・.list-block ul の枠）／page.css 9〜21（本文の直下の要素の下 30px）
   ・個別ページ（K faq__post-3704.html）：質問はページの h1、本文は答えだけ（faq-section / more_box の中） */

/* 一覧：前文 */
.faq-lead {
  margin-bottom: 30px;
}
/* 一覧：「質問一覧」と枠 */
.list-block {
  margin-bottom: 30px;
}
.list-block h2 {
  margin: 50px 0 0;
  font-size: 140%;
  font-weight: normal;
}
.list-block ul {
  margin: 0 0 20px;
  padding: 25px;
  border: 1px solid #808080;
  background-color: #ffffff;
  list-style: disc outside;
}
.list-block li {
  margin: 0 0 0 20px;
}
.list-block li a {
  color: var(--color-link);
  text-decoration: underline;
}

/* 個別：答え。下に 30px（page.css 9〜21）。最後の段落の下 10px は箱の中に残す（現行と同じ高さになる） */
.faq-section {
  margin-bottom: 30px;
}
.faq-section .more_box {
  display: flow-root;
}
/* 答えの1行目だけ、右が 10px 短い（本物と同じ所で改行させるため。2026-09-25）。
   実物の個別ページは、答えの前に空の写真の欄 <p class="more_photo"></p> があり、テーマが右に回り込ませて
   左 10px・下 10px の余白を付けている（Q＝page.css 75〜78 の #page-faq .more_photo）。中身は空でも余白の分だけ
   1行目が短くなり、例：まごころ「A. 痛みの軽減は、初回の施術で実感される方」で改行（自作版は「…方が」まで入っていた）。
   自作版に写真の欄は無いので、同じ大きさの見えない箱を右に置く */
.faq-section .more_box::before {
  content: "";
  float: right;
  margin: 0 0 10px 10px;
}
.faq-section .more_box > .parts-item:last-child,
.faq-section .more_box > .block-set:last-child {
  margin-bottom: 0;
}
/* 補足事項（現行の保存物には1件も無いため、見た目は自作） */
.faq-note {
  margin: 16px 0 0;
  padding: 14px;
  border: 1px solid var(--color-border-box);
  background-color: var(--color-bg-main);
}
.faq-note-title {
  margin: 0 0 6px;
  font-weight: var(--font-weight-bold);
}
.faq-note-body p {
  margin: 0 0 var(--space-paragraph);
}
.faq-note-body p:last-child {
  margin-bottom: 0;
}
.faq-respondent {
  margin: 12px 0 0;
  font-size: var(--font-size-xsmall);
  text-align: right;
}


/* --- 7-9. スライドショー ------------------------------------ */
/* 1枚ずつ＋左右の矢印（2026-09-25 に作り直し。現行＝まごころ整体院の .slide-block と同じ見え方）。
   値はテーマのまま（記号は docs/デザイン基準.md 0章。F＝block.css 484〜594・C＝theme-classic.css 1371〜1376・1458〜1460）：
   ・箱（.slide-block）… 幅 100%（パーツの 94% ではなく本文の幅いっぱい。上限はパーツの最大幅）・上に 25px … F 491〜494
       下はふつうのパーツと同じ 32px（テーマの 50px は .entry-content .parts-item の方が強く、効いていない … F 13〜20）
   ・案内の文「写真は左右にスライドできます」… 中央・右に絵（テーマは slide-icon-01.png 55×38。自作版は赤い左右の矢印をSVGで描く）… F 559〜568
   ・スライドの枠 … はみ出しは隠す・下に 10px … F 495〜497（slick-list）
   ・1枚 … 左右に min(13vw, 120px) の余白（矢印の置き場）… F 498〜500
   ・見出し … 22px・太字・中央・上下 25px（スマホ 15px 0 7px）… F 501〜506・577〜579
   ・画像の枠 … 高さ 375px（スマホ 210px）・はみ出しは隠す。画像は幅いっぱいで上下の真ん中 … F 507〜522・580〜587
   ・矢印 … 直径 50px（スマホ 30px）の丸・オレンジ・上から 31%（スマホ 25%）・左右 3%・白い矢じり 15×24px（スマホ 幅 8px）・
             マウスを乗せると 0.6 の透け（0.3秒）… F 523〜558・573〜576・588〜593／C 1371〜1376・1458〜1460
             （テーマの矢じりは classic-slide-icon-arrow-l/r.png。セルフル社の画像は使わず、SVGで同じ形を描く）
   送り方：1枚ずつの横スクロール（scroll-snap）。スマホは指でなぞって送れる。矢印は layout.js の小さなJS（SLIDESHOW_SCRIPT）で
   1枚ぶん送る（最後の次は最初へ＝テーマの slick の infinite と同じ行き先）。 */

.slide-block {
  width: 100%;
  margin-top: 25px;
}
/* 本文の直下：本文の幅いっぱい・上限はパーツの最大幅（テーマの width: 100% !important と .entry-content .parts-item の max-width）*/
.entry-content > .slide-block {
  width: 100%;
  max-width: var(--width-parts-max);
}
/* まとめパーツ（外枠 .block-set＝本文の 94%）の中：テーマはまとめパーツの中身もふつうのパーツとして本文の直下に並べるので、
   同じ幅（本文の幅＝外枠の幅 ÷ 0.94。上限はパーツの最大幅）まで左右に広げる。
   外枠がパーツの最大幅まで広がっているときは、外枠と同じ幅（広げない） */
.entry-content > .block-set > .slide-block {
  width: min(calc(100% / 0.94), var(--width-parts-max));
  margin-inline: calc((100% - min(calc(100% / 0.94), var(--width-parts-max))) / 2);
}
.slide-attention {
  margin: 0 0 var(--space-paragraph);
  text-align: center;
}
.slide-attention span {
  display: inline-block;
  padding: 10px 65px 10px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 38'%3E%3Cpath d='M4 19h47' stroke='%23e60012' stroke-width='3'/%3E%3Cpath d='M12 11l-9 8 9 8M43 11l9 8-9 8' fill='none' stroke='%23e60012' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / 55px 38px;
}
.slide-viewport {
  position: relative;
}
.slide-list {
  display: flex;
  margin: 0 0 10px;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}
.slide-list::-webkit-scrollbar {
  display: none;
}
.slide-item {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  padding: 0 min(13vw, 120px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.slide-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.slide-title {
  margin: 25px 0;
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  text-align: center;
}
.slide-img {
  position: relative;
  height: 375px;
  overflow: hidden;
}
.slide-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
}
.slide-text {
  margin-top: 10px;
}
.slide-text p {
  margin: 0 0 var(--space-paragraph);
}
.slide-arrow {
  position: absolute;
  top: 31%;
  z-index: 1;
  width: 50px;
  height: 50px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--color-orange);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 15px 24px;
  cursor: pointer;
  transition: opacity 0.3s;
}
.slide-arrow:hover {
  opacity: 0.6;
}
.slide-prev {
  left: 3%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 24'%3E%3Cpath d='M12 3L3 12l9 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.slide-next {
  right: 3%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 24'%3E%3Cpath d='M3 3l9 9-9 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* --- 7-10. 囲みデザイン（グループ） ------------------------- */

/* overflow: hidden … 現行のテーマと同じ（F 1097〜1101 の .surround-block）。角丸のとき、背景画像（.group-bg-img）の角も
   丸く切る（以前は無く、背景画像の四角い角が角丸の外にはみ出していた。2026-09-24 点検4周目）。
   中の回り込み（float）も囲みの中に収まる（現行と同じ）。既存データの囲み（9個）の中身は本文と画像だけで、切れるものは無い */
.surround-block {
  position: relative;
  padding: 0;
  border: 1px solid var(--color-orange);
  background-color: var(--color-orange-pale);
  overflow: hidden;
}
/* 内側の余白の欄が空（初期値・セルフルから取り込んだ囲み）＝セルフルと同じ並べ方（2026-09-25）。
   実物（記号は docs/デザイン基準.md 0章）：囲みは内側の余白 0（F 1097〜1101）で、中のパーツがふつうのパーツと同じ
   「囲みの幅の 94%・上限はパーツの最大幅・真ん中」（F 7〜20 の .entry-content .parts-item）。
   先頭のパーツの上に囲みの幅の 3%（F 1127〜1129）、最後のパーツの下にもふつうのパーツと同じ 32px（F 19。
   囲みは overflow: hidden なので外へ出ない）。
   → スマホ 390px の画面で中身の幅 322px（以前は内側の余白 24px で 294.6px。推薦文「【ヒコナ鍼灸整体院院長 欠瀬美江先生】」
     293px がぎりぎりで、375px の画面では「…先」「生】」と最後の1文字が次の行へ落ちていた。本物は 375px でも1行）
   内側の余白に数字を入れた囲み（group.js が pad-custom の目印を付け、style で padding を書く）は、今までどおり
   「その余白の内側いっぱい」に中身を並べる（下の :not(.pad-custom) の決まりは当たらない） */
.surround-block:not(.pad-custom) > .group-inner > * {
  width: 94%;
  max-width: var(--width-parts-max);
  margin-inline: auto;
}
.surround-block:not(.pad-custom) > .group-inner > :first-child {
  margin-top: 3%;
}
/* 枠線なし（形「枠線なし」か太さ 0。group.js が no-border を付ける）：初期値のオレンジ 1px の枠を消す
   （以前は「枠線なし」にしても上の初期値の枠が残っていた。点検2周目）。
   角丸は group.js が style で付ける（背景が見えるときは残す。背景色の欄が空でも上の初期の背景 #fff7e7 が見えるので残す。
   点検3・4周目）。style の指定がこの border-radius: 0 より強い */
.surround-block.no-border {
  border: none;
  border-radius: 0;
}
.surround-block .group-inner {
  position: relative;
  z-index: 1;
}
/* 背景画像を敷くときは、中身の後ろに回します */
.surround-block .group-bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.surround-block .parts-item:last-child,
.surround-block .block-set:last-child {
  margin-bottom: 0;
}
/* セルフルと同じ並べ方の囲み（上の :not(.pad-custom)）は、最後のパーツの下にも 32px（実物と同じ高さになる） */
.surround-block:not(.pad-custom) > .group-inner > .parts-item:last-child,
.surround-block:not(.pad-custom) > .group-inner > .block-set:last-child {
  margin-bottom: var(--space-parts);
}


/* --- 7-11. まとめパーツ ------------------------------------- */
/* 現行は、まとめパーツの中身をふつうのパーツとして並べる（K index.html の <!-- strength_set --> の間）ので、
   中身の最後のパーツの下にも、ふつうのパーツと同じ 32px が空く（F 13〜20）。
   自作版は外枠（.block-set）で包むので、中の最後は 0 にして、外枠の下に 32px を付ける（二重にしない）。
   外枠が本文・囲み・声・よくある質問の最後に来たときは、ふつうのパーツと同じく 0（上の各 :last-child の決まり）。
   以前は外枠に下の余白が無く、まとめパーツの直後が 0px だった（推薦文の囲みの直後で枠と写真がくっつく。2026-09-24 点検4周目） */
.block-set {
  margin-bottom: var(--space-parts);
}
.block-set > .parts-item:last-child {
  margin-bottom: 0;
}


/* --- 7-12. 一覧ページ・個別ページ --------------------------- */
/* お客様の声（/voices/ ・ /voice/xxx/）と
   よくある質問（/faq/ ・ /faq/xxx/）で使います。
   ページタイトルの見た目は、現行サイトの h1（design-h1-06）と同じ形です。
   ・文字は左寄せ（実物の h1 に寄せ方の指定は無い＝左。G 107〜114・C 1328〜1336。以前は中央寄せだった）
   ・幅は本文と同じ（白い箱の 94%・中央。F 7〜12 の .entry-header。左右の余白は auto のまま） */

.page-title {
  margin: 0 auto var(--h1-margin-bottom);
  padding: var(--h1-padding);
  border-top: var(--h1-border-top-width) solid var(--color-orange);
  border-bottom: var(--h1-border-bottom-width) solid var(--color-orange);
  background-color: var(--color-orange-pale);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-h1);
  text-align: left;
}

/* 一覧の中の1件ずつの間隔（お客様の声。よくある質問の一覧は 7-8b の枠の中のリンクだけ） */
.voice-list > .voice-block {
  margin-bottom: var(--space-parts);
}
.voice-list > .voice-block:last-child {
  margin-bottom: 0;
}

/* 404.html の「トップページへ」（.back-to-list は、声・よくある質問の個別ページの「一覧へもどる」だった。
   現行に無いため 2026-09-24 に出すのをやめた。書き出しにはもう出ない） */
.back-to-list,
.not-found .back-to-top {
  margin: 32px auto 0;
  text-align: center;
}
/* 404.html（ページが見つかりません）の本文 */
.not-found {
  text-align: center;
}
.back-to-list a,
.not-found .back-to-top a {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--radius-button);
  background-color: var(--color-orange);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: opacity var(--transition-hover);
}
.back-to-list a:hover,
.not-found .back-to-top a:hover {
  opacity: var(--opacity-hover);
}


/* --- 7-13. ボタン（第5弾。parts/button.js）------------------ */
/* 形・大きさ・影・動き・矢印は、実物のテーマのCSS（F 599〜643 = block.css の button-block）の値そのまま：
     高さ 48px・左右 40px（矢印つきは 48px）・白地・枠 1px・影 0px 2px 10px 0px rgba(0,0,0,.15)・16px・0.3秒
     四角 0／角丸 4px／丸 100vh
     矢印：右から 20px に 6×6px の「く」の字（右上の線だけを 45度）。マウスを乗せると右から 16px へ動く
   塗り（filled）／枠（outline）と色は、テーマのCSSに無い（保存済みの実物3院の HTML にボタンが1つも出ていないため、
   実物の出し方は未確認）。自作版で決めたもの：
     枠 … テーマのまま白地に、文字と枠線をその色で
     塗り … 地と枠線をその色、文字は白（黄色だけは白だと読みにくいので #333）
     5色 … 同じセルフルの「5色」（赤・黄・オレンジ・緑・青）である囲みデザインの枠線の色（F 1130〜1149）を借りた【仮の値】
     16進数 … style="--button-color: #…;"（parts/button.js）
   文字の色は a の色（リンクの青など）に負けないよう、ここで決める
   ★ 高さ（2026-09-24）：テーマは height: 48px の固定だが、それだと文字が長いと2行目がボタンからはみ出す。
     自作版は「48px 以上」（min-height）にして、上下 10px・行間 1.4 で縦に伸びるようにした。
     1行のボタンは今までどおり高さ 48px（16px × 1.4 ＋ 上下 10px ＝ 約 42px なので 48px のまま）。
     幅は枠を越えない（max-width: 100%）。2行になったら文字は中央ぞろえ */
.button-block .button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px 40px;
  min-height: 48px;
  min-width: 48px;
  max-width: 100%;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--button-color, #ff9900);
  background-color: #ffffff;
  color: var(--button-color, #ff9900);
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.button-block .button.filled {
  background-color: var(--button-color, #ff9900);
  color: var(--button-text, #ffffff);
}
.button-block .button.square {
  border-radius: 0;
}
.button-block .button.rounded {
  border-radius: 4px;
}
.button-block .button.pill {
  border-radius: 100vh;
}
.button-block .button.icon-arrow {
  padding: 10px 48px;
}
.button-block .button.icon-arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  right: 20px;
  width: 6px;
  height: 6px;
  border: solid;
  border-width: 1px 1px 0 0;
  transform: rotate(45deg);
  transition: inherit;
}
.button-block .button.icon-arrow:hover::after {
  right: 16px;
}
.button-color-red    { --button-color: #e84f4f; }
.button-color-orange { --button-color: #ff9900; }
.button-color-yellow { --button-color: #d6d003; --button-text: #333333; }
.button-color-green  { --button-color: #6ca265; }
.button-color-blue   { --button-color: #2082bb; }


/* --- 7-14. スタッフ紹介（第5弾。/staff/。collections.js の buildStaffIndexPage）--- */
/* まごころの実物（staff.html 303〜503 行）と同じ組み立て。値は実物のテーマのCSS
   （page.css = …/css/page__qc1b6b9ac.css ／ module.css = …/css/module__qd10aae34.css。場所は docs/デザイン基準.md 0章の C〜J と同じ）：
   ・1人ずつの欄（.staffSect）の下に 30px … page.css 7〜19
   ・名前は中見出し（7-3）、インタビューのタイトルは小見出し（7-4）と同じ見た目（実物も class="style-title"）
   ・写真（左 38%・中央）＋経歴（右 58%）・間 2% … module.css 120〜129・page.css 38〜40
   ・経歴の見出し（dt）：ごく薄いオレンジの地（#fff7e7）・左右 5px … page.css 51〜54・C 1448〜1450
     内容（dd）：下に 5px … page.css 55〜57
   ・インタビューの写真：幅 200px・右に回り込み（写真の位置が left のときだけ左）・まわりに 10px（上は 0）… page.css 41〜50
   ・スマホは「10. スマホ」の後ろの第5弾の @media（写真と経歴は縦に、インタビューの写真は中央に）… module.css 200〜213・page.css 58〜68 */
.staffSect {
  margin-bottom: 30px;
}
.staffBlock::after {
  content: "";
  display: block;
  clear: both;
}
.staffBlock .left {
  float: left;
  margin-right: 2%;
  text-align: center;
}
.staffBlock .right {
  float: right;
  margin-left: 2%;
}
.staffBlock .left p,
.staffBlock dl {
  margin: 0;
}
.staffBlock dt {
  padding: 0 5px;
  background: var(--color-orange-pale);
  font-weight: normal;
}
.staffBlock dd {
  margin: 0 0 5px;
}
.interview_box .iview_photo {
  float: right;
  margin: 0 10px 10px 10px;
}
.interview_box .iview_photo.left {
  float: left;
}
.interview_box .iview_photo img {
  width: 200px;
}
.iview_text p {
  margin: 0 0 var(--space-paragraph);
}
.iview_text a {
  color: var(--color-link);
}
/* 名前の中見出しの下は 15px（本物の名前の h2.style-title は .parts-item ではないので、パーツ間の 32px ではなく
   module.css 13〜21 の .entry-content h2 の下 15px）。インタビューのタイトル（h3）の下も同じ 15px。
   インタビューの上は 50px：本物はタイトルが空でも空の <h3 class="style-title"> を出していて、その上の余白 50px が効く
   （自作は空の h3 を出さないので、インタビューの枠に付ける。タイトルがあるときも h3 の上の 50px と同じ位置になる）。
   以前は名前の下 32px・インタビューの上 0 で、まごころの /staff/ が PC で名前の下 +17px・インタビューの上 −50px（スマホ −40px）ずれていた（2026-09-25） */
.staffSect > h2.style-title {
  margin-bottom: 15px;
}
.interview_box {
  margin-top: 50px;
}
.interview_box > h3.style-title {
  margin-top: 0;
  margin-bottom: 15px;
}
/* スタッフの本文（パーツ）は、1人分の欄の 94%・上限はパーツの最大幅・真ん中（本物はパーツをこの欄の中に並べ、
   F 7〜20 の .entry-content .parts-item が 94% にする）。以前は欄の幅いっぱいで、推薦文の囲みが
   PC で 50px・スマホで 19px 本物より広かった（2026-09-25）。まとめパーツは外枠（.block-set）をこの幅にする（7-11） */
.staffSect > .parts-item,
.staffSect > .block-set {
  width: 94%;
  max-width: var(--width-parts-max);
  margin-inline: auto;
}


/* --- 7-15. 症状改善ページの本文の最後（2026-09-25）------------- */
/* 本物のテーマは症状改善ページの本文の最後に「関連記事」の枠（<div id="MorePost">）を出す。
   3院とも中身は空で、上の余白 24px だけが見える（F 879〜885：padding-top 24px・幅 94%・上限はパーツの最大幅）。
   この枠があるので、最後のパーツの下の 32px も残る（1. の :last-child の 0 が効かない）。
   自作は render.js が症状改善ページ（kind が "symptom"）の本文の最後に .more-post を置く。
   以前は無く、症状改善ページが本物より 56px 短かった（整体院光 /symptomscat/post-3326/・まごころ /symptomscat/post-1874/） */
.entry-content > .more-post {
  padding-top: 24px;
}


/* ============================================================
   8. 院の案内（#content-footer）・フッター（#global-footer）
   ------------------------------------------------------------
   現行サイト（整体院光）と同じ組み立て・値（2026-09-24。記号は docs/デザイン基準.md 0章）。
   組み立ては layout.js の renderContentFooter・renderFooter。
   ・院の案内 … 本文の白い箱の最後。ロゴ・電話・ボタン・営業時間・住所・地図（C 706〜900・1411〜1416）
   ・フッター … いちばん上にナビの白い帯（5. ナビゲーション）、その下にPCだけの2列の帯（C 980〜1115・1426〜1428）
                とコピーライト。スマホではナビも帯も出さない（C 1117〜1128。下の 10. スマホ）
   以前は、院名・電話・ボタン・住所・営業時間・地図・コピーライトを、フッターに中央寄せの1列で並べていた。
   ボタンの色・影・文字の影は、ヘッダーと同じ（C 196〜214）。アイコンは画像を使わずSVGで描いたもの
   ============================================================ */

/* --- 8-1. 院の案内（#content-footer）--------------------------------
   ・白い箱の 94%・上に 40px・内側 3%・薄いオレンジの地（実物は灰色 #eee を、オレンジの設定で
     --color-main-light に上書き）… C 706〜711・1411〜1413
   ・見出し（ロゴ）：白地・上にオレンジ 4px・内側 10px 2%・下に 30px … C 712〜717・1414〜1416 */
#content-footer {
  width: 94%;
  margin: 40px auto 0;
  padding: 3%;
  background-color: var(--color-bg-contact);
}
#content-footer h2 {
  margin: 0 0 30px;
  padding: 10px 2%;
  border-top: 4px solid var(--color-orange);
  background-color: var(--color-bg-main);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}
/* 《ご予約はコチラ》・大きな電話番号（緑の受話器。実物 tel-icon-pc-02.png は約 37×53px）… C 718〜738 */
#content-footer .tel-text {
  display: block;
  margin: 0;
  font-size: inherit;
  text-align: center;
  word-break: break-word;
}
#content-footer .tel-pc {
  width: 100%;
  margin: 0 0 12px;
  font-weight: bold;
  text-align: center;
}
#content-footer .tel-pc .tel-number {
  display: inline-block;
  width: auto;
  padding-left: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 36'%3E%3Cpath fill='%23099e29' d='M7.5 1.2C5.2.3 1.2 2.2.9 7.2.3 17.5 6 29.5 15.2 34.6c3.5 1.9 7.2-.2 8.4-2.2.8-1.2.5-2.5-.6-3.3l-4.6-3.3c-1.1-.8-2.5-.5-3.2.6l-1.3 1.9C9.6 25.2 6.9 19 6.5 13.5l2.2-.6c1.3-.3 2.1-1.5 1.8-2.8l-1-6.3c-.2-1.2-.9-2.2-2-2.6z'/%3E%3C/svg%3E") no-repeat left center / 37px auto;
  font-size: 48px;
  letter-spacing: normal;
  line-height: 1.2;
  word-break: break-word;
}
/* 電話・ボタン・営業時間のかたまり：下に点線 … C 739〜744 */
#content-footer .content-footer-contact {
  margin: 16px 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px dotted #333;
}
/* ボタン（横に並べて中央。幅いっぱい・上限 400px・18px・下に 24px）… C 748〜772 */
#content-footer .content-footer-contact .button-area {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0 3%;
  margin: 0;
}
#content-footer .content-footer-contact .button-area a {
  display: inline-block;
  width: 100%;
  max-width: 400px;
  min-width: 0;
  margin-bottom: 24px;
  padding: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-button);
  color: var(--color-text-inverse);
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}
#content-footer .content-footer-contact .button-area a span {
  display: inline-block;
  padding: 16px 0 16px 35px;
  background-repeat: no-repeat;
  background-position: left center;
}
/* 営業時間・定休日：濃い灰色のラベル（幅 120px・13px）の下に内容 … C 774〜797 */
#content-footer .content-footer-contact .info {
  display: block;
  margin: 10px 0;
  text-align: left;
}
#content-footer .info dl {
  display: block;
  margin: 0;
  font-size: inherit;
}
#content-footer .info dt {
  display: inline-block;
  width: 120px;
  margin: 15px 0 5px;
  padding: 2px 8px;
  border-radius: 0;
  background: var(--color-bg-label);
  color: var(--color-text-inverse);
  font-size: 13px;
  text-align: center;
}
#content-footer .info dl:first-child dt {
  margin-top: 0;
}
#content-footer .info dd {
  display: block;
  width: auto;
  margin: 0;
}
#content-footer .info .holiday-notice {
  font-size: inherit;
}
/* 住所（〒のあとに 10px）・地図（幅いっぱい・高さ 350px）… C 798〜811 */
#content-footer .address {
  margin: 0 0 15px;
  font-size: inherit;
  word-break: break-all;
}
#content-footer .address span {
  margin-right: 10px;
}
#content-footer .googlemap iframe {
  display: block;
  width: 100%;
  height: 350px;
  border: 0;
}

/* --- 8-2. フッター全体・PCだけの2列の帯 ------------------------------
   ・フッター全体：上に 30px・白地・上にオレンジ 5px の線 … C 916〜921・1420〜1422
   ・帯：上に 20px・薄いオレンジの地 … C 981〜986・1426〜1428
   ・帯の中：左右2列（間 20%）・本文と同じ幅・内側 上 24px 下 12px … C 987〜995
       左（幅 50%）… ロゴ（上限 420px・下に 10px）・住所（90%）… C 1007〜1015・1086〜1088
       右（幅 50%・上限 400px）… 《ご予約はコチラ》・電話番号（30px・受話器 20px）・赤と緑のボタン（下に 12px）・
                                 営業時間（ラベル 104px・右寄せ・90%）… C 1016〜1092
   ・コピーライト：内側 16px・中央 … C 1101〜1104 */
#global-footer {
  margin-top: 30px;
  border-top: 5px solid var(--color-orange);
  background-color: var(--color-bg-main);
}
#global-footer-main-pc {
  width: 100%;
  margin-top: 20px;
  overflow: hidden;
  background-color: var(--color-bg-footer-bar);
}
#global-footer-main-pc .inner {
  display: flex;
  justify-content: space-between;
  gap: 0 20%;
  padding: 24px 0 12px;
}
#global-footer-main-pc-left {
  width: 50%;
}
#global-footer-main-pc-left .logo {
  width: 100%;
  max-width: 420px;
  margin: 0 0 10px;
}
#global-footer-main-pc-left .address {
  margin: 0;
  font-size: 90%;
}
#global-footer-main-pc-right {
  width: 50%;
  max-width: 400px;
}
#global-footer-main-pc-right .tel-text {
  margin: 0;
  font-size: inherit;
}
#global-footer-main-pc-right .tel {
  display: inline-block;
  min-height: 50px;
  margin: 0;
  padding-top: 8px;
  font-size: 32px;
  line-height: 0;
  text-align: left;
  vertical-align: middle;
}
#global-footer-main-pc-right .tel .tel-number {
  display: inline-block;
  padding-left: 25px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 36'%3E%3Cpath fill='%23099e29' d='M7.5 1.2C5.2.3 1.2 2.2.9 7.2.3 17.5 6 29.5 15.2 34.6c3.5 1.9 7.2-.2 8.4-2.2.8-1.2.5-2.5-.6-3.3l-4.6-3.3c-1.1-.8-2.5-.5-3.2.6l-1.3 1.9C9.6 25.2 6.9 19 6.5 13.5l2.2-.6c1.3-.3 2.1-1.5 1.8-2.8l-1-6.3c-.2-1.2-.9-2.2-2-2.6z'/%3E%3C/svg%3E") no-repeat left center / 20px auto;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: normal;
  line-height: 1.2;
  word-break: break-word;
}
#global-footer-main-pc-right .button-area {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0 3%;
  margin: 0;
}
#global-footer-main-pc-right .button-area a {
  display: inline-block;
  width: 100%;
  max-width: 400px;
  min-width: 0;
  margin-bottom: 12px;
  padding: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-button);
  color: var(--color-text-inverse);
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}
#global-footer-main-pc-right .button-area a span {
  display: inline-block;
  padding: 16px 0 16px 35px;
  background-repeat: no-repeat;
  background-position: left center;
}
#global-footer-main-pc-right .info {
  font-size: 90%;
  text-align: left;
}
#global-footer-main-pc-right .info dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0 3%;
  margin: 0;
  padding-top: 10px;
  overflow: hidden;
  font-size: inherit;
}
#global-footer-main-pc-right .info dt {
  flex: none;
  width: 104px;
  padding: 2px 0;
  border-radius: 0;
  background: var(--color-bg-label);
  color: var(--color-text-inverse);
  font-size: 90%;
  text-align: center;
}
#global-footer-main-pc-right .info dd {
  width: calc(97% - 104px);
  word-break: break-word;
}
#global-footer-main-pc .copyright {
  margin: 0;
  padding: 16px;
  text-align: center;
}

/* --- 8-3. 院の案内・フッターの帯のボタンの色とアイコン（ヘッダーと同じ。C 196〜214）--- */
#content-footer .button-area a.mail,
#global-footer-main-pc-right .button-area a.mail {
  background: var(--gradient-btn-mail);
  text-shadow: var(--shadow-text-btn-mail);
}
#content-footer .button-area a.mail span,
#global-footer-main-pc-right .button-area a.mail span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 16'%3E%3Crect width='23' height='16' rx='1.5' fill='%23fff'/%3E%3Cpath d='M1.5 1.8l10 7.5 10-7.5' fill='none' stroke='%23bb0f0f' stroke-width='1.6'/%3E%3C/svg%3E");
  background-size: 23px 16px;
}
#content-footer .button-area a.line_btn,
#global-footer-main-pc-right .button-area a.line_btn {
  background: var(--gradient-btn-line);
  text-shadow: var(--shadow-text-btn-line);
}
#content-footer .button-area a.line_btn span,
#global-footer-main-pc-right .button-area a.line_btn span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 69 66'%3E%3Cpath fill='%23fff' d='M34.5 2C16 2 2 13.6 2 28c0 12.8 11.2 23.3 26.3 25.6 1 .2 2.4.7 2.7 1.6.3.8.2 2 .1 2.9l-.4 2.6c-.1.8-.6 3 2.6 1.6s17.3-10.2 23.6-17.5C61.2 40.1 67 34.6 67 28 67 13.6 53 2 34.5 2z'/%3E%3Ctext x='34.5' y='35.5' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='bold' font-size='19' fill='%23029403'%3ELINE%3C/text%3E%3C/svg%3E");
  background-size: 23px auto;
}
/* スマホだけの緑の電話ボタン（院の案内）… C 820〜822（PCでは出さない）・847〜866 */
@media screen and (min-width: 601px) {
  #content-footer .content-footer-contact .button-area a.tel-sp {
    display: none;
  }
}
/* 本文の幅「広い」（body の is-wide。2-4）で画面 1001px 以上のときだけ、院の案内を「連絡先｜地図」の横並びに。
   テーマの値そのまま（C 815〜839）。整体院光・美容鍼（標準）には当たらない */
@media screen and (min-width: 1001px) {
  .is-wide #content-footer .tel-pc .tel-number {
    padding-left: 36px;
    font-size: 36px;
    background-size: 26px;
  }
  .is-wide #content-footer h2 {
    text-align: center;
  }
  .is-wide #content-footer-main {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 0 3%;
  }
  .is-wide #content-footer-main .content-footer-contact {
    width: 100%;
    margin-top: 0;
    border-bottom: 0;
  }
  .is-wide #content-footer-main .content-footer-map {
    width: 100%;
  }
}


/* ============================================================
   8-2. ページ上部に戻るボタン（#pagetop）
   ------------------------------------------------------------
   現行サイトの design-pagetop-05（A 149 の body のクラス）を、実物のCSSの値どおりに描いたもの。
     出どころ P = …/css/design-themes/design-pagetop__qd10aae34.css（D・C・H は docs/デザイン基準.md 0章）
   ・画面の右下に固定・右と下から 10px・文字 10px … D 1096〜1103
   ・オレンジの横長の丸（角丸 100px）・内側の余白 上下7px 右15px 左30px・白の太字 … P 93〜99・330〜332／D 1104〜1111
   ・左に白い丸（16×16px・左から 6px・上下の真ん中）… P 100〜111
   ・丸の中に上向きの三角（幅 8px・高さ 5px・オレンジ）… P 112〜121・333〜335
   ・「ページの<br>先頭へ」の改行は出さず1行に … P 122〜124
   ・マウスを乗せると透明度 0.7（0.3秒）… H 97〜104（a.hover）
   ・出るタイミング：最初からずっと表示。
       実物の common.js 170〜194 は「400px スクロールしたら表示」を $('#pageTop')（T が大文字）に対して
       書いているが、実物の要素は id="pagetop"（小文字。A 909）のため当てはまらず、いつも表示されている
       （保存済みの実物のスクショでも、スクロール前の画面の右下に出ている）
   ・押すとページのいちばん上へ。実物は JavaScript で 0.3秒かけて移動（common.js 85〜107・156）。
     自作版は JavaScript を使わず、scroll-behavior: smooth でなめらかに移動（動きを減らす設定の端末では一瞬で移動）
   ・スマホ（600px以下）の高さは「10. スマホ」に（固定ボタンの上に来るように）
   ============================================================ */

#pagetop {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 99;
  display: table;
  margin: 0;
  font-size: 10px;
}
#pagetop a {
  display: table-cell;
  padding: 7px 15px 7px 30px;
  border-radius: 100px;
  background: var(--color-orange);
  color: var(--color-text-inverse);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}
#pagetop a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 16px;
  height: 16px;
  margin: auto 0;
  border-radius: 100px;
  background: #fff;
}
#pagetop a::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 10px;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-bottom: 5px solid var(--color-orange);
}
#pagetop span br {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}


/* ============================================================
   9. スマホの固定ボタン（#sp-fixed-cta）と、電話の小窓（#sp-modal）
   ------------------------------------------------------------
   現行サイト（整体院光）の #global-nav-sp と同じ見た目・動き（2026-09-23 実物のHTML・CSS・院長のスクショで確認）。
     実物：<div id="global-nav-sp" class="fixed">（A2 238〜245）
           上に小見出しの帯（ff-sp-head-03.png）、下に 赤「電話をかける」＋緑「LINE予約はこちら」の2つ
           （ff-sp-03-tel.png・ff-sp-03-line.png）。どれもセルフル社の配布画像をCSSの背景に敷いたもの
           （C 529〜605）。自作版は画像を使わず、同じ色（画像から読み取った値）・同じ文字をCSSで描いています
   ・画面の下に固定・横いっぱい・白の半透明（0.8）・上に白い 1px の線・重なり 100 … C 497〜510
   ・小見出しの帯：高さは横幅の 6.25% … C 529〜534
   ・ボタンの並び：左右 2.5%・上 4px・下 5px の余白、両端にそろえる … C 547〜555
   ・ボタン：高さは並びの幅の 15%（隙間なしは 16%）。2つなら 49%＋49%（間 2%）、1つなら 100%、
     3つなら 49%＋24%＋24%（間 2%・1%）… C 562〜605
   ・「ボタンの間の隙間：なし」（sp_cta_gap: false）… 小見出し・背景・線なし、50%／25% でぴったり並べる … C 630〜693
   ・画像ボタン（custom）… 上 6px、2つなら 48%（左右 1%）、3つなら 48%＋23%＋23%、画像の高さは最大 150px … C 606〜627
   ・電話ボタンを押すと、黒い半透明の小窓が開く（予約の流れの説明＋緑の「電話をかける」）… D 585〜723・C 847〜866・common.js 351〜364
   ・PC（601px以上）では、固定ボタンも小窓も出さない … C 388〜390／D 592〜596
   文字の大きさ・アイコンは、画面の幅に合わせて伸び縮みします（実物の画像ボタンと同じく vw＝画面幅の1%で指定）
   ============================================================ */

.sp-fixed-cta,
.sp-modal,
.sp-modal-toggle {
  display: none;
}

@media screen and (max-width: 600px) {

  .sp-fixed-cta {
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 100;
    width: 100%;
    border-top: 1px solid #fff;
    background: rgba(255, 255, 255, 0.8);
  }
  /* 画面の上に固定（sp_cta_position: "top"）… ページのいちばん上に置き、スクロールしても上に貼り付く */
  .sp-fixed-cta.sp-cta-top {
    position: sticky;
    top: 0;
    bottom: auto;
  }

  /* 小見出し（実物は ff-sp-0X-head.png の画像 640×41px。画像の文字を測った値：
     左「ご予約・お問い合わせは今すぐ」は横幅の約3%の大きさ、右「24時間受付中」は約3.7%で少し大きい。
     文字は #333 の太字、前後に細い斜めの線）*/
  .sp-cta-head {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 6.25vw;
    margin: 0;
    padding: 0 1%;
    overflow: hidden;
    color: #333;
    font-size: 3vw;
    font-weight: bold;
    line-height: 1;
    letter-spacing: -0.03em;
    white-space: nowrap;
  }
  .sp-cta-head .sp-cta-head-em {
    font-size: 3.7vw;
  }
  .sp-cta-head span::before,
  .sp-cta-head span::after {
    color: #555;
    font-size: 3.2vw;
    font-weight: normal;
  }
  .sp-cta-head span::before {
    content: "＼";
    margin-right: 0.8vw;
  }
  .sp-cta-head span::after {
    content: "／";
    margin-left: 0.8vw;
  }

  .sp-cta-contents {
    display: flex;
    justify-content: space-between;
    padding: 4px 2.5% 5px;
  }

  /* --- 標準のボタン（共通の形）--- */
  .sp-cta-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 49%;
    height: 14.25vw;
    overflow: hidden;
    border: 1px solid;
    border-bottom-width: 0.7vw;
    border-radius: 0.9vw;
    color: #fff;
    font-weight: bold;
    line-height: 1.1;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .sp-cta-count-1 .sp-cta-btn {
    width: 100%;
  }
  .sp-cta-count-3 .sp-cta-contents {
    justify-content: flex-start;
  }
  .sp-cta-count-3 .sp-cta-btn {
    width: 24%;
  }
  .sp-cta-count-3 .sp-cta-btn:first-child {
    width: 49%;
    margin-right: 2%;
  }
  .sp-cta-count-3 .sp-cta-btn:nth-child(2) {
    margin-right: 1%;
  }

  /* 色（セルフルのボタン画像から読み取った値：上のふち／上の光／上／真ん中／下／下の厚み） */
  .cta-tel {
    border-color: #00712d;
    border-bottom-color: #003d19;
    background: linear-gradient(to bottom, #32a770 0%, #008f4a 10%, #007e36 50%, #006a29 100%);
  }
  /* 電話＋LINE の2つのときだけ、電話は赤（ff-sp-03-tel.png）*/
  .cta-tel.cta-red {
    border-color: #c00c00;
    border-bottom-color: #810800;
    background: linear-gradient(to bottom, #dc4a32 0%, #d31d00 10%, #c50e00 60%, #bf0c00 100%);
  }
  .cta-line {
    border-color: #029b26;
    border-bottom-color: #1e7b06;
    background: linear-gradient(to bottom, #32d67a 0%, #00ca56 10%, #00bb39 50%, #00a626 100%);
  }
  .cta-contact {
    border-color: #ee5b04;
    border-bottom-color: #a23a01;
    background: linear-gradient(to bottom, #ffa832 0%, #ff8f00 10%, #ff7600 50%, #ff5b00 100%);
  }

  /* --- 電話：上に小さく「ここをタッチしてお電話ください」、下に黄色の大きな「電話をかける」、右に指の絵 --- */
  .cta-tel.cta-half {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 2.2vw;
  }
  .cta-tel .cta-lead {
    margin-bottom: 0.6vw;
    font-size: 2.55vw;
    line-height: 1.2;
  }
  .cta-tel .cta-main {
    display: flex;
    align-items: center;
    color: #fff100;
    font-size: 4.7vw;
    line-height: 1;
  }
  .cta-tel.cta-quarter .cta-main {
    font-size: 3vw;
  }
  /* 黄色の受話器 */
  .cta-tel .cta-main::before {
    content: "";
    flex: none;
    width: 3.1vw;
    height: 4.6vw;
    margin-right: 1vw;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 36'%3E%3Cpath fill='%23fff100' d='M7.5 1.2C5.2.3 1.2 2.2.9 7.2.3 17.5 6 29.5 15.2 34.6c3.5 1.9 7.2-.2 8.4-2.2.8-1.2.5-2.5-.6-3.3l-4.6-3.3c-1.1-.8-2.5-.5-3.2.6l-1.3 1.9C9.6 25.2 6.9 19 6.5 13.5l2.2-.6c1.3-.3 2.1-1.5 1.8-2.8l-1-6.3c-.2-1.2-.9-2.2-2-2.6z'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  /* 指の絵（黄色の丸を指で押している）*/
  .cta-tel::after {
    content: "";
    position: absolute;
    right: 1.4vw;
    bottom: 0.6vw;
    width: 7.4vw;
    height: 7.4vw;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Ccircle cx='12' cy='11' r='8' fill='none' stroke='%23ffd900' stroke-width='3'/%3E%3Ccircle cx='12' cy='11' r='3.5' fill='%23ff9a00'/%3E%3Cpath fill='%23fff' stroke='%23222' stroke-width='2' stroke-linejoin='round' d='M11.5 12.5c-.9-1.9 1.4-3.5 2.9-1.9L22.5 24l.1-2.3c.7-1.8 3-1.6 3.4.2l.5 1.5c.8-1.5 3.1-1.3 3.5.6l.6 1.6c.9-1.3 3-.9 3.3.9l2.6 7.5c1.5 4.6-1 9.5-5.8 11-3.9 1.2-8.3 0-10.7-3.2l-7.2-9c-1-1.4.5-3.3 2.2-2.5l3.8 2.7z'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  .cta-tel.cta-full::after {
    position: static;
    margin-left: 1.5vw;
  }
  .cta-tel.cta-quarter::after {
    display: none;
  }

  /* --- LINE・ネット予約：左に絵、右に2行の文字（3つのときの2・3個目は、文字の下に絵）--- */
  .cta-line .cta-text,
  .cta-contact .cta-text {
    font-size: 4.3vw;
    line-height: 1.12;
    text-align: left;
  }
  .cta-line::before,
  .cta-contact::before {
    content: "";
    flex: none;
    margin-right: 1.8vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  /* 白い吹き出しに緑の「LINE」*/
  .cta-line::before {
    width: 9.7vw;
    height: 8vw;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 69 66'%3E%3Cpath fill='%23fff' d='M34.5 2C16 2 2 13.6 2 28c0 12.8 11.2 23.3 26.3 25.6 1 .2 2.4.7 2.7 1.6.3.8.2 2 .1 2.9l-.4 2.6c-.1.8-.6 3 2.6 1.6s17.3-10.2 23.6-17.5C61.2 40.1 67 34.6 67 28 67 13.6 53 2 34.5 2z'/%3E%3Ctext x='34.5' y='35.5' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='bold' font-size='19' fill='%2300b33a'%3ELINE%3C/text%3E%3C/svg%3E");
  }
  /* 白いパソコンとスマホ */
  .cta-contact::before {
    width: 9.7vw;
    height: 7vw;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 36' fill='none' stroke='%23fff'%3E%3Crect x='5' y='3' width='30' height='21' rx='1.5' stroke-width='3'/%3E%3Cpath d='M1 29.5h38' stroke-width='4' stroke-linecap='round'/%3E%3Crect x='40' y='12' width='10' height='20' rx='2' stroke-width='2.5'/%3E%3Cpath d='M44 28.5h2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  .cta-line.cta-quarter,
  .cta-contact.cta-quarter {
    flex-direction: column;
  }
  .cta-quarter .cta-text {
    font-size: 3.2vw;
    text-align: center;
  }
  .cta-line.cta-quarter::before,
  .cta-contact.cta-quarter::before {
    order: 2;
    width: 6.4vw;
    height: 5.4vw;
    margin: 0.8vw 0 0;
  }

  /* --- ボタンの間の隙間：なし（sp_cta_gap: false）… C 630〜693 --- */
  .sp-fixed-cta.sp-cta-nogap {
    border-top: 0;
    background: none;
  }
  .sp-cta-nogap .sp-cta-contents {
    padding: 0;
  }
  .sp-cta-nogap .sp-cta-btn,
  .sp-cta-nogap.sp-cta-count-3 .sp-cta-btn:first-child,
  .sp-cta-nogap.sp-cta-count-3 .sp-cta-btn:nth-child(2) {
    width: 50%;
    height: 16vw;
    margin: 0;
    border-radius: 0;
  }
  .sp-cta-nogap.sp-cta-count-1 .sp-cta-btn {
    width: 100%;
  }
  .sp-cta-nogap.sp-cta-count-3 .sp-cta-btn {
    width: 25%;
  }
  .sp-cta-nogap.sp-cta-count-3 .sp-cta-btn:first-child {
    width: 50%;
  }

  /* --- 画像ボタン（sp_cta_mode: "custom"）… C 606〜627・679〜693 --- */
  .sp-cta-custom .sp-cta-contents {
    padding-top: 6px;
  }
  .sp-cta-img {
    display: block;
    width: 100%;
    line-height: 0;
  }
  .sp-cta-custom.sp-cta-count-2 .sp-cta-img {
    width: 48%;
    margin: 0 1%;
  }
  .sp-cta-custom.sp-cta-count-3 .sp-cta-img {
    width: 23%;
    margin: 0 1%;
  }
  .sp-cta-custom.sp-cta-count-3 .sp-cta-img:first-child {
    width: 48%;
  }
  .sp-cta-img img {
    width: 100%;
    max-height: 150px;
    object-fit: contain;
  }
  .sp-cta-nogap.sp-cta-custom .sp-cta-contents {
    padding: 0;
  }
  .sp-cta-nogap.sp-cta-custom .sp-cta-img,
  .sp-cta-nogap.sp-cta-custom.sp-cta-count-2 .sp-cta-img {
    width: 50%;
    margin: 0;
  }
  .sp-cta-nogap.sp-cta-custom.sp-cta-count-1 .sp-cta-img {
    width: 100%;
  }
  .sp-cta-nogap.sp-cta-custom.sp-cta-count-3 .sp-cta-img {
    width: 25%;
    margin: 0;
  }
  .sp-cta-nogap.sp-cta-custom.sp-cta-count-3 .sp-cta-img:first-child {
    width: 50%;
  }

  /* --- 電話の小窓（#sp-modal）… D 597〜723・C 847〜866 ---------------------------------
     開け閉めはチェックボックス（sp-modal-tel-toggle）。電話ボタン・×ボタンは、その <label> */
  .sp-modal-toggle {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }
  .sp-modal-toggle:checked ~ .sp-modal {
    display: block;
  }
  /* 小窓が開いている間は、後ろのページをスクロールさせない（実物の body.no-scroll-sp … D 66〜68）*/
  body:has(.sp-modal-toggle:checked) {
    overflow: hidden;
  }
  .sp-modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #0000008f;
    line-height: 1.6;
  }
  .sp-modal p,
  .sp-modal dl,
  .sp-modal dd,
  .sp-modal h2 {
    margin: 0;
  }
  .sp-modal-head {
    margin: 15px 15px 0 0;
    line-height: 0;
    text-align: right;
  }
  /* 白い「×」（実物は sp-modal-close-btn.png を幅18pxで表示）*/
  .sp-modal-head .close-btn {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    cursor: pointer;
  }
  .sp-modal-head .close-btn::before,
  .sp-modal-head .close-btn::after {
    content: "";
    position: absolute;
    top: 8px;
    left: -3px;
    width: 24px;
    height: 2px;
    background: #fff;
    transform: rotate(45deg);
  }
  .sp-modal-head .close-btn::after {
    transform: rotate(-45deg);
  }
  .sp-modal-main {
    margin: 15px;
    padding: 15px;
    background: #fff;
  }
  .sp-modal-main-tel > h2 {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    font-size: 100%;
    font-weight: bold;
  }
  .sp-modal-main-tel .date {
    margin-bottom: 10px;
  }
  .sp-modal-main-tel .date dt {
    font-weight: bold;
  }
  /* 緑の「電話をかける」… C 847〜866 */
  .sp-modal-main-tel .tel-sp {
    display: block;
    margin: 0 0 12px;
    border-radius: 4px;
    background: linear-gradient(to bottom, #2eb10b 0%, #2eb10b 50%, #1e9000 51%, #1e9000 100%);
    box-shadow: var(--shadow-button);
    color: #fff;
    font-size: 120%;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 2px #075a1d;
  }
  .sp-modal-main-tel .tel-sp span {
    padding-left: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 36'%3E%3Cpath fill='%23fff' d='M7.5 1.2C5.2.3 1.2 2.2.9 7.2.3 17.5 6 29.5 15.2 34.6c3.5 1.9 7.2-.2 8.4-2.2.8-1.2.5-2.5-.6-3.3l-4.6-3.3c-1.1-.8-2.5-.5-3.2.6l-1.3 1.9C9.6 25.2 6.9 19 6.5 13.5l2.2-.6c1.3-.3 2.1-1.5 1.8-2.8l-1-6.3c-.2-1.2-.9-2.2-2-2.6z'/%3E%3C/svg%3E") no-repeat left center / 16px auto;
  }
  /* 予約の流れ（クリーム色の囲み）… D 649〜722 */
  .sp-modal .tel-flow {
    margin-top: 20px;
    padding: 20px 10px;
    border-radius: 6px;
    background: #fff9e0;
  }
  .sp-modal .tel-flow h2 {
    margin: 0 0 10px;
    color: #493209;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
  .sp-modal .comment-item {
    margin: 5px 0;
  }
  .sp-modal .comment-item::after {
    content: "";
    display: block;
    clear: both;
  }
  .sp-modal .comment-item .img {
    float: left;
    width: 21%;
  }
  /* 実物はセルフル社の写真（電話を受ける人・かける人）。自作版は丸い印と文字 */
  .sp-modal .comment-item .img span {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #e3f1ff;
    color: #333;
    font-size: 12px;
    font-weight: bold;
  }
  .sp-modal .comment-item-right .img span {
    background: var(--color-orange-light);
    color: #493209;
  }
  .sp-modal .comment-item p {
    position: relative;
    float: right;
    width: 72%;
    padding: 10px 2%;
    border: 1px solid #cdbaa9;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    text-align: center;
  }
  .sp-modal .comment-item p::before,
  .sp-modal .comment-item p::after {
    content: "";
    position: absolute;
    top: 30%;
    border: 12px solid transparent;
  }
  .sp-modal .comment-item p::before {
    left: -24px;
    border-right-color: #cdbaa9;
  }
  .sp-modal .comment-item p::after {
    left: -23px;
    border-right-color: #fff;
  }
  .sp-modal .comment-item-right .img {
    float: right;
  }
  .sp-modal .comment-item-right p {
    float: left;
    width: 68%;
  }
  .sp-modal .comment-item-right p::before {
    left: auto;
    right: -24px;
    border-right-color: transparent;
    border-left-color: #cdbaa9;
  }
  .sp-modal .comment-item-right p::after {
    left: auto;
    right: -23px;
    border-right-color: transparent;
    border-left-color: #fff;
  }
  .sp-modal .mb-20 {
    margin-bottom: 20px;
  }
  .sp-modal .bold {
    font-weight: bold;
  }
}


/* ============================================================
   10. スマホ（600px以下）
   ------------------------------------------------------------
   境目は 600px の1本だけです。
   ============================================================ */

@media screen and (max-width: 600px) {

  /* 本文の白い箱の余白は、スマホも PC と同じ（上下 3%・左右 0。D 817〜824 にスマホ用の指定なし）。
     中身は箱の 94%（2. の .entry-content > *）→ 331px。以前は 4% 4% 24px で 324px だった */

  /* --- ヘッダー（スマホ）---------------------------------------------
     現行サイトと同じ出し方（2026-09-23 実物のCSS・JS・院長のスクショで確認）:
       ・ヘッダーの外側の余白なし … C 397〜399
       ・いちばん上の帯はそのまま（はみ出しは隠す）… C 400〜402
       ・PCのかたまり（住所・電話・ボタン・営業時間）は出さない … C 403〜405
       ・ロゴ（左 70%）と「メニュー」ボタン（右 15%）の1行だけ。下に 5px … C 406〜428
       ・スクロールしても、この行は画面の上に固定（院長のスクショ 2026-09-23 22:56 でも固定されている）
           実物：<div id="global-header-main-sp" class="fixed-set">（A 204）。100px より下へスクロールすると
                 .fixed が付き、画面の上に固定・上にオレンジ 3px の線・地の色・影（common.js 238〜256、
                 C 410〜420・1379〜1381・1401〜1404）
           自作版：JavaScript を使わず position: sticky。線と影は、対応しているブラウザでは実物と同じく
                   100px スクロールしてから付く（下の @supports。未対応なら線・影なしで固定だけ）
           ※ 行の上に 5px の余白を持たせ（固定したときに線と重ならないように）、
             その分、帯の下の余白を 10px → 5px にして、固定前の見た目は実物と同じにしている */
  #global-header-main-pc {
    display: none;
  }
  .site-title {
    margin-bottom: 5px;
    overflow: hidden;
  }
  #global-header-main-sp {
    display: block;
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 5px 3%;
    background: var(--color-bg-body);
    line-height: 1.4;
  }
  #global-header-main-sp-left {
    float: left;
    width: 70%;
  }
  #global-header-main-sp-right {
    float: right;
    width: 15%;
  }
  /* 固定ボタンを画面の上に出すとき（sp_cta_position: "top"）は、上は固定ボタンが使うので、この行は固定しない */
  .sp-cta-top #global-header-main-sp {
    position: static;
    animation: none;
  }

  /* --- ヘッダーのナビ（スマホ）---------------------------------------
     現行サイトと同じ出し方（2026-09-23 実物のCSS・JSで確認）:
       ・PCのナビの帯は出さない … C 494〜496（#global-nav-pc { display: none }）
       ・ヘッダーの右上に「メニュー」ボタン（幅はヘッダーの15%の正方形。ロゴは左の約7割）… C 421〜428・449〜456
         ボタンの絵は menu-05（オレンジの角丸の枠・3本線・「メニュー」の文字。design-menu 36・115〜117）を
         画像を使わずにCSSで描いたもの（画像はセルフルのテーマの素材のため）
       ・押すと、画面の左から幅80%の白い箱がすべり出てメニューが並び、残りは黒く薄暗くなる（透明度0.3）。
         暗いところを押すと閉じる … C 457〜476・481〜490／common.js 294〜340（開閉は 0.2秒）
       ・箱の中は「メニュー」の見出し（オレンジの帯・白文字 22px）＋ 1行ずつの項目
         （上に 1px #dcdcdc の線・左にオレンジの三角）… C 1318〜1327・1414〜1418／D 858〜883
     ※実物は JavaScript で開け閉めしているが、自作版は JavaScript を使わず、チェックボックス（sp-menu-toggle）で開け閉めする。
     ※実物のこの箱には、ほかに「症状別メニュー」・Facebook の欄も入るが、自作版にはその欄が無いのでメニューだけ */
  /* チェックボックスは画面の左上に固定して置く（押したときに、ページがこの場所まで飛ばないように） */
  .sp-menu-toggle {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }
  .sp-menu-btn {
    display: flex;
    width: 100%;
    aspect-ratio: 1 / 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 2px solid var(--color-orange);
    border-radius: 5px;
    background: linear-gradient(to bottom, #ffffff 55%, var(--color-orange-pale) 100%);
    color: var(--color-orange);
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
  }
  /* 3本線（実物の絵では、線の長さはボタンの内側の約58%・線どうしの間は約9px） */
  .sp-menu-icon,
  .sp-menu-icon::before,
  .sp-menu-icon::after {
    display: block;
    height: 3px;
    background: var(--color-orange);
  }
  .sp-menu-icon {
    position: relative;
    width: 58%;
    margin: 9px 0 12px;
  }
  .sp-menu-icon::before,
  .sp-menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
  }
  .sp-menu-icon::before {
    top: -9px;
  }
  .sp-menu-icon::after {
    top: 9px;
  }
  .sp-menu-toggle:focus-visible ~ #global-header-main-sp .sp-menu-btn {
    outline: 2px solid var(--color-orange-dark);
    outline-offset: 2px;
  }

  /* 左から出てくる箱（閉じているときは画面の外。キーボードでも選べないよう隠しておく） */
  #global-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 80%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: var(--radius-panel);
    background: var(--color-bg-main);
    box-shadow: var(--shadow-fixed);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 0.2s, visibility 0s 0.2s;
  }
  .sp-menu-toggle:checked ~ #global-nav {
    transform: none;
    visibility: visible;
    transition: transform 0.2s;
  }
  .sp-menu-lightbox {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s, visibility 0s 0.1s;
  }
  .sp-menu-toggle:checked ~ .sp-menu-lightbox {
    opacity: 0.3;
    visibility: visible;
    transition: opacity 0.1s 0.2s;
  }
  #global-nav .sp-menu-title {
    display: block;
    margin: 0;
    padding: 10px 20px;
    border-radius: var(--radius-panel);
    background: var(--color-orange);
    color: var(--color-text-inverse);
    font-size: 22px;
  }
  #global-nav ul {
    display: block;
    width: auto;
    box-shadow: var(--shadow-card);
  }
  #global-nav li {
    width: auto;
    border-top: 1px solid var(--color-border-side);
    text-align: left;
  }
  #global-nav li:first-child {
    border-top: 0;
  }
  #global-nav a {
    position: relative;
    padding: 12px 25px 12px 30px;
    color: var(--color-text);
  }
  #global-nav a:hover {
    opacity: 1;
    text-indent: 0.1rem;
  }
  /* 区切り線（PCの帯のもの）は使わず、左にオレンジの三角（実物は 6×9px の画像）を置く */
  #global-nav li a::after {
    content: none;
  }
  #global-nav li a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 15px;
    border-top: 4.5px solid transparent;
    border-bottom: 4.5px solid transparent;
    border-left: 6px solid var(--color-orange);
    transform: translateY(-50%);
  }

  /* 本文＋画像は、スマホでは上下に並べます。HTMLが「画像 → 本文」の順なので、写真が上（現行と同じ）
     値はテーマのまま（module.css 200〜213：float なし・幅 100%・下 10px・中央）。
     吹き出し（2:8・8:2）はテーマでもスマホで横並びのまま（3-7〜7-3 だけが対象）。ツノを少し小さくする（F 1000〜1018） */
  .text-img-block:not(.balloon) .left,
  .text-img-block:not(.balloon) .right {
    float: none;
    width: 100%;
    margin: 0 auto 10px;
  }
  .text-img-block.balloon .left:not(.img)::before,
  .text-img-block.balloon .right:not(.img)::before {
    top: 10px;
  }
  .text-img-block.balloon .left:not(.img)::before {
    border-width: 10px 0 10px 14px;
  }
  .text-img-block.balloon .right:not(.img)::before {
    border-width: 10px 14px 10px 0;
  }
  .text-img-block.balloon .left:not(.img)::after,
  .text-img-block.balloon .right:not(.img)::after {
    top: 12px;
  }
  .text-img-block.balloon .left:not(.img)::after {
    border-width: 8px 0 8px 11px;
  }
  .text-img-block.balloon .right:not(.img)::after {
    border-width: 8px 11px 8px 0;
  }

  /* 余白パーツ：スマホ用の高さ（--sp-h）に差し替える */
  .spacer-block {
    height: var(--sp-h, 24px) !important;
  }

  /* 表のセル：文字 80%・内側 5px（実物 E 58〜64。7-6b） */
  .entry-content table tr th,
  .entry-content table tr td {
    padding: 5px;
    font-size: 80%;
  }

  /* 実物のスマホ：24px・行間 1.2・上下 15px（F 113〜118）。以前は 120%（19.2px）・行間 1.6 で、
     「諦めないで！諦めようと思」の所で改行する本物より、1行に3〜4文字多く入っていた（2026-09-25） */
  .voice-block h2 {
    padding: 15px 3%;
    font-size: 24px;
    line-height: 1.2;
  }
  .voice-block .photo {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 auto 15px;   /* 現行：F 72〜76 の下 15px（スマホは左右 auto。F 119〜126） */
    text-align: center;
  }
  .voice-block .respondent {
    text-align: left;
  }

  /* スライドショー（テーマ F 569〜594）：見出しの上下・画像の枠の高さ 210px・矢印 30px（上から 25%・矢じりの幅 8px） */
  .slide-title {
    margin: 15px 0 7px;
  }
  .slide-img {
    width: 100%;
    height: 210px;
    margin: 0 auto;
  }
  .slide-arrow {
    width: 30px;
    height: 30px;
    top: 25%;
    background-size: 8px auto;
  }

  .main-img-simple img {
    max-height: 220px;
  }

  /* --- メインビジュアル・パンくず（スマホ）------------------------------
     ・トップのメインビジュアルは画面の幅いっぱい・下に 20px … D 743〜751
     ・下層ページのメインビジュアルは本文の白い箱の幅いっぱい（保存したスクショで確認）
     ・パンくずは出さない … D 805〜808 */
  .main-img-top {
    width: auto;
    margin-bottom: 20px;
  }
  .entry-content > .main-img-page {
    width: auto;
    max-width: none;
  }
  .breadcrumb {
    display: none;
  }

  /* --- 院の案内（スマホ）… C 840〜900 --------------------------------------
     ・大きな電話番号は出さず、代わりに緑の電話ボタン（押すと発信）。ボタンは縦に3つ（幅いっぱい・16px・下に 12px）
     ・点線はなし・営業時間の下に 24px・住所は〒のあとで改行・地図の高さ 220px */
  #content-footer .tel-pc {
    display: none;
  }
  #content-footer .content-footer-contact {
    width: 100%;
    margin: 0;
    padding: 12px 0 0;
    border: 0;
  }
  #content-footer .content-footer-contact .button-area {
    flex-wrap: wrap;
  }
  #content-footer .content-footer-contact .button-area a {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 12px;
    padding: 0 3%;
    font-size: 16px;
  }
  #content-footer .content-footer-contact .button-area a span {
    display: inline-block;
    padding: 12px 0 12px 36px;
  }
  #content-footer .content-footer-contact .button-area a.tel-sp {
    display: block;
    background: linear-gradient(to bottom, #2eb10b 0%, #2eb10b 50%, #1e9000 51%, #1e9000 100%);
    color: var(--color-text-inverse);
    font-size: 120%;
    text-shadow: 1px 1px 2px #075a1d;
  }
  #content-footer .content-footer-contact .button-area a.tel-sp span {
    padding-left: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 36'%3E%3Cpath fill='%23fff' d='M7.5 1.2C5.2.3 1.2 2.2.9 7.2.3 17.5 6 29.5 15.2 34.6c3.5 1.9 7.2-.2 8.4-2.2.8-1.2.5-2.5-.6-3.3l-4.6-3.3c-1.1-.8-2.5-.5-3.2.6l-1.3 1.9C9.6 25.2 6.9 19 6.5 13.5l2.2-.6c1.3-.3 2.1-1.5 1.8-2.8l-1-6.3c-.2-1.2-.9-2.2-2-2.6z'/%3E%3C/svg%3E") no-repeat left center / 16px auto;
  }
  #content-footer .content-footer-contact .info {
    width: 100%;
    margin-bottom: 24px;
    text-align: left;
  }
  #content-footer .address {
    display: block;
    margin-bottom: 10px;
  }
  #content-footer .address span {
    display: block;
    margin: 0;
  }
  #content-footer .googlemap iframe {
    height: 220px;
  }

  /* --- フッター（スマホ）---------------------------------------------
     ・ナビの白い帯も、PCの2列の帯（コピーライトを含む）も出さない … C 1117〜1128
       （院の案内は本文の白い箱の最後に出ている。実物のスマホのフッターは、オレンジの線と余白だけ）
     ・ページのいちばん下が固定ボタンに隠れないよう、フッターの下に 90px の余白（白地）… C 1119〜1122
       （実物は固定ボタンの有無・場所にかかわらず 90px。固定ボタンの高さは 375px 幅で約 87px） */
  #global-footer {
    padding-bottom: 90px;
  }
  #global-footer-nav {
    display: none;
  }
  #global-footer-main-pc {
    display: none;
  }

  /* --- ページ上部に戻るボタン（スマホ）… 固定ボタンのすぐ上に来る高さ ---
     ・600px以下：下から 150px・右から 5px … D 1120〜1124
     ・450px以下：下から 100px … D 1130〜1133 ／ 350px以下：下から 80px … D 1139〜1142（下の別の @media）
     ・固定ボタンを出さないとき：下から 10px … C 1156〜1160（#pagetop.sp-fixed-btn-hide）
       固定ボタンが画面の上のときも、下には何も無いので 10px（実物の上固定は、スクロール後に「メニュー」ボタンが
       下へ移る作りのため 150px のまま。自作版はその動きをしないので 10px にしている） */
  #pagetop {
    right: 5px;
    bottom: 150px;
  }
  .sp-cta-none #pagetop,
  .sp-cta-top #pagetop {
    bottom: 10px;
  }
}

@media screen and (max-width: 450px) {
  #pagetop {
    bottom: 100px;
  }
}
@media screen and (max-width: 350px) {
  #pagetop {
    bottom: 80px;
  }
}

/* ------------------------------------------------------------
   10-2. 第5弾のスマホ（600px以下）：サイドバー・症状別メニュー・スタッフ紹介
   ------------------------------------------------------------
   ・サイドバー：2列をやめ、本文の下に本文と同じ幅で並べる（実物：#contents は折り返し・#main は下に 24px・
     #side は 94%＝本文と同じ幅。D 786〜790・828〜833・918〜922。6月保存のスマホの全体の写真
     000_original_mobile.png でも、本文の下に「メニュー」「症状別メニュー」）
   ・「メニュー」の箱の中の「症状別メニュー」：「メニュー」の欄の下に 20px あけて、同じ見た目で
     （実物は、サイドバーの欄をそのまま箱に写す。欄どうしの間は .side-nav の下の 20px。D 858〜860）
   ・スタッフ紹介：写真と経歴は縦に並べる（100%・下に 10px。module.css 200〜213）、
     インタビューの写真は回り込まず中央・もとの大きさ（page.css 58〜68）
   ------------------------------------------------------------ */
@media screen and (max-width: 600px) {
  .double-column #contents {
    display: block;
  }
  .double-column #main {
    width: auto;
    margin-bottom: 24px;
  }
  #side {
    width: auto;
    max-width: none;
  }
  /* 1列（サイドバーなし）でもサイドバーの欄があれば、本文の下に本文と同じ幅（94%）で中央に並べる
     （テーマと同じ。#contents は flex のまま折り返す＝D 786〜790。#main の下 24px も flex のまま効く。
       #main は幅いっぱいなので、#side は必ず次の行に回る。2列の指定は上のまま） */
  body:not(.double-column) #contents {
    flex-wrap: wrap;
  }
  body:not(.double-column) #side {
    width: 94%;
  }
  #global-nav .sp-menu-extra {
    display: block;
    margin-top: 20px;
  }
  /* ヘッダーに並べる項目が無く「症状別メニュー」だけの箱（.global-nav-sp-only）は、上をあけない */
  #global-nav .sp-menu-extra:first-child {
    margin-top: 0;
  }
  .staffBlock .left,
  .staffBlock .right {
    float: none;
    width: 100%;
    margin: 0 auto 10px;
  }
  .interview_box .iview_photo,
  .interview_box .iview_photo.left {
    float: none;
    margin-left: 0;
    text-align: center;
  }
  .interview_box .iview_photo img {
    width: auto;
  }
}

/* スマホのロゴの行：100px スクロールしたら上にオレンジ 3px の線と影を付ける（対応しているブラウザだけ）。
   線は行の上の余白（5px）の中に描くので、ロゴとは重ならない */
@keyframes fixed-shadow-sp {
  from { box-shadow: none; }
  to   { box-shadow: inset 0 3px 0 var(--color-orange), var(--shadow-fixed); }
}
@supports (animation-timeline: scroll()) {
  @media screen and (max-width: 600px) {
    #global-header-main-sp {
      animation: fixed-shadow-sp linear both;
      animation-timeline: scroll(root block);
      animation-range: 100px 101px;
    }
    .sp-cta-top #global-header-main-sp {
      animation: none;
    }
  }
}


/* ============================================================
   11. 印刷用（固定ボタンなど、紙には不要なものを隠す）
   ============================================================ */

@media print {
  .sp-fixed-cta,
  .sp-modal,
  .sp-modal-toggle,
  #pagetop,
  #global-nav,
  #global-nav-footer,
  #global-header-main-sp,
  .sp-menu-btn,
  .sp-menu-lightbox {
    display: none !important;
  }
  body {
    background: #fff;
  }
}