/* =========================================================================
   ミリタリーNOW — design system v21 (legibility + SEO rebuild / 2026-08-16)

   v16 / v20 で積み上がっていた上書きレイヤーを1本へ統合した。クラス名と
   レイアウト構造は一切変えていないので、既存HTMLはそのまま描画できる。

   v21 の変更方針
   1. 文字サイズの下限を 13px に引き上げた（旧: 8px / 11px が多数）
   2. 日本語見出しの負トラッキング(-.045em)を廃止し、字面の潰れを解消した
   3. 本文を 17px / line-height 1.95 に上げ、長文の可読性を優先した
   4. タップ領域を最低 44px 確保した
   5. 配色は既存のダーク×ブルーを維持したまま、コントラストを WCAG AA へ
   ========================================================================= */

:root{
  /* --- surface --- */
  --night:#05080e;
  --night-2:#080e18;
  --field:#0c1725;
  --field-2:#132238;
  --navy:#0b2745;

  /* --- accent --- */
  --blue:#2f7fc4;
  --blue-deep:#195d98;
  --blue-bright:#7cc2f5;   /* v21: 66b5ee から微増。ダーク面で 7:1 を確保 */
  --ice:#d3e6f7;           /* v21: c7dff2 から微増 */

  /* --- light surface --- */
  --paper:#f4f7fa;
  --paper-2:#e7edf3;
  --ink:#111c29;           /* v21: 0f1824 → わずかに明度を上げ、紙面で目に刺さらない黒に */
  --white:#f8fbfe;

  /* --- text on dark --- */
  --muted:#a9bacd;         /* v21: 9baabd → AA(4.5:1)を小サイズでも満たす */
  --muted-2:#c2d1e0;

  --line:rgba(142,180,214,.25);
  --line-dark:rgba(15,37,61,.18);
  --max:1360px;
  --shadow:0 25px 70px rgba(0,0,0,.28);
  --s1:8px;--s2:12px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:72px;--s8:96px;

  /* --- typography scale (v21) ---------------------------------------
     日本語は欧文より小サイズでの判読性が落ちる。最小 13px を厳守する。 */
  --fs-micro:13px;   /* ラベル・クレジット。これ以下は使わない */
  --fs-small:14px;
  --fs-base:15px;
  --fs-body:17px;    /* 記事本文 */
  --fs-lead:19px;

  --font-ja:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic Medium","Yu Gothic","Meiryo",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--night);
  color:var(--white);
  font-family:var(--font-ja);
  font-size:var(--fs-base);
  line-height:1.8;
  letter-spacing:.02em;   /* v21: .01em → 和文の字間をわずかに開き視認性を上げる */
  font-feature-settings:"palt" 1;
}
.brand small,.nav a,.eyebrow,.hero__rail::before,.rail b,.scroll-cue,.ticker strong,.ticker__track,.section__head>a,.story span,.card span,.article::before{
  font-family:var(--font-ja);
}
.brand,h1,h2,h3{font-family:var(--font-ja);font-weight:700}
.hero__lead,.hero__deck{font-family:var(--font-ja)}
h1,h2,h3,.story h3,.card h3,.rail span,.article h1,.article h2{
  overflow-wrap:anywhere;
  line-break:strict;
  word-break:normal;
  letter-spacing:-.005em;  /* v21: 見出しの負トラッキングをほぼ廃止 */
}
a{color:inherit;text-decoration:none}
.img-fallback{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--navy),var(--field));
  color:rgba(211,230,247,.55);font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;text-align:center;
}
.img-fallback::before{content:"MILITARY NOW"}
.article-hero.img-fallback::before{content:"NO IMAGE AVAILABLE"}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--blue-bright);
  outline-offset:3px;
  border-radius:2px;
}
.section a:focus-visible,.article a:focus-visible{outline-color:var(--blue-deep)}
img{display:block;max-width:100%}
.progress{position:fixed;top:0;left:0;z-index:1000;width:0;height:3px;background:linear-gradient(90deg,var(--blue-deep),var(--blue-bright))}

/* 読み上げ専用テキスト。h1 を画像に差し替えている箇所で本文を残すために使う */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* --- skip link：キーボード利用者がヘッダーを飛ばして本文へ入れる ------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  padding:14px 20px;background:var(--blue-deep);color:#fff;
  font-size:var(--fs-small);font-weight:700;
}
.skip-link:focus{left:12px;top:12px}

