@charset "UTF-8";

/* =========================================================
   斯波康晴 オフィシャルサイト
   設計方針：
   ・安心感 = 深い藍 + 生成りの余白 + 明朝の見出し
   ・堅苦しさを抜く = 角丸 / 大きな余白 / 話し言葉寄りのコピー /
     日の丸・金縁・のぼり的な要素を一切使わない
   ========================================================= */

/* ---------- トークン ---------- */
:root{
  --ink:        #17333F;   /* 文字色：キーカラーと同じ色相の濃紺 */
  --ink-2:      #335A6B;
  --ink-3:      #6D8A9B;
  --panel:      #10516F;   /* 濃い面（政策のまとめ／LINE／フッター）：深いブルー */
  --white:      #FFFFFF;
  /* 背景はすべて白。面の区切りは「余白」と「1pxの罫」と「濃紺のブロック」で作る */
  --paper:      #FFFFFF;
  --paper-2:    #F5F6F7;   /* プレースホルダ等のごく薄いニュートラルグレーのみ */
  --paper-3:    #EBEDEF;
  /* キーカラー：薄いブルー。
     小さい文字は白地でのコントラストが足りなくなるので --accent-2 を使う。
     濃紺パネルの上では --accent-on-dark を使う（薄い青のままだと沈む）。 */
  --accent:        #32A6D6;
  --accent-2:      #1D7CA5;
  --accent-on-dark:#7FCCEA;
  --accent-pale:   rgba(50,166,214,.14);
  --accent-line:   rgba(50,166,214,.50);
  --line-brand: #06C755;

  --border:     rgba(16,81,111,.20);
  --border-2:   rgba(16,81,111,.13);
  --shadow-sm:  0 2px 8px rgba(16,81,111,.06);
  --shadow-md:  0 8px 28px rgba(16,81,111,.10);
  --shadow-lg:  0 20px 60px rgba(16,81,111,.14);

  /* 全面 LINE Seed JP（角丸ゴシック / SIL OFL 1.1）。
     収録ウェイトは 100 / 400 / 700 / 800。ここでは 400 と 700 のみ読み込む。
     見出し用と本文用でトークンを分けてあるので、片方だけ他の書体に戻すこともできる。 */
  --font-heading: "LINE Seed JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-base:    "LINE Seed JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;

  --wrap: 1120px;
  --read: 720px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --ease: cubic-bezier(.2,.7,.3,1);
  --header-h: 88px;            /* 追従ヘッダーの高さ。ヒーローの最大高さの計算に使う */
  --next-h: 0px;               /* 「次回の市民集会」バナーの高さ。main.js が実測して入れる */
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:80px;
  -webkit-text-size-adjust:100%;
  /* iOS のバウンススクロール（フッターより下へ引っぱれてしまう挙動）を止める。
     効かない旧環境のために、はみ出した領域の色をフッターと同じ紺にしておく。 */
  overscroll-behavior-y:none;
  background:var(--panel);
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-base);
  font-size:16px;
  line-height:1.95;
  /* LINE Seed JP（Google Fonts版）は palt / chws / halt を持たないため、
     約物（、。）の空きは詰められない。そのぶん字間は足さず 0 にしている。
     約物まで詰めたい場合は seed.line.me の公式 woff2 を self-host すること。 */
  font-feature-settings:"palt" 1;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  /* clip を解する環境では body をスクロールコンテナにしない
     （iOS で overflow-x:hidden がフッター下の余分なスクロールを生むため）。
     clip 非対応の旧環境は直前の hidden にフォールバックする。 */
  overflow-x:hidden;
  overflow-x:clip;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.45; font-weight:700; }
p{ margin:0; }
ol,ul{ margin:0; padding:0; list-style:none; }

.container{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }
@media (max-width:640px){ .container{ width:calc(100% - 36px); } }

.sp-only{ display:none; }
@media (max-width:640px){ .sp-only{ display:inline; } }

/* ---------- 日本語の改行品質 ----------
   1) .ph … 見出し・リードは文節を inline-block にして「かたまり」で折り返させる。
      ※ HTML上で <span class="ph">…</span><span class="ph">…</span> と
        すき間なく並べること。改行やインデントを挟むと全角文字の間に空白が入る。
   2) word-break:auto-phrase … 本文はブラウザに文節を判定させて改行位置を決める
      （Chrome 119+ ／ 非対応ブラウザは無視するだけなので安全）
   3) text-wrap:pretty … 最終行に1文字だけ取り残されるのを防ぐ
   4) line-break:strict … 禁則処理を厳格に（行頭に小書き仮名・長音符を置かない） */
.ph{ display:inline-block; }
/* 日付・時刻・数値の範囲など、途中で割ってはいけないもの */
.nw{ white-space:nowrap; }

body{ line-break:strict; }

p, dd, li, figcaption, blockquote, summary{
  word-break:auto-phrase;
  text-wrap:pretty;
}

/* 見出しは行の長さを揃える */
h1, h2, h3, .section-title, .intro-title, .crisis-note-main, .vision-copy{
  text-wrap:balance;
}

/* メールアドレスは文節が無いので、従来どおりどこでも折り返せるようにする */
.contact-value{ word-break:normal; overflow-wrap:anywhere; text-wrap:auto; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------- 出現アニメーション ---------- */
.reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   ボタン
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:15px 30px;
  border-radius:999px;
  font-family:var(--font-base); font-size:15px; font-weight:700;
  letter-spacing:.04em; text-decoration:none; white-space:nowrap;
  /* button 要素でも a と同じ見た目になるようにブラウザ既定を打ち消す
     （枠線・行間・フォームの既定装飾が残ると、この一つだけ浮いて見える） */
  margin:0; border:0; background:none; cursor:pointer;
  line-height:1.95;
  -webkit-appearance:none; appearance:none;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background-color .25s var(--ease), color .25s var(--ease);
}
.btn svg{ width:19px; height:19px; flex:none; }
.btn:hover{ transform:translateY(-2px); }

/* 主要ボタンはキーカラー系。白抜き文字が読めるよう --accent-2 で塗る（4.69:1） */
.btn-primary{ background:var(--accent-2); color:#fff; box-shadow:0 6px 20px rgba(29,124,165,.28); }
.btn-primary:hover{ background:#17688B; box-shadow:0 10px 28px rgba(29,124,165,.36); }

.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--border); }
.btn-ghost:hover{ background:var(--accent-pale); border-color:var(--accent); color:var(--accent-2); box-shadow:var(--shadow-sm); }

.btn-line{ background:var(--line-brand); color:#fff; box-shadow:0 4px 14px rgba(6,199,85,.28); }
.btn-line:hover{ background:#05B14C; box-shadow:0 8px 22px rgba(6,199,85,.35); }

.btn-sm{ padding:10px 20px; font-size:13.5px; }
.btn-lg{ padding:18px 38px; font-size:16.5px; }

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--white);     /* コンテンツに重ねないので常に地色を持たせる */
  padding:18px 0;
  transition:padding .3s var(--ease), background-color .3s var(--ease),
             box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.stuck{
  padding:11px 0;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--border-2);
  box-shadow:0 1px 20px rgba(16,81,111,.06);
}
.header-inner{ display:flex; align-items:center; gap:28px; }

.brand{
  text-decoration:none; display:flex; flex-direction:column; line-height:1.25; flex:none;
  position:relative; z-index:3;   /* メニューを開いても名前が隠れないように */
}
/* 選挙・広報での表記に合わせ、ひらがなを主・漢字を従にする */
.brand-name{ font-family:var(--font-heading); font-size:22px; font-weight:700; letter-spacing:.02em; }
.brand-kana{ font-size:10.5px; letter-spacing:.16em; color:var(--ink-3); }

.nav{ margin-left:auto; display:flex; gap:26px; }
.nav a{
  position:relative; text-decoration:none; font-size:14px; font-weight:400;
  color:var(--ink-2); padding:6px 0; transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--accent); transition:right .3s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ right:0; }
.nav-line{ display:none; }

