@charset "UTF-8";
/* =========================================================
   オリパ白書 — main.css
   方向: 全面ポップ（2026-09-04 確定）
   余白は8pxスケール、高さはトークンで固定。個別に値を触らないこと。
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
table { border-collapse: collapse; }

:root {
  /* ---- ground ---- */
  --bg:#FFF6E2; --bg2:#FFFFFF; --bg3:#FFEBB8;
  --ink:#20170C; --ink2:#5A4830; --ink3:#8E7B5E;
  --line:#20170C; --shadow:#20170C;
  --dot:rgba(32,23,12,.07);

  /* ---- section accents ---- */
  --c-why:#E0393E;   /* 赤 なぜ測るのか */
  --c-mth:#1E7FA8;   /* 青 計測方法・定点観測 */
  --c-src:#2E9E6B;   /* 緑 出典 */
  --c-zkn:#E8791F;   /* 橙 図鑑 */
  --c-rep:#8250C4;   /* 紫 記事 */
  --yellow:#FFD43B;

  /* ---- type ---- */
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --mono:ui-monospace,"SF Mono",Menlo,"Roboto Mono",monospace;
  --lh-tight:1.26; --lh-body:1.9; --lh-ui:1.6;

  /* ---- spacing (8px base) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:44px; --s8:60px; --s9:80px;
  --sp-section:clamp(84px,10.5vw,148px);
  --sp-block:clamp(40px,5vw,60px);
  --sp-head:var(--s4);
  --gap-card:22px;

  /* ---- heights ---- */
  --h-btn:58px; --h-chip:38px; --h-eb:34px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#17110A; --bg2:#241B10; --bg3:#31250F;
    --ink:#FBF3E2; --ink2:#CBBB9E; --ink3:#95836A;
    --line:#FBF3E2; --shadow:#000000; --dot:rgba(251,243,226,.07);
    --c-why:#FF6F72; --c-mth:#5FB6D8; --c-src:#5CCB96; --c-zkn:#FFA155; --c-rep:#B48CE8;
  }
}
body {
  background-color: var(--bg); color: var(--ink);
  background-image: radial-gradient(var(--dot) 1.4px, transparent 1.4px);
  background-size: 14px 14px;
  font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; font-feature-settings: "palt" 1;
}
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
@media (max-width:600px){ .wrap { padding: 0 18px; } }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:var(--s4); top:var(--s4); z-index:99; background:var(--bg2); padding:var(--s3) var(--s5);
  border:3px solid var(--line); border-radius:999px; font-weight:900; }

/* ============ primitives ============ */
.pop { border:3px solid var(--line); box-shadow:6px 6px 0 var(--shadow); background:var(--bg2); }
.press { transition:transform .1s ease, box-shadow .1s ease; }
.press:hover { transform:translate(3px,3px); box-shadow:3px 3px 0 var(--shadow); }
.press:active { transform:translate(6px,6px); box-shadow:0 0 0 var(--shadow); }
a:focus-visible, button:focus-visible { outline:3px solid var(--c-mth); outline-offset:3px; }

.btn { display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--h-btn); padding:0 36px; text-decoration:none; color:var(--ink);
  font-size:15.5px; font-weight:900; letter-spacing:.02em; line-height:1;
  border:3px solid var(--line); border-radius:999px; box-shadow:6px 6px 0 var(--shadow); background:var(--bg2); }
