/* 鍼灸マッサージ院 和からだみなおし処
   土台＝無印ミニマル(C)＋エディトリアル(D)／正典＝design/DESIGN.md・CLAUDE.md記事デザインルール
   要点：温かい・彩度低め・中央寄せ（max-width+margin:0 auto）・SNSバー非表示・
        アイキャッチはPC70%/モバイル100%・カードは中央寄せ、長い本文は左寄せ・関連記事は最大3本
   禁じ手チェック済み：原色ベタ塗りなし／純黒純白なし／余白広め／2書体まで／影なし・角丸統一 */

:root{
  --bg:#FFFFFF;          /* 現行HPと同じ白（社長指示 2026-08-21） */
  --surface:#FAF8F5;   /* カード等はごく淡い生成りで白から浮かせる */
  --ink:#2C1810;         /* 現行HPの実測値。純黒にしない */
  --muted:#7A756B;
  --accent:#B0643C;      /* くすんだテラコッタ。院の温度感に合わせる */
  --deep:#3E4A3D;        /* 締め色。深い緑がかったグレー */
  --line:#E3DED4;
  --radius:4px;
  --leading:1.9;
  --wrap:760px;
  --font-head:"Noto Serif JP","游明朝",YuMincho,serif;
  --font-body:"Noto Sans JP","Hiragino Sans",sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); line-height:var(--leading); font-size:16px; letter-spacing:.02em}
img{max-width:100%; height:auto}
a{color:var(--deep)}
a:hover{color:var(--accent)}

/* 中央寄せの器。長い本文そのものは左寄せのまま（禁じ手5） */
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px}

