/* NP-SHELL-CSS-START（全ページ共通シェル。横展開時はこのブロックを丸ごと移植） */
:root{
  /* NewsPicks実測: 墨#222 / 補助=墨70% / 罫線=墨12% / 青#146AF5 / 白ヘッダー */
  --paper:#FFFFFF;
  --ink:#222222;
  --ink-soft:rgba(34,34,34,.7);
  --deep:#222222;
  --blue:#146AF5;
  --hot:#CE1F2A;
  --tabgold:#9C7A2C;
  --rule:rgba(34,34,34,.12);
  --chip:rgba(34,34,34,.05);
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --sans:'Noto Sans JP', "Hiragino Kaku Gothic ProN", sans-serif;
  --neon:var(--blue);
  --card:var(--paper);
  --serif:var(--sans);
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--blue);color:#fff}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.75;font-feature-settings:"palt"}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
/* 幅の考え方（NewsPicks式）：
   ・中身は最大1440pxで中央寄せ → 超ワイド画面では両側に自然な余白
   ・両側の余白は固定40px（環境差で消えないよう固定値。スマホは18px）
   ・960px未満（iPad縦・スマホ）は1列に自動組み替え */
.wrap{max-width:1440px;margin:0 auto;padding:0 40px}
@media(max-width:640px){.wrap{padding:0 18px}}

/* ---- データ帯（最小限：3つだけ） ---- */
.databar{border-bottom:1px solid var(--rule);font-size:12.5px;color:var(--ink-soft)}
.databar .wrap{display:flex;align-items:center;gap:18px;padding-top:7px;padding-bottom:7px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.databar .wrap::-webkit-scrollbar{display:none}
.databar b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;margin-left:5px}
.databar .d{margin-left:auto;flex-shrink:0}

/* ---- ヘッダー（NewsPicks式：白地1行＝ロゴ＋主要リンク＋検索＋青ピル、上に固定） ---- */
.stky{position:sticky;top:0;z-index:60;background:var(--paper)}
header{background:var(--paper);border-bottom:1px solid var(--rule)}
header .wrap{display:flex;align-items:center;gap:26px;padding-top:13px;padding-bottom:13px}
.brand{flex-shrink:0;font-family:var(--mono);font-weight:700;font-size:26px;letter-spacing:.04em;line-height:1.25;color:var(--ink)}
.brand small{display:block;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.18em;color:var(--ink-soft);margin-top:3px}
.brand .bang{color:var(--tabgold)}
.search{position:relative;margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:8px 13px;min-width:250px;color:var(--ink-soft);font-size:13.5px}
.search:focus-within{border-color:var(--neon);outline:2px solid var(--neon);outline-offset:1px}
.search-fallback{display:flex;flex-shrink:0;color:var(--ink-soft)}
.search-fallback:hover{color:var(--neon)}
.search svg{opacity:.55}
.search-input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;line-height:1.5}
.search-input::placeholder{color:var(--ink-soft);opacity:1}
.search-panel{position:absolute;top:calc(100% + 7px);right:0;z-index:80;width:min(430px,calc(100vw - 36px));background:var(--card);border:1px solid var(--rule);box-shadow:0 12px 30px var(--rule);padding:10px 0;color:var(--ink)}
.search-panel[hidden]{display:none}
.search-heading{padding:2px 13px 7px;font-size:11px;font-weight:700;color:var(--ink-soft)}
.search-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 13px 4px}
.search-chip{border:1px solid var(--rule);border-radius:999px;background:var(--card);color:var(--ink);padding:5px 10px;font:inherit;font-size:12.5px;cursor:pointer}
.search-chip:hover,.search-chip:focus-visible{border-color:var(--neon);outline:none}
.search-result{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 13px;border-top:1px solid var(--rule)}
.search-result:first-of-type{border-top:0}
.search-result:hover,.search-result.is-active{background:var(--card);outline:2px solid var(--neon);outline-offset:-2px}
.search-result-title{font-weight:700;line-height:1.45}
.search-result-category{flex-shrink:0;font-size:11px;color:var(--ink-soft)}
.search-empty{padding:5px 13px 9px;font-size:13px}
.search-guides{display:flex;gap:12px;padding:0 13px 4px;font-size:12.5px;color:var(--neon)}
.search-guides a{text-decoration:underline;text-underline-offset:3px}
header .cta{flex-shrink:0;background:var(--blue);color:#fff;font-size:13.5px;font-weight:700;padding:10px 22px;border-radius:999px}
header .cta:hover{opacity:.88}
@media(max-width:900px){
  header .wrap{flex-wrap:wrap;gap:10px 18px}
  .search{order:3;flex-basis:100%;min-width:0;margin-left:0}
  .search-panel{left:0;right:auto;width:100%}
  header .cta{margin-left:auto}
}
/* ---- カテゴリタブ（新聞の欄インデックス：下線型・現在地は砂金色 2026-08-06） ---- */
nav{background:var(--paper);padding:8px 0 0;border-bottom:1px solid var(--rule)}
nav .wrap{display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
nav .wrap::-webkit-scrollbar{display:none}
nav a{flex-shrink:0;color:var(--ink-soft);font-size:14px;font-weight:500;padding:8px 12px;white-space:nowrap;border-bottom:2.5px solid transparent}
nav a:hover{color:var(--ink)}
nav a.on{color:var(--ink);border-bottom-color:var(--tabgold);font-weight:700}
.navdiv{flex-shrink:0;width:1px;height:15px;align-self:center;background:rgba(34,34,34,.25);margin:0 5px}

/* ---- フッター ---- */
footer{border-top:1px solid var(--rule);padding:20px 0 52px;font-size:12.5px;color:var(--ink-soft)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
footer a:hover{color:var(--blue)}
.l-en{display:none}
html[data-lang="en"] .l-ja{display:none}
html[data-lang="en"] .l-en{display:revert}
.langsw{display:inline-flex;border:1px solid var(--rule);margin-top:4px}
.langsw button{font-family:var(--sans);font-size:12px;padding:2px 10px;background:var(--card);color:var(--ink-soft);border:none;cursor:pointer;line-height:1.8}
.langsw button.on{background:var(--ink);color:#fff}
/* NP-SHELL-CSS-END */