/* =========================================================
   視差シリーズ 共通スタイル（全ページがこの1枚を読み込む）
   1か所直せば、全ページに反映されます。
   フォントは Noto Sans JP に統一。見出しはウェイト（900/800）と
   詰め（palt）で立て、本文は400でゆったり読ませる。
   ========================================================= */
:root{
  color-scheme: light;
  --font:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --paper:#eef4fa;
  --paper2:#ffffff;
  --tint:#e7f3ef;
  --ink:#1c2b39;
  --ink-soft:#5d6f7e;
  --rule:#d7e4ee;
  --hope:#13a884;
  --accent:#e6356b;
  --support:#f97b2f;
  --oppose:#2b93dd;
  --depth1:#7ad0b0;
  --depth2:#27b07c;
  --depth3:#0e8d5f;
  /* 影は3段階に統一（小=カード、中=浮き、大=ヒーロー） */
  --shadow-sm:0 2px 10px rgba(28,43,57,0.06);
  --shadow-md:0 10px 28px rgba(28,43,57,0.10);
  --shadow-lg:0 24px 60px rgba(28,43,57,0.13);
  /* 目次カテゴリ別カラー（index.htmlのテーマ別に色分け） */
  --cat-money:#d97706;     /* お金・税・財政：ゴールドオレンジ */
  --cat-life:#0e8d5f;      /* 仕事・くらし：ディープグリーン */
  --cat-welfare:#2b93dd;   /* 社会保障・福祉：ブルー */
  --cat-values:#e6356b;    /* 価値観・自分らしさ：ピンク */
  --cat-foreign:#1f4e8c;   /* 外交・安全保障：ネイビー */
  --cat-politics:#8b5cf6;  /* 政治・統治：パープル */
}
*{box-sizing:border-box;margin:0;padding:0;}
html{background:var(--paper);scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(circle at 8% 4%, rgba(249,123,47,0.10), transparent 38%),
    radial-gradient(circle at 92% 6%, rgba(43,147,221,0.10), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(19,168,132,0.10), transparent 45%);
}
::selection{background:rgba(19,168,132,0.22);}
.wrap{max-width:1180px;margin:0 auto;padding:40px 40px 90px;}

/* 旧・明朝クラス。全ページのHTMLが参照しているため名前は残し、
   中身を「太く・詰めたNoto」に差し替えて見出しの役を引き継ぐ */
.mincho{font-family:var(--font);font-feature-settings:"palt" 1;letter-spacing:.015em;}

a:focus-visible,
.topic-card:focus-visible{outline:3px solid rgba(43,147,221,0.55);outline-offset:2px;border-radius:10px;}

