:root{
  --ink:#141416;
  --sub:#6e6a6c;
  --line:#dedadb;
  --gray:#f6f4f4;
  --red:#f00200;       /* ヒーローのKVと同じ赤に統一（2026-08-26） */
  --red-dp:#cc0200;    /* ホバー時。--red を少し沈めたもの */
  --paper:#ffffff;
  --dark:#141416;
  --dark-tx:#e9e6e6;
  --dark-sub:#a9a4a5;
  --maxw:680px;
  --fs:19px;

  /* ヒーロー（KVの実測色。ポスター面だけに使う） */
  --kv-red:#f00200;
  --kv-ink:#0b0a0a;
  --logofs:clamp(58px,29.5vw,132px);
  --x:.667;
  --ky:0px;
  --krot:0deg;   /* 傾きなし。前原さん確認で「一直線で大丈夫」(2026-08-28) */

  /* 秋のパレット（参考サイト college8.jp のSVG実測値。枠・バッジ・背景に使う） */
  --au-red:#EB2846;
  --au-vermilion:#F03700;
  --au-orange:#FF8228;
  --au-orange-lt:#FF9B50;
  --au-magenta:#AB00CD;
  --au-purple:#613491;

  /* 2カラム（左＝ページナビ／中央＝本文） */
  --col-left:240px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-text-size-adjust:100%}
html{scroll-behavior:smooth}
body{
  font-family:"Satoshi","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:500;
  color:var(--ink);
  background:var(--paper);
  font-size:var(--fs);
  line-height:1.8;
  font-feature-settings:"palt" 1;
  letter-spacing:.01em;
}
img{max-width:100%;display:block}
section{padding:80px 22px}
.wrap{max-width:var(--maxw);margin:0 auto}
/* ページ上半分の .badge-stmt と同じピル。下半分の見出しもこれで揃える */
.eyebrow{
  display:inline-block;margin-bottom:18px;
  font-family:"Satoshi",sans-serif;font-weight:900;font-size:12px;
  letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;
  color:#fff;padding:7px 15px 6px;border-radius:999px;line-height:1.2;
  background:linear-gradient(100deg,var(--au-red) 0%,var(--au-vermilion) 62%,var(--au-orange) 100%);
  box-shadow:0 4px 14px rgba(240,55,0,.22);
}
h2.sec{
  font-weight:900;font-size:clamp(26px,6.6vw,36px);line-height:1.35;
  letter-spacing:-.015em;text-wrap:balance;
}
.note{margin-top:18px;color:var(--sub);font-size:16.5px;line-height:1.9}
.num{font-family:"Satoshi",sans-serif;font-variant-numeric:tabular-nums}

/* ============================================================
   SITE HEADER  … サイト共通。ロゴとハンバーガーだけを持つ
   ============================================================ */
.site{
  position:fixed;z-index:20;
  top:calc(env(safe-area-inset-top) + 13px);left:14px;right:14px;
  display:flex;align-items:center;justify-content:space-between;
  pointer-events:none;                      /* 中身だけクリックできるようにする */
}
.site > *{pointer-events:auto}
.site-brand{
  font-size:17px;font-weight:900;letter-spacing:.2em;color:#fff;text-decoration:none;
  animation:fadein .5s ease .1s both;
  transition:color .25s ease;
}
/* 明るい背景のセクションに差しかかったら、文字色を反転させる。
   背景の濃さは data-hd="dark" を付けたセクションで判定する（JS） */
.site.on-light .site-brand{color:var(--ink)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  min-height:100svh;display:flex;align-items:center;
  background:var(--kv-red);color:var(--kv-ink);
  padding:
    calc(env(safe-area-inset-top) + 64px)
    22px
    calc(env(safe-area-inset-bottom) + 40px);
}

/* ---- 背面「変える。」 ---- */
.kaeru{
  position:absolute;inset:0;pointer-events:none;user-select:none;overflow:hidden;
  /* 22秒周期で上下させる「呼吸」を入れていたが、11秒かけて18px という
     速度が「登場後にゆっくり沈んで止まる不具合」に見えるため撤去（2026-08-28） */
}
/* KV と同じ縦組み。flex ではなく right/top で直接置く（flex+translate だと
   はみ出し量が読みづらく、SPで画面外まで飛ぶ事故が起きた） */
.kaeru b{
  --kr:0%;                     /* 右端からの位置。マイナスで画面外へはみ出す */
  --ky:0px;                    /* 天地の微調整。プラスで下へ */
  --krot:0deg;                 /* 傾き。プラスで右に倒れる。0＝一直線(2026-08-28) */
  position:absolute;top:50%;right:var(--kr);   /* top は alignKaeru() が実測値で上書きする */
  writing-mode:vertical-rl;text-orientation:upright;
  white-space:nowrap;          /* 4文字を必ず1列に保つ（折り返すと字順が読めない） */
  font-weight:900;font-size:min(23svh,50vw);
  letter-spacing:-.07em;line-height:1;
  color:#fff;opacity:.94;
  transform:translate(0,calc(-50% + var(--ky))) rotate(var(--krot));
}

/* ---- 本文：1本の縦の流れ。余白は各要素の margin-top だけで決まる ---- */
.hero-body{position:relative;z-index:2;width:100%}
.hero-body > * + *{margin-top:0}   /* 既定の隙間は持たせない。下で個別に指定する */

/* 「地方政治革命」を 2列×3行の塊で組む（KV再現） */
.logo{
  display:grid;grid-template-columns:repeat(2,1fr);
  width:max-content;
  font-weight:900;line-height:.9;letter-spacing:-.02em;
  font-size:var(--logofs);
}
.logo span{display:block;overflow:hidden}
.logo span i{display:block;font-style:normal}

