/* ============================================================
   日本の賃金 2025 — 編集デザイン・システム
   和の余白 / 朱と藍 / 明朝とサンセリフ
   ============================================================ */

:root{
  /* ----- 色 ----- */
  --paper:        #F6F3EC;   /* 生成り（背景） */
  --paper-2:      #FBF9F4;   /* 白に近い面 */
  --paper-3:      #EFEBE1;   /* くすんだ面 */
  --ink:          #1C1B18;   /* 墨 */
  --ink-2:        #57544C;   /* 副文 */
  --ink-3:        #908C82;   /* 注記 */
  --line:         #DAD4C6;   /* 罫線 */
  --line-2:       #C7C0AE;
  --vermilion:    #C0392B;   /* 朱 */
  --vermilion-d:  #9E2A1E;
  --vermilion-l:  #E8C6BF;
  --indigo:       #234A6B;   /* 藍 */
  --indigo-l:     #C3D0DB;
  --gold:         #B08A3E;
  --shadow:       0 1px 2px rgba(28,27,24,.05), 0 12px 40px -16px rgba(28,27,24,.18);

  /* ----- 書体 ----- */
  --serif: "Shippori Mincho","Noto Serif JP",serif;
  --sans:  "Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
  --num:   "Archivo","Inter",system-ui,sans-serif;

  /* ----- 間隔 ----- */
  --col: 720px;
  --wide: 1160px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.85;
  letter-spacing:.01em;
  overflow-x:hidden;
}
body::before{ /* 紙の地紋（微細なノイズ） */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.num{ font-family:var(--num); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ===== 進捗バー ===== */
#progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--vermilion); z-index:300; transition:width .1s linear; }

/* ===== トップバー（ロゴ＋言語） ===== */
#topbar{ position:fixed; top:0; left:0; right:0; z-index:210; display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; transition:background .3s, box-shadow .3s, border-color .3s; border-bottom:1px solid transparent; }
#topbar.scrolled{ background:rgba(246,243,236,.82); backdrop-filter:saturate(120%) blur(10px); -webkit-backdrop-filter:saturate(120%) blur(10px); border-bottom-color:var(--line); }
#topbar .brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); }
#topbar .seal-mini{ font-family:var(--serif); font-weight:700; font-size:18px; line-height:1; color:#fff; background:var(--vermilion); width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:5px; box-shadow:0 2px 8px -2px rgba(192,57,43,.5); }
#topbar .brand-tx{ display:flex; flex-direction:column; line-height:1.15; }
#topbar .brand-tx b{ font-family:var(--serif); font-weight:600; font-size:16px; letter-spacing:.04em; }
#topbar .brand-tx small{ font-family:var(--num); font-size:9.5px; letter-spacing:.12em; color:var(--ink-3); text-transform:uppercase; }
#langsw{ display:flex; gap:2px; background:rgba(255,255,255,.5); border:1px solid var(--line); border-radius:999px; padding:3px; }
#langsw button{ border:none; background:transparent; font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--ink-3); padding:5px 13px; border-radius:999px; cursor:pointer; transition:all .2s; letter-spacing:.02em; }
#langsw button:hover{ color:var(--ink); }
#langsw button.on{ background:var(--ink); color:var(--paper-2); }

section{ scroll-margin-top:72px; }

/* ===== 縦書きサイドナビ ===== */
#sidenav{ position:fixed; top:50%; right:26px; transform:translateY(-50%); z-index:150; display:flex; flex-direction:column; gap:14px; }
#sidenav a{ display:flex; align-items:center; gap:10px; justify-content:flex-end; text-decoration:none; color:var(--ink-3); }
#sidenav .dot{ width:7px; height:7px; border-radius:50%; background:var(--line-2); transition:all .3s; flex:none; }
#sidenav .lbl{ font-size:11px; letter-spacing:.08em; opacity:0; transform:translateX(6px); transition:all .3s; white-space:nowrap; }
#sidenav a:hover .lbl{ opacity:1; transform:none; }
#sidenav a.active .dot{ background:var(--vermilion); transform:scale(1.5); }
#sidenav a.active .lbl{ opacity:1; transform:none; color:var(--ink); }

/* ===== レイアウト ===== */
.wrap{ width:100%; max-width:var(--col); margin:0 auto; padding:0 28px; }
.wrap-wide{ width:100%; max-width:var(--wide); margin:0 auto; padding:0 28px; }
section{ position:relative; padding:110px 0; }
section + section{ border-top:1px solid var(--line); }

/* ===== セクション見出し ===== */
.sec-head{ margin-bottom:54px; }
.sec-index{ display:flex; align-items:baseline; gap:14px; margin-bottom:18px; }
.sec-index .no{ font-family:var(--num); font-size:13px; font-weight:600; letter-spacing:.18em; color:var(--vermilion); }
.sec-index .rule{ flex:1; height:1px; background:var(--line); }
.sec-index .ja{ font-size:12px; letter-spacing:.34em; color:var(--ink-3); writing-mode:initial; }
.sec-head h2{
  font-family:var(--serif); font-weight:600; font-size:clamp(28px,4.4vw,40px);
  line-height:1.35; margin:0 0 22px; letter-spacing:.02em;
}
.sec-head h2 em{ font-style:normal; color:var(--vermilion); }
.lead{ font-size:16.5px; color:var(--ink-2); line-height:2; max-width:62ch; }
.lead b{ color:var(--ink); font-weight:600; }
.lead .hl{ color:var(--vermilion-d); font-weight:600; }

/* ===== ヒーロー ===== */
#hero{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:84px 0 40px; border:none; position:relative; overflow:hidden; }
.hero-grid-bg{ position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px; opacity:.35; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,#000 30%,transparent 78%); mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,#000 30%,transparent 78%);
}
.hero-inner{ position:relative; z-index:2; }
.hero-kicker{ display:flex; align-items:center; gap:16px; margin-bottom:30px; }
.hero-kicker .seal{ font-family:var(--serif); writing-mode:vertical-rl; border:1.5px solid var(--vermilion); color:var(--vermilion); padding:10px 7px; font-size:14px; letter-spacing:.22em; border-radius:3px; }
.hero-kicker .meta{ font-size:13px; letter-spacing:.16em; color:var(--ink-2); line-height:1.9; }
.hero-title{ font-family:var(--serif); font-weight:700; font-size:clamp(40px,8.5vw,86px); line-height:1.12; letter-spacing:.02em; margin:0 0 8px; }
.hero-title .accent{ color:var(--vermilion); }
.hero-sub{ font-size:clamp(15px,2.2vw,19px); color:var(--ink-2); letter-spacing:.06em; margin-top:18px; max-width:54ch; }

.hero-figure{ margin-top:58px; display:grid; grid-template-columns:auto 1fr; gap:38px; align-items:end; }
.bignum{ display:flex; flex-direction:column; }
.bignum .label{ font-size:12.5px; letter-spacing:.22em; color:var(--ink-3); margin-bottom:6px; }
.bignum .value{ font-family:var(--num); font-weight:700; font-size:clamp(54px,11vw,108px); line-height:.92; letter-spacing:-.02em; color:var(--ink); }
.bignum .value .unit{ font-size:.32em; font-weight:600; color:var(--ink-2); margin-left:.18em; letter-spacing:.02em; }
.bignum .yoy{ margin-top:12px; font-size:14px; color:var(--vermilion-d); letter-spacing:.04em; }
.bignum .yoy .tri{ font-family:var(--num); }

.hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line-2); }
.hero-stats .st{ padding:18px 18px 4px; border-right:1px solid var(--line); }
.hero-stats .st:last-child{ border-right:none; }
.hero-stats .st .k{ font-size:11.5px; letter-spacing:.14em; color:var(--ink-3); }
.hero-stats .st .v{ font-family:var(--num); font-weight:700; font-size:30px; margin-top:6px; }
.hero-stats .st .v small{ font-size:13px; font-weight:600; color:var(--ink-2); font-family:var(--sans); margin-left:3px; }
.hero-stats .st.male .v{ color:var(--indigo); }
.hero-stats .st.female .v{ color:var(--vermilion); }

