@import url("fonts.css");

/* ==================================================================
   中澤まさゆき 公式サイト — 260916 クライアント指定Canva再現
   基準: PC2（975×8000px.png / スマホ（390×8000px.png
   ================================================================== */

:root {
  --green: #006532;
  --green-pale: #f4faf8;
  --gray: #59595b;
  --line: #06c755;
  --white: #fff;

  --serif: "Noto Serif JP", serif;
  /* ゴシック系の実体は Source Han Sans JP v2.005（詳細は fonts.css / FONT_PROVENANCE.md） */
  --sans: "Source Han Sans JP", sans-serif;
  /* 入力欄は、本文に無い文字も欠落しないよう拡張セット→端末フォントへ段階的に戻す */
  --sans-input: "Source Han Sans JP", "Source Han Sans JP Ext",
                "Hiragino Sans", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;

  --container: 938px;
  --bar: 968px;
  --header-h: 81px;

  /* セクションどうしの縦の間隔。基準は「活動の様子の下 → 政策の見出し」の116px。
     画面ごとの基準値と、セクションの内側余白をまとめて持つ。
     --section-gap は「セクションの下余白＋次のセクションの上余白」になる。 */
  --section-gap-pc: 116px;       /* PC（既定） */
  --section-gap-sp: 70px;        /* 縦向きスマホ */
  --section-gap-ls: 54px;        /* 横向きスマホ（899px以下） */
  --section-gap-pc-short: 84px;  /* 900px以上で高さの低い画面 */

  --section-gap: var(--section-gap-pc);
  --section-pt: 56px;            /* セクション上側の内側余白 */
  --section-pb: 60px;            /* セクション下側の内側余白 */

  /* セクションの【中】の余白。見出しブロック → 本文・コンテンツ。
     上の --section-gap（セクション同士の境界）とは別に管理する。 */
  --section-heading-gap: 30px;

  /* 応援セクション（#support）の上側だけ、--section-gap に上乗せする余白。
     クライアント依頼「応援の所に余白を追加」への対応。他セクションの境界と
     見出し下（--section-heading-gap）は変えない。値は画面ごとに下の各ブロックで切り替える。 */
  --support-gap-extra: 20px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--gray);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

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

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.bar-inner { width: 100%; max-width: var(--bar); margin: 0 auto; padding: 0 20px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================ ヘッダー ============================ */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--green); color: var(--white);
}
.site-header .bar-inner {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

.brand { line-height: 1.2; }
/* PC-01／SP-01：ヘッダーの肩書き・氏名を大きく。
   参考デザインの実測（975px換算）で肩書き 字高11.3→15.7、氏名 25.1→29.2 だったため、
   12px→16px／27px→31px とした（採用値は制作側判断）。 */
.brand__role { display: block; font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: .06em; }
.brand__name { display: block; font-family: var(--serif); font-weight: 500; font-size: 31px; letter-spacing: .02em; margin-top: 3px; }
.brand a { text-decoration: none; }

.header-right { display: flex; align-items: center; gap: 22px; }

.main-nav { display: flex; align-items: center; gap: 24px; }
.main-nav a {
  font-family: var(--sans); font-weight: 400; font-size: 15px;
  letter-spacing: .04em; text-decoration: none;
}
.main-nav a:hover { text-decoration: underline; }

.header-sns { display: flex; align-items: center; gap: 14px; }
.header-sns a { display: inline-flex; }
.header-sns img { width: 19px; height: 19px; }

.btn-line {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--line); color: var(--white);
  font-family: var(--sans); font-weight: 700; font-size: 13.5px; letter-spacing: .02em;
  padding: 9px 19px; border-radius: 999px; text-decoration: none; white-space: nowrap;
}

.menu-toggle {
  display: none; background: none; border: 0; padding: 4px; cursor: pointer;
}
.menu-toggle img { width: 24px; height: 24px; }

.mobile-nav { display: none; }

/* ============================ ヒーロー ============================ */

.hero {
  position: relative; overflow: hidden; background: var(--white);
  /* 次のセクション（大切にしていること）との間隔は、#values の上余白で
     --section-gap を確保する（外側マージンだと本文背景の白い帯が出るため）。 */
}

.hero__bg {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  overflow: hidden; z-index: 0;
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.80) 34%, rgba(255,255,255,.40) 100%);
}

/* Canva 右側の緑の図形。
   原寸Canvaの濃い緑の境界 (975,250) (690,400) (430,504) を円に当てはめると
   中心 (W-1489.6, H-2738.5) / 半径 2897px。その円の外側が濃い緑。 */
.hero__shape {
  position: absolute; z-index: 1; pointer-events: none;
  border-radius: 50%; box-sizing: border-box;
}
/* PC-01：右下の緑の図形にだけ透け感を持たせる。
   figureそのものの色をrgbaにしているため、人物・文字・ロゴ・リンクには影響しない。 */
.hero__shape--dark {
  width: 5794px; height: 5794px;
  left: calc(100% - 4387px); bottom: -159px;
  box-shadow: 0 0 0 4000px rgba(0, 101, 50, .84);
}
.hero__shape--mid {
  width: 5774px; height: 5774px;
  left: calc(100% - 4377px); bottom: -149px;
  border: 46px solid rgba(0, 101, 50, .20);
}
.hero__shape--pale {
  width: 5494px; height: 5494px;
  left: calc(100% - 4237px); bottom: -9px;
  border: 70px solid rgba(0, 101, 50, .09);
}

.hero__inner { position: relative; z-index: 3; padding: 28px 20px 22px; min-height: 504px; }
.hero__copy { position: relative; z-index: 3; max-width: 560px; }

/* PC-02：囲みと横線を接続する。gapを0にして、線の右側だけ余白を持たせる。 */
.hero__eyebrow { display: flex; align-items: center; gap: 0; }
.hero__badge {
  display: inline-block; border: 1.5px solid var(--green); color: var(--green);
  background: rgba(255,255,255,.72);
  font-family: var(--serif); font-weight: 700; font-size: 20px; letter-spacing: .06em;
  padding: 8px 28px; border-radius: 999px; white-space: nowrap;
}
.hero__rule { width: 74px; height: 1px; background: var(--green); flex: none; margin-right: 16px; }
/* 参考デザインではTOSHIMAの字高が囲み高さの0.19→0.29倍。13px→19pxとした。 */
.hero__latin {
  font-family: var(--sans); font-weight: 400; font-size: 19px;
  letter-spacing: .34em; color: var(--gray);
}

/* 原寸Canvaのこの行は見出しと同じ緑（実測 rgb(0,101,50) 付近）で、
   字高19px。現状より小さくし、色を緑へ揃える。 */
.hero__kicker {
  margin-top: 26px; font-family: var(--serif); font-weight: 500;
  font-size: 19px; letter-spacing: .04em; color: var(--green); line-height: 1.5;
}

/* PC-01：参考デザインの実測（975px換算）に寄せた文字バランス。
   参考：魅力 字高103.2／あふれる 43.4／豊島 78.5／へ。38.9、
        補助コピー下端→1行目上端 26.2、魅力→あふれる 20.9、1行目下端→2行目上端 20.2。
   現状：88.1／52.5／88.1／42.0、16.2、29.9、12.9。
   文字列同士の距離（margin・padding）と、文字列内部の字間（letter-spacing）を別々に調整している。 */
/* PC-01（0925）：image1の黄色A（補助コピー↔「魅力」）を、桃色B（「魅力」↔「豊島」）と
   同じ程度の見た目の間隔にする。0924の「追加余白を0」はこの箇所で上書き。
   実測（PC975・文字のインク同士）：A=14px／B=19px。Bは基準なので変えず、
   Aを5px広げて19pxに揃える。line-height:0 で重ねる方法は使わない。 */
