@charset "utf-8";
/* ===== トークン ===== */
:root{
/* テーマ (topic_head が上書き。ここはフォールバック=税研ブルー) */
--brand:#0050B5;
--brand-dark:#003a85;
--bg-tint:#f3f6fb;
/* 非テーマ (全トピック共通) */
--ink:#1c2433;
--ink-soft:#5a6478;
--line:#dde3ee;
--bg:#ffffff;
/* 意味を持つ色 (テーマ非連動・固定) */
--member:#8a6a24; --member-bg:#f6efdd; /* 登録者限定 */
--open:#1e7a4f; --open-bg:#e6f3ec; /* 公開 */
--live:#b3411e; --live-bg:#fdeee8; /* Live配信 */
--venue:#39518c; --venue-bg:#eaeefa; /* 会場 */
--link:#0B57D0; /* 本文リンク（白地 6.1:1・AA） */
--link-hover:#083E99; /* ホバー（白地 9.5:1） */
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:100%}
html[data-tsfs="s"]{font-size:89%}
html[data-tsfs="l"]{font-size:120%}
body{font-family:"Noto Sans JP",sans-serif;color:var(--ink);background:var(--bg);line-height:1.9;font-size:1.0625rem}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
/* ===== ヘッダー ===== */
/* 2026-09-04: 追従するのは**ヘッダーではなくアンカーナビ**（白井指示）。
ヘッダーはロゴだけの細いバーで、スクロールで流れてよい。 */
header{border-bottom:1px solid var(--line);background:#fff}
.hd{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;gap:16px;flex-wrap:wrap}
.hd .site{display:flex;align-items:baseline;gap:12px}
.hd .pub{font-size:12px;color:var(--ink-soft);letter-spacing:.08em}
.hd .name{font-family:"Shippori Mincho",serif;font-size:20px;font-weight:700;color:var(--brand-dark)}
.hd .acts{display:flex;gap:10px;align-items:center}
.hd-fs{display:flex;align-items:center;gap:8px;flex-shrink:0;position:relative;margin-left:auto}
.hd-fs-l{font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.hd-fs-seg{display:inline-flex;align-items:center;gap:2px;background:#f1f3f7;border:1px solid var(--line);border-radius:9px;padding:3px}
.hd-fs-b{border:none;background:transparent;border-radius:6px;padding:0 11px;height:30px;line-height:1;color:var(--ink-soft);cursor:pointer;font-family:inherit;white-space:nowrap}
.hd-fs-b[data-fs="s"]{font-size:12px}
.hd-fs-b[data-fs="m"]{font-size:13px}
.hd-fs-b[data-fs="l"]{font-size:15.5px}
.hd-fs-b:hover{color:var(--ink)}
.hd-fs-b.on{background:#fff;color:var(--brand-dark);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.hd-fs-b:focus-visible,.hd-fs-t:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.hd-fs-t{display:none;width:40px;height:40px;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-family:inherit;flex-shrink:0}
.hd-fs-t[aria-expanded="true"]{border-color:var(--brand);color:var(--brand-dark)}
@media(max-width:760px){
.hd-fs-l{display:none}
.hd-fs-t{display:flex}
.hd-fs-seg{display:none;position:absolute;right:0;top:46px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.16);padding:6px;z-index:150}
.hd-fs.open .hd-fs-seg{display:inline-flex}
.hd-fs-b{height:44px;padding:0 16px}
}
.btn{display:inline-block;padding:9px 18px;border-radius:6px;font-size:13px;font-weight:700;line-height:1}
.btn-ghost{border:1.5px solid var(--brand);color:var(--brand)}
.btn-solid{background:var(--brand);color:#fff}
.btn-solid:hover,.btn-ghost:hover{text-decoration:none;opacity:.85}
/* ログイン中表示 (認証実装後に JS で切替。v1 は非表示) */
.hd .signed{display:none;align-items:center;gap:10px}
.hd .signed .who{font-size:12.5px;color:var(--ink-soft)}
.hd .signed .badge-in{font-size:12px;font-weight:700;color:var(--member);background:var(--member-bg);padding:3px 10px;border-radius:3px}
/* ===== ⓪ ヒーロー ===== */
.hero{background:linear-gradient(180deg,var(--bg-tint) 0%,#fff 100%);border-bottom:1px solid var(--line)}
.hero-in{padding-top:52px;padding-bottom:44px;display:flex;gap:44px;align-items:flex-start;flex-wrap:wrap}
.hero .main{flex:1;min-width:320px}
.hero .kicker{display:inline-block;background:var(--brand);color:#fff;font-size:12px;font-weight:700;letter-spacing:.12em;padding:5px 14px;border-radius:3px;margin-bottom:18px}
.hero h1{font-family:"Shippori Mincho",serif;font-size:33px;font-weight:700;line-height:1.5;letter-spacing:.02em;margin-bottom:18px}
.hero h1 .em{color:var(--brand)}
.hero .lead{font-size:16px;color:var(--ink);max-width:42em}
.hero .cta-row{margin-top:24px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero .basics-cta:hover{background:var(--brand);color:#fff;text-decoration:none}
/* ===== セクション共通 ===== */
section{padding:46px 0}
section.tint{background:var(--bg-tint)}
.sec-head{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.sec-head h2{font-family:"Shippori Mincho",serif;font-size:1.5rem;font-weight:700;letter-spacing:.04em}
.sec-icon{flex:none;width:44px;height:44px;border-radius:50%;background:var(--bg-tint);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--brand)}
.sec-icon svg{width:22px;height:22px;display:block}
section.tint .sec-icon{background:#fff}
@media(max-width:760px){.sec-head h2{font-size:1.25rem}.sec-icon{width:38px;height:38px}.sec-icon svg{width:19px;height:19px}}
.sec-head .note{font-size:.75rem;color:var(--ink-soft);margin-left:auto}
.sec-empty{font-size:.9375rem;color:var(--ink-soft);background:#fff;border:1px dashed var(--line);border-radius:6px;padding:18px}
/* ===== ① お知らせ ===== */
.notice-list{border-top:1px solid var(--line)}
.notice-list li{list-style:none;border-bottom:1px solid var(--line);font-size:1rem}
.notice-list time{color:var(--ink-soft);font-size:.8125rem;white-space:nowrap;padding-top:2px}
/* ===== ③④ オリジナル解説 ===== */
.kcard,.vcard,.card,.scard,.bcard,.news-card{overflow-wrap:anywhere}
.kaisetsu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:980px){.kaisetsu{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.kaisetsu{grid-template-columns:1fr}}
.kcard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px;display:flex;flex-direction:column;gap:10px}
.badge{display:inline-block;font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:3px;letter-spacing:.06em;align-self:flex-start}
.badge.open{color:var(--open);background:var(--open-bg)}
.badge.member{color:var(--member);background:var(--member-bg)}
.kcard h3{font-size:1.0625rem;font-weight:700;line-height:1.6}
.kcard p{font-size:.9375rem;color:var(--ink-soft);flex:1}
.kcard .link{font-size:.875rem;font-weight:700}
/* ===== ⑥ 書籍 ===== */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.card .thumb{background:var(--bg-tint);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;height:120px;font-size:.75rem;letter-spacing:.1em;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:contain}
.card .cb{padding:16px;display:flex;flex-direction:column;gap:9px;flex:1}
.card .tag{font-size:.75rem;color:var(--brand);font-weight:700;letter-spacing:.08em}
.card h3{font-size:.9375rem;font-weight:700;line-height:1.6;flex:1}
.card .meta{font-size:.8125rem;color:var(--ink-soft)}
.card .link{font-size:.8125rem;font-weight:700}
/* ===== ⑦ セミナー (画像なし・区分＋開催地) ===== */
.scard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:10px}
.scard .badges{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.stype{display:inline-block;font-size:.75rem;font-weight:700;padding:3px 11px;border-radius:3px;letter-spacing:.06em}
.stype.live{color:var(--live);background:var(--live-bg)}
.stype.venue{color:var(--venue);background:var(--venue-bg)}
.loc{display:inline-block;font-size:.75rem;font-weight:700;color:var(--venue);border:1px solid var(--venue);padding:2px 10px;border-radius:99px}
.scard .date{font-size:.8125rem;color:var(--ink);font-weight:500}
.scard h3{font-size:.9375rem;font-weight:700;line-height:1.6;flex:1}
.scard .meta{font-size:.8125rem;color:var(--ink-soft)}
.scard .link{font-size:.8125rem;font-weight:700}
/* ===== オリジナル動画カード ===== */
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:980px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.vgrid{grid-template-columns:1fr}}
.vcard{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.vthumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#26314b 0%,#3d4c70 100%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.vthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vthumb .play{position:relative;z-index:1;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.vthumb .play::after{content:"";border-left:17px solid var(--brand);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.vthumb .dur{position:absolute;right:8px;bottom:8px;z-index:1;background:rgba(0,0,0,.72);color:#fff;font-size:.75rem;padding:2px 8px;border-radius:3px;letter-spacing:.04em}
.vcard .cb{padding:16px;display:flex;flex-direction:column;gap:9px;flex:1}
.vcard h3{font-size:.9375rem;font-weight:700;line-height:1.6;flex:1}
.vcard .meta{font-size:.8125rem;color:var(--ink-soft)}
.vcard .link{font-size:.8125rem;font-weight:700}
/* ===== 記事本文 (解説 / 動画 / 入門ガイド共通) ===== */
.art{max-width:872px;padding-top:40px;padding-bottom:56px}
.art-head{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:26px}
.art-head .crumb{font-size:.8125rem;color:var(--ink-soft);margin-bottom:12px}
.art-head h1{font-family:"Shippori Mincho",serif;font-size:1.875rem;font-weight:700;line-height:1.5;letter-spacing:.04em;margin:10px 0 12px}
.art-head .meta{font-size:.8125rem;color:var(--ink-soft);display:flex;gap:14px;flex-wrap:wrap}
.art-body{font-size:1.125rem;line-height:1.85}
.art-body p{margin-bottom:1.4em}
.art-body h2{font-family:"Shippori Mincho",serif;font-size:1.375rem;font-weight:700;letter-spacing:.04em;margin:2.2em 0 .9em;border-left:5px solid var(--brand);padding-left:12px}
.art-body h3{font-size:1.25rem;font-weight:700;margin:1.5em 0 .6em}
.art-body ul,.art-body ol{margin:0 0 1.3em 1.6em}
.art-body table{border-collapse:collapse;width:100%;margin-bottom:1.3em;font-size:1rem}
.art-body th,.art-body td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.art-body th{background:var(--bg-tint)}
.art-foot{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-soft)}
.art-back{display:inline-block;margin-top:18px;font-size:.8125rem;font-weight:700}
body.page-art{background:var(--bg-tint)}
body.page-art .art{background:#fff;border:1px solid var(--line);border-radius:8px;
padding-left:40px;padding-right:40px;margin-top:28px;margin-bottom:44px}
@media(max-width:680px){
body.page-art .art{padding-left:20px;padding-right:20px;border-left:0;border-right:0;border-radius:0;margin-top:0}
}
/* 入門ガイド (ピラーページ) */
.toc{background:var(--bg-tint);border:1px solid var(--line);border-radius:8px;padding:18px 22px;margin-bottom:30px}
.toc .tt{font-size:.8125rem;font-weight:700;color:var(--brand-dark);margin-bottom:8px}
.toc ol{margin:0 0 0 1.4em;font-size:.875rem}
.toc li{margin-bottom:4px}
.faq{margin-top:40px}
.faq-item{border:1px solid var(--line);border-radius:8px;padding:18px 20px;margin-bottom:12px;background:#fff}
.faq-q{font-weight:700;font-size:1rem;margin-bottom:8px}
.faq-q::before{content:"Q";display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;background:var(--brand);color:#fff;border-radius:50%;font-size:12px;margin-right:8px}
.faq-a{font-size:.9375rem;color:var(--ink-soft)}
/* ===== フッター ===== */
footer{background:var(--brand-dark);color:#e6ecf6;margin-top:24px}
footer .ft{padding:34px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px}
footer .ft strong{color:#fff;font-family:"Shippori Mincho",serif}
footer .ft p{margin-top:8px;max-width:32em}
footer a{color:#fff}
footer .copy{padding:14px 0;border-top:1px solid rgba(255,255,255,.2);font-size:12px}
/* ===== 入門ガイドへの相互リンク（記事冒頭） ===== */
.basics-link{background:var(--bg-tint);border-left:4px solid var(--brand);border-radius:0 4px 4px 0;padding:10px 14px;font-size:.875rem;margin-bottom:24px}
/* ===== ペイウォール: 冒頭のみ表示 + フェード ===== */
.fade-wrap{position:relative}
.fade-wrap .art-body{max-height:none}
.fade-overlay{position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.92) 62%,#fff 100%);pointer-events:none}
/* ===== ゲートボックス（design_spec §3-2） ===== */
.gate{border:1px solid var(--line);border-radius:8px;background:var(--bg-tint);padding:26px 28px;margin:8px 0 32px}
.gate-h{font-family:"Shippori Mincho",serif;font-size:1.1875rem;letter-spacing:.04em;font-weight:700;color:var(--brand-dark);margin-bottom:10px}
.gate-sub{font-size:.875rem;color:var(--ink-soft);margin-bottom:20px}
.gate-form{background:#fff;border:1px solid var(--line);border-radius:6px;padding:20px}
.gate-row{margin-bottom:14px}
.gate-label{display:block;font-size:.8125rem;font-weight:700;color:var(--ink);margin-bottom:6px}
.gate-input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:6px;font-size:1rem;font-family:inherit;color:var(--ink);background:#fff}
.gate-input:focus{outline:none;border-color:var(--brand)}
.gate-btn{width:100%;padding:13px 18px;background:var(--brand);color:#fff;border:none;border-radius:6px;font-size:.9375rem;font-weight:700;font-family:inherit;cursor:pointer}
.gate-btn:hover{background:var(--brand-dark)}
.gate-note{font-size:.75rem;color:var(--ink-soft);margin-top:6px}
.gate-msg{margin-top:12px;font-size:.8125rem;font-weight:700;color:var(--live);background:var(--live-bg);border-radius:4px;padding:10px 12px}
.gate-alt{margin-top:16px;font-size:.8125rem;color:var(--ink-soft)}
/* ===== 動画記事 ===== */
.video-embed{margin:24px 0;max-width:100%}
.video-embed iframe,.video-embed video,.video-embed object,.video-embed embed{max-width:100%}
.video-embed > div{max-width:100%!important}
.video-pdf{margin:0 0 24px;font-size:.875rem;font-weight:700}
.video-pdf a::before{content:"";display:inline-block;width:0;height:0;border-left:7px solid var(--brand);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-right:8px;vertical-align:middle}
.video-locked{margin:24px 0}
.video-locked .vthumb{border-radius:8px}
/* ===== レスポンシブ ===== */
@media(max-width:680px){
.wrap{padding:0 18px}
.hero h1{font-size:25px}
.hero .side{width:100%}
.art-head h1{font-size:1.5rem}
section{padding:34px 0}
}
/* ================================================================
v4 追加分（2026-09-04・ブリーフ④ / design_spec §14）
既存のテーマ 3 変数（--brand / --brand-dark / --bg-tint）は変更しない。
================================================================ */
/* --- §14-1 ヒーロー（v5 モック準拠・2026-09-04）---
モック: hijokabu_topic_site_top_mockup_v5_section_order.html
ブランド色ベタ塗り + 中央揃え。キッカー(字間広め・淡色) → サイトタイトル(明朝 33px 白)
→ キャッチ(14px 淡色)。CTA と定義リードはリードエリアへ移設済み。 */
.hero{background:var(--brand);color:#fff;padding:0;border-bottom:0;position:relative;overflow:hidden}
.hero .hero-in{position:relative;z-index:1}
.hero .hero-in{display:block;text-align:center}
.hero .main{max-width:760px;margin:0 auto}
.hero .kicker{display:block;background:none;color:rgba(255,255,255,.88);font-size:12px;font-weight:400;
letter-spacing:.25em;padding:0;margin:0 0 12px;border-radius:0}
.hero .site-title{font-family:"Shippori Mincho",serif;font-size:33px;font-weight:600;color:#fff;
line-height:1.45;letter-spacing:.06em;margin:0 0 14px}
.hero .headline{font-size:14px;color:rgba(255,255,255,.92);line-height:1.8;margin:0 auto;max-width:34em;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media(max-width:760px){.hero .site-title{font-size:25px}.hero .headline{font-size:13.5px}}
/* ring: 白の輪郭円を左右に 2 つずつ。.main(760px) の外側に置いて文字と重ねない */
.hero.deco-ring::before,.hero.deco-ring::after{content:"";position:absolute;top:0;bottom:0;width:420px;pointer-events:none;
background-repeat:no-repeat}
.hero.deco-ring::before{left:0;
background-image:radial-gradient(circle at 70px 60px,transparent 148px,rgba(255,255,255,.26) 149px,rgba(255,255,255,.26) 150px,transparent 151px),
radial-gradient(circle at 140px 100%,transparent 98px,rgba(255,255,255,.16) 99px,rgba(255,255,255,.16) 100px,transparent 101px)}
.hero.deco-ring::after{right:0;
background-image:radial-gradient(circle at calc(100% - 80px) 100%,transparent 148px,rgba(255,255,255,.26) 149px,rgba(255,255,255,.26) 150px,transparent 151px),
radial-gradient(circle at calc(100% - 150px) 0,transparent 93px,rgba(255,255,255,.16) 94px,rgba(255,255,255,.16) 95px,transparent 96px)}
/* grid: 白 7% の 32px 方眼を全面に */
.hero.deco-grid::before{content:"";position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 32px),
repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 32px)}
@media(max-width:760px){
.hero.deco-ring::before,.hero.deco-ring::after{content:none}
.hero.deco-grid::before{background-size:24px 24px}
}
/* image モード: 画像 1 枚をヒーロー全体にする */
.hero.hero-image{background:#fff;padding:0;border-bottom:0}
.hero.hero-image .wrap{padding:0}
.hero.hero-image .hero-img{display:block;width:100%;height:auto}
@media(min-width:761px){.hero.hero-image .wrap{padding:0 24px}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-trust{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero-trust-in{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:9px 24px 10px}
.hero-trust .tl{font-size:13px;color:var(--ink-soft);letter-spacing:.08em;white-space:nowrap}
.hero-trust .sep{width:1px;height:14px;background:var(--line);margin:0 4px}
.hero-trust .logos{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}
.hero-trust .logos img{height:20px;width:auto;max-width:140px;display:block}
@media(max-width:760px){
.hero-trust-in{gap:8px 14px;padding:8px 16px 9px}
.hero-trust .sep{display:none}
.hero-trust .logos img{height:18px}
}
/* --- ヘッダー: v5 モックに合わせた細いバー --- */
.hd .corp{display:inline-block;line-height:0}
.hd .corp img{height:34px;width:auto}
@media(max-width:760px){.hd .corp img{height:28px}}
/* --- §14-2 アンカーナビ（追従しない） --- */
/* アンカー遷移をなめらかに（2026-09-04 白井指示）。
★ scroll-margin-top も同時に要る: ナビが sticky で上部に残るため、
指定しないと遷移先セクションの見出しがナビの裏に隠れる。
値はナビの実高さに余白を足したもの。
2026-09-14 (T-1) 再計算: .anchor-in padding 12+12=24 ＋ カプセル高さ
（16px×1.5=24 ＋ padding 6+6=12 ＋ カプセルの border 1+1=2 → 38）
＋ ナビ下端の border 2 = **64px**（2026-09-15 の枠線化後も同値）。
2026-09-15 (ブリーフ⑦): ナビ下端の罫が 2px → 1px になり **63px**。
クリアランスは約 13px となり 76px は据え置きで妥当。
カプセル化前も 18px×1.9=34.2 ＋ padding 2+2 → 38.2 で同じ 64px 相当だったため、
76px（クリアランス約 12px）は**据え置きで妥当**。
★ナビの font-size / padding / .anchor-in の padding を変えたらこの値も見直すこと。
狭幅ではナビが 2 行に折り返すため大きめに取る。
★ OS の「視差効果を減らす」設定は尊重する（prefers-reduced-motion）。 */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
[id^="sec-"]{scroll-margin-top:76px}
@media(max-width:760px){[id^="sec-"]{scroll-margin-top:76px}}
/* v5 モック: 中央寄せ・折り返し可・下ボーダーはブランド色 2px。
2026-09-04: **ナビを追従**させる（ヘッダーの sticky は解除した）。 */
.anchor-nav{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.anchor-in{padding:12px 24px}
.anchor-links{display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:center;align-items:center}
.anchor-links a{white-space:nowrap;font-size:16px;line-height:1.5;color:var(--ink);text-decoration:none;
background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 16px;text-align:center;
min-width:calc(4em + 34px);transition:background .15s,border-color .15s,color .15s}
.anchor-links a:hover{background:#f7f9fc;border-color:var(--brand);color:var(--brand);text-decoration:none}
.hd-menu-btn{display:none}
.hd-menu{display:none}
.anchor-burger{position:relative;flex:none;display:block;width:22px;height:16px}
.anchor-burger span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--brand);transition:transform .2s,opacity .2s}
.anchor-burger span:nth-child(1){top:0}
.anchor-burger span:nth-child(2){top:7px}
.anchor-burger span:nth-child(3){top:14px}
@media(max-width:760px){
.anchor-nav{display:none}
header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line)}
.hd{padding-top:10px;padding-bottom:10px;flex-wrap:nowrap}
.hd-menu-btn{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-right:-10px;padding:0;background:none;border:none;cursor:pointer}
header.is-open .anchor-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.is-open .anchor-burger span:nth-child(2){opacity:0}
header.is-open .anchor-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hd-menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;background:#fff;border-bottom:2px solid var(--brand);box-shadow:0 10px 20px rgba(0,0,0,.08);max-height:70vh;overflow-y:auto}
header.is-open .hd-menu{display:flex}
.hd-menu a{font-size:16px;color:var(--ink);text-decoration:none;padding:14px 24px;border-top:1px solid var(--line)}
.hd-menu a:first-child{border-top:none}
}
/* --- §14-3 リードエリア（無ラベル） --- */
/* リードエリア（添付「リード.png」準拠・2026-09-07）
淡色地・中央寄せの見出し・本文は 660px 幅で左右に十分な padding。 */
/* 2026-09-07: セクションの交互リズムを「薄水色始まり」に反転したのに伴い、
直上のリードエリアは **白**にする（同色が 2 つ続いて地続きに見えるのを防ぐため）。
リズムを白始まりに戻すときは、ここを var(--bg-tint) に戻す。 */
.lead-area{background:#fff;padding:44px 0 40px}
.lead-area .wrap{max-width:660px;padding-left:24px;padding-right:24px}
.lead-area .lead-title{font-size:1.25rem;font-weight:700;color:var(--ink);text-align:center;margin-bottom:20px;line-height:1.6}
.lead-area .lead-main{font-size:1.0625rem;line-height:1.9}
.lead-area .lead-extra{font-size:.9375rem;line-height:1.9;color:var(--ink-soft);margin-top:16px}
.lead-area .lead-cta{margin-top:28px;text-align:center}
@media(max-width:760px){.lead-area{padding:32px 0 28px}.lead-area .lead-title{font-size:1.125rem}.lead-area .lead-main{font-size:1.0625rem}}
.btn-primary{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;font-weight:500;font-size:.9375rem;padding:13px 32px;border-radius:6px}
.btn-primary:hover{background:var(--brand-dark)}
/* --- §14-4 更新情報・関連ニュース --- */
.news-list{display:flex;flex-direction:column;gap:14px}
/* カード（添付「saisinjouhou.png」準拠・2026-09-07）
★リッチ／シンプルの 2 形式は 1 デザインに統合済み。.sub / .lead は
フィールドが空なら出力されないので、短いお知らせは自動的に簡素な見た目になる。
★左の色帯は撤去。日付タグとタイトルの間隔を広げ、本文幅を絞って文字を大きく。 */
.news-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 26px;display:flex;gap:40px;align-items:flex-start}
.news-card .when{min-width:132px;display:flex;flex-direction:column;gap:10px}
.news-card .when time{font-size:.875rem;color:var(--ink-soft);white-space:nowrap}
.news-card .kind-badge{display:inline-block;font-size:.75rem;font-weight:700;color:var(--brand-dark);background:var(--bg-tint);border-radius:4px;padding:5px 10px;text-align:center}
.news-card .body{flex:1;min-width:0;max-width:52em}
.news-card h3{font-size:1.125rem;font-weight:700;line-height:1.6}
.news-card h3 a{color:var(--brand);text-decoration:none}
.news-card h3 a:hover{text-decoration:underline}
.news-card .sub{font-size:.9375rem;color:var(--ink-soft);margin-top:8px}
.news-card .lead{font-size:1rem;color:var(--ink);margin-top:12px;line-height:1.9}
.news-card .read{margin-left:auto;font-size:.875rem;color:var(--brand);white-space:nowrap;text-decoration:none;align-self:flex-start}
.news-card .read:hover{text-decoration:underline}
@media(max-width:760px){
.news-card{flex-direction:column;gap:10px}
.news-card .when{flex-direction:row;align-items:center;gap:10px;min-width:0}
.news-card .read{margin-left:0}
}
/* --- §14-5 お知らせ 行クリッカブル --- */
.notice-row{display:flex;gap:18px;padding:12px 4px;text-decoration:none;color:inherit}
.notice-row:hover{background:rgba(0,0,0,.03)}
.notice-row time{color:var(--ink-soft);font-size:.875rem;white-space:nowrap;padding-top:2px}
@media(max-width:760px){.notice-row{flex-direction:column;gap:4px}}
/* --- §14-6 媒体フィード（2026-09-18 T-3 で .news-card に統一）--- */
.news-card-ext .read{position:relative;z-index:2}
.news-card-ext .read svg{width:14px;height:14px;vertical-align:-2px;margin-left:4px}
/* もっと見るで隠す共通ユーティリティ（2026-09-07 修正）。
★ 元は .feed-item.is-more と媒体フィード専用だったため、data-limit を全セクションへ
広げたときに他セクションで効かず「全件見えているのにボタンだけ出る」不具合になった。
★ !important は、各カードが自前の display（flex / grid など）を持っており、
記述順に関係なく確実に隠すため。 */
.is-more{display:none!important}
.more-wrap{margin-top:18px;text-align:center}
.btn-more{background:#fff;border:1.5px solid var(--brand);color:var(--brand);font-family:inherit;font-size:.9375rem;font-weight:700;padding:11px 26px;border-radius:6px;cursor:pointer}
.btn-more:hover{background:var(--bg-tint)}
/* --- §14-7 カード日付 / 書籍 横型 / セミナー 3値バッジ --- */
.card-date{display:block;font-size:.875rem;color:var(--ink-soft);margin-bottom:4px}
/* 2 カラム（2026-09-07 白井指示）。狭幅では 1 カラムへ。 */
.book-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:860px){.book-list{grid-template-columns:1fr}}
.bcard{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px 18px}
/* 書影は www.zeiken.co.jp/store/book/ の .normalBookList ul li .img img に合わせる。
（width:100% / height:auto / box-shadow）。aspect-ratio + object-fit:cover では
書影の左右が切れるため使わない。 */
.bcard .thumb{flex:0 0 78px;width:78px;display:block;font-size:.75rem;color:var(--ink-soft)}
.bcard .thumb img{width:100%;height:auto;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.bcard .cb{flex:1;min-width:0}
.bcard h3{font-size:1.0625rem;font-weight:700;line-height:1.6}
/* 2026-09-07: 刊行日を廃し 著者・価格を表示 */
.bcard .book-author{display:block;font-size:.875rem;color:var(--ink-soft);margin-top:6px}
.bcard .book-price{display:block;font-size:.9375rem;font-weight:700;color:var(--ink);margin-top:4px}
@media(max-width:480px){.bcard{flex-direction:column}.bcard .thumb{width:96px;flex-basis:auto}}
.stype.web{color:#0e7490;background:#e8f4f8}
/* --- §14-2 トップに戻る（右下固定・追従） --- */
.to-top{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;border:none;
background:var(--brand);color:#fff;font-size:18px;line-height:1;cursor:pointer;opacity:0;pointer-events:none;
transition:opacity .2s;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{background:var(--brand-dark)}
/* --- §14-8 共通フッター include との調整 ---
common/inc/footer.php は他サイトと共用のため **絶対に編集しない**。
トピック側 CSS が全社フッターに影響しないよう、id="footer" 配下は素通しにする。 */
.ft-note{padding-top:18px;padding-bottom:18px;font-size:13.5px;color:var(--ink-soft)}
#footer{font-size:14px}
/* ================================================================
カード全体をクリッカブルに（2026-09-04 白井指示）
文字リンクだけでなくカード面全体を押せるようにする。
実装: カードを position:relative にし、主リンクに ::after のオーバーレイを敷く。
（ の入れ子は不正なので、外側 ではなくオーバーレイ方式にしている。
news のリッチカードは「タイトル」と「資料を見る」の 2 リンクを持つため、
**面全体はタイトル（記事本文）**に割り当て、資料リンクは前面に出す。）
================================================================ */
.kcard,.bcard,.scard,.news-card{position:relative}
.kcard .link::after,.bcard .cb .link::after,.scard .link::after,
.news-card .body h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.kcard:hover,.bcard:hover,.scard:hover,.news-card:hover{border-color:var(--brand)}
/* 面リンクより前に出したい要素（重なり順） */
/* 面全体が押せることを示す */
.kcard,.bcard,.scard,.news-card{cursor:pointer}
/* ★ 面リンク（::after を持つ a）に position を付けてはいけない。
付けると ::after{inset:0} の基準がカードではなく a 自身になり、
オーバーレイが文字の上だけになって「文字リンクからしか飛ばない」状態になる。 */
.kcard .link,.bcard .cb .link,.scard .link,.news-card .body h3 a{position:static}
/* ================================================================
全社 CSS（reset.css / module.css）の打ち消し
topic_head で全社 CSS を先に読むようにしたため、フッターは実サイトと
同じ見た目で描画される。ただし基底ルールがトピック側にも効くので、
ここで必要な分だけ戻す。**セレクタは限定的に**（フッターに波及させない）。
================================================================ */
/* module.css は SP で html,body{font-size:13px} にするが、トピックは 16px 基準（1rem=16px）を保つ。
★ 2026-09-18 rem 化: **html だけ**を 100% に戻す。ここで body を px で上書きすると
文字サイズ切替（html[data-tsfs] の %）が SP で効かなくなる。
body の実寸はファイル先頭の body{font-size:1.0625rem} が持つ（重複定義は削除済）。 */
@media screen and (max-width:736px){
html{font-size:100%}
}
/* 共通フッターの「ページトップ」ボタンを非表示にする。
#page-top-btn は全社サイトのグローバル JS で動く仕組みで、トピックサイトは
その JS を読んでいないため **押しても何も起きない**。
トピック側には自前の追従ボタン（.to-top）があるので、こちらを隠して重複も避ける。
★ common/inc/footer.php は共用のため編集せず、CSS で隠すだけにしている。 */
#footer .pageTopWrap{display:none}
/* トピック本文のリンク色は自前の指定に戻す。
★ `.wrap a` にすると詳細度 0,1,1 で `.btn-primary`(0,1,0) 等の
コンポーネント指定に勝ってしまい、青地に青文字（＝文字が見えない）になる。
クラスを持たない素のリンクだけに限定する。 */
.wrap a:not([class]){color:var(--brand)}
.wrap a:not([class]):hover{color:var(--brand-dark)}
.wrap ul{list-style:none;margin:0;padding:0}
.wrap img{max-width:100%;height:auto}
/* 記事・入門ガイド本文の箇条書きだけマーカーと字下げを戻す（2026-09-16）。
★ 原因は 2 つ重なっていた:
1. 全社 reset.css が ul / ol に list-style:none を掛けている
2. 直上の打ち消しブロックの `.wrap ul{list-style:none;margin:0;padding:0}` が
**本文の ul にも効いていた**（.art-body も .wrap の中にあるため）。
中黒・数字だけでなく §195 の字下げ（margin-left:1.6em）も打ち消されていた。
★ `.wrap ul` の指定自体は残す（お知らせ一覧など自前リストで必要）。詳細度は
`.art-body ul` と同じ (0,1,1) なので、**打ち消しブロックより後ろに置いて**勝たせる。
位置を動かすとまたマーカーが消えるので、このブロックはファイル末尾のままにすること。 */
.art-body ul{list-style:disc;margin:0 0 1.3em 1.6em;padding:0}
.art-body ol{list-style:decimal;margin:0 0 1.3em 1.6em;padding:0}
.art-body ul li{list-style:disc}
.art-body ol li{list-style:decimal}
.art-body li{margin-bottom:.35em}
.art-body ul ul,.art-body ul ol{margin:.4em 0 .4em 1.4em}
.art-body ol ol,.art-body ol ul{margin:.4em 0 .4em 1.4em}
.art-body ul ul li{list-style:circle}
.art-body ol ol li{list-style:lower-alpha}
/* 太字・赤字を許可（2026-09-18 編集部要望 ③）。
★ 純粋な赤（#ff0000 / red）は白地に対して 4.00:1 しかなく WCAG AA（4.5:1）に届かない。
編集ツールの色パレットで真っ赤が選ばれても読みやすい赤に寄せる保険。
推奨色は #c0392b（5.44:1）。テンプレ記事にもこの色を案内している。
★ 属性セレクタなので背景色に #ff0000 を入れた要素にも当たるが、
背景色の指定自体を「使わないもの」にしているため実害はない。 */
.art-body [style*="color:red"],.art-body [style*="color: red"],
.art-body [style*="#ff0000"],.art-body [style*="#FF0000"],
.art-body [style*="rgb(255,0,0)"],.art-body [style*="rgb(255, 0, 0)"],
.art-body font[color="red"],.art-body font[color="#ff0000"],.art-body font[color="#FF0000"]{color:#c0392b !important}
/* テンプレ記事でタグの書き方を示すために使う（本文中では基本使わない） */
.art-body code{font-family:Consolas,"Courier New",monospace;font-size:.92em;background:var(--bg-tint);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
/* 本文の太字を戻す（2026-09-28 編集部「MT で太字にしても反映されない」）。
★ 原因は箇条書き（上の li）と同じく全社 reset.css。
`em,strong,…{font-style:normal;font-weight:normal}` が掛かっており、
MT のリッチテキストエディタが出力する が細字のままになる。
は reset 対象外だが、貼り付け等で入ることがあるので併せて指定する。
★ 詳細度は `.art-body strong`(0,1,1) > `strong`(0,0,1) なので位置は問わないが、
打ち消しブロックの一部として末尾に置く。Noto Sans JP の 700 は topic_head で読込済。 */
.art-body strong,.art-body b{font-weight:700}
/* 同じ reset で打ち消されている斜体と表の見出しセルも戻す（2026-09-28）。
★ em はエディタの「斜体」、i は貼り付け由来。和文は合成斜体になるが編集部の意図を優先する。
★ th は上の `.art-body th{background}` と同じ要素。text-align:left はそのまま（reset と同じ左寄せ）。 */
.art-body em,.art-body i{font-style:italic}
.art-body th{font-weight:700}
/* ===== 2026-09-28 改修（9/25 MTG）===== */
/* ナビの追従が途中で外れる問題（#11）。
★ 全社 module.css の `html,body{height:100%}` で body が 1 画面分の高さに固定され、
body 直下の sticky 要素（PC のアンカーナビ / SP のヘッダー）が 1 画面スクロールした所で
追従をやめていた（sticky は親要素の範囲内でしか追従しない）。
★ module.css は全社共用なので触らず、トピック側で body だけ高さを内容なりに戻す。 */
body{height:auto}
/* リード文をウェブページ（basename: lead）から出す場合（#1）。
本文 1 段落目を定義文（旧 .lead-main）、2 段落目以降を補足（旧 .lead-extra）の見た目にする。 */
.lead-area .lead-body{font-size:1.0625rem;line-height:1.9}
.lead-area .lead-body p{margin:0}
.lead-area .lead-body p + p,.lead-area .lead-body ul,.lead-area .lead-body ol{font-size:.9375rem;color:var(--ink-soft);margin-top:16px}
.lead-area .lead-body strong,.lead-area .lead-body b{font-weight:700}
/* 新着情報（旧お知らせ・#2〜#5）: 先頭 1 件のアイキャッチ付きカード＋行リスト */
.wn-top{display:flex;gap:24px;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:18px;position:relative}
.wn-top:hover{border-color:var(--brand)}
.wn-top-img{flex:none;width:320px;aspect-ratio:16/9;background:var(--bg-tint);display:block}
.wn-top-img img{width:100%;height:100%;object-fit:cover;display:block}
.wn-top-book .wn-top-img img{object-fit:contain}
.wn-top-body{flex:1;min-width:0;padding:18px 22px 18px 0;display:flex;flex-direction:column;gap:8px;overflow-wrap:anywhere}
.wn-top-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wn-top-meta time{font-size:.875rem;color:var(--ink-soft)}
.wn-top h3{font-size:1.125rem;font-weight:700;line-height:1.6}
.wn-top h3 a{color:var(--ink);text-decoration:none}
.wn-top h3 a::after{content:"";position:absolute;inset:0}
.wn-top h3 a:hover{color:var(--brand)}
.wn-top-lead{font-size:.9375rem;color:var(--ink-soft);line-height:1.8}
.wn-pick{display:inline-block;font-size:.75rem;font-weight:700;color:#fff;background:var(--brand);border-radius:4px;padding:3px 10px;letter-spacing:.06em}
.wn-badge{display:inline-block;flex:none;font-size:.75rem;font-weight:700;color:var(--brand-dark);background:var(--bg-tint);border:1px solid var(--line);border-radius:4px;padding:1px 8px;line-height:1.7;white-space:nowrap;align-self:flex-start;margin-top:2px}
section.tint .wn-badge{background:#fff}
.notice-row .wn-text{flex:1;min-width:0}
@media(max-width:760px){
.wn-top{flex-direction:column;gap:0}
.wn-top-img{width:100%}
.wn-top-body{padding:14px 16px 16px}
.notice-row .wn-badge{margin-top:0}
}
/* セミナーの講師行（#10・card_author を講師欄として共用） */
.scard .speaker{font-size:.875rem;color:var(--ink);display:flex;gap:8px;align-items:baseline}
.scard .speaker-l{flex:none;font-size:.75rem;font-weight:700;color:var(--ink-soft);border:1px solid var(--line);border-radius:3px;padding:0 6px;line-height:1.6}
/* 講師・補足行をタイトル直下に寄せる（2026-09-28 白井指摘「講師名が下付きになる」）。
★ 元の `.scard h3{flex:1}` はカードの高さを揃えるためタイトルを伸ばしており、
その下の講師行・補足行がカード下端へ押し下げられていた。
タイトルは伸ばさず、「詳細を見る」リンクだけを margin-top:auto で下端に寄せる
（カード高さの揃い・ボタン位置の揃いは維持される）。 */
.scard h3{flex:none}
.scard .link{margin-top:auto}
/* 右下の追従問い合わせ枠（#12）。「トップに戻る」（right:18 / bottom:18 / 44px）の上に積む。
★ 2026-09-28 白井指示: 「トップに戻る」（ブランド色のベタ塗り丸ボタン）と紛らわしいため、
**テーマ色に連動させずオレンジ固定**にし、文言は 2 行・中央揃えにした（2 行目 = float_cta_sub）。
★ 同日、ベタ塗りから **白背景＋オレンジの線・文字**に戻した（白井の好み）。ホバー時だけベタ塗り。
塗り方（線 / ベタ）と形（角丸 / 丸）の両方で「トップに戻る」と区別できる。
色は白井指定の **#e65c39**・形は元のピル型（border-radius:999px）。
⚠ #e65c39 は白地に対して約 3.5:1 で、WCAG AA（通常文字 4.5:1）には届かない（白井指定の色をそのまま採用）。
基準を満たしたい場合は文字色だけ #c2410c（5.2:1）等の濃いオレンジにする。
★ 縦の間隔も 74 → 86px に広げ、上に戻るボタンとの距離を取った。 */
.float-cta{position:fixed;right:18px;bottom:86px;z-index:50;display:flex;align-items:center;gap:10px;
background:#fff;color:#e65c39;border:2px solid #e65c39;border-radius:999px;
padding:10px 18px;font-weight:700;line-height:1.35;text-decoration:none;
box-shadow:0 4px 14px rgba(0,0,0,.22)}
.float-cta svg{width:22px;height:22px;flex:none}
.float-cta-t{display:flex;flex-direction:column;align-items:center;text-align:center}
.float-cta-l{font-size:15px}
.float-cta-s{font-size:13.5px;font-weight:500;opacity:.95}
.float-cta:hover{background:#e65c39;color:#fff;text-decoration:none}
.float-cta:focus-visible{outline:3px solid #e65c39;outline-offset:3px}
@media(max-width:760px){.float-cta{padding:8px 16px;gap:8px}.float-cta-l{font-size:14px}.float-cta-s{font-size:13px}}
/* ===== TOP CTA バナー（2026-09-28・brief topicsite_top_cta_v1 / design_spec §14-11）=====
新着情報の直上・横幅いっぱい。白井提供「案G_紺ベース」準拠。
★ 地色 --brand-dark・右カラムは黒 18% 重ね → テーマ 3 色に自動追従。
★ 赤ラベル・ボタンの #c2410c（白文字 5.2:1・AA）と下線の #EF9F27 は意味色（テーマ非連動）。
★ フォントは body 継承のゴシック。明朝は当てない（広告的要素として本文と区別する）。
★ 文字は rem（文字サイズ切替 zeiken_fs に追従）。 */
.top-cta-area{background:#fff;padding-bottom:36px}
.top-cta{display:flex;align-items:stretch;border-radius:8px;overflow:hidden;background:var(--brand-dark);color:#fff;text-decoration:none;position:relative;min-height:200px}
.top-cta:hover{text-decoration:none;filter:brightness(1.06);color:#fff}
.top-cta:focus-visible{outline:3px solid #c2410c;outline-offset:3px}
.top-cta span{display:block}
.tc-q{position:absolute;right:32%;top:-30px;font-size:250px;line-height:1;font-weight:700;color:rgba(255,255,255,.07);pointer-events:none;user-select:none}
.tc-main{flex:1;min-width:0;padding:24px 28px 20px;display:flex!important;flex-direction:column;gap:8px;position:relative}
.tc-kicker{align-self:flex-start;background:#c2410c;color:#fff;font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:3px;line-height:1.5}
.tc-topic{font-size:.9375rem;font-weight:700;line-height:1.5}
.tc-topic b{font-size:1.125rem;font-weight:700}
.tc-title{font-size:1.625rem;font-weight:700;line-height:1.3}
.tc-benefit{font-size:.875rem;color:#E6F1FB;line-height:1.7}
.tc-benefit u,.tc-u{text-decoration:none;border-bottom:2px solid #EF9F27;padding-bottom:1px}
.tc-chips{display:flex!important;flex-wrap:wrap;gap:6px}
.top-cta .tc-chip{display:inline-block;font-size:.75rem;padding:3px 10px;border:1px solid rgba(255,255,255,.6);border-radius:999px;line-height:1.5}
.tc-ease .tc-chip{font-weight:700}
.tc-side{flex:none;width:220px;background:rgba(0,0,0,.18);display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px;text-align:center;position:relative}
.tc-dl-box{display:flex!important;flex-direction:column;align-items:center;gap:4px}
.tc-dl-l,.tc-dl-s{font-size:.75rem;font-weight:700}
.tc-dl-s{font-weight:400;margin-bottom:8px}
.tc-dl{font-size:1.875rem;font-weight:700;line-height:1.1}
.top-cta .tc-btn{display:inline-flex;align-items:center;gap:8px;background:#c2410c;color:#fff;border-radius:999px;padding:12px 24px;font-size:.9375rem;font-weight:700;white-space:nowrap}
.tc-btn svg{width:18px;height:18px;flex:none}
.top-cta:hover .tc-btn{background:#a8360a}
@media(max-width:760px){
.top-cta-area{padding-bottom:28px}
.top-cta{flex-direction:column;min-height:0}
.tc-q{font-size:200px;right:-20px;top:-40px}
.tc-main{padding:18px 18px 12px}
.tc-title{font-size:1.375rem}
.tc-ex{display:none!important}
.tc-side{width:100%;flex-direction:row;justify-content:space-between;padding:14px 18px;text-align:left}
.tc-dl-box{align-items:flex-start;gap:0}
.tc-dl{font-size:1.5rem}
.tc-dl-s{display:none!important}
.top-cta .tc-btn{padding:11px 20px;font-size:.875rem}
}
/* ===== 2026-10-02 本文リンクの視認性（青固定・下線・外部リンクアイコン）===== */
.art-body a:not([class]){
color:var(--link);
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:.18em;
text-decoration-color:rgba(11,87,208,.5);
}
.art-body a:not([class]):hover{
color:var(--link-hover);
text-decoration-thickness:2px;
text-decoration-color:currentColor;
}
.art-body a:not([class])[target="_blank"]:not(:has(img))::after{
content:"";
display:inline-block;
width:.85em;height:.85em;
margin-left:.22em;
vertical-align:-.08em;
background-color:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.art-body .video-pdf a::after{content:none}
/* ===== 2026-10-06 テキスト系セクションの新着型統一（§14-12） ===== */
/* 媒体フィードの先頭カード: 画像枠に媒体ロゴ（トラスト帯と同じ 4 点）。
★ 写真用の object-fit:cover を使わず contain。白地＋右罫で本文との境界を出す。
★ ロゴは枠の 67%×58% まで（2026-10-06 白井指示で当初の 84%×72% から 0.8 倍に縮小）。 */
.wn-top-logo{background:#fff;border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.wn-top-logo img{width:auto;height:auto;max-width:67%;max-height:58%;object-fit:contain}
@media(max-width:760px){.wn-top-logo{border-right:0;border-bottom:1px solid var(--line)}}
/* コラム・解説の行リスト: 公開/登録者限定バッジを .wn-badge と同寸に */
.notice-row .badge{flex:none;font-size:.75rem;font-weight:700;padding:1px 8px;border-radius:3px;line-height:1.7;white-space:nowrap;align-self:flex-start;margin-top:2px}
@media(max-width:760px){.notice-row .badge{margin-top:0}}
/* 媒体フィード行の外部リンクアイコン */
.notice-row .ext-ic{width:14px;height:14px;vertical-align:-2px;margin-left:4px}