/* ================================================================
   WordPress / プラグイン固有の補正だけを書く場所
   （デザイントークンの定義・レイアウトは style.css が正本。ここでは新しい値を作らない）

   目的: 静的HTMLには存在しないが WordPress や Contact Form 7 が
   実際に吐き出すマークアップを、phase1のデザインに合わせて着地させる。
   ================================================================ */

/* ---------------- 1. Contact Form 7 ----------------
   CF7のフォーム構造（.flx > ul > li > h3.title + span.wpcf7-form-control-wrap）は
   CF7管理画面側に保存されている＝テーマ差し替えでは変わらない。
   よって「CF7の既存マークアップを .form-field 相当に見せる」方針を取る。
   ※フォーム定義とメール本文は一切触らないので、送信の挙動は現行と同一。
   -------------------------------------------------- */
.form-shell .wpcf7-form .flx,
.form-shell .wpcf7-form .flx > ul{
  display:grid;
  gap:var(--sp-3);
  list-style:none;
}
.form-shell .wpcf7-form .flx > ul > li{
  display:grid;
  gap:.55rem;
}
/* ラベル（CF7側は h3.title・必須バッジは その中の span） */
.form-shell .wpcf7-form h3.title{
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-s); letter-spacing:var(--ls-label); line-height:var(--lh-tight);
  color:var(--ink);
  display:inline-flex; align-items:center; gap:.6em;
  margin:0;
}
.form-shell .wpcf7-form h3.title span{
  flex:none;
  font-family:var(--font-body); font-weight:500;
  font-size:var(--fs-xs); letter-spacing:var(--ls-body); line-height:1;
  padding:.35em .7em; border-radius:2px;
  background:var(--w1); color:#fff;         /* 必須＝注意色（.reqと同じ） */
}
/* 「任意」だけ控えめにする（CF7側で <span class="any">任意</span> と書いた場合に効く） */
.form-shell .wpcf7-form h3.title span.any,
.form-shell .wpcf7-form h3.title span.opt{
  background:var(--hair); color:var(--mute);
}

/* 入力要素（ラジオ・チェックボックスは除外＝丸が伸びるのを防ぐ） */
.form-shell .wpcf7-form-control-wrap{display:block}
.form-shell .wpcf7-form input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.form-shell .wpcf7-form select,
.form-shell .wpcf7-form textarea{
  width:100%;
  border:1px solid var(--hair); border-radius:var(--r-card);
  background:#fff; color:var(--ink);
  font:inherit; line-height:var(--lh-body);
  padding:.9rem 1rem;
}
.form-shell .wpcf7-form textarea{min-height:10rem; resize:vertical}
.form-shell .wpcf7-form input:focus-visible,
.form-shell .wpcf7-form select:focus-visible,
.form-shell .wpcf7-form textarea:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* ラジオ／チェックボックス群 → .choice 相当のカード型 */
.form-shell .wpcf7-form .wpcf7-radio,
.form-shell .wpcf7-form .wpcf7-checkbox{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-2);
}
.form-shell .wpcf7-form .wpcf7-list-item{margin:0}
.form-shell .wpcf7-form .wpcf7-list-item label{
  display:flex; align-items:center; gap:.55rem;
  border:1px solid var(--hair); border-radius:var(--r-card);
  padding:.75rem .9rem; color:var(--ink-2);
  cursor:pointer;
}
.form-shell .wpcf7-form .wpcf7-list-item input{flex:none; margin:0}

/* 同意（acceptance）だけは1列で本文組み */
.form-shell .wpcf7-form .wpcf7-acceptance .wpcf7-list-item label{
  border:0; padding:0;
  align-items:flex-start;
  line-height:var(--lh-body);
}
.form-shell .wpcf7-form .wpcf7-acceptance{display:block}

/* 同意チェックボックス行(.agree)・送信ボタン行(.btn)は .flx の外側にある素のdivで、
   CF7の実フォーム(id=6)がこの構造で保存されているため .flx の gap が効かない。
   2026-08-12 本番実測: テキストエリア→チェックボックス間4.5px・チェックボックス→送信ボタン間0pxで
   詰まって見えていたのを、フォーム内の他の余白と同じ var(--sp-3) に揃える。 */
