@charset "utf-8";
/* Phase 1 主要画面 共通スタイル
   基準デザイン：案3「無機質なグリッド」
   明るい無彩色／角丸なし／細い罫線／左揃え／黒地の主要ボタン */

:root{
  --bg:#ececeb;
  --surface:#f7f7f6;
  --surface-2:#e3e4e3;
  --ink:#15171a;
  --ink-soft:#4d5157;
  --ink-mute:#61666d;
  --line:#cfd0cf;
  --line-soft:#dedfde;
  --slate:#3c4e5c;
  --focus:#3c4e5c;

  --gothic:"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo",system-ui,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Courier New",monospace;

  --wrap:1120px;
  --pad:24px;
  --label:220px;
}

/* ---------- 夜の取扱説明書（第2.2稿） ---------- */
.manual-start,.manual-quiz,.manual-bridge,.manual-result{padding:48px 0 72px;}
.noscript-title{margin:12px 0;font-size:30px;font-weight:700;line-height:1.5;}
.manual-start{max-width:800px;}
.manual-start h1{margin:16px 0 20px;font-size:42px;line-height:1.35;}
.manual-start h1 small{font-size:.62em;font-weight:600;}
.manual-lead{max-width:38em;margin:0 0 26px;font-size:18px;line-height:1.9;color:var(--ink-soft);}
.manual-benefit{max-width:42em;margin:0 0 20px;font-size:16.5px;line-height:1.9;font-weight:700;}
.manual-start-actions{margin-bottom:24px;}
.manual-warning{margin-bottom:22px;}
.manual-privacy{border:1px solid var(--line);background:var(--surface);padding:24px 26px;margin:0 0 28px;max-width:680px;}
.manual-privacy h2{margin:0 0 10px;font-size:18px;}
.manual-privacy p{margin:0;font-size:15.5px;line-height:1.9;color:var(--ink-soft);}
.manual-privacy p+p{margin-top:8px;}
.manual-privacy-short{margin:0;font-size:14.5px;line-height:1.85;color:var(--ink-soft);}
.quiz-percent{font-family:var(--mono);font-size:12px;color:var(--ink-mute);}
.manual-progress{height:10px;border:1px solid var(--line);margin:0 0 28px;background:var(--surface);}
.manual-progress i{display:block;height:100%;background:var(--ink);transition:width .18s linear;}
.manual-quiz .quiz-intro{border:0;border-left:3px solid var(--ink);background:transparent;padding:4px 0 4px 18px;margin-bottom:34px;font-size:15px;color:var(--ink-soft);}
.manual-quiz .quiz-q{max-width:25em;margin-bottom:32px;font-size:30px;}
.manual-quiz .quiz-q:focus{outline:none;}
/* ---------- 比重シークバー（第8回） ----------
   帯の黒白＝回答の比重、帯の下のつまみ＝利用者が選んでいる左右位置。
   つまみと黒白の境界は別要素で、互いに逆方向へ動く。
   位置の％はレイアウト用の内部値で、画面にも読み上げにも出さない。 */
.seek{max-width:760px;margin:0 0 34px;}
.seek-poles{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin:0 0 16px;}
.seek-pole{margin:0;font-size:16px;font-weight:600;line-height:1.65;color:var(--ink-soft);transition:color .18s linear;}
.seek-pole-r{text-align:right;}
.seek-pole .side{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-mute);margin-bottom:6px;}
.seek-pole::before{content:"";display:block;width:22px;height:0;border-top:2px solid var(--line);margin:0 0 9px;transition:border-color .18s linear,width .18s linear;}
.seek-pole-r::before{margin-left:auto;}
.seek[data-side="l"] .seek-pole-l,.seek[data-side="r"] .seek-pole-r{color:var(--ink);font-weight:700;}
.seek[data-side="l"] .seek-pole-l::before,.seek[data-side="r"] .seek-pole-r::before{border-top-color:var(--ink);width:56px;}
.seek[data-side="l"] .seek-pole-r,.seek[data-side="r"] .seek-pole-l{color:var(--ink-mute);font-weight:400;}

/* 操作面。帯と、その下のつまみの走行部をまとめて押せる範囲にする */
.seek-field{position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:pointer;}
.seek-band{position:relative;height:88px;border:1px solid var(--ink);background:var(--surface);overflow:hidden;}
.seek-fill{position:absolute;top:0;bottom:0;left:0;right:100%;background:var(--ink);}
.seek:not(.is-dragging) .seek-fill{transition:left .22s cubic-bezier(.2,.7,.3,1),right .22s cubic-bezier(.2,.7,.3,1);}
.seek[data-state="empty"] .seek-fill,.seek[data-state="center"] .seek-fill{left:50%;right:50%;}
/* 中央の境界。帯の中では白いあいだだけ見え、上下の短い印は常に見える */
.seek-center{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line);}
.seek-track{position:relative;}
.seek-mid{position:absolute;left:50%;width:1px;height:7px;background:var(--ink-mute);transform:translateX(-50%);}
.seek-mid-t{top:-9px;}
.seek-mid-b{bottom:-9px;}

