/* ===========================================================
S3 パッチ（下層ページ・ブログの見た目）— 2026-09-12
designer 設計 ＋ ディレクターの実測補正。**最後に読ませること。**
読み込み順の実測: common.css → page.css → style.css → テーマオプションの inline
→ common.css に足すと page.css に負ける。
=========================================================== */
/* --- 0. トークンの別建てを潰す（原因B） ------------------- */
/* page.css の :root{--ink:#595959} が固定ページ全部を支配していた（実測） */
:root{--ink:#1C1B19;--brand:#1B3654}
/* 【ディレクター補正6・実測】--act-text / --act はトップ側のスコープにしか無く、
記事・一覧の文脈では未定義だった（リンクと区分ラベルの色が墨に落ちていた）。
9/9 に決めた実値をここで定義する（白地で 4.56〜5.9:1）。 */
:root{--act-text:#A8461F;--act:#C2542F}
body.archive{--ink:#1C1B19;--muted:#5C5A54;--line:#E4E1DA;--card:#fff;--bg:#fff;
--brand:#1B3654;--accent:#C2542F}
/* --- 1. 版面幅を1本にする（パンくずのずれと溢れの原因） ---- */
:root{--pg-w:1120px}
body:has(.svc){--pg-w:928px}
body.single{--pg-w:798px}
body.privacy-policy{--pg-w:828px}
body.archive{--pg-w:1120px}
#breadcrumb{
box-sizing:border-box !important;
width:100% !important;max-width:var(--pg-w) !important;
margin:0 auto !important;padding:20px 24px 0 !important}
ul.breadcrumb{margin:0;padding:0;flex-wrap:wrap}
ul.breadcrumb li{font-size:12.5px}
/* 【ディレクター補正8・2026-09-13】当たり判定を ::before で作ってはいけない。
テーマがホームアイコンを `ul.breadcrumb li:first-child a:before` で出しており、
特異度は向こうが高いので**文字（家のアイコン）はテーマが勝ち、位置はこちらの
position:absolute; top:-11px が当たって**、アイコンだけが11px上へ飛んでいた（実測）。
→ 擬似要素を使わず、余白で広げて負のマージンで戻す。帯の高さは変わらない。 */
/* 同じセレクタ `ul.breadcrumb li a` が common.css・親の style.css にもあり、
読み込み順で親が後ろに来て打ち消される（実測）。ここだけ !important で確定させる。 */
ul.breadcrumb li a{color:var(--hd-faint);text-decoration:none;
position:relative;display:inline-block !important;
padding:11px 0 !important;margin:-11px 0 !important}
ul.breadcrumb li a:hover{text-decoration:underline}
/* 現在地を出して、行き先の無い「›」を消す */
ul.breadcrumb li:last-child{display:list-item}
ul.breadcrumb li:last-child a{color:var(--hd-ink);font-weight:700;pointer-events:none}
ul.breadcrumb li:last-child a::after{content:none}
/* --- 2. ブログ一覧を「表」にする -------------------------- */
/* 【ディレクター補正 2026-09-12・実測】行の直下の子は 1つだけで、
サムネ(.itiran-dt)と本文(.itiran-dd)はその の中にある。
designer 案は .itiran-dl にグリッドを置いていたため空振りし、1fr が 0px に潰れていた。
→ グリッドは に置き、dt/dd の両方を display:contents にする。
さらに **区分(.category_info)はサムネの器 .itiran-dt の中**にあるので、
.itiran-dt ごと消すと区分も消える。消すのはサムネの span.ripple だけ。 */
body.archive #topnews{display:block;border-top:2px solid var(--ink)}
/* 【ディレクター補正2・実測】.itiran-dl は float:left。器が display:grid のあいだは
floatが無視されていたが、器を block にした瞬間に浮いて12行が同じ位置に重なり、
器の高さが2pxに潰れた。float を明示的に解除すること。 */
/* 【ディレクター補正3・実測】テーマが .itiran-dl と a.click-all の両方に
height:300px を直接当てている。カードの絵柄のための固定高で、表にするなら auto に戻す。 */
/* テーマが margin:5px 11.1875px 35px を当てている（カードの隙間用）。
表にするなら 0 に戻す。width は auto にして器いっぱいに（content-box のままだと溢れる）。 */
body.archive #topnews .itiran-dl{
display:block;float:none;width:auto !important;box-sizing:border-box;
height:auto !important;position:relative;margin:0 !important;padding:0;
border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
/* 【ディレクター補正4・実測】a.click-all は position:absolute（inset:0でカード全体を
クリック可能にする仕掛け）。絶対配置のままだと行の高さを作れないので通常配置に戻す。
行そのものがリンクになるので、クリック範囲は狭まらない。 */
body.archive #topnews .itiran-dl > a.click-all{
position:static !important;inset:auto !important;
/* 1fr の最小値は min-content なので、長い題で中央列が伸びて3列目が罫の外へ出る（実測）。
minmax(0,1fr) にして、はみ出しを止める。 */
display:grid;grid-template-columns:104px minmax(0,1fr) 112px;align-items:baseline;
box-sizing:border-box;max-width:100%;
gap:0 20px;height:auto !important;min-height:44px;padding:16px 4px;text-decoration:none}
body.archive #topnews .itiran-dt,
body.archive #topnews .itiran-dd{display:contents}
body.archive #topnews .itiran-dt > span.ripple{display:none} /* サムネだけ外す */
body.archive #topnews .blog_info{display:block;grid-column:1;order:1}
body.archive #topnews .blog_info p{font-family:var(--hd-mono);font-size:12.5px;
color:var(--muted);float:none;width:auto;margin:0}
body.archive #topnews .blog_info p:before{content:none}
body.archive #topnews .itiran-dd h3{grid-column:2;order:2;margin:0;
font-size:16px;font-weight:700;line-height:1.7;color:var(--ink)}
body.archive #topnews .itiran-dd h3 span.ripple{color:var(--ink);font-size:16px}
body.archive #topnews .category_info{display:block;position:static;grid-column:3;order:3;
justify-self:end;top:auto;left:auto}
/* 【ディレクター補正7・実測】.category_info p は position:absolute; top:0; left:0。
列3に置いても中のpが行の左上へ飛び、器の幅が0になっていた。static に戻す。 */
body.archive #topnews .category_info p{position:static !important;top:auto;left:auto;
background:none;color:var(--act-text);
font-size:11.5px;font-weight:400;padding:0;margin:0;white-space:nowrap}
/* 日付の前に出るアイコン（Font Awesome の要素）を外す */
body.archive #topnews .blog_info p i,
body.archive #topnews .blog_info p svg{display:none}
@media (hover:hover){
body.archive #topnews .itiran-dl:hover{transform:none;box-shadow:none;background:var(--hd-l1)}}
@media (max-width:600px){
body.archive #topnews .itiran-dl > a.click-all{grid-template-columns:1fr;gap:4px;padding:14px 4px}
body.archive #topnews .blog_info{order:2}
body.archive #topnews .itiran-dd h3{order:1;grid-column:1}
body.archive #topnews .category_info{display:none}}
/* 【ディレクター補正5・実測】ページャーは .pagination の中で、現在ページが span.current。
designer 案の `.pagination a` だけでは span に当たらない（実測 40×40px）。 */
body.archive .pagination a,body.archive .pagination span,
body.archive .wp-pagenavi a,body.archive .wp-pagenavi span{
min-width:44px;min-height:44px;border-radius:2px;
display:inline-flex;align-items:center;justify-content:center}
body.archive #content:before{content:none}
/* --- 3. 記事ページ --------------------------------------- */
body.single .post h2{background:none !important;color:var(--hd-ink) !important;
border-left:0 !important;border-bottom:2px solid var(--hd-ink);
padding:0 0 11px !important;margin:56px 0 20px !important;
font-size:22px;font-weight:700;line-height:1.6}
body.single .post h3{border-color:var(--hd-hair);border-bottom-width:1px;
color:var(--hd-ink);font-size:18px;padding-bottom:8px;margin:32px 0 12px}
body.single .post h4{color:var(--hd-ink) !important}
body.single .post h4:before{color:var(--hd-act) !important}
body.single #cta-area{background:none !important;border:0 !important;
border-top:2px solid var(--hd-ink);padding:32px 0 0;margin:56px 0 0}
body.single .cta-modern{background:var(--hd-cta) !important;color:var(--hd-cta-ink) !important;
border:0 !important;border-radius:2px !important;
min-height:48px;padding:0 28px;font-size:15px;font-weight:700;
display:inline-flex;align-items:center;box-shadow:none !important}
body.single .cta-modern:hover{background:var(--hd-cta-d) !important;transform:none}
/* --- 4. プライバシーポリシー ------------------------------ */
body.privacy-policy article{max-width:780px;margin:0 auto;padding:0 24px;box-sizing:border-box}
body.privacy-policy #content h2{
font-size:21px !important;font-weight:700;line-height:1.6;
color:var(--hd-ink) !important;background:none !important;
border-left:0 !important;border-bottom:2px solid var(--hd-ink);
padding:0 0 10px !important;margin:48px 0 16px !important}
body.privacy-policy #content h3{font-size:17px;color:var(--hd-ink);
border-bottom:1px solid var(--hd-hair);padding-bottom:7px;margin:28px 0 12px}
body.privacy-policy .entry-title{font-family:'Noto Serif JP',serif;font-weight:600;
font-size:34px;color:var(--hd-ink);line-height:1.5}
body.privacy-policy #content p,body.privacy-policy #content li{
font-size:16px;line-height:1.95;color:var(--hd-ink)}
/* --- 5. フッターのコピーライトの横溢れ -------------------- */
/* 実測: width は 100%(=1280px) だが左右に 500px ずつのパディングがあり、
外形が 2280px・left -500px になっていた。body{overflow-x:hidden} が隠していただけ。 */
#copy{box-sizing:border-box !important;width:100% !important;max-width:100% !important;
padding-left:16px !important;padding-right:16px !important;margin:0 auto !important}
/* --- 6. 記事末尾の共通CTA（2026-09-12） ------------------- */
/* テーマのウィジェットCTA（全記事同じ #contact 行き）は隠し、本文末尾のこちらに寄せる */
body.single #cta-area{display:none !important}
.sx-acta{margin:56px 0 0;padding:28px 0 0;border-top:2px solid var(--hd-ink)}
.sx-acta h2{margin:0 0 14px !important;padding:0 !important;border:0 !important;
background:none !important;font-size:20px !important;font-weight:700;line-height:1.6;
color:var(--hd-ink) !important}
.sx-acta p{margin:0 0 12px;font-size:15.5px;line-height:1.95;color:var(--hd-ink)}
.sx-acta .sx-acta-price{font-weight:700}
.sx-acta .sx-acta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:20px 0 0}
.sx-acta .sx-acta-btn{display:inline-flex;align-items:center;justify-content:center;
min-height:48px;padding:0 26px;border-radius:2px;
background:var(--hd-cta);color:var(--hd-cta-ink);font-weight:700;font-size:15px;
text-decoration:none}
.sx-acta .sx-acta-btn:hover{background:var(--hd-cta-d);color:var(--hd-cta-ink)}
.sx-acta .sx-acta-link{display:inline-flex;align-items:center;min-height:44px;
color:var(--act-text);font-size:15px;text-decoration:none;font-weight:700}
.sx-acta .sx-acta-link:hover{text-decoration:underline}
.sx-acta .sx-acta-tel{font-size:13.5px;color:var(--hd-faint)}
.sx-acta .sx-acta-tel a{color:var(--hd-ink);font-weight:700;text-decoration:none}
@media (max-width:600px){
.sx-acta .sx-acta-row{gap:12px}
.sx-acta .sx-acta-btn{width:100%}
}
/* --- 7. 一覧の見出しと説明（2026-09-12） ------------------ */
/* 追加CSS（投稿424）の `.archive h2{display:none}` はそのままにして、
子テーマ archive.php で h1 に変えた。ここは h1 側の体裁だけ。 */
body.archive h1.archiev{
display:block;margin:0 0 10px;padding:0 0 14px;
font-family:'Noto Serif JP',serif;font-weight:600;
font-size:clamp(26px,3.4vw,34px);line-height:1.45;letter-spacing:.01em;
color:var(--hd-ink);text-align:left;background:none;
border-bottom:2px solid var(--hd-ink)}
body.archive .category-description{
margin:0 0 28px;padding:0;background:none;border:0;border-radius:0;
font-size:15px;line-height:1.95;color:var(--hd-faint);max-width:44em}
body.archive .category-description p{margin:0}
/* 一覧の版面をパンくずと同じレールに乗せる（実測: article が 1160px / パンくずが 1120px で
左右20pxずれていた。h1・説明・行がまとめて揃う） */
body.archive main.archive #container > article{
box-sizing:border-box;width:100%;max-width:var(--pg-w);margin:0 auto;padding:0}
/* --- 8. /contact/ の送信ボタン（2026-09-12） --------------- */
/* 実測: 白地のページに「地=透明・文字=白・枠=白」で描かれており、**ボタンが見えていなかった**。
変更前のスクリーンショットでも同じだったので、今日の変更で壊したものではない（以前からの不具合）。
トップの #contact フォームは朱で正常なので、このページだけを直す。 */
body.page-id-20 .wpcf7-submit{
background:var(--hd-cta) !important;color:var(--hd-cta-ink) !important;
border:0 !important;border-radius:2px !important;
min-height:48px;padding:0 32px;font-size:15px;font-weight:700;
box-shadow:none !important;cursor:pointer}
body.page-id-20 .wpcf7-submit:hover{background:var(--hd-cta-d) !important}
/* --- 9. 記事の時点注記（2026-09-12） ---------------------- */
.sx-asof{margin:40px 0 0;padding:12px 0 0;border-top:1px solid var(--hd-hair);
font-size:13px;line-height:1.85;color:var(--hd-faint)}
.sx-asof + .sx-acta{margin-top:32px}