/* ニュース詳細・イベント詳細の共用ページCSS */

/* 記事カラムは共通の `.w-md`（1080）を使う。`.article` が1080になった 2026-08-31 の裁定で
   独自幅の `.art-col` は廃止した（幅を2本持つとヒーローと記事末だけがずれる） */

/* 記事ヘッド（ニュース詳細）：page-hero の h1 は 40px だがニュース見出しは長いので30px（ラダー内）に落とす */
.page-hero.news h1{font-size:calc(30px * var(--fs-k))}
/* 日付＋カテゴリ行はパンくずから少し離す */
.page-hero.news .nmeta{margin-top:calc(16px * var(--sp-k));margin-bottom:calc(10px * var(--sp-k))}
@media(max-width:980px){.page-hero.news h1{font-size:calc(24px * var(--fs-k))}}

/* シェア行：ボタン本体は共通 .icon-btn（角丸8px＝押せる形）。ブランドマークは塗りなので stroke を消す */
.share{display:flex;align-items:center;justify-content:flex-end;gap:calc(10px * var(--sp-k));margin-top:calc(22px * var(--sp-k))}
.share .k{font-size:var(--fs-sub);font-weight:700;color:var(--ink-mute);margin-right:2px}
.share .icon-btn svg{width:16px;height:16px;fill:currentColor;stroke:none}

/* 記事下ナビ：前の記事／一覧／次の記事。ボタン本体は共通 .cardbtn.ghost */
.art-nav{display:flex;align-items:center;justify-content:space-between;gap:calc(12px * var(--sp-k));flex-wrap:wrap;margin-top:calc(32px * var(--sp-k))}
@media(max-width:640px){.art-nav{justify-content:center}}

/* イベントヘッドは共通の写真全面ヒーロー `.ind-hero`（白文字）を使う。
   `.photo` 修飾子＝暗いKV写真をそのまま全面に敷き、左だけ20%の黒を重ねて文字の足元を締める */
.ind-hero.photo .shade{background:linear-gradient(90deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.2) 34%,transparent 68%)}
.ind-hero.photo .crumbs,.ind-hero.photo .crumbs a{color:#e6eefb}
/* 記事・告知の見出しは長いので、`.ind-hero` 既定の42pxではなく30px（ラダー内・記事系と同じ） */
.ind-hero .nmeta+h1{font-size:calc(30px * var(--fs-k));line-height:1.4}
@media(max-width:980px){.ind-hero .nmeta+h1{font-size:calc(24px * var(--fs-k))}}
.ind-hero .nmeta{margin:0 0 calc(14px * var(--sp-k))}
.ind-hero .nmeta .tag-pill{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.34)}
.ind-hero .nmeta .status{background:#d8f5e6;color:#12704a;border-color:transparent}
.ind-hero .ev-kv{color:#fff;margin-top:calc(20px * var(--sp-k))}
.ind-hero .ev-kv span::before{background:#8fd8b4}

/* 開催サマリー行（日時・形式・参加費・定員）。ヒーローと申込帯の2か所で同じ行を使う */
.ev-kv{display:flex;flex-wrap:wrap;gap:calc(10px * var(--sp-k)) calc(24px * var(--sp-k));font-size:var(--fs-body);font-weight:700;color:var(--ink)}
.ev-kv span{display:inline-flex;align-items:center;gap:calc(8px * var(--sp-k))}
.ev-kv span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--navy);flex:none}

/* 申込帯：資料DL帯 `.dl-band` の1カラム版（表紙画像を持たないので中央寄せ）。幅は器の `.w-md` に任せる */
.dl-band.apply{grid-template-columns:1fr;justify-items:center;text-align:center;position:relative;overflow:hidden}
.dl-band.apply .dl-tx{text-align:center;position:relative;z-index:1}
.dl-band.apply .ev-kv{justify-content:center;margin-top:calc(18px * var(--sp-k))}
/* `.photo` 修飾子＝ヒーローと同じ「幕なしの写真全面＋白文字」。暗いKV写真とセットの契約 */
.dl-band.apply.photo{background:var(--navy-ink);border-color:transparent}
.dl-band .bandbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;opacity:.9;z-index:0}
.dl-band.apply.photo .dl-tx h3{color:#fff}
.dl-band.apply.photo .dl-tx p{color:#e2ecfb}
.dl-band.apply.photo .ev-kv{color:#fff}
.dl-band.apply.photo .ev-kv span::before{background:#8fd8b4}