.scroll-cue{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink-3); font-size:11px; letter-spacing:.2em; }
.scroll-cue .bar{ width:1px; height:42px; background:linear-gradient(var(--ink-3),transparent); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%{transform:scaleY(.3);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(.3);transform-origin:bottom} }

/* ===== チャート枠 ===== */
.chart{ width:100%; margin-top:8px; }
.chart-xl{ height:460px; }
.chart-lg{ height:420px; }
.chart-md{ height:360px; }
.chart-sm{ height:300px; }
figure{ margin:0; }
figcaption{ margin-top:18px; font-size:12.5px; color:var(--ink-3); letter-spacing:.02em; display:flex; gap:8px; align-items:baseline; }
figcaption::before{ content:var(--src-label,"出典"); font-size:10px; border:1px solid var(--line-2); color:var(--ink-3); padding:1px 5px; border-radius:2px; letter-spacing:.1em; flex:none; }

/* ===== 凡例 ===== */
.legend{ display:flex; gap:22px; margin:0 0 22px; flex-wrap:wrap; }
.legend .item{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); letter-spacing:.04em; }
.legend .swatch{ width:18px; height:3px; border-radius:2px; }
.legend .swatch.dot{ width:10px; height:10px; border-radius:50%; }

/* ===== 指標カード（数値ハイライト） ===== */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0; margin:38px 0 8px; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); }
.kpis .kpi{ padding:22px 22px 20px; border-right:1px solid var(--line); }
.kpis .kpi:last-child{ border-right:none; }
.kpis .kpi .k{ font-size:12px; letter-spacing:.1em; color:var(--ink-3); margin-bottom:10px; min-height:2.2em; }
.kpis .kpi .v{ font-family:var(--num); font-weight:700; font-size:34px; line-height:1; }
.kpis .kpi .v .u{ font-size:14px; font-weight:600; color:var(--ink-2); font-family:var(--sans); margin-left:4px; }
.kpis .kpi .sub{ margin-top:8px; font-size:12px; color:var(--ink-2); letter-spacing:.03em; }
.kpis .kpi.accent .v{ color:var(--vermilion); }
.kpis .kpi.indigo .v{ color:var(--indigo); }

