@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700;900&display=swap');
:root { --ink:#151817; --paper:#f2f0e8; --orange:#ff5a36; --line:#b9b9b0; --soft:#deddd5; --white:#fbfaf5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans","Noto Sans JP",sans-serif; line-height:1.75; }
img { max-width:100%; }
a { color:inherit; }
.preview-bar { min-height:30px; padding:5px max(24px,calc((100vw - 1240px)/2)); display:flex; justify-content:space-between; gap:20px; background:var(--orange); color:#151817; font-size:10px; font-weight:800; letter-spacing:.16em; }
.site-header,main,footer { width:min(1240px,calc(100% - 48px)); margin-inline:auto; }
.site-header { height:78px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--ink); }
.brand { font-size:24px; font-weight:900; letter-spacing:-.04em; text-decoration:none; }
.brand span { color:var(--orange); }
nav { display:flex; gap:34px; }
nav a { font-size:11px; font-weight:700; letter-spacing:.14em; text-decoration:none; }
.hero-grid { min-height:300px; display:flex; align-items:flex-end; padding:34px 0 30px; border-bottom:1px solid var(--ink); }
.eyebrow,.section-index { margin:0 0 16px; font-size:11px; font-weight:700; letter-spacing:.16em; }
.hero-copy h1 { max-width:780px; margin:0; font-size:clamp(46px,5.4vw,76px); line-height:1; letter-spacing:-.06em; font-weight:900; }
.hero-copy h1 em { color:var(--orange); font-style:normal; }
.hero-lead { max-width:650px; margin:18px 0 0; font-size:15px; line-height:1.7; }
.latest-section { padding:44px 0 70px; }
.section-heading { display:grid; grid-template-columns:1fr 2fr; align-items:end; margin-bottom:30px; }
.section-heading h2 { margin:0; font-size:clamp(38px,4.7vw,68px); line-height:1.08; letter-spacing:-.055em; }
.articles-list { border-top:1px solid var(--ink); }
.article-row { min-height:240px; display:grid; grid-template-columns:50px 230px minmax(0,1fr) 100px; gap:30px; padding:34px 0; border-bottom:1px solid var(--ink); transition:background-color .2s; }
.article-row:hover { background-color:var(--white); }
.article-number { padding-top:7px; color:var(--orange); font-size:12px; font-weight:700; }
.article-thumb { align-self:start; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--soft); }
.article-thumb img { width:100%; height:100%; display:block; object-fit:cover; }
.article-thumb-empty { display:grid; place-items:center; background:var(--ink); color:var(--orange); font-weight:900; font-size:36px; }
.article-body { min-width:0; }
.meta { display:flex; align-items:center; gap:14px; margin:0 0 16px; color:#626762; font-size:11px; letter-spacing:.09em; text-transform:uppercase; }
.meta span,.meta > a { padding:3px 9px; background:var(--ink); color:var(--paper); text-decoration:none; }
.article-row h3 { max-width:760px; margin:0 0 14px; font-size:clamp(25px,3vw,40px); line-height:1.3; letter-spacing:-.035em; }
.article-row h3 a { text-decoration:none; }
.article-row p { max-width:720px; margin:0; color:#4d534f; }
.tag-list { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; color:#6d716d; font-size:11px; }
.tag-list a,.article-rail a { color:inherit; text-decoration:none; }
.tag-list a:hover,.article-rail a:hover { color:var(--orange); }
.read-link { align-self:center; font-size:11px; font-weight:700; letter-spacing:.12em; text-decoration:none; }
.read-link span { color:var(--orange); font-size:20px; }
.category-nav { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 28px; }
.category-nav > span { margin-right:6px; font-size:11px; font-weight:800; letter-spacing:.12em; }
.category-nav a { padding:6px 12px; border:1px solid var(--ink); font-size:12px; font-weight:700; text-decoration:none; }
.category-nav a:hover { background:var(--ink); color:var(--paper); }
.category-nav small { margin-left:5px; color:var(--orange); }
.category-nav .archive-all { border-color:var(--orange); color:var(--orange); }
.category-nav .archive-all:hover { background:var(--orange); color:var(--ink); }
.archive-grid { display:grid; gap:24px; border-top:1px solid var(--ink); }
.archive-year-block { display:grid; grid-template-columns:180px 1fr; gap:30px; padding:30px 0; border-bottom:1px solid var(--ink); }
.archive-year-block h2 { margin:0; font-size:clamp(36px,5vw,64px); line-height:1; letter-spacing:-.05em; }
.archive-year-block h2 a { text-decoration:none; }
.archive-year-block h2 small { display:block; margin-top:10px; color:#626762; font-size:11px; letter-spacing:.1em; }
.archive-month-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-content:start; }
.archive-month-list a { display:flex; justify-content:space-between; gap:14px; padding:13px 15px; border:1px solid var(--ink); font-size:13px; font-weight:700; text-decoration:none; }
.archive-month-list a:hover { background:var(--ink); color:var(--paper); }
.archive-month-list small { color:var(--orange); }
.pagination { display:flex; justify-content:space-between; align-items:center; padding:30px 0 0; font-size:12px; font-weight:800; letter-spacing:.12em; }
.pagination a { text-decoration:none; }
.category-page { padding:42px 0 80px; }
.category-header { padding-bottom:34px; }
.category-header .back-link { margin-bottom:42px; }
.category-header h1 { margin:0; font-size:clamp(42px,6vw,76px); line-height:1; letter-spacing:-.055em; }
.category-header > p:last-child { margin:18px 0 0; color:#626762; }
.article-page { max-width:1060px; margin:0 auto; padding:38px 0 84px; }
.back-link { display:inline-block; margin-bottom:40px; font-size:11px; font-weight:700; letter-spacing:.15em; text-decoration:none; }
.article-hero { padding-bottom:40px; border-bottom:1px solid var(--ink); }
.article-hero h1 { max-width:980px; margin:14px 0 20px; font-size:clamp(42px,5.4vw,70px); line-height:1.12; letter-spacing:-.055em; }
.article-description { max-width:720px; margin:0; font-size:17px; color:#4d534f; }
.article-status { margin-top:20px; font-size:12px; }
.article-status span { margin-right:10px; padding:5px 9px; background:var(--orange); font-weight:800; letter-spacing:.1em; }
.article-keyvisual { margin:0; padding:20px 0 0; }
.article-keyvisual img { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
.article-keyvisual figcaption,.story-figure figcaption { margin-top:10px; color:#676c67; font-size:10px; line-height:1.6; }
.article-layout { display:grid; grid-template-columns:180px minmax(0,680px); gap:60px; padding:54px 0; }
.article-rail { display:flex; flex-direction:column; align-items:flex-start; gap:7px; font-size:11px; color:#656a65; }
.article-rail p { color:var(--ink); font-weight:800; letter-spacing:.12em; }
.prose { font-family:"Noto Sans JP",sans-serif; font-size:17px; line-height:2.05; }
.prose h2 { margin:2.3em 0 .7em; font-size:32px; line-height:1.4; letter-spacing:-.03em; }
.prose p { margin:0 0 1.6em; }
.story-figure { margin:42px 0; }
.story-figure img { width:100%; display:block; background:var(--soft); }
.story-figure-wide { margin-left:-90px; margin-right:-90px; }
.sources { margin-left:250px; padding:50px 0; border-top:5px solid var(--ink); }
.sources h2 { margin:0 0 24px; font-size:30px; }
.sources ol { padding-left:22px; overflow-wrap:anywhere; }
.sources a { text-underline-offset:4px; }
.article-share { margin-left:250px; padding:34px 0 60px; border-top:1px solid var(--ink); }
.share-links { display:flex; flex-wrap:wrap; gap:10px; }
.share-links a,.share-links button { min-height:44px; padding:11px 16px; border:1px solid var(--ink); background:transparent; color:var(--ink); font:700 11px/1.5 "DM Sans","Noto Sans JP",sans-serif; letter-spacing:.1em; text-decoration:none; cursor:pointer; transition:background-color .2s,color .2s; }
.share-links a:hover,.share-links button:hover { background:var(--ink); color:var(--paper); }
.copy-status { min-height:1.75em; margin:8px 0 0; color:#555b56; font-size:12px; }
footer { min-height:260px; display:grid; grid-template-columns:1fr 1fr; align-content:center; gap:20px; border-top:1px solid var(--ink); }
.footer-brand { font-size:34px; }
footer p { margin:0; color:#555b56; font-size:12px; }
.footer-note { grid-column:2; color:var(--orange); font-weight:700; }
@media (max-width:800px) {
  .preview-bar { flex-wrap:wrap; padding-inline:16px; gap:2px 16px; }
  .site-header,main,footer { width:min(100% - 30px,1240px); }
  .site-header { height:66px; gap:14px; }
  .site-header nav { flex-shrink:0; gap:16px; }
  .hero-grid { min-height:auto; display:block; padding:30px 0 26px; }
  .hero-copy h1 { font-size:clamp(42px,12vw,60px); }
  .hero-lead { margin-top:16px; font-size:14px; }
  .section-heading { grid-template-columns:1fr; gap:24px; }
  .latest-section { padding:38px 0 70px; }
  .category-nav { margin-bottom:22px; }
  .category-nav > span { width:100%; }
  .archive-year-block { grid-template-columns:1fr; gap:20px; }
  .archive-month-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-row { grid-template-columns:34px 1fr; gap:12px; }
  .article-thumb { grid-column:2; width:100%; }
  .article-body { grid-column:2; overflow-wrap:anywhere; }
  .read-link { grid-column:2; }
  .article-page { padding-top:26px; }
  .back-link { margin-bottom:30px; }
  .article-hero { padding-bottom:30px; }
  .article-hero h1 { margin:12px 0 16px; font-size:clamp(38px,11vw,56px); }
  .article-layout { grid-template-columns:1fr; gap:24px; padding:38px 0; }
  .article-rail { flex-direction:row; flex-wrap:wrap; }
  .article-rail p { width:100%; }
  .sources { margin-left:0; }
  .article-share { margin-left:0; padding-bottom:50px; }
  .share-links a,.share-links button { flex:1 1 auto; text-align:center; }
  .story-figure-wide { margin-inline:0; }
  footer { grid-template-columns:1fr; padding:60px 0; }
  .footer-note { grid-column:1; }
}
@media (max-width:420px) {
  .site-header,main,footer { width:calc(100% - 24px); }
  .brand { font-size:20px; }
  .site-header nav .nav-secondary { display:none; }
  .hero-copy h1 { font-size:clamp(36px,12vw,50px); }
  .section-heading h2 { font-size:36px; }
  .article-row { grid-template-columns:26px minmax(0,1fr); padding:26px 0; }
  .article-row h3 { font-size:25px; overflow-wrap:anywhere; }
  .meta { flex-wrap:wrap; gap:8px 10px; }
  .archive-month-list { grid-template-columns:1fr; }
  .article-hero h1 { font-size:36px; overflow-wrap:anywhere; }
  .prose { font-size:16px; }
  .prose h2 { font-size:27px; overflow-wrap:anywhere; }
  .sources { padding:38px 0; }
}