.form-shell .wpcf7-form .agree,
.form-shell .wpcf7-form .btn{margin-top:var(--sp-3)}
/* .btn は素のdivで中央寄せの指定がなく、送信ボタンが左端に寄っていた（2026-08-12指摘）。
   ボタンを .btn 内で水平中央に置く。 */
.form-shell .wpcf7-form .btn{display:flex; justify-content:center}

/* 送信ボタン → .cv-btn.primary 相当 */
.form-shell .wpcf7-form input[type="submit"]{
  appearance:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  justify-self:start; width:auto;   /* liがgridなので指定しないと横幅いっぱいに伸びる */
  background:var(--ink); color:#fff;
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-s); letter-spacing:var(--ls-label);
  border-radius:999px; padding:1.05em 2.2em;
  transition:opacity .3s var(--ease-1), transform .3s var(--ease-1);
}
.form-shell .wpcf7-form input[type="submit"]:hover{opacity:.85; transform:translateY(-2px)}
.form-shell .wpcf7-form input[type="submit"]:disabled{opacity:.5; cursor:not-allowed; transform:none}

/* バリデーション表示 */
.form-shell .wpcf7-not-valid-tip{
  display:block; margin-top:.4em;
  font-size:var(--fs-s); color:var(--w1);
}
.form-shell .wpcf7-form input.wpcf7-not-valid,
.form-shell .wpcf7-form select.wpcf7-not-valid,
.form-shell .wpcf7-form textarea.wpcf7-not-valid{border-color:var(--w1)}
.form-shell .wpcf7-response-output{
  margin:var(--sp-3) 0 0; padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--hair); border-radius:var(--r-card);
  color:var(--ink-2); line-height:var(--lh-body);
}
.form-shell .wpcf7-form.invalid .wpcf7-response-output,
.form-shell .wpcf7-form.unaccepted .wpcf7-response-output{border-color:var(--w1)}
.form-shell .wpcf7-spinner{margin:0 0 0 .8em}
.form-shell .screen-reader-response{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

@media (max-width:640px){
  .form-shell .wpcf7-form .wpcf7-radio,
  .form-shell .wpcf7-form .wpcf7-checkbox{grid-template-columns:1fr}
}

/* ---------------- 2. the_content() が吐く WordPress 標準クラス ----------------
   コラム119本の本文は既存のエディタ出力（画像の寄せ・キャプション・埋め込み等）を含むので、
   .article-body 配下で崩れないよう最低限を定義する。

   ★2026-07-29に本番のコラム119本を全数調査した結果のメモ。
     下記のうち .alignleft / .alignright / .aligncenter / .alignnone / figcaption /
     .wp-caption / iframe / embed / object / video / .wp-block-embed__wrapper /
     .wp-block-buttons / .wp-block-button__link は、現在の119本には出現数0だった。
     **それでも消さない。** エディタの画像設定・キャプション・YouTube貼り付け・ボタンブロックは
     編集者が明日1クリックで出力しうるもので、定義が無いと横溢れ（body{overflow-x:hidden}で
     切れて到達不能になる）やキャプションの組み崩れが即発生する。
     「使われていないから消す」を繰り返さないため、この理由をここに残す。
   ------------------------------------------------------------------- */
.article-body .alignleft{float:left; margin:.4em var(--sp-3) var(--sp-2) 0}
.article-body .alignright{float:right; margin:.4em 0 var(--sp-2) var(--sp-3)}
.article-body .aligncenter{display:block; margin-inline:auto}
.article-body .alignnone{margin:var(--sp-3) 0}
.article-body::after{content:""; display:block; clear:both}

.article-body figure{margin:var(--sp-3) 0}
.article-body figure img{margin:0}
.article-body figcaption,
.article-body .wp-caption-text{
  margin-top:.6em;
  font-size:var(--fs-s); color:var(--mute); line-height:var(--lh-tight);
  text-align:center;
}
.article-body .wp-caption{max-width:100%; height:auto}
.article-body img{max-width:100%; height:auto}
.article-body iframe,
.article-body embed,
.article-body object,
.article-body video{max-width:100%; margin:var(--sp-3) 0}
.article-body .wp-block-embed__wrapper{position:relative}
.article-body .wp-block-image{margin:var(--sp-3) 0}
.article-body .wp-block-buttons{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-3) 0}
.article-body .wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ink); color:#fff; text-decoration:none;
  font-family:var(--font-mincho); font-weight:600; font-size:var(--fs-s);
  letter-spacing:var(--ls-label);
  border-radius:999px; padding:1.05em 2.2em;
}
/* ---- 横に長い表をスマホで横スクロールさせる ----
   実測: 表を持つ記事61本のうち 3列41本・4列4本＝45本（73.8%）。375px端末では約111px/列。
   以前ここには .table-scroll という自作クラス前提の定義を書いていたが、
   ブロックエディタは <figure class="wp-block-table"><table> しか出力せず
   .table-scroll は119本中0件＝完全な死蔵コードだったので撤去した。
   コアCSSは .wp-block-table に overflow-x:auto を付けるが、テーマの
   .article-body table{width:100%} が表を figure 幅に収めるためオーバーフローが発生せず、
   スクロールバーが出ない。さらに body{overflow-x:hidden} があるので溢れた分は
   切れて到達不能になる。→ figure を自前でスクロールコンテナとして宣言する
   （コアCSSがインライン出力に切り替わっても効くよう自前で持つ）。 */