/* つまみの走行部 */
.seek-rail{position:relative;height:34px;margin-top:8px;}
.seek-rail::before{content:"";position:absolute;left:0;right:0;top:0;border-top:1px solid var(--line-soft);}
.seek-notch{position:absolute;top:0;width:1px;background:var(--ink-mute);transform:translateX(-50%);}
.seek-notch[data-at="0"]{left:12%;height:20px;}
.seek-notch[data-at="1"]{left:38%;height:10px;}
.seek-notch[data-at="2"]{left:62%;height:10px;}
.seek-notch[data-at="3"]{left:88%;height:20px;}
.seek-thumb{position:absolute;top:2px;left:50%;width:12px;height:26px;margin-left:-6px;background:var(--ink);opacity:0;}
.seek:not(.is-dragging) .seek-thumb{transition:left .22s cubic-bezier(.2,.7,.3,1),opacity .12s linear;}
.seek[data-state="dragging"] .seek-thumb,.seek[data-state="answered"] .seek-thumb{opacity:1;}
/* キーボードで候補位置を見せているあいだは中空。確定していないことを形で示す */
.seek[data-state="preview"] .seek-thumb{opacity:1;background:transparent;border:2px solid var(--ink);}

/* 4つの回答位置。読み上げとキーボードのための実体で、見た目は持たない */
.seek-stops{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);}
.seek-stop{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;min-height:44px;touch-action:pan-y;}
.seek-stop:focus-visible{outline:2px solid var(--focus);outline-offset:-3px;}

.seek-readout{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:16px 0 0;min-height:26px;
  font-size:14.5px;line-height:1.8;color:var(--ink-soft);}
.seek-readout .rk{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-mute);}
.seek-readout .rv{color:var(--ink);font-weight:700;}
.seek-readout .rs{color:var(--ink-soft);}
.seek-notice{margin:10px 0 0;padding:0 0 0 14px;border-left:3px solid var(--ink);font-size:14px;line-height:1.8;color:var(--ink);}

/* 確定の合図 */
.seek.is-confirm .seek-band{outline:3px solid var(--ink);outline-offset:2px;}
.manual-nav{display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:760px;}
.text-button{min-height:44px;border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;font:inherit;font-size:13.5px;color:var(--ink-soft);cursor:pointer;}
.manual-bridge{max-width:680px;}
.manual-bridge .bridge-title{font-size:32px;font-weight:700;line-height:1.45;margin:16px 0 22px;}
.manual-bridge p{font-size:17px;line-height:1.95;color:var(--ink-soft);}
.appliance-result{border-left:4px solid var(--ink);margin:28px 0 20px;padding:6px 0 6px 22px;}
.appliance-result .tag{margin-bottom:6px;}
.appliance-result h2{margin:0 0 6px;font-size:24px;}
.appliance-result p{margin:0;font-size:17px;line-height:1.8;font-weight:700;}
.axis-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:24px 0 0;padding:0;}
.axis-chips li{border:1px solid var(--ink);padding:8px 12px;font-size:13px;font-weight:700;}
.result-share-top{max-width:680px;margin:24px 0 0;}
.manual-result-body{max-width:680px;padding:42px 0;border-bottom:1px solid var(--line);}
.manual-result-body h2{font-size:22px;margin:38px 0 16px;}
.manual-result-body h3{font-size:18px;margin:30px 0 12px;}
.manual-result-body p{font-size:16.5px;line-height:1.95;}
.manual-result-body blockquote{margin:28px 0;padding:18px 20px;border:1px solid var(--line);background:var(--surface);}
.manual-result-body blockquote p{margin:0;}
.manual-result-body hr{border:0;border-top:1px solid var(--line);margin:34px 0;}
.share-panel{padding:42px 0;border-bottom:1px solid var(--line);max-width:800px;}
.share-panel h2{margin:10px 0 10px;font-size:24px;}
.share-panel>p{font-size:15.5px;line-height:1.9;color:var(--ink-soft);max-width:44em;}
.share-preview{display:grid;grid-template-columns:360px 1fr;gap:20px;margin:24px 0;align-items:start;}
.share-preview canvas{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--surface);}
.share-preview label{grid-column:2;font-size:13px;font-weight:700;}
.share-preview textarea{grid-column:2;min-height:160px;margin-top:-180px;border:1px solid var(--line);background:var(--surface);padding:14px;font:15px/1.8 inherit;resize:vertical;color:var(--ink);}
.result-privacy{max-width:680px;margin:34px 0 24px;}
.result-actions{margin-bottom:54px;}
.no-js #manualStart,.no-js #manualQuiz,.no-js #manualBridge,.no-js #manualResult,.no-js #ageGate{display:none!important;}
.no-js .manual-noscript{display:block;}

