@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); }
.step h3 { font-size:17.5px; font-weight:900; line-height:var(--lh-tight); }
.step p { font-size:14px; line-height:var(--lh-body); color:var(--ink2); }
.step p b { color:var(--c-mth); font-weight:900; }

/* ---- source stickers ---- */
.stick { display:flex; flex-wrap:wrap; gap:var(--s3); }
.sbadge { display:flex; align-items:center; gap:var(--s3); min-height:58px; padding:0 24px 0 14px;
  border:3px solid var(--line); border-radius:999px; background:var(--bg2); box-shadow:4px 4px 0 var(--shadow); }
.sbadge:nth-child(odd){ transform:rotate(-1deg); } .sbadge:nth-child(even){ transform:rotate(1deg); }
.sbadge i { flex:none; font-style:normal; font-size:12px; font-weight:900; letter-spacing:.06em; line-height:1;
  color:#fff; padding:7px 14px; border-radius:999px; border:2.5px solid var(--line); }
.sbadge span { font-size:13.5px; font-weight:700; line-height:var(--lh-ui); color:var(--ink2); }
.i-p{background:var(--c-mth);} .i-s{background:var(--c-zkn);} .i-m{background:var(--c-why);}
.i-u{background:var(--bg3); color:var(--ink2)!important;}

/* ---- ledger（図鑑一覧テーブル） ---- */
.ledger { border:3px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:6px 6px 0 var(--shadow); background:var(--bg2); }
.ledger-scroll { overflow-x:auto; }
.ledger table { width:100%; font-size:14px; line-height:var(--lh-ui); }
.ledger thead { background:var(--c-zkn); }
.ledger thead th { color:#fff; font-size:11.5px; font-weight:900; letter-spacing:.08em; text-align:left; height:52px; padding:0 18px; white-space:nowrap; }
.ledger tbody td { height:62px; padding:14px 18px; border-top:2px solid var(--bg3); vertical-align:middle; color:var(--ink2); }
.ledger tbody tr:nth-child(even){ background:var(--bg3); }
.no { font-family:var(--mono); font-size:12px; color:var(--ink3); font-variant-numeric:tabular-nums; }
.nm { font-weight:900; color:var(--ink); white-space:nowrap; }
.nm a { text-decoration:none; border-bottom:3px solid var(--yellow); }
.nm a:hover { color:var(--c-zkn); }
.rate { font-weight:900; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink); }
.pend { display:inline-flex; align-items:center; height:28px; padding:0 13px; font-size:11.5px; font-weight:900;
  line-height:1; color:#fff; background:var(--c-why); border:2px solid var(--line); border-radius:999px; white-space:nowrap; }
.nd { color:var(--ink3); font-weight:700; }
.more { display:flex; justify-content:space-between; align-items:center; gap:var(--s4); flex-wrap:wrap; }
.more p { font-size:13.5px; font-weight:700; color:var(--ink3); }

/* ---- posts（記事カード） ---- */
.posts { display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:var(--gap-card); }
.post { padding:var(--s5); border-radius:20px; display:flex; flex-direction:column; gap:var(--s3); text-decoration:none; color:inherit; }
.post:nth-child(odd){ transform:rotate(.6deg); } .post:nth-child(even){ transform:rotate(-.6deg); }
.post .kind { display:inline-flex; align-items:center; align-self:flex-start; height:28px; padding:0 14px;
  font-size:11.5px; font-weight:900; letter-spacing:.06em; line-height:1; color:#fff;
  background:var(--c-rep); border:2.5px solid var(--line); border-radius:999px; }
.post h3 { font-size:18px; font-weight:900; line-height:var(--lh-tight); }
.post p { font-size:14px; line-height:var(--lh-body); color:var(--ink2); }
.post .soon { margin-top:auto; padding-top:var(--s3); font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.08em; color:var(--ink3); }

/* ---- empty state ---- */
.rep { padding:clamp(40px,5.5vw,64px) var(--s6); border-radius:22px; text-align:center; background:var(--bg3);
  border:4px dashed var(--line); display:flex; flex-direction:column; gap:var(--s4); align-items:center; }
.rep .pill { display:inline-flex; align-items:center; height:var(--h-eb); padding:0 22px; font-size:13px;
  font-weight:900; line-height:1; background:var(--c-rep); color:#fff; border:3px solid var(--line);
  border-radius:999px; box-shadow:4px 4px 0 var(--shadow); }
.rep b { font-size:clamp(24px,3.8vw,36px); font-weight:900; letter-spacing:-.025em; line-height:var(--lh-tight); }
.rep p { font-size:15px; line-height:var(--lh-body); color:var(--ink2); max-width:52ch; }

/* ---- rules ---- */
.rules { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:0 var(--s8); }
.rules > div { padding:var(--s5) 0; border-top:3px solid var(--line); display:flex; flex-direction:column; gap:var(--s3); }
.rules h3 { font-size:17.5px; font-weight:900; line-height:var(--lh-tight); display:flex; align-items:center; gap:var(--s3); }
.rules h3 s { flex:none; text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:999px; background:var(--ink); color:var(--bg);
  font-family:var(--mono); font-size:12px; font-weight:700; }
.rules p { font-size:14.5px; line-height:var(--lh-body); color:var(--ink2); }

/* ---- disclaimer（ここだけ明朝・装飾なし） ---- */
.disc { border:3px solid var(--line); border-radius:4px; background:var(--bg2); padding:var(--s6);
  box-shadow:6px 6px 0 var(--shadow); display:flex; flex-direction:column; gap:var(--s3); }
.disc h3 { font-family:var(--serif); font-size:18px; font-weight:600; letter-spacing:.04em; line-height:var(--lh-tight); }
.disc p { font-family:var(--serif); font-size:14.5px; line-height:2.05; color:var(--ink2); max-width:70ch; letter-spacing:.01em; }

/* =========================================================
   図鑑 詳細ページ
   ========================================================= */
.zk-head { padding:var(--s8) 0 var(--s6); display:flex; flex-direction:column; gap:var(--s4); }
.zk-crumb { display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.12em; color:var(--ink3); }
.zk-crumb a { text-decoration:none; color:var(--c-zkn); }
.zk-head h1 { font-size:clamp(34px,6.4vw,64px); font-weight:900; line-height:var(--lh-tight); letter-spacing:-.03em;
  text-shadow:4px 4px 0 var(--yellow); }
.zk-aka { font-family:var(--mono); font-size:12px; color:var(--ink3); letter-spacing:.04em; }
.zk-tags { display:flex; flex-wrap:wrap; gap:var(--s2); }
.zk-tag { display:inline-flex; align-items:center; height:32px; padding:0 14px; font-size:12px; font-weight:800;
  line-height:1; text-decoration:none; color:var(--ink); background:var(--bg2);
  border:2.5px solid var(--line); border-radius:999px; box-shadow:2px 2px 0 var(--shadow); }
.zk-tag.on { background:var(--c-zkn); color:#fff; }
.zk-sum { font-size:16px; line-height:var(--lh-body); color:var(--ink2); max-width:62ch; }

.zk-cols { display:grid; grid-template-columns:minmax(0,1fr) 312px; gap:var(--sp-block); align-items:start; padding-bottom:var(--s9); }
@media (max-width:980px){ .zk-cols{ grid-template-columns:minmax(0,1fr); } }

/* 出典バッジ凡例 */
.legend { display:flex; flex-wrap:wrap; gap:var(--s3); padding-bottom:var(--s6); }
.legend span { display:inline-flex; align-items:center; gap:var(--s2); font-size:12.5px; font-weight:700; color:var(--ink2); }

/* 出典バッジ */
.src { display:inline-flex; align-items:center; height:22px; padding:0 9px; margin-left:8px;
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; line-height:1;
  border:2px solid var(--line); border-radius:999px; color:#fff; vertical-align:2px; }
.src-primary   { background:var(--c-mth); }
.src-secondary { background:var(--c-zkn); }
.src-measured  { background:var(--c-why); }
.src-unknown   { background:var(--bg3); color:var(--ink2); }

/* 諸元テーブル */
.zk-block { display:flex; flex-direction:column; gap:var(--s4); margin-bottom:var(--s8); }
.zk-block > h2 { display:inline-flex; align-items:center; align-self:flex-start; height:var(--h-eb); padding:0 18px;
  font-size:13px; font-weight:900; letter-spacing:.08em; line-height:1; color:#fff; background:var(--c-zkn);
  border:3px solid var(--line); border-radius:999px; box-shadow:4px 4px 0 var(--shadow); }
.zk-tbl { border:3px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:5px 5px 0 var(--shadow); background:var(--bg2); }
.zk-tbl table { width:100%; font-size:14px; line-height:var(--lh-ui); }
.zk-tbl th { width:34%; text-align:left; padding:15px 18px; font-weight:900; color:var(--ink);
  background:var(--bg3); border-top:2px solid var(--line); white-space:nowrap; }
.zk-tbl td { padding:15px 18px; border-top:2px solid var(--bg3); color:var(--ink2); }
.zk-tbl tr:first-child th, .zk-tbl tr:first-child td { border-top:none; }
.zk-prose p { font-size:15px; line-height:var(--lh-body); color:var(--ink2); max-width:64ch; margin-bottom:var(--s4); }
.zk-prose p b { color:var(--ink); font-weight:900; }

/* 確認できなかったこと */
.gaps { border:4px dashed var(--c-why); border-radius:20px; background:var(--bg2); padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4); }
.gaps h2 { display:inline-flex; align-items:center; align-self:flex-start; height:var(--h-eb); padding:0 18px;
  font-size:13px; font-weight:900; letter-spacing:.08em; line-height:1; color:#fff; background:var(--c-why);
  border:3px solid var(--line); border-radius:999px; }
.gaps ul { display:flex; flex-direction:column; gap:var(--s3); }
.gaps li { position:relative; padding-left:26px; font-size:14.5px; line-height:var(--lh-body); color:var(--ink); }
.gaps li::before { content:"?"; position:absolute; left:0; top:0; width:19px; height:19px; margin-top:5px;
  display:grid; place-items:center; border-radius:999px; background:var(--c-why); color:#fff;
  font-family:var(--mono); font-size:11px; font-weight:700; line-height:1; }

/* 右レール */
.zk-rail { position:sticky; top:var(--s5); display:flex; flex-direction:column; gap:var(--s5); }
@media (max-width:980px){ .zk-rail{ position:static; } }
.zk-card { padding:var(--s5); border-radius:18px; display:flex; flex-direction:column; gap:var(--s4); }
.zk-card > 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-zkn); border:2.5px solid var(--line); border-radius:999px; }
.zk-card dl { display:grid; grid-template-columns:1fr auto; gap:var(--s3) var(--s4); font-size:13.5px; line-height:var(--lh-ui); }
.zk-card dt { color:var(--ink3); font-weight:700; }
.zk-card dd { text-align:right; font-weight:900; font-variant-numeric:tabular-nums; }
.zk-card dd.off { color:var(--ink3); }
.zk-cta { border:3px solid var(--line); border-radius:18px; background:var(--c-zkn); color:#fff;
  box-shadow:6px 6px 0 var(--shadow); padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3); }