.yr i{font-style:normal}
.yr{
  margin-top:clamp(4px,.8svh,12px);
  width:max-content;
  font-family:"Satoshi",sans-serif;font-weight:900;
  font-size:calc(var(--logofs) * .662);   /* .827 でロゴ2文字と同幅。その80% */
  letter-spacing:-.03em;line-height:.95;
  color:#fff;
}
.cat{
  margin-top:clamp(16px,3svh,34px);
  font-weight:900;letter-spacing:-.01em;line-height:1.35;
  font-size:clamp(19px,5.4vw,30px);
  max-width:15em;
}
.goal{
  margin-top:clamp(10px,1.6svh,16px);
  font-size:clamp(12px,3.1vw,14.5px);font-weight:700;line-height:1.75;
  color:rgba(255,255,255,.92);max-width:24em;
}
.belt{
  margin-top:calc(clamp(20px,3.4svh,40px) - 5px);   /* 画面比の余白から一律5px引く */
  background:var(--kv-ink);color:#fff;
  display:flex;flex-wrap:wrap;align-items:center;gap:0 .55em;
  padding:11px 15px;width:max-content;max-width:100%;
  font-weight:900;font-size:clamp(13px,3.7vw,19px);letter-spacing:.02em;
}
.belt em{font-style:normal;font-family:"Satoshi",sans-serif;opacity:.55;font-weight:700}
.fin{
  margin-top:clamp(12px,2svh,20px);
  font-weight:900;line-height:1.25;letter-spacing:-.02em;
  font-size:clamp(21px,6.1vw,42px);
}
.fin .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.fin .w i{display:block;font-style:normal}

@keyframes fadein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* iPhone 14 クラス（縦に余裕のある端末）だけ、本文の塊ごと 50px 上へ。
   align-items:center は margin 込みで中央を取るので、下 margin 100px = 上へ50px */
@media (max-width:899px) and (min-height:721px){
  .hero-body{margin-bottom:80px}
}

/* iPhone SE のように縦が短い端末は、そのままだと黒帯が注釈に重なるので一段落とす */
@media (max-width:899px) and (max-height:720px){
  :root{--logofs:clamp(58px,26vw,132px)}
  .kaeru b{font-size:min(23.5svh,48vw)}
  .hero{padding-top:calc(env(safe-area-inset-top) + 44px);
        padding-bottom:calc(env(safe-area-inset-bottom) + 32px)}
}

/* ---- PC ---- */
@media (min-width:900px){
  /* 縦にも幅にも収まるサイズ。svh を効かせて、低いウィンドウでの溢れを防ぐ */
  :root{--logofs:min(13vw,24svh,275px)}
  .site{top:26px;left:56px;right:56px}
  .hero{padding:96px 56px 72px 96px}
  .hero-body{max-width:none}

  /* ロゴを「地方政治革命」1行に組み替える（HTMLは変えない）。
     6カラムにすれば6文字が自動で1行に並ぶ */
  .logo{grid-template-columns:repeat(6,max-content);letter-spacing:-.06em}

  /* 2027 を漢字2文字ぶんの横幅に揃える（字間 -.06em での実測から .794） */
  .yr{font-size:calc(var(--logofs) * .794)}

  /* コピーは2本とも1行に */
  .cat,.goal{max-width:none}
  .cat br,.goal br{display:none}
  .cat{font-size:clamp(24px,2.4vw,34px)}
  .goal{font-size:clamp(13px,1.667vw,30px)}
  .fin{font-size:clamp(30px,3.47vw,60px)}   /* 1440 でちょうど50px */

  .kaeru b{--kr:calc(21% - 200px); --ky:100px; font-size:min(27.5svh,38.6vw)}
  .belt{padding:13px 20px}
}

/* ============================================================
   アニメーション
   ============================================================ */
/* 初期状態（.play が付くまで隠す） */
/* 「変える。」は最後にドンと出るので、最初は消しておく */
.hero[data-anim] .kaeru b{opacity:0}
/* ロゴと2027はタイピング。1文字ずつ、動きなしで現れる */
.hero[data-anim] .logo span i,
.hero[data-anim] .yr i{opacity:0}
.hero[data-anim] .cat,
.hero[data-anim] .goal{opacity:0;transform:translateY(12px)}
.hero[data-anim] .belt{clip-path:inset(0 100% 0 0)}
.hero[data-anim] .fin .w i{transform:translateY(105%)}

/* 再生 */
/* 大きい状態から縮んで着地し、行きすぎて戻る。最後のひと押し */
@keyframes kaeru-in{
  0%  {opacity:0;   transform:translate(0,calc(-50% + var(--ky))) rotate(var(--krot)) scale(1.55)}
  55% {opacity:.94; transform:translate(0,calc(-50% + var(--ky))) rotate(var(--krot)) scale(.93)}
  76% {opacity:.94; transform:translate(0,calc(-50% + var(--ky))) rotate(var(--krot)) scale(1.04)}
  90% {opacity:.94; transform:translate(0,calc(-50% + var(--ky))) rotate(var(--krot)) scale(.99)}
  100%{opacity:.94; transform:translate(0,calc(-50% + var(--ky))) rotate(var(--krot)) scale(1)}
}
.hero.play .kaeru b{
  animation:kaeru-in calc(.92s * var(--x)) cubic-bezier(.3,.85,.35,1) calc(2.45s * var(--x)) both;
}

/* タイピング。動かさず、瞬間的に現れることで「打った」に見せる。
   地方政治革命(6文字) → 2027(4文字) を 0.10秒間隔で続けて打つ */
.hero.play .logo span i,
.hero.play .yr i{opacity:1;transition:opacity 0s linear}
.hero.play .logo span:nth-child(1) i{transition-delay:calc(.30s * var(--x))}
.hero.play .logo span:nth-child(2) i{transition-delay:calc(.40s * var(--x))}
.hero.play .logo span:nth-child(3) i{transition-delay:calc(.50s * var(--x))}
.hero.play .logo span:nth-child(4) i{transition-delay:calc(.60s * var(--x))}
.hero.play .logo span:nth-child(5) i{transition-delay:calc(.70s * var(--x))}
.hero.play .logo span:nth-child(6) i{transition-delay:calc(.80s * var(--x))}
.hero.play .yr i:nth-child(1){transition-delay:calc(.92s * var(--x))}
.hero.play .yr i:nth-child(2){transition-delay:calc(1.02s * var(--x))}
.hero.play .yr i:nth-child(3){transition-delay:calc(1.12s * var(--x))}
.hero.play .yr i:nth-child(4){transition-delay:calc(1.22s * var(--x))}
.hero.play .cat{opacity:1;transform:none;transition:opacity calc(.55s * var(--x)) ease calc(1.42s * var(--x)),transform calc(.65s * var(--x)) cubic-bezier(.2,.86,.24,1) calc(1.42s * var(--x))}
.hero.play .goal{opacity:1;transform:none;transition:opacity calc(.55s * var(--x)) ease calc(1.56s * var(--x)),transform calc(.65s * var(--x)) cubic-bezier(.2,.86,.24,1) calc(1.56s * var(--x))}
.hero.play .belt{clip-path:inset(0 0 0 0);transition:clip-path calc(.72s * var(--x)) cubic-bezier(.72,0,.2,1) calc(1.70s * var(--x))}
.hero.play .fin .w i{transform:none;transition:transform calc(.6s * var(--x)) cubic-bezier(.2,.86,.24,1)}
.hero.play .fin .w:nth-child(1) i{transition-delay:calc(2.06s * var(--x))}
.hero.play .fin .w:nth-child(2) i{transition-delay:calc(2.14s * var(--x))}
.hero.play .fin .w:nth-child(3) i{transition-delay:calc(2.22s * var(--x))}