@media (max-width:720px){
  .manual-start,.manual-quiz,.manual-bridge,.manual-result{padding:30px 0 48px;}
  .manual-start h1{font-size:30px;}
  .manual-lead{font-size:16px;}
  .manual-privacy{padding:20px 18px;}
  .manual-quiz .quiz-q{font-size:23px;}
  .seek-poles{gap:0 16px;margin-bottom:12px;}
  .seek-pole{font-size:14.5px;line-height:1.7;}
  .seek-pole .side{font-size:10.5px;margin-bottom:4px;}
  .seek-band{height:82px;}
  .seek-rail{height:32px;}
  .seek-readout{font-size:13.5px;}
  .manual-nav{align-items:stretch;flex-direction:column;}
  .text-button{align-self:flex-start;}
  .manual-bridge .bridge-title{font-size:26px;}
  .manual-bridge p{font-size:16px;}
  .appliance-result h2{font-size:21px;}
  .appliance-result p{font-size:16px;}
  .manual-result-body p{font-size:16px;line-height:1.9;}
  .manual-result-body h2{font-size:20px;}
  .manual-result-body h3{font-size:17px;}
  .share-preview{grid-template-columns:1fr;}
  .share-preview label,.share-preview textarea{grid-column:1;margin-top:0;}
  .share-preview textarea{min-height:170px;}
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--gothic); font-size:16px; line-height:1.95;
  letter-spacing:.02em; overflow-x:hidden;
  min-height:100vh; display:flex; flex-direction:column;
}
body[data-age-open="true"]{overflow:hidden;}
main{flex:1 0 auto;}
a{color:inherit;}
[hidden]{display:none !important;}
h1,h2,h3,h4{letter-spacing:.02em;}

.grid-bg{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, rgba(21,23,26,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21,23,26,.03) 1px, transparent 1px);
  background-size:80px 80px;
}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad);}
header,main,footer{position:relative; z-index:1;}

.tag{
  display:inline-block; font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; color:var(--ink-mute); line-height:1.6;
}
.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--surface); padding:10px 16px; z-index:99;
}
.skip:focus{left:0;}

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line); background:rgba(236,236,235,.94);}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px;}
.brand{display:inline-flex; align-items:center; gap:12px; min-height:44px; text-decoration:none;}
.brand-name{font-weight:700; letter-spacing:.08em; color:var(--ink); white-space:nowrap;}
.mark{display:block; width:24px; height:24px; background:var(--ink); position:relative;}
.mark::after{
  content:""; position:absolute; right:-1px; bottom:-1px;
  width:11px; height:11px; background:var(--bg);
}
.badge{
  display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  line-height:1; padding:6px 8px; color:var(--ink); border:1px solid var(--ink);
}
.nav{display:flex; gap:0;}
.nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  font-size:13px; color:var(--ink-soft); text-decoration:none;
  border-bottom:2px solid transparent;
}
.nav a + a{border-left:1px solid var(--line-soft);}
.nav a:hover{color:var(--ink); background:var(--surface);}
.nav a[aria-current="page"]{color:var(--ink); font-weight:700; border-bottom-color:var(--ink);}

/* 現在地 */
.crumb{border-bottom:1px solid var(--line-soft); background:rgba(247,247,246,.5);}
.crumb-inner{display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; min-height:40px;}
.crumb a,.crumb span{font-size:12px; color:var(--ink-mute); text-decoration:none;}
.crumb a{display:inline-flex; align-items:center; min-height:40px;}
.crumb a:hover{color:var(--ink);}
.crumb .sep{color:var(--line);}
.crumb [aria-current="page"]{color:var(--ink);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:54px; padding:0 32px; border-radius:0;
  font-size:15px; font-weight:600; letter-spacing:.06em;
  text-decoration:none; cursor:pointer; border:1px solid var(--ink);
  background:transparent; color:var(--ink); font-family:inherit;
  transition:background .15s linear, color .15s linear;
}
.btn-primary{background:var(--ink); color:var(--surface);}
.btn-primary:hover{background:var(--slate); border-color:var(--slate);}
.btn-ghost{color:var(--ink-soft); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink); color:var(--ink);}
.btn-sm{min-height:46px; padding:0 20px; font-size:13.5px;}
.btn[disabled]{opacity:.5; cursor:default;}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin:0;}

/* ---------- 汎用レイアウト ---------- */
.row{
  display:grid; grid-template-columns:var(--label) 1fr; gap:0 40px;
  padding:52px 0 56px; border-bottom:1px solid var(--line);
}
.row:last-of-type{border-bottom:0;}
.row-label .tag{display:block; margin-bottom:8px;}
.row-label h2{margin:0; font-size:15px; font-weight:700; letter-spacing:.06em; line-height:1.8;}

.page-head{padding:44px 0 40px; border-bottom:1px solid var(--line);}
.page-head .tag{display:block; margin-bottom:10px;}
.page-head h1{margin:0 0 14px; font-size:32px; line-height:1.5; font-weight:700;}
.page-head p{margin:0; max-width:34em; color:var(--ink-soft); font-size:16px; line-height:1.95;}

.prose{max-width:36em;}
.prose h3{margin:34px 0 10px; font-size:18px; font-weight:700; line-height:1.7;}
.prose h3:first-child{margin-top:0;}
.prose p{margin:0 0 20px; font-size:16px; line-height:1.95; color:var(--ink-soft);}
.prose p:last-child{margin-bottom:0;}
.prose ul{margin:0 0 18px; padding-left:1.2em;}
.prose li{font-size:16px; line-height:1.95; color:var(--ink-soft); margin-bottom:6px;}
.prose strong{color:var(--ink);}

.note{
  background:var(--surface); border:1px solid var(--line);
  padding:20px 22px; margin:0 0 24px; max-width:40em;
}
.note .tag{display:block; margin-bottom:6px;}
.note p{margin:0; font-size:14.5px; line-height:1.9; color:var(--ink-soft);}
.note-strong{border-color:var(--ink);}