.zk-cta b { font-size:17px; font-weight:900; }
.zk-cta p { font-size:13px; line-height:1.8; color:rgba(255,255,255,.92); }
.zk-cta .btn { width:100%; background:var(--bg2); color:var(--ink); box-shadow:4px 4px 0 rgba(0,0,0,.35); }
.zk-cta small { font-size:11px; line-height:1.7; color:rgba(255,255,255,.8); }
.zk-stamp { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3);
  border:3px solid var(--line); border-radius:14px; background:var(--bg2); padding:var(--s4) var(--s5); }
.zk-stamp span { font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--ink3); }
.zk-stamp b { font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums; }

/* 同一運営の他ブランド（§5.2） */
.sib { border:3px solid var(--c-rep); border-radius:18px; background:var(--bg2); padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3); }
.sib h2 { font-size:15px; font-weight:900; color:var(--c-rep); }
.sib p { font-size:13.5px; line-height:var(--lh-body); color:var(--ink2); }
.sib ul { display:flex; flex-wrap:wrap; gap:var(--s2); }
.sib a { display:inline-flex; align-items:center; height:34px; padding:0 15px; font-size:13px; font-weight:900;
  line-height:1; text-decoration:none; color:#fff; background:var(--c-rep);
  border:2.5px solid var(--line); border-radius:999px; box-shadow:3px 3px 0 var(--shadow); }

