/* =====================================================================
   news.css — お知らせ（NEWS）
   ※ 一覧(news-archive)担当：このファイルには .news-archive* 接頭辞の規則のみ追記。
     詳細(news-detail)担当が別セクションを同ファイルに追記する想定。
     共通化済みクラス(.section/.container/.subfv/.site-bg 等)は common.css をそのまま利用し
     ここでは再定義しない。
   レイアウト方針：一覧は固定青背景(透過)の上に載るため白文字。カンプ(13-news-archive)準拠で
     「タイトル(上)＋日付・カテゴリ(下)＋右に矢印ボタン」、項目間は薄い白線で区切る。
   ===================================================================== */

/* ---- コンパクトFV（Figma 2484:6653: hero総高237・Hero Text pt104・パンくず無し。
   common既定 .subfv(pt121/pb72/min-h420) と乖離するためページスコープで寸法のみ上書き。
   privacy/contact の .subfv--solid 同型（透過版）。2026-07-08 parity突合 ---- */
body[data-page="news-archive"] .subfv{ padding-top:104px; padding-bottom:19px; min-height:0 }
@media (max-width:1023px){
  body[data-page="news-archive"] .subfv{ padding-top:72px; padding-bottom:24px; min-height:0 } }
@media (max-width:767px){
  body[data-page="news-archive"] .subfv{ padding-top:56px; padding-bottom:24px; min-height:0 } }

/* ---- セクション全体（透過：固定青背景を見せる。要件5） ---- */
.news-archive{ position:relative }
.news-archive .container{ max-width:calc(1022px + var(--pad-x)*2) }  /* Figma news_list 幅1022(x209..1231) */

/* ---- 記事一覧（Figma 2484:6775: 破線区切り・行=線+pt20+内容43+pb20（stride83）・
   タイトル Zen Kaku Gothic New Bold 18 / 日付 Manrope 12 #f2f2f2（Manrope未読込→--ff-en 代替）・
   タイトル↔日付 gap20・右端に24×24枠線矢印。カテゴリ無し） ---- */
.news-archive__list{ display:flex; flex-direction:column;
  border-top:1px dashed var(--c-line) }