/* ---------- トップ ---------- */
.hero{
  display:grid; grid-template-columns:1fr 300px; gap:0;
  border-bottom:1px solid var(--line); align-items:stretch;
}
.hero-main{padding:56px 56px 52px 0;}
.eyebrow{
  margin:0 0 22px; display:inline-block;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; line-height:1.6;
  color:var(--ink); border:1px solid var(--ink); padding:7px 12px;
}
.hero-title{margin:0 0 22px; font-size:38px; line-height:1.5; font-weight:700; letter-spacing:.01em;}
.hero-lead{margin:0 0 32px; color:var(--ink-soft); font-size:16px; line-height:1.95; max-width:30em;}
.hero-action{margin:0 0 14px;}
.hero-sub{margin:0; font-size:13.5px; color:var(--ink-mute); letter-spacing:.04em;}
.hero-side{position:relative; border-left:1px solid var(--line); background:var(--surface);}
.hero-side .plot{position:absolute; display:block;}
.p1{left:56px; top:88px; width:52px; height:52px; border:1px solid var(--ink); opacity:.55;}
.p2{left:112px; top:162px; width:34px; height:34px; background:var(--slate); opacity:.5;}
.p3{left:172px; top:110px; width:44px; height:44px; border:1px solid var(--slate); border-radius:0; opacity:.6;}
.axis-x{position:absolute; left:0; right:0; top:212px; height:1px; background:var(--line);}
.axis-y{position:absolute; top:0; bottom:0; left:150px; width:1px; background:var(--line);}

.findings{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr);}
.findings li{padding:0 24px; border-left:1px solid var(--line-soft);}
.findings li:first-child{padding-left:0; border-left:0;}
.num{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--ink-mute); margin-bottom:12px;}
.findings h3{margin:0 0 8px; font-size:17px; font-weight:700; line-height:1.7;}
.findings p{margin:0; font-size:15px; line-height:1.95; color:var(--ink-soft);}

.privacy{background:var(--surface); border:1px solid var(--line); padding:30px 32px;}
.privacy-title{margin:0 0 12px; font-size:19px; font-weight:700; line-height:1.7;}
.privacy-body{margin:0 0 18px; font-size:15.5px; line-height:1.95; color:var(--ink-soft); max-width:38em;}
.privacy-body:last-child{margin-bottom:0;}

.reads{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-soft);}
.reads li{border-bottom:1px solid var(--line-soft);}
.reads a{
  display:flex; align-items:center; gap:20px; min-height:60px; padding:12px 4px;
  text-decoration:none; font-size:15px; line-height:1.8;
}
.reads a:hover .rt{color:var(--slate);}
.rn{flex:0 0 auto; font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--ink-mute);}
.rt{color:var(--ink);}

/* ---------- 診断 ---------- */
.quiz{padding:40px 0 64px;}
.quiz-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px;}
.prog{display:flex; gap:6px; margin:0 0 40px;}
.prog i{flex:1; height:8px; border:1px solid var(--line); background:transparent;}
.prog i.on{background:var(--ink); border-color:var(--ink);}
.quiz-intro{
  border:1px solid var(--line); background:var(--surface);
  padding:18px 20px; margin:0 0 34px; max-width:40em;
}
.quiz-intro p{margin:0; font-size:15.5px; line-height:1.9; color:var(--ink-soft);}
.quiz-intro p + p{margin-top:6px;}
.quiz-q{margin:0 0 28px; font-size:30px; line-height:1.5; font-weight:700; max-width:20em;}
.opts{display:grid; gap:12px; margin:0 0 30px; max-width:640px;}
.opt{
  display:flex; align-items:center; gap:18px; width:100%;
  min-height:76px; padding:14px 20px; text-align:left;
  background:var(--surface); border:2px solid var(--line);
  font-family:inherit; font-size:16.5px; line-height:1.6; color:var(--ink);
  cursor:pointer; transition:border-color .12s linear, background .12s linear;
}
.opt:hover{border-color:var(--ink-mute);}
.opt .k{
  flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center;
  border:1px solid var(--line); font-family:var(--mono); font-size:12px;
  color:var(--ink-mute); background:var(--bg);
}
.opt[aria-pressed="true"]{border-color:var(--ink); background:var(--surface-2); font-weight:700;}
.opt[aria-pressed="true"] .k{background:var(--ink); border-color:var(--ink); color:var(--surface);}
.quiz-back{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:13.5px; color:var(--ink-soft); text-decoration:none;
  background:transparent; border:0; padding:0; font-family:inherit; cursor:pointer;
}
.quiz-back:hover{color:var(--ink);}
.quiz-note{margin:26px 0 0; font-size:13.5px; color:var(--ink-mute); max-width:40em;}
.noscript{border:1px solid var(--ink); background:var(--surface); padding:20px 22px; margin:0 0 30px;}
.noscript p{margin:0; font-size:15px; line-height:1.95;}

/* ---------- 結果 ---------- */
.result-head{padding:44px 0 36px; border-bottom:1px solid var(--line);}
.result-head .tag{display:block; margin-bottom:12px;}
.result-lead{margin:0 0 6px; font-size:15px; color:var(--ink-soft);}
.result-title{margin:0 0 14px; font-size:34px; line-height:1.45; font-weight:700;}
.result-one{margin:0; font-size:16px; line-height:1.9; color:var(--ink-soft); max-width:34em;}
.saved-flag{
  display:inline-block; margin:0 0 14px; font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; color:var(--ink); border:1px solid var(--ink); padding:5px 9px;
}