/* ===== 都道府県タイルマップ ===== */
.map-wrap{ display:grid; grid-template-columns:1.35fr 1fr; gap:48px; align-items:start; }
#prefmap{ display:grid; gap:4px; aspect-ratio:1.05; }
.tile{ position:relative; border-radius:3px; display:flex; align-items:center; justify-content:center; cursor:default; transition:transform .15s, box-shadow .15s; }
.tile .t-name{ font-size:9px; color:rgba(255,255,255,.92); letter-spacing:0; line-height:1; text-align:center; padding:1px; font-weight:500; }
.tile.dark .t-name{ color:rgba(255,255,255,.95); }
.tile.light .t-name{ color:var(--ink); }
.tile:hover{ transform:scale(1.16); box-shadow:var(--shadow); z-index:5; }
.tile.is-top{ outline:2px solid var(--ink); outline-offset:1px; }
.map-side .rank-title{ font-family:var(--serif); font-size:15px; margin:0 0 16px; letter-spacing:.04em; }
.rank-list{ list-style:none; margin:0; padding:0; }
.rank-list li{ display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; }
.rank-list li .rk{ font-family:var(--num); font-size:12px; color:var(--ink-3); width:22px; }
.rank-list li .nm{ flex:1; }
.rank-list li .wg{ font-family:var(--num); font-weight:700; }
.rank-list li.top .rk{ color:var(--vermilion); }
.rank-list li.top .wg{ color:var(--vermilion); }
.rank-list.bottom li .wg{ color:var(--indigo); }
.maplegend{ display:flex; align-items:center; gap:10px; margin-top:18px; font-size:11.5px; color:var(--ink-3); }
.maplegend .scale{ flex:1; height:8px; border-radius:4px; background:linear-gradient(90deg,#E7EDF2,#9FB6C7,var(--indigo),#7E5A50,var(--vermilion)); }

/* ===== マーカー文（引用的） ===== */
.pullquote{ font-family:var(--serif); font-size:clamp(20px,3vw,27px); line-height:1.7; color:var(--ink); border-left:3px solid var(--vermilion); padding:6px 0 6px 26px; margin:48px 0; letter-spacing:.02em; }
.pullquote b{ color:var(--vermilion); font-weight:600; }

/* ===== フッター ===== */
footer{ background:var(--ink); color:#E9E5DB; padding:80px 0 60px; }
footer a{ color:#E9E5DB; }
footer .f-title{ font-family:var(--serif); font-size:22px; margin:0 0 26px; letter-spacing:.04em; }
footer .f-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px; border-top:1px solid rgba(255,255,255,.16); padding-top:30px; }
footer .f-grid .k{ font-size:12px; letter-spacing:.12em; color:#9b968a; margin-bottom:8px; }
footer .f-grid .v{ font-size:14px; line-height:1.8; }
footer .f-note{ margin-top:40px; font-size:12px; color:#9b968a; line-height:1.9; letter-spacing:.02em; }

/* ===== 出現アニメ ===== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* ===== レスポンシブ ===== */
@media (max-width:900px){
  #sidenav{ display:none; }
  .map-wrap{ grid-template-columns:1fr; gap:30px; }
  .hero-figure{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:620px){
  body{ font-size:15px; }
  section{ padding:72px 0; }
  .wrap,.wrap-wide{ padding:0 20px; }
  .hero-stats{ grid-template-columns:1fr; }
  .hero-stats .st{ border-right:none; border-bottom:1px solid var(--line); }
  .tile .t-name{ font-size:7px; }
  .kpis{ grid-template-columns:1fr 1fr; }
  .kpis .kpi:nth-child(2n){ border-right:none; }
}
@media (prefers-reduced-motion:reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}