@media (prefers-reduced-motion:reduce){
  .hero[data-anim] *{opacity:1 !important;transform:none !important;clip-path:none !important}
  .hero.play *{transition:none !important;animation:none !important}
  .hero.play .kaeru b{opacity:.94 !important}
}

/* ============ 2+3. ステートメント（左固定）／八策（右カード送り） ============ */

/* --- 共通パーツ：グラデーションのバッジ --- */
.badge{
  display:inline-block;font-weight:900;font-size:12px;letter-spacing:.22em;
  color:#fff;padding:7px 15px 6px;border-radius:999px;line-height:1.2;
  text-align:center;text-indent:.22em;   /* letter-spacing の末尾アキぶんを戻して、文字を中央に見せる */
  background:linear-gradient(100deg,var(--au-red) 0%,var(--au-vermilion) 62%,var(--au-orange) 100%);
  box-shadow:0 4px 14px rgba(240,55,0,.22);
}
.badge-stmt{font-family:"Satoshi",sans-serif;letter-spacing:.26em}

/* --- 外枠（スクロールの持ち分をここで確保する） --- */
.duo{padding:0;background:var(--gray)}
.duo-track{position:relative}
.duo-sticky{padding:34px 26px}
.duo-inner{max-width:1420px;margin:0 auto}