.axes{display:grid; gap:14px; margin:0 0 20px;}
.axis{display:grid; grid-template-columns:130px 1fr; gap:0 20px; align-items:center;}
.axis-name .tag{display:block; margin-bottom:2px;}
.axis-name .an{font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.04em;}
.axis-pair{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.axis-cell{
  display:flex; align-items:center; gap:10px; min-height:56px; padding:10px 14px;
  border:2px solid var(--line-soft); color:var(--ink-mute); font-size:14px; line-height:1.6;
}
.axis-cell .dot{flex:0 0 auto; width:10px; height:10px; border:1px solid var(--line); background:transparent;}
.axis-cell.on{border-color:var(--ink); background:var(--surface); color:var(--ink); font-weight:700;}
.axis-cell.on .dot{background:var(--ink); border-color:var(--ink);}
.axis-cell.on::after{
  content:"寄り"; margin-left:auto; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.1em; font-weight:400; color:var(--ink-mute);
}
.axes-note{margin:0; font-size:15px; line-height:1.85; color:var(--ink-mute); max-width:38em;}

.blocks{display:grid; gap:0; border-top:1px solid var(--line-soft);}
.block{border-bottom:1px solid var(--line-soft);}
.block > summary{
  display:flex; align-items:center; gap:12px; min-height:60px; padding:10px 4px;
  cursor:pointer; font-size:17px; font-weight:700; line-height:1.6; list-style:none;
}
.block > summary::-webkit-details-marker{display:none;}
.block > summary::before{
  content:""; flex:0 0 auto; width:12px; height:12px;
  border-left:1px solid var(--ink); border-bottom:1px solid var(--ink);
  transform:rotate(-45deg) translate(2px,-2px);
}
.block[open] > summary::before{transform:rotate(135deg) translate(-1px,-3px);}
.block-body{padding:0 0 22px;}
.block-body p{margin:0; font-size:16px; line-height:1.95; color:var(--ink-soft); max-width:36em;}

.feedback{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;}
.feedback p{margin:0; font-size:15.5px; font-weight:700;}
.fb-done{margin:0; font-size:14px; color:var(--ink-soft);}

.type-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-soft);}
.type-list li{
  display:grid; grid-template-columns:64px 190px 1fr; gap:0 20px; align-items:baseline;
  padding:16px 4px; border-bottom:1px solid var(--line-soft);
}
.type-list .tc{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--ink-mute);}
.type-list .tn{font-size:16px; font-weight:700;}
.type-list .td{font-size:15px; color:var(--ink-soft); line-height:1.85;}

/* ---------- 読みもの ---------- */
.guide-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.guide-list li{border-bottom:1px solid var(--line);}
.guide-list a{
  display:grid; grid-template-columns:64px 1fr; gap:0 20px;
  padding:24px 4px; text-decoration:none; align-items:baseline;
}
.guide-list a:hover .gt{color:var(--slate);}
.gn{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--ink-mute);}
.gt{display:block; font-size:19px; font-weight:700; line-height:1.65; margin-bottom:6px;}
.gd{display:block; font-size:15px; line-height:1.85; color:var(--ink-soft); max-width:38em;}

.article{padding:44px 0 20px;}
.article-meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 16px;}
.article h1{margin:0 0 20px; font-size:30px; line-height:1.55; font-weight:700; max-width:22em;}
.article-lead{margin:0 0 8px; font-size:17px; line-height:1.95; color:var(--ink-soft); max-width:680px;}
.article-body{max-width:680px; padding:36px 0 0; border-top:1px solid var(--line);}

/* 記事メタのカテゴリー（等幅は英数字ラベルだけに使うため、和文はゴシックのまま） */
.cat{
  display:inline-block; font-size:12px; line-height:1; padding:6px 10px;
  border:1px solid var(--line); color:var(--ink-soft); background:var(--surface);
}

/* メイン図版 */
.article-figure{margin:0 0 32px; max-width:680px;}
.article-figure img{
  display:block; width:100%; height:auto; border:1px solid var(--line); background:var(--surface);
}
.article-figure figcaption{margin-top:8px; font-size:12.5px; color:var(--ink-mute);}

/* 目次（H2が5件以上の記事だけ） */
.article-toc{
  margin:0 0 34px; padding:20px 22px; background:var(--surface); border:1px solid var(--line);
}
.article-toc h2{
  margin:0 0 10px; padding:0; border:0; font-size:14px; font-weight:700; letter-spacing:.06em;
}
.article-toc ul{margin:0; padding:0; list-style:none;}
.article-toc li{margin:0; border-top:1px solid var(--line-soft);}
.article-toc li:first-child{border-top:0;}
.article-toc a{
  display:block; padding:11px 0; font-size:15px; line-height:1.75;
  color:var(--ink-soft); text-decoration:none;
}
.article-toc a:hover{color:var(--slate);}

/* 本文の小見出し */
.article-body h3{
  margin:26px 0 10px; font-size:17.5px; font-weight:700; line-height:1.7; color:var(--ink);
}