/* ===== ナビ（各ページ上下） ===== */
.nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 26px;flex-wrap:wrap;}
.nav a{font-size:13px;font-weight:700;text-decoration:none;color:var(--oppose);background:var(--paper2);padding:9px 16px;border-radius:999px;border:1px solid var(--rule);box-shadow:var(--shadow-sm);transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;}
.nav a:hover{color:#fff;background:var(--oppose);border-color:var(--oppose);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.nav a.home{color:var(--hope);}
.nav a.home:hover{background:var(--hope);border-color:var(--hope);color:#fff;}
.read-first{background:#e9faf2;border-left:5px solid var(--hope);border-radius:12px;padding:14px 18px;font-size:13px;color:var(--ink);margin-bottom:26px;box-shadow:var(--shadow-sm);}
.read-first a{color:var(--hope);font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(19,168,132,0.35);}
.read-first a:hover{border-bottom-color:var(--hope);}

/* ===== HERO ===== */
.hero{background:var(--paper2);border-radius:24px;padding:50px 48px 38px;margin-bottom:44px;box-shadow:var(--shadow-lg);border:1px solid #e6eff6;position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 94% 6%, rgba(249,123,47,0.12), transparent 42%),radial-gradient(circle at 4% 96%, rgba(19,168,132,0.14), transparent 44%);}
.hero-q{font-family:var(--font);font-weight:900;font-feature-settings:"palt" 1;font-size:clamp(38px,6.4vw,66px);line-height:1.14;letter-spacing:.01em;color:var(--ink);position:relative;}
.hero-q .mark{background:linear-gradient(transparent 58%, rgba(249,123,47,0.42) 58%);padding:0 .05em;}
.hero-sub{font-size:clamp(16px,2.4vw,22px);font-weight:700;color:var(--support);margin-top:14px;position:relative;}
.hero-steps{margin-top:30px;display:flex;flex-direction:column;gap:12px;position:relative;}
.step{background:var(--paper);border-radius:14px;padding:15px 22px;border-left:7px solid var(--depth1);box-shadow:var(--shadow-sm);}
.step.s2{border-left-color:var(--depth2);}
.step.s3{border-left-color:var(--depth3);background:#e9faf2;}
.step .tag{font-weight:800;font-feature-settings:"palt" 1;font-size:13px;letter-spacing:.05em;}
.step.s1 .tag{color:#3aa98a;}
.step.s2 .tag{color:#1d9468;}
.step.s3 .tag{color:#0c7a52;}
.step p{font-size:clamp(16px,2.3vw,21px);font-weight:700;color:var(--ink);margin-top:2px;}
.step em{font-style:normal;font-size:13px;font-weight:700;color:var(--accent);margin-left:6px;}
.hero-punch{margin-top:24px;border-radius:18px;padding:24px 28px;background:linear-gradient(135deg,#13a884 0%,#1f8fb0 55%,#2b76c9 100%);color:#fff;box-shadow:0 14px 34px rgba(19,140,150,0.28);position:relative;}
.hero-punch p{font-size:clamp(15px,2.2vw,20px);font-weight:700;line-height:1.7;}
.hero-punch p+p{margin-top:8px;}
.hero-punch b{color:#ffd83f;}
.hero-foot{margin-top:16px;font-size:12.5px;font-weight:500;color:var(--ink-soft);position:relative;}

/* ===== Header ===== */
header{border-bottom:4px solid var(--hope);padding-bottom:28px;margin-bottom:14px;}
.kicker{font-size:13px;letter-spacing:.18em;color:var(--accent);font-weight:700;margin-bottom:16px;}
h1{font-family:var(--font);font-weight:900;font-feature-settings:"palt" 1;font-size:clamp(28px,4.2vw,46px);line-height:1.22;letter-spacing:.01em;margin-bottom:16px;}
.lede{font-size:16px;color:var(--ink-soft);max-width:820px;}
.meta{margin-top:20px;font-size:12.5px;color:var(--ink-soft);letter-spacing:.03em;}

/* ===== 3つの問い ===== */
.axes-intro{font-size:15px;color:var(--ink-soft);margin:34px 0 14px;}
.axes-intro b{color:var(--ink);}
.axes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 40px;}
.axis{background:var(--paper2);padding:22px 24px;border-radius:16px;box-shadow:var(--shadow-sm);border-top:5px solid var(--hope);transition:transform .2s ease, box-shadow .2s ease;}
.axis:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.axis:nth-child(1){border-top-color:var(--support);}
.axis:nth-child(2){border-top-color:var(--hope);}
.axis:nth-child(3){border-top-color:var(--oppose);}
.axis h3{font-weight:800;font-feature-settings:"palt" 1;font-size:19px;margin-bottom:8px;}
.axis .ax-no{color:var(--accent);font-weight:900;}
.axis p{font-size:13.5px;color:var(--ink);}
.axis .tags{margin-top:10px;font-size:12px;color:var(--ink-soft);line-height:2;}

/* ===== よくあるパターンの帯 ===== */
.dynamic{background:linear-gradient(135deg,#13a884 0%,#1b86ad 60%,#2b6fc7 100%);color:#f0fbf7;padding:36px 42px;margin:14px 0 56px;border-radius:20px;position:relative;overflow:hidden;box-shadow:0 18px 44px rgba(19,120,140,0.22);}
.dynamic .label{font-size:12.5px;letter-spacing:.05em;color:#fff;opacity:.92;font-weight:700;margin-bottom:16px;}
.dynamic .core{font-weight:900;font-feature-settings:"palt" 1;font-size:clamp(17px,2.4vw,23px);color:#fff;line-height:1.6;margin-bottom:22px;letter-spacing:.01em;}
.flow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;}
.flow .node{flex:1;min-width:200px;padding:18px 22px;background:#ffffff;border-radius:14px;margin-right:6px;box-shadow:0 8px 22px rgba(8,42,58,0.20);}
.flow .node b{font-weight:800;font-feature-settings:"palt" 1;font-size:16px;display:block;margin-bottom:6px;color:var(--ink);}
.flow .node span{font-size:13px;color:#46586a;line-height:1.7;}
.flow .arrow{display:flex;align-items:center;justify-content:center;font-size:28px;color:#ffffff;padding:0 10px;text-shadow:0 1px 6px rgba(8,42,58,0.25);}
.dynamic .mirror{display:flex;gap:14px;margin-top:20px;flex-wrap:wrap;}
.dynamic .ex{flex:1;min-width:250px;font-size:12.5px;color:var(--ink);line-height:1.7;padding:14px 18px;background:#ffffff;border-radius:14px;box-shadow:0 8px 22px rgba(8,42,58,0.20);}
.dynamic .ex b{display:block;font-weight:800;font-feature-settings:"palt" 1;font-size:13px;margin-bottom:5px;}
.dynamic .ex.support-ex{border-left:5px solid var(--support);}
.dynamic .ex.support-ex b{color:#c2570e;}
.dynamic .ex.oppose-ex{border-left:5px solid var(--oppose);}
.dynamic .ex.oppose-ex b{color:#1b6fae;}
.dynamic .caption{margin-top:20px;font-size:13.5px;font-weight:500;color:#f4fdf9;background:rgba(6,42,52,0.26);padding:14px 18px;border-radius:12px;max-width:960px;}

/* ===== Section ===== */
.section-head{display:flex;align-items:baseline;gap:16px;margin:56px 0 22px;border-bottom:2px solid var(--rule);padding-bottom:12px;}
.section-head .pos-badge{font-weight:900;font-feature-settings:"palt" 1;font-size:23px;padding:4px 20px;color:#fff;border-radius:12px;letter-spacing:.06em;box-shadow:var(--shadow-sm);}
.section-head.support .pos-badge{background:var(--support);}
.section-head.oppose .pos-badge{background:var(--oppose);}
.section-head h2{font-weight:800;font-feature-settings:"palt" 1;font-size:22px;letter-spacing:.01em;}
.section-head .sub{font-size:13px;color:var(--ink-soft);margin-left:auto;}

/* ===== 深さの列見出し ===== */
.depth-header{display:grid;grid-template-columns:170px 1fr;gap:24px;margin:0 0 10px;}
.depth-header .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.depth-header .col{font-weight:800;font-feature-settings:"palt" 1;font-size:12.5px;letter-spacing:.04em;padding:5px 8px 9px;border-bottom:3px solid var(--rule);}
.depth-header .col.c1{color:#2c9e7a;border-bottom-color:var(--depth1);}
.depth-header .col.c2{color:#1d9468;border-bottom-color:var(--depth2);}
.depth-header .col.c3{color:#0c7a52;border-bottom-color:var(--depth3);}

/* ===== Driver row ===== */
.driver{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--rule);}
.driver:last-child{border-bottom:none;}
.driver-label{position:sticky;top:20px;align-self:start;}
.driver-label .dnum{font-size:12px;color:var(--accent);font-weight:800;letter-spacing:.08em;}
.driver-label .dname{font-weight:900;font-feature-settings:"palt" 1;font-size:18px;line-height:1.35;margin-top:2px;}
.driver-label .ddesc{font-size:11.5px;color:var(--ink-soft);margin-top:6px;}

/* ===== Cards：3列＝すぐ思う/考えると/深く読むと の縦レーン ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start;}
.card{min-width:0;background:var(--paper2);padding:18px 20px;border-left:5px solid var(--depth1);border-radius:14px;box-shadow:var(--shadow-sm);position:relative;transition:transform .22s ease, box-shadow .22s ease;}
.card.l1{grid-column:1;border-left-color:var(--depth1);}
.card.l2{grid-column:2;border-left-color:var(--depth2);}
.card.l3{grid-column:3;border-left-color:var(--depth3);}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.card .badge{display:inline-block;font-weight:800;font-feature-settings:"palt" 1;font-size:11.5px;letter-spacing:.05em;padding:3px 11px;border-radius:999px;margin-bottom:9px;}
.card.l1 .badge{background:var(--depth1);color:#0a4f3a;}
.card.l2 .badge{background:var(--depth2);color:#fff;}
.card.l3 .badge{background:var(--depth3);color:#fff;}
.card p{font-size:13.5px;color:var(--ink);line-height:1.76;}
.card .flag{margin-top:11px;font-size:11.5px;font-weight:700;color:var(--accent);border-top:1px dashed rgba(230,53,107,0.45);padding-top:8px;}
.card .robust{margin-top:8px;font-size:11px;color:var(--ink-soft);line-height:1.6;}
.card.ptalk{background:#fdeef4;border-left-color:var(--accent);box-shadow:0 0 0 1.5px rgba(230,53,107,0.30) inset, 0 6px 18px rgba(230,53,107,0.10);}
.card.ptalk:hover{box-shadow:0 0 0 1.5px rgba(230,53,107,0.40) inset, 0 12px 26px rgba(230,53,107,0.16);}
.card.ptalk .badge{background:var(--accent);color:#fff;}

/* ===== Footer notes（4つの約束。基本は統合ページのみ） ===== */
.notes{margin-top:64px;border-top:4px solid var(--hope);padding-top:30px;}
.notes h3{font-weight:900;font-feature-settings:"palt" 1;font-size:20px;margin-bottom:16px;}
.note-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.note-grid .n{font-size:13.5px;color:var(--ink-soft);line-height:1.78;background:var(--paper2);padding:18px 20px;border-radius:14px;box-shadow:var(--shadow-sm);border-left:5px solid var(--hope);}
.note-grid .n:nth-child(1){border-left-color:var(--support);}
.note-grid .n:nth-child(2){border-left-color:var(--depth2);}
.note-grid .n:nth-child(3){border-left-color:var(--accent);}
.note-grid .n:nth-child(4){border-left-color:var(--oppose);}
.note-grid .n b{color:var(--ink);font-weight:800;}
.legend-depth{display:flex;gap:20px;margin:22px 0 0;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft);}
.legend-depth span{display:flex;align-items:center;gap:7px;}
.swatch{width:22px;height:12px;display:inline-block;border-radius:4px;}

/* ===== 統合ページの目次グリッド ===== */
.cat-head{font-weight:800;font-feature-settings:"palt" 1;font-size:16px;color:var(--accent);margin:30px 0 8px;letter-spacing:.05em;}
.topic-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
.topic-card{display:block;background:var(--paper2);border-radius:14px;padding:15px 18px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);border-left:5px solid var(--hope);transition:transform .18s ease, box-shadow .18s ease;}
.topic-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.topic-card .t{font-weight:800;font-feature-settings:"palt" 1;font-size:16px;}
.topic-card .q{font-size:12px;color:var(--ink-soft);margin-top:4px;}
.topic-card.soon{opacity:.55;pointer-events:none;border-left-color:var(--rule);}
.topic-card .badge-soon{display:inline-block;font-size:10px;font-weight:700;color:var(--ink-soft);background:var(--rule);border-radius:4px;padding:1px 6px;margin-left:6px;}

/* ===== カテゴリ別の色分け（目次） ===== */
.cat-head.cat-money    {color:var(--cat-money);}
.cat-head.cat-life     {color:var(--cat-life);}
.cat-head.cat-welfare  {color:var(--cat-welfare);}
.cat-head.cat-values   {color:var(--cat-values);}
.cat-head.cat-foreign  {color:var(--cat-foreign);}
.cat-head.cat-politics {color:var(--cat-politics);}

.topic-index.cat-money    .topic-card{border-left-color:var(--cat-money);}
.topic-index.cat-life     .topic-card{border-left-color:var(--cat-life);}
.topic-index.cat-welfare  .topic-card{border-left-color:var(--cat-welfare);}
.topic-index.cat-values   .topic-card{border-left-color:var(--cat-values);}
.topic-index.cat-foreign  .topic-card{border-left-color:var(--cat-foreign);}
.topic-index.cat-politics .topic-card{border-left-color:var(--cat-politics);}

.topic-index.cat-money    .topic-card:hover{box-shadow:0 12px 26px rgba(217,119,6,0.22);}
.topic-index.cat-life     .topic-card:hover{box-shadow:0 12px 26px rgba(14,141,95,0.22);}
.topic-index.cat-welfare  .topic-card:hover{box-shadow:0 12px 26px rgba(43,147,221,0.22);}
.topic-index.cat-values   .topic-card:hover{box-shadow:0 12px 26px rgba(230,53,107,0.22);}
.topic-index.cat-foreign  .topic-card:hover{box-shadow:0 12px 26px rgba(31,78,140,0.22);}
.topic-index.cat-politics .topic-card:hover{box-shadow:0 12px 26px rgba(139,92,246,0.22);}

.topic-index.cat-money    .topic-card .t{color:var(--cat-money);}
.topic-index.cat-life     .topic-card .t{color:var(--cat-life);}
.topic-index.cat-welfare  .topic-card .t{color:var(--cat-welfare);}
.topic-index.cat-values   .topic-card .t{color:var(--cat-values);}
.topic-index.cat-foreign  .topic-card .t{color:var(--cat-foreign);}
.topic-index.cat-politics .topic-card .t{color:var(--cat-politics);}

@media(max-width:760px){
  .wrap{padding:28px 18px 60px;}
  .hero{padding:32px 22px;border-radius:18px;}
  .axes{grid-template-columns:1fr;}
  .depth-header{display:none;}
  .driver{grid-template-columns:1fr;gap:12px;}
  .driver-label{position:static;}
  .cards{grid-template-columns:1fr;}
  .card.l1,.card.l2,.card.l3{grid-column:auto;}
  .note-grid{grid-template-columns:1fr;}
  .flow .arrow{transform:rotate(90deg);}
  .section-head{flex-wrap:wrap;}
  .section-head .sub{margin-left:0;}
}

/* ===== 賛成・反対セクションを背景色で視覚的に分離 ===== */
.positionwrap{margin:40px 0;padding:24px 26px 10px;border-radius:20px;position:relative;}
.positionwrap.support{background:rgba(249,123,47,0.06);border-left:5px solid var(--support);}
.positionwrap.oppose{background:rgba(43,147,221,0.06);border-left:5px solid var(--oppose);}
.positionwrap .section-head{margin-top:0;border-bottom-color:rgba(28,43,57,0.10);}
.positionwrap .driver{border-bottom-color:rgba(28,43,57,0.08);}
.positionwrap .driver:last-child{border-bottom:none;}
@media(max-width:760px){
  .positionwrap{padding:18px 14px 8px;border-radius:14px;}
}

/* ===== キーワードハイライト（★の看板語などを黄色マーカー風に） ===== */
.card p mark, .card .robust mark, .card .flag mark{
  background:linear-gradient(transparent 58%, rgba(255,216,63,0.55) 58%);
  color:inherit;
  padding:0 1px;
  font-weight:700;
  font-style:normal;
}
.card p b, .robust b{
  background:linear-gradient(transparent 58%, rgba(255,216,63,0.50) 58%);
  padding:0 1px;
  font-weight:700;
}
.card.ptalk p mark{
  background:linear-gradient(transparent 56%, rgba(230,53,107,0.30) 56%);
}

/* ===== 入場アニメーション（カードは行内でわずかに時間差） ===== */
.card,.driver,.axis{opacity:0;animation:rise .55s ease forwards;}
@keyframes rise{to{opacity:1;transform:translateY(0);}}
.card{transform:translateY(8px);}
.cards .card:nth-child(2){animation-delay:.07s;}
.cards .card:nth-child(3){animation-delay:.14s;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .card,.driver,.axis{opacity:1;animation:none;transform:none;}
  .card,.nav a,.axis,.topic-card{transition:none;}
}