/* =========================== header ===================================== */
.header{
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  border-bottom:1px solid transparent;
  background:linear-gradient(180deg,rgba(3,7,13,.92),rgba(3,9,17,.28),transparent);
  transition:.3s;
}
.header.scrolled{border-bottom-color:var(--line);background:rgba(5,10,18,.95);backdrop-filter:blur(14px)}
.header__inner{max-width:var(--max);height:86px;margin:auto;padding:0 28px;display:flex;align-items:center;gap:32px}
.brand span{color:var(--white)}
.brand small{margin-left:14px;color:var(--ice);font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em}
.nav{margin-left:auto;display:flex;align-items:center;gap:20px}
.nav a{
  position:relative;
  display:inline-flex;align-items:center;
  min-height:44px;padding:24px 2px;    /* v21: タップ領域 44px */
  color:#e4eef7;
  font-size:var(--fs-small);           /* v21: 11px → 14px */
  font-weight:700;letter-spacing:.02em;
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:18px;height:2px;background:var(--blue-bright);transition:.22s}
.nav a:hover{color:#fff}.nav a:hover::after{right:0}
.menu{display:none;margin-left:auto;min-width:46px;min-height:46px;padding:8px 12px;border:1px solid var(--line);background:var(--field);color:#fff;font-size:20px;font-weight:900}

/* =========================== hero ======================================= */
.hero{position:relative;height:min(900px,100vh);min-height:680px;overflow:hidden;background:var(--night-2)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:3;height:2px;background:var(--blue-deep);opacity:.75}
.hero__video,.hero__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__video{z-index:1}.hero__fallback{z-index:1;background-image:url('../images/hero-f35b.jpg');background-size:cover;background-position:center 48%}
.hero.video-failed .hero__video{display:none}
.hero__shade{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(3,8,15,.95) 0%,rgba(4,15,28,.70) 40%,rgba(5,23,42,.18) 72%,rgba(2,8,15,.50) 100%),linear-gradient(0deg,rgba(3,8,15,.88),transparent 50%)}
.hero__content{position:relative;z-index:4;max-width:var(--max);height:100%;margin:auto;padding:136px 54px 86px;display:flex;align-items:center;justify-content:space-between;gap:70px}
.hero__copy{max-width:760px;border-left:1px solid rgba(135,190,235,.46);padding-left:28px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--ice);font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em}
.eyebrow::before{content:"";width:34px;height:4px;background:linear-gradient(90deg,var(--blue-bright),rgba(124,194,245,.18))}
.eyebrow.dark{color:#1f5177}   /* v21: 24577f → 明るい紙面で 4.5:1 を確保 */
.hero__lead{margin:22px 0 5px;color:#e0ecf6;font-size:var(--fs-lead);font-weight:700}
.hero h1{margin:0;max-width:790px;font-size:clamp(40px,5vw,72px);line-height:1.3;letter-spacing:-.01em;text-shadow:0 4px 18px rgba(0,0,0,.45)}
.hero__deck{max-width:570px;margin:25px 0 31px;color:#dbe7f1;font-size:var(--fs-body);line-height:1.9}
.cta{
  display:inline-flex;align-items:center;justify-content:space-between;gap:44px;
  min-width:210px;min-height:52px;padding:14px 20px;
  border:1px solid rgba(135,190,235,.68);background:rgba(6,20,35,.55);color:#fff;
  font-size:var(--fs-small);font-weight:800;letter-spacing:.06em;transition:.24s;
}
.cta:hover{gap:56px;background:var(--blue);border-color:var(--blue-bright);color:#fff}
.hero__status{margin-top:32px;display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:#cfdce8;font-size:var(--fs-micro);letter-spacing:.03em}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--blue-bright)}
#motionToggle{min-height:44px;margin-left:7px;padding:0 8px;border:0;background:transparent;color:var(--ice);font:inherit;font-size:var(--fs-micro);letter-spacing:.1em;cursor:pointer;text-decoration:underline}
.hero__rail{width:385px;border:1px solid rgba(139,190,230,.28);background:rgba(5,14,25,.78);backdrop-filter:blur(12px);box-shadow:var(--shadow)}
.hero__rail::before{content:"LATEST REPORTS";display:block;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(47,127,196,.20);color:var(--ice);font-size:var(--fs-micro);font-weight:800;letter-spacing:.16em}
.rail{min-height:108px;padding:19px 21px;display:grid;grid-template-columns:52px 1fr;align-items:center;border-bottom:1px solid var(--line);transition:.22s}
.rail:last-child{border:0}.rail:hover{background:rgba(124,194,245,.12);transform:translateX(-7px)}
.rail b{color:var(--blue-bright);font-size:30px;font-weight:800;letter-spacing:.03em}
.rail span{font-size:var(--fs-base);font-weight:700;line-height:1.65}
.scroll-cue{position:absolute;left:50%;bottom:28px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:7px;color:#cbd9e6;font-size:var(--fs-micro);letter-spacing:.16em;transform:translateX(-50%)}
.scroll-cue i{width:1px;height:40px;background:linear-gradient(var(--blue-bright),transparent)}

/* =========================== ticker ===================================== */
.ticker{min-height:54px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line);background:#07111d}
.ticker strong{align-self:stretch;display:flex;align-items:center;padding:0 22px;background:var(--blue-deep);color:#fff;font-size:var(--fs-small);font-weight:800;white-space:nowrap;z-index:2}
.ticker__track{display:flex;gap:100px;min-width:max-content;padding-left:30px;color:#e0eaf3;font-size:var(--fs-small);animation:ticker 60s linear infinite}
.ticker__track span{white-space:nowrap}
@keyframes ticker{to{transform:translateX(-50%)}}

/* =========================== sections =================================== */
.section{padding:var(--s8) max(28px,calc((100vw - var(--max))/2));background:var(--paper);color:var(--ink)}
.section__head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:36px}
.section__head h1,.section__head h2{margin:9px 0 0;line-height:1.35;letter-spacing:-.01em}
.section__head h2{font-size:clamp(27px,3vw,36px)}
.section__head>a{display:inline-flex;align-items:center;min-height:44px;color:#1f5c8b;font-size:var(--fs-small);font-weight:800;letter-spacing:.02em;text-decoration:underline;text-decoration-color:rgba(31,92,139,.4);text-underline-offset:4px}
.section__head>a:hover{color:var(--blue-deep)}

.story-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:16px}
.story{position:relative;min-height:410px;overflow:hidden;background:var(--field)}
.story::before{content:"";position:absolute;inset:0;background-image:var(--bg);background-size:cover;background-position:center;filter:saturate(.8) contrast(1.04);transition:transform .75s cubic-bezier(.2,.7,.2,1),filter .4s}
.story::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,10,19,.97),rgba(4,16,29,.55) 46%,rgba(6,24,42,.10) 78%);border:1px solid rgba(15,37,61,.18)}
.story:hover::before{transform:scale(1.05);filter:saturate(1) contrast(1.02)}
.story>div{position:absolute;z-index:2;left:25px;right:25px;bottom:24px;color:#fff}
.story span,.card span{display:inline-block;padding:6px 10px;background:var(--blue);color:#fff;font-size:var(--fs-micro);font-weight:700;letter-spacing:.02em}
.story h3{margin:12px 0 7px;font-size:23px;line-height:1.55}
.story--wide h3{font-size:30px}
.story p{margin:0;color:#dae4ee;font-size:var(--fs-small);line-height:1.8}
.marquee{overflow:hidden;padding:18px 0;border-block:1px solid var(--line);background:#0a1523;color:#8fb6d6}
.marquee div{min-width:max-content;white-space:nowrap;font-size:var(--fs-micro);font-weight:800;letter-spacing:.24em;animation:marquee 30s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}

.section--dark{position:relative;background:linear-gradient(180deg,#0a1523,#050a12);color:#fff}
.section--dark>*{position:relative}
.section--dark .section__head h1,.section--dark .section__head h2{color:#fff}
.section--dark .section__head>a{color:var(--ice);text-decoration-color:rgba(211,230,247,.4)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{border:1px solid var(--line);background:#0d1a29;box-shadow:0 14px 35px rgba(0,0,0,.20);transition:.3s}
.card:hover{border-color:rgba(124,194,245,.55);transform:translateY(-7px)}
.card--skeleton{height:340px;background:linear-gradient(100deg,#0d1a29 30%,#152437 45%,#0d1a29 60%);background-size:250% 100%;animation:card-skeleton-sheen 1.4s ease-in-out infinite}
@keyframes card-skeleton-sheen{0%{background-position:120% 0}100%{background-position:-20% 0}}
@media(prefers-reduced-motion:reduce){.card--skeleton{animation:none}}
.card__image{position:relative;height:250px;overflow:hidden;background-position:center;background-size:cover;filter:saturate(.82) contrast(1.03)}
.card__image:not([style*="background-image"]){background:linear-gradient(140deg,var(--navy),var(--field));display:grid;place-items:center;filter:none}
.card__image:not([style*="background-image"])::before{content:"MILITARY NOW";color:rgba(211,230,247,.5);font-size:var(--fs-micro);font-weight:700;letter-spacing:.18em}
.card__image::after{content:"";position:absolute;inset:0;border-bottom:4px solid var(--blue);background:linear-gradient(0deg,rgba(4,12,22,.46),transparent)}
.card__body{padding:var(--s4)}
.card h2,.card h3{margin:14px 0 11px;line-height:1.6}
.card h3{font-size:20px}
.card p{color:#c6d4e1;font-size:var(--fs-base);line-height:1.85}

.visual-band{
  min-height:620px;display:flex;align-items:center;color:#fff;
  background:
    linear-gradient(90deg,rgba(3,8,15,.95),rgba(5,24,43,.55)),
    radial-gradient(circle at 76% 28%,rgba(47,127,196,.18),transparent 62%),
    linear-gradient(160deg,rgba(13,26,41,.55),rgba(5,10,18,.75)),
    url('../images/hero-f35b.jpg');
  /* v21: Wikimedia からの直リンクと background-attachment:fixed を廃止した。
     外部ホストへの依存は LCP が読めず、fixed はモバイルで再描画が重い。
     ヒーローで既に読み込み済みのローカル画像を再利用するため追加転送はない。 */
  background-size:cover;
  background-position:center;
}
.visual-band__copy{max-width:610px;padding:30px 30px 30px 0;border-right:1px solid rgba(139,190,230,.30)}
.visual-band h2{margin:18px 0;font-size:clamp(34px,5vw,58px);line-height:1.25;letter-spacing:-.01em}
.visual-band p{max-width:520px;color:#dfe9f2;font-size:var(--fs-body);line-height:1.95}

/* =========================== footer ===================================== */
.footer{padding:62px max(28px,calc((100vw - var(--max))/2));display:flex;justify-content:space-between;gap:42px;border-top:3px solid var(--blue);background:#040912;color:#fff}
.footer p,.footer small{color:#adbdcc;font-size:var(--fs-small)}
.footer nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px}
.footer nav a{display:inline-flex;align-items:center;min-height:44px;color:#cfdae4;font-size:var(--fs-small)}
.footer nav a:hover{color:var(--blue-bright);text-decoration:underline;text-underline-offset:4px}

/* =========================== motion ===================================== */
.reveal{opacity:0;transform:translateY(25px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.delay-1{transition-delay:.11s}.delay-2{transition-delay:.22s}
.motion-off *{animation-play-state:paused!important;scroll-behavior:auto!important}
.motion-off .hero__video{display:none}
.motion-off .reveal{opacity:1;transform:none}

/* =========================== article base =============================== */
.article-shell{padding:132px max(22px,calc((100vw - 1160px)/2)) 94px;background:var(--paper);color:var(--ink)}
.article{max-width:820px}
.article h1{font-size:clamp(28px,3.4vw,42px);line-height:1.45;letter-spacing:-.01em}
.article .meta{margin:14px 0 30px;color:#43566b;font-size:var(--fs-small);letter-spacing:.02em}
.article .meta .byline{color:#33475a;font-weight:700}
.article .lead{font-size:var(--fs-lead);font-weight:600;line-height:2}
.article h2{margin-top:52px;padding-left:15px;border-left:5px solid var(--blue);font-size:clamp(22px,2.4vw,27px);line-height:1.6}
.article h3{margin-top:34px;font-size:19px;line-height:1.65}
.article p{font-size:var(--fs-body);line-height:1.95}
.article ul,.article ol{line-height:1.95;font-size:var(--fs-body)}
.article li{margin:6px 0}
.article .sources{margin-top:46px;padding-top:22px;border-top:1px solid #c9d4df}
.article .sources li{font-size:var(--fs-small);line-height:1.85}
.article .sources a{color:#1a5c93;text-decoration:underline;text-decoration-color:#9fb9d0;text-underline-offset:3px}
.article-hero{width:100%;aspect-ratio:16/9;margin:23px 0;object-fit:cover;filter:saturate(.86) contrast(1.02)}
.credit{color:#4f6274!important;font-size:var(--fs-micro)!important;line-height:1.75}
.notice{padding:16px 18px;border-left:4px solid var(--blue);background:#e2eaf2;color:#33475a;font-size:var(--fs-small);line-height:1.85}

/* --- breadcrumb（構造化データと対になる可視パンくず） ------------------ */
.breadcrumb{margin:0 0 14px;color:#4b5f74;font-size:var(--fs-micro);line-height:1.7}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.breadcrumb li{display:flex;align-items:center;gap:6px}
.breadcrumb li+li::before{content:"›";color:#8fa3b6}
.breadcrumb a{color:#1a5c93;text-decoration:underline;text-decoration-color:rgba(26,92,147,.35);text-underline-offset:3px}
.breadcrumb a:hover{text-decoration-color:#1a5c93}
.breadcrumb [aria-current="page"]{color:#4b5f74}

/* --- 目次：長文記事の離脱を抑え、検索結果のサイトリンクにも効く ------- */
.toc{margin:30px 0 6px;padding:20px 24px;border:1px solid #c9d5e0;background:#eef3f8}
.toc h2{margin:0 0 12px;padding:0;border:0;font-size:17px;letter-spacing:.04em}
.toc ol{margin:0;padding-left:1.3em}
.toc li{margin:7px 0;font-size:var(--fs-small);line-height:1.75}
.toc a{color:#1a5c93;text-decoration:underline;text-decoration-color:rgba(26,92,147,.3);text-underline-offset:3px}
.toc a:hover{text-decoration-color:#1a5c93}

/* --- 要点ボックス：結論を冒頭に出して滞在の質を上げる ----------------- */
.keypoints{margin:28px 0;padding:22px 26px;border-top:5px solid var(--blue);background:#e9f0f7}
.keypoints h2{margin:0 0 12px;padding:0;border:0;font-size:18px}
.keypoints ul{margin:0;padding-left:1.2em}
.keypoints li{margin:8px 0;font-size:var(--fs-base);line-height:1.85}

.article table{width:100%;margin:26px 0;border-collapse:collapse;font-size:var(--fs-small)}
.article th,.article td{padding:12px 14px;border:1px solid #c9d5e0;line-height:1.75;text-align:left}
.article th{background:#e4ecf3;color:#22384c;font-weight:700}

/* =========================== responsive ================================= */
@media(max-width:1120px){
  .nav{display:none;position:absolute;top:79px;left:15px;right:15px;max-height:calc(100vh - 100px);padding:16px 22px;overflow:auto;flex-direction:column;align-items:stretch;border:1px solid var(--line);background:#081321}
  .nav.open{display:flex}
  .nav a{min-height:48px;padding:10px 0;font-size:var(--fs-base)}
  .menu{display:block}
  .brand small{display:none}
  .hero__content{padding-inline:36px}
  .hero__rail{width:325px}
  .story-grid{grid-template-columns:1fr 1fr}.story--wide{grid-column:1/-1}
  .cards{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .header__inner{height:70px;padding:0 18px;gap:12px}
  .hero{min-height:820px}
  .hero__content{padding:110px 20px 65px;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:0}
  .hero__copy{max-width:none;padding-left:18px}
  .hero h1{font-size:clamp(30px,8.4vw,44px);line-height:1.34}
  .hero__lead{font-size:17px}
  .hero__deck{font-size:var(--fs-base);line-height:1.85}
  .hero__rail{position:static;width:auto;margin-top:24px;display:flex;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .hero__rail::before{display:none}
  .hero__rail .rail{min-width:76%;min-height:auto;scroll-snap-align:start;border-bottom:0;border-right:1px solid var(--line)}
  .hero__rail .rail:last-child{border-right:0}
  .section{padding:64px 18px}
  .section__head{align-items:flex-start;flex-direction:column;gap:10px}
  .section__head h2{font-size:26px}
  .story-grid,.cards{grid-template-columns:1fr}
  .story--wide{grid-column:auto}
  .story{min-height:290px}.story h3{font-size:20px}
  .story--wide{min-height:355px}.story--wide h3{font-size:24px}
  .visual-band{padding-block:84px}
  .visual-band h2{font-size:32px}
  .visual-band__copy{border:0;padding-right:0}
  .footer{flex-direction:column}
  .ticker strong{padding-inline:14px}
  .article-shell{padding-top:100px}
  .article h1{font-size:26px;line-height:1.5}
  .article p,.article ul,.article ol{font-size:16px}
  .toc,.keypoints{padding:18px}
  .article table{font-size:var(--fs-micro)}
  .article th,.article td{padding:9px 10px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.hero__video{display:none}.reveal{opacity:1;transform:none}}

/* =========================== masthead =================================== */
/* v20 で Dela Gothic One / M PLUS 1 Code は可読性優先で廃止済み。
   woff2 ファイルはロールバック用に残っているが読み込んでいない。
   v21 でも同方針を維持する（和文の本文用途に装飾書体は使わない）。 */
.brand,.hero h1,.section__head h1,.section__head h2,.story h3,.card h3,.visual-band h2,.article h1,.article h2{
  font-family:var(--font-ja);
  font-weight:700;
}
.hero .hero-logo-title{width:min(560px,86%);max-width:none;margin:16px 0 20px;line-height:0;text-shadow:none}
.hero-titlemark{width:100%;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.30))}

.brand{
  position:relative;width:clamp(230px,20vw,300px);height:58px;display:flex;align-items:center;flex:0 0 auto;
  background:none;
  font-size:0!important;letter-spacing:0!important;
}
.brand img{width:100%;height:100%;object-fit:contain;object-position:left center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(124,194,245,.45))}
.footer .brand{width:270px;height:54px}
@media(max-width:720px){.brand{width:200px;height:44px}.footer .brand{width:245px;height:50px}}

/* =========================================================================
   v21 フェーズ2: 収益モジュール（2026-08-16 追記）

   既存ルールは1行も書き換えていない。ここから下は新規コンポーネント
   （広告スロット枠 / YouTube facade / フッターRSS）専用の追記ブロック。
   ・font-size は設計トークン（--fs-micro 13px 以上）だけを使う
   ・タップ領域は最低 44px
   ・広告枠は min-height を先に予約して CLS を出さない
   ========================================================================= */

/* --- 2-1 広告スロット枠 ------------------------------------------------
   AdSense 有効化前でも「枠の高さ」を先に確保しておく。後からタグを入れて
   もレイアウトが動かない（CLS=0）ことが目的なので min-height は必須。
   1記事3枠（lead / mid / foot）のみ。追尾・全画面は作らない。 */
.ad-slot{
  display:flex;align-items:center;justify-content:center;
  min-height:280px;                 /* デスクトップ予約高。CLS防止の要 */
  margin:40px 0;
  border:1px dashed rgba(47,127,196,.42);
  border-radius:2px;
  background:rgba(47,127,196,.045);
  overflow:hidden;
}
.ad-slot::before{
  content:"広告";
  color:#5c7385;
  font-family:var(--font-ja);
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.24em;
}
/* 実タグ挿入後はプレースホルダの体裁を消す（枠高だけ残す） */
.ad-slot:not(:empty){border:0;background:none;display:block}
.ad-slot:not(:empty)::before{content:none}
.ad-slot .adsbygoogle{display:block;width:100%}

/* 記事内での余白調整。lead 直後だけは詰めて読み出しを止めない */
.article-view .article .ad-slot{margin-inline:0}
.article-view .article .lead + .ad-slot{margin-top:28px}

@media(max-width:760px){
  .ad-slot{min-height:250px;margin:32px 0} /* モバイル予約高 */
}

/* --- 2-2 YouTube facade -------------------------------------------------
   クリックされるまで iframe を作らない。サムネ1枚だけを読むので
   記事ページの初期表示コストがほぼ増えない。 */
.article-video{margin:44px 0;padding:0;border-top:1px solid #c9d5e0}
.article-video__frame{
  position:relative;
  display:block;width:100%;
  aspect-ratio:16/9;                /* 16:9固定。差し替え時も高さが動かない */
  margin-top:20px;padding:0;
  border:0;border-radius:2px;
  background:#05080e;
  overflow:hidden;cursor:pointer;
}
.article-video__frame img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.9) brightness(.86);
  transition:.25s;
}
.article-video__frame:hover img,
.article-video__frame:focus-visible img{filter:saturate(1) brightness(1)}
.article-video__frame:focus-visible{outline:3px solid var(--blue-bright);outline-offset:3px}
.article-video__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  width:82px;height:58px;min-width:44px;min-height:44px;
  border-radius:12px;
  background:rgba(11,39,69,.86);
  border:2px solid rgba(210,232,250,.9);
  color:#f8fbfe;font-size:22px;line-height:1;
  pointer-events:none;               /* クリックはボタン全体で受ける */
}
.article-video__frame:hover .article-video__play{background:var(--blue-deep)}
.article-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.article-video__caption{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px 18px;
  margin-top:14px;
}
.article-video__title{
  margin:0;
  color:#1d3149;
  font-family:var(--font-ja);
  font-size:16px;font-weight:700;line-height:1.65;
}
.article-video__channel{
  display:inline-flex;align-items:center;min-height:44px;
  color:#1a5c93;font-size:var(--fs-small);font-weight:700;
  text-decoration:underline;text-decoration-color:#8eafd0;text-underline-offset:3px;
}
.article-video__note{display:block;margin:6px 0 0;color:#4f6274;font-size:var(--fs-micro);line-height:1.75}

@media(max-width:760px){
  .article-video{margin:34px 0}
  .article-video__play{width:66px;height:48px;font-size:19px}
}

/* --- 2-3 フッターRSS ---------------------------------------------------- */
.footer nav a.footer__rss{color:var(--blue-bright);font-weight:700}
.footer nav a.footer__rss:hover{color:#e6f3ff}


/* =========================================================================
   v21 フェーズ3: ハブページ（2026-08-16 追記）

   既存ルールは1行も書き換えていない。ここから下は兵器システム別ハブ
   （hub-<slug>.html）と、そこへの導線専用の追記ブロック。
   ・font-size は設計トークン（--fs-micro 13px 以上）だけを使う
   ・リンク・タップ領域は最低 44px
   ・ハブ本体は category.html と同じ暗色面。カード（.card）は暗色面前提の
     既存コンポーネントなので、そのまま再利用できる
   ========================================================================= */

/* --- 3-1 ハブページ本体 ------------------------------------------------ */
.hub-view .hub{padding-top:140px;min-height:80vh}     /* 固定ヘッダー分を確保 */
.hub__title{margin:9px 0 0;font-size:clamp(28px,3.6vw,44px);line-height:1.35;letter-spacing:-.01em}
.hub__lead{max-width:760px;margin:0 0 var(--s6);color:var(--muted-2);font-size:var(--fs-body);line-height:1.95}
.hub__block{margin:0 0 var(--s7)}
.hub__block:last-child{margin-bottom:0}
.hub__heading{
  margin:0 0 var(--s4);
  padding-left:15px;
  border-left:5px solid var(--blue);
  color:#fff;
  font-size:clamp(21px,2.3vw,27px);
  line-height:1.6;
}

/* 暗色面のパンくず。既存 .breadcrumb は紙面用の配色なので色だけ上書きする */
.hub-view .breadcrumb{margin:0 0 var(--s4);color:var(--muted)}
.hub-view .breadcrumb a{color:var(--blue-bright);text-decoration-color:rgba(124,194,245,.45)}
.hub-view .breadcrumb a:hover{text-decoration-color:var(--blue-bright)}
.hub-view .breadcrumb li+li::before{color:#7b8ea1}
.hub-view .breadcrumb [aria-current="page"]{color:var(--muted-2)}

/* カードの更新日。カード内で唯一の微細テキストなので下限トークンで止める */
.card__updated{display:block;margin-top:12px;color:var(--muted);font-size:var(--fs-micro);line-height:1.7}

/* ハブ本文（2026-08-16 オーナー承認・執筆）。本文の情報源は
   content/article-manifest.json の hubs[].summary / glossary / sources だけ。
   ここは見た目の定義であって、事実はCSSでもテンプレでも作らない。 */
.hub-prose{max-width:820px}
.hub-prose p{margin:0 0 var(--s4);color:var(--muted-2);font-size:var(--fs-body);line-height:1.95}
.hub-prose p:last-child{margin-bottom:0}

/* 用語ミニ辞書。dt/dd の対を1枠にまとめ、狭幅では自然に縦積みになる */
.hub-glossary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;max-width:1080px}
.hub-glossary__item{
  padding:20px 22px;
  border:1px solid var(--line);
  border-left:5px solid var(--blue);
  background:rgba(47,127,196,.07);
}
.hub-glossary__term{margin:0 0 8px;color:#fff;font-size:var(--fs-lead);font-weight:800;line-height:1.6}
.hub-glossary__def{margin:0;color:var(--muted-2);font-size:var(--fs-base);line-height:1.9}

/* 出典。タップ領域は既存規約どおり最低44px */
.hub-sources{margin:0;padding-left:22px;max-width:900px}
.hub-sources li{margin:0;color:var(--muted);font-size:var(--fs-base);line-height:1.85}
.hub-sources a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--blue-bright);
  text-decoration:underline;text-decoration-color:rgba(124,194,245,.45);text-underline-offset:4px;
}
.hub-sources a:hover{text-decoration-color:var(--blue-bright)}

/* 暗色面へ置いた時の YouTube facade。紙面用の文字色だけを差し替える */
.hub-view .article-video{border-top-color:var(--line)}
.hub-view .article-video__title{color:#fff}
.hub-view .article-video__channel{color:var(--blue-bright);text-decoration-color:rgba(124,194,245,.45)}
.hub-view .article-video__note{color:var(--muted)}

/* --- 3-1b 記事からハブへ戻す導線 --------------------------------------- */
.hub-backlink{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;
  margin:48px 0 0;padding:18px 22px;
  border-left:5px solid var(--blue);
  background:#e9f0f7;
}
.hub-backlink__label{
  padding:6px 10px;
  background:var(--blue);color:#fff;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.02em;
}
.hub-backlink__link{
  display:inline-flex;align-items:center;min-height:44px;
  color:#1a5c93;font-size:var(--fs-base);font-weight:700;
  text-decoration:underline;text-decoration-color:#8eafd0;text-underline-offset:3px;
}
.hub-backlink__link:hover{color:var(--blue-deep);text-decoration-color:var(--blue-deep)}

/* --- 3-1c トップページのハブ一覧 --------------------------------------- */
.hub-index__lead{max-width:720px;margin:-18px 0 30px;color:#3d5266;font-size:var(--fs-base);line-height:1.9}
.hub-index__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hub-index__card{
  display:flex;flex-direction:column;gap:10px;
  min-height:150px;padding:26px 24px;
  border:1px solid #c9d5e0;border-top:4px solid var(--blue);
  background:var(--paper-2);color:var(--ink);
  transition:.2s;
}
.hub-index__card:hover{background:#dde7f1;transform:translateY(-4px)}
.hub-index__name{font-size:20px;font-weight:800;line-height:1.55}
.hub-index__desc{margin:0;color:#3d5266;font-size:var(--fs-small);line-height:1.85}
.hub-index__count{
  margin-top:auto;
  color:#1f5c8b;font-size:var(--fs-micro);font-weight:700;letter-spacing:.02em;
}

@media(max-width:1120px){
  .hub-index__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .hub-view .hub{padding-top:112px}
  .hub__block{margin-bottom:var(--s6)}
  .hub-glossary{grid-template-columns:1fr;gap:14px}
  .hub-glossary__item{padding:18px 18px}
  .hub-index__grid{grid-template-columns:1fr}
  .hub-backlink{margin-top:38px;padding:16px 18px}
}

/* --- v21 追補: <small> の下限 ---------------------------------------
   クラスの付かない <small> はブラウザ既定(親の0.83倍)で 11.67px になる。
   .brand small / .footer small のようにCSSで明示した箇所だけが下限を守り、
   記事本文中の素の <small> 27箇所が素通りしていた。要素側で保証する。 */
small{font-size:var(--fs-micro)}