/* =========================================================
   記事
   ========================================================= */
.art-head { padding:var(--s8) 0 var(--s6); display:flex; flex-direction:column; gap:var(--s4); }
.art-head h1 { font-size:clamp(30px,5.4vw,52px); font-weight:900; line-height:var(--lh-tight); letter-spacing:-.025em; text-wrap:balance; }
.art-meta { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center;
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--ink3); }
.art-body { max-width:70ch; padding-bottom:var(--s9); }
.art-body p { font-size:16px; line-height:2; color:var(--ink2); margin-bottom:var(--s5); }
.art-body h2 { font-size:26px; font-weight:900; line-height:var(--lh-tight); margin:var(--s8) 0 var(--s4);
  padding-bottom:var(--s3); border-bottom:3px solid var(--line); }
.art-body h3 { font-size:20px; font-weight:900; line-height:var(--lh-tight); margin:var(--s6) 0 var(--s3); }
.art-body ul, .art-body ol { margin:0 0 var(--s5) 1.4em; }
.art-body li { list-style:disc; font-size:16px; line-height:1.95; color:var(--ink2); margin-bottom:var(--s2); }
.art-body a { color:var(--c-mth); font-weight:700; }

/* =========================================================
   footer
   ========================================================= */
.site-foot { background:var(--bg3); margin-top:var(--sp-section); position:relative; }
.site-foot::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; }
.foot-main { display:grid; grid-template-columns:minmax(0,1.35fr) repeat(3, minmax(0,1fr));
  gap:var(--s8) var(--s7); padding:calc(var(--s9) - var(--s3)) 0 var(--s9); }