.nav-toggle{
  display:none; width:44px; height:44px; margin-left:auto;
  position:relative; z-index:3;
  background:none; border:none; cursor:pointer; padding:0;
  flex-direction:column; justify-content:center; align-items:center; gap:6px;
}
.nav-toggle span{
  display:block; width:24px; height:1.8px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.8px) rotate(-45deg); }

@media (max-width:960px){
  .header-cta{ display:none; }
  .nav{ gap:20px; }
  .nav a{ font-size:13.5px; }
}
@media (max-width:820px){
  :root{ --header-h: 81px; }
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:0 0 auto 0; margin:0;
    flex-direction:column; gap:0;
    background:var(--paper);
    padding:96px 28px 40px;
    box-shadow:var(--shadow-lg);
    transform:translateY(-102%);
    transition:transform .45s var(--ease);
    border-bottom:1px solid var(--border);
    z-index:1;
    /* 画面より高くなったら、はみ出さずにメニュー内でスクロールさせる
       （横画面や背の低い端末で、最後のLINEボタンに届かなくなるのを防ぐ） */
    max-height:100vh;
    max-height:100dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .nav.open{ transform:none; }

  /* メニュー内をスクロールしたとき、項目がロゴや閉じるボタンに重なって
     透けて見えるのを防ぐ。ロゴ(3) と メニュー(1) の間に不透明な帯を挟む。 */
  .site-header.nav-open::before{
    content:""; position:fixed; top:0; left:0; right:0; height:72px;
    background:var(--paper); z-index:2; pointer-events:none;
  }
  @media (max-height:560px){
    .site-header.nav-open::before{ height:64px; }
  }
  .nav a{
    font-size:17px; padding:17px 0; border-bottom:1px solid var(--border-2);
    font-family:var(--font-heading); font-weight:400;
  }
  .nav a::after{ display:none; }

  /* 背の低い画面（横向きなど）では、余白と文字を詰めて収まりやすくする */
  @media (max-height:560px){
    .nav{ padding:76px 28px 24px; }
    .nav a{ font-size:15px; padding:11px 0; }
  }

  /* メニュー内のLINE導線（サイト最大の目的なので常に見える位置に） */
  .nav .nav-line{
    display:block; margin-top:26px; padding:16px 24px;
    background:var(--line-brand); color:#fff; border-bottom:none;
    border-radius:999px; text-align:center;
    font-family:var(--font-base); font-size:15px; font-weight:700; letter-spacing:.04em;
    box-shadow:0 4px 14px rgba(6,199,85,.28);
  }
}

/* =========================================================
   ヒーロー：メインビジュアル1枚をセクションいっぱいに敷く
   （2026-10-07〜 横長の写真＋「誠実に、確実に。」。作り直しは トップ画像/make_hero.py）
   （全画面固定はやめ、セクションの高さ＝画像の高さ。余白もレターボックスも出さない）
   ========================================================= */
/* ヒーローは「画像の全体が必ず画面に収まる」ことを最優先にする。
   横長の画面では幅いっぱいに広げると縦が画面からはみ出すので、
   高さのほうを画面に合わせ、余った左右は写真の壁の色で埋める。 */
