/* ================================================
   市長選版（11/1〜）のトップページ。style.css の上に重ねる
   ================================================ */

/* ---------- 試作の目印（公開前に消す） ---------- */
.proto-note {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 70;
  background: var(--orange-deep);
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.8;
  text-align: center;
  letter-spacing: 0.08em;
}
.proto-note + .site-header { top: 1.3rem; }

/* ---------- 共通 ----------
   ボタン・帯・札など面で塗る橙は明るい --orange-fill（ハルの指定）。白地の上の小さな橙の文字は、読みやすさのため濃い --orange-strong のまま */
.campaign { --orange-strong: #c2410c; --orange-fill: var(--orange); }
/* 見出しの字間を詰め、伸びる線・せり上がる演出はやめる（読む前に待たせない） */
.campaign { --font-round: var(--font-body); --font-hand: var(--font-body); --font-brush: var(--font-body); } /* 書体は Zen Kaku Gothic New 一つ */
/* 見出しは丸ゴシックの太字、上に手書き風の小さな一言（温かみ版から） */
.campaign .sec-head h2 { font-family: var(--font-round); font-weight: 900; letter-spacing: 0.04em; }
.campaign .sec-eyebrow { margin-bottom: 0.1rem; font-family: var(--font-hand); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.08em; color: var(--orange-strong); }
.campaign .dark .sec-eyebrow { color: rgba(255, 255, 255, 0.92); }
.campaign .sec-head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.campaign .section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.campaign .logo-name { letter-spacing: 0.08em; }
.campaign .more { letter-spacing: 0.04em; font-weight: 700; color: var(--orange-strong); }
.campaign .more::after { content: "›"; width: auto; height: auto; background: none; transition: none; }
.campaign .dark .more { color: #fff; }

/* 地図のボタン（いちばん押してほしいので、大きく・幅いっぱい） */
.c-map-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.5em 1em;
  border-radius: 6px;
  background: var(--orange-fill);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}
.c-map-btn::before { content: ""; width: 0.9em; height: 0.9em; margin-right: 0.5em; background: currentColor; clip-path: path("M7 0C3.1 0 0 3.1 0 7c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 7 4.5a2.5 2.5 0 0 1 0 5z"); transform: scale(0.85); transform-origin: left center; }
.c-map-btn:hover { background: var(--orange-deep); }

/* ---------- ボタン ---------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.8em 1.6em;
  border-radius: 999px;
  background: var(--orange-fill);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-decoration: none;
  transition: background 0.3s;
}
.c-btn:hover { background: var(--orange-deep); }
.c-btn::after { content: "→"; }
.c-link { font-size: 0.85rem; color: var(--ink-soft); text-underline-offset: 0.3em; }

/* ---------- ファーストビュー ---------- */
.c-hero {
  position: relative;
  padding-top: calc(var(--header-h) + 1.3rem);
  overflow: hidden;
}
.c-hero-bg {
  position: absolute;
  inset: 0;
  background: var(--paper);
}
.c-hero-inner {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  min-height: min(calc(100svh - var(--header-h) - 1.3rem), 880px);
  display: grid;
  grid-template-columns: minmax(300px, 34%) minmax(280px, 1fr) minmax(340px, 400px);
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  align-items: end;
}
.c-photo { align-self: end; }
.c-photo img {
  width: 100%;
  max-height: calc(100svh - var(--header-h) - 2rem);
  object-fit: contain;
  object-position: bottom;
  mix-blend-mode: multiply; /* 写真の白い背景を、橙の地になじませる */
}

.c-id { align-self: center; padding-block: 2rem; }
.c-badge {
  display: inline-block;
  padding: 0.25em 1em;
  background: var(--ink);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.c-party { margin-top: 0.5rem; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.c-name {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(3rem, 5.4vw, 5.4rem);
  line-height: 1.1;
  white-space: nowrap;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.c-kanji { margin-top: 0.9rem; font-size: 0.95rem; color: var(--ink-soft); letter-spacing: 0.04em; }
.c-catch {
  margin-top: 1.4rem;
  padding-left: 0.9em;
  border-left: 4px solid var(--orange);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.6;
  color: var(--ink);
}
.c-catch .sp { display: none; }
.c-vote {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  align-items: baseline;
  color: var(--ink);
}
.c-vote div { display: flex; align-items: baseline; gap: 0.7em; }
.c-vote dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 0.05em 0.7em;
  border: 1px solid currentColor;
}
.c-vote dd { font-weight: 700; letter-spacing: 0.06em; }
.c-vote-main dt { background: var(--orange-fill); border-color: var(--orange-fill); color: #fff; }
.c-vote-main dd { font-family: var(--font-serif); font-size: 1.2rem; }
.c-vote-main b { font-size: 2.2em; line-height: 1; color: var(--orange-fill); margin-inline: 0.05em; }
.c-vote small { font-size: 0.7em; }
.c-countdown { margin-top: 0.6rem; font-size: 0.9rem; color: var(--ink-soft); letter-spacing: 0.1em; }
.c-countdown b { font-size: 1.5rem; color: var(--ink); margin-inline: 0.1em; }
.c-vote-sp { display: none; }

/* 今日のよしとみ景子（ファーストビューの右のカード） */
.c-today {
  align-self: center;
  margin-block: 1.5rem;
  background: #fff;
  border-top: 5px solid var(--orange);
  box-shadow: 0 18px 50px rgba(24, 34, 46, 0.14);
  padding: 1.3rem 1.4rem 1.2rem;
  line-height: 1.7;
  scroll-margin-top: 90px;
}
.c-today-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.c-today-head h2 { font-family: var(--font-serif); font-size: 1.15rem; color: var(--ink); letter-spacing: 0.04em; }
.c-today-date { font-size: 0.85rem; color: var(--muted); }

/* いま／次の演説 */
.c-next {
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  background: var(--orange-fill);
  color: #fff;
}
.c-next-label { display: inline-block; padding: 0 0.6em; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: var(--ink); }
.c-next.is-live .c-next-label::before { content: "● "; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.c-next-time { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.4; }
.c-next-place { font-size: 1.05rem; font-weight: 700; }
.c-next-actions { margin-top: 0.7rem; display: flex; gap: 0.6rem 1rem; flex-wrap: wrap; align-items: center; font-size: 0.9rem; }
.c-next-actions .c-map-btn { flex: 1 1 100%; background: #fff; color: var(--orange-strong); }
.c-next-actions .c-map-btn:hover { background: var(--paper); }
.c-next-actions a:not(.c-map-btn) { color: #fff; text-underline-offset: 0.25em; }

.c-today-body { margin-top: 0.8rem; display: grid; grid-template-columns: 1fr 108px; gap: 0.8rem; align-items: start; }
.c-timeline li {
  display: grid;
  grid-template-columns: 4.4em 1fr;
  gap: 0.6rem;
  padding: 0.42em 0.2em;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.c-timeline time { font-weight: 700; color: var(--ink); white-space: nowrap; }
.c-timeline .tag {
  display: inline-block;
  margin-right: 0.4em;
  padding: 0 0.45em;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--ink-soft);
  border-radius: 2px;
  vertical-align: 0.1em;
}
.c-timeline .t-街頭演説 .tag { background: var(--orange-fill); }
.c-timeline :is(.t-朝のごあいさつ, .t-練り歩き, .t-催し, .t-ミニ集会) .tag { background: var(--orange-fill); }
.c-timeline time small { font-size: 0.7em; font-weight: 500; }
.c-timeline .t-個人演説会 .tag { background: var(--red); }
.c-timeline .t-地域回り .tag { background: var(--muted); }
.c-timeline .is-past { opacity: 0.6; }
.c-timeline .is-past .tag { background: var(--muted); }
.c-timeline .is-now { background: #fff3e6; }
.c-timeline .is-cancelled s { color: var(--muted); }
.c-timeline .is-cancelled .tag { background: var(--muted); }
.c-map svg { width: 100%; height: auto; display: block; }
.c-map .ward { opacity: 1; fill: #ffe6cc; stroke: #fff; stroke-width: 4; }
.c-map .ward.is-on { fill: var(--wc, var(--orange)); }
.c-map text { font-size: 64px; fill: var(--ink-soft); text-anchor: middle; font-family: var(--font-body); font-weight: 700; }
.c-map text.is-on { fill: #fff; }
.c-today-foot { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.c-today-empty { margin-top: 0.8rem; font-size: 0.9rem; }

/* ---------- X の最新投稿（今日のよしとみ景子の下） ---------- */
.c-xfeed { padding-block: clamp(2.5rem, 6vw, 4rem); background: #fff; border-top: 4px solid var(--orange); scroll-margin-top: 60px; }
.c-xfeed-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.c-xfeed-head h2 { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-serif); font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--ink); letter-spacing: 0.1em; }
.c-xfeed-head a { font-size: 0.88rem; color: var(--gold); text-underline-offset: 0.3em; }
/* 3 件を横に並べる（スマホは縦に 1 列で、枠の中をスクロール） */
.c-xfeed .x-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; align-items: start; max-height: none; overflow: visible; }
.c-xfeed .x-posts > .twitter-timeline { grid-column: 1 / -1; font-size: 0.85rem; color: var(--muted); }
.c-xfeed .twitter-tweet { margin: 0 !important; }
.c-xfeed-more { margin-top: 1.4rem; text-align: center; }

/* ---------- 演説の予定 ---------- */
.c-lead { max-width: 760px; color: var(--ink-soft); line-height: 1.9; letter-spacing: 0.02em; }
.c-lead small { display: block; margin-top: 0.6rem; font-size: 0.85rem; color: var(--muted); }
.c-sched-note { margin-top: -0.6rem; font-size: 0.85rem; color: var(--ink-soft); }
.c-days, .c-wards { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.4rem; scrollbar-width: thin; }
.c-days { margin-top: 2rem; }
.c-wards { margin-top: 0.6rem; }
.c-days button, .c-wards button {
  flex: none;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.4;
  padding: 0.55em 1em;
  min-height: 44px;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.c-days button { min-width: 4.6em; text-align: center; }
.c-days button small { display: block; font-size: 0.72rem; color: var(--muted); }
.c-days button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.c-days button[aria-selected="true"] small { color: #c9d0d8; }
/* 「注目」のタブ（告知の画像がある予定）。日付のタブと見分けがつくよう、オレンジの枠と字 */
.c-days button.is-pick { border-color: var(--orange-strong); color: var(--orange-strong); font-weight: 700; }
.c-days button.is-pick small { color: var(--orange-strong); }
.c-days button.is-pick[aria-selected="true"] { background: var(--orange-strong); border-color: var(--orange-strong); color: #fff; }
.c-days button.is-pick[aria-selected="true"] small { color: #fff; }
.c-days button.is-today::after { content: "今日"; display: block; font-size: 0.72rem; color: var(--orange-strong); font-weight: 700; }
.c-wards button { border-radius: 999px; }
.c-wards button[aria-pressed="true"] { background: var(--orange-fill); color: #fff; border-color: var(--orange-fill); }
/* 区ごとの色（--wc は js/campaign.js の WARD_COLOR）。押す前は色の丸と枠、押したら塗りつぶし */
.c-wards button[style] { border-color: var(--wc); color: var(--wc); font-weight: 700; }
.c-wards button[style]::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.4em; border-radius: 50%; background: var(--wc); vertical-align: 0.05em; }
.c-wards button[style][aria-pressed="true"] { background: var(--wc); border-color: var(--wc); color: #fff; }
.c-wards button[style][aria-pressed="true"]::before { background: #fff; }
/* 区のボタンは同じ幅にそろえる（「東区」と「博多区」で幅が変わらないように） */
.c-wards button[data-w]:not([data-w=""]) { min-width: 6.2em; text-align: center; }
/* カードの区の札も、区のボタン（押す前）と同じ形: 白地に区の色の枠・文字・丸 */
.ward-chip { display: inline-block; margin-right: 0.6em; padding: 0 0.8em; border: 1px solid var(--wc, var(--muted)); border-radius: 999px; background: #fff; color: var(--wc, var(--muted)); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.7; vertical-align: 0.05em; white-space: nowrap; }
.ward-chip::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.4em; border-radius: 50%; background: currentColor; vertical-align: 0.05em; }

.c-events { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.c-events li { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--orange); line-height: 1.6; letter-spacing: 0.02em; }
.c-events li > .c-map-btn { margin: 0 1.2rem 1rem; }
.c-events li.is-cancelled { padding: 1rem 1.2rem; }
.c-events li:has(.ev-open):hover { border-color: var(--orange); }
.c-events .ev-open { display: block; flex: 1; width: 100%; padding: 1rem 1.2rem 0.8rem; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.c-events .ev-open:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.c-events .ev-foot { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px dashed var(--line); font-size: 0.85rem; color: var(--ink-soft); }
.c-events .ev-faces { display: flex; }
.c-events .ev-face { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; background: var(--gold-soft); }
.c-events .ev-face + .ev-face { margin-left: -9px; }
.c-events .ev-more { margin-left: auto; white-space: nowrap; font-weight: 700; color: var(--orange-strong); }
.c-events .ev-more::after { content: "›"; margin-left: 0.3em; }
.is-initial { display: inline-grid; place-items: center; font-family: var(--font-serif); font-weight: 700; color: var(--orange-deep); line-height: 1; }
.c-events li.t-個人演説会 { border-left-color: var(--red); }
.c-events li.is-cancelled { border-left-color: var(--muted); opacity: 0.7; }
.c-events .ev-type, .c-events .ev-time, .c-events .ev-place, .c-events .ev-ward { display: block; }
.c-events .ev-type { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--orange-strong); }
.c-events .t-個人演説会 .ev-type { color: var(--red); }
.c-events .ev-cover { display: block; width: calc(100% + 2.4rem); max-width: none; height: auto; aspect-ratio: 16 / 9; margin: -1rem -1.2rem 0.8rem; }
/* 注目イベントのカードの日付。時刻より大きく */
.c-events .ev-date { display: block; font-size: 1.6em; line-height: 1.15; color: var(--ink); }
.c-events .ev-date small { font-size: 0.5em; color: var(--ink-soft); }
.c-events .ev-time { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; color: var(--ink); }
.c-events .ev-place { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.c-events .ev-ward { margin-top: 0.3rem; font-size: 0.85rem; color: var(--ink-soft); }
/* カードの左の線も区の色に */
.c-events li[style]:not(.is-cancelled) { border-left-color: var(--wc); }
/* 当日調整の予定（時間帯と方面だけ）は控えめに */
.c-events li.is-vague { padding: 1rem 1.2rem; background: var(--paper); border-left-color: var(--gold-soft); border-style: dashed; border-left-style: solid; }
.c-events li.is-vague[style] { border-left-color: var(--wc); }
.c-events li.is-vague .ev-type { color: var(--ink-soft); }
.c-events li.is-vague .ev-time { font-size: 1.1rem; }
.c-ev-when small { margin-left: 0.6em; font-size: 0.8rem; color: var(--muted); }
.c-empty { margin-top: 1.6rem; color: var(--muted); }
/* 3 日目より先の日に出す「回る区」 */
.c-day-wards { margin-top: 1.6rem; padding: 1.2rem 1.4rem; border: 1px solid #ddd; border-radius: 10px; background: #fff; }
.c-day-wards h3 { margin: 0 0 0.8rem; font-size: 1.1rem; }
.c-day-wards h3 small { font-size: 0.8em; font-weight: 500; }
.c-day-wards-list .ward-chip { margin-bottom: 0.4em; font-size: 0.95rem; }
.c-day-wards-note { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.9rem; }

/* 予定の詳細（カードを押すと下からせり上がる。パソコンでは真ん中に開く） */
.c-ev-dialog { width: min(640px, 100% - 32px); max-height: min(88svh, 900px); margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; }
.c-ev-dialog::backdrop { background: rgba(24, 34, 46, 0.55); animation: ev-fade 0.2s ease both; }
.c-ev-sheet { position: relative; max-height: inherit; overflow-y: auto; background: #fff; border-top: 6px solid var(--orange); padding: clamp(1.5rem, 4vw, 2.4rem); box-shadow: 0 24px 60px rgba(24, 34, 46, 0.3); animation: ev-rise 0.22s ease-out both; }
.c-ev-dialog.is-closing::backdrop { animation: ev-fade 0.18s ease reverse both; }
.c-ev-dialog.is-closing .c-ev-sheet { animation: ev-drop 0.18s ease-in both; }
.c-ev-close { position: absolute; top: 0.6rem; right: 0.6rem; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.c-ev-close:hover { background: var(--gold-soft); }
.c-ev-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.c-ev-body .ev-type { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; color: var(--orange-strong); }
.c-ev-body .ev-type.t-個人演説会 { color: var(--red); }
/* 日付を大きく、その横に時刻。場所・区・地図までを詰めて 1 かたまりにする */
.c-ev-when { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.7em; margin-top: 0.2rem; color: var(--ink-soft); line-height: 1.3; }
.c-ev-date { font-family: var(--font-serif); font-size: clamp(2rem, 6vw, 2.5rem); font-weight: 700; color: var(--ink); letter-spacing: 0.02em; }
.c-ev-date small { font-size: 0.45em; font-weight: 700; color: var(--ink-soft); }
.c-ev-when b { font-family: var(--font-serif); font-size: clamp(1.2rem, 3.5vw, 1.4rem); color: var(--ink); }
.c-ev-when > small { flex-basis: 100%; font-size: 0.8rem; }
.c-ev-place { margin-top: 0.4rem; padding-right: 2.5rem; font-family: var(--font-serif); font-size: clamp(1.15rem, 3vw, 1.35rem); color: var(--ink); line-height: 1.4; }
.c-ev-ward { font-size: 0.85rem; color: var(--muted); }
.c-ev-sub { margin-top: 1.2rem; font-size: 0.9rem; letter-spacing: 0.04em; color: var(--ink-soft); }
.c-ev-speakers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem 1rem; margin-top: 0.7rem; }
.c-ev-speakers li { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.c-ev-speakers small { display: block; font-size: 0.8rem; font-weight: 400; color: var(--ink-soft); }
/* 応援弁士は小さい丸の写真の横に、肩書きと名前 */
.c-ev-face { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--gold-soft); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--orange); font-size: 1.3rem; }
.c-ev-cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-bottom: 0.8rem; border-radius: 4px; }
.c-ev-free { margin-top: 0.5rem; font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.c-ev-detail { margin-top: 0.9rem; padding: 0.6rem 0.9rem; background: var(--paper); font-size: 0.88rem; line-height: 1.7; white-space: pre-line; } /* detail の \n で改行（11/2） */
.c-ev-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-top: 0.8rem; }
.c-ev-links .c-map-btn { flex: 1 1 240px; }
.c-ev-cal { font-size: 0.9rem; color: var(--ink-soft); text-underline-offset: 0.25em; }
/* ライブ配信のボタン（予定に live があるとき。YouTube の赤） */
.c-ev-live { margin-top: 0.7rem; }
.c-ev-live a { display: flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.75em 1em; border-radius: 6px; background: #d32f2f; color: #fff; font-weight: 700; text-decoration: none; }
.c-ev-live a::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0.45em 0 0.45em 0.75em; border-color: transparent transparent transparent #fff; }
.c-ev-live a:hover { background: #b71c1c; }
@keyframes ev-fade { from { opacity: 0; } }
@keyframes ev-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes ev-drop { to { opacity: 0; transform: translateY(12px); } }
@media (max-width: 640px) {
  /* スマホは画面の下からのシート */
  .c-ev-dialog { width: 100%; max-width: 100%; margin: auto 0 0; }
  .c-ev-sheet { border-radius: 16px 16px 0 0; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
  .c-ev-speakers { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem 0.6rem; }
  .c-ev-speakers li { font-size: 0.88rem; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .c-ev-dialog::backdrop, .c-ev-sheet { animation: none; }
}

/* ---------- ごあいさつ（罫線の便箋に、傾けた写真と毛筆の名前） ---------- */
.c-letter {
  position: relative;
  margin-bottom: 1.5rem;
  padding: 1.9em clamp(1.2rem, 4vw, 2.4rem) 1.5em;
  background: #fff;
  background-image: repeating-linear-gradient(transparent 0 calc(1.9em - 1px), #efe3cf calc(1.9em - 1px) 1.9em);
  background-position: 0 0; /* 罫線を行の下の端にそろえる */
  border-radius: 4px;
  box-shadow: 0 2px 10px rgb(80 50 20 / 0.08);
  font-family: var(--font-round);
  font-weight: 700;
  font-size: clamp(0.98rem, 1.6vw, 1.08rem);
  line-height: 1.9;
  color: var(--ink);
}
.c-letter::after { content: ""; display: block; clear: both; }
.c-letter p { margin: 0 0 1.9em; }
.c-letter .c-letter-sign { margin: 0; text-align: right; font-family: var(--font-brush); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2rem); }
.c-letter-photo { float: right; width: clamp(110px, 18vw, 200px); aspect-ratio: 3 / 4; object-fit: cover; margin: 0 0 0.6rem 1.2rem; border: 6px solid #fff; transform: rotate(3deg); box-shadow: 0 2px 8px rgb(0 0 0 / 0.16); }
/* プロフィール動画（16:9。押すまではサムネと再生ボタンだけ） */
.c-movie { position: relative; margin: 0 0 1.5rem; aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 10px rgb(80 50 20 / 0.08); }
.c-movie iframe, .c-movie-play, .c-movie-play img { display: block; width: 100%; height: 100%; border: 0; }
.c-movie-play { position: relative; padding: 0; background: none; cursor: pointer; }
.c-movie-play img { object-fit: cover; }
.c-movie-play::after { content: ""; position: absolute; left: 50%; top: 50%; width: clamp(56px, 9vw, 76px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: rgb(0 0 0 / 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 56% 50% / 46% no-repeat; transition: background-color 0.2s; }
.c-movie-play:hover::after, .c-movie-play:focus-visible::after { background-color: var(--orange); }

/* ---------- 街で、お会いしています（少し傾けた写真に手書きの添え書き） ---------- */
.c-snaps-head { margin-top: clamp(3rem, 7vw, 4.5rem); }
.c-snaps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem 1.2rem; }
.c-snaps li { background: #fff; padding: 8px 8px 4px; box-shadow: 0 2px 8px rgb(0 0 0 / 0.12); transition: transform 0.2s ease; }
.c-snaps li:nth-child(odd) { transform: rotate(-2deg); }
.c-snaps li:nth-child(even) { transform: rotate(1.6deg); }
.c-snaps li:hover { transform: rotate(0) scale(1.02); }
.c-snaps img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.c-snaps .wide { grid-column: span 2; }
.c-snaps .wide img { aspect-ratio: 16 / 10; }
.c-snaps p { margin: 0.3rem 0.2rem 0; font-family: var(--font-hand); font-weight: 600; font-size: 0.9rem; line-height: 1.6; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .c-snaps li { transition: none; } }

/* ---------- 八つの約束（角の丸いカードに、写真に重なる橙の丸数字） ---------- */
/* 見出しの右に、人物だけを切り抜いた写真（images/snaps/rin-cut.webp）。後ろに橙の丸、頭は丸から少しはみ出し、胸から下は丸ごと背景に溶かす */
.c-promises-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.5rem; }
.c-promises-photo { position: relative; width: clamp(220px, 28vw, 340px); margin: 0; -webkit-mask-image: linear-gradient(#000 74%, transparent 98%); mask-image: linear-gradient(#000 74%, transparent 98%); }
.c-promises-photo::before { content: ""; position: absolute; left: 8%; right: 4%; bottom: 6%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(150deg, #ffa24a, var(--orange) 55%, var(--orange-deep)); }
.c-promises-photo img { position: relative; display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
  .c-promises-head { grid-template-columns: 1fr; }
  .c-promises-photo { width: min(78%, 300px); justify-self: center; }
}
.c-promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2.5rem; }
.c-promises a { position: relative; display: block; background: #fff; border-radius: 14px; overflow: hidden; text-decoration: none; height: 100%; box-shadow: 0 2px 0 rgb(80 50 20 / 0.06); transition: transform 0.15s ease; }
.c-promises a:hover { transform: translateY(-3px); }
.c-promises img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.c-promises .no {
  position: absolute;
  left: 0.7rem;
  top: 0;
  margin-top: calc(75% - 1.3rem); /* 写真（4:3）の下の端に重ねる */
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--orange-fill);
  color: #fff;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1;
}
.c-promises .t { display: block; padding: 1.5rem 0.9rem 1rem; font-family: var(--font-round); font-size: 0.95rem; font-weight: 700; color: var(--ink); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .c-promises a { transition: none; } }
.c-promises-head h2 .plus1 { margin-left: 0.3em; font-size: 0.6em; vertical-align: 0.15em; }
/* 八つの約束＋1（写真なし）。8 枚の下に横いっぱいの帯で、オレンジの「＋1」の丸と文字 */
.c-promises li.is-plus { grid-column: 1 / -1; }
.c-promises .is-plus a { display: flex; align-items: center; gap: clamp(0.9rem, 3vw, 1.6rem); padding: clamp(1rem, 3vw, 1.4rem) clamp(1rem, 3vw, 1.8rem); border: 2px solid var(--orange); }
.c-promises .is-plus .no { position: static; flex: none; margin: 0; width: clamp(3.4rem, 8vw, 4.4rem); height: clamp(3.4rem, 8vw, 4.4rem); border: 0; font-size: clamp(1.2rem, 3vw, 1.5rem); }
.c-promises .is-plus .plus-body { display: block; min-width: 0; }
.c-promises .is-plus small { display: block; font-family: var(--font-round); font-size: 0.82rem; font-weight: 700; color: var(--orange-strong); }
.c-promises .is-plus .t { padding: 0; font-size: clamp(1rem, 2.4vw, 1.2rem); }
.c-promises .is-plus .t b { color: var(--orange-strong); }
.c-promises .is-plus .plus-lead { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.6; }

/* ---------- SNS で広める ---------- */
.c-sharebox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.c-sharetext h2 { font-family: var(--font-round); font-weight: 900; font-size: clamp(1.6rem, 3.6vw, 2.2rem); color: #fff; letter-spacing: 0.04em; }
.c-sharetext .sec-eyebrow { margin: 0; }
.c-sharetext p { margin-top: 0.9rem; font-size: 0.95rem; line-height: 1.9; }
.c-sharetext .c-share-lead { font-size: clamp(1.1rem, 2.4vw, 1.3rem); font-weight: 700; line-height: 1.7; }
.c-share-lead b { background: linear-gradient(transparent 62%, rgba(255, 255, 255, 0.35) 62%); }
.c-sharetext small { display: block; margin-top: 1rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.9); line-height: 1.6; }

/* 白い線画の上で、タップ → 封筒が点線の弧で飛ぶ → お母さんのスマホに通知とハート。見えたら .is-on（js/campaign.js）で 8 秒ごとにくり返す */
.c-spread { margin: 0; }
.c-spread svg { display: block; width: 100%; height: auto; max-width: 600px; margin-inline: auto; overflow: visible; }
.c-spread .sp-trail { fill: none; stroke: #fff; stroke-width: 13; stroke-linecap: round; stroke-dasharray: 0 34; opacity: 0; }
.c-spread .sp-trail-mask { fill: none; stroke: #fff; stroke-width: 40; stroke-dasharray: 1010 1010; stroke-dashoffset: 1010; }
.c-spread .sp-ripple { fill: none; stroke: #fff; stroke-width: 7; opacity: 0; }
.c-spread .sp-flap { fill: none; stroke: var(--orange-fill); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.c-spread .sp-wave { fill: none; stroke: #fff; stroke-width: 7; opacity: 0; }
.c-spread .sp-badge circle { fill: var(--red); stroke: #fff; stroke-width: 6; }
.c-spread .sp-badge text { fill: #fff; font-size: 36px; font-weight: 700; text-anchor: middle; }
.c-spread .sp-heart { fill: #fff; opacity: 0; }
.c-spread .sp-msg { opacity: 0; transform: translate(380px, 352px) scale(0.3); }
.c-spread .sp-badge { opacity: 0; }
.c-spread .sp-ripple, .c-spread .sp-wave, .c-spread .sp-badge, .c-spread .sp-heart { transform-box: fill-box; transform-origin: center; }
.c-spread.is-on .sp-ripple { animation: sp-ripple 8s ease-out infinite; }
.c-spread.is-on .sp-trail { animation: sp-trail 8s linear infinite; }
.c-spread.is-on .sp-trail-mask { animation: sp-reveal 8s linear infinite; }
.c-spread.is-on .sp-msg { animation: sp-fly 8s linear infinite; }
.c-spread.is-on .sp-badge { animation: sp-badge 8s ease-out infinite; }
.c-spread.is-on .sp-wave { animation: sp-wave 8s ease-out infinite; }
.c-spread.is-on .sp-wave2 { animation-delay: 0.3s; }
.c-spread.is-on .sp-heart { animation: sp-heart 8s ease-out infinite; animation-delay: calc(var(--i) * 0.25s); }

@keyframes sp-ripple { 0%, 10% { opacity: 0; transform: scale(0.5); } 12% { opacity: 1; transform: scale(1); } 20%, 100% { opacity: 0; transform: scale(2.6); } }
@keyframes sp-trail { 0%, 16% { opacity: 0; } 17%, 72% { opacity: 0.9; } 85%, 100% { opacity: 0; } }
@keyframes sp-reveal { 0%, 17% { stroke-dashoffset: 1010; } 47%, 100% { stroke-dashoffset: 0; } }
/* 点は軌跡（M380 352 C560 60 1080 20 1268 212）の上を、0.167 きざみでたどる */
@keyframes sp-fly {
  0%, 14% { opacity: 0; transform: translate(380px, 352px) scale(0.3); }
  17% { opacity: 1; transform: translate(380px, 352px) scale(1.15) rotate(-14deg); }
  22% { transform: translate(495px, 227px) scale(1) rotate(-12deg); }
  27% { transform: translate(648px, 143px) scale(1.05) rotate(-6deg); }
  32% { transform: translate(821px, 100px) scale(1.1) rotate(0deg); }
  37% { transform: translate(994px, 98px) scale(1.05) rotate(6deg); }
  42% { transform: translate(1149px, 135px) scale(1) rotate(12deg); }
  47% { opacity: 1; transform: translate(1268px, 212px) scale(0.9) rotate(16deg); }
  51%, 100% { opacity: 0; transform: translate(1290px, 250px) scale(0.3) rotate(16deg); }
}
@keyframes sp-badge { 0%, 50% { opacity: 0; transform: scale(0); } 54% { opacity: 1; transform: scale(1.3); } 57%, 88% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(1); } }
@keyframes sp-wave { 0%, 49% { opacity: 0; transform: scale(0.7); } 51% { opacity: 0.85; } 64%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes sp-heart { 0%, 56% { opacity: 0; transform: translateY(4px) scale(0.6); } 61% { opacity: 1; transform: translateY(-2px) scale(1.3); } 80% { opacity: 0; transform: translateY(-5px) scale(1); } 100% { opacity: 0; } }
/* 動きを減らす設定の人には、届いたあとの止まった絵だけを出す */
@media (prefers-reduced-motion: reduce) {
  .c-spread * { animation: none !important; }
  .c-spread .sp-trail, .c-spread .sp-badge { opacity: 1; }
  .c-spread .sp-trail-mask { stroke-dashoffset: 0; }
}

.c-share { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1.4rem; }
.c-share a, .c-share button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 52px;
  border: 1px solid #fff;
  background: #fff;
  color: var(--orange-strong);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.5em 1em;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.c-share svg { width: 1em; height: 1em; }
.c-share .share-x { background: #000; border-color: #000; color: #fff; }
.c-share .share-line { background: #06c755; border-color: #06c755; color: #fff; }
.c-share .share-fb { background: #1877f2; border-color: #1877f2; color: #fff; }
.c-share .share-copy { background: transparent; color: #fff; }
.c-share a:hover, .c-share button:hover { transform: translateY(-2px); }
.c-share a:active, .c-share button:active { transform: scale(0.96); }
/* 押したときに飛ぶハート（js/campaign.js が作って消す） */
.c-share .sp-burst, .c-si-btns .sp-burst { position: absolute; left: 50%; top: 50%; pointer-events: none; color: #fff; font-size: 1rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); animation: sp-burst 0.9s ease-out forwards; }
@keyframes sp-burst { from { opacity: 1; transform: translate(-50%, -50%) scale(0.6); } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2); } }
@media (prefers-reduced-motion: reduce) {
  .c-share a, .c-share button { transition: none; }
  .c-share .sp-burst, .c-si-btns .sp-burst { display: none; }
}

/* ---------- 投票のご案内 ---------- */
.c-vote-guide { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.c-vote-guide > div { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--orange); padding: 1.5rem; }
/* 投票日は赤、期日前投票はオレンジ。見出しは色の札、日付の数字だけを大きく色付きに */
.c-vote-guide > div { --vc: var(--orange-deep); border-top-color: var(--vc); }
.c-vote-guide > .is-day { --vc: var(--red); }
.c-vote-guide h3 { display: inline-block; padding: 0.3em 0.9em; border-radius: 3px; background: var(--vc, var(--orange-deep)); color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; }
.c-vote-guide .big { font-family: var(--font-serif); font-size: clamp(1.15rem, 2.4vw, 1.4rem); font-weight: 700; color: var(--ink); line-height: 1.2; margin-block: 0.7rem 0.8rem; }
.c-vote-guide .big b { margin-inline: 0.05em; font-size: 2.3em; color: var(--vc, var(--orange-deep)); letter-spacing: 0.01em; }
.c-vote-guide .big small { font-size: 0.9em; }
.c-vote-guide p { font-size: 0.95rem; }
.c-vote-note { margin-top: 1.4rem; font-size: 0.9rem; }
.todo { outline: 1px dashed #c9772f; }

/* ---------- スマホ下のボタン ---------- */
.c-dock { display: none; }

/* ---------- 幅が狭いとき ---------- */
@media (max-width: 1100px) {
  .c-hero-inner { grid-template-columns: minmax(240px, 42%) 1fr; }
  .c-today { grid-column: 1 / -1; margin-top: 0; margin-bottom: 3rem; max-width: 720px; justify-self: center; width: 100%; }
  .c-photo img { max-height: 70svh; }
  .c-promises { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .c-sharebox { grid-template-columns: minmax(0, 1fr); }
  .c-spread svg { max-width: 520px; }
}
@media (max-width: 640px) {
  .c-hero-inner { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  /* 写真を左、名前を右に重ねて、顔と名前が最初の画面に必ず入るようにする */
  .c-photo { grid-row: 1; grid-column: 1; width: 54%; justify-self: start; margin-left: -4%; }
  .c-photo img { max-height: 400px; }
  .c-id { grid-row: 1; grid-column: 1; justify-self: end; align-self: end; width: 50%; padding-block: 0 1.2rem; text-align: right; position: relative; z-index: 1; }
  .c-badge { font-size: 0.72rem; letter-spacing: 0.1em; padding: 0.2em 0.6em; }
  .c-name { font-size: clamp(2rem, 10vw, 2.5rem); margin-top: 0.5rem; letter-spacing: 0.04em; }
  .c-kanji { font-size: 0.85rem; letter-spacing: 0; line-height: 1.6; }
  .c-party { font-size: 0.85rem; }
  .c-catch { font-size: 0.95rem; letter-spacing: 0.02em; border-left: 0; border-right: 4px solid var(--orange); padding: 0 0.6em 0 0; }
  .c-catch .sp { display: inline; }
  .c-vote, .c-countdown { display: none !important; }
  /* スマホでは投票日を、写真の下に大きく出す（文字は HTML の .c-vote-sp） */
  .c-vote-sp {
    grid-row: 2;
    display: block;
    margin: 0 calc(var(--gutter) * -1) 1rem;
    padding: 0.7em 1em 0.8em;
    background: var(--orange-fill);
    color: #fff;
    text-align: center;
    line-height: 1.5;
  }
  .c-vote-sp p:first-child { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 0 0.6em; font-weight: 700; }
  .c-vote-sp p:first-child > span:first-child { font-size: 0.9rem; }
  .c-vote-sp p:first-child > b { font-size: 1.7rem; letter-spacing: 0.02em; }
  .c-vote-sp-left { font-size: 0.95rem; }
  .c-vote-sp-left b { font-size: 1.3rem; margin-inline: 0.1em; }
  .c-vote-sp p + p { font-size: 0.9rem; }
  .c-today { grid-row: 3; margin: 0 0 2.5rem; padding: 1.1rem 1rem; }
  .c-today-body { grid-template-columns: 1fr 84px; }
  .c-promises { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .c-promises .t { font-size: 0.82rem; padding: 1.3rem 0.6rem 0.7rem; }
  .c-promises .no { width: 2.2rem; height: 2.2rem; font-size: 1.05rem; margin-top: calc(75% - 1.1rem); left: 0.5rem; }
  .c-snaps { grid-template-columns: 1fr 1fr; gap: 1rem 0.8rem; }
  .c-snaps p { font-size: 0.8rem; }
  .c-vote-guide { grid-template-columns: 1fr; }
  .c-events { grid-template-columns: 1fr; }
  .c-xfeed .x-posts { max-height: 680px; overflow-y: auto; overscroll-behavior: contain; }

  .c-dock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--orange-fill);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
  }
  .c-dock a, .c-dock button {
    display: grid;
    place-items: center;
    min-height: 54px;
    color: #fff;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    background: none;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
  }
  .c-dock a:first-child { background: var(--ink); } /* 紺はここだけのアクセント */
  body.campaign { padding-bottom: 58px; }
  /* ヘッダーはパソコンと同じ中身（名前・「福岡市長選挙 候補者」・SNS 6 つ）。名前の下に肩書きを小さく置いて幅を詰める（10/31） */
  .campaign .logo { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.3; }
  .campaign .logo-name { font-size: 1.05rem; letter-spacing: 0.12em; }
  .campaign .logo-sub { display: block; font-size: 0.62rem; letter-spacing: 0.12em; }
  .campaign .header-sns { gap: 0.15rem; margin-left: auto; padding-left: 0; border-left: 0; }
  .campaign .header-sns a { padding: 4px; }
  .campaign .header-sns svg { width: 16px; height: 16px; }
  .proto-note { font-size: 0.6rem; white-space: nowrap; overflow: hidden; }
}

/* ---------- くっきり（10/30）: 地は白。予定と八つの約束の欄だけ薄い灰（--paper）にして区切る ---------- */
.c-hero-bg { background: #fff; }
.campaign #vote { background: #fff; border-top: 1px solid #e2e2e2; }
.promises-band { background: var(--paper); }
.c-days button[aria-selected="true"] { background: var(--orange-deep); border-color: var(--orange-deep); }
.c-timeline .is-now { background: #fff; box-shadow: inset 4px 0 0 var(--orange); }
.c-events li { border-color: rgba(0, 0, 0, 0.2); }
.c-events li.is-vague { background: #fff; border-color: rgba(0, 0, 0, 0.3); }
.c-letter { background-image: repeating-linear-gradient(transparent 0 calc(1.9em - 1px), #e4e4e4 calc(1.9em - 1px) 1.9em); box-shadow: 0 0 0 1px #dcdcdc; }
/* スマホで言葉の途中で折り返さないよう、まとまりごとに改行する */
.nw { display: inline-block; }
/* 名前とキャッチはポスターと同じ書体（ゴシックMB101 B）を図形にした画像で出す（10/31） */
.c-name { white-space: normal; }
.c-name img { display: block; width: 100%; max-width: 440px; height: auto; }
.c-catch { padding: 0; border: 0; }
.c-catch img { display: block; width: 88%; max-width: 380px; height: auto; }
@media (max-width: 640px) {
  /* 写真と名前の列を左右に分け、文字が写真に重ならないようにする（10/31） */
  .c-photo { width: 46%; margin-left: -5%; }
  .c-id { width: 57%; }
  .c-name img, .c-catch img { margin-left: auto; }
  .c-name img { max-width: none; }
  .c-catch { padding: 0; border: 0; }
}
/* 投票日・期日前投票（パソコン）: 札の幅をそろえて 2 行の頭を合わせ、字間と括弧のすき間を詰める（10/31） */
.c-vote { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem 1rem; align-items: center; margin-top: 1.6rem; font-feature-settings: "palt" 1; }
.c-vote div { display: contents; }
.c-vote dt { box-sizing: border-box; min-width: 6.4em; padding: 0.35em 0.8em; border: 2px solid var(--orange-fill); border-radius: 4px; text-align: center; font-size: 0.85rem; letter-spacing: 0.08em; line-height: 1.4; color: var(--orange-strong); background: #fff; }
.c-vote-main dt { background: var(--orange-fill); color: #fff; }
.c-vote dd { display: flex; align-items: baseline; flex-wrap: wrap; letter-spacing: 0; line-height: 1.2; color: var(--ink); }
.c-vote-main dd { font-size: 1.15rem; }
.c-vote-main b { font-size: 2.6em; margin-inline: 0.04em 0.08em; letter-spacing: -0.01em; }
.c-vote-early dd { font-size: 1rem; }
.c-vote-early b { font-size: 1.45em; margin-inline: 0.03em 0.06em; color: var(--ink); }
.c-vote small { font-size: 0.78em; margin-left: 0.05em; }
.c-vote-to { margin-inline: 0.25em; }
.c-countdown { letter-spacing: 0.04em; font-feature-settings: "palt" 1; }
/* スマホの投票日の帯も、括弧まわりのすき間を詰める */
.c-vote-sp { font-feature-settings: "palt" 1; letter-spacing: 0.02em; }
/* 全角の括弧に入っている左右の空きを削る（書体に詰めの情報がないため手で） */
.wd { display: inline-block; margin-inline: -0.4em -0.35em; }
.c-vote .wd { margin-inline: -0.3em -0.3em; }
.c-vote dd { white-space: nowrap; }
.c-vote dt { min-width: 6em; padding-inline: 0.6em; }
.c-vote-early dd { font-size: 0.95rem; }
.c-countdown b { margin-inline: 0.15em; }
/* 今日のよしとみ景子の「本日の応援」: 丸い写真の下に肩書きと名前 */
.c-cheer { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.c-cheer h3 { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; color: var(--orange-strong); }
.c-cheer ul { list-style: none; margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; }
.c-cheer li { display: flex; flex-direction: column; align-items: center; width: 6.2rem; text-align: center; line-height: 1.4; font-feature-settings: "palt" 1; }
.c-cheer-face { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--gold-soft); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--orange); }
.c-cheer-face.is-initial { display: grid; place-items: center; font-size: 1.6rem; font-weight: 700; color: #fff; background: var(--orange-fill); }
.c-cheer small { margin-top: 0.55rem; font-size: 0.75rem; color: var(--muted); letter-spacing: 0.02em; }
.c-cheer b { font-size: 0.95rem; color: var(--ink); letter-spacing: 0.04em; }
/* 今日のよしとみ景子: 地図をやめ、次の演説をアニメーションで目立たせる（10/31） */
.c-today-body { grid-template-columns: 1fr; }
.c-next { position: relative; animation: next-glow 2.6s ease-out infinite; }
@keyframes next-glow { 0% { box-shadow: 0 0 0 0 rgba(255, 123, 0, 0.55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(255, 123, 0, 0); } }
.c-next-label { display: inline-flex; align-items: center; gap: 0.45em; }
.c-next-label::before, .c-next.is-live .c-next-label::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: #fff; animation: next-dot 1.3s ease-in-out infinite; }
.c-next.is-live .c-next-label::before { background: #ff3b30; }
@keyframes next-dot { 0%, 100% { transform: scale(0.7); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 1; } }
.c-timeline li.is-next { position: relative; background: linear-gradient(90deg, rgba(255, 123, 0, 0.16), rgba(255, 123, 0, 0) 70%); box-shadow: inset 4px 0 0 var(--orange); }
.c-timeline li.is-next time { color: var(--orange-strong); }
.c-timeline li.is-next::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: next-sweep 3s ease-in-out infinite; pointer-events: none; }
@keyframes next-sweep { 0% { background-position: -60% 0; } 60%, 100% { background-position: 160% 0; } }
@media (prefers-reduced-motion: reduce) {
  .c-next, .c-next-label::before, .c-timeline li.is-next::after { animation: none; }
}
/* 時刻の一覧: 左の橙の線（次・いまの演説）が時刻に重ならないよう、どの行も左を空けて頭をそろえる（10/31） */
.c-timeline li { padding-left: 0.75rem; }
/* ごあいさつの署名は、ペンで書いたような手書き風の書体（10/31 ハル指定） */
.c-letter .c-letter-sign { font-family: "Zen Kurenaido", var(--font-body); font-size: clamp(1.9rem, 3.4vw, 2.3rem); letter-spacing: 0.06em; }
/* 八つの約束の見出し: 写真を左、見出しをそのすぐ右に置いて、左上の大きな空きをなくす（10/31） */
.c-promises-head { grid-template-columns: auto 1fr; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); margin-bottom: 1.5rem; }
.c-promises-photo { width: clamp(150px, 20vw, 250px); }
.c-promises-head h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.promises-band { padding-top: clamp(2rem, 5vw, 3.5rem); }
@media (max-width: 640px) {
  .c-promises-head { grid-template-columns: 42% 1fr; gap: 0.8rem; }
  .c-promises-photo { width: 100%; justify-self: stretch; }
}
/* 予定のカードの応援: 丸い写真を大きめに、横に「応援」と名前（10/31） */
.c-events .ev-face { width: 40px; height: 40px; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--orange); object-position: top; }
.c-events .ev-face + .ev-face { margin-left: -6px; }
.c-events .ev-face.is-initial { display: grid; place-items: center; color: #fff; background: var(--orange-fill); font-weight: 700; }
.c-events .ev-faces-txt { display: flex; flex-direction: column; line-height: 1.35; font-weight: 700; color: var(--ink); font-feature-settings: "palt" 1; }
.c-events .ev-faces-txt small { font-size: 0.72rem; font-weight: 700; color: var(--orange-strong); letter-spacing: 0.08em; }
.c-events .ev-more { margin-left: auto; }
/* 投票のご案内: 前回の投票率と、投票の呼びかけ（10/31） */
.c-turnout { margin-bottom: 1.5rem; padding: clamp(1.2rem, 3vw, 1.8rem); background: var(--orange-fill); color: #fff; text-align: center; font-feature-settings: "palt" 1; }
.c-turnout-lead { font-weight: 700; font-size: 1rem; }
.c-turnout-num { font-weight: 900; font-size: 1.6rem; line-height: 1.1; }
.c-turnout-num b { font-size: clamp(3.2rem, 9vw, 4.6rem); letter-spacing: 0.02em; margin-right: 0.05em; font-variant-numeric: tabular-nums; }
.c-turnout-bar { max-width: 420px; height: 12px; margin: 0.8rem auto 0.6rem; background: rgba(255, 255, 255, 0.35); border-radius: 6px; overflow: hidden; }
.c-turnout-bar span { display: block; height: 100%; background: #fff; border-radius: 6px; }
.c-turnout-text { font-size: 0.95rem; }
.c-turnout-call { display: inline-block; margin-top: 0.7rem; padding: 0.25em 1em; background: #fff; color: var(--orange-strong); font-weight: 900; font-size: clamp(1.15rem, 3vw, 1.4rem); letter-spacing: 0.04em; border-radius: 4px; }
.c-turnout-src { margin-top: 0.6rem; font-size: 0.72rem; opacity: 0.9; }
/* 投票率の欄のアニメーション（js/campaign.js が .is-anim を付け、画面に入ったら .is-on）。上から順に出し、ゲージは 0% から伸ばす。数字のカウントアップは js */
.c-turnout.is-anim > * { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.c-turnout.is-anim .c-turnout-bar span { transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s; }
.c-turnout.is-on > * { opacity: 1; transform: none; }
.c-turnout.is-on .c-turnout-bar span { transform: scaleX(1); }
.c-turnout.is-on > :nth-child(2), .c-turnout.is-on > :nth-child(3) { transition-delay: 0.25s; }
.c-turnout.is-on > :nth-child(4) { transition-delay: 2.1s; }
.c-turnout.is-on > :nth-child(5) { transition: opacity 0.4s ease 2.6s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.6s; }
.c-turnout.is-anim > :nth-child(5) { transform: scale(0.85); }
.c-turnout.is-on > :nth-child(5) { transform: none; }
.c-turnout.is-on > :nth-child(6) { transition-delay: 3s; }
/* 移動期日前投票所 */
.c-idou { margin-top: 1.5rem; padding: 1.5rem; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--orange); }
.c-idou h3 { font-size: 1.1rem; color: var(--ink); }
.c-idou-lead { margin-top: 0.3rem; font-size: 0.92rem; line-height: 1.8; }
.c-idou .c-idou-wards { margin-top: 0.9rem; }
.c-idou-list { margin-top: 1rem; }
.c-idou-empty { padding: 1rem; text-align: center; font-weight: 700; color: var(--ink-soft); background: var(--paper); }
.c-idou-list ol { list-style: none; display: grid; gap: 0.6rem; }
.c-idou-list li { display: grid; grid-template-columns: 9.5em 1fr; gap: 0.4rem 1rem; padding: 0.7rem 0.9rem; border-left: 5px solid var(--wc, var(--orange)); background: #fafafa; line-height: 1.5; font-feature-settings: "palt" 1; }
.c-idou-day { font-weight: 700; color: var(--ink); }
.c-idou-day small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.c-idou-place { grid-column: 2; display: grid; grid-template-columns: 1fr auto; gap: 0 0.8rem; align-items: center; }
.c-idou-place + .c-idou-place { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--line); }
.c-idou-place b { grid-column: 1; color: var(--ink); }
.c-idou-place span { grid-column: 1; font-size: 0.82rem; color: var(--ink-soft); }
.c-idou-map { grid-column: 2; grid-row: 1 / span 3; padding: 0.35em 0.9em; border: 2px solid var(--orange-fill); border-radius: 4px; color: var(--orange-strong); font-weight: 700; font-size: 0.85rem; text-decoration: none; white-space: nowrap; }
.c-idou-note { margin-top: 0.8rem; font-size: 0.82rem; color: var(--ink-soft); }
@media (max-width: 640px) {
  .c-idou { padding: 1.1rem; }
  .c-idou-list li { grid-template-columns: 1fr; }
  .c-idou-place { grid-column: 1; }
}
/* シェア欄: 封筒をやめて紙飛行機に（10/31）。弧の向きに合わせて機首を回し、ふわっと揺れながら飛ぶ */
.c-spread .sp-flap { stroke-width: 4; }
@keyframes sp-fly {
  0%, 14% { opacity: 0; transform: translate(380px, 352px) scale(0.3) rotate(-50deg); }
  17% { opacity: 1; transform: translate(380px, 352px) scale(1.1) rotate(-50deg); }
  22% { transform: translate(495px, 227px) scale(1) rotate(-38deg); }
  27% { transform: translate(648px, 143px) scale(1.05) rotate(-20deg); }
  32% { transform: translate(821px, 96px) scale(1.1) rotate(-4deg); }
  37% { transform: translate(994px, 102px) scale(1.05) rotate(10deg); }
  42% { transform: translate(1149px, 135px) scale(1) rotate(24deg); }
  47% { opacity: 1; transform: translate(1268px, 212px) scale(0.9) rotate(36deg); }
  51%, 100% { opacity: 0; transform: translate(1290px, 250px) scale(0.3) rotate(40deg); }
}
/* 予定カードの応援: 顔の並びが縮んで名前に重ならないようにする（10/31） */
.c-events .ev-faces { flex: none; }
.c-events .ev-faces-txt { flex: 1 1 auto; min-width: 0; }
/* 移動期日前投票所の「市長選初導入！」ラベル（福岡市選管 10/20 発表「福岡市では初めて…設置します」） */
.c-idou h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; }
.c-new { display: inline-block; padding: 0.15em 0.7em; background: var(--red); color: #fff; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.06em; border-radius: 4px; transform: rotate(-3deg); }
/* 投票日の下の「投票のご案内」へのリンク（10/31） */
.c-vote-jump { margin-top: 0.9rem; }
.c-vote-jump a { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.9rem; font-weight: 700; color: var(--orange-strong); text-decoration: underline; text-underline-offset: 0.3em; }
.c-vote-jump a::after { content: "↓"; text-decoration: none; }
.c-vote-sp .c-vote-jump { margin-top: 0.3rem; }
.c-vote-sp .c-vote-jump a { color: #fff; font-size: 0.85rem; }
.c-vote-jump a { display: inline-block; white-space: nowrap; }
.c-vote-jump a::after { margin-left: 0.4em; display: inline-block; }
@media (max-width: 640px) { .c-vote-jump-pc { display: none; } }
/* 予定カード: 中身は上から詰める（ボタンの中身が上下の真ん中に寄るのを止める）、応援は丸い顔の下に名前を並べる（10/31 C 案） */
.c-events .ev-open { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
.c-events .ev-foot { flex-direction: column; align-items: stretch; gap: 0.4rem; }
.c-events .ev-guests { display: block; }
.c-events .ev-guests > small { display: block; font-size: 0.72rem; font-weight: 700; color: var(--orange-strong); letter-spacing: 0.08em; }
.c-events .ev-guest-list { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin-top: 0.35rem; }
.c-events .ev-guest { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 4.6em; }
.c-events .ev-guest .ev-face { width: 48px; height: 48px; margin: 0; }
.c-events .ev-guest .ev-face + .ev-face { margin-left: 0; }
.c-events .ev-guest-name { font-size: 0.8rem; font-weight: 700; color: var(--ink); white-space: nowrap; line-height: 1.3; }
.c-events .ev-foot .ev-more { align-self: flex-end; }
/* 予定カード: 地図のボタンを場所のすぐ下（点線の上）へ。点線から下（応援・くわしく）はカードの下にそろえる（10/31） */
.c-events .ev-open-head { flex: none; padding-bottom: 0.7rem; }
.c-events li > .c-map-btn { margin: 0 1.2rem; }
.c-events .ev-open-foot { flex: 1; justify-content: flex-start; padding-top: 0; padding-bottom: 1rem; }
.c-events .ev-open-foot .ev-foot { margin-top: 0.9rem; }

/* 本日開催（赤）・明日開催（青、ふわっと光って目立たせる）の札。予定の詳細と注目イベントのカードに付く */
.ev-soon { display: inline-block; margin-left: 0.5em; padding: 0.1em 0.7em; border-radius: 3px; color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.6; vertical-align: 0.05em; }
.c-ev-tags .ev-soon { margin-left: 0; }
.ev-soon.is-today { background: var(--red); }
.ev-soon.is-tomorrow { background: #1565c0; animation: ev-soon-blink 1.6s ease-in-out infinite; }
@keyframes ev-soon-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgb(21 101 192 / 0.55); }
  50% { box-shadow: 0 0 0 6px rgb(21 101 192 / 0); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-soon.is-tomorrow { animation: none; }
}

/* ---------- 画像で広める（SNS で広めるの下。投票のお願いの画像 2 枚と投稿の文） ---------- */
.c-spreadimg { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px dashed rgba(255, 255, 255, 0.5); text-align: center; }
.c-spreadimg h3 { font-family: var(--font-round); font-weight: 900; font-size: clamp(1.3rem, 3vw, 1.7rem); color: #fff; letter-spacing: 0.04em; }
.c-spreadimg > p { margin-top: 0.6rem; font-size: 0.95rem; line-height: 1.8; }
.c-si-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.8rem, 3vw, 1.6rem); max-width: 640px; margin: 1.4rem auto 0; }
.c-si-card { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.c-si-card img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); background: #f1dfc6; }
.c-si-save { display: block; padding: 0.7em 0.5em; border-radius: 8px; background: #fff; color: var(--orange-strong); font-size: 0.9rem; font-weight: 700; text-decoration: none; }
.c-si-save::before { content: "↓ "; }
.c-spreadimg .c-si-hint { margin-top: 0.6rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.9); }
.c-si-text { max-width: 640px; margin: 1.6rem auto 0; text-align: left; }
.c-si-label { font-weight: 700; font-size: 0.95rem; }
.c-si-body { display: block; width: 100%; margin-top: 0.4rem; padding: 0.9em 1em; border: 0; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 0.95rem; line-height: 1.8; resize: none; }
.c-si-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.9rem; }
.c-si-btns a, .c-si-btns button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 52px; padding: 0.5em 1em; border: 1px solid #fff; border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 0.92rem; font-weight: 700; line-height: 1.4; text-decoration: none; cursor: pointer; }
.c-si-btns svg { width: 1em; height: 1em; flex: none; }
.c-si-btns .si-x { background: #000; border-color: #000; }
.c-si-btns .si-ig { background: linear-gradient(45deg, #f58529, #dd2a7b 55%, #8134af); border-color: transparent; }
.c-si-btns .si-copy { grid-column: 1 / -1; }
.c-si-text small { display: block; margin-top: 0.8rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.9); line-height: 1.6; }
@media (max-width: 560px) { .c-si-btns { grid-template-columns: 1fr; } }

/* 注目イベントのカードの下のシェア（X・Instagram・LINE）。出す時期は js の canSpread */
.c-events .ev-share { display: flex; align-items: center; gap: 0.4rem; margin: 0 1.2rem 1rem; padding-top: 0.8rem; border-top: 1px dashed var(--line); }
.c-events .ev-share small { margin-right: 0.2rem; font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.c-events .ev-share a, .c-events .ev-share button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; min-height: 40px; padding: 0.3em 0.4em; border: 0; border-radius: 6px; color: #fff; font: inherit; font-size: 0.82rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
.c-events .ev-share svg { width: 0.95em; height: 0.95em; flex: none; }
.c-events .ev-sh-x { background: #000; }
.c-events .ev-sh-ig { background: linear-gradient(45deg, #f58529, #dd2a7b 55%, #8134af); }
.c-events .ev-sh-line { background: #06c755; }
.c-si-list.is-one { grid-template-columns: minmax(0, 1fr); max-width: 340px; }

/* ---------- データで見る福岡市（data.html。10/31 ハル指定でトップから別ページに戻した） ---------- */
.c-data { background: #fff; }
.c-data-lead { margin-bottom: 1.4rem; }
.c-data .chart-grid { margin-bottom: 0; }
.c-data .chart { border-radius: 8px; scroll-margin-top: 84px; }
.c-data .chart img { border-radius: 4px; }
.c-data .chart-cap { font-family: var(--font-body); font-weight: 700; color: #111; }
.c-data .chart-rel a b, .c-data .chart-rel a::after { color: var(--orange-strong); }
.c-data .chart-rel a:hover { color: var(--orange-strong); }


/* ---------- 寄付のページ（donate.html）を市長選版の色に ---------- */
.campaign .donate .donate-catch, .campaign .donate h2, .campaign-sub .page-head h1 { font-family: var(--font-body); font-weight: 900; color: #111; }
.campaign .donate h2 { border-left-color: var(--orange-fill); }
.campaign .donate .dots li::before { background: var(--orange-fill); }
.campaign .donate .nums li::before { color: var(--orange-strong); }
.campaign .donate-form .form-btn { background: var(--orange-fill); border-color: var(--orange-fill); }

/* ---------- 政策集（八つの約束）へのバナー（11/1 ハル指定） ---------- */
.c-policy-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "sub go" "main go";
  align-items: center;
  gap: 0.1rem 1rem;
  margin-top: 1.4rem;
  padding: 1.1rem 1.3rem 1.1rem 1.5rem;
  max-width: 460px;
  background: var(--orange-fill);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(236, 100, 0, 0.28);
  transition: background 0.2s, transform 0.2s var(--ease);
}
.c-policy-banner:hover { background: var(--orange-deep); transform: translateY(-2px); }
.c-policy-banner-sub { grid-area: sub; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; opacity: 0.95; }
.c-policy-banner-main { grid-area: main; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 900; letter-spacing: 0.08em; line-height: 1.25; }
.c-policy-banner-plus { margin-left: 0.25em; font-size: 0.7em; }
.c-policy-banner-go {
  grid-area: go;
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.55em 0.9em;
  background: #fff; color: var(--orange-strong);
  font-size: 0.85rem; font-weight: 700; white-space: nowrap; border-radius: 999px;
}
.c-policy-banner-go::after { content: "→"; }
.c-vote-sp .c-policy-banner { display: none; }
@media (max-width: 640px) {
  .c-policy-banner-pc { display: none; }
  /* スマホ: 橙の投票日の帯の中なので、白地に橙の文字にして目立たせる */
  .c-vote-sp .c-policy-banner {
    display: grid; margin: 0.9rem auto 0.2rem; max-width: none; text-align: left;
    background: #fff; color: var(--ink); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  .c-vote-sp .c-policy-banner-sub { color: var(--orange-strong); }
  .c-vote-sp .c-policy-banner-main { color: var(--orange-strong); font-size: 1.6rem; }
  .c-vote-sp .c-policy-banner-go { background: var(--orange-fill); color: #fff; }
}

/* パソコンでメニューを1行に並べるとき（1680px 以上）。9 つ入るように、すき間と字の間隔を詰める（11/1） */
@media (min-width: 1680px) {
  .campaign .nav { margin-left: 1.8rem; }
  .campaign .nav ul { gap: 1.3rem; }
  .campaign .nav a { letter-spacing: 0.08em; }
  .campaign .header-sns { margin-left: 1.4rem; padding-left: 1.4rem; gap: 0.5rem; }
}

/* ---------- 投票日まで「あと◯日」の数字を赤・斜体・大きく（11/1 ハル指定） ---------- */
.c-countdown b {
  display: inline-block;
  font-size: 2.6rem;
  line-height: 1;
  font-style: italic;
  font-weight: 900;
  color: var(--red);
  margin-inline: 0.12em 0.18em;
  vertical-align: -0.12em;
}
/* スマホの橙の帯の中は、赤だと読みにくいので白のまま、斜体で大きく */
.c-vote-sp-left b { display: inline-block; font-size: 1.9rem; line-height: 1; font-style: italic; font-weight: 900; margin-inline: 0.08em 0.14em; }

/* ---------- 「あと◯日」の数字に動き（11/1 ハル指定）: 出たときに大きく弾んで止まり、そのあとは 2.4 秒ごとに「どくん」と脈打つ ---------- */
.c-countdown b, .c-vote-sp-left b {
  transform-origin: 50% 70%;
  animation: cd-pop 0.9s cubic-bezier(.2, 1.6, .4, 1) 0.3s both, cd-beat 2.4s ease-in-out 1.6s infinite;
}
@keyframes cd-pop {
  0% { opacity: 0; transform: scale(2.4) rotate(-12deg); }
  60% { opacity: 1; transform: scale(0.9) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes cd-beat {
  0%, 30%, 100% { transform: scale(1); }
  10% { transform: scale(1.22); }
  20% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .c-countdown b, .c-vote-sp-left b { animation: none; }
}

/* 右の「今日のよしとみ景子」が画面より縦に長いと、写真が欄の下にそろって下にずれる・下に余白が残る（11/1）。
   ・1101〜1499px: 3 列だと写真の列が細く写真が小さくなるので、1100px 以下と同じ 2 列（写真＋名前、その下に今日の予定）にする
   ・1500px 以上: 写真を上にそろえ、スクロールしてもついてくる（sticky）。写真の下端は白にぼかしてなじませる
     名前の欄も、画面の高さに収まるとき（高さ 900px 以上）はついてくる
   sticky を効かせるため .c-hero の overflow は clip */
@media (min-width: 1101px) and (max-width: 1499px) {
  .c-hero-inner { grid-template-columns: minmax(240px, 42%) 1fr; }
  .c-today { grid-column: 1 / -1; margin-top: 0; margin-bottom: 3rem; max-width: 720px; justify-self: center; width: 100%; }
  .c-photo img { max-height: 70svh; }
}
@media (min-width: 1500px) {
  .c-hero { overflow: clip; }
  .c-hero-inner { align-items: start; }
  .c-photo { position: sticky; top: calc(var(--header-h) + 1.3rem); align-self: start; }
  .c-photo img { -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent); mask-image: linear-gradient(to bottom, #000 85%, transparent); }
  .c-id { align-self: start; padding-top: clamp(1rem, 4vh, 3rem); }
}
@media (min-width: 1500px) and (min-height: 900px) {
  .c-id { position: sticky; top: var(--header-h); }
}
/* 政策集バナー: 「八つの約束」を 1 行のまま出す。3 列のとき（1500px 以上）は中央の欄が狭いので「政策を読む」を下の段に */
.c-policy-banner-main { white-space: nowrap; }
@media (min-width: 1500px) {
  .c-policy-banner { grid-template-columns: 1fr; grid-template-areas: "sub" "main" "go"; }
  .c-policy-banner-go { justify-self: start; margin-top: 0.6rem; }
}

/* 今日のよしとみ景子の一覧: 場所と時刻を出す予定の右端に「くわしく ›」（11/2） */
.c-timeline li:has(.tl-more) { grid-template-columns: 4.4em 1fr auto; }
.c-timeline .tl-more { align-self: center; padding: 0.2em 0 0.2em 0.6em; border: 0; background: none; font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--orange-strong); white-space: nowrap; cursor: pointer; }
.c-timeline .tl-more::after { content: "›"; margin-left: 0.3em; }
.c-timeline .tl-more:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* 告知の画像がある予定は、今日のよしとみ景子の一覧にも画像を出す（11/2 ハル指定）。時刻の右の列に、場所の下に置く */
.c-timeline li.has-cover { padding-bottom: 0.8em; }
.c-timeline .tl-cover { grid-column: 2 / -1; display: block; width: 100%; max-width: 420px; margin: 0.1em 0 0; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: none; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.c-timeline .tl-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.2s; }
.c-timeline .tl-cover:hover img { transform: scale(1.03); }

/* 「あと◯日」の数字の上と斜体の右端が、iPhone の Safari で切れる（動きを付けた要素は箱の外を描かないため。11/3 ハル指摘）。
   箱に余白を持たせて字が収まるようにし、同じ分だけ外の余白を引いて、並びは変えない */
.c-countdown b, .c-vote-sp-left b { padding: 0.18em 0.14em 0.08em 0.06em; margin-top: -0.18em; margin-bottom: -0.08em; }
.c-countdown b { margin-right: 0.04em; margin-left: 0.06em; }
.c-vote-sp-left b { margin-right: 0; margin-left: 0.02em; }

/* 事前申し込みのフォームへのボタン（予定に form がある演説会。11/3 ハル指定: 11/8 の決起集会） */
.c-events .ev-form, .c-ev-form a { display: flex; align-items: center; justify-content: center; gap: 0.4em; padding: 0.7em 1em; border-radius: 6px; background: var(--orange-strong, #e85d04); color: #fff; font-weight: 700; text-decoration: none; }
.c-events .ev-form { margin: 0.5rem 0.9rem 0.2rem; font-size: 0.95rem; }
.c-events .ev-form::after, .c-ev-form a::after { content: "→"; }
.c-events .ev-form:hover, .c-ev-form a:hover { filter: brightness(0.92); }
.c-ev-form { margin-top: 0.7rem; }

/* ---------- フローティングバナー（炎の帯。11/3 ハル指定で案 A。予定に banner があるもの） ---------- */
.c-fbanner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 59; height: 98px; pointer-events: none; }
.c-fb-fire { position: absolute; left: 0; top: 0; width: 100%; height: 44px; }
.c-fb-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 44px 0 max(14px, env(safe-area-inset-left)); background: linear-gradient(90deg, #2b0a00, #6b1300 55%, #2b0a00); color: #fff; pointer-events: auto; animation: fb-ember 2.4s ease-in-out infinite; }
.c-fb-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.c-fb-when { display: grid; line-height: 1.15; white-space: nowrap; }
.c-fb-when b { font-size: 1.05rem; font-weight: 900; color: #ffd54f; letter-spacing: 0.02em; }
.c-fb-when span { font-size: 0.68rem; opacity: 0.9; overflow: hidden; text-overflow: ellipsis; }
.c-fb-ttl { font-size: 1.25rem; font-weight: 900; letter-spacing: 0.08em; text-shadow: 0 0 10px rgba(255, 120, 0, 0.9), 0 0 2px #ff3d00; white-space: nowrap; }
.c-fb-cta { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 0.55em 0.8em; border-radius: 6px; background: #ffd54f; color: #2a1200; font-weight: 900; font-size: 0.85rem; text-decoration: none; white-space: nowrap; }
.c-fb-cta::after { content: "→"; }
.c-fb-close { position: absolute; right: max(8px, env(safe-area-inset-right)); bottom: 18px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font: 700 15px/26px var(--font-body); cursor: pointer; pointer-events: auto; }
.c-fb-cta:focus-visible, .c-fb-main:focus-visible, .c-fb-close:focus-visible { outline: 3px solid #ffd54f; outline-offset: 2px; }
@keyframes fb-ember { 0%, 100% { box-shadow: 0 -6px 22px rgba(255, 90, 0, 0.55); } 50% { box-shadow: 0 -10px 30px rgba(255, 140, 0, 0.85); } }
/* パソコン: 帯を中身の幅にして、画面の下から少し浮かせる（11/4 ハル指定。端から端までだと左右が空いて見えた） */
@media (min-width: 641px) {
  .c-fbanner { left: 50%; right: auto; width: min(560px, calc(100% - 32px)); transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); }
  .c-fb-bar { border-radius: 10px; padding: 0 52px 0 20px; justify-content: center; gap: 20px; }
  .c-fb-main { flex: 0 1 auto; gap: 16px; }
  .c-fb-ttl { font-size: 1.4rem; }
  .c-fb-close { right: 14px; }
  body.has-fbanner { padding-bottom: 92px; }
}
@media (max-width: 640px) {
  .c-fbanner { bottom: calc(54px + env(safe-area-inset-bottom)); }
  body.campaign.has-fbanner { padding-bottom: 118px; }
}
@media (max-width: 360px) { .c-fb-ttl { font-size: 1.05rem; letter-spacing: 0.04em; } .c-fb-bar { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .c-fb-bar { animation: none; } .c-fb-fire { display: none; } }