.news-archive__item{ border-bottom:1px dashed var(--c-line) }
.news-archive__link{ display:flex; align-items:center; gap:36px; padding:20px 0; color:#fff }
.news-archive__body{ display:flex; flex-direction:column; gap:20px; flex:1 1 auto; min-width:0 }
.news-archive__title{ font-family:var(--ff-display); font-size:var(--fz-lead); line-height:1.8; font-weight:700;
  letter-spacing:normal; color:#fff; transition:color .2s ease;
  text-box-trim:trim-both; text-box-edge:cap alphabetic }
.news-archive__date{ font-family:var(--ff-en); font-size:var(--fz-caption); line-height:1.8; letter-spacing:normal;
  color:#f2f2f2; text-box-trim:trim-both; text-box-edge:cap alphabetic }

/* 右端の矢印ボタン（カンプ：枠線つき小ボタン 24×24＝p6+icon12） */
.news-archive__arrow{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border:1px solid var(--c-line); color:#fff; transition:background .2s ease, border-color .2s ease }
.news-archive__arrow svg{ width:12px; height:12px; display:block }

/* hover：タイトル強調＋矢印反転 */
.news-archive__link:hover .news-archive__title{ color:#cdd9f4 }
.news-archive__link:hover .news-archive__arrow{ background:var(--c-accent); border-color:var(--c-accent) }

/* ---- ページネーション（カンプ指示「ページナビを入れてください」対応） ---- */
.news-archive__pager{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:56px }
.news-archive__page,
.news-archive__page-arrow{ display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid rgba(255,255,255,.45); color:#fff;
  font-family:var(--ff-en); font-size:var(--fz-meta); letter-spacing:.5px; line-height:1;
  transition:background .2s ease, border-color .2s ease, color .2s ease }
.news-archive__page:hover,
.news-archive__page-arrow:not(.is-disabled):hover{ background:rgba(255,255,255,.12) }
.news-archive__page.is-current{ background:var(--c-white); border-color:var(--c-white); color:var(--c-main); font-weight:700 }
.news-archive__page-arrow svg{ width:12px; height:12px; display:block }
.news-archive__page-arrow.is-disabled{ opacity:.35; pointer-events:none }

/* =====================================================================
   レスポンシブ
   ===================================================================== */
@media (max-width:1023px){
  .news-archive__link{ gap:24px }
}
@media (max-width:767px){
  .news-archive__link{ gap:14px; padding:16px 0 }
  .news-archive__body{ gap:12px }
  .news-archive__title{ font-size:var(--fz-body) }
  .news-archive__pager{ gap:8px; margin-top:40px }
  .news-archive__page,
  .news-archive__page-arrow{ width:40px; height:40px }
}

/* reduced-motion はトランジションを抑制（共通の reveal は common.css 側で対応済） */
@media (prefers-reduced-motion:reduce){
  .news-archive__title,.news-archive__arrow,
  .news-archive__page,.news-archive__page-arrow{ transition:none }
}


/* ============================================================
   ▼▼▼ news-detail（記事 / CMS本文パーツ）— 接頭辞 .article* ▼▼▼
   このファイルは一覧(news-archive)と詳細(news-detail)で共用。
   ここから下は詳細(記事)担当。上の .news-archive* は触らない。
   data-page="news-detail"。固定青背景(.site-bg)の対象ページ。
   Figma正カンプ 2482:1557 は指示テキストのみ（news-datail-sample 2484:6323 /
   body-parts-list 2484:5928 / heading-patterns 2484:6149 / bottom-parts-list 2484:6191
   を反映・色/フォントは他ページ参考・パンくずは下層デザイン・カテゴリ無し・最終WordPress化）。
   → 2026-07-08 parity突合で全CMSパーツ（メタ行/H2/H3×2型/UL/OL/ノート/注意/引用/図版/表/
     前後ナビ/一覧へ戻る）を実装。記事本体は白の記事コンテナに載せ、外周の青背景を透けさせる。
   サンプルの本文 #4a5568 / 見出し #1a2b4a / accent #3b62f0 は指示に従い
   サイト統一トークンへ置換（見出し=--c-main・accent=--c-accent・本文はやや淡い墨）。
   ============================================================ */

/* 記事本文用ローカル変数（このファイル内の .article* のみで使用） */
.article{
  --article-ink:#3a455c;        /* 本文グレー（カンプ #4a5568 をサイト調に） */
  --article-soft:#f7f9fc;       /* 薄背景帯（H2 PatternC / 引用） */
  --article-note-bg:#eef2fc;    /* ノートボックス背景 */
  --article-warn-bg:#fffbeb;    /* 注意ボックス背景 */
  --article-warn-line:#f3d27a;  /* 注意ボックス左罫 */
  --article-warn-ink:#92621a;   /* 注意見出し文字 */
  --article-rule:#e2e8f0;       /* 罫線 */
}

/* ---- 記事セクション全体（透過：固定青背景を透かす）
   Figma 2482:1557: ヒーロー無し・本文枠はヘッダー下端+88px（abs148）開始。
   ヘッダーはオーバーレイ（本文はy0起点）のため padding-top = header-h + 88 ---- */
.article-section{ padding:calc(var(--header-h) + 0px) 0 120px; position:relative }
@media (max-width:1023px){ .article-section{ padding:calc(var(--header-h) + 0px) 0 96px } }
@media (max-width:767px){ .article-section{ padding:calc(var(--header-h) + 0px) 0 72px } }

/* ---- パンくず（下層共通 .subnav__crumb チップを流用。sample: crumb→本文 gap40） ---- */
.article-crumb{ margin-bottom:40px }
.article-crumb .subnav__crumb{ min-width:0; overflow:hidden }
.article-crumb__current{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
@media (max-width:767px){ .article-crumb{ margin-bottom:24px } }

/* ---- 記事コンテナ（青背景の上に載る白い読み面）
   WF(18:2735)は平板。読みやすさのため白面は残すが、影/角丸は最小限に。 ---- */
.article{
  max-width:880px; margin-inline:auto;
  background:var(--c-white); border-radius:8px;
  padding:64px 56px; color:var(--article-ink);
  font-size:var(--fz-body); line-height:var(--lh-body);
}
@media (max-width:1023px){ .article{ padding:48px 40px } }
@media (max-width:767px){ .article{ padding:32px 20px } }

/* 記事内ブロックの縦リズム（直接の子要素間。sample: 段落間24 / H2前48 / H3前32） */
.article > * + *{ margin-top:24px }
.article > .article-h2{ margin-top:48px }
.article > .article-h3{ margin-top:32px }
.article > .article-h2:first-child{ margin-top:0 }
@media (max-width:767px){
  .article > * + *{ margin-top:20px }
  .article > .article-h2{ margin-top:36px }
  .article > .article-h3{ margin-top:28px }
}

/* ---- 記事ヘッダ（sample準拠：メタ行（公開日/更新日）→ H1。gap24） ---- */
.article-head{ display:flex; flex-direction:column; gap:16px }
.article-meta{ font-size:var(--fz-meta); letter-spacing:.5px; color:var(--c-ink-60) }
.article-title{ font-size:32px; line-height:1.5; font-weight:800; letter-spacing:1px; color:var(--c-main) }
@media (max-width:767px){ .article-title{ font-size:25px } }

/* ---- 段落 ---- */
.article-p{ font-size:var(--fz-body); line-height:1.9; color:var(--article-ink) }

/* ---- 太字 ---- */
.article strong, .article b{ font-weight:700; color:var(--c-main) }

/* ---- テキストリンク（body-parts-list: TEXT LINK） ---- */
.article-link{ color:var(--c-accent); text-decoration:underline; text-underline-offset:3px }
.article-link:hover{ opacity:.8 }

/* ---- 箇条書き / 番号リスト（body-parts-list: BULLET/NUMBERED LIST。行間=行20+gap12） ---- */
.article-ul{ list-style:none; padding-left:8px; display:flex; flex-direction:column; gap:12px }
.article-ul > li{ position:relative; padding-left:18px; line-height:1.6 }
.article-ul > li::before{ content:""; position:absolute; left:0; top:.65em; width:4px; height:4px;
  border-radius:50%; background:var(--c-accent) }
.article-ol{ list-style:decimal; padding-left:calc(8px + 1.4em); display:flex; flex-direction:column; gap:12px }
.article-ol > li{ line-height:1.6; padding-left:4px }
.article-ol > li::marker{ color:var(--c-accent); font-weight:700 }

/* ---- ノート/注意ボックス（body-parts-list: NOTE/WARNING BOX） ---- */
.article-note{ background:var(--article-note-bg); border-radius:8px; padding:24px }
.article-note__title{ font-weight:700; color:var(--c-accent) }
.article-note > p + p{ margin-top:12px }
.article-warn{ background:var(--article-warn-bg); border-left:4px solid var(--article-warn-line);
  border-radius:8px; padding:24px }
.article-warn__title{ font-weight:700; color:var(--article-warn-ink) }
.article-warn > p + p{ margin-top:12px }

/* ---- 引用（body-parts-list: QUOTE。薄背景帯＋左アクセント罫） ---- */
.article-quote{ margin:24px 0 0; background:var(--article-soft); border-left:4px solid var(--c-accent);
  border-radius:0 8px 8px 0; padding:24px; color:var(--article-ink) }

/* ---- 画像＋キャプション（body-parts-list: IMAGE） ---- */
.article-figure{ margin:0 }
.article-figure img{ width:100%; height:auto; display:block }
.article-figure figcaption{ margin-top:8px; font-size:var(--fz-caption); line-height:1.6;
  text-align:center; color:var(--c-ink-60) }

/* ---- 小見出し（H2: heading-patterns PatternA＝左アクセントバー） ---- */
.article-h2{ font-size:28px; line-height:1.4; font-weight:700; letter-spacing:1px; color:var(--c-main);
  border-left:4px solid var(--c-accent); padding-left:16px }
@media (max-width:767px){ .article-h2{ font-size:22px } }

/* ---- 小々見出し（H3: プレーン型 / --marker=角マーカー型。heading-patterns準拠） ---- */
.article-h3{ font-size:20px; line-height:1.4; font-weight:700; letter-spacing:.5px; color:var(--c-main) }
.article-h3--marker{ display:flex; align-items:center; gap:8px }
.article-h3--marker::before{ content:""; flex:0 0 auto; width:12px; height:12px; border-radius:3px;
  background:var(--c-accent) }
@media (max-width:767px){ .article-h3{ font-size:18px } }

/* ---- 表（body-parts-list: TABLE。HTML+CSS再現・SPは .table-scroll(common) で横スクロール） ---- */
.article-table{ width:100%; min-width:560px; border-collapse:collapse; font-size:var(--fz-meta);
  color:var(--article-ink) }
.article-table th,
.article-table td{ text-align:left; padding:16px; border-bottom:1px solid var(--article-rule); line-height:1.5 }
.article-table thead th{ background:var(--article-soft); font-weight:700; color:var(--c-main);
  border-bottom:1px solid var(--article-rule) }

/* ---- 前後記事ナビ（bottom-parts-list: PREV/NEXT。上罫＋左右振り分け） ---- */
.article-pnnav{ margin-top:48px; padding-top:40px; border-top:1px solid var(--article-rule);
  display:flex; align-items:center; justify-content:space-between; gap:16px }
.article-pnnav a{ display:inline-flex; align-items:center; gap:12px; font-size:var(--fz-meta);
  color:var(--article-ink); transition:color .2s ease }
.article-pnnav a:hover{ color:var(--c-accent) }
.article-pnnav svg{ width:16px; height:16px; display:block }

/* ---- 一覧へ戻るボタン（bottom-parts-list: BACK TO LIST。中央・濃紺ソリッド＝サイトCTA調） ---- */
.article-backrow{ display:flex; justify-content:center; margin-top:48px }
@media (max-width:767px){ .article-backrow{ margin-top:40px } }
.article-back{ display:inline-flex; align-items:center; justify-content:center; padding:16px 56px;
  background:var(--c-main); color:var(--c-white); font-weight:600; font-size:15px; letter-spacing:1px;
  border-radius:8px; transition:opacity .2s ease }
.article-back:hover{ opacity:.88 }
@media (max-width:767px){ .article-back{ width:100%; padding:16px 24px } }

@media (prefers-reduced-motion:reduce){
  .article-back,.article-pnnav a,.article-link{ transition:none }
}

/* =====================================================================
   Gutenberg本文マッピング（single.php の the_content を .article-* 意匠へ）
   ＝管理画面で通常のブロック（見出し/段落/リスト/引用/画像/表）を書けば意匠が乗る。
   note/warn は core/group のブロックスタイル is-style-note / is-style-warn（functions.phpで登録）。
   ===================================================================== */
.article > h2{ margin-top:48px }
.article > h2:first-child{ margin-top:0 }
.article > h3{ margin-top:32px }
.article h2{ font-size:28px; line-height:1.4; font-weight:700; letter-spacing:1px; color:var(--c-main);
  border-left:4px solid var(--c-accent); padding-left:16px }
@media (max-width:767px){ .article h2{ font-size:22px } }
.article h3{ font-size:20px; line-height:1.4; font-weight:700; letter-spacing:.5px; color:var(--c-main) }
@media (max-width:767px){ .article h3{ font-size:18px } }
.article h3.is-style-marker{ display:flex; align-items:center; gap:8px }
.article h3.is-style-marker::before{ content:""; flex:0 0 auto; width:12px; height:12px; border-radius:3px; background:var(--c-accent) }
.article p{ font-size:var(--fz-body); line-height:1.9; color:var(--article-ink) }
.article a:not(.article-back){ color:var(--c-accent); text-decoration:underline; text-underline-offset:3px }
.article a:not(.article-back):hover{ opacity:.8 }
.article ul.wp-block-list{ list-style:none; padding-left:8px; display:flex; flex-direction:column; gap:12px }
.article ul.wp-block-list > li{ position:relative; padding-left:18px; line-height:1.6 }
.article ul.wp-block-list > li::before{ content:""; position:absolute; left:0; top:.65em; width:4px; height:4px; border-radius:50%; background:var(--c-accent) }
.article ol.wp-block-list{ list-style:decimal; padding-left:calc(8px + 1.4em); display:flex; flex-direction:column; gap:12px }
.article ol.wp-block-list > li{ line-height:1.6; padding-left:4px }
.article ol.wp-block-list > li::marker{ color:var(--c-accent); font-weight:700 }
.article blockquote.wp-block-quote{ margin:24px 0 0; background:var(--article-soft); border-left:4px solid var(--c-accent);
  border-radius:0 8px 8px 0; padding:24px; color:var(--article-ink) }
.article blockquote.wp-block-quote cite{ display:block; margin-top:8px; font-size:var(--fz-caption); color:var(--c-ink-60); font-style:normal }
.article figure.wp-block-image{ margin:0 }
.article figure.wp-block-image img{ width:100%; height:auto; display:block }
.article figure.wp-block-image figcaption{ margin-top:8px; font-size:var(--fz-caption); line-height:1.6; text-align:center; color:var(--c-ink-60) }
.article figure.wp-block-table{ margin:0; overflow-x:auto; -webkit-overflow-scrolling:touch }
.article figure.wp-block-table table{ width:100%; min-width:560px; border-collapse:collapse; font-size:var(--fz-meta); color:var(--article-ink) }
.article figure.wp-block-table th,
.article figure.wp-block-table td{ text-align:left; padding:16px; border-bottom:1px solid var(--article-rule); line-height:1.5 }
.article figure.wp-block-table thead th{ background:var(--article-soft); font-weight:700; color:var(--c-main); border-bottom:1px solid var(--article-rule) }
/* note / warn（ブロックスタイル） */
.article .wp-block-group.is-style-note{ background:var(--article-note-bg); border-radius:8px; padding:24px }
.article .wp-block-group.is-style-warn{ background:var(--article-warn-bg); border-left:4px solid var(--article-warn-line); border-radius:0 8px 8px 0; padding:24px }
.article .wp-block-group.is-style-note > *+*,
.article .wp-block-group.is-style-warn > *+*{ margin-top:12px }
.article .wp-block-group.is-style-note :where(h2,h3,h4){ border:0; padding:0; font-size:var(--fz-body); color:var(--c-accent) }
.article .wp-block-group.is-style-warn :where(h2,h3,h4){ border:0; padding:0; font-size:var(--fz-body); color:var(--article-warn-ink) }