/* ============================================================================
 * お知らせ（/ai/news/）を新しいデザインにそろえる CSS（2026-09-22 反映・MK）
 *   戻し方: wp-content/mu-plugins/splight-ai-news-newlook.php を消すと、このCSSは読まれなくなる
 *   正本: _review_ds/260918_下層ページ_そろえ方の指針.md（2章が決まり）
 *   実装の見本: /ai/assets/css/sub.css（静的9ページで使った実物）
 *   読み込み: brand.css の「後」に読み込む（mu-plugin で enqueue・依存=splight-ai-brand）
 *   方針: brand.css は1行も書き換えない。このファイルを後ろに足すだけ
 *   決まり: 明るい色の上に白文字を置かない／12px 未満なし／押せる場所 44px 以上／
 *           文字と背景の明暗の差 4.5:1 以上／動きを減らす設定に対応
 * ========================================================================== */

/* ------------------------------------------------ 1. 色と大きさ（sub.css と同じ値） */
:root {
  --sai-ink: #1f2321;
  --sai-ink-soft: #565b58;
  --sai-ink-faint: #565b58;      /* 旧 #7d827e は白地で 3.91:1（基準の 4.5:1 未満）→ 6.92:1 へ */
  --sai-paper: #ffffff;
  --sai-paper-warm: #fbf8f1;     /* 旧 #fdfaf3 → 指針の値へ */
  --sai-line: #e7e5e0;
  --sai-denim: #c74309;
  --sai-mikan: #ff8f3f;
  --sai-fs-small: 13px;          /* 12px 未満を作らない */
  --sai-fs-body: 16px;
  --sai-hdr-h: 72px;
  --sai-pad-x: clamp(20px, 5.6vw, 88px);
}
@media (max-width: 699px) { :root { --sai-hdr-h: 60px; } }

body { font-size: var(--sai-fs-body); line-height: 1.85; }

/* 見出しの色。子テーマ theme.json が旧ブランドの紺 #0B2341 のまま残っていて、
   brand.css（8/29の全面改訂）では色を指定していなかったため、見出しだけ旧ブランド色で出ている。
   theme.json 側は `:root :where(h1,…)` ＝ 強さ0 なので、ここで素の h1 を書けば勝つ */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.sai-card__title a, .sai-card h2 a, .sai-card h3 a { color: var(--sai-ink); }
.sai-card__title a:hover { color: var(--sai-denim); }

/* ------------------------------------------------ 2. ヘッダー（白い平らな帯＋下に細い線） */
.sai-header {
  background: #fff;
  backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid var(--sai-line);
}
.sai-header__inner {
  max-width: none;
  height: var(--sai-hdr-h);
  padding: 0 var(--sai-pad-x);
  gap: 28px;
}
.sai-header__logo { min-height: 44px; }
.sai-logo-dot { display: none; }                 /* ●は使わない（トップの決定と同じ） */
.sai-logo-text { font-size: 20px; }

.sai-nav a:not(.sai-cta) { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--sai-fs-body); }
.sai-nav a::after { display: none; }             /* 流れる下線の飾りはやめる */
.sai-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
/* ※ `:not(.sai-cta)` は必須。`.sai-nav a`（0,1,1）は brand.css の `.sai-cta--nav{display:none}`（0,1,0）より強く、
     これを付けないと PC で「無料相談」が2つ並ぶ（下書き1回目で実際に発生し、実測で発見した） */

/* 「無料相談」はボタンをやめて太字＋下線。brand.css の color:#fff !important に勝つため !important
   ※ display は書かない。brand.css の「PCは --pc だけ／900px以下は --nav だけ」を壊さないため
     （下書き1回目でここに display:inline-flex を書いてしまい、PC で2つ並んだ） */