.hero{
  position:relative; width:100%;
  display:flex; justify-content:center;
  /* 左右に余る部分は写真の壁の色でつなぐ（白だと境目が出る）。
     写真の左端・右端の色を上下で拾ったもの。写真を替えたら値も取り直す */
  background:
    linear-gradient(#d5d3d8, #c6c5ca) left  / 50% 100% no-repeat,
    linear-gradient(#c6c3ca, #c5bfc5) right / 50% 100% no-repeat;
  overflow:hidden;
  line-height:0;               /* img下の余白を消す */
}
.hero-img{
  display:block;
  width:auto; height:auto;
  max-width:100%;
  /* ヘッダーと「次回の市民集会」バナーのぶんを引いた高さに収める。
     この2つとヒーローが同時に見える状態を保つ。
     dvh なのでスマホのURLバー増減にも追従する */
  max-height:calc(100vh - var(--header-h) - var(--next-h));
  max-height:calc(100dvh - var(--header-h) - var(--next-h));
}

/* 写真ぜんたいがプロフィールへのリンク。
   .hero は flex なので、リンクは画像と同じ大きさのただの箱として置く */
.hero-link{ display:block; max-width:100%; line-height:0; }
.hero-link picture{ display:contents; }   /* スマホ用の画像切り替え用。並びには関わらせない */
.hero-link .hero-img{ transition:opacity .3s var(--ease); }
.hero-link:hover .hero-img{ opacity:.92; }
body.no-hero-image .hero-link{ display:none; }   /* 写真が無いときは空のリンクを残さない */

/* 画像未設定のとき */
.hero-placeholder{
  display:none; width:100%; aspect-ratio:1424/752; line-height:1.8;
  max-height:calc(100dvh - var(--header-h) - var(--next-h));
  flex-direction:column; align-items:center; justify-content:center; gap:14px;
  color:var(--ink-3); background:var(--paper-2);
}
body.no-hero-image .hero-placeholder{ display:flex; }
@media (max-width:640px){ .hero-placeholder{ aspect-ratio:1/1; } }   /* スマホ用の画像は正方形 */
.hero-placeholder svg{ width:84px; height:104px; }
.hero-placeholder p{ font-size:13px; letter-spacing:.08em; text-align:center; }
.hero-placeholder span{
  font-size:11px; opacity:.7; letter-spacing:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ヘッダーは常に濃色（ポスター上端は明るいため） */
.site-header:not(.stuck) .brand-name{ color:var(--ink); }
.site-header:not(.stuck) .brand-kana{ color:var(--ink-3); }
.site-header:not(.stuck) .nav > a{ color:var(--ink-2); }
.site-header:not(.stuck) .nav > a:hover{ color:var(--ink); }
.site-header:not(.stuck) .nav > a::after{ background:var(--accent); }
.site-header:not(.stuck) .nav-toggle span{ background:var(--ink); }

/* モバイルメニューを開いているあいだ（白パネルの上） */
.site-header.nav-open .brand-name{ color:var(--ink); }
.site-header.nav-open .brand-kana{ color:var(--ink-3); }
.site-header.nav-open .nav > a{ color:var(--ink-2); }
.site-header.nav-open .nav > a:hover{ color:var(--accent-2); }
.site-header.nav-open .nav > a.nav-line,
.site-header.nav-open .nav > a.nav-line:hover{ color:#fff; }
.site-header.nav-open .nav-toggle span{ background:var(--ink); }

/* =========================================================
   次回の市民集会（ヒーロー直下の帯）
   ========================================================= */
.next-event{
  background:var(--white);
  border-bottom:1px solid var(--border-2);
}
.next-event[hidden]{ display:none; }
.next-inner{
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:baseline;
  gap:6px clamp(16px,2.4vw,30px);
  padding:clamp(18px,2.4vw,26px) 0;
}
.next-label{
  font-size:11.5px; font-weight:700; letter-spacing:.18em; color:var(--accent-2);
  white-space:nowrap;
  position:relative; padding-left:32px;
}
.next-label::before{
  content:""; position:absolute; left:0; top:.45em;
  width:24px; height:2px; background:var(--accent); border-radius:1px;
}
.next-when{
  font-family:var(--font-heading); font-weight:700;
  font-size:clamp(16px,2vw,21px); letter-spacing:-.01em; white-space:nowrap;
}
.next-place{ font-size:14px; color:var(--ink-2); }
.next-link{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:13.5px; font-weight:700; color:var(--accent-2); text-decoration:none;
  border-bottom:1.5px solid var(--accent-line); padding-bottom:4px;
  transition:border-color .25s var(--ease);
}
.next-link svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.next-link:hover{ border-bottom-color:var(--accent); }
.next-link:hover svg{ transform:translateX(4px); }

@media (max-width:820px){
  .next-inner{
    grid-template-columns:1fr; align-items:start; gap:8px;
    padding:20px 0 22px;
  }
  .next-when{ font-size:19px; }
  .next-link{ margin-top:6px; align-self:start; }
}

/* 終わった回は1行に畳んで小さくする
   （opacity で薄くするより、情報量と文字サイズを落とすほうが「済んだ予定」らしく見える） */
.event-card.is-past{
  grid-template-columns:auto 1fr;
  gap:0 clamp(14px,2vw,26px);
  align-items:center;
  padding:15px clamp(20px,2.4vw,30px);
  border-color:var(--border-2);
  box-shadow:none;
}
.event-card.is-past:hover{ transform:none; box-shadow:none; border-color:var(--accent-line); }

.event-card.is-past .event-date{ color:var(--ink-3); }
.event-card.is-past .ev-m,
.event-card.is-past .ev-d{ font-size:21px; }
.event-card.is-past .ev-sep{ font-size:16px; }
.event-card.is-past .ev-w{ font-size:11.5px; margin-left:5px; }

/* 終了した回では、時刻・アクセス・説明は畳む */
.event-card.is-past .event-time,
.event-card.is-past .event-access,
.event-card.is-past .event-desc{ display:none; }
.event-card.is-past .event-body h3{
  font-size:14.5px; font-weight:700; color:var(--ink-3); margin:0; line-height:1.7;
}

.ev-past{
  font-size:11px; font-weight:700; letter-spacing:.12em;
  color:var(--ink-3); margin-left:9px;
  border:1px solid var(--border); border-radius:4px; padding:2px 6px; line-height:1;
}

/* =========================================================
   キャッチとリード（ヒーローの下）
   ========================================================= */
.section-intro{
  background:var(--white);
  padding:clamp(72px,9vw,120px) 0;
}
.intro-inner{ max-width:820px; margin-inline:auto; text-align:center; }

.intro-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:12.5px; font-weight:700; letter-spacing:.2em; color:var(--accent-2);
  margin-bottom:20px;
}
.intro-eyebrow::before,.intro-eyebrow::after{
  content:""; width:26px; height:1.5px; background:var(--accent); flex:none;
}
.intro-title{
  font-family:var(--font-heading); font-weight:700;
  /* 3行の長い見出しになったのでサイズを抑える（旧「川西市を、たてなおす。」は6文字だった） */
  font-size:clamp(24px,4.4vw,52px); line-height:1.42; letter-spacing:-.03em;
  margin-bottom:clamp(30px,3.8vw,46px);
  text-wrap:auto;               /* 改行位置は <br> で決めているので均等割りは効かせない */
}
.intro-lead{
  font-size:clamp(17px,2.2vw,22px); line-height:2.1; color:var(--ink-2);
}
.intro-lead strong{ color:var(--ink); font-weight:700; }
.intro-sub{
  margin-top:26px; font-size:clamp(15px,1.7vw,17px); line-height:2.1; color:var(--ink-2);
}
.intro-actions{
  margin-top:clamp(34px,4vw,44px);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}
@media (max-width:640px){
  .intro-eyebrow{ font-size:11px; gap:10px; }
  .intro-eyebrow::before,.intro-eyebrow::after{ width:18px; }
}
@media (max-width:520px){
  .intro-actions .btn{ flex:1 1 100%; }
}

/* =========================================================
   セクション共通
   ========================================================= */
.section{ padding:clamp(80px,10vw,128px) 0; }
/* 背景が全部白なので、白×白が続くところだけ髪の毛罫で区切る */
.section-crisis,
.section-vision,
.section-policy,
.section-story,
.section-events{ border-top:1px solid var(--border-2); }
.section-head{ max-width:var(--read); margin-bottom:clamp(44px,5vw,64px); }
.section-label{
  font-size:12px; font-weight:700; letter-spacing:.22em; color:var(--accent-2);
  margin-bottom:18px;
}
.section-label.light{ color:var(--accent-on-dark); }
.section-title{
  font-family:var(--font-heading); font-weight:700;
  font-size:clamp(27px,3.9vw,42px); line-height:1.5; letter-spacing:-.015em;
}
.section-title.light{ color:#fff; }
.section-desc{
  margin-top:22px; font-size:15.5px; line-height:2.1; color:var(--ink-2);
}

.prose{ max-width:var(--read); }
.prose p{ font-size:16px; line-height:2.15; color:var(--ink-2); }
.prose p + p{ margin-top:1.5em; }
.prose strong{ color:var(--ink); font-weight:700; }

/* =========================================================
   プロフィール（簡易版）
   ========================================================= */
.section-profile{ background:var(--white); border-top:1px solid var(--border-2); }
.profile-inner{
  display:grid; grid-template-columns:minmax(230px,330px) 1fr;
  gap:clamp(30px,5vw,76px); align-items:stretch;
}

/* 顔写真：本文が長いので、スクロールに追従させて余白が空きすぎないようにする */
.profile-visual{ position:relative; }
.profile-photo{
  position:sticky; top:104px; margin:0;
  aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden;
  background:var(--paper-2); box-shadow:var(--shadow-md);
}
.profile-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.profile-photo-placeholder{
  display:none; position:absolute; inset:0;
  flex-direction:column; align-items:center; justify-content:center; gap:12px;
  color:var(--ink-3); background:var(--paper-2);
}
.profile-photo.is-empty .profile-photo-placeholder{ display:flex; }
.profile-photo-placeholder svg{ width:74px; height:92px; }
.profile-photo-placeholder p{ font-size:12.5px; line-height:1.8; letter-spacing:.08em; text-align:center; }
.profile-photo-placeholder span{
  font-size:10px; opacity:.7; letter-spacing:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

.profile-name{
  font-family:var(--font-heading); font-weight:700;
  font-size:clamp(28px,4.2vw,46px); line-height:1.3; letter-spacing:-.03em;
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  margin-bottom:clamp(22px,3vw,32px);
}
.profile-name span{
  font-size:clamp(13px,1.4vw,16px); font-weight:400; letter-spacing:.1em; color:var(--ink-3);
}
.profile-text p{ font-size:15.5px; line-height:2.15; color:var(--ink-2); }
.profile-text p + p{ margin-top:1.4em; }
.profile-text strong{ color:var(--ink); font-weight:700; }

.profile-more{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:clamp(26px,3.4vw,36px); padding-bottom:7px;
  font-size:14.5px; font-weight:700; color:var(--accent-2); text-decoration:none;
  border-bottom:1.5px solid var(--accent-line);
  transition:border-color .25s var(--ease);
}
.profile-more svg{ width:18px; height:18px; transition:transform .3s var(--ease); }
.profile-more:hover{ border-bottom-color:var(--accent); }
.profile-more:hover svg{ transform:translateX(5px); }

/* 罫線だけの定義リスト */
.profile-facts{
  margin-top:clamp(34px,4.4vw,48px);
  border-top:1px solid var(--border-2);
}
.profile-facts > div{
  display:grid; grid-template-columns:66px 1fr; gap:18px;
  padding:14px 0; border-bottom:1px solid var(--border-2);
}
.profile-facts dt{
  font-size:11px; font-weight:700; letter-spacing:.14em;
  color:var(--accent-2); padding-top:5px;
}
.profile-facts dd{ margin:0; font-size:14.5px; line-height:1.85; color:var(--ink-2); }

@media (max-width:860px){
  .profile-inner{ grid-template-columns:1fr; gap:clamp(28px,4vw,40px); }
  .profile-photo{ position:static; max-width:280px; }
}
@media (max-width:480px){
  .profile-facts > div{ grid-template-columns:1fr; gap:4px; padding:15px 0; }
  .profile-facts dt{ padding-top:0; }
}

/* =========================================================
   選挙ドットコムの投稿（埋め込み）
   ・先方のパーツは黄緑の1px枠を持っていて、サイトの色から浮く。
     そこで iframe を上下左右1pxずつ外へはみ出させ、親で切り落として
     こちらの罫線・角丸に置き換えている（中身には手を加えない）
   ・高さは中身の量で決まるので main.js が入れている
   ========================================================= */
.section-g2s{ background:var(--white); border-top:1px solid var(--border-2); }
/* 先方のパーツは中身が960pxで頭打ちになる（それ以上広げても右に白が余るだけ）。
   なので960pxを上限に、画面が狭いときは幅いっぱい、広いときは中央ぞろえ。 */
.g2s{ max-width:960px; margin-inline:auto; }
.g2s-frame{
  overflow:hidden;
  border:1px solid var(--border-2); border-radius:var(--r-md);
  background:var(--white); box-shadow:var(--shadow-sm);
}
.g2s-frame iframe{
  display:block; border:0; margin:-1px;   /* 先方の枠線ぶんを外へ逃がして隠す */
  width:calc(100% + 2px); height:447px;   /* 高さは main.js が上書きする */
}
.g2s-more{ margin-top:20px; }
.g2s-more a{
  font-weight:700; color:var(--accent-2);
  text-decoration:underline; text-underline-offset:4px;
}

/* =========================================================
   いまの川西市
   ========================================================= */
.section-crisis{ background:var(--white); }

/* カードで囲まず、罫線と大きい数字で組む（箱を並べると既製品に見えるため） */
.lost-grid{
  margin-top:clamp(44px,5.5vw,68px);
  border-top:1px solid var(--border-2);
}
.lost-card{
  display:grid; grid-template-columns:minmax(90px,132px) 1fr;
  gap:0 clamp(16px,4vw,52px); align-items:start;   /* 行間は詰め、列間だけ広く */
  padding:clamp(34px,4.4vw,54px) 0;
  border-bottom:1px solid var(--border-2);
}
.lost-num{
  grid-column:1; grid-row:1 / span 2;
  display:block; font-family:var(--font-heading); font-weight:700;
  font-size:clamp(46px,6.6vw,86px); line-height:.85;
  color:var(--accent); letter-spacing:-.045em;
}
.lost-card h3{
  grid-column:2;
  font-family:var(--font-heading); font-size:clamp(21px,3.1vw,31px);
  line-height:1.55; margin-bottom:16px; letter-spacing:-.02em;
}
.lost-card p{
  grid-column:2;
  font-size:15px; line-height:2.05; color:var(--ink-2); max-width:62ch;
}

/* 危機感の表明はこのページの山場なので、大きく組む */
.crisis-note{ margin-top:clamp(56px,7vw,88px); }
.crisis-note::before{
  content:""; display:block; width:56px; height:4px;
  background:var(--accent); border-radius:2px; margin-bottom:clamp(24px,3vw,34px);
}
.crisis-note-main{
  font-family:var(--font-heading); font-weight:700;
  font-size:clamp(23px,4.6vw,50px); line-height:1.62; letter-spacing:-.025em;
  color:var(--ink);
}
.crisis-note-sub{
  margin-top:clamp(20px,2.6vw,30px);
  font-family:var(--font-heading); font-weight:700;
  font-size:clamp(19px,2.9vw,32px); line-height:1.7; letter-spacing:-.02em;
  color:var(--accent-2);
}
@media (max-width:640px){
  .lost-card{ grid-template-columns:1fr; gap:10px; padding:30px 0; }
  .lost-num{ grid-column:1; grid-row:auto; font-size:44px; }
  .lost-card h3,
  .lost-card p{ grid-column:1; }
}

/* =========================================================
   めざすまち
   ========================================================= */
.section-vision{ background:var(--white); text-align:center; }
/* 箱を並べず、文字の大きさと色だけで「変わる」を見せる */
.vision-shift{ display:flex; flex-direction:column; align-items:center; }
.vision-tag{
  font-size:11.5px; font-weight:700; letter-spacing:.2em; margin-bottom:14px;
}
.vision-copy{ font-family:var(--font-heading); line-height:1.65; letter-spacing:-.02em; }

.vision-past .vision-tag{ color:var(--ink-3); }
.vision-past .vision-copy{
  font-size:clamp(17px,2.4vw,25px); font-weight:700; color:var(--ink-3);
}
.vision-past s{
  text-decoration:line-through;
  text-decoration-color:var(--accent);
  text-decoration-thickness:2px;
  text-underline-offset:0;
}

.vision-arrow{ color:var(--accent); margin:clamp(22px,3.4vw,38px) 0; }
.vision-arrow svg{ width:24px; height:56px; }

.vision-future .vision-tag{ color:var(--accent-2); }
.vision-future .vision-copy{
  font-size:clamp(24px,4.6vw,52px); font-weight:700; color:var(--ink); line-height:1.5;
}
.vision-future .vision-copy strong{ font-weight:700; color:var(--accent-2); }
.vision-lead{
  margin-top:clamp(40px,5vw,56px);
  font-size:clamp(15px,1.8vw,17.5px); line-height:2.15; color:var(--ink-2);
}
.vision-lead strong{ color:var(--ink); }

/* =========================================================
   政策
   ========================================================= */
.section-policy{ background:var(--white); }

/* 箱で囲まず、罫線と大きい数字で組む（等間隔のカードは既製品に見えるため） */
.policy-list{ border-top:1px solid var(--border-2); }
.policy-card{
  display:grid; grid-template-columns:minmax(76px,112px) 1fr;
  gap:0 clamp(18px,4vw,56px); align-items:start;
  padding:clamp(30px,4vw,50px) 0;
  border-bottom:1px solid var(--border-2);
}
.policy-num{
  font-family:var(--font-heading); font-weight:700;
  font-size:clamp(40px,5.4vw,68px); line-height:.9; letter-spacing:-.045em;
  color:var(--accent);
  display:flex; align-items:baseline; gap:3px;
}
.policy-num span{ font-size:.28em; letter-spacing:.08em; }

.policy-body h3{
  font-family:var(--font-heading); font-size:clamp(21px,3vw,30px);
  line-height:1.55; letter-spacing:-.02em; margin-bottom:12px;
}
/* キーコピーは枠なし。短い青の罫を先頭に置いて見出しの要約として見せる */
.policy-key{
  display:flex; align-items:center; gap:11px;
  font-size:clamp(13px,1.5vw,15px); font-weight:700; letter-spacing:.04em;
  color:var(--accent-2); margin-bottom:18px;
}
.policy-key::before{
  content:""; width:24px; height:2px; background:var(--accent); flex:none; border-radius:1px;
}
.policy-body p:not(.policy-key){
  font-size:15px; line-height:2.1; color:var(--ink-2); max-width:62ch;
}
.policy-body p:not(.policy-key) + p:not(.policy-key){ margin-top:1em; }
.policy-body strong{ color:var(--ink); font-weight:700; }

@media (max-width:640px){
  .policy-card{ grid-template-columns:1fr; gap:8px; padding:28px 0; }
  .policy-num{ font-size:38px; }
  .policy-key{ margin-bottom:14px; }
}

.policy-goal{
  margin-top:clamp(48px,6vw,72px);
  padding:clamp(48px,6vw,72px) 32px;
  background:var(--panel); color:#fff; border-radius:var(--r-lg);
  text-align:center;
}
.policy-goal-sub{
  font-size:12px; font-weight:700; letter-spacing:.22em;
  color:var(--accent-on-dark); margin-bottom:22px;
}
.policy-goal-main{
  font-family:var(--font-heading); font-weight:700;
  font-size:clamp(25px,4.2vw,42px); line-height:1.7; letter-spacing:-.015em;
}
.policy-goal-note{
  margin-top:26px; font-size:14.5px; color:rgba(255,255,255,.7); letter-spacing:.05em;
}

.policy-next{
  margin-top:24px; font-size:13.5px; color:var(--ink-3); line-height:1.9;
}

/* =========================================================
   しばやすはる物語
   ========================================================= */
.section-story{ background:var(--paper); }

.timeline{ position:relative; max-width:860px; }
.timeline::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:1.5px;
  background:linear-gradient(180deg, var(--accent), var(--accent-line), transparent);
}
.tl-item{ position:relative; padding:0 0 clamp(38px,4.4vw,52px) clamp(28px,4vw,52px); }
.tl-item::before{
  content:""; position:absolute; left:-5.5px; top:12px;
  width:12.5px; height:12.5px; border-radius:50%;
  background:var(--paper); border:2.5px solid var(--ink-3);
}
.tl-highlight::before, .tl-now::before{
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 0 6px var(--accent-pale);
}
.tl-item:last-child{ padding-bottom:0; }

.tl-year{
  font-family:var(--font-heading); font-size:15px; font-weight:700;
  letter-spacing:.12em; color:var(--accent-2); margin-bottom:10px;
}
.tl-year span{ font-size:.82em; opacity:.7; margin-left:2px; }
.tl-body h3{
  font-family:var(--font-heading); font-size:clamp(19px,2.3vw,24px);
  margin-bottom:14px; line-height:1.6;
}
.tl-body p{ font-size:15px; line-height:2.1; color:var(--ink-2); }
.tl-body p + p{ margin-top:1em; }
.tl-body strong{ color:var(--ink); font-weight:700; }

/* 山場の2件（タクラマカン砂漠／いま）は塗り箱で囲まず、
   軸のドットと文字の大きさ・濃さだけで強める */
.tl-highlight .tl-body h3,
.tl-now .tl-body h3{ font-size:clamp(22px,2.9vw,30px); }
.tl-highlight .tl-body p,
.tl-now .tl-body p{ color:var(--ink); }
.tl-highlight .tl-year,
.tl-now .tl-year{ font-size:17px; }


/* これまでの歩み：箱を並べず、縦の罫で4つに区切る */
.facts-label{
  margin-top:clamp(52px,6vw,76px); margin-bottom:20px;
  font-size:12px; font-weight:700; letter-spacing:.22em; color:var(--accent-2);
}
.facts{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border-2);
  border-bottom:1px solid var(--border-2);
}
.fact{
  padding:clamp(24px,3vw,32px) clamp(16px,2.2vw,28px);
  border-left:1px solid var(--border-2);
}
.fact:first-child{ border-left:0; padding-left:0; }
.fact:last-child{ padding-right:0; }
.fact-num{
  font-family:var(--font-heading); font-weight:700;
  font-size:clamp(23px,2.9vw,33px); line-height:1.25; letter-spacing:-.025em;
  color:var(--accent-2); margin-bottom:12px;
}
.fact-num span{ font-size:.52em; margin:0 1px; color:var(--ink-3); letter-spacing:0; }
.fact-label{ font-size:13px; line-height:1.9; color:var(--ink-2); }

@media (max-width:820px){
  .facts{ grid-template-columns:repeat(2,1fr); }
  .fact{ padding:22px 18px; }
  .fact:nth-child(odd){ border-left:0; padding-left:0; }
  .fact:nth-child(n+3){ border-top:1px solid var(--border-2); }
  .fact:nth-child(even){ padding-right:0; }
}
@media (max-width:430px){
  .facts{ grid-template-columns:1fr; }
  .fact{ padding:20px 0; border-left:0; border-top:1px solid var(--border-2); }
  .fact:first-child{ border-top:0; }
}

/* 実績の並びに合わせて箱をやめ、罫線だけの開閉行にする */
.more-profile{ margin-top:26px; max-width:860px; }
.more-profile summary{
  padding:18px 0; cursor:pointer; font-size:14.5px; font-weight:700;
  list-style:none; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border-2);
  transition:color .2s var(--ease);
}
.more-profile summary::-webkit-details-marker{ display:none; }
.more-profile summary::after{
  content:"＋"; color:var(--accent); font-size:17px; font-weight:400;
}
.more-profile[open] summary::after{ content:"−"; }
.more-profile summary:hover{ color:var(--accent-2); }
.more-body{ padding:4px 0 26px; border-bottom:1px solid var(--border-2); }
.more-body h4{
  font-size:12px; font-weight:700; letter-spacing:.18em; color:var(--accent-2);
  margin:24px 0 12px;
}
.more-body ul{ display:grid; gap:8px; }
.more-body li{
  font-size:14px; line-height:1.9; color:var(--ink-2); padding-left:18px; position:relative;
}
.more-body li::before{
  content:""; position:absolute; left:2px; top:.85em;
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}

/* =========================================================
   市民集会
   ========================================================= */
.section-events{ background:var(--white); }

.event-list{ display:grid; gap:18px; }
.event-card{
  /* 「くわしく見る」リンクの ::after でカード全体を覆うので、位置の基準にする */
  position:relative;
  display:grid; grid-template-columns:minmax(132px,170px) 1fr; gap:clamp(20px,3vw,40px);
  padding:clamp(28px,3.2vw,38px);
  background:var(--paper); border:1px solid var(--border-2); border-radius:var(--r-lg);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.event-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }

.event-date{
  /* 折り返すと曜日が日付から大きく離れてしまうので nowrap にし、列幅で担保する */
  display:flex; align-items:baseline; flex-wrap:nowrap; white-space:nowrap;
  font-family:var(--font-heading); font-weight:700; color:var(--accent-2); line-height:1;
}
.ev-m{ font-size:clamp(34px,4.4vw,46px); }
.ev-sep{ font-size:clamp(24px,3vw,32px); opacity:.5; margin:0 3px; }
.ev-d{ font-size:clamp(34px,4.4vw,46px); }
/* 曜日は枠付きバッジをやめ、日付の後ろにベースライン揃えで小さく添える */
.ev-w{
  font-size:13.5px; font-weight:700; margin-left:7px;
  color:var(--ink-3); line-height:1; letter-spacing:.02em;
}
.ev-w::before{ content:"("; }
.ev-w::after { content:")"; }
/* 回ごとの名前（市民集会／市民学習会 など）。会場名の上に小さく置く */
.event-kind{
  font-size:11.5px; font-weight:700; letter-spacing:.16em;
  color:var(--accent-2); margin-bottom:9px; line-height:1.6;
}
.event-card.is-past .event-kind{ color:var(--ink-3); }

.event-time{
  font-size:15.5px; font-weight:700; color:var(--ink); margin-bottom:10px;
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.event-open{ font-size:12.5px; font-weight:400; color:var(--ink-3); }
.event-body h3{
  font-family:var(--font-heading); font-size:clamp(18px,2.2vw,22px); margin-bottom:8px;
  word-break:auto-phrase;   /* スプレッドシートから来た会場名も文節で折り返す */
}
/* アクセスは枠付きピルをやめ、会場名のすぐ下に副題として置く */
.event-access{
  font-size:13.5px; line-height:1.8; color:var(--ink-3);
  letter-spacing:.02em; margin:2px 0 16px;
}
/* 管理画面で入れた改行をそのまま出す（本文はJS側で textContent として入れている） */
.event-desc{ font-size:14.5px; line-height:2.05; color:var(--ink-2); white-space:pre-line; }
.event-tba{ opacity:.78; }
.event-tba .event-time{ font-weight:400; font-size:13.5px; color:var(--ink-3); }

/* その回に配る資料（チラシ・PDF）。管理画面で予定に紐づけたものが並ぶ */
.event-files{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.event-file{
  display:flex; align-items:center; gap:10px; max-width:100%;
  padding:8px 15px 8px 8px; background:var(--paper-2);
  border:1px solid var(--border-2); border-radius:999px;
  color:var(--ink-2); text-decoration:none; font-size:13.5px; line-height:1.5;
  transition:border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.event-file:hover{ border-color:var(--accent-line); color:var(--accent-2); box-shadow:var(--shadow-sm); }
.event-file img{
  width:32px; height:32px; flex:none; object-fit:cover; object-position:top center;
  border-radius:50%; background:#fff; border:1px solid var(--border-2);
}
/* サムネイルを作れなかったときの代わり（PDF / IMG） */
.event-file-ic{
  display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex:none;
  border-radius:50%; background:var(--accent-pale); color:var(--accent-2);
  font-size:9.5px; font-weight:700; letter-spacing:.04em;
}
.event-file-name{ font-weight:700; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.event-file-meta{ flex:none; font-size:11.5px; font-weight:400; color:var(--ink-3); }
@media (max-width:680px){
  .event-files{ gap:8px; }
  .event-file{ width:100%; }
}

/* 個別ページ（/events/3）への入口。LINEやメールに貼るのはこのURL。
   ---------------------------------------------------------------
   カードのどこを押しても開けるようにするため、リンクは1つだけ置き、
   その ::after でカード全体を覆う（入れ子のリンクを作らないやり方）。
   リンクの実体は文字なので、キーボードや読み上げでも普通に辿れる。 */
.event-more{ margin-top:18px; display:flex; align-items:center; gap:8px; }
.event-more::after{
  content:"→"; color:var(--accent); font-size:14px; line-height:1;
  transition:transform .3s var(--ease);
}
.event-card:hover .event-more::after{ transform:translateX(4px); }
.event-more a{
  font-size:13.5px; font-weight:700; color:var(--accent-2); text-decoration:none;
  border-bottom:1.5px solid var(--accent-line); padding-bottom:3px;
  transition:border-color .25s var(--ease);
}
.event-more a:hover{ border-bottom-color:var(--accent); }
.event-more a::after{
  content:""; position:absolute; inset:0; z-index:1; border-radius:var(--r-lg);
}
/* 資料は覆いより手前に置き、そこだけは直接ひらける */
.event-file{ position:relative; z-index:2; }

/* 終わった回は1行のまま。資料は出さず、リンクは矢印だけにして右端に寄せる
   （文字は消さずに残すので、読み上げでは「この回の詳細を見る」と読まれる） */
.event-card.is-past .event-files{ display:none; }
.event-card.is-past .event-body{ display:flex; align-items:center; gap:12px; }
.event-card.is-past .event-body h3{ flex:1; }
.event-card.is-past .event-more{ flex:none; margin:0; gap:0; }
.event-card.is-past .event-more a{ font-size:0; border-bottom:0; padding:0; }
.event-card.is-past .event-more::after{ color:var(--ink-3); }
.event-card.is-past:hover .event-more::after{ color:var(--accent); }

@media (max-width:680px){
  .event-card{ grid-template-columns:1fr; gap:14px; }
}
/* 終了した回は下に畳む。開閉の見た目はプロフィールの「もっと見る」に揃える */
.event-past{ margin-top:18px; }
.event-past summary{
  padding:16px 2px; cursor:pointer; font-size:14px; font-weight:700; color:var(--ink-3);
  list-style:none; display:flex; align-items:center; gap:8px;
  border-top:1px solid var(--border-2);
  transition:color .2s var(--ease);
}
.event-past summary::-webkit-details-marker{ display:none; }
.event-past summary::after{
  content:"＋"; color:var(--accent); font-size:16px; font-weight:400; margin-left:auto;
}
.event-past[open] summary::after{ content:"−"; }
.event-past summary:hover{ color:var(--accent-2); }
.event-past-count{ font-weight:400; font-size:13px; }
.event-past-list{ display:grid; gap:12px; padding:2px 0 6px; }

.event-note{
  margin-top:28px; font-size:13px; color:var(--ink-3); line-height:1.9;
}

/* =========================================================
   LINE
   ========================================================= */
.section-line{ background:var(--panel); color:#fff; }
.line-inner{
  display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(36px,5vw,64px); align-items:center;
}
.line-desc{
  margin-top:24px; font-size:15.5px; line-height:2.1; color:rgba(255,255,255,.75);
  max-width:520px;
}
.line-actions{ margin-top:36px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.line-hint{ font-size:12.5px; color:rgba(255,255,255,.5); }

.line-visual{ display:flex; justify-content:center; }
.qr-frame{
  position:relative; width:min(240px,100%); aspect-ratio:1;
  background:#fff; border-radius:var(--r-lg); padding:18px;
  display:grid; place-items:center; box-shadow:var(--shadow-lg);
}
.qr-frame img{ width:100%; height:100%; object-fit:contain; }
.qr-placeholder{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  width:100%; height:100%; border:2px dashed var(--border); border-radius:var(--r-md);
  color:var(--ink-3);
}
.qr-frame.is-empty .qr-placeholder{ display:flex; }
.qr-placeholder span{ font-size:13.5px; font-weight:700; letter-spacing:.1em; }
.qr-placeholder small{
  font-size:10px; opacity:.7; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (max-width:860px){
  .line-inner{ grid-template-columns:1fr; }
  .line-visual{ justify-content:flex-start; }
}
/* スマホでは QR を出さない。その端末では読み取れず、
   すぐ上の「LINEで友だちになる」ボタンで完結するため。 */
@media (max-width:640px){
  .line-visual{ display:none; }
}

/* =========================================================
   お問い合わせ
   ========================================================= */
.section-contact{ background:var(--paper); }
/* 枠で囲わず、罫線と大きい文字だけで見せる */
.contact-list{ max-width:var(--read); border-top:1px solid var(--border-2); }
.contact-list li{ border-bottom:1px solid var(--border-2); }
.contact-list a{
  position:relative; display:grid;
  grid-template-columns:1fr auto; align-items:center;
  gap:4px 20px;
  padding:26px 4px; text-decoration:none;
  transition:padding-left .3s var(--ease);
}
.contact-list a::after{
  content:""; position:absolute; left:0; bottom:-1px; width:0; height:2px;
  background:var(--accent); transition:width .4s var(--ease);
}
.contact-list a:hover::after{ width:100%; }
.contact-list a:hover{ padding-left:10px; }

.contact-label{
  grid-column:1; font-size:11.5px; font-weight:700; letter-spacing:.18em;
  color:var(--accent-2); margin-bottom:6px;
}
.contact-value{
  grid-column:1;
  font-family:var(--font-heading);
  font-size:clamp(19px,2.9vw,28px); font-weight:700; line-height:1.4;
  letter-spacing:-.01em; overflow-wrap:anywhere;
  transition:color .25s var(--ease);
}
.contact-list a:hover .contact-value{ color:var(--accent-2); }
.contact-arrow{
  grid-column:2; grid-row:1 / span 2;
  width:26px; height:26px; color:var(--accent);
  transition:transform .3s var(--ease);
}
.contact-list a:hover .contact-arrow{ transform:translateX(6px); }

@media (max-width:520px){
  .contact-list a{ padding:22px 2px; }
  .contact-arrow{ width:22px; height:22px; }
}

/* ---- お問い合わせフォーム ---------------------------------
   囲みカードにせず、罫線と余白で見せる。ただし入力欄だけは
   「押せる／書ける」ことが一目で分かる必要があるので、薄いグレーで面を作る。 */
.cform{ max-width:var(--read); margin:0 0 56px; }
.cform-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
.cform-field{ display:block; margin-bottom:26px; }
.cform-label{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.14em;
  color:var(--ink-2); margin-bottom:9px;
}
.cform-label em,
.cform-check em,
.cform-label i,
.cform-check i{
  font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.1em;
  margin-left:9px; vertical-align:1px;
}
.cform-label em, .cform-check em{ color:var(--accent-2); }
.cform-label i,  .cform-check i { color:var(--ink-3); font-weight:400; }

.cform input[type=text],
.cform input[type=email],
.cform input[type=tel],
.cform textarea{
  display:block; width:100%;
  font-family:var(--font-base); font-size:16px; line-height:1.8; color:var(--ink);
  background:var(--paper-2);
  border:0; border-bottom:1px solid var(--border);
  border-radius:6px 6px 0 0;
  padding:14px 16px;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cform textarea{ resize:vertical; min-height:150px; }
.cform input::placeholder,
.cform textarea::placeholder{ color:var(--ink-3); opacity:.65; }
.cform input:hover,
.cform textarea:hover{ background:var(--paper-3); }
.cform input:focus,
.cform textarea:focus{
  outline:none; background:var(--paper-2);
  border-bottom-color:var(--accent);
  box-shadow:0 1px 0 0 var(--accent);
}
.cform-field.is-error input,
.cform-field.is-error textarea{ border-bottom-color:#C0392B; box-shadow:0 1px 0 0 #C0392B; }

.cform-error{
  display:none; margin-top:7px; font-size:13px; line-height:1.7; color:#C0392B;
}
.cform-error.is-shown{ display:block; }

/* 迷惑投稿よけ。画面外に置く（display:none は自動プログラムに気づかれやすい） */
.cform-hp{ position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; }

.cform-checks{
  margin:6px 0 34px; padding-top:24px; border-top:1px solid var(--border-2);
}
.cform-check{
  display:flex; gap:12px; align-items:flex-start;
  margin-bottom:14px; cursor:pointer; font-size:14.5px; line-height:1.85;
}
.cform-check input{
  flex:none; width:20px; height:20px; margin-top:5px;
  accent-color:var(--accent-2); cursor:pointer;
}
.cform-check small{ display:block; font-size:12.5px; color:var(--ink-3); line-height:1.8; }
.cform-check a{ color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; }
.cform-checks .cform-error{ margin-left:32px; }

.cform-submit{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; }
.cform-btn{ min-width:200px; justify-content:center; }
.cform-btn[disabled]{ opacity:.55; cursor:progress; }
.cform-note{ font-size:12.5px; color:var(--ink-3); line-height:1.8; }

/* 結果表示。囲みや色面は使わず、細い罫と文字の大小だけで見せる */
.cform-result{
  position:relative; margin-top:36px; padding-top:26px;
  border-top:1px solid var(--border-2);
}
.cform-result::before{
  content:""; position:absolute; top:-1px; left:0; width:48px; height:2px;
  background:var(--accent);
}
.cform-result-title{
  display:block; font-family:var(--font-heading); font-weight:700;
  font-size:clamp(19px,2.3vw,23px); line-height:1.6; letter-spacing:-.01em;
  color:var(--ink);
}
.cform-result-text{
  display:block; margin-top:11px; white-space:pre-line;
  font-size:14.5px; line-height:2.05; color:var(--ink-3);
}
.cform-result.is-error::before{ background:#C0392B; }
.cform-result.is-error .cform-result-title{ color:#B03A2E; }

.contact-or{
  font-size:13px; color:var(--ink-3); letter-spacing:.08em; margin-bottom:14px;
}

@media (max-width:640px){
  .cform-row{ grid-template-columns:1fr; gap:0; }
  .cform-field{ margin-bottom:22px; }
  .cform-btn{ width:100%; }
  .cform-note{ font-size:12px; }
}

/* JavaScript を切っている場合に表示される結果ページ */
.form-result{ padding:clamp(80px,14vh,160px) 0; }
.form-result .section-title{ margin-bottom:20px; }
.form-result-text{ max-width:var(--read); font-size:16px; line-height:2.1; color:var(--ink-2); }
.form-result-errors{ max-width:var(--read); margin:20px 0 0; padding-left:1.2em; color:#C0392B; font-size:14.5px; }
.form-result-back{ margin-top:36px; }
.form-result-back a{
  font-weight:700; color:var(--accent-2); text-decoration:underline; text-underline-offset:4px;
}

.sns{ margin-top:48px; }
/* プロフィール欄のSNSは、事実リストの続きとして少し詰める */
.profile-sns{ margin-top:32px; }
.profile-sns .sns-list a{ width:44px; height:44px; }
.profile-sns .sns-list svg{ width:19px; height:19px; }

.sns-label{ font-size:13px; color:var(--ink-3); margin-bottom:16px; letter-spacing:.08em; }
.sns-list{ display:flex; gap:12px; flex-wrap:wrap; }
.sns-list a{
  display:grid; place-items:center; width:50px; height:50px;
  background:var(--white); border:1px solid var(--border-2); border-radius:50%;
  color:var(--ink-2);
  transition:background-color .25s var(--ease), color .25s var(--ease),
             transform .25s var(--ease), border-color .25s var(--ease);
}
.sns-list a:hover{
  background:var(--accent-2); color:#fff; border-color:var(--accent-2); transform:translateY(-3px);
}
.sns-list svg{ width:21px; height:21px; }

/* LINEは公式ブランドアイコン（PNG）。色の変更・変形・装飾が禁止されているため、
   丸く切り抜いたり単色化したりせず、白い円の中に余白（アイソレーションゾーン）を
   とって原寸比のまま置く。ホバーで背景色が変わると公式の緑と干渉するので白のまま。 */
.sns-list a.is-line img{ width:26px; height:auto; display:block; }
.sns-list a.is-line:hover{ background:var(--white); border-color:var(--accent-2); }
.profile-sns .sns-list a.is-line img{ width:23px; }

/* 選挙ドットコムのように決まったアイコンが無いものは、丸ではなく名前を文字で出す。
   高さは丸アイコンとそろえて、横だけ文字ぶん伸ばす */
.sns-list a.is-text{
  width:auto; padding:0 20px; border-radius:25px; text-decoration:none;
  font-size:13.5px; font-weight:700; letter-spacing:.04em; white-space:nowrap;
}
.profile-sns .sns-list a.is-text{ width:auto; padding:0 18px; font-size:13px; }

/* =========================================================
   お知らせ
   ========================================================= */
.section-news{ background:var(--paper); }
/* 問い合わせ一覧と同じ組み立て。囲まず、罫線と文字の大小で見せる */
.news-list{ max-width:var(--read); border-top:1px solid var(--border-2); }
.news-list li{ border-bottom:1px solid var(--border-2); }
.news-list a{
  position:relative; display:grid;
  grid-template-columns:1fr auto; align-items:center; gap:4px 20px;
  padding:22px 4px; text-decoration:none;
  transition:padding-left .3s var(--ease);
}
.news-list a::after{
  content:""; position:absolute; left:0; bottom:-1px; width:0; height:2px;
  background:var(--accent); transition:width .4s var(--ease);
}
.news-list a:hover::after{ width:100%; }
.news-list a:hover{ padding-left:10px; }
.news-date{
  grid-column:1; font-size:11.5px; font-weight:700; letter-spacing:.14em;
  color:var(--accent-2); margin-bottom:6px;
}
.news-head{
  grid-column:1; font-family:var(--font-heading);
  font-size:clamp(16px,2.2vw,20px); font-weight:700; line-height:1.6;
  transition:color .25s var(--ease);
}
.news-list a:hover .news-head{ color:var(--accent-2); }
.news-list .contact-arrow{ grid-column:2; grid-row:1 / span 2; }

/* サムネイルつきの行。日付/見出し・画像・矢印 の3列。
   画像を右に置くのは、有無で行頭がずれないようにするため
   （サイト全体が左端でそろっているので、そこを崩さない） */
.news-list a.has-thumb{ grid-template-columns:1fr auto auto; }
.news-thumb{
  grid-column:2; grid-row:1 / span 2;
  width:88px; height:88px; object-fit:cover; border-radius:4px;
  background:var(--paper-3);
}
.news-list a.has-thumb .news-date,
.news-list a.has-thumb .news-head{ grid-column:1; }
.news-list a.has-thumb .contact-arrow{ grid-column:3; }

/* 個別記事の画像 */
.news-hero{ max-width:var(--read); margin:clamp(28px,4vh,44px) 0 0; }
.news-hero img{ width:100%; height:auto; border-radius:6px; }

.news-more{ max-width:var(--read); margin-top:28px; }
.news-more a, .news-back a, .news-link a{
  font-weight:700; color:var(--accent-2);
  text-decoration:underline; text-underline-offset:4px;
}
.news-empty{ max-width:var(--read); color:var(--ink-3); font-size:15px; }

/* 個別記事 */
.news-title{ line-height:1.5; }
.news-body p{ margin-bottom:20px; }
.news-link{ margin-top:28px; }
.news-back{ max-width:var(--read); margin-top:48px; }

@media (max-width:520px){
  .news-list a{ padding:19px 2px; }
  .news-thumb{ width:68px; height:68px; }
  .news-list a{ gap:4px 14px; }
}

/* =========================================================
   市民集会の個別ページ（/events/3）と一覧（/events/）
   ========================================================= */
.ev-title{ line-height:1.45; }
.ev-meta{ max-width:var(--read); margin-top:clamp(28px,4vh,40px); border-top:1px solid var(--border-2); }
.ev-meta > div{
  display:grid; grid-template-columns:82px 1fr; gap:0 20px;
  padding:18px 4px; border-bottom:1px solid var(--border-2);
}
.ev-meta dt{
  font-size:11.5px; font-weight:700; letter-spacing:.14em;
  color:var(--accent-2); padding-top:6px;
}
.ev-meta dd{ font-size:15.5px; line-height:1.95; color:var(--ink-2); }
.ev-meta dd strong{
  display:block; font-family:var(--font-heading); color:var(--ink);
  font-size:clamp(17px,2.2vw,20px); line-height:1.6;
}
.ev-open{ margin-left:10px; font-size:13px; color:var(--ink-3); }
.ev-access{ display:block; margin-top:4px; font-size:13.5px; color:var(--ink-3); }
.ev-body{ margin-top:clamp(28px,4vh,40px); }

/* その回に配る資料 */
.ev-docs{ max-width:var(--read); margin-top:clamp(36px,5vh,52px); }
.ev-docs-head{
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
  font-size:12px; font-weight:700; letter-spacing:.2em; color:var(--accent-2);
}
.ev-docs-head::after{ content:""; flex:1; height:1px; background:var(--border-2); }
.ev-docs-list{ display:grid; gap:12px; }
.ev-docs-list a{
  display:grid; grid-template-columns:96px 1fr; align-items:center; gap:16px;
  padding:14px; background:var(--paper-2);
  border:1px solid var(--border-2); border-radius:var(--r-sm);
  color:var(--ink); text-decoration:none;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.ev-docs-list a:hover{ border-color:var(--accent-line); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.ev-docs-list img{
  width:96px; height:120px; object-fit:cover; object-position:top center;
  background:#fff; border:1px solid var(--border-2); border-radius:4px;
}
.ev-doc-ic{
  display:flex; align-items:center; justify-content:center; width:96px; height:120px;
  border-radius:4px; background:var(--accent-pale); color:var(--accent-2);
  font-size:12px; font-weight:700; letter-spacing:.06em;
}
.ev-doc-name{ display:block; font-family:var(--font-heading); font-size:16px; font-weight:700; line-height:1.6; }
.ev-doc-meta{ display:block; margin-top:6px; font-size:12.5px; color:var(--ink-3); }
.ev-docs-note{ margin-top:14px; font-size:12.5px; line-height:1.9; color:var(--ink-3); }

/* 一覧 */
.ev-index-doc{
  display:inline-block; margin-left:10px; padding:2px 9px; vertical-align:middle;
  background:var(--accent-pale); color:var(--accent-2); border-radius:999px;
  font-family:var(--font-base); font-size:11.5px; font-weight:700; letter-spacing:.04em;
}
.ev-index-past{ max-width:var(--read); margin-top:36px; }
.ev-index-past .news-list{ border-top:0; }

@media (max-width:520px){
  .ev-meta > div{ grid-template-columns:1fr; gap:4px; padding:16px 2px; }
  .ev-meta dt{ padding-top:0; }
  .ev-docs-list a{ grid-template-columns:72px 1fr; gap:12px; padding:12px; }
  .ev-docs-list img,
  .ev-doc-ic{ width:72px; height:92px; }
}

/* =========================================================
   配布資料（PDF）
   ========================================================= */
.section-docs{ background:var(--paper); }
.nf-list{ margin-top:clamp(36px,5vh,56px); }

.doc-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:clamp(26px,3.2vw,44px);
}
.doc-grid a{
  display:block; text-decoration:none;
  transition:transform .25s var(--ease);
}
.doc-grid a:hover{ transform:translateY(-4px); }

/* 表紙。A4の縦横比で、上端から見せる */
.doc-thumb{
  display:block; width:100%; aspect-ratio:1/1.414;
  object-fit:cover; object-position:top center;
  border:1px solid var(--border-2); border-radius:2px;
  background:var(--paper-2);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.doc-grid a:hover .doc-thumb{
  border-color:var(--accent-line); box-shadow:var(--shadow-lg);
}
/* サムネイルを作れなかったとき */
.doc-thumb.is-none{
  display:grid; place-items:center;
  color:var(--ink-3); font-weight:700; font-size:15px; letter-spacing:.14em;
}

.doc-date{
  display:block; margin-top:14px;
  font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--accent-2);
}
.doc-title{
  display:block; margin-top:6px;
  font-family:var(--font-heading); font-weight:700;
  font-size:15.5px; line-height:1.7; color:var(--ink);
  transition:color .25s var(--ease);
}
.doc-grid a:hover .doc-title{ color:var(--accent-2); }
.doc-note{
  display:block; margin-top:6px; font-size:12.5px; line-height:1.85; color:var(--ink-3);
}
.doc-meta{
  display:inline-block; margin-top:10px;
  font-size:11px; letter-spacing:.1em; color:var(--ink-3);
}

@media (max-width:520px){
  .doc-grid{ grid-template-columns:1fr 1fr; gap:22px 18px; }
  .doc-title{ font-size:14px; }
}

/* =========================================================
   個人情報の取り扱い（サブページ）
   ========================================================= */
.section-legal{ background:var(--paper); padding-top:clamp(56px,8vh,96px); }
.section-legal .section-title{ margin-bottom:22px; }
.legal-body{ max-width:var(--read); margin-top:clamp(40px,6vh,64px); }
.legal-body h2{
  font-size:16px; letter-spacing:.02em; color:var(--ink);
  margin:44px 0 12px; padding-top:20px; border-top:1px solid var(--border-2);
}
.legal-body h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.legal-body p{ font-size:15.5px; line-height:2.1; color:var(--ink-2); margin-bottom:14px; }
.legal-body b{ color:var(--ink); font-weight:700; }
.legal-body ul{ margin:0 0 16px; padding-left:1.4em; list-style:disc; }
.legal-body li::marker{ color:var(--accent); }
.legal-body li{ font-size:15.5px; line-height:2.05; color:var(--ink-2); margin-bottom:6px; }
.legal-body a{ color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; }
.legal-date{ margin-top:36px; font-size:13px; color:var(--ink-3); }
.sp-br{ display:none; }
@media (max-width:640px){
  .sp-br{ display:inline; }
  .legal-body h2{ margin-top:36px; }
  .legal-body p, .legal-body li{ font-size:15px; }
}

/* =========================================================
   フッター
   ========================================================= */
.site-footer{
  background:var(--panel); color:rgba(255,255,255,.78);
  padding:60px 0 44px; font-size:13.5px; line-height:2;
}
.footer-inner{ display:grid; gap:26px; }
.footer-name{
  font-family:var(--font-heading); font-size:24px; font-weight:700; color:#fff;
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
.footer-name span{
  font-family:var(--font-base); font-size:12px; letter-spacing:.16em;
  color:rgba(255,255,255,.55);
}
.footer-role{ margin-top:8px; font-size:13px; }
.footer-contact a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); }
.footer-contact a:hover{ border-bottom-color:#fff; }
.footer-legal{ margin-top:20px; font-size:13px; }
.footer-legal a{
  color:rgba(255,255,255,.72); text-decoration:underline; text-underline-offset:3px;
  transition:color .25s var(--ease);
}
.footer-legal a:hover{ color:#fff; }
.footer-copy{
  padding-top:22px; border-top:1px solid rgba(255,255,255,.13);
  font-size:11.5px; letter-spacing:.08em; color:rgba(255,255,255,.45);
}

/* =========================================================
   トップへ戻る
   ========================================================= */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:48px; height:48px; display:grid; place-items:center;
  background:var(--white); color:var(--ink);
  border:1px solid var(--border); border-radius:50%;
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--accent-2); color:#fff; border-color:var(--accent-2); }
.to-top svg{ width:19px; height:19px; }
@media (max-width:640px){ .to-top{ right:14px; bottom:14px; width:44px; height:44px; } }

/* =========================================================
   印刷
   ========================================================= */
@media print{
  .site-header,.to-top,.hero-bg,.nav-toggle{ display:none !important; }
  body{ background:#fff; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .section{ padding:24px 0; break-inside:avoid; }
}