/* ── ヘッダー ───────────────────────── */
/* ロゴ画像が白地なので、ヘッダーも白。現行HPも白 */
.site-head{border-bottom:1px solid var(--line); background:#fff}
.head-inner{display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-top:16px; padding-bottom:16px; flex-wrap:wrap}
.brand{text-decoration:none; display:flex; flex-direction:column; gap:2px}
.brand-name{font-family:var(--font-head); font-size:19px; font-weight:700;
  color:var(--deep); letter-spacing:.04em; line-height:1.4}
.brand-tag{font-size:11px; color:var(--muted)}
/* ナビは現行HPと同じく「ロゴの行の下に濃茶の帯」。
   .nav が帯（全幅）、.nav-inner が中身（中央寄せ） */
/* 帯の色は現行HPの実測値 rgb(44,24,16) */
.nav{background:#2c1810}
.nav-inner{display:flex; flex-wrap:wrap; justify-content:center;
  gap:4px 30px; padding-top:12px; padding-bottom:12px; font-size:13.5px}
.nav a{text-decoration:none; white-space:nowrap; color:#fff; padding:5px 0}
.nav a:hover{color:#e6c9a8}
.nav-burger{display:none}

/* ── 記事 ──────────────────────────── */
.article{padding:48px 20px 24px}
.article-head{margin-bottom:36px; padding-bottom:22px; border-bottom:1px solid var(--line)}
.date{display:block; margin-bottom:10px; font-size:13px; color:var(--muted); letter-spacing:.08em}
.article-head h1{margin:0; font-family:var(--font-head); font-weight:700;
  font-size:25px; line-height:1.65; color:var(--deep)}

.article-body{text-align:left}          /* 本文は必ず左寄せ */
.article-body h2{margin:52px 0 18px; padding-bottom:10px; border-bottom:1px solid var(--line);
  font-family:var(--font-head); font-size:20px; font-weight:700; color:var(--deep); line-height:1.6}
.article-body h3{margin:36px 0 14px; font-family:var(--font-head);
  font-size:17px; font-weight:500; color:var(--deep)}
.article-body p{margin:0 0 1.6em}
.article-body ul,.article-body ol{margin:0 0 1.6em; padding-left:1.4em}
.article-body li{margin-bottom:.5em}
.article-body blockquote{margin:2em 0; padding:4px 0 4px 20px;
  border-left:2px solid var(--accent); color:var(--muted)}
.article-body table{width:100%; border-collapse:collapse; margin:2em 0; font-size:15px}
.article-body th,.article-body td{border:1px solid var(--line); padding:10px 12px; text-align:left}
.article-body th{background:var(--surface); font-weight:500}
.article-body pre{overflow-x:auto; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px}
.article-body table,.article-body pre{max-width:100%}

/* アイキャッチはPCで70%固定・モバイルは100%（正典 feedback_yagami_wp_centering） */
.article-body img{display:block; margin:2em auto; border-radius:var(--radius)}
.article-body>p:first-child img,.article-body figure:first-child img{width:70%}
.article-body figure{margin:2em 0}
.article-body figcaption{margin-top:8px; text-align:center; font-size:13px; color:var(--muted)}

/* ── カード一覧 ────────────────────── */
.section-title{margin:52px 0 22px; font-family:var(--font-head); font-size:19px;
  font-weight:700; color:var(--deep); text-align:center}
.card-list{list-style:none; margin:0 0 40px; padding:0; display:grid; gap:14px}
.card a{display:block; padding:18px 20px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); text-decoration:none; color:var(--ink)}
.card a:hover{border-color:var(--accent)}
.card-date{display:block; font-size:12px; color:var(--muted); letter-spacing:.08em}
.card-title{display:block; margin:6px 0; font-family:var(--font-head); font-size:16px;
  font-weight:500; color:var(--deep); line-height:1.6}
.card-desc{display:block; font-size:14px; color:var(--muted); line-height:1.8}
.more{text-align:center; margin:0 0 56px}
.more a{font-size:14px}

.pager{display:flex; align-items:center; justify-content:center; gap:22px;
  margin:0 0 56px; font-size:14px}
.pager-now{color:var(--muted)}

/* 関連記事は最大3本（正典 feedback_hp_related_articles_max3） */
.related{padding:8px 20px 24px}
.related h2{margin:44px 0 18px; padding-top:30px; border-top:1px solid var(--line);
  font-family:var(--font-head); font-size:16px; font-weight:500; color:var(--deep)}

/* ── 予約などのボタン ───────────────── */
.btn{display:inline-block; padding:13px 26px; border-radius:var(--radius);
  text-decoration:none; font-size:15px; line-height:1}
.btn-primary{background:var(--accent); color:#FBFAF7}
.btn-primary:hover{background:#96522f; color:#FBFAF7}

/* ── フッター ─────────────────────── */
.site-foot{margin-top:56px; padding:36px 0 44px; border-top:1px solid var(--line);
  background:var(--surface); text-align:center}
.foot-brand{margin:0 0 14px; font-family:var(--font-head); color:var(--deep); font-size:15px}
.foot-nav{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px;
  font-size:13px; margin-bottom:18px}
.foot-nav a{text-decoration:none}
.copy{margin:0; font-size:12px; color:var(--muted)}

/* ── スマホ：ナビはハンバーガー ───────── */
@media(max-width:860px){
  .head-inner{position:relative}
  .nav-burger{display:block; width:28px; height:22px; position:relative; cursor:pointer; flex:0 0 auto}
  .nav-burger span{position:absolute; left:0; width:100%; height:2px; background:var(--deep);
    border-radius:2px; transition:transform .25s, opacity .2s}
  .nav-burger span:nth-child(1){top:0}
  .nav-burger span:nth-child(2){top:10px}
  .nav-burger span:nth-child(3){top:20px}
  .nav-toggle:checked + .head-inner .nav-burger span:nth-child(1){transform:translateY(10px) rotate(45deg)}
  .nav-toggle:checked + .head-inner .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked + .head-inner .nav-burger span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}
  .nav{background:transparent; max-height:0; overflow:hidden;
    transition:max-height .3s ease}
  .nav-inner{flex-direction:column; gap:0; padding-top:0; padding-bottom:0}
  .nav-toggle:checked ~ .nav{max-height:1400px; overflow-y:auto}
  .nav a{display:block; padding:13px 4px; border-bottom:1px solid var(--line);
    font-size:15px; color:var(--deep)}
  .nav a:first-child{border-top:1px solid var(--line); margin-top:12px}

  .article{padding-top:32px}
  .article-head h1{font-size:21px}
  .article-body h2{font-size:18px; margin-top:40px}
  .article-body>p:first-child img,.article-body figure:first-child img{width:100%}
}

/* ── 中央寄せの徹底（社長指示 2026-08-21）─────────────
   トップの本文・動画・情報バーまで、器は必ず中央に置く。
   ただし長い本文の段落だけは左寄せのまま（読みにくくなるため／禁じ手5）。 */
.home-body{max-width:var(--wrap); margin:0 auto; padding:0 20px; text-align:center}
/* トップの段落は左寄せにしない。現行HPはトップ全体が中央寄せで、
   ここで左に戻すとボタンや本文だけ左に落ちる（社長指摘 2026-08-21）。
   記事本文の左寄せは .article-body 側で担保している。 */
.home-body h1,.home-body h2,.home-body h3{text-align:center; font-family:var(--font-head); color:var(--deep)}

/* ── トップページを現行HPの体裁に揃える ──────────────────
   現行はJINテーマが「文字色・行間・段落の余白・見出しの装飾」を決めていた。
   新サイトにはその器が無いため、同じ値をここで与え直す。
   値は現行サイトを 390 / 800 / 1024 / 1440px で実測したもの。
   境界は768px（本文CSSのメディアクエリと同じ）。
   記事ページの見出しは社長確認済みなので触らない（.home-body 限定）。 */
/* 行間は器に一括で乗せない。現行は器が既定値のままで、段落だけが 1.8。
   ボタンは段落の中にあるのでその 1.8 を継承する（＝ボタンの高さもこれで決まる）。
   器に乗せると継承が上書きされ、ボタンや矢印の高さがズレる。 */
.home-body{color:#2c1810; line-height:normal}

/* 段落の間隔は margin ではなく padding-bottom で取る（現行と同じ） */
/* 1.8 ではなく 1.8em。数値だと「比率」が継承されて、中のボタンは
   ボタン自身の小さい字で計算し直されてしまう。em なら段落で確定した
   長さがそのまま継承され、現行と同じボタンの高さになる。 */
.home-body p{margin:0; padding-bottom:32px; line-height:1.8em}

.home-body h2{background:#2c1810; color:#fff; border-radius:2px;
  font-weight:700; padding:13px 13px 12px; margin:22.4px 0 16px;
  line-height:28.8px}
.home-body h3{color:#2c1810; font-weight:700; padding:0 8px 5px;
  margin:22.4px 0 16px; border-bottom:3px solid #2c1810; line-height:27.2px}
@media(min-width:769px){
  /* 現行はPCだけ本文を細字(300)にしている。スマホは400のまま */
  .home-body{font-weight:300}
  .home-body h2{font-weight:400; padding:15px 15px 16px;
    margin:41.6px 0 25.6px; line-height:32px}
  .home-body h3{font-weight:400; font-size:24px; padding:0 8px 4px;
    margin:36.8px 0 25.6px; line-height:32px}
}

/* ヒーローは現行と同じく角丸なし・下の余白なし
   （動画と見出しの間隔は h2 の上余白が作る） */
.home-body .tp-hero{border-radius:0; margin-bottom:0}

/* 地図のiframe。ブラウザ既定の2px枠が出ていた */
.home-body .tp-map{display:block; border:0; line-height:normal}

/* 経歴テーブルの外枠（現行は 1px solid #ccc） */
.home-body .tp-career{border:1px solid #ccc}
.home-body img,.home-body video{display:block; margin-left:auto; margin-right:auto}
.home-body video{width:100%; max-width:var(--wrap); border-radius:var(--radius)}
.nagomi-info-bar{max-width:var(--wrap); margin:0 auto 48px}


/* ── 本文に埋め込まれたCSSの穴埋め（重要）─────────────
   WordPress本文のCSSは body.home / #main-contents / #sidebar など
   **JINテーマの要素があること**を前提に書かれている。新サイトにその器は無いので、
   .tp-hero の高さ指定などが効かず、動画が潰れて見えなくなっていた。
   ここで同じ効果を、テーマに依存しない形で与え直す。 */
.tp-hero{position:relative; width:100%; padding-top:56.25%; margin:0 auto 32px; overflow:hidden;
  border-radius:var(--radius)}
.tp-hero video{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover}
/* トップの本文は横幅いっぱいを使う作りなので、.home-body の760px制限を外す。
   幅と中央寄せは下の「トップの横幅」ブロックで一括して決める。 */
.home-body{max-width:none; padding:0}

/* ── ヘッダーのロゴ ───────────────────── */
.brand{flex-direction:row; align-items:center}
.brand-logo{height:52px; width:auto; display:block}
@media(max-width:860px){ .brand-logo{height:40px} }

/* ── ヘッダーの配置（社長指摘 2026-08-21）─────────────
   ロゴが横幅を取り、ハンバーガーが下の行に折り返していた。
   ロゴは縮められるようにし、ハンバーガーは同じ行の右端に固定する。 */
/* ロゴとハンバーガーを必ず同じ行の両端に置く。
   ナビは別の帯になったので、この行はこの2つだけ。 */
.head-inner{flex-wrap:nowrap}
.brand{flex:0 1 auto; min-width:0}
.nav-burger{flex:0 0 auto; margin-left:auto}

/* 情報バーはスマホ幅のみ表示。現行サイトのプラグインCSSが
   `@media(min-width:769px){ display:none !important }` を持っており、
   現行のPCでも元から出ていない。挙動を合わせてある。 */

/* ── トップページの横幅と中央寄せ（社長指摘 2026-08-21）─────────
   PCでヒーロー動画がヘッダーに重なり、メニューが隠れていた。
   原因は本文CSSの `.tp-hero{margin-top:-40px !important}`。
   WordPressのヘッダー直下へ食い込ませる指定で、スマホ幅だけ 0 に戻して
   あったため「スマホは正しくPCだけ崩れる」状態になっていた。
   相手が !important なので、こちらも同じ強さで打ち消す。

   あわせて、ヒーローと本文の横幅がバラバラで中央が揃っていなかったのを
   同じ幅に統一する（社長指示：中央寄せを徹底）。 */
/* 現行サイトのPC実測が798pxだったので、同じ見え幅に揃える。
   余白は .tp-w の内側に入るので、そのままの値でよい。 */
:root{ --top-wrap:800px; }

.home-body .tp,
.home-body .tp-w,
.home-body .tp-hero{
  max-width:var(--top-wrap) !important;
  margin-left:auto !important; margin-right:auto !important;
}
/* 余白は .tp-w だけに持たせる。.tp にも付けると二重になり、
   現行より20px内側に入ってしまう（ヒーローも端まで届かない）。 */
.home-body .tp{padding:0}
.home-body .tp-w{padding:0 20px}

/* ヒーローの高さ。本文CSSの padding-top:39.375% は「親幅の70%を占める」
   前提で逆算された値なので、幅を固定すると比率が崩れる。
   テーマに依存しない aspect-ratio で 16:9 を直接指定し直す。 */
.home-body .tp-hero{
  margin-top:0 !important; padding-top:0 !important;
  aspect-ratio:16/9; width:100%;
}
.home-body .tp-hero video{
  position:absolute !important; top:0 !important; left:0 !important;
  width:100% !important; height:100% !important; object-fit:cover !important;
}

/* 動画がヘッダーに重なっても、メニューが隠れないようにする */
.site-head{position:relative; z-index:10}


/* 症状カードの箇条書き。現行HPではJINテーマが ::before でオレンジの丸を
   描いており、標準の黒丸は消して字下げを深くしていた。
   新サイトにはその器が無く、素の黒丸のまま詰まって見えていた（社長指摘）。
   値はすべて現行サイトの実測：丸=6px・#e67e22・left10px・top .6em、
   li=display:block・padding-left:25px。
   トップの箇条書きは全29件がこのカード内なので、ここだけで足りる。 */
.home-body .tp-sym-card li{display:block; position:relative;
  padding-left:25px; list-style:none}
.home-body .tp-sym-card li::before{content:""; position:absolute;
  left:10px; top:.6em; width:6px; height:6px; border-radius:100%;
  background:#e67e22}


/* ── 本文に埋め込まれた作り込みブロック（.tp-* / .cf-*）────────────
   これらはWordPress本文の中に直接書かれたHTMLで、JINテーマがあることを
   前提にしたCSSしか持っていない。トップだけでなく他の34ページにも
   入っているので、ブロック単位で同じ手当てをする。
   周りの記事本文（.article-body の体裁）には触らない。

   器（.cf-section など）には手を出さない。ページごとに埋め込みCSSが違い
   （例：料金ページの器は色 #1a1a2e・行間1.7）、一括指定するとそれを潰して
   カード内の行間が詰まる。実際に4ページで悪化したので撤回した。
   触るのは段落だけにする。 */

/* 段落の間隔は margin ではなく padding-bottom（現行と同じ） */
.tp p,.cf p{margin:0; padding-bottom:32px; line-height:1.8em}