/* ========================================================================= ミリタリーNOW — article layer v21 (2026-08-16) このファイルは全ルールが .article-view 配下にスコープされている。 v20 まで記事HTMLのにそのクラスが付いておらず、17記事すべてで 1行も適用されていなかった。v21 で body へクラスを付与し、あわせて文字サイズ・行間・コントラストを本文可読性の基準へ揃えている。 ========================================================================= */ body.article-view{background:#05080e} .article-view .article-shell{ min-height:100vh; padding-top:145px;padding-bottom:105px; background:linear-gradient(180deg,#05080e 0,#0b1f35 440px,#e7edf3 440px,#e7edf3 100%); } .article-view .article{ position:relative; max-width:920px;margin:0 auto;padding:52px 68px 76px; border-top:7px solid #2f7fc4; background:#f9fbfd; box-shadow:0 26px 75px rgba(0,0,0,.30); } .article-view .article::before{ content:"MILITARY NOW / FIELD REPORT"; position:absolute;right:30px;top:22px; color:rgb(92,115,133);font-size:13px;font-weight:800;letter-spacing:.18em; } .article-view .article::after{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:linear-gradient(90deg,#195d98,#66b5ee,#dcefff)} /* --- 見出しと本文 ------------------------------------------------------ */ .article-view .article h1{margin-top:20px;font-size:clamp(27px,3.4vw,41px);line-height:1.5;letter-spacing:-.01em;font-weight:800} .article-view .article h1::after{content:"";display:block;width:56px;height:4px;margin-top:16px;border-radius:2px;background:linear-gradient(90deg,#195d98,#66b5ee)} .article-view .article .meta{padding-bottom:18px;border-bottom:1px solid #c9d5e0;color:#43566b;font-size:14px} .article-view .article .lead{padding:22px 0 8px;font-size:19px;font-weight:600;line-height:2.05;color:#1c2c3c} .article-view .article h2{margin-top:58px;padding:4px 0 4px 18px;border-left:6px solid #2f7fc4;font-size:clamp(21px,2.4vw,26px);line-height:1.62} .article-view .article h3{margin-top:36px;font-size:19px;line-height:1.7;color:#1b2c3d} .article-view .article p{color:#1e2f3f;font-size:17px;line-height:2.0} .article-view .article ul,.article-view .article ol{color:#1e2f3f;font-size:17px;line-height:1.95} /* --- 編集部の視点(独自解釈。事実報道と区別する) ------------------------- */ .article-view .article .editor-take{margin:34px 0;padding:20px 22px;background:linear-gradient(180deg,#eef5fc,#f7fafd);border:1px solid #cfe0ef;border-left:5px solid #195d98;border-radius:12px} .article-view .article .editor-take .editor-take__label{display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:999px;background:#195d98;color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em} .article-view .article .editor-take p{margin:8px 0 0;font-size:16px;line-height:1.9;color:#243646} /* --- 本文中間の実写(CC/PD)画像 ----------------------------------------- */ .article-view .article .inline-figure{margin:30px 0;background:#0c1725;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.14)} .article-view .article .inline-figure img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover} .article-view .article .inline-figure figcaption{padding:10px 16px;font-size:13px;line-height:1.6;color:#5b6b7c;background:#f4f7fa} .article-view .article .inline-figure figcaption a{color:#195d98} /* --- ヒーロー画像は本文幅より外へ出して視線を掴む --------------------- */ .article-view .article-hero{ width:calc(100% + 136px);max-width:none; margin:32px 0 10px -68px; aspect-ratio:16/8.8;object-fit:cover; box-shadow:0 10px 32px rgba(0,0,0,.16); filter:saturate(.86) contrast(1.02); background:#0c1725; /* 読み込み前・失敗時の空白を防ぐ */ } .article-view .article .credit{margin:0 0 30px;color:#4f6274;font-size:13px;line-height:1.75} /* --- 出典・注記 -------------------------------------------------------- */ .article-view .article .sources{margin:56px -10px 0;padding:26px 28px;border:1px solid #c9d5e0;background:#eaf0f5} .article-view .article .sources h2{margin:0 0 14px;padding:0;border:0;color:rgb(29,49,73);font-size:20px} .article-view .article .sources li{margin:10px 0;color:#3b5064;font-size:14px;line-height:1.85} .article-view .article .sources a{color:#1a5c93;text-decoration:underline;text-decoration-color:#8eafd0;text-underline-offset:3px} .article-view .article .notice{margin-top:30px;border-left:4px solid #2f7fc4;background:#e0e9f2;color:#33475a;font-size:14px;line-height:1.85} .article-view .footer{margin-top:0} .article-reading-progress{position:fixed;left:0;top:0;z-index:1000;width:0;height:3px;background:#2f7fc4;box-shadow:0 0 12px rgba(47,127,196,.5)} .article-view .header.scrolled{background:rgba(5,10,18,.97)} /* --- 関連記事：記事間の内部リンクを増やし回遊と評価を上げる ----------- */ .article-related{margin-top:56px;padding-top:10px;border-top:1px solid #c9d5e0} .article-related h2{margin:0 0 18px;padding:0;border:0;font-size:21px;color:#1d3149} .article-related__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px} .article-related__card{display:block;padding:20px;min-height:146px;background:#eef3f8;color:#16232f;border-top:4px solid #2f7fc4;transition:.2s} .article-related__card:hover{background:#e0eaf3;transform:translateY(-3px)} .article-related__cat{display:block;color:#3d6285;font-size:13px;font-weight:700;letter-spacing:.02em} .article-related__title{display:block;margin-top:10px;font-size:16px;line-height:1.65;font-weight:700} .article-related__links{display:flex;gap:10px 20px;flex-wrap:wrap;margin-top:24px;font-size:14px} .article-related__links a{display:inline-flex;align-items:center;min-height:44px;color:#1a5c93;text-decoration:underline;text-decoration-color:#8eafd0;text-underline-offset:3px} @media(max-width:760px){ .article-view .article-shell{padding:100px 12px 58px;background:linear-gradient(180deg,#05080e 0,#0b1f35 260px,#e7edf3 260px)} .article-view .article{padding:32px 20px 46px} .article-view .article::before{display:none} .article-view .article h1{font-size:25px;line-height:1.55} .article-view .article-hero{width:calc(100% + 40px);margin-left:-20px;aspect-ratio:16/10} .article-view .article .lead{font-size:17px;line-height:1.95} .article-view .article h2{margin-top:46px;font-size:21px} .article-view .article p,.article-view .article ul,.article-view .article ol{font-size:16px;line-height:1.95} .article-view .article .sources{margin-inline:0;padding:18px} }