.btn-red { background:var(--c-why); color:#fff; }
.btn-zkn { background:var(--c-zkn); color:#fff; }

.zigline { height:12px;
  background:
    linear-gradient(135deg, var(--line) 25%, transparent 25%) -12px 0/24px 12px repeat-x,
    linear-gradient(225deg, var(--line) 25%, transparent 25%) -12px 0/24px 12px repeat-x; }

/* ============ header ============ */
.nav { display:flex; align-items:center; justify-content:space-between; gap:var(--s4) var(--s5); flex-wrap:wrap; padding:var(--s5) 0; }
.logo { font-size:27px; font-weight:900; letter-spacing:-.02em; line-height:1; text-decoration:none;
  text-shadow:3px 3px 0 var(--yellow); }
.logo em { font-style:normal; color:var(--c-why); }
.nav .logo { color:var(--ink); background:none; border:none; box-shadow:none; padding:0; height:auto; border-radius:0; }
.nav ul { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.nav ul a { display:inline-flex; align-items:center; height:48px; padding:0 26px;
  font-size:15px; font-weight:900; letter-spacing:.04em; line-height:1; text-decoration:none; color:#fff;
  border:3px solid var(--line); border-radius:999px; box-shadow:4px 4px 0 var(--shadow); }
.nav ul a.n-zkn { background:var(--c-zkn); }
.nav ul a.n-col { background:var(--c-rep); }
.nav ul a.n-sub { height:var(--h-chip); padding:0 16px; font-size:12.5px; font-weight:800; letter-spacing:0;
  color:var(--ink); background:var(--bg2); border-width:2.5px; box-shadow:3px 3px 0 var(--shadow); }

.ticker { border-top:3px solid var(--line); border-bottom:3px solid var(--line); background:var(--yellow); overflow:hidden; }
.ticker div { display:flex; gap:var(--s7); white-space:nowrap; height:46px; align-items:center; animation:slide 30s linear infinite; }
.ticker span { font-size:13px; font-weight:900; letter-spacing:.06em; color:#20170C; line-height:1; }
@keyframes slide { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ============ hero（トップ） ============ */
.hero { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--s9) var(--sp-block);
  align-items:start; padding:clamp(56px,7.5vw,92px) 0 clamp(44px,5.5vw,68px); }
@media (max-width:960px){ .hero{ grid-template-columns:minmax(0,1fr); gap:var(--s9); } }
.hero-l { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s5); }
.flag { display:inline-flex; align-items:center; height:var(--h-eb); padding:0 22px;
  background:var(--c-why); color:#fff; font-size:13px; font-weight:900; letter-spacing:.06em; line-height:1;
  border:3px solid var(--line); border-radius:999px; box-shadow:4px 4px 0 var(--shadow); transform:rotate(-2deg); }
.hero h1 { font-size:clamp(40px,8vw,84px); font-weight:900; line-height:var(--lh-tight);
  letter-spacing:-.03em; text-wrap:balance; margin-top:var(--s2);
  text-shadow:5px 5px 0 var(--yellow), 8px 8px 0 var(--line); }
.hero h1 em { font-style:normal; color:var(--c-why); }
.hero h1 u { text-decoration:none; -webkit-text-stroke:2.5px var(--line); color:var(--bg2); }
.hero .lede { font-size:17px; line-height:var(--lh-body); color:var(--ink2); max-width:46ch; }
.hero .lede b { color:var(--ink); font-weight:900; background:linear-gradient(transparent 62%, var(--yellow) 62%); }
.acts { display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s2); }

.stack { position:relative; padding:14px 14px 0 0; }
.stack::before, .stack::after { content:""; position:absolute; inset:14px 14px 0 0;
  border:3px solid var(--line); border-radius:18px; background:var(--bg3); }
.stack::before { transform:rotate(4.5deg) translate(10px,-8px); }
.stack::after { transform:rotate(-3deg) translate(-6px,6px);
  background:linear-gradient(122deg,#8FE8DC 0%,#A8BEFF 32%,#FFAFD2 62%,#FFDE9B 100%); }
.hcard { position:relative; z-index:2; padding:var(--s5); border-radius:18px; display:flex; flex-direction:column; gap:var(--s4); }
.hcard h2 { display:inline-flex; align-items:center; align-self:flex-start; height:28px; padding:0 13px;
  font-size:12px; font-weight:900; letter-spacing:.08em; line-height:1; color:#fff;
  background:var(--c-why); border:2.5px solid var(--line); border-radius:999px; }
.hcard dl { display:grid; grid-template-columns:1fr auto; gap:var(--s3) var(--s4); font-size:13.5px; line-height:var(--lh-ui); }
.hcard dt { color:var(--ink3); font-weight:700; }
.hcard dd { text-align:right; font-weight:900; font-variant-numeric:tabular-nums; }
.hcard dd.off { color:var(--ink3); }

.counter { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:var(--gap-card); padding-bottom:var(--sp-section); }
.ct { min-height:128px; padding:var(--s5); border-radius:18px; display:flex; flex-direction:column; justify-content:center; gap:var(--s2); }
.ct:nth-child(1){ background:var(--c-why); } .ct:nth-child(2){ background:var(--c-mth); }
.ct:nth-child(3){ background:var(--c-src); } .ct:nth-child(4){ background:var(--bg3); }
.ct b { font-size:46px; font-weight:900; line-height:1; letter-spacing:-.04em; color:#fff; font-variant-numeric:tabular-nums; }
.ct b.sm { font-size:27px; }
.ct span { font-size:12.5px; font-weight:800; line-height:1; color:rgba(255,255,255,.85); }
.ct:nth-child(4) b { color:var(--ink); } .ct:nth-child(4) span { color:var(--ink3); }

/* ============ section frame ============ */
.sec { padding:var(--sp-section) 0; display:flex; flex-direction:column; gap:var(--sp-block); position:relative; }
.sec::before { content:""; position:absolute; top:0; left:0; right:0; height:12px;
  background:
    linear-gradient(135deg, var(--line) 25%, transparent 25%) -12px 0/24px 12px repeat-x,
    linear-gradient(225deg, var(--line) 25%, transparent 25%) -12px 0/24px 12px repeat-x; }
.shead { display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-head); }
.eb { display:inline-flex; align-items:center; height:var(--h-eb); padding:0 18px;
  font-size:12.5px; font-weight:900; letter-spacing:.1em; line-height:1; color:#fff;
  border:3px solid var(--line); border-radius:999px; box-shadow:4px 4px 0 var(--shadow); transform:rotate(-1.2deg); }
.sh { font-size:clamp(28px,4.8vw,48px); font-weight:900; line-height:var(--lh-tight); letter-spacing:-.025em; text-wrap:balance; }
.sh mark { background:linear-gradient(transparent 60%, var(--yellow) 60%); color:inherit; padding:0 4px; }
.intro { font-size:16px; line-height:var(--lh-body); color:var(--ink2); max-width:62ch; }
.intro b { color:var(--ink); font-weight:900; }
.sbody { display:flex; flex-direction:column; gap:var(--sp-block); }

.s-why .eb{ background:var(--c-why); } .s-why .sh em{ color:var(--c-why); font-style:normal; }
.s-mth .eb{ background:var(--c-mth); } .s-mth .sh em{ color:var(--c-mth); font-style:normal; }
.s-src .eb{ background:var(--c-src); } .s-src .sh em{ color:var(--c-src); font-style:normal; }
.s-zkn .eb{ background:var(--c-zkn); } .s-zkn .sh em{ color:var(--c-zkn); font-style:normal; }
.s-col .eb{ background:var(--c-rep); } .s-col .sh em{ color:var(--c-rep); font-style:normal; }
.s-abt .eb{ background:var(--ink); color:var(--bg); }

/* ---- why ---- */
.why { display:flex; flex-direction:column; gap:var(--s7); }
.whyrow { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:var(--s6); align-items:start; }
@media (max-width:720px){ .whyrow{ grid-template-columns:minmax(0,1fr); gap:var(--s3); } }
.whynum { font-size:96px; font-weight:900; line-height:.76; letter-spacing:-.06em; color:var(--yellow);
  -webkit-text-stroke:3px var(--line); font-variant-numeric:tabular-nums;
  text-shadow:6px 6px 0 var(--c-why); padding-right:10px; }
.whytx { display:flex; flex-direction:column; gap:var(--s3); }
.whytx h3 { font-size:22px; font-weight:900; letter-spacing:-.01em; line-height:var(--lh-tight); }
.whytx p { font-size:15px; line-height:var(--lh-body); color:var(--ink2); max-width:58ch; }

/* ---- steps ---- */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:var(--gap-card); }
.step { padding:var(--s5); border-radius:20px; display:flex; flex-direction:column; gap:var(--s3); }
.step:nth-child(odd){ transform:rotate(-.7deg); } .step:nth-child(even){ transform:rotate(.7deg); }
.stepno { flex:none; width:52px; height:52px; border-radius:999px; background:var(--c-mth); color:#fff;
  border:3px solid var(--line); display:grid; place-items:center; box-shadow:3px 3px 0 var(--shadow);
  font-size:22px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums; margin-bottom:var(--s2); }