/* 記入欄（原稿の引用記法＝書き込む一行） */
.fill-line{
  margin:0 0 22px; padding:16px 20px; max-width:680px;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--slate);
}
.fill-line p{margin:0; font-size:16.5px; line-height:1.9; color:var(--ink);}
.fill-line p + p{margin-top:8px;}

/* 本文の箇条書き・番号リスト */
.article-body ul,.article-body ol{margin:0 0 22px; padding-left:1.4em; max-width:680px;}
.article-body li{margin:0 0 8px; font-size:16.5px; line-height:1.95; color:var(--ink-soft);}
.article-body strong{color:var(--ink);}

/* 表：ページ全体ではなく表だけを横スクロールさせる */
.table-block{max-width:680px;}
.table-hint{display:none;}
.table-scroll{
  max-width:680px; margin:0 0 26px; overflow-x:auto; overscroll-behavior-x:contain;
  border:1px solid var(--line); background:var(--surface);
}
.table-scroll:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.table-scroll table{border-collapse:collapse; width:100%; min-width:520px;}
.table-scroll th,.table-scroll td{
  padding:12px 14px; text-align:left; vertical-align:top;
  font-size:14.5px; line-height:1.8; border-bottom:1px solid var(--line-soft);
}
.table-scroll th{
  font-weight:700; color:var(--ink); background:var(--surface-2);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.table-scroll td{color:var(--ink-soft);}
.table-scroll tr:last-child td{border-bottom:0;}

/* 参考情報 */
.article-refs{
  max-width:680px; margin:38px 0 0; padding:22px 24px;
  background:var(--surface); border:1px solid var(--line);
}
.article-refs h2{
  margin:0 0 12px; padding:0; border:0; font-size:15px; font-weight:700; letter-spacing:.04em;
}
.article-refs ul{margin:0; padding:0; list-style:none;}
.article-refs li{
  margin:0; padding:11px 0; font-size:15px; line-height:1.85;
  color:var(--ink-soft); border-top:1px solid var(--line-soft); overflow-wrap:anywhere;
}
.article-refs li:first-child{border-top:0;}

/* 関連する記事 */
.article-related{max-width:680px; margin:40px 0 0; padding:30px 0 0; border-top:1px solid var(--line);}
.article-related h2{margin:0 0 4px; font-size:15px; font-weight:700; letter-spacing:.06em;}
.article-related ul{list-style:none; margin:0; padding:0;}
.article-related li{border-bottom:1px solid var(--line-soft);}
.article-related a{
  display:block; padding:16px 4px; text-decoration:none; min-height:44px;
}
.article-related a:hover .rel-t{color:var(--slate);}
.cat-lead{margin:10px 0 0; font-size:14px; line-height:1.8; color:var(--ink-mute); max-width:20em;}
.rel-cat{display:block; font-size:11.5px; color:var(--ink-mute); margin-bottom:4px;}
.rel-t{display:block; font-size:16px; font-weight:700; line-height:1.7; color:var(--ink);}
.article-body h2{
  margin:38px 0 12px; font-size:21px; font-weight:700; line-height:1.6;
  padding-top:18px; border-top:1px solid var(--line-soft);
}
.article-body h2:first-child{margin-top:0; padding-top:0; border-top:0;}
.article-body p{margin:0 0 20px; font-size:16.5px; line-height:1.95; color:var(--ink-soft);}
.article-nav{display:flex; flex-wrap:wrap; gap:12px; padding:34px 0 0; border-top:1px solid var(--line);}

/* ---------- 設定 ---------- */
.kv{border-top:1px solid var(--line); margin:0 0 26px;}
.kv-row{
  display:grid; grid-template-columns:200px 1fr; gap:0 24px;
  padding:18px 4px; border-bottom:1px solid var(--line-soft);
}
.kv-key{font-size:15px; font-weight:700; line-height:1.8;}
.kv-val{font-size:15px; line-height:1.85; color:var(--ink-soft); word-break:break-all;}
.kv-val code{font-family:var(--mono); font-size:12.5px;}
.danger{border:1px solid var(--ink); background:var(--surface); padding:24px 24px 22px; max-width:40em;}
.danger h3{margin:0 0 10px; font-size:17px; font-weight:700;}
.danger p{margin:0 0 18px; font-size:15px; line-height:1.9; color:var(--ink-soft);}
.confirm{border-top:1px solid var(--line); margin-top:18px; padding-top:18px;}
.confirm[hidden]{display:none;}

/* ---------- 利用規約 ---------- */
.doc{max-width:36em;}
.doc h2{
  margin:36px 0 12px; font-size:18px; font-weight:700; line-height:1.7;
  padding-top:18px; border-top:1px solid var(--line-soft);
}
.doc h2:first-of-type{margin-top:0; padding-top:0; border-top:0;}
.doc p{margin:0 0 18px; font-size:16px; line-height:1.95; color:var(--ink-soft);}
.doc ol{margin:0 0 16px; padding-left:1.6em;}
.doc li{font-size:16px; line-height:1.95; color:var(--ink-soft); margin-bottom:8px;}
.doc-date{margin:0 0 30px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--ink-mute);}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); margin-top:0; padding:34px 0 48px;}
.footer-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px;}
.footer-nav{display:flex; flex-wrap:wrap; gap:0 4px;}
.footer-nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px 0 0;
  font-size:13px; color:var(--ink-soft); text-decoration:none;
}
.footer-nav a:hover{color:var(--ink);}
.notice{margin:0; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--ink-mute);}