@media (max-width:880px){ .foot-main{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s7) var(--s6); } }
@media (max-width:520px){ .foot-main{ grid-template-columns:minmax(0,1fr); } }
.fbrand { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s4); }
.fbrand .fl { font-size:26px; font-weight:900; line-height:1; letter-spacing:-.02em; text-shadow:3px 3px 0 var(--yellow); text-decoration:none; }
.fbrand .fl em { font-style:normal; color:var(--c-why); }
.fbrand p { font-size:13.5px; line-height:1.85; color:var(--ink2); max-width:34ch; }
.fstamp { display:inline-flex; align-items:center; gap:var(--s2); height:34px; padding:0 16px;
  font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.06em; line-height:1; color:var(--ink);
  background:var(--bg2); border:2.5px solid var(--line); border-radius:999px; box-shadow:3px 3px 0 var(--shadow); }
.fcol { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s4); }
.fcol h3 { display:inline-flex; align-items:center; height:30px; padding:0 15px;
  font-size:12.5px; font-weight:900; letter-spacing:.08em; line-height:1; color:#fff;
  border:2.5px solid var(--line); border-radius:999px; box-shadow:3px 3px 0 var(--shadow); }
.fcol.c-1 h3 { background:var(--c-zkn); }
.fcol.c-2 h3 { background:var(--c-rep); }
.fcol.c-3 h3 { background:var(--ink); color:var(--bg); }
.fcol ul { display:flex; flex-direction:column; gap:var(--s3); }
.fcol a { font-size:13.5px; font-weight:800; line-height:1.5; text-decoration:none; color:var(--ink2); border-bottom:3px solid transparent; }
.fcol a:hover { color:var(--ink); border-bottom-color:var(--yellow); }
.foot-bar { border-top:3px solid var(--line); padding:var(--s5) 0 var(--s6);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); align-items:baseline; justify-content:space-between; }
.foot-bar p { font-size:12.5px; line-height:1.8; color:var(--ink3); max-width:76ch; }
.foot-bar .cp { font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink3); line-height:1; }