.article-body figure.wp-block-table{
  overflow-x:auto;
  overscroll-behavior-x:contain; /* 横スクロールがブラウザの「戻る」に化けるのを防ぐ */
}
@media (max-width:640px){
  /* 3列以上の表だけに最小幅を与える（2列表に不要な横スクロールを出さないため）。
     34rem は撤去した .table-scroll table で使っていた既存値をそのまま流用＝新値ではない。
     .article-body table{width:100%} とは競合しない（使用幅は max(100%, 34rem) になる）。
     :has() 未対応環境では min-width が効かず現状維持＝デグレしない。 */
  .article-body figure.wp-block-table > table:has(tr > :nth-child(3)){min-width:34rem}
}

/* ---------------- 2-B. ブロックエディタ由来のマークアップ形状の補正 ----------------
   独自クラスではなく「エディタがそういう形のHTMLを吐く」ことに起因する崩れを直す場所。
   phase1の静的HTMLには存在しない形なので、デザイン正本ではなくここで面倒を見る。
   ------------------------------------------------------------------- */

/* 見出しの中の <strong> でウェイトが設計値から跳ねるのを打ち消す。
   実測: 見出しはほぼ全数が <h2><strong>…</strong></h2> の形（h2内1,007個・h3内1,885個・119/119本）。
   UA既定 strong{font-weight:bolder} は「親の算出値からの相対値」なので、
   h2/h3 に font-weight:600 を指定しても中の strong は 900 に跳ね上がり、
   Zen Old Mincho に900のフェイスが無いためフォントマッチングで700へ落ちる
   ＝全記事の全見出しが設計値600より1段太い明朝で描かれていた。
   旧テーマは reset の *{font-weight:inherit} で吸収していたが、新テーマの reset は
   margin/padding/box-sizing だけなので効かない。
   reset 全体に戻すと .cs-prose（コンサル12名のACF本文）や表セル内の <strong> まで
   太字を失うため、「見出しの中だけ」に限定して打ち消す。
   h1/h5/h6 と <b> は現状0件だが、含めても副作用がなく将来のエディタ出力を先に潰せる。 */
.article-body :is(h1,h2,h3,h4,h5,h6) :is(strong,b){font-weight:inherit}

/* 表セルのブロック寄せ指定が効かないのを直す。
   コアの .has-text-align-center は詳細度 0,1,0 で、テーマの
   .article-body th,td（0,1,1）に必ず負けるため中央寄せが無視されていた（実測6個/1本）。
   コアCSSがインライン出力（should_load_separate_core_block_assets）に切り替わって
   読み込み順が逆転しても結論が変わらないよう、順序ではなく詳細度（0,2,1）で勝たせる。 */
.article-body th.has-text-align-center,
.article-body td.has-text-align-center{text-align:center}
.article-body th.has-text-align-left,
.article-body td.has-text-align-left{text-align:left}
.article-body th.has-text-align-right,
.article-body td.has-text-align-right{text-align:right}