/* ---------- 年齢確認 ---------- */
.modal{
  position:fixed; inset:0; z-index:50; padding:24px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(21,23,26,.55);
}
.modal[hidden]{display:none;}
.modal-panel{
  width:100%; max-width:520px; background:var(--surface);
  border:1px solid var(--ink); border-radius:0; padding:34px 32px 30px;
}
.modal-title{margin:10px 0 12px; font-size:21px; font-weight:700; line-height:1.65;}
.modal-body{margin:0 0 10px; font-size:15px; line-height:1.95; color:var(--ink-soft);}
.modal-sub{margin:0 0 24px; font-size:13px; line-height:1.85; color:var(--ink-mute);}
.modal-actions{display:flex; gap:0; border:1px solid var(--line);}
.modal-actions .btn{flex:1 1 50%; border:0;}
.modal-actions .btn-ghost{border-left:1px solid var(--line);}

/* ---------- タブレット ---------- */
@media (max-width:1000px){
  .findings{grid-template-columns:repeat(2,1fr); gap:28px 0;}
  .findings li:nth-child(3){padding-left:0; border-left:0;}
}

/* ---------- スマートフォン ---------- */
@media (max-width:860px){
  :root{--pad:20px;}
  body{font-size:15.5px;}
  .grid-bg{background-size:56px 56px;}

  .header-inner{min-height:56px;}
  .brand{gap:10px;}
  .nav a{padding:0 12px; font-size:12.5px;}
  .nav .nav-sub{display:none;}

  .crumb-inner{min-height:36px;}
  .crumb a{min-height:36px;}

  .hero{grid-template-columns:1fr;}
  .hero-main{padding:28px 0 28px;}
  .eyebrow{margin-bottom:18px; font-size:11px; letter-spacing:.1em; padding:6px 10px;}
  .hero-title{font-size:25px; line-height:1.55; margin-bottom:18px;}
  .hero-lead{font-size:15.5px; margin-bottom:24px; line-height:1.9;}
  .hero-sub{font-size:14px;}
  .hero-side{height:96px; border-left:0; border-top:1px solid var(--line); margin:0 calc(var(--pad) * -1);}
  .p1{left:28px; top:26px; width:34px; height:34px;}
  .p2{left:68px; top:62px; width:22px; height:22px;}
  .p3{left:106px; top:36px; width:30px; height:30px;}
  .axis-x{top:82px;}
  .axis-y{left:92px;}

  .btn{width:100%; padding:0 16px;}
  .btn-sm{width:auto;}
  .actions{gap:10px;}
  .actions .btn{width:100%;}

  .row{grid-template-columns:1fr; gap:0; padding:34px 0 38px;}
  .row-label{margin-bottom:20px;}
  .page-head{padding:28px 0 26px;}
  .page-head h1{font-size:24px;}

  .findings{grid-template-columns:1fr; gap:0;}
  .findings li{padding:22px 0 0; border-left:0; border-top:1px solid var(--line-soft); margin-top:22px;}
  .findings li:first-child{padding-top:0; border-top:0; margin-top:0;}
  .findings li:nth-child(3){padding-left:0;}

  .privacy{padding:24px 20px;}
  .privacy-title{font-size:17.5px;}

  .quiz{padding:26px 0 44px;}
  .quiz-intro{padding:16px 16px; margin-bottom:26px;}
  .prog{margin-bottom:28px;}
  .quiz-q{font-size:21px; margin-bottom:22px;}
  .opt{min-height:72px; font-size:15.5px; gap:14px; padding:12px 16px;}

  .result-head{padding:28px 0 26px;}
  .result-title{font-size:25px;}
  .result-one{font-size:16px;}
  .axis{grid-template-columns:1fr; gap:8px;}
  .axis-name{display:block;}
  .axis-pair{gap:6px;}
  .axis-cell{min-height:64px; font-size:13px; padding:10px 12px; align-items:flex-start; flex-direction:column; gap:6px;}
  .axis-cell.on::after{margin-left:0;}
  .block > summary{font-size:15.5px;}
  .block-body p{font-size:16px;}

  .type-list li{grid-template-columns:1fr; gap:2px; padding:16px 0;}

  .guide-list a{grid-template-columns:1fr; gap:6px; padding:20px 0;}
  .gt{font-size:17.5px;}
  .article{padding:26px 0 16px;}
  .article h1{font-size:25px; line-height:1.5;}
  .article-lead{font-size:16px; line-height:1.9;}
  .article-body{padding-top:26px;}
  .article-body h2{font-size:20px; margin-top:30px;}
  .article-body h3{font-size:17px; margin-top:22px;}
  .fill-line{padding:14px 16px;}
  .fill-line p{font-size:16px;}
  .article-figure{margin-bottom:26px;}
  .article-toc{padding:16px 16px; margin-bottom:28px;}
  .article-toc a{padding:12px 0; font-size:15px;}
  .article-body li{font-size:16px; line-height:1.9;}
  .table-hint{
    display:block; margin:0 0 6px; font-size:11.5px; line-height:1.7;
    letter-spacing:.04em; color:var(--ink-mute);
  }
  .table-scroll{margin-bottom:22px;}
  .table-scroll th,.table-scroll td{padding:10px 11px; font-size:14px; line-height:1.75;}
  .table-scroll table{min-width:460px;}
  .article-refs{padding:18px 16px;}
  .article-refs li{padding:12px 0;}
  .article-related{margin-top:32px; padding-top:24px;}
  .rel-t{font-size:16px;}
  .article-body p{font-size:16px; line-height:1.9;}

  .kv-row{grid-template-columns:1fr; gap:2px;}
  .danger{padding:20px 18px;}

  .footer-inner{flex-direction:column; align-items:flex-start; gap:0;}
  .notice{margin-top:10px;}

  .modal-panel{padding:26px 20px 22px;}
  .modal-title{font-size:19px;}
  .modal-actions{flex-direction:column;}
  .modal-actions .btn-ghost{border-left:0; border-top:1px solid var(--line);}
}