.hero__headline { margin-top: 5px; color: var(--green); letter-spacing: .01em; }
.hero__headline .hl-line { display: block; white-space: nowrap; line-height: 1; }
.hero__headline .hl-line--1 { padding-left: 12px; }
.hero__headline .hl-line--2 { padding-left: 30px; margin-top: 15px; }
.hero__headline .hl-lead {
  font-family: var(--serif); font-weight: 900; font-size: 108px; letter-spacing: .01em;
}
/* PC-01（0924）：「魅力」の文字列内部に足していた字間を0にする。
   書体そのものの字形の余白は詰めない（負の字間にしない）。 */
.hero__headline .hl-line--1 .hl-lead { letter-spacing: 0; }
/* 「魅力」と「豊島」に差を付ける（参考の比 0.76）。 */
.hero__headline .hl-line--2 .hl-lead { font-size: 82px; }
.hero__headline .hl-tail {
  font-family: var(--serif); font-weight: 500; font-size: 51px; letter-spacing: .03em;
  padding-left: 14px;
}
/* PC-01（0924）：「あふれる」の文字列内部の字間と、「魅力」との要素間の距離をともに0にする。
   0920で入れていた padding-left:5px と letter-spacing:-.015em を両方0へ。
   HTMLの2つの span の間には空白文字を置いていないので、これで要素間の空きは0になる。
   ---- 0924追加調整 ----
   要素の箱同士は0px接しているが、「力」の右と「あ」の左にある書体固有の余白のぶん、
   インク同士は14px離れていた。参考画像(image5)の同じ箇所は、字高149pxに対して14px
   （字高比 0.094）。こちらは字高102pxなので同じ比率なら9.6pxが目安になる。
   差の4.4px分だけ「あふれる」の開始位置を左へ寄せる。文字は重ねない（インクの間隔は約9.6px残る）。 */
.hero__headline .hl-line--1 .hl-tail {
  padding-left: 0; letter-spacing: 0; margin-left: -4.4px;
}
/* 「へ。」は参考では「あふれる」よりわずかに大きい。 */
.hero__headline .hl-line--2 .hl-tail { font-size: 57px; }

/* COMMON-01（0924）：キャッチコピーの文字だけにドロップシャドウ。
   Canvaの指定値：黒 #000000／透明度30%／オフセット20／ぼかし10／向き-45。
   オフセットとぼかしのUI値はpxではないため、参考画像(image5)から実測して比率で採用した。
   実測：影のずれ 右下45度・2px、ガウスσ1.5px（CSSのぼかし半径3px）、濃さ0.34、
        そのときの「魅」の字高149px。→ 字高比で ずれ0.0134・ぼかし0.0201。
   採用：各文字の font-size 基準で .0128em / .019em（字高は font-size の約0.94倍）。
   em指定なのでPCでもスマホでも同じ見えの比率になる。色と透明度はCanva指定値のまま。
   影は4つの文字列だけに掛かる（補助コピー・人物・ロゴ・ヘッダーには掛けない）。 */
.hero__headline .hl-lead,
.hero__headline .hl-tail {
  /* C-01（0925確定）：影の濃さを30%→50%。PC・スマホ共通。
     色・方向・距離・ぼかしのem指定は変更していない（濃さだけの変更）。
     文字本体や親要素の opacity は使わない。影を重ねて濃くもしていない。 */
  text-shadow: .0128em .0128em .019em rgba(0, 0, 0, .5);
}

.hero__sns-lead {
  display: flex; align-items: center; gap: 12px; margin-top: 30px;
  font-family: var(--serif); font-weight: 500; font-size: 16px; color: var(--gray);
}
.hero__sns-lead::before { content: ""; width: 34px; height: 1px; background: var(--gray); flex: none; }

.hero__sns { display: flex; gap: 26px; margin-top: 14px; }
.btn-sns-chip {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--white); border-radius: 999px; padding: 11px 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,.10); text-decoration: none;
  font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--gray);
}
.btn-sns-chip img { width: 22px; height: 22px; }
.btn-sns-chip .arrow { width: 16px; height: 16px; margin-left: 12px; }

/* 原寸Canvaの人物を正規化相互相関で照合した結果、
   PCは表示高さ640px・画像左上(419,113) ＝ ヒーロー上端から32px、
   右端は画面中央+406px。下端はヒーローの overflow:hidden で切れる（Canvaと同じ）。 */
.hero__person {
  position: absolute; right: calc(50% - 406px); top: 32px; z-index: 2;
}
.hero__person img { height: 640px; width: auto; max-width: none; }

.hero__party {
  position: absolute; right: 18px; bottom: 20px; z-index: 4;
  background: var(--white); padding: 9px 16px; border-radius: 3px;
  box-shadow: 0 1px 6px rgba(0,0,0,.14);
}
.hero__party img { width: 208px; height: auto; }

/* ======================= セクション共通 ======================= */

.section { padding: var(--section-pt) 0 var(--section-pb); }
/* 0927g：応援セクションだけ、上側の余白に --support-gap-extra を上乗せする。
   （前のセクション → 「応援いただける方を募集しています」の間が広がる。下側・見出し下は共通のまま） */
#support { padding-top: calc(var(--section-pt) + var(--support-gap-extra)); }
/* B-03（0925）：「大切にしていること」の下（ツーショットとの間）の空きを、
   上（ヒーローとの間）の空きへ合わせる。実測 上56px／下60px → 下も56pxへ。
   上側は基準なので変えていない。カード内部・写真・アイコン・矢印は変更なし。
   ＊見た目の差の主因は上端フェードで写真が84px遅れて現れていたことなので、
     B-02（上端フェード削除）と合わせて効く。 */
/* 0927f：ヒーロー・ツーショットとの境界は、#values の内側余白で --section-gap を取る。
   外側マージンで取ると、その部分だけ本文背景（白）が帯状に出るため、
   薄緑（#values の背景 --green-pale）の中で同じ間隔を確保する。見出し・カードの位置は変えない。 */