/* 中身の無い <thead> を出さない。
   実測: 完全に空の <th></th> が317個/44本＝全th 320個の99.1%。
   テーマの th{background:var(--paper-2)} とコアの
   .wp-block-table thead{border-bottom:3px solid currentColor} が重なって、
   中身のない薄い帯＋太い罫線が表の上に出ていた。
   支援技術から見てもアクセシブルな名前を持たない見出し行なので失うものが無い＝行ごと落とす。
   副次効果: table-layout:fixed の列幅は「最初にレンダリングされる行」で決まるため、
   中身の無い行で列幅が決まっていた事故も同時に直る。
   条件は「th を持つ」かつ「空でない th を1つも持たない」。中身入りth（3個）は無傷。
   :has() 未対応環境では従来どおり帯が出る＝現状維持でデグレしない。 */
.article-body thead:has(th):not(:has(th:not(:empty))){display:none}

/* 表セルの中だけ overflow-wrap を anywhere にする。
   reset の break-word は「min-content 幅を変えない」ので、table-layout:auto の表では
   列幅が最長の分割不能語まで広がってから折り返す＝表自体の溢れは止まらない。
   実測で has-fixed-layout の無い表が16記事分あり、これに該当する。
   anywhere は min-content 幅を縮めるので列が縮む。
   .client-list li（style.css）で既に使っている値＝新値ではない。 */
.article-body :is(th,td){overflow-wrap:anywhere}

/* WYSIWYG（ACF）の中身は .cs-prose の組みに従わせる */
.cs-prose ul,.cs-prose ol{margin:var(--sp-2) 0; padding-left:1.4em}
.cs-prose li + li{margin-top:.4em}
.cs-prose a{text-decoration:underline; text-underline-offset:.2em}
.cs-prose img{max-width:100%; height:auto}
.cs-prose br + br{display:none} /* エディタ由来の空行連打を1つに抑える */

/* ---------------- 3. the_posts_pagination() → .pager ----------------
   functions.php で type=list 出力にしているため ul.page-numbers が出る。
   静的HTMLの .pager と同じ見た目に寄せる。
   ------------------------------------------------------------------ */
.pager .nav-links > ul,
.pager ul.page-numbers{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  list-style:none; margin:0; padding:0;
}
.pager .page-numbers{
  min-width:2.4rem; min-height:2.4rem;
  display:grid; place-items:center;
  border:1px solid var(--hair); border-radius:999px;
  text-decoration:none; color:var(--ink-2);
  font-family:var(--font-en); line-height:var(--lh-1);
  padding-inline:.6em;
}
.pager .page-numbers.current{background:var(--ink); color:#fff; border-color:var(--ink)}
.pager .page-numbers.dots{border-color:transparent}
.pager a.page-numbers:hover{border-color:var(--ink); color:var(--ink)}

/* ---------------- 4. カテゴリ絞り込み（コラム/お知らせ） ----------------
   静的HTMLには無いが現行サイトに存在する機能なので、既存の.pager語彙で最小実装する。
   ------------------------------------------------------------------ */
.cate-filter{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  list-style:none; margin-bottom:var(--sp-4);
}
.cate-filter a{
  display:inline-grid; place-items:center;
  border:1px solid var(--hair); border-radius:999px;
  padding:.55em 1.2em;
  text-decoration:none; color:var(--ink-2);
  font-size:var(--fs-s); letter-spacing:var(--ls-label); line-height:var(--lh-1);
}
.cate-filter a:hover{border-color:var(--ink); color:var(--ink)}
.cate-filter a.is-current{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ---------------- 5. 記事間ナビ（前後の記事） ---------------- */
.post-nav{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
  max-width:var(--w-narrow); margin:var(--sp-5) auto 0;
}
.post-nav .text-link-btn{margin:0}

/* ---------------- 6. 管理バー表示時にヘッダーが隠れないようにする ---------------- */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .site-header{top:46px}
}

/* ---------------- 7. 検索結果・空状態 ---------------- */
.empty-state{
  max-width:var(--w-narrow); margin-inline:auto;
  color:var(--mute); line-height:var(--lh-body);
}