/* ---------- 動きの抑制（第8回） ----------
   動きを止めても、黒白の面積・つまみの位置・読み取り行で回答状態が分かる。 */
@media (prefers-reduced-motion:reduce){
  .seek .seek-fill,.seek .seek-thumb,.seek-pole,.seek-pole::before{transition:none !important;}
  .manual-progress i{transition:none;}
}


/* 本番 v1 共通上書き：ニュース第2稿から受け継ぐ3層構造 */
:root{
  --surface:#ffffff;
  --surface-2:#f6f6f5;
  --ink:#202020;
  --ink-soft:#555555;
  --ink-mute:#707070;
  --line:#d5d5d4;
  --line-soft:#e6e6e5;
  --wrap:1240px;
  --pad:24px;
}
body{font-weight:500;color:var(--ink);background:var(--bg);overflow-x:hidden;}
header,main,footer{position:relative;z-index:1;}
.grid-bg{z-index:0;}
.site-header{position:sticky;top:0;z-index:60;background:var(--surface);border-bottom:1px solid var(--line);}
.crumb{background:var(--surface);border-bottom:1px solid var(--line);}
.nav a{font-weight:600;}
.page-surface{background:var(--surface);border:1px solid var(--line);padding:0 56px;}
.page-surface .page-head{padding-top:42px;}
.content-grid{display:grid;grid-template-columns:minmax(0,820px) 344px;gap:28px;align-items:start;}
.article.surface{padding:42px 32px 34px;min-width:0;}
.sidebar{padding:26px 24px;background:var(--surface);min-width:0;}
.side-block{border-bottom:1px solid var(--line);padding:0 0 22px;margin:0 0 24px;}
.side-block:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0;}
.side-block .tag{display:block;margin-bottom:8px;}
.side-block h2{font-size:17px;line-height:1.6;margin:0 0 12px;}
.side-block ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft);}
.side-block li{border-bottom:1px solid var(--line-soft);}
.side-block a:not(.btn){display:block;min-height:44px;padding:10px 2px;font-size:14px;line-height:1.65;font-weight:600;text-decoration:none;overflow-wrap:anywhere;}
.side-block a:not(.btn):hover{color:var(--slate);}
.side-block p{margin:0 0 16px;font-size:14px;line-height:1.85;color:var(--ink-soft);}
.side-diagnosis .btn{width:100%;}
.article-body p,.article-body li{color:#202020;font-weight:500;}
.article-body p a,.article-body li a,.article-refs li a,.prose p a,.prose li a,.prose h3 a,.privacy-body a,.manual-privacy-short a,.quiz-note a{display:inline-block;min-width:44px;min-height:44px;vertical-align:middle;}
.page-surface p a,.page-surface li a{display:inline-block;min-width:44px;min-height:44px;vertical-align:middle;}
.article-meta time{color:var(--ink-mute);}
.article-refs,.article-toc,.fill-line{background:var(--surface);}
.site-footer{background:var(--surface);border-top:1px solid var(--line);}
.footer-nav a{font-weight:500;min-width:44px;box-sizing:border-box;}
.modal{background:rgba(32,32,32,.6);}
.p3{border-radius:0;}

@media (max-width:860px){
  :root{--pad:0px;}
  .wrap{padding:0;}
  .header-inner,.crumb-inner,.footer-inner{padding-left:16px;padding-right:16px;}
  .header-inner{flex-wrap:wrap;gap:0;}
  .brand{min-height:56px;}
  .nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;border-top:1px solid var(--line-soft);}
  .nav a{min-width:0;padding:5px 3px;text-align:center;justify-content:center;white-space:normal;line-height:1.35;font-size:11px;}
  .nav a + a{border-left:1px solid var(--line-soft);}
  .page-surface{border-left:0;border-right:0;padding:0 16px;}
  .page-surface .page-head{padding-top:28px;}
  .content-grid{grid-template-columns:1fr;gap:20px;}
  .article.surface{border-left:0;border-right:0;padding:28px 16px 26px;}
  .sidebar{border-left:0;border-right:0;padding:22px 16px;}
  .content-grid .sidebar{order:2;}
  .content-grid .article{order:1;}
  .side-block a:not(.btn){font-size:14px;}
}