/* --- 左：ステートメント --- */
.stmt-jp{
  margin-top:16px;font-weight:900;font-size:15px;letter-spacing:.16em;color:var(--sub);
}
.duo-left .big{
  margin-top:22px;
  font-size:clamp(20px,2.0vw,27px);font-weight:900;line-height:1.62;letter-spacing:-.015em;
}
.duo-left .em{color:var(--red)}
.mono-rule{
  margin-top:26px;padding:20px 22px;background:#fff;border-left:5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(180deg,var(--au-red),var(--au-orange) 60%,var(--au-purple)) border-box;
}
.mono-rule .mr-t{margin-top:0;font-size:clamp(17px,1.45vw,20px);font-weight:900;line-height:1.55;letter-spacing:-.01em}
.mono-rule p{margin-top:12px;font-size:15px;line-height:1.85;color:#464243}
.duo-left .after{margin-top:22px;font-size:15px;line-height:1.9;color:#464243}
.duo-left .after strong{font-weight:900;color:var(--ink)}

/* --- 右：八策 --- */
.sakuhead{padding:0;display:flex;justify-content:flex-end;align-items:baseline;gap:14px}
.sakuhead .en{
  font-family:"Satoshi",sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:.28em;color:var(--sub);
}
.saku-steps{list-style:none;display:flex;gap:4px;margin:12px 0 14px}
.saku-steps li{
  height:1px;flex:1 1 0;border-radius:0;background:#d8d4d5;transition:background .3s ease;
}
.saku-steps li.on{
  background:linear-gradient(90deg,var(--au-red),var(--au-orange));
}

.saku-stage{position:relative}
.saku-card{
  border:5px solid transparent;border-radius:18px;padding:26px 30px 24px;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg,var(--au-red) 0%,var(--au-vermilion) 30%,var(--au-orange) 62%,var(--au-purple) 100%) border-box;
  box-shadow:0 14px 40px rgba(20,20,22,.07);
  display:flex;flex-direction:column;
}
/* flex の子は既定で横いっぱいに伸びるので、バッジだけ中身の幅に縮めて中央へ */
.saku-card .badge-saku{align-self:center;width:90px}   /* 中身の幅に近い固定値。中央寄せ */

.saku-card h2{
  margin-top:14px;font-weight:900;font-size:clamp(21px,1.85vw,27px);
  line-height:1.34;letter-spacing:-.02em;
}
.card-rule{
  margin-top:14px;height:2px;width:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--au-red),var(--au-orange) 70%,var(--au-orange-lt));
}
.card-body{margin-top:12px;min-height:0;overflow:auto;flex:1 1 auto}
.card-body > h2:first-child{margin-top:0}   /* スクロール領域の先頭なので上マージンは不要 */
.saku-card p{margin-top:14px;color:#464243;font-size:15px;line-height:1.85}
/* 「有権者の物差し」。PCでは中に画像を横並びで抱える（2026-08-27）。
   画像を縦に積むと、カードの中身の半分を画像が占めて画面の低いPCで溢れる。
   横に置けば縦を食わない。比率は sample.pptx の座標に合わせた（文字52 : 画像46） */
.gauge{
  margin-top:14px;border:1px solid var(--line);background:var(--gray);
  padding:13px 15px;border-radius:12px;
  display:grid;
  grid-template-columns:minmax(0,52fr) minmax(0,46fr);
  grid-template-areas:
    "label ."
    "text  art";
  column-gap:14px;align-items:start;
}
.gauge .k{grid-area:label}
.gauge .t{grid-area:text}
.gauge .saku-art{grid-area:art}
.saku-art picture{display:contents}   /* picture が挟まっても図の中身は figure 直下と同じ扱いに */
/* 画像がカードの中身に混ざらないよう、gauge の外に置いていた頃の余白は消す */
.gauge .saku-art{margin:0}
.gauge .k{
  font-family:"Satoshi",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.2em;
  color:var(--au-vermilion);display:block;margin-bottom:6px;
}
.gauge .k em{font-style:normal;font-family:"Zen Kaku Gothic New",sans-serif;letter-spacing:.14em}
.gauge .t{font-size:15px;font-weight:700;line-height:1.7}
.record{
  margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;font-size:14px;line-height:1.8;color:#464243;
}
.record b{display:block;margin-bottom:6px;color:var(--ink);font-weight:900}
.shift{margin-top:12px;font-size:15px;line-height:1.95;color:#464243}
.shift span{display:block}
.shift span::before{content:"→ ";color:var(--au-vermilion);font-weight:900}

/* --- 画像エリア（あとでライズのイラストが入る空き枠） --- */
.saku-art{
  margin:18px 0 2px;width:100%;aspect-ratio:16/9;
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  border:1px solid rgba(240,55,0,.16);
  background:linear-gradient(115deg,
    rgba(255,155,80,.20) 0%,rgba(240,55,0,.10) 48%,rgba(97,52,145,.12) 100%);
}
.saku-art img{width:100%;height:100%;object-fit:cover}   /* 枠を埋める。はみ出しは切る */

/* --- PC（1100px以上）：左固定＋右カード送り --- */
@media (min-width:1100px){
  .duo{--duo-steps:8}
  .duo-track{height:calc((var(--duo-steps) + 1) * 100vh)}
  /* 左端をヒーローの文字要素（96px）に揃える。右は 56px でヒーローと同じ */
  /* 左右を同じにする。左端はヒーローの文字要素（96px）と一致させたいので、両方96px */
  .duo-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;
              padding:34px 96px}

  /* ヒーローと八策のあいだの余白。
     ⚠️ .duo に padding や margin を足してはいけない。
        padding はトラックの高さを変えて8枚の割り当て（span = offsetHeight - innerHeight）を狂わせ、
        margin は .duo の背景の外側になるので、そこだけ白く抜ける。
        そこで .duo-track の前に、背景付きの帯（::before）を差し込む。
        トラックの高さには含まれないので計算は無傷、背景も .duo のものが乗る。
        固定されたあとの上余白は .duo-sticky の padding-top（34px）が担う。 */
  .duo::before{content:"";display:block;height:120px}

  /* 八策と宣言のあいだにも同じ幅の余白を入れる。
     帯は八策側（--gray）に付けて、白い .decl との境目をそこで作る。
     .duo の末尾に ::after として置けば、トラックの高さには含まれない */
  .duo::after{content:"";display:block;height:120px}
  .duo-inner{max-width:none}
  .duo-inner{
    width:100%;height:calc(100vh - 68px);
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;
  }
  .duo-left{max-height:100%;overflow:auto}
  .duo-right{display:flex;flex-direction:column;height:100%;min-height:0;justify-content:center}
  /* 8枚を同じグリッドのマスに重ねる。行の高さは「いちばん背の高いカード」に
     揃うので、カードの縦幅が中身ぶんまで縮む(2026-08-27)。
     絶対配置(inset:0)だと画面の高さいっぱいに伸びて、下に空きができていた。
     8枚とも同じ高さになるので、切り替わるときに箱が伸び縮みしない。 */
  .saku-stage{
    flex:0 1 auto;min-height:0;max-height:100%;
    display:grid;align-content:center;
  }
  .saku-card{
    grid-area:1 / 1;min-height:0;max-height:100%;
    opacity:0;visibility:hidden;transform:translateY(16px) scale(.985);
    transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s;
  }
  .saku-card.on{
    opacity:1;visibility:visible;transform:none;
    transition:opacity .45s ease,transform .45s ease,visibility 0s;
  }
}

/* --- SP・タブレット：ふつうの縦積み（PC優先のため簡素なまま） --- */
@media (max-width:1099px){
  .duo-sticky{padding:80px 22px}
  .duo-inner{display:block}
  .duo-right{margin-top:56px}
  .saku-card{position:static;opacity:1;visibility:visible;transform:none}
  .saku-card + .saku-card{margin-top:22px}
  .saku-steps{display:none}
}

/* ============ 4. 宣言（反転） ============ */
.decl{background:#fff;color:var(--ink)}
.decl .eyebrow{color:var(--red)}
.decl .eyebrow::before{background:var(--red)}
.decl h2.sec{color:var(--ink)}
.decl p:not(.stmt-jp):not(.fin):not(.sig):not(.pf){margin-top:24px;font-size:17.5px;line-height:1.95;color:#464243}
.decl .hi{color:var(--ink);font-weight:900}
.decl .fin{
  margin-top:52px;padding-top:0;
  font-size:clamp(21px,5.4vw,30px);font-weight:900;line-height:1.7;color:var(--ink);letter-spacing:-.015em;
}
.decl .sig{
  margin-top:26px;font-size:15px;font-weight:900;letter-spacing:.2em;color:var(--red);
}

/* ============ 5. ブリッジ（蝶番） ============ */
/* 議員図鑑への入口。WebGL のグラデーションを背景に敷くヒーロー扱い */
.bridge{
  position:relative;overflow:hidden;isolation:isolate;
  text-align:center;
  background:var(--au-vermilion);   /* WebGL が使えない環境のフォールバック */
  color:#fff;
}
.grd-canvas{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
.bridge .wrap{position:relative;z-index:1}
.bridge .mark{
  width:1px;height:56px;background:rgba(255,255,255,.5);margin:0 auto 34px;
}
.bridge .step{
  margin-top:44px;font-family:"Satoshi",sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.28em;color:rgba(255,255,255,.78);
}
.bridge h2{
  margin-top:16px;font-weight:900;font-size:clamp(27px,7.2vw,40px);
  line-height:1.34;letter-spacing:-.02em;
}
.bridge .sub{margin-top:16px;font-size:17px;color:rgba(255,255,255,.9);line-height:1.9}
/* 色の上に乗るので、ボタンは白基調に反転させる */
.bridge .btn-main{background:#fff;color:var(--red);border-color:#fff}
.bridge .btn-main:hover{background:rgba(255,255,255,.86);border-color:rgba(255,255,255,.86);color:var(--red)}
.bridge .btn-sub{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
.bridge .btn-sub:hover{background:#fff;color:var(--red);border-color:#fff}
.bridge .btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---- ボタン ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:900;font-size:17px;letter-spacing:.02em;text-decoration:none;
  padding:17px 56px;border:2px solid var(--red);border-radius:999px;transition:.18s ease;
  min-width:280px;
}
.btn-main{background:var(--red);color:#fff}
.btn-main:hover{background:var(--red-dp);border-color:var(--red-dp)}
.btn-sub{background:transparent;color:var(--red)}
.btn-sub:hover{background:var(--red);color:#fff}
.btn:focus-visible{outline:3px solid #0e0c0d;outline-offset:3px}
/* SPは画面幅が足りないので min-width を外して自然に縮める */
@media (max-width:719px){
  .btn{min-width:0;padding:16px 34px;width:100%}
}
.cta-row{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ============ 6-10. 議員図鑑パート ============ */
.zukan-open{background:var(--gray)}
.zukan-open .title{
  font-weight:900;font-size:clamp(34px,9.5vw,54px);letter-spacing:.06em;line-height:1.15;
}
.zukan-open .cap{margin-top:12px;font-size:19px;font-weight:900;color:var(--red)}
.zukan-open .desc{margin-top:24px;font-size:17.5px;line-height:1.92;color:#464243}
.chips{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.chips span{
  border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:700;
  padding:7px 13px;color:#464243;
}
.disclose{
  margin-top:32px;border:1px solid var(--line);border-left:5px solid var(--red);
  background:#fff;padding:22px 22px;font-size:16px;line-height:1.9;color:#464243;
}
.disclose .p2{display:block;margin-top:12px}
.disclose b{display:block;font-weight:900;color:var(--ink);margin-bottom:10px;font-size:17px}

/* タイムテーブル */
.tt{margin-top:34px;border-top:1px solid var(--line)}
.tt .row{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.tt .row.key{background:linear-gradient(90deg,rgba(184,18,31,.05),transparent)}
.tt .t{
  flex:none;width:70px;font-family:"Satoshi",sans-serif;font-weight:900;font-size:14px;
  color:var(--red);line-height:1.4;font-variant-numeric:tabular-nums;padding-top:3px;
}
.tt .t small{display:block;font-size:10.5px;font-weight:500;color:var(--sub);letter-spacing:.14em}
.tt h3{font-size:19px;font-weight:900;line-height:1.5}
.tt p{margin-top:8px;font-size:16px;line-height:1.85;color:#464243}
@media(min-width:620px){}

/* 中間CTA */
/* First Step と同じ WebGL のグラデーションを敷く。赤はフォールバック */
.midcta{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--kv-red);color:#fff;text-align:center;padding:100px 22px;
}
.midcta > .wrap{position:relative;z-index:1}
.midcta p{font-size:clamp(19px,5vw,25px);font-weight:900;line-height:1.6;letter-spacing:-.01em}
.midcta .btn-main{margin-top:26px;border-color:#fff}
.midcta .btn-main:hover{background:#fff;color:var(--red)}

/* ============ 11. フォーム ============ */
.apply{background:#fff;border-top:1px solid var(--line)}
.f{margin-top:36px}
.fld{margin-top:26px}
.fld:first-child{margin-top:0}
.lb{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:900;margin-bottom:10px}
.req,.opt{
  font-family:"Satoshi",sans-serif;font-size:10px;font-weight:900;letter-spacing:.14em;
  padding:3px 7px;flex:none;
}
.req{background:var(--red);color:#fff}
.opt{background:var(--gray);color:var(--sub);border:1px solid var(--line)}
.hint{font-size:14px;color:var(--sub);margin-bottom:10px;line-height:1.75}
input[type=text],input[type=email],input[type=url],input[type=tel],textarea,select{
  width:100%;font-family:inherit;font-size:16.5px;font-weight:500;color:var(--ink);
  background:#fff;border:1px solid var(--line);padding:14px 15px;border-radius:0;
  line-height:1.7;transition:border-color .15s ease;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(184,18,31,.12)}
textarea{min-height:118px;resize:vertical}
.two{display:grid;gap:12px}
@media(min-width:560px){.two{grid-template-columns:1fr 1fr}}
.radios{display:grid;gap:10px}
@media(min-width:560px){.radios{grid-template-columns:1fr 1fr}}
.radios label{
  display:flex;align-items:center;gap:11px;border:1px solid var(--line);
  padding:15px 16px;font-size:16px;font-weight:700;cursor:pointer;transition:.15s ease;
}
.radios label:hover{border-color:var(--red)}
.radios input{accent-color:var(--red);width:19px;height:19px;flex:none}
.radios input:checked + span{color:var(--red)}
.agree{margin-top:14px;border:1px solid var(--line);background:var(--gray);padding:8px 18px}
.agree label{
  display:flex;gap:13px;align-items:flex-start;padding:15px 0;font-size:15.5px;line-height:1.75;
  cursor:pointer;border-top:1px solid var(--line);
}
.agree label:first-child{border-top:none}
.agree input{accent-color:var(--red);width:20px;height:20px;flex:none;margin-top:2px}
.agree a{color:var(--red);font-weight:700}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{
  display:none;margin-top:8px;font-size:14.5px;font-weight:700;color:var(--red);
}
.fld.bad input,.fld.bad textarea{border-color:var(--red);background:#fff8f8}
.fld.bad .err{display:block}
.submit{margin-top:34px;text-align:center}
.submit .btn{width:100%;max-width:360px;font-size:18px;padding:19px 34px}
.submit .btn[disabled]{opacity:.55;pointer-events:none}
.formerr{
  display:none;margin-top:20px;border:2px solid var(--red);background:#fff8f8;
  padding:16px 18px;font-size:15.5px;font-weight:700;color:var(--red);line-height:1.7;
}
.formerr.on{display:block}
.done{display:none;border:2px solid var(--red);padding:38px 26px;text-align:center}
.done.on{display:block}
.done .n{font-family:"Satoshi",sans-serif;font-size:11.5px;font-weight:900;letter-spacing:.26em;color:var(--red)}
.done h3{margin-top:14px;font-size:clamp(22px,5.6vw,28px);font-weight:900;line-height:1.5}
.done p{margin-top:16px;font-size:16px;line-height:1.9;color:#464243}
.recommend{
  margin-top:30px;border:1px solid var(--line);border-radius:12px;background:var(--gray);padding:22px 22px;
  font-size:15.5px;line-height:1.85;color:#464243;
}
.recommend b{display:block;font-weight:900;color:var(--ink);margin-bottom:8px;font-size:16.5px}
.recommend strong{font-weight:900;color:var(--ink)}
.recommend a{color:var(--red);font-weight:700}

/* ============ 12. フッター ============ */
footer{background:var(--dark);color:var(--dark-sub);padding:56px 22px 48px}
footer .cap{margin-top:8px;font-size:14px;color:#ff5f6b;font-weight:700;letter-spacing:.1em}
footer dl{margin-top:26px;display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:14.5px;align-items:baseline}
footer dt{font-family:"Satoshi",sans-serif;font-size:10.5px;font-weight:900;letter-spacing:.2em;color:#7d7779;padding-top:2px}
footer dd{color:var(--dark-tx)}
footer a{color:var(--dark-tx);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .fin{margin-top:32px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;color:#7d7779;display:flex;gap:18px;flex-wrap:wrap}

/* ---- reveal ---- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
/* ⚠️ .hero と .duo は自前の padding を持つので、この一括指定から除外する。
   .hero を除外し忘れると、後に書かれたこちらが勝って左余白が 96px → 22px に潰れる
   （2026-08-26 に実際に起きた） */
@media(min-width:720px){
  section:not(.duo):not(.hero):not(.decl):not(.bridge){padding:104px 22px}
  .bridge{padding:112px 22px}
}

/* ---- dark theme（閲覧環境がダークでも壊れないよう最小限で対応） ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#ffffff;
  }
}

/* ============================================================
   2カラム（PCのみ・1100px以上）
   左＝八策ナビ（固定） ／ 中央＝本文（有権者の物差しは本文内に表示）
   SPは1カラムのまま。八策の本文はアコーディオンで畳む
   ============================================================ */
.saku-nav{display:none}

/* ⚠️ 2026-08-26：八策の見せ方を白紙から考え直すため、左ナビを一旦すべて非表示にしている。
   戻すときは、この直下の .saku-nav{display:none} を消し、
   下の3行（body の padding-left / .hero の margin-left / .site の left）を
   var(--col-left) を使う式に戻すだけでよい。HTML・JSはそのまま残してある。 */
.saku-nav{display:none !important}

@media (min-width:1100px){
  /* 左ナビのぶんの余白は、ナビの出入りに関係なく最初から確保しておく。
     こうしないとナビが出た瞬間に本文が横へ飛ぶ。
     右の余白は持たないので、.wrap は「左ナビを除いた領域」の中央に来る */
  body{padding-left:0}                            /* ナビ非表示中は0 */
  /* ヒーローだけは左余白の影響を受けず、画面の端から端まで使う */
  .hero{margin-left:0}                            /* ナビ非表示中は0 */
  /* ヘッダーのロゴも動かさない */
  .site{left:22px}                                /* ナビ非表示中は22px */

  /* 左：八策ナビ。ヒーローの上にいる間は出さない */
  .saku-nav{
    display:block;position:fixed;z-index:10;left:0;top:0;bottom:0;
    width:var(--col-left);background:var(--kv-red);color:#fff;
    padding:92px 6px 28px;overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(-100%);
    transition:transform .45s cubic-bezier(.2,.86,.24,1);
  }
  body.rail-on .saku-nav{transform:none}

  .saku-nav ul,.saku-nav ol{list-style:none}
  .saku-nav .nav-root{display:flex;flex-direction:column;gap:1px}
  .saku-nav a{
    display:block;text-decoration:none;color:rgba(255,255,255,.72);
    border-left:3px solid transparent;transition:.18s ease;
  }
  /* ラベルは折り返さない。入りきらないぶんは省略記号で切る */
  .saku-nav .tx{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .saku-nav .lv1{
    padding:10px 0 10px 6px;font-size:13.5px;font-weight:900;
    letter-spacing:.04em;line-height:1.45;
  }
  .saku-nav .nav-sub{
    margin:3px 0 9px;padding-left:5px;
    border-left:1px solid rgba(255,255,255,.3);
    display:flex;flex-direction:column;gap:1px;
  }
  .saku-nav .lv2{padding:6px 0 6px 4px;font-size:11.5px;line-height:1.45;font-weight:700;letter-spacing:-.01em}
  .saku-nav .lv2 .no{
    display:block;font-family:"Satoshi",sans-serif;font-size:10px;
    letter-spacing:.18em;opacity:.72;margin-bottom:2px;
  }
  .saku-nav a:hover{color:#fff;background:rgba(0,0,0,.14)}
  .saku-nav a.on{color:#fff;background:var(--kv-ink);border-left-color:#fff}
  /* 八策の項目が現在地のときは、親の「八策」も薄く点灯させる */
  .saku-nav .lv1.on-parent{color:#fff;border-left-color:rgba(255,255,255,.65)}
  .saku-nav a:focus-visible{outline:2px solid #fff;outline-offset:-2px}
}

/* SP：八策の本文をアコーディオンで畳む */
@media (max-width:1099px){
}

/* ============ 応募ボタン（画面右下に常時固定） ============ */
.fix-cta{position:fixed;z-index:11;right:34px;bottom:34px}
.fix-cta a{
  display:block;text-align:center;text-decoration:none;
  background:var(--red);color:#fff;font-weight:900;font-size:15px;
  padding:15px 40px;border:2px solid var(--red);border-radius:999px;transition:.18s ease;
  box-shadow:0 6px 22px rgba(0,0,0,.18);
}
.fix-cta a:hover{background:var(--red-dp);border-color:var(--red-dp)}
.fix-cta a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* SP：画面が狭いので本文にかぶらないよう小さめ・右下の隅に寄せる */
@media (max-width:1099px){
  .fix-cta{right:14px;bottom:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .fix-cta a{font-size:13px;padding:11px 26px;border-width:1px}
}

/* PCだけ改行する。SPでは自然な折り返しに任せる（2026-08-26） */
.br-pc{display:none}
@media (min-width:1100px){ .br-pc{display:inline} }
/* SPだけ改行する。br-pc の逆 */
.br-sp{display:none}
@media (max-width:1099px){ .br-sp{display:inline} }

/* ============================================================
   宣言（2カラム）
   左＝宣言の本文 ／ 右＝写真と締め・メッセージ・署名
   SPは1カラムに落とす
   ============================================================ */
.decl-inner{max-width:none;margin:0 auto}

.decl-left .stmt-jp{color:var(--sub)}
.decl-left p:not(.stmt-jp){margin-top:24px;font-size:17.5px;line-height:1.95;color:#464243}
.decl-left .hi{color:var(--ink);font-weight:900}

/* 上段：写真と締めの言葉 */
/* 写真の上端からメッセージの下端まで通す、赤→橙→紫の縦罫
   （ステートメントの .mono-rule と同じ二重背景の書き方） */
.decl-bar{
  padding-left:22px;
  border-left:5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(180deg,var(--au-red),var(--au-orange) 60%,var(--au-purple)) border-box;
}
/* 署名とSNSの箱。PCではこれまでどおり縦に流したいので、
   display:contents で箱そのものを無かったことにする */
.decl-id{display:contents}

/* 中段：本人のメッセージ */
.decl-msg{
  margin-top:34px;
  font-size:16.5px;line-height:1.95;color:#464243;
}

/* メッセージの下。長い経歴はアコーディオンに畳んでおく（2026-08-28） */
.decl-prof{margin-top:5px;text-align:right}
.decl-prof summary{
  display:inline-flex;align-items:center;gap:9px;
  cursor:pointer;list-style:none;
  font-size:14px;font-weight:800;color:var(--ink);letter-spacing:.03em;
}
.decl-prof summary::-webkit-details-marker{display:none}
.decl-prof summary::after{
  content:"＋";color:var(--red);font-size:15px;font-weight:900;line-height:1;
}
.decl-prof[open] summary::after{content:"−"}
.decl-prof.closing summary::after{content:"＋"}
.decl-prof summary:hover{color:var(--red)}
.decl-prof summary:focus-visible{outline:3px solid var(--red);outline-offset:4px;border-radius:4px}
.decl-prof-body{
  margin-top:14px;padding-top:16px;
  border-top:1px solid rgba(0,0,0,.1);
}
.decl-prof .pf{
  margin-top:12px;font-size:13.5px;line-height:1.95;color:#5b5658;
}
.decl-prof .pf:first-child{margin-top:0}
/* ボタンは署名と同じく右。開いた本文は読みやすさ優先で左のまま */
.decl-prof-body{text-align:left}

/* 下段：署名 */
.decl-name{
  margin-top:26px;font-size:23px;font-weight:900;color:var(--ink);letter-spacing:.02em;
  text-align:right;
}
/* 署名の下に本人のアカウント。名前と右端を揃える */
.decl-sns{
  margin-top:18px;display:flex;justify-content:flex-end;gap:10px;
}
.decl-sns a{
  width:42px;height:42px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);border:1.5px solid rgba(20,20,22,.16);
  transition:.18s ease;
}
.decl-sns svg{width:21px;height:21px;display:block}
.decl-sns a:hover{
  color:#fff;border-color:transparent;
  background:linear-gradient(120deg,var(--au-red),var(--au-vermilion) 60%,var(--au-orange));
  transform:translateY(-2px);
}
.decl-sns a:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.decl-name small{
  display:block;margin-top:6px;
  font-family:"Satoshi",sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.18em;color:var(--sub);margin-right:-.18em;   /* 末尾アキを詰めて右端を揃える */
}

@media (min-width:1100px){
  .decl{padding:120px 96px}
  .decl-inner{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
  .decl-right{padding-top:212px}   /* 左カラムの第1段落に写真の上端を合わせる。
                                  center 揃えなので、下げたい量の倍を入れる */
}

/* ============================================================
   議員図鑑以降のトンマナ合わせ（2026-08-26）
   ページ上半分で決まった約束ごとを、下半分にも通す。
     ・見出しはグラデーションのピル
     ・左端 96px から始める
     ・角は丸め、赤の面はグラデーションで持つ
     ・罫は赤→橙→紫の縦グラデーション
   ============================================================ */

/* 読み幅の上限。カラム全体を広げても、本文が間延びしないように */
.note,.zukan-open .desc{max-width:660px}

/* ---- 議員図鑑 ---- */
.zukan-open .title{letter-spacing:.04em}
.chips span{border-radius:999px;padding:8px 16px}
.disclose{
  border:0;border-left:5px solid transparent;border-radius:0 12px 12px 0;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(180deg,var(--au-red),var(--au-orange) 60%,var(--au-purple)) border-box;
  padding:26px 26px 26px 24px;
}

/* ---- 60分の中身 ---- */
.tt .row{padding:22px 18px}
.tt .row.key{
  background:linear-gradient(100deg,rgba(240,55,0,.07),rgba(97,52,145,.06));
}
.tt .t{color:var(--au-vermilion)}

/* ---- 中間CTA。濃い帯で一度リズムを切る ---- */
.midcta{background:var(--kv-red)}
.midcta .btn-main{background:#fff;color:var(--red);border-color:#fff}
/* この帯のボタンだけ、ほかより一回り大きく */
.midcta .btn{min-width:400px;padding:19px 68px;font-size:18px}
@media (max-width:719px){ .midcta .btn{min-width:0;width:100%;padding:16px 34px;font-size:17px} }

/* ---- 申し込みフォーム。角を丸めてボタンと語彙を揃える ---- */
input[type=text],input[type=email],input[type=url],input[type=tel],textarea,select{
  border-radius:10px;
}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px rgba(240,55,0,.14)}
.radios label{border-radius:10px}
.agree{border-radius:12px}
.req{border-radius:999px;padding:4px 10px}
.opt{border-radius:999px;padding:3px 10px}
.fld.bad input,.fld.bad textarea{background:#fff8f7}

/* ============================================================
   PC。上半分と同じ 96px の左余白に揃え、2カラムを組む
   ============================================================ */
@media (min-width:1100px){
  section:not(.duo):not(.hero):not(.decl):not(.bridge){padding:124px 96px}
  .bridge{padding:132px 96px}   /* 議員図鑑のヒーロー扱いなので、ここだけ広く */
  section:not(.duo):not(.hero):not(.decl):not(.bridge) > .wrap{max-width:none;margin:0}
  .midcta{padding:100px 96px}
  .midcta > .wrap{max-width:none;margin:0}
  footer{padding:80px 96px 64px}
  footer > .wrap{max-width:none;margin:0}

  /* 議員図鑑：左に紹介、右に注意書き */
  .zukan-open > .wrap{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
  .zukan-open .disclose{margin-top:0}
  .zukan-open .title{font-size:clamp(44px,4.2vw,60px)}

  /* タイムテーブル：時間の列を固定して、本文の頭を縦に揃える */
  .tt .row{gap:44px;padding:26px 20px}
  .tt .t{width:132px;flex:none;font-size:17px}

  /* 申し込み：左に見出し、右にフォーム */
  .apply > .wrap{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:80px;align-items:start}
  .apply-lead{position:sticky;top:96px}
  .apply .f{margin-top:0}
  .apply .note{max-width:none}

  /* 連絡先と最下段だけになったので、素直に縦へ積む */
  footer{padding:72px 96px 56px}
  footer dl{margin-top:0;max-width:760px}
  footer .fin{margin-top:44px}
}

.decl-top{display:flex;gap:26px;align-items:flex-start}
.decl-photo{
  flex:none;width:150px;aspect-ratio:345/482;margin:0;
  border-radius:6px;overflow:hidden;position:relative;
  background:linear-gradient(150deg,rgba(255,155,80,.38),rgba(240,55,0,.26) 55%,rgba(97,52,145,.30));
  display:flex;align-items:center;justify-content:center;
}
.decl-photo img{width:100%;height:100%;object-fit:cover}
.decl-photo img[hidden]{display:none}   /* hidden でも alt が描画されることがあるため */
.decl-photo img:not([hidden]) + .ph-ph{display:none}
.decl-photo .ph-ph{
  font-family:"Satoshi",sans-serif;font-size:10px;font-weight:900;letter-spacing:.2em;
  color:rgba(20,20,22,.34);   /* 白背景なので濃いめ */
}
.decl-fin{flex:1 1 auto;min-width:0}
.decl-fin .fin{
  font-size:clamp(20px,1.6vw,26px);font-weight:900;line-height:1.72;
  letter-spacing:-.015em;color:var(--ink);margin:0;
}
.decl-fin .sig{
  margin-top:22px;font-size:15px;font-weight:900;letter-spacing:.2em;color:var(--red);
}

/* ============================================================
   SP（〜1099px）の宣言セクション
   PCとは並び順が違う。上から
     1. 写真＋（署名／ローマ字／SNS）
     2. 2027年。〜
     3. 愛を込めて、政治を叫ぶ。
     4. 本人のメッセージ
   入れ子の箱を display:contents で潰して、
   すべてを .decl-right のグリッドへ並べ直している
   ============================================================ */
@media (max-width:1099px){
  .decl-bar,.decl-top,.decl-fin{display:contents}
  .decl-id{display:block}

  .decl-right{
    margin-top:52px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "photo id"
      "fin   fin"
      "sig   sig"
      "msg   msg"
      "prof  prof";
    gap:0 20px;align-items:center;
    /* .decl-bar を潰したぶん、縦罫はこちらで持つ */
    padding-left:20px;
    border-left:5px solid transparent;
    background:linear-gradient(#fff,#fff) padding-box,
               linear-gradient(180deg,var(--au-red),var(--au-orange) 60%,var(--au-purple)) border-box;
  }

  /* SPだけ正方形に切る。縦長のままだと右の署名と高さが噛み合わない */
  .decl-photo{grid-area:photo;width:132px;aspect-ratio:1/1;border-radius:0}
  .decl-photo img{object-position:50% 22%}   /* 顔が中心に来るよう上寄りで切る */

  .decl-id{grid-area:id}
  .decl-name{margin-top:0;text-align:left;font-size:20px}
  .decl-sns{justify-content:flex-start;margin-top:14px}

  .decl .fin{grid-area:fin;margin-top:26px}
  .decl .sig{grid-area:sig;margin-top:18px}
  .decl-msg{grid-area:msg;margin-top:30px;padding-left:0}
  .decl-prof{grid-area:prof;margin-top:5px}
  .decl-prof .pf{font-size:13px}
}

/* ============================================================
   SP：横スワイプとタイムライン（2026-08-27）
   縦に積むだけだとページが延々と長くなるので、
   カード類は横に流し、番組表は縦のタイムラインに組み替える
   ============================================================ */
@media (max-width:1099px){

  /* --- C. 「60分の中身」を縦のタイムラインに --- */
  .tt{border-top:0;margin-top:28px}
  .tt .row{
    display:block;position:relative;
    padding:0 0 26px 28px;border-bottom:0;border-radius:0;
  }
  .tt .row::before{           /* 点をつなぐ縦の線 */
    content:"";position:absolute;left:5px;top:16px;bottom:2px;width:2px;
    background:linear-gradient(180deg,var(--au-red),var(--au-orange) 55%,var(--au-purple));
    opacity:.35;
  }
  .tt .row:last-child::before{display:none}
  .tt .row::after{            /* 各時刻の点 */
    content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;
    background:linear-gradient(140deg,var(--au-red),var(--au-orange));
    box-shadow:0 0 0 3px #fff;
  }
  .tt .t{
    width:auto;display:inline-flex;align-items:baseline;gap:6px;
    font-size:12.5px;letter-spacing:.06em;
    color:var(--au-vermilion);margin-bottom:6px;
  }
  .tt .t small{display:inline;font-size:10px}
  .tt h3{font-size:16px}
  .tt .row.key{
    background:linear-gradient(100deg,rgba(240,55,0,.07),rgba(97,52,145,.06));
    border-radius:12px;padding:14px 14px 20px 28px;
  }
  /* 点と線の位置は他の行と揃える（ずらすとレールが折れて見える） */
  .tt .row.key::before{top:30px}
  .tt .row.key::after{top:20px}
}

/* 450px未満は正方形の絵に差し替わる（picture の source）。比率も合わせる */
@media (max-width:449px){
  .saku-art{aspect-ratio:1/1}
}

/* ============================================================
   SP：説明文の行間を詰める（2026-08-27）
   見出し・宣言・キャッチは対象外。読ませる本文だけを 1.5 にする。
   基本ルールより後ろに置かないと詳細度で負けるので、ここは末尾に置く
   ============================================================ */
@media (max-width:1099px){.note, .mono-rule .mr-t, .duo-left .big, .decl-fin .fin, .mono-rule p, .duo-left .after, .saku-card p, .gauge .t, .record, .shift, .decl p:not(.stmt-jp):not(.fin):not(.sig):not(.pf), .decl-left p:not(.stmt-jp), .decl-msg, .bridge .sub, .zukan-open .desc, .disclose, .tt p, .hint, .agree label, .done p, .recommend, .formerr{
    line-height:1.5;
  }

  /* SPの文字サイズ。狭い画面では大きいままだと1行の文字数が足りず、
     短い行が何本も続いて読みにくい */
  .mono-rule .mr-t{font-size:16px}
  .saku-card h2{font-size:20px}
  .decl p:not(.stmt-jp):not(.fin):not(.sig):not(.decl-msg):not(.pf){font-size:16px}
  .decl-fin .fin{font-size:16px}
  /* 本人のメッセージは宣言の本文より一段落とす。
     基本側の .decl p:not(...)×3 と詳細度を揃えないと負ける */
  .decl p.decl-msg:not(.fin):not(.sig):not(.pf){font-size:15px}

  /* --- 議員図鑑以降。見出しは16px、読ませる本文は15pxで揃える --- */
  .note{font-size:16px}                 /* 各セクションのリード文 */
  .zukan-open .desc{font-size:16px}
  .chips span{font-size:12px}
  .disclose b{font-size:16px}
  .disclose{font-size:15px}
  .tt h3{font-size:16px}
  .tt p{font-size:15px}
  .agree label{font-size:15px}
  .recommend{font-size:15px}

  /* SPは1カラムなので、右寄せだと本文と頭がそろわない（2026-08-28） */
  .sakuhead{margin-bottom:5px}   /* 右寄せのまま。下に5pxだけ足す(2026-08-28) */
}