@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }

/* =========================================================
   お問い合わせフォーム（Contact Form 7）
   ========================================================= */
.oh-form { display:flex; flex-direction:column; gap:var(--s5); max-width:62ch; margin-bottom:var(--s8); }
.oh-form p { margin:0; }
.oh-f-row label { display:block; font-size:14.5px; font-weight:900; color:var(--ink); }
/* CF7 はコントロールを span.wpcf7-form-control-wrap で包む。
   これをブロックにして、ラベル文言＋バッジは同じ行のまま入力欄だけ下に落とす。 */
.oh-f-row label > .wpcf7-form-control-wrap,
.oh-f-row label > input, .oh-f-row label > select, .oh-f-row label > textarea {
  display:block; margin-top:var(--s2); }
.oh-f-row .req, .oh-f-row .opt { display:inline-flex; align-items:center; height:22px; padding:0 9px;
  margin-left:8px; font-size:10.5px; font-weight:900; letter-spacing:.06em; line-height:1;
  border:2px solid var(--line); border-radius:999px; vertical-align:2px; }
.oh-f-row .req { background:var(--c-why); color:#fff; }
.oh-f-row .opt { background:var(--bg3); color:var(--ink2); }

.oh-form input[type="text"], .oh-form input[type="email"], .oh-form select, .oh-form textarea {
  width:100%; font-family:inherit; font-size:15px; font-weight:500; line-height:1.7; color:var(--ink);
  background:var(--bg2); border:3px solid var(--line); border-radius:14px;
  padding:14px 16px; box-shadow:4px 4px 0 var(--shadow); }
.oh-form input[type="text"], .oh-form input[type="email"], .oh-form select { height:58px; padding:0 16px; }
.oh-form select { appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 22px) 26px, calc(100% - 15px) 26px;
  background-size:7px 7px, 7px 7px; background-repeat:no-repeat; padding-right:46px; }
.oh-form textarea { min-height:190px; resize:vertical; }
.oh-form ::placeholder { color:var(--ink3); font-weight:500; }
.oh-form input:focus, .oh-form select:focus, .oh-form textarea:focus {
  outline:none; border-color:var(--c-mth); box-shadow:4px 4px 0 var(--c-mth); }

.oh-f-consent { display:flex; align-items:center; gap:var(--s3); font-size:14px; font-weight:700; color:var(--ink2);
  background:var(--bg3); border:3px solid var(--line); border-radius:14px; padding:var(--s4) var(--s5); }
.oh-f-consent a { color:var(--c-mth); font-weight:900; }
.oh-f-consent input[type="checkbox"] { width:22px; height:22px; accent-color:var(--c-why); flex:none; cursor:pointer; }
.oh-f-consent .wpcf7-list-item { margin:0; }

.oh-f-submit input[type="submit"] { display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--h-btn); padding:0 44px; font-family:inherit; font-size:16px; font-weight:900; letter-spacing:.04em;
  color:#fff; background:var(--c-why); border:3px solid var(--line); border-radius:999px;
  box-shadow:6px 6px 0 var(--shadow); cursor:pointer; transition:transform .1s ease, box-shadow .1s ease; }
.oh-f-submit input[type="submit"]:hover { transform:translate(3px,3px); box-shadow:3px 3px 0 var(--shadow); }
.oh-f-submit input[type="submit"]:disabled { opacity:.5; cursor:not-allowed; }

/* CF7 のメッセージ表示 */
.wpcf7-not-valid-tip { font-size:13px; font-weight:900; color:var(--c-why); margin-top:var(--s2); }
.wpcf7-response-output { font-size:14.5px; font-weight:700; line-height:1.8; color:var(--ink);
  background:var(--bg3); border:3px solid var(--line) !important; border-radius:14px;
  padding:var(--s4) var(--s5) !important; margin:var(--s5) 0 0 !important; max-width:62ch; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color:var(--c-why) !important; }
.wpcf7 form.sent .wpcf7-response-output { border-color:var(--c-src) !important; }
.wpcf7-spinner { margin-left:var(--s3); }