#values { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }
.section--pale { background: var(--green-pale); }
.section--fade-to-white { background: linear-gradient(to bottom, var(--green-pale) 0%, #fff 100%); }
/* B-05（0925）：白い「活動の様子」から政策の薄緑へ、上端でなじませる。
   参考画像(image5)では白から #f4faf8 になり切るまでが画像上150px、
   同画像の「政策」見出しの字高から求めた倍率1.561で割ると約96px。
   採用値として100pxを使う（0925資料に数値の指定はない）。
   下側の白への抜け（.section--fade-to-white）はそのまま活かす。
   カード内部・重点項目の枠・見出し・本文にはグラデーションを掛けていない。 */
#policy { background: linear-gradient(to bottom, #ffffff 0px, var(--green-pale) 100px, #ffffff 100%); }
.section--fade-from-white { background: linear-gradient(to bottom, #fff 0%, var(--green-pale) 100%); }

.section-head { text-align: center; margin-bottom: var(--section-heading-gap); }
.section-title {
  display: inline-flex; align-items: center; gap: 22px;
  font-family: var(--serif); font-weight: 700; font-size: 28px;
  letter-spacing: .12em; color: var(--green);
}
.section-title::before, .section-title::after {
  content: ""; width: 28px; height: 1px; background: var(--green);
}
.section-sub {
  margin-top: 12px; font-family: var(--serif); font-weight: 500;
  font-size: 19px; letter-spacing: .04em; color: var(--gray);
}

.sp-only { display: none; }
.sp-br { display: none; }

/* ===================== 大切にしていること ===================== */

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 33px; }
.value-card {
  background: var(--white); border-radius: 14px; padding: 20px 15px 22px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
/* 支給アイコンは <picture> で包んでいる。flexの中で <picture> が縮むと
   中の画像まで横方向に潰れるため、縮まない指定にしておく。 */
.value-card__icon picture,
.policy-item__head picture,
.support-item__head picture,
.sns-badge picture { display: flex; flex: none; }

.value-card__icon { height: 62px; display: flex; align-items: center; justify-content: center; }
.value-card__icon img { height: 62px; width: auto; flex: none; }
.value-card__name {
  margin-top: 12px; font-family: var(--serif); font-weight: 700;
  font-size: 19px; letter-spacing: 0; color: var(--green); white-space: nowrap;
}
.value-card__lead {
  margin-top: 10px; font-family: var(--serif); font-weight: 500;
  font-size: 15px; line-height: 1.65; color: var(--gray);
}
.value-card__photo { margin: 16px 0 18px; width: 100%; border-radius: 6px; overflow: hidden; }
.value-card__photo img { width: 100%; height: 105px; object-fit: cover; }
.value-card__link {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-pale); border-radius: 999px; padding: 11px 34px;
  font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .04em;
  color: var(--green); text-decoration: none;
}

/* ========================= ツーショット ========================= */

/* B-02・B-04（0925）：上端はフェードなしで写真を出し、下端だけ白へ溶かす。
   下のフェードで透けるのは .twoshot 自身の背景色なので、薄緑→白へ変更する
   （下に続く「活動の様子」も白にするため、境目が出ない）。 */
.twoshot {
  position: relative; overflow: hidden;
  background: #ffffff; min-height: 519px;
  /* 上下にパディングを持たないため、セクション間の基準値になるよう外側へ差分を付ける。
     上側（大切にしていること との間）は #values の下余白で --section-gap を確保している。
     下側は写真の白へのフェード → 白い「活動の様子」へ続くため、外側マージンのまま。 */
  margin-bottom: calc(var(--section-gap) - var(--section-pt));
}

/* B-02（0925）：上端のフェードを削除し、0%から不透明にする。
   「大切にしていること」の薄緑から写真へ、はっきり切り替わる上端になる。
   線や枠は足していない。人物の頭は切れない（頭頂部は下揃えのまま）。
   B-04（0925）：下端は白（#ffffff）へ溶かす。段階的に薄くして、
   背景だけ消えて人物の下端が水平に残ることがないようにしている。
   元画像は無加工。人物全体を半透明にしたりぼかしたりはしていない。 */
.twoshot__fade {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%, rgba(0,0,0,1) 68%,
    rgba(0,0,0,.88) 77%, rgba(0,0,0,.55) 87%,
    rgba(0,0,0,.22) 94%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%, rgba(0,0,0,1) 68%,
    rgba(0,0,0,.88) 77%, rgba(0,0,0,.55) 87%,
    rgba(0,0,0,.22) 94%, rgba(0,0,0,0) 100%);
}
.twoshot__bg { position: absolute; inset: 0; }
/* PC-03《仮デザイン》：背景の池袋西口公園（GLOBAL RING）が見える位置へ寄せる。
   画像は差し替えず、表示位置と、上に重ねる白の濃さだけを変えている。
   ＊カード2の「グローバルリング周辺.png」とは別ファイル（ikebukuro-bg.jpg）。 */
/* B-01（0925）：新背景は 1715x917。枠の縦を満たす拡大で左右がわずかに切れるだけなので、
   中央basisにしてリング・樹木・高層ビルの並びを参考画像どおりに見せる。
   画像そのものは無加工（縦横に引き伸ばしていない）。 */
.twoshot__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
/* B-01（0925）：新背景「豊島区イメージ画像」は参考画像(image4)で白かぶせなしの
   鮮やかな状態なので、旧背景用の白かぶせ（.18）を外す。 */
.twoshot__bg::after {
  content: ""; position: absolute; inset: 0;
  background: transparent;
}

/* PC-03《仮デザイン》：トップと共通の、斜めの緑系の帯。
   ヒーローと同じ指定緑 #006532 の透過で、図形だけに掛かる（人物・文字には掛からない）。
   スマホでは使わない（下のメディアクエリーで非表示）。 */
/* B-01（0925）：0920の《仮デザイン》で入れた斜めの緑帯は、今回の参考画像(image4)の
   ツーショットには無く、新背景のリングと樹木を不自然に覆うため、ツーショット内だけ止める。
   ヒーローの図形には触れていない。新しい葉・帯・模様も追加していない。 */
.twoshot__band { display: none; }
.twoshot__band--unused {
  position: absolute; inset: -20% -10%; z-index: 1; pointer-events: none;
  background:
    linear-gradient(107deg, rgba(0,101,50,0) 18%, rgba(0,101,50,.30) 23%,
                            rgba(0,101,50,.30) 44%, rgba(0,101,50,0) 49%),
    linear-gradient(107deg, rgba(0,101,50,0) 50%, rgba(0,101,50,.16) 54%,
                            rgba(0,101,50,.16) 69%, rgba(0,101,50,0) 73%),
    linear-gradient(107deg, rgba(0,101,50,0) 73%, rgba(0,101,50,.42) 76%,
                            rgba(0,101,50,.42) 85%, rgba(0,101,50,0) 89%);
}
/* 0925追補：PCの人物を参考画像(image4)の収まりへ寄せる。
   実測（見えている頭頂部で比較・透明余白は除く）：
     参考 image4 … 写真の高さ234pxに対し、上端から髪まで20px＝8.5%
     変更前      … 枠519pxに対し、上端から髪まで73.7px＝14.2%
   人物の表示幅 612→652px（+6.5%）で 上端から髪まで44.6px＝8.6% になる。
   width だけの指定なので縦横比は保たれ、画像そのもの（twoshot-people_v2）は無加工。
   左端の基準は変えていないため、二人の中心は 54.1%→56.2%（参考は55.8%）。
   上端フェードなし・下端を白へなじませる処理は維持。スマホとヒーロー人物には適用しない。 */
.twoshot__people {
  position: relative; z-index: 3; display: block;
  width: 652px; max-width: 100%; margin: 0 auto 0 calc(50% - 266px);
}
.twoshot__people img { width: 100%; height: auto; }

/* PC-03（0924）《試作》：写真の上下を隣接する背景色へ段階的になじませる。
   ・上下に隣り合うのはどちらも .section--pale（#f4faf8）で、ツーショットの背景色と同じ。
     フェードを長くすると写真の縁が背景へ溶けて境目が消える。
   ・フェードを長くすると人物の頭に掛かるため、空の縦幅を確保する。
     人物は下揃え・表示高さ460px固定なので、枠の高さを519→560pxにすると
     人物の上端が59→100px、髪の先が74→115pxまで下がり、空が41px増える。
     画像も人物も縦に伸ばしていない（表示枠を広げて位置が下がるだけ）。
   ・上のフェードは15%（84px）で完全不透明になり、髪の先まで31pxの余裕がある。
   ・下は従来と同じ位置（約370px）から始め、急な水平の切断面を作らない。
   スマホは従来のままにするため、この指定はPC幅だけに適用する。 */
/* B-02（0925）：0924で上端フェードのために増やした空（枠 519→560px）は、
   上端フェードを消したことで不要になったので元の519pxへ戻す。
   参考画像(image4)のツーショットは 幅439 × 高さ233 で縦横比1.88。
   975px幅なら 975/1.88 = 519px となり、519pxが参考と一致する。
   新しい固定高さで大きな空白を作らない、という指示にも沿う。 */
@media (min-width: 900px) {
  /* ヘッダーの帯（緑）は100%幅のまま。中身は左右へ寄せ、
     画面端に付かないよう安全余白を画面幅に応じて可変にする。
     ヒーローが使う .bar-inner は変えないよう、ヘッダー内だけに限定する。 */
  .site-header .bar-inner {
    max-width: none;
    padding-inline: clamp(24px, 4vw, 72px);
  }

  .twoshot { min-height: 519px; }
}

/* ========================== 活動の様子 ========================== */

.activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.activity-grid picture { display: block; }
.activity-grid img { width: 100%; height: 228px; object-fit: cover; }

.activity-buttons { display: flex; justify-content: center; gap: 28px; margin-top: 34px; }
.btn-sns-wide {
  display: flex; align-items: center; gap: 14px; flex: 1 1 0; max-width: 402px;
  border-radius: 999px; padding: 15px 26px; text-decoration: none;
  color: var(--white); font-family: var(--sans); font-weight: 700; font-size: 17px;
}
.btn-sns-wide img { width: 30px; height: 30px; }
.btn-sns-wide .arrow { width: 18px; height: 18px; margin-left: auto; }
.btn-sns-wide--ig { background: linear-gradient(95deg, #f9584a 0%, #e2377f 48%, #9b36b7 100%); }
.btn-sns-wide--fb { background: #0866ff; }

/* 孤立行対策：短い意味単位（「取り組みます」「初当選」など）を折り返しで分断しないための共通クラス。
   原稿の文字は変更せず、改行してよい位置だけを制限する。 */
.nowrap { white-space: nowrap; }

/* ============================ 政策 ============================ */

.policy-list { display: flex; flex-direction: column; gap: 28px; }
.policy-item {
  background: var(--white); border-radius: 14px; padding: 22px 26px 26px;
  /* PC-04：右の重点項目枠を316px→282pxへ狭め、左の本文幅を512px→546pxに広げる。
     本文の削除・要約はしていない。政策1〜3で共通のルール。 */
  display: grid; grid-template-columns: 1fr 282px; column-gap: 18px; row-gap: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.policy-item__head { grid-column: 1; display: flex; align-items: center; gap: 16px; }
.policy-item__head img { height: 58px; width: auto; flex: none; }
.policy-item__name {
  font-family: var(--serif); font-weight: 700; font-size: 21px;
  letter-spacing: .02em; color: var(--green);
}
.policy-item__body {
  grid-column: 1; font-family: var(--serif); font-weight: 500;
  font-size: 14px; line-height: 1.62; color: var(--gray); padding-left: 4px;
}
.policy-item__points {
  grid-column: 2; grid-row: 1 / span 2; align-self: start;
  background: var(--green-pale); border-radius: 10px; padding: 16px 18px 18px;
}
.points-label {
  display: block; text-align: center; font-family: var(--serif); font-weight: 700;
  font-size: 14px; letter-spacing: .08em; color: var(--green); margin-bottom: 10px;
}
.points-label::before, .points-label::after { content: "-"; margin: 0 7px; }
.policy-item__points ul { display: flex; flex-direction: column; gap: 7px; }
.policy-item__points li {
  position: relative; padding-left: 15px;
  font-family: var(--serif); font-weight: 500; font-size: 13.5px; line-height: 1.5; color: var(--gray);
}
.policy-item__points li::before { content: "・"; position: absolute; left: -3px; }

/* ========================== プロフィール ========================== */

.profile-lead { text-align: center; padding-top: 36px; }
.profile-lead__main {
  font-family: var(--serif); font-weight: 700; font-size: 45px;
  letter-spacing: .2em; color: var(--green); line-height: 1.35;
}
.profile-lead__sub {
  margin-top: 6px; font-family: var(--serif); font-weight: 500;
  font-size: 25px; letter-spacing: .06em; color: var(--gray);
}

.profile-label {
  display: inline-flex; align-items: center; gap: 16px; margin: 40px 0 14px;
  font-family: var(--serif); font-weight: 700; font-size: 22px;
  letter-spacing: .12em; color: var(--green);
}
.profile-label::before { content: ""; width: 26px; height: 1px; background: var(--green); }

/* 添付見本（当選_サンプル.jpg）の実測：
   コンテナ幅966pxに対しボックス幅278px＝28.8%。写真・基本情報・当選歴の3領域。
   当コンテナは898pxなので 898×0.288 ≒ 258px。
   中央カラムは「豊島区立道和中学校（現西池袋中学校）」が折り返さない322pxを確保する。 */
.profile-grid {
  /* PC-05：プロフィール写真の表示幅を280pxにして、募集欄のポスターと揃える。
     中央カラム322pxは維持し、列間と当選歴ボックスで吸収している。 */
  display: grid; grid-template-columns: 280px 1fr 248px;
  column-gap: 24px; align-items: start;
}

/* 当選歴：プロフィール右側の独立ボックス（常時表示。開閉はしない）
   見本の実測に合わせている：
   ・枠線＝細い中立グレー（緑みなし）／角丸は小さめ／影なし
   ・見出しは左寄せ。前後に短いダッシュ。本文と同じ字の大きさで緑・太字
   ・「都民ファーストの会所属」も箇条書きも、隣の出身校リストと同じ 15.5px・同じグレー
   ・項目間に余分な間隔を置かず、行の刻みをそろえる */
.award-box {
  border: 1px solid #d5d7d6; border-radius: 6px; background: var(--white);
  /* 孤立行対策：「豊島区議会議員二期目の当選」は1行に202px必要。左右余白を18→12pxに詰めて
     本文幅を194→206pxにし、「選」だけが次行へ落ちないようにする。
     上下余白・枠線・文字サイズ・行間・配置は変更していない。 */
  padding: 18px 12px 20px;
}
.award-box__title {
  display: flex; align-items: center; justify-content: flex-start; gap: 7px;
  padding-left: 8px;
  font-family: var(--serif); font-weight: 700; font-size: 15.5px;
  line-height: 1.3; letter-spacing: .08em; color: var(--green);
}
.award-box__title::before, .award-box__title::after {
  content: ""; width: 7px; height: 1px; background: var(--green); flex: none;
}
.award-box__party {
  margin-top: 15px; font-family: var(--serif); font-weight: 500;
  font-size: 15.5px; letter-spacing: .02em; line-height: 1.5; color: var(--gray);
}
.award-box__list { margin-top: 12px; display: flex; flex-direction: column; }
.award-box__list li {
  position: relative; padding-left: 16px;
  font-family: var(--serif); font-weight: 500; font-size: 15.5px;
  line-height: 1.5; color: var(--gray);
}
.award-box__list li::before { content: "・"; position: absolute; left: -2px; }
.profile-photo img { width: 100%; height: auto; }

.profile-name-kana {
  font-family: var(--serif); font-weight: 500; font-size: 15px;
  letter-spacing: .3em; color: var(--gray);
}
.profile-name-kanji {
  margin-top: 2px; font-family: var(--serif); font-weight: 700; font-size: 46px;
  letter-spacing: .06em; color: var(--green); line-height: 1.2;
}
.profile-role {
  margin-top: 10px; font-family: var(--serif); font-weight: 700;
  font-size: 19px; letter-spacing: .04em; color: var(--green);
}
.profile-birth {
  margin-top: 12px; font-family: var(--serif); font-weight: 500;
  font-size: 16px; letter-spacing: .02em; color: var(--gray);
}
.profile-origin { margin-top: 14px; display: flex; flex-direction: column; gap: 0; }
.profile-origin li {
  position: relative; padding-left: 16px; line-height: 1.6;
  font-family: var(--serif); font-weight: 500; font-size: 15.5px; color: var(--gray);
}
.profile-origin li::before { content: "・"; position: absolute; left: -2px; }

.profile-detail-toggle {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font-family: var(--serif); font-weight: 700; font-size: 16px;
  letter-spacing: .06em; color: var(--green);
}
.profile-detail-toggle .chev { transition: transform .2s ease; font-size: 15px; }
.profile-detail-toggle[aria-expanded="false"] .chev { transform: rotate(90deg); }

.profile-divider { border: 0; border-top: 1px solid #d8e3dd; margin: 30px 0 0; }

#profile-detail { overflow: hidden; }
#profile-detail[hidden] { display: none; }
.profile-detail-inner { padding-top: 22px; }

.detail-heading {
  font-family: var(--serif); font-weight: 700; font-size: 15px;
  letter-spacing: .06em; color: var(--green); margin-bottom: 6px;
}
.detail-block + .detail-block { margin-top: 24px; }
.detail-block p, .detail-block li {
  font-family: var(--serif); font-weight: 500; font-size: 15px; line-height: 1.6; color: var(--gray);
}
.detail-history { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.detail-history li { position: relative; padding-left: 16px; }
.detail-history li::before { content: "・"; position: absolute; left: -2px; }
.affiliation-list {
  margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 30px; row-gap: 4px;
}
.affiliation-list li { position: relative; padding-left: 16px; }
.affiliation-list li::before { content: "・"; position: absolute; left: -2px; }

/* ============================ 応援 ============================ */

/* PC-05：ポスターの表示幅もプロフィール写真と同じ280pxへ。 */
.support-grid { display: grid; grid-template-columns: 280px 1fr; column-gap: 52px; align-items: start; }
.support-poster img { width: 100%; height: auto; }

.support-item + .support-item { margin-top: 30px; }
.support-item__head { display: flex; align-items: center; gap: 14px; }
.support-item__head img { height: 46px; width: auto; flex: none; }
.support-item__head h3 {
  font-family: var(--serif); font-weight: 700; font-size: 20px;
  letter-spacing: .04em; color: var(--green);
}
.support-item p {
  margin-top: 12px; font-family: var(--serif); font-weight: 500;
  font-size: 15.5px; line-height: 1.8; color: var(--gray);
}

/* ========================== お問い合わせ ========================== */

.contact-box {
  border: 1.5px solid var(--green); border-radius: 18px; padding: 30px 36px 34px;
  background: var(--white);
}

.field + .field { margin-top: 18px; }
.field label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 700; font-size: 14px;
  letter-spacing: .04em; color: var(--green); margin-bottom: 7px;
}
.req {
  font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .04em;
  color: var(--white); background: #c0392b; border-radius: 3px; padding: 2px 7px; line-height: 1.5;
}
.field input, .field textarea {
  width: 100%; border: 1px solid var(--green); border-radius: 7px;
  padding: 11px 13px; font-family: var(--sans-input); font-weight: 400; font-size: 15px;
  color: var(--gray); background: var(--white);
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--line); outline-offset: 1px; }
.field .error {
  display: none; margin-top: 6px;
  font-family: var(--sans); font-weight: 400; font-size: 13px; color: #c0392b;
}
.field.is-invalid .error { display: block; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #c0392b; }

.consent-row { margin-top: 24px; text-align: center; }
.consent-label {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--green);
}
.consent-label input { width: 17px; height: 17px; accent-color: var(--green); }
.consent-row .error {
  display: none; margin-top: 7px;
  font-family: var(--sans); font-weight: 400; font-size: 13px; color: #c0392b;
}
.consent-row.is-invalid .error { display: block; }

.submit-row { text-align: center; margin-top: 20px; }
.btn-submit {
  min-width: 296px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--green-pale); color: var(--green);
  font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: .06em;
  padding: 15px 34px;
}
.btn-submit:hover { background: #e7f3ee; }
.btn-submit[disabled] { opacity: .55; cursor: progress; }

/* 0926：完了文を「送信完了しました。」で改行して2行にする。
   2行目は最狭320pxでも1行に収まる（実測 255px ／ 使える幅 288px）。 */
.form-message {
  margin-top: 18px; text-align: center; font-family: var(--sans); font-size: 15px;
  white-space: pre-line; line-height: 1.7;
}
.form-message[hidden] { display: none; }
.form-message.is-ok { color: var(--green); font-weight: 700; }
.form-message.is-ng { color: #c0392b; font-weight: 700; }

/* ============================ フッター ============================ */

.site-footer { background: var(--green); color: var(--white); }
.footer-top {
  display: grid; grid-template-columns: 250px 250px 1fr; column-gap: 20px;
  padding-top: 40px; padding-bottom: 30px;
}
/* PC-06：修正後のヘッダー（肩書き16px／氏名31px／間隔3px）に合わせる。 */
.footer-brand__role { font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: .06em; }
.footer-brand__name { font-family: var(--serif); font-weight: 500; font-size: 31px; letter-spacing: .02em; margin-top: 3px; }

.footer-contact {
  font-style: normal; font-family: var(--sans); font-weight: 400;
  font-size: 14.5px; line-height: 1.9;
}
.footer-contact a { text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }

.footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.footer-nav { display: flex; gap: 22px; }
.footer-nav a { font-family: var(--sans); font-weight: 400; font-size: 14.5px; text-decoration: none; white-space: nowrap; }
.footer-nav a:hover { text-decoration: underline; }
.footer-sns { display: flex; gap: 14px; }
.footer-sns a { display: inline-flex; }
.sns-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
}
.sns-badge img { width: 22px; height: 22px; }
.sns-badge--fb { background: #0866ff; }
.sns-badge--ig { background: linear-gradient(140deg, #f9ce34 0%, #ee2a7b 52%, #6228d7 100%); }
/* PC-07／SP-07：LINEもInstagram・Facebookと同じ丸形へ。
   支給の公式ブランドアイコン（緑の角丸四角＋白ロゴ）の外周だけを円形の表示枠で抜いている。
   ロゴの字形・比率は変更しておらず、白いマーク自体は欠けていない。 */
.sns-badge--brand { background: var(--line); overflow: hidden; }
/* 支給アイコンは白マークが画像の66%を占めるため、100%表示だと
   f・Instagram（22px）より大きく見える。88%にして見えるマークの大きさを揃える。
   地色は同じ #06C755 なので継ぎ目は出ない。 */
.sns-badge--brand picture { width: 88%; height: 88%; }
.sns-badge--brand img { width: 100%; height: 100%; object-fit: contain; }
.footer-party { display: inline-block; background: var(--white); padding: 7px 14px; border-radius: 3px; }
.footer-party img { width: 216px; height: auto; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 14px; padding-bottom: 16px;
  font-family: var(--sans); font-weight: 400; font-size: 13.5px;
}
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }

/* PC-04：コンテナが最大幅に届かない900〜974pxでは本文が508pxまで縮み、
   「す。」だけが次行へ落ちていた。重点項目枠を244pxにして本文546pxを保つ。
   975px以上の表示には影響しない。 */
@media (min-width: 900px) and (max-width: 974px) {
  .policy-item { grid-template-columns: 1fr 244px; }
}

/* 固定ヘッダー分のアンカーオフセット */
[id] { scroll-margin-top: calc(var(--header-h) + 14px); }

/* ==================================================================
   スマートフォン（スマホ390px版Canva）
   ================================================================== */


/* ============ 900px以上で高さの低い画面（横長・低い） ============ */
/* スマホを横にして900px以上になる端末（932×430など）や、背の低いPCウィンドウ。
   レイアウトはPC版のまま。縦に詰めて、ヒーローの文字と人物写真だけを
   同じ比率（約0.75倍）で小さくする。高さ501px以上のPCには当たらない。 */
@media (min-width: 900px) and (max-height: 500px) {
  /* セクションの余白と間隔を詰める（間延び防止） */
  :root {
    --section-gap: var(--section-gap-pc-short);
    --section-pt: 40px;
    --section-pb: 44px;
    --section-heading-gap: 22px;
    --support-gap-extra: 14px;
  }

  /* ヒーロー：高さ・人物・文字を同じ比率で縮める */
  .hero__inner { min-height: 380px; padding: 20px 20px 16px; }
  .hero__person img { height: 480px; }
  .hero__badge { font-size: 16px; padding: 6px 22px; }
  .hero__rule { width: 56px; margin-right: 12px; }
  .hero__latin { font-size: 15px; }
  .hero__kicker { margin-top: 18px; font-size: 16px; }
  .hero__headline .hl-lead { font-size: 81px; }
  .hero__headline .hl-tail { font-size: 38px; }
  .hero__headline .hl-line--2 { margin-top: 11px; }
  .hero__headline .hl-line--2 .hl-lead { font-size: 62px; }
  .hero__headline .hl-line--2 .hl-tail { font-size: 43px; }

  /* 画像が縦を占有しすぎないように */
  .activity-grid img { height: 170px; }
  .value-card__photo img { height: 84px; }
}

@media (max-width: 899px) {
  :root { --header-h: 55px; }

  body { font-size: 14px; }
  .container, .bar-inner { padding: 0 16px; }

  .sp-only { display: block; }
  .sp-br { display: inline; }
  .pc-only { display: none; }

  /* ---- ヘッダー ---- */
  .site-header .bar-inner { min-height: 55px; gap: 10px; }
  /* SP-01：参考デザインの実測で肩書き・氏名とも約1.14倍。 */
  .brand__role { font-size: 11.5px; }
  .brand__name { font-size: 21.5px; margin-top: 1px; }
  .header-right { gap: 11px; }
  .main-nav { display: none; }
  .header-sns { gap: 10px; }
  .header-sns img { width: 17px; height: 17px; }
  .btn-line { font-size: 9.5px; padding: 5px 10px; }
  .menu-toggle { display: inline-flex; }

  .mobile-nav { display: none; background: var(--green); padding: 4px 16px 16px; }
  .mobile-nav.is-open { display: flex; flex-direction: column; gap: 2px; }
  .mobile-nav a {
    font-family: var(--sans); font-size: 15px; color: var(--white);
    text-decoration: none; padding: 11px 2px; border-top: 1px solid rgba(255,255,255,.22);
  }

  /* ---- ヒーロー ---- */
  .hero__inner { padding: 20px 16px 16px; min-height: 486px; }
  .hero__copy { max-width: 100%; }
  .hero__bg { height: 40%; }

  /* スマホCanvaの緑の境界 (361,380) (294,420) (157,480) から
     中心 (W-527.5, H-864.9) / 半径 908px */
  .hero__shape--dark {
    width: 1816px; height: 1816px;
    left: calc(100% - 1436px); bottom: -43px;
  }
  .hero__shape--mid {
    width: 1800px; height: 1800px;
    left: calc(100% - 1428px); bottom: -35px;
    border-width: 22px;
  }
  .hero__shape--pale {
    width: 1726px; height: 1726px;
    left: calc(100% - 1391px); bottom: 2px;
    border-width: 34px;
  }

  /* SP-01：囲みと横線を接続し、TOSHIMAを大きくする。 */
  .hero__eyebrow { gap: 0; }
  .hero__badge { font-size: 14px; padding: 5px 16px; }
  .hero__rule { width: 30px; margin-right: 10px; }
  .hero__latin { font-size: 14.5px; letter-spacing: .26em; }

  /* SP-01：参考デザインでは補助コピーの字高 14→18.7（390px換算）。15px→19px。 */
  .hero__kicker { margin-top: 16px; font-size: 19px; line-height: 1.45; }
  .hero__headline { margin-top: 6px; }
  .hero__headline .hl-line { white-space: normal; }
  /* SP-01（0925）：3行を上下の赤線の間に収めるため、0924の行間をわずかに詰める。
     「あふれる」→「豊島へ。」：インク間隔 12px → 9px。 */
  .hero__headline .hl-line + .hl-line { margin-top: 5px; }
  /* SP-01：参考デザインの実測（390px換算）
     補助コピー 字高18.7／魅力 57.3／あふれる 29.3／豊島へ。39.5。
     現状は 14／49.0／29.7／49.9。魅力を大きく、豊島を小さくして差を付ける。 */
  /* SP-01（0925）：image2右の赤点線へ合わせる。
     参考画像の倍率1.649・y補正76.4で390px換算すると、
     上の赤線（生え際）= y139／下の赤線（首元）= y288／縦の赤線 = x27。
     「魅力」のインク上端を152→140へ、3行の左端を18→27へ、
     「豊島へ。」のインク下端を306→288へ収める。
     0924の「margin-top:18px（少し広げる）」はこの指定で上書き。 */
  .hero__headline { margin-top: 6px; padding-left: 9px; }
  .hero__headline .hl-lead { font-size: 60px; display: block; }
  .hero__headline .hl-tail { font-size: 34px; padding-left: 4px; }
  .hero__headline .hl-line--2 .hl-lead { font-size: 44px; }
  .hero__headline .hl-line--2 .hl-tail { font-size: 36px; }
  /* SP-01：キャッチコピー各行の開始位置を「子育て」の左端へ揃える。
     インクの左端で比較して、補助コピーとの差が数px以内に収まる値。 */
  .hero__headline .hl-line--1 { padding-left: 1px; }
  .hero__headline .hl-line--2 { padding-left: 0; }
  /* SP-01（0925）：同じく、「魅力」→「あふれる」のインク間隔 15px → 11px。
     文字サイズ・書体・左端そろえ（margin-left:-4px）は変更していない。 */
  .hero__headline .hl-line--1 .hl-tail {
    display: block; padding-left: 0; margin-left: -4px; margin-top: 9px;
  }
  .hero__headline .hl-line--2 .hl-lead { display: inline; }

  /* スマホCanvaにはヒーロー内の小型SNSボタンがないため非表示 */
  .hero__sns-lead, .hero__sns { display: none; }

  /* 原寸スマホCanvaの人物は表示高さ520px・画像左上(71,148)。
     ヒーロー上端から93px、右へ67pxはみ出し、下端はヒーローで切れる。 */
  .hero__person { right: -67px; top: 93px; }
  .hero__person img { height: 520px; }
  .hero__party { right: 10px; bottom: 10px; padding: 5px 9px; }
  .hero__party img { width: 118px; }

  /* ---- セクション共通 ---- */
  /* セクションの内側余白と、セクション間の基準値をスマホ用へ切り替える。
     .section / .hero / .twoshot の指定そのものは共通のまま。 */
  :root {
    --section-gap: var(--section-gap-sp);
    --section-pt: 34px;
    --section-pb: 36px;
    --section-heading-gap: 20px;
    --support-gap-extra: 14px;
  }
  /* B-03（0925）：スマホは 上34px／下36px → 下も34pxへ。PCの値は流用していない。 */
  .section-title { font-size: 21px; gap: 14px; }
  .section-title::before, .section-title::after { width: 18px; }
  .section-sub { font-size: 15px; margin-top: 8px; }
  /* SP-02：指定の3箇所だけ、2行同士の行間を 1.85→1.45 へ狭める。
     文面・句読点・行数は変更していない。セクション全体の余白は触っていない。 */
  #values .section-sub,
  #activities .section-sub,
  #contact .section-sub { line-height: 1.45; }
  /* SP-02（0924）：応援セクションの説明文2行の間隔だけを少し狭める。
     数値の指定はないため、すでに採用済みの他セクションと同じ 1.45 を採用（既定は1.85）。
     文面・行数・見出しとの間隔・セクション全体の余白は変えていない。 */
  /* SP-02（0925）：募集見出し2行の行間を、プロフィール導入見出し
     「生まれも育ちも、／豊島区」と同じ見え方へ。
     実測（SP390のインク間隔）：募集見出し19px／プロフィール導入11px。
     文字サイズが 21px と 27px で違うため、同じ line-height 値ではなく
     見た目の空きで合わせる。1.85→1.5 でインク間隔 19px→約11px。
     基準のプロフィール側・説明文・PCの見出しは変更しない。 */
  #support .section-title__text { line-height: 1.5; }

  /* ---- 大切にしていること（アイコン＋見出し＋矢印の行） ---- */
  .values-grid { grid-template-columns: 1fr; gap: 14px; }
  /* SP-03：矢印の右端を3本そろえる。見出しの長さで矢印が動かないよう、
     見出しは縮められるようにし（min-width:0）、矢印は margin-left:auto で右端へ固定する。 */
  .value-card {
    flex-direction: row; align-items: center; text-align: left;
    border-radius: 999px; padding: 12px 14px 12px 16px; gap: 12px;
  }
  .value-card__icon { height: 39px; flex: none; }
  .value-card__icon img { height: 39px; width: auto; flex: none; }
  /* 0925追補：320／360pxで「まちづくりと防犯・防災対策」が枠からはみ出していた。
     原因は .value-card__name の white-space:nowrap で折り返せなかったこと。
     スマホだけ折り返しを許可し、意味の区切り（まちづくりと／防犯・防災対策）で
     2行になるようにする。収まる幅では1行のままで、375px以上の表示は変わらない。
     文言・文字サイズは変更なし。省略記号・非表示・横方向の圧縮は使っていない。
     アイコンと矢印は残り、矢印は margin-left:auto で右端のまま。 */
  .value-card__name {
    margin-top: 0; font-size: 15px; flex: 1; min-width: 0;
    white-space: normal; line-height: 1.4;
  }
  .value-card__lead, .value-card__photo { display: none; }
  .value-card__link {
    margin-top: 0; margin-left: auto; background: none; padding: 0; flex: none;
    width: 26px; height: 26px; font-size: 0;
  }
  .value-card__link::after { content: "→"; font-size: 20px; color: var(--gray); }

  /* ---- ツーショット ---- */
  /* 帯の高さ224pxに対し人物画像は235pxあり、下ぞろえのため上端が11px切れていた。
     さらに上端6%のフェードが頭にかかっていた。帯を252pxにして画像全体を収め、
     頭頂部の上に余白を確保する。画像の大きさ（312px）は変えていない。スマホのみ。 */
  .twoshot { min-height: 252px; }
  /* PC-03の新しい図形・背景位置はPC専用。スマホへは展開しない。 */
  .twoshot__band { display: none; }
  .twoshot__bg img { object-position: center 56%; }
  .twoshot__bg::after { background: rgba(255, 255, 255, .34); }
  .twoshot__people { width: 312px; margin: 0 auto; }
  .twoshot__bg img { object-position: center 56%; }

  /* ---- 活動の様子 ---- */
  .activity-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .activity-grid img { height: 132px; }
  .activity-buttons { flex-direction: column; gap: 12px; margin-top: 22px; }
  .btn-sns-wide { max-width: 100%; font-size: 15px; padding: 12px 20px; }
  .btn-sns-wide img { width: 26px; height: 26px; }

  /* ---- 政策 ---- */
  /* SP-04：タイトルの末尾1文字だけが次行へ落ちないよう、
     カード左右の余白18→14px、アイコンと見出しの間隔16→12px、見出し18→16.5px。
     原稿は変更せず、政策1〜3で共通に調整している。 */
  .policy-item {
    grid-template-columns: 1fr; padding: 22px 12px 24px; row-gap: 18px;
  }
  .policy-item__head { justify-content: center; gap: 12px; }
  .policy-item__head img { height: 50px; width: auto; }
  .policy-item__name { font-size: 16.5px; }
  .policy-item__points { grid-column: 1; grid-row: auto; }
  /* SP-04：本文末尾の「す。」などが1〜3文字だけ次行へ落ちないよう、
     左の余白を外して字送りをわずかに詰める。原稿は変更していない。 */
  .policy-item__body { font-size: 13px; padding-left: 0; letter-spacing: -.02em; }

  /* ---- プロフィール ---- */
  .profile-lead { padding-top: 22px; }
  .profile-lead__main { font-size: 27px; letter-spacing: .12em; }
  .profile-lead__sub { font-size: 15px; }

  .profile-grid { grid-template-columns: 1fr; row-gap: 18px; text-align: center; }
  /* スマホは横3列にせず縦積み。独立した情報ボックスとしての見え方は保つ。 */
  .award-box { text-align: left; padding: 16px 16px 18px; }
  .award-box__title { justify-content: flex-start; font-size: 15px; }
  .award-box__party, .award-box__list li { font-size: 14.5px; }
  /* SP-05d：プロフィール写真とポスターの表示幅を240pxで揃える（中央寄せは維持）。 */
  .profile-photo { width: 240px; margin: 0 auto; }
  /* SP-05b：写真上部の独立した「プロフィール」見出しをスマホだけ非表示。
     余白が残らないよう display:none とする。PCの見出し・ナビ・開閉ボタンは残す。 */
  .profile-label { display: none; }
  .profile-name-kana { font-size: 13px; }
  .profile-name-kanji { font-size: 34px; }
  .profile-role { font-size: 16px; }
  .profile-birth { font-size: 14px; }
  /* SP-05c：「所属」欄の箇条書き（左端32px）に、出身地・出身校一覧と
     ポスター掲示・ボランティア募集の本文の開始位置を合わせる。 */
  .profile-origin { text-align: left; padding-left: 16px; }
  .support-item p { padding-left: 16px; }
  .profile-detail-toggle { font-size: 15px; }

  .detail-block, .profile-origin-block {
    text-align: left; border-left: 2px solid #cfe1d8; padding-left: 14px;
  }
  .affiliation-list { grid-template-columns: 1fr; }

  /* ---- 応援 ---- */
  .support-grid { grid-template-columns: 1fr; row-gap: 22px; }
  .support-poster { max-width: 240px; margin: 0 auto; }
  .support-item__head { justify-content: flex-start; }
  .support-item__head h3 { font-size: 17px; }
  .support-item p { font-size: 14.5px; }

  /* ---- お問い合わせ ---- */
  .contact-box { padding: 20px 18px 24px; border-radius: 14px; }
  .btn-submit { min-width: 0; width: 100%; font-size: 15px; }

  /* ---- フッター ---- */
  .footer-top {
    grid-template-columns: 1fr; row-gap: 18px; padding-top: 26px; padding-bottom: 24px;
  }
  /* SP-06：修正後のスマホヘッダー（肩書き11.5px／氏名21.5px／間隔1px）に合わせる。 */
  .footer-brand__role { font-size: 11.5px; }
  .footer-brand__name { font-size: 21.5px; margin-top: 1px; }
  .footer-right { align-items: flex-start; gap: 16px; }
  .footer-nav { flex-wrap: wrap; gap: 16px; }
  .sns-badge { width: 42px; height: 42px; }
  .sns-badge img { width: 25px; height: 25px; }
  /* SP-07：LINEだけ小さく見えていた原因。従来は外枠に地色がなく、
     25pxの角丸四角アイコンだけが見えていた。丸い地色の上で
     白いマークがf・Instagramと同じ大きさに見えるようにする。 */
  .sns-badge--brand picture { width: 90%; height: 90%; }
  .sns-badge--brand img { width: 100%; height: 100%; }
  .footer-party img { width: 200px; }
  /* .bar-inner の SP 指定（padding: 0 16px）が上下パディングを打ち消すため、
     最下部バーだけ上下を明示する。著作権表記の削除後も高さが保たれる。 */
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12.5px;
                   padding-top: 12px; padding-bottom: 14px; }
}

/* 390px（スマホCanvaの基準幅）より狭い画面では、人物とコピーの間隔が
   そのまま詰まって「る」「。」が髪や頬に触れる。狭い分だけ人物を右へ寄せ、
   390pxのときと同じ間隔を保つ。390px以上には影響しない。 */
@media (max-width: 389px) {
  .hero__person { right: calc(100vw - 457px); }
}

/* 320px級の狭い画面では、ヘッダーの氏名が2行に折り返して帯が55px→66pxへ伸び、
   ヒーロー上部が押し下げられていた。359px以下だけ文字と間隔を詰めて1行に収める。
   360px以上の表示には影響しない。 */
@media (max-width: 359px) {
  .brand__role { font-size: 10.5px; }
  .brand__name { font-size: 19px; white-space: nowrap; }
  .header-right { gap: 8px; }
  .header-sns { gap: 8px; }
  .header-sns img { width: 15px; height: 15px; }
  .btn-line { font-size: 9px; padding: 5px 9px; }
  .hero__latin { font-size: 13px; letter-spacing: .2em; }
}


/* ==================== スマートフォン横向きの補正 ==================== */
/* 幅899px以下・高さ500px以下・横向き＝スマホを横にした状態だけが対象。
   900px以上はPCレイアウトなので、ここには入らない。
   縦向きスマホにも当たらない。 */
@media (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {

  /* ---- 段の幅：縦向きより広げ、見出し・本文の行数を減らす ----
     広げすぎると、スマホ用の原稿に入っている改行の後ろが大きく空くため、
     見出しが1行に収まる幅にとどめる。 */
  .container { max-width: 560px; }

  /* ---- 縦向き専用の強制改行を解除（横幅に余裕があるため） ---- */
  .sp-br { display: none; }
  /* 縦向きだけで入れている br（お問い合わせの説明文）も同様に解除する。
     br 以外の .sp-only（原稿の出し分け）はそのまま表示する。 */
  br.sp-only { display: none; }

  /* ---- 縦方向の余白を圧縮（間延び防止） ---- */
  /* セクションの内側余白と基準値を、横向き用へ切り替える。 */
  :root {
    --section-gap: var(--section-gap-ls);
    --section-pt: 26px;
    --section-pb: 28px;
    --section-heading-gap: 20px;
    --support-gap-extra: 14px;
  }
  .section-sub { margin-top: 6px; }
  .profile-divider { margin-top: 22px; }
  .profile-detail-inner { padding-top: 16px; }
  .detail-block + .detail-block { margin-top: 18px; }
  .footer-top { padding-top: 26px; padding-bottom: 20px; }

  /* ---- 文字サイズ：横向きで読みやすく、画面を占有しすぎない ---- */
  /* ヘッダーの議員名：高さ55pxの帯に収め、横向きでも読める大きさ */
  .brand__role { font-size: 11px; }
  .brand__name { font-size: 19.5px; }

  /* ヒーローの主要コピー：縦向きのままでは画面の高さを占有しすぎる */

  /* セクション見出し・本文 */
  .section-title { font-size: 19.5px; }
  .section-sub { font-size: 14.5px; }
  body { font-size: 14px; }
  .support-item p { font-size: 14px; }

  /* カードの見出し・プロフィール */
  .value-card__name { font-size: 15px; }
  .profile-lead__main { font-size: 23px; }
  .profile-lead__sub { font-size: 14.5px; }
  .profile-name-kanji { font-size: 28px; }
  .profile-role { font-size: 15px; }
  .award-box__party, .award-box__list li { font-size: 14px; }
  .support-item__head h3 { font-size: 16px; }

  /* ---- 政策カード（0927f）----
     横向きは段の幅が560pxあるのに、カードの文字が縦向き並み（本文13.5px・箇条書き13.5px）で、
     他セクションの本文（14px）より小さく、アイコン（50px）に対して見出し（16px）が負けていた。
     セクション見出し（19.5px）は全セクション共通のまま変えず、
     カード見出し 17px ＞ 本文・箇条書き 14px の比率にそろえる。
     本文は14pxでも1行37字（従来と同じ改行位置）に収まるよう、字送りだけ -.03em 詰める。
     カードの左右余白（12px）は縦向きと同じまま。 */
  .policy-item__head img { height: 44px; }
  .policy-item__name { font-size: 17px; }
  .policy-item__points li { font-size: 14px; line-height: 1.55; }
  .policy-item__body { font-size: 14px; line-height: 1.7; letter-spacing: -.03em; }

  /* フッター */
  .footer-brand__role { font-size: 11px; }
  .footer-brand__name { font-size: 19.5px; }

  /* ---- 画像：文章との比率が崩れないように上限をそろえる ---- */
  .profile-photo { width: 210px; }
  .support-poster { max-width: 210px; }
  .activity-grid img { height: 150px; }
  .twoshot { min-height: 230px; }

  /* ---- ボタン・CTA：画面幅いっぱいに横長にならないようにする ---- */
  .btn-submit { width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
  .btn-sns-wide { max-width: 340px; margin-left: auto; margin-right: auto; }
}


/* ============ ヒーローだけ先に横配置へ（600px以上） ============ */
/* サイト全体のスマホ／PCの切り替えは 899/900px のまま。
   ヒーローだけは横幅に余裕が出る600pxから、PCに近い横並び
   （左：コピー・見出し・SNSボタン ／ 右：人物）へ切り替える。
   PC版をそのまま縮めるのではなく、人物・見出し・余白を中間の大きさにする。 */
@media (min-width: 600px) and (max-width: 899px) {
  /* ヒーロー内の縦向き専用の強制改行は解除して、行数を減らす */
  .hero .sp-br { display: none; }

  .hero__inner { min-height: 360px; padding: 20px 20px 16px; }
  .hero__bg { height: 55%; }

  /* 左：コピー領域。右の人物と重ならない幅にとどめる */
  .hero__copy { max-width: 52%; }

  .hero__eyebrow { gap: 0; }
  .hero__badge { font-size: 15px; padding: 5px 18px; }
  .hero__rule { width: 44px; margin-right: 12px; }
  .hero__latin { font-size: 15px; letter-spacing: .28em; }
  .hero__kicker { margin-top: 14px; font-size: 16px; line-height: 1.45; }

  /* 見出しはPCと同じ組み方（魅力あふれる／豊島へ。の2行）へ戻す */
  .hero__headline { margin-top: 4px; padding-left: 0; }
  .hero__headline .hl-line { white-space: nowrap; }
  .hero__headline .hl-line--1 { padding-left: 6px; }
  .hero__headline .hl-line--2 { padding-left: 16px; margin-top: 8px; }
  .hero__headline .hl-line + .hl-line { margin-top: 8px; }
  .hero__headline .hl-lead { display: inline; font-size: 62px; }
  .hero__headline .hl-tail { display: inline; font-size: 30px; padding-left: 8px;
                             margin-top: 0; margin-left: 0; }
  .hero__headline .hl-line--1 .hl-tail { display: inline; margin-top: 0; margin-left: 0;
                                         padding-left: 8px; }
  .hero__headline .hl-line--2 .hl-lead { display: inline; font-size: 48px; }
  .hero__headline .hl-line--2 .hl-tail { font-size: 33px; }

  /* SNSの導線はPC同様に表示する（スマホでは非表示） */
  .hero__sns-lead { display: flex; margin-top: 16px; font-size: 13.5px; }
  .hero__sns-lead::before { width: 24px; }
  .hero__sns { display: flex; gap: 14px; margin-top: 10px; }
  .btn-sns-chip { padding: 9px 16px; font-size: 13.5px; gap: 8px; }
  .btn-sns-chip img { width: 18px; height: 18px; }
  .btn-sns-chip .arrow { width: 13px; height: 13px; margin-left: 8px; }

  /* 右：人物。画面幅に応じて滑らかに変え、右端に寄せる */
  .hero__person { right: -24px; top: 22px; }
  .hero__person img { height: clamp(380px, 48vw, 470px); }

  .hero__party { right: 14px; bottom: 14px; padding: 7px 12px; }
  .hero__party img { width: 150px; }

  /* 活動の様子のSNSボタンは、横並び＋上限幅にする */
  .activity-buttons { flex-direction: row; gap: 16px; margin-top: 26px; }
  .btn-sns-wide { flex: 1 1 0; max-width: 300px; margin: 0; font-size: 15px; padding: 13px 22px; }
  .btn-sns-wide img { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .profile-detail-toggle .chev { transition: none; }
}