.sai-nav a.sai-cta, .sai-cta {
  min-height: 44px; align-items: center;
  background: none !important; color: var(--sai-ink) !important;
  padding: 0 !important; border-radius: 0;
  font-weight: 700; font-size: var(--sai-fs-body); letter-spacing: 0.04em; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px;
}
.sai-cta--pc { display: inline-flex; }
@media (max-width: 900px) {
  .sai-cta--pc { display: none; }
  .sai-cta--nav { display: inline-flex; }
  .sai-hamburger { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .sai-nav { top: var(--sai-hdr-h); }
}

/* ------------------------------------------------ 3. ページ見出し（日本語＋みかん色の下線） */
.sai-blog-heading__en { display: none; }         /* 英語の飾りは画面に出さない（白地で 1.61〜3.07:1） */
.sai-blog-heading__title, .sai-archive-heading__title {
  position: relative; padding-bottom: 16px;
}
.sai-blog-heading__title::after, .sai-archive-heading__title::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 48px; height: 4px; border-radius: 2px; background: var(--sai-mikan);
}
.sai-blog-heading__sub, .sai-archive-heading__desc {
  max-width: 34em;
  /* WordPress の constrained レイアウトが `margin-left:auto !important` を当てるので !important で左寄せに戻す */
  margin-left: 0 !important; margin-right: auto !important;
  font-size: 14px; line-height: 1.85; color: var(--sai-ink-soft);
}

/* ------------------------------------------------ 4. カテゴリのチップ（13px・押せる高さ44px） */
.sai-cat-list { gap: 8px 10px; }
.sai-cat-list li a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--sai-fs-small); padding: 0 18px; font-weight: 700;
}

/* ------------------------------------------------ 5. カード（白地・細い枠・角丸18px・影なし） */
.sai-card { border-radius: 18px; box-shadow: none; transition: border-color 0.2s ease; }
.sai-card:hover { transform: none; box-shadow: none; border-color: var(--sai-ink-soft); }
.sai-card__cats a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--sai-fs-small); padding: 0 14px;
}
.sai-card__date { font-size: var(--sai-fs-small); color: var(--sai-ink-soft); }
.sai-card__excerpt, .sai-card__body p { font-size: 14px; line-height: 1.85; max-width: 34em; color: var(--sai-ink-soft); }
.sai-card__readmore, .sai-card__readmore a {
  font-size: var(--sai-fs-small);
  display: inline-flex; align-items: center; min-height: 44px;
}

/* ------------------------------------------------ 6. ページ送り（押せる高さ44px） */
.wp-block-query-pagination a,
.wp-block-query-pagination-numbers .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; font-size: var(--sai-fs-small);
}

/* ------------------------------------------------ 7. 記事ページ */
/* 日付が白地に #F6F5F2 で出ていて読めない（1.09:1）。
   原因は親テーマ TT5 の core/post-date が accent-4 を指しているのに、
   子テーマ theme.json が accent-4 を #F6F5F2（ほぼ白）に置き換えているため */
.sai-single-date, .sai-single-date time, .wp-block-post-date, .wp-block-post-date a {
  color: var(--sai-ink-soft) !important;
  font-size: var(--sai-fs-small);
}
.sai-breadcrumb p, .sai-breadcrumb .wp-block-query-title { color: var(--sai-ink-soft) !important; }
.sai-breadcrumb a, .sai-breadcrumb__cat a { display: inline-flex; align-items: center; min-height: 44px; }

/* 見出しの下線を「みかん色・幅48px」に */
.wp-block-post-content h2 {
  border-bottom: none; position: relative; padding-bottom: 14px;
}
.wp-block-post-content h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 48px; height: 4px; border-radius: 2px; background: var(--sai-mikan);
}

/* 1行の長さ34文字（写真・表・囲みは本文幅のまま） */
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol {
  max-width: 34em;
  margin-left: 0 !important; margin-right: auto !important;   /* constrained の中央寄せを打ち消す */
}
.wp-block-post-content { line-height: 1.95; }

/* 記事のカテゴリ・タグ */
.sai-single-cats a, .sai-single-tags a, .sai-single-cats-link a {
  display: inline-flex; align-items: center; min-height: 44px; font-size: var(--sai-fs-small);
}
.sai-post-nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* 「コピーして使う」の札（brand.css 253行で 11px）。記事46・51・55で表示される。12px 未満を作らない（2026-09-22 追加） */
.sai-copy::before { font-size: var(--sai-fs-small); top: -12px; }

/* ------------------------------------------------ 8. フッター（明るい下地＋濃い文字・sub.css と同じ） */
.sai-footer {
  background: #fff; color: var(--sai-ink);
  border-top: 1px solid var(--sai-line); margin-top: 80px;
}
.sai-footer * { color: inherit; }
.sai-footer a { color: var(--sai-ink); text-decoration: none; }
.sai-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sai-footer a {              /* sub.css と同じ: フッターのリンクは全部 44px（住所の中のメールも含む） */
  display: inline-flex; align-items: center; min-height: 44px;
}
.sai-footer__col li { font-size: 14px; margin-bottom: 0; }
.sai-footer__h { font-size: var(--sai-fs-small); color: var(--sai-ink-soft); }
.sai-footer__brand address { font-size: var(--sai-fs-small); color: var(--sai-ink-soft); }
.sai-footer__brand .sai-logo-text { color: var(--sai-ink); }
.sai-footer__brand .sai-logo-text em { color: var(--sai-denim); }
.sai-footer__copy { font-size: var(--sai-fs-small); color: var(--sai-ink-soft); letter-spacing: 0.08em; }

/* 8-2. フッターの並びを静的ページとそろえる（parts/footer.html を差し替えたときに効く）
   静的側 style.css の .site-footer-inner（左=会社情報／右=リンク2列）と同じ組み方 */
.sai-footer__grid:has(.sai-footer__nav) {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 36px 48px;
}
.sai-footer__nav {
  display: grid; grid-template-columns: repeat(2, auto); gap: 4px 40px; font-size: var(--sai-fs-small);
}
.sai-footer__nav a { color: var(--sai-ink-soft); }
.sai-footer__nav a:hover { color: var(--sai-ink); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) {
  .sai-footer__nav { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ 9. 目次プラグイン（Easy Table of Contents） */
/* 静的ページには目次が無いので見本が無い。決まり（押せる場所44px）に合わせる */
.ez-toc-list a.ez-toc-link { display: inline-flex; align-items: center; min-height: 44px; }
.ez-toc-title { font-family: var(--sai-font-disp, inherit); font-size: var(--sai-fs-body); }
.ez-toc-btn, .ez-toc-pull-right.ez-toc-btn { min-height: 44px; }

/* ------------------------------------------------ 11. ボタン（導入事例ページの呼びかけ・2026-09-22 追加）
   theme.json が旧ブランドの緑 #17B890 に白文字（2.53:1）を当てていた。静的ページの .btn と同じ濃い墨色にそろえる。
   WordPress 側の指定は `:root :where(.wp-block-button__link)`（強さ 0,1,0）なので、2段の書き方（0,2,0）で上書きする */
.wp-block-button .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px;
  border-radius: 999px; background-color: var(--sai-ink); color: #fff; border: 0;
  font-weight: 700; letter-spacing: 0.04em; text-decoration: none;
}
.wp-block-button .wp-block-button__link:hover { background-color: #2f2418; color: #fff; }
.wp-block-button .wp-block-button__link:focus-visible { outline: 2px solid var(--sai-denim); outline-offset: 2px; }
.wp-block-button.sai-single-cta__btn--sub .wp-block-button__link {
  background-color: transparent; color: var(--sai-ink); border: 1px solid var(--sai-line);
}
.wp-block-button.sai-single-cta__btn--sub .wp-block-button__link:hover { background-color: var(--sai-paper-warm); color: var(--sai-ink); border-color: var(--sai-ink-soft); }

/* ------------------------------------------------ 10. 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  .sai-card, .sai-cta, .sai-nav a { transition: none !important; animation: none !important; transform: none !important; }
}