@charset "UTF-8";
/* ============================================
   新田泰史 Official Site — Renewal 2026
   白基調 × オレンジアクセント(現デザイン踏襲)
   ============================================ */
:root {
  --c-accent: #ec7210;
  --c-accent-dark: #b3560a; /* 小さい文字用(コントラスト4.9:1) */
  --c-accent-light: #ff9933;
  --c-green: #2e7d4f;
  --c-blue: #287cca;
  --c-red: #ef1317;
  --c-text: #333;
  --c-text-light: #6e6e6e;
  --c-bg: #fff;
  --c-bg-soft: #fdf8f2;
  --c-line: #e8e0d5;
  --font-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-serif: 'Sawarabi Mincho', 'Hiragino Mincho ProN', serif;
  --header-h: 64px;
}

/* --- reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: var(--header-h); }
body {
  font-family: var(--font-sans);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.9;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
/* 見出しは行の長さが揃うように改行 */
h1, h2, h3, h4, summary { text-wrap: balance; }
/* 本文は行を右端まで埋めつつ、最終行だけ極端に短くならないように */
p, li { text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent-dark); text-decoration: none; transition: opacity .25s; }
a:hover { opacity: .75; }
ul, ol { list-style: none; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* --- header --- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
  display: flex; align-items: center;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand { display: flex; flex-direction: column; line-height: 1.3; }
.brand a { color: var(--c-text); }
.brand .brand-sub { font-size: 11px; color: var(--c-text-light); letter-spacing: .08em; }
.brand .brand-name { font-size: 19px; font-weight: 700; letter-spacing: .06em; }
.brand .brand-name span { color: var(--c-accent); }

.gnav ul { display: flex; gap: 26px; }
.gnav a {
  color: var(--c-text); font-size: 14px; font-weight: 500;
  padding: 8px 0; position: relative; letter-spacing: .04em;
}
.gnav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--c-accent);
  transform: scaleX(0); transition: transform .25s;
}
.gnav a:hover::after, .gnav a[aria-current="page"]::after { transform: scaleX(1); }
.gnav a[aria-current="page"] { color: var(--c-accent); }

.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; position: relative; z-index: 110;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: var(--c-text);
  margin: 5px auto; transition: .3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- hero (top) --- */
.hero {
  position: relative;
  /* ファーストビューいっぱいに表示(ヘッダー分を差し引いた高さ) */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex; align-items: center;
  /* 画像側に右余白を持たせているため、どの画面幅でも人物は右端から一定の位置に収まる */
  background: #f4f6f8 url(../img/hero.jpg) no-repeat right center / cover;
  /* 顔を大きく見せるため画像を高さの112%に拡大し、頭が切れないよう上端基準で配置。画面が広いほど人物を右へ寄せる */
  /* 人物の大きさは画面「幅」に連動させる(=文字サイズと同じ基準なので、どの縦横比でも文字と顔が重ならない)。
     縦に長い画面では高さを満たす大きさを優先(隙間防止) */
  --hero-m: clamp(24px, 20vw, 380px);                      /* 左右の余白(文字の左・顔の右で同じ値) */
  --hero-h: calc(100vh - var(--header-h));
  --hero-h: calc(100svh - var(--header-h));
  --hero-bg-w: max(200vw, calc(352.7vh - 226px));           /* 背景画像の表示幅(縦長画面では高さの1.08倍=上を詰めて顔を大きく) */
  background-size: var(--hero-bg-w) auto;
  /* 横: 画像の右端〜頭の右端は画像幅の18.69%。それが余白 --hero-m になるように右へずらす
     縦: 髪の上端(画像幅の4.6%)が上から26pxに来るよう上へずらす。ただし画像の下端が見えない範囲まで */
  background-position:
    calc(100% + 0.1869 * var(--hero-bg-w) - var(--hero-m))
    max(calc(26px - 0.046 * var(--hero-bg-w)), calc(var(--hero-h) - 0.3062 * var(--hero-bg-w)));
}
.hero-inner { width: 100%; max-width: none; margin: 0; padding: 60px 20px 60px var(--hero-m, 20px); }
/* キャッチコピー: 1行目=濃紺 / 2行目=緑で大きく */
.hero .hero-copy {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(34px, 4.8vw, 84px);
  line-height: 1.25;
  letter-spacing: .06em;
  text-shadow: 0 0 14px #fff, 0 0 26px rgba(255,255,255,.85);
}
.hero .hero-copy .c1 {
  display: block;
  font-size: .62em;
  color: #1c2b3a;
  letter-spacing: .06em;
  margin-bottom: .3em;
}
.hero .hero-copy .c2 {
  display: block;
  color: #086d00;
}
.hero .hero-name {
  position: relative;
  margin-top: 26px;
  padding-top: 22px;
  font-family: var(--font-sans);
  font-size: clamp(32px, 5vw, 78px);
  font-weight: 800;
  letter-spacing: .16em;
  color: #086d00;
  text-shadow: 0 0 12px #fff, 0 0 24px rgba(255,255,255,.85);
  line-height: 1.2;
}
/* お名前の上の細い区切り線 */
.hero .hero-name::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 4.4em; height: 2px;
  background: #086d00;
}
.hero .hero-name span {
  display: block;
  font-size: .36em;
  font-weight: 500;
  letter-spacing: .22em;
  color: #333;
  margin-bottom: 4px;
  text-shadow: 0 0 12px rgba(255,255,255,.95);
}
.hero .hero-sub {
  margin-top: 16px;
  font-size: clamp(14px, 1.5vw, 24px);
  line-height: 1.6;
  font-weight: 700; letter-spacing: .04em;
  color: var(--c-accent);
  /* 白の縁取り(8方向の影)+ぼかしで、写真の上でも読みやすく */
  text-shadow:
    1.5px 0 0 #fff, -1.5px 0 0 #fff, 0 1.5px 0 #fff, 0 -1.5px 0 #fff,
    1.2px 1.2px 0 #fff, -1.2px -1.2px 0 #fff, 1.2px -1.2px 0 #fff, -1.2px 1.2px 0 #fff,
    0 0 12px #fff, 0 0 22px rgba(255,255,255,.9);
}
@supports (paint-order: stroke fill) {
  .hero .hero-sub { -webkit-text-stroke: 3px #fff; paint-order: stroke fill; }
  /* スマホは文字が小さいので縁取りを細くし、白っぽく見えないようにする */
  @media (max-width: 768px) {
    .hero .hero-sub { -webkit-text-stroke: 1.2px #fff; }
  }
}

/* --- 下層ページ見出し(オリジナル踏襲: 左寄せ・英字サブタイトル) --- */
.sub-head { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.sub-head .en {
  display: inline-block; font-size: 15px; letter-spacing: .5em;
  font-weight: 500; color: var(--c-text);
  padding: 4.5em 0 1em .2em; text-transform: uppercase;
}
.sub-head h1, .sub-head h2 {
  font-size: clamp(28px, 4.5vw, 46px); font-weight: 800;
  color: var(--c-text); margin: 0 0 1.2em;
}

/* 右上に写真を敷くページ頭(プロフィール・政策・サポーター) */
.sub-visual { background-repeat: no-repeat; background-position: top right; }
.sub-visual.contain { background-size: contain; }
.sub-visual .on-photo { background: rgba(255,255,255,.8); padding: 1em; }

/* --- sections --- */
.section { padding: 88px 0; }
.section.soft { background: var(--c-bg-soft); }
.sec-head { text-align: center; margin-bottom: 48px; }
.sec-head .en {
  display: block; font-size: 13px; letter-spacing: .3em;
  color: var(--c-accent-dark); font-weight: 700; text-transform: uppercase;
}
.sec-head h1, .sec-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 4.5vw, 36px);
  letter-spacing: .1em; margin-top: 6px; color: #1c2b3a;
}
.sec-head h1 .num, .sec-head h2 .num { color: var(--c-accent); font-size: 1.2em; }

/* --- message --- */
.message-layout { max-width: 760px; margin: 0 auto; }
/* スマホのみ有効な改行 */
.br-sp { display: none; }
@media (max-width: 640px) { .br-sp { display: inline; } }
/* 写真の上にメッセージを重ねる */
#message {
  position: relative;
  background: url(../img/message.jpg) no-repeat center center / cover;
}
#message::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255,255,255,.72);
}
#message > .wrap { position: relative; z-index: 1; }
.message-layout.on-photo-bg .message-body {
  background: rgba(255,255,255,.92);
  border-radius: 16px;
  padding: 48px 44px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
/* PCは背景写真を使うので写真ブロックは非表示 */
.message-layout.on-photo-bg .message-figure { display: none; }
@media (max-width: 640px) {
  /* スマホは背景写真をやめ、写真とメッセージを分けて表示 */
  #message { background: none; }
  #message::before { display: none; }
  .message-layout.on-photo-bg .message-figure {
    display: block;
    margin: 0 0 24px;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 10px 26px rgba(0,0,0,.14);
  }
  .message-layout.on-photo-bg .message-body {
    background: none;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    text-align: center;
  }
  /* スマホは文字を少し小さめに・行間も詰める */
  .message-body p {
    font-size: 15px; line-height: 1.7; margin-bottom: 1.15em;
    word-break: auto-phrase;
  }
  .message-body .lead { font-size: 17px; line-height: 1.7; margin-bottom: 1.15em; }
  .message-body .message-closing {
    font-size: 17.5px; line-height: 1.7; margin-top: 1.6em;
  }
}
.message-figure {
  margin: 0 0 44px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
}
.message-figure img { display: block; width: 100%; height: auto; }
.message-body { text-align: center; }
@media (max-width: 600px) {
  .message-body { text-align: left; }
}
.message-body p { margin-bottom: 1.4em; }
.message-body .lead {
  font-family: var(--font-serif); font-size: 20px; line-height: 2.1;
  color: #1c2b3a;
}
.message-body .message-closing {
  margin-top: 2.4em;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--c-accent);
}
.txt-accent { color: var(--c-accent); font-weight: 700; }
.txt-green { color: var(--c-green); font-weight: 700; }
.txt-blue { color: var(--c-blue); font-weight: 700; }
.txt-red { color: var(--c-red); font-weight: 700; }

/* --- 5つの柱 リード文 --- */
.pillars-lead {
  text-align: center;
  font-weight: 700;
  font-size: clamp(16px, 2.4vw, 21px);
  line-height: 2.1;
  letter-spacing: .06em;
  margin: 0 0 56px;
}

/* --- policy cards --- */
.policy-cards {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 28px; max-width: 900px; margin: 0 auto;
}
.policy-cards .policy-card:last-child { grid-column: 1 / -1; max-width: calc(50% - 14px); margin: 0 auto; width: 100%; }
@media (max-width: 640px) {
  .policy-cards { grid-template-columns: 1fr; }
  .policy-cards .policy-card:last-child { max-width: 100%; }
}
.policy-card {
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  transition: transform .3s, box-shadow .3s;
  display: flex; flex-direction: column;
}
.policy-card:hover { transform: translateY(-10px) scale(1.02); }
.policy-card .thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.policy-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.policy-card .thumb .badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--c-accent); color: #fff;
  font-weight: 700; font-size: 13px; letter-spacing: .05em;
  padding: 4px 14px; border-radius: 999px;
}
.policy-card .body { padding: 22px 24px 26px; flex: 1; }
.policy-card h3 { font-size: 17px; line-height: 1.6; color: #1c2b3a; margin-bottom: 10px; }
.policy-card p { font-size: 14px; color: var(--c-text-light); line-height: 1.8; }

/* --- buttons --- */
.btn-row { text-align: center; margin-top: 44px; }
.btn {
  display: inline-block; padding: 15px 44px; border-radius: 999px;
  background: var(--c-accent); color: #fff; font-weight: 700;
  letter-spacing: .06em; box-shadow: 0 6px 18px rgba(236,114,16,.35);
  transition: transform .25s, box-shadow .25s;
}
.btn:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(236,114,16,.45); }
.btn.ghost {
  background: #fff; color: var(--c-accent);
  border: 2px solid var(--c-accent); box-shadow: none;
}
@media (max-width: 420px) {
  /* 狭い画面でもボタン内の文字が2行に折り返さないように */
  .btn { padding: 14px 24px; font-size: 15px; letter-spacing: .03em; }
}

/* --- report banner --- */
.report-banner {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-light));
  color: #fff; border-radius: 14px; padding: 34px 24px;
  font-family: var(--font-serif); font-size: clamp(18px, 3vw, 24px);
  letter-spacing: .08em;
  box-shadow: 0 8px 24px rgba(236,114,16,.3);
  transition: transform .3s;
}
.report-banner:hover { opacity: 1; transform: translateY(-3px); }
.report-banner::after { content: "→"; font-family: var(--font-sans); }

/* --- SNS --- */
.sns-list { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; }
.sns-list a {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--c-text-light); font-size: 12px; letter-spacing: .05em;
}
.sns-list svg {
  width: 52px; height: 52px; padding: 13px; border-radius: 50%;
  background: var(--c-bg-soft); border: 1px solid var(--c-line);
  fill: var(--c-accent); transition: .25s;
}
.sns-list a:hover svg { background: var(--c-accent); fill: #fff; }

/* --- external links (県庁・県議会) --- */
.ext-links { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 64px; }
.ext-links a {
  position: relative;
  flex: 1 1 300px; max-width: 420px;
  padding: 26px 48px 26px 28px;
  border: 2px solid var(--c-accent); border-radius: 12px;
  color: #1c2b3a; font-size: 17px; font-weight: 700; letter-spacing: .05em;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transition: transform .25s, box-shadow .25s, background .25s;
}
.ext-links a::after {
  content: "→"; position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  color: var(--c-accent); font-size: 20px; transition: transform .25s;
}
.ext-links a:hover {
  opacity: 1; transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(236,114,16,.25);
  background: var(--c-bg-soft);
}
.ext-links a:hover::after { transform: translateY(-50%) translateX(4px); }

/* --- footer --- */
.site-footer {
  background: #1c2b3a; color: #fff; margin-top: 0;
  padding: 56px 20px 28px; text-align: center;
}
.site-footer .f-name { font-family: var(--font-serif); font-size: 22px; letter-spacing: .12em; }
.site-footer .f-office { margin-top: 18px; font-size: 14px; color: #cfd8e3; line-height: 2; }
.site-footer .f-office a { color: #cfd8e3; text-decoration: underline; }
.site-footer .f-nav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.site-footer .f-nav a { color: #9fb0c3; font-size: 13px; }
.site-footer .f-privacy { margin-top: 26px; }
.site-footer .f-privacy a { color: #9fb0c3; font-size: 13px; }
.site-footer .copyright { margin-top: 14px; font-size: 12px; color: #93a5b9; }

/* --- profile(オリジナル踏襲) --- */
.profile-head {
  background-image: url(../img/profile_hero.webp);
  /* 写真が収まる高さを確保 */
  min-height: min(58vw, 730px);
  /* 元画像(690px)より大きく引き伸ばさない */
  background-size: min(55%, 690px) auto;
  /* 広い画面では画像を内側に寄せて本文との間隔を保つ */
  background-position: right max(0px, calc((100vw - 1254px) / 2)) top 2em;
}
.bio-list { width: 55%; font-size: 17px; line-height: 1.6; padding-bottom: 3em; }
.bio-list li { padding: 0 0 .7em 0; }
.bio-list li strong { color: var(--c-text); }
.bio-list .bio-divider {
  border-bottom: dashed 2px #8e8e8e;
  margin-bottom: 1em; padding-bottom: 1em;
  /* 最長行「県議会 少子高齢化・人口減少対策特別委員会 委員」に合わせた幅 */
  width: min(23.5em, 100%);
}
.profile-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 8px;
}
@media (max-width: 900px) {
  .profile-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .profile-cards { grid-template-columns: 1fr; }
}
/* MY10: 2列×5行で下端まで揃うカード配置 */
#my10 .profile-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 940px; margin: 8px auto 0;
}
@media (max-width: 700px) { #my10 .profile-cards { grid-template-columns: 1fr; gap: 18px; } }
.profile-card {
  position: relative; overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 1.6em 1.6em 1.7em;
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
}
/* 透かしの大きな連番 */
.profile-card .no {
  position: absolute; top: .06em; right: .12em;
  font-family: var(--font-serif);
  font-size: 76px; font-weight: 700; letter-spacing: 0;
  line-height: 1;
  color: rgba(236,114,16,.11);
  pointer-events: none;
}
.profile-card h3 {
  position: relative;
  font-size: 16.5px; font-weight: 700; color: var(--c-text);
  line-height: 1.55;
  padding-bottom: .7em; margin-bottom: .8em;
  padding-right: 5.6em;   /* 右上の透かし番号と見出しが重ならないよう余白を確保 */
}
@media (max-width: 700px) {
  .profile-card .no { font-size: 62px; }
  .profile-card h3 { padding-right: 4.4em; }
}
.profile-card h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 30px; height: 3px; border-radius: 2px;
  background: var(--c-accent);
}
.profile-card p { font-size: 14.5px; line-height: 1.9; color: #444; }
/* 経歴の期区切り */
.bio-list .bio-term {
  margin-top: .5em; font-weight: 700; color: var(--c-accent-dark);
}
/* 1期目・2期目を横並びに */
.term-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  max-width: 1080px; margin: 0 auto;
}
@media (max-width: 820px) {
  .term-grid { grid-template-columns: 1fr; gap: 32px; }
}
.term-topic {
  margin-top: 1.1em; padding: .9em 1.1em;
  background: var(--c-bg-soft); border-radius: 8px;
  font-size: 13.5px; line-height: 1.85; color: #444;
}
.term-topic a { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; color: var(--c-accent-dark); font-weight: 500; }
.term-topic a::after { content: ""; display: inline-block; width: .8em; height: .8em; margin-left: .25em; vertical-align: -.05em;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14zM5 5h6v2H7v10h10v-4h2v6H5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14zM5 5h6v2H7v10h10v-4h2v6H5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.term-block h2 {
  font-size: 20px; font-weight: 700; color: var(--c-text);
  border-left: 5px solid var(--c-accent);
  padding-left: .6em; margin-bottom: .8em;
}
.term-block .term-elect {
  font-size: 15px; line-height: 1.8; margin-bottom: 1em;
  padding-bottom: .9em; border-bottom: 1px dashed #b9b9b9;
}
.term-block .term-elect strong { color: var(--c-accent-dark); }
.term-block .term-note { font-size: .9em; color: var(--c-text-light); }
.term-block ul { display: grid; gap: .7em; }
.term-block li {
  position: relative; padding-left: 1.1em;
  font-size: 15px; line-height: 1.75;
}
.term-block li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-accent);
}

/* --- 愛媛県議会とは(PDFレイアウト踏襲・サイトのオレンジ配色) --- */
.asm-page { padding-top: 56px; }
/* タイトル(左右に細い装飾線) */
.asm-h1 {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  font-family: var(--font-serif);
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 700; letter-spacing: .14em;
  color: #1c2b3a;
  margin-bottom: .8em;
}
.asm-h1::before, .asm-h1::after {
  content: ""; flex: 0 1 150px; height: 1px;
  background: var(--c-accent);
  position: relative;
}
.asm-h1::before { box-shadow: -4px 0 0 -2px var(--c-accent); }
@media (max-width: 640px) {
  .asm-h1 { gap: 12px; }
  .asm-h1::before, .asm-h1::after { flex-basis: 40px; }
}
.asm-lead {
  text-align: center;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 2;
  margin: 0 auto 40px;
  max-width: 860px;
}
.asm-lead strong { color: var(--c-accent-dark); font-weight: 700; }
.br-pc { display: inline; }
@media (max-width: 760px) { .br-pc { display: none; } }

/* 左ラベル + 右コンテンツ */
.asm-row {
  display: flex; align-items: stretch;
  max-width: 940px; margin: 0 auto 22px;
  background: var(--c-bg-soft);
  border-radius: 12px;
  overflow: hidden;
}
.asm-label {
  flex: 0 0 150px;
  background: var(--c-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 15px; font-weight: 700; line-height: 1.6; letter-spacing: .04em;
  padding: 1.4em .8em;
}
.asm-content { flex: 1; padding: 1.5em 1.8em; min-width: 0; }
.asm-content > p { line-height: 1.9; margin-bottom: .5em; font-size: 15px; }
.asm-content > p:last-of-type { margin-bottom: 0; }
@media (max-width: 760px) {
  .asm-row { flex-direction: column; }
  .asm-label { flex: none; padding: .8em 1em; font-size: 15px; }
  .asm-label br { display: none; }
  .asm-content { padding: 1.2em 1.2em 1.4em; }
}

/* 県議会の役割(3分割) */
.asm-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.asm-role { padding: .2em 1.2em; }
.asm-role + .asm-role { border-left: 1px solid #e3ddd3; }
.asm-role .r-head { display: flex; align-items: center; gap: 10px; margin-bottom: .6em; }
.asm-role .ic { flex: 0 0 34px; color: var(--c-accent); }
.asm-role .ic svg { width: 34px; height: 34px; display: block; }
.asm-role h2 { font-size: 15.5px; font-weight: 700; color: var(--c-text); line-height: 1.4; }
.asm-role p { font-size: 13.5px; line-height: 1.8; color: #555; }
@media (max-width: 760px) {
  .asm-roles { grid-template-columns: 1fr; }
  .asm-role { padding: 0; }
  .asm-role + .asm-role { border-left: 0; border-top: 1px solid #e3ddd3; margin-top: 1em; padding-top: 1em; }
}

/* テキスト+地図 */
.asm-split { display: flex; align-items: center; gap: 24px; }
.asm-txt { flex: 1; min-width: 0; }
.asm-h3 {
  font-size: clamp(17px, 2.2vw, 21px); font-weight: 700;
  color: var(--c-accent-dark); margin-bottom: .5em; line-height: 1.5;
}
.asm-txt p { font-size: 15px; line-height: 1.9; }
.asm-note { margin-top: .4em; font-size: 15px; }
.asm-note strong { font-size: 1.25em; color: var(--c-accent-dark); }
.asm-map { position: relative; flex: 0 0 280px; }
.asm-map img { width: 100%; height: auto; display: block; }
.asm-bubble {
  position: absolute; right: 4px; bottom: 2%;
  width: 82px; height: 82px; border-radius: 50%;
  border: 1px solid var(--c-accent);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 11px; line-height: 1.5; color: var(--c-accent-dark);
}
@media (max-width: 760px) {
  .asm-split { flex-direction: column; align-items: center; gap: 14px; }
  .asm-map { flex: none; width: 250px; }
  .asm-bubble { right: 0; bottom: 0; width: 74px; height: 74px; font-size: 10.5px; }
}

/* 東温市選挙区(枠付きカード) */
.asm-card {
  max-width: 940px; margin: 0 auto 22px;
  border: 2px solid var(--c-accent);
  border-radius: 12px;
  padding: 2em 1.8em;
  background: #fff;
  text-align: center;
}
.asm-h2 {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.6vw, 26px); font-weight: 700;
  color: var(--c-accent-dark); line-height: 1.5;
  margin-bottom: .2em; text-align: center;
}
.asm-toon-body { max-width: 700px; margin: 0 auto; }
.toon-map-wrap { position: relative; width: 230px; margin: .6em auto 2em; }
.toon-map { width: 100%; height: auto; display: block; }
.toon-pin {
  position: absolute; left: 61%; top: 30%;
  background: #fff; border: 1px solid var(--c-accent);
  color: var(--c-accent-dark); font-size: 11px; font-weight: 700;
  line-height: 1; padding: 4px 7px; border-radius: 4px; white-space: nowrap;
}
.asm-credit {
  position: absolute; left: 50%; bottom: -1.5em; transform: translateX(-50%);
  white-space: nowrap; font-size: 10px; color: #999; letter-spacing: .02em;
}
.toon-pin::before {
  content: ""; position: absolute; left: -7px; top: 50%;
  width: 7px; height: 1px; background: var(--c-accent);
}
.asm-toon-body p { font-size: 15px; line-height: 1.9; margin-bottom: .7em; }
.asm-strong { font-weight: 700; color: var(--c-accent-dark); }
.asm-quote {
  margin: 1.1em auto 0; padding: 1.1em 1.6em;
  width: fit-content; max-width: 100%;
  background: var(--c-bg-soft); border-radius: 10px;
}
.asm-quote p { font-size: 14.5px; line-height: 1.85; margin: 0; }
@media (max-width: 760px) {
  .asm-card { padding: 1.6em 1.2em; }
  .asm-quote { padding: 1em 1em; }
}

/* 県の仕事(5アイコン) */
.asm-fields {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0; margin-top: 1.2em;
}
.asm-fields li {
  text-align: center; padding: .2em .5em;
  font-size: 12.5px; font-weight: 500; color: #555; line-height: 1.5;
}
.asm-fields li + li { border-left: 1px solid #e3ddd3; }
.asm-fields .f-ic { display: block; color: var(--c-accent); margin: 0 auto .5em; }
.asm-fields .f-ic svg { width: 40px; height: 40px; display: block; margin: 0 auto; }
@media (max-width: 620px) {
  .asm-fields { grid-template-columns: repeat(3, 1fr); gap: 1em 0; }
  .asm-fields li:nth-child(3n+1) { border-left: 0; }
  .asm-fields .f-ic svg { width: 34px; height: 34px; }
}

/* 流れ図 */
.asm-flow { display: flex; align-items: center; gap: 10px; margin-top: 1.2em; }
.asm-flow .fl { flex: 1; text-align: center; }
.asm-flow .fl-ic {
  display: flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; margin: 0 auto .5em;
  border-radius: 50%; background: rgba(236,114,16,.12); color: var(--c-accent);
}
.asm-flow .fl-ic svg { width: 40px; height: 40px; }
.asm-flow .fl-ttl { display: block; font-weight: 700; font-size: 14.5px; color: var(--c-accent-dark); }
.asm-flow .fl-txt { display: block; font-size: 12px; line-height: 1.7; color: #666; margin-top: .3em; }
.asm-flow .fl-arrow { flex: 0 0 40px; color: rgba(236,114,16,.55); }
.asm-flow .fl-arrow svg { width: 40px; height: 20px; display: block; }
@media (max-width: 760px) {
  .asm-flow { flex-direction: column; gap: 6px; }
  /* スマホは矢印を縦向きにし、短めにする */
  .asm-flow .fl-arrow { transform: rotate(90deg); flex: none; margin: 4px 0; }
  .asm-flow .fl-arrow svg { width: 24px; height: 12px; }
}

/* --- 政治姿勢(stance) --- */
.stance-page { padding-top: 56px; }
.st-head { text-align: center; margin-bottom: 44px; }
.st-eyebrow {
  font-family: var(--font-serif);
  font-size: clamp(17px, 2.4vw, 24px);
  letter-spacing: .18em;
  color: #1c2b3a;
}
.st-title {
  font-family: var(--font-serif);
  font-size: clamp(44px, 9vw, 92px);
  font-weight: 700; letter-spacing: .16em; text-indent: .16em;
  line-height: 1.15; color: #2b6b3c;
  margin: .1em 0 .12em;
}
.st-sub {
  font-family: var(--font-serif);
  font-size: clamp(20px, 3.4vw, 30px);
  letter-spacing: .1em; color: #1c2b3a; margin-bottom: .7em;
}
.st-lead {
  font-size: clamp(14.5px, 1.8vw, 17px); line-height: 2;
  max-width: 820px; margin: 0 auto;
}
.st-lead em { font-style: normal; font-weight: 700; color: #2b6b3c; letter-spacing: .04em; }
.st-lead strong { font-weight: 700; color: #2b6b3c; }

/* 3つの姿勢(3カラム) */
.stance-list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 1000px; margin: 0 auto;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.stance-row {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 2.6em 1.9em;
}
.stance-row + .stance-row { border-left: 1px solid var(--c-line); }

.sr-head { margin-bottom: .9em; }
.sr-num {
  display: block; font-family: var(--font-serif);
  font-size: 52px; line-height: 1; letter-spacing: .04em;
  color: var(--c-accent);
}
.sr-en {
  display: block; margin-top: .85em;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-text-light);
}
.sr-en::before {
  content: ""; display: block; width: 30px; height: 1px;
  background: var(--c-accent); opacity: .55; margin: 0 auto .8em;
}

.sr-body { flex: 1; width: 100%; display: flex; flex-direction: column; }
.sr-body h2 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.8vw, 30px); font-weight: 700;
  letter-spacing: .1em; color: #1c2b3a; line-height: 1.4;
  margin-bottom: .5em;
}
.sr-body > p {
  font-size: 15px; line-height: 1.95;
  word-break: auto-phrase; text-wrap: pretty;
}
.sr-note {
  width: 100%; margin: 1.4em 0 0; padding: .95em 1.1em;
  background: var(--c-bg-soft);
  border-top: 1px solid rgba(236,114,16,.35);
  border-bottom: 1px solid rgba(236,114,16,.35);
  border-radius: 8px;
  font-size: 14.5px; line-height: 1.85; font-weight: 500;
  color: var(--c-accent-dark);
  word-break: auto-phrase;
}
.sr-body .sr-note { margin-top: auto; }

.st-closing {
  text-align: center; margin: 3em auto 0;
  font-family: var(--font-serif);
  font-size: clamp(17px, 2.2vw, 22px); letter-spacing: .06em;
  line-height: 1.9; color: #1c2b3a;
}

@media (max-width: 860px) {
  .stance-list { grid-template-columns: 1fr; max-width: 560px; }
  .stance-row { padding: 2.2em 0; }
  .stance-row + .stance-row { border-left: 0; border-top: 1px solid var(--c-line); }
  .sr-num { font-size: 42px; }
  .sr-body .sr-note { margin-top: 1.3em; }
}

/* --- policies (可読性重視: 白地×濃色文字×オレンジアクセント) --- */
.policies-head {
  background-image: url(../img/policies_hero.webp);
  background-size: contain;
  background-position: top right;
}
.policy-lead { max-width: 900px; margin: 0 0 3em; }
.accordion { max-width: 100%; margin: 0 auto; display: grid; gap: 1.4em; }
.accordion details {
  background: #fff; color: var(--c-text);
  border: 1px solid var(--c-line); border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  overflow: hidden;
}
.accordion summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 16px;
  padding: 1.5em 1.8em; font-weight: 700; font-size: 1.12em; color: var(--c-text);
  line-height: 1.5;
  border-left: 6px solid var(--c-accent);
  transition: background .25s;
}
.accordion summary h2 { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; flex: 1 1 auto; text-wrap: pretty; word-break: auto-phrase; }
.accordion summary { text-wrap: pretty; }
@media (max-width: 640px) { .accordion summary { padding: 1.3em 1.1em; font-size: 1.06em; } }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "＋"; margin-left: auto; color: var(--c-accent);
  font-size: 24px; font-weight: 400; transition: transform .3s; flex-shrink: 0;
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .acc-body {
  padding: .2em 2em 2em;
  border-left: 6px solid var(--c-accent);
  font-size: 16px; line-height: 1.9;
}
.accordion .acc-body .subtitle {
  font-weight: 700; font-size: 1.1em; color: var(--c-accent-dark);
  margin: 0 0 1em; line-height: 1.7;
}
.accordion .acc-body ul { display: grid; gap: .9em; }
.accordion .acc-body ul li {
  position: relative; padding-left: 1.4em; line-height: 1.9;
  color: #3a3a3a;
}
.accordion .acc-body ul li::before {
  content: "●"; position: absolute; left: 0; top: 0;
  color: var(--c-accent); font-size: .7em; line-height: 2.7;
}
.accordion .acc-body .story {
  margin: 0 0 1.8em; line-height: 2;
  color: #555;
  padding: 1.2em 1.4em;
  background: var(--c-bg-soft);
  border-radius: 8px;
}
.accordion .acc-body .acc-sub {
  margin: 1.8em 0 .9em;
  font-size: 1.05em; font-weight: 700; color: var(--c-text);
  padding-bottom: .5em;
  border-bottom: 2px solid var(--c-accent);
}
.accordion .acc-body ul li strong { font-weight: 700; color: var(--c-text); }

/* --- 後援会入会フォーム --- */
.join-form {
  max-width: 680px; margin: 0 auto;
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  padding: 2.4em 2em;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.join-form .form-lead { margin-bottom: 1.8em; line-height: 1.8; color: #555; }
.join-form .req { color: var(--c-red); margin-left: .2em; font-weight: 700; }
.join-form .field { margin-bottom: 1.4em; }
.join-form .form-group {
  border: 1px solid var(--c-line); border-radius: 10px;
  padding: 1.6em 1.4em .4em; margin: 0 0 1.8em;
}
.join-form .form-group legend {
  padding: 0 .6em; font-weight: 700; font-size: 15px; color: var(--c-accent-dark);
}
.join-form label {
  display: block; font-weight: 700; margin-bottom: .5em; font-size: 15px;
}
.join-form input[type="text"],
.join-form input[type="tel"],
.join-form input[type="email"],
.join-form textarea {
  width: 100%; padding: .9em 1em;
  border: 1px solid #ccc; border-radius: 8px;
  font: inherit; font-size: 16px;
  background: #fafafa;
  transition: border-color .2s, background .2s;
}
.join-form input:focus, .join-form textarea:focus {
  outline: none; border-color: var(--c-accent); background: #fff;
}
.join-form .field-hint {
  font-size: 13px; color: #666; margin-top: .4em;
}
.join-form .form-note {
  font-size: 13.5px; color: #666; line-height: 1.8;
  margin: -.4em 0 1.2em;
}
/* ご紹介者の各組 */
.ref-item {
  scroll-margin-top: calc(var(--header-h) + 16px); /* 削除後に一つ上のブロックへ戻る際、固定ヘッダーに隠れないように */
  position: relative;
  padding: 1.2em 1.2em .4em;
  margin-bottom: 1.2em;
  background: var(--c-bg-soft);
  border-radius: 10px;
}
.ref-item .ref-title {
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--c-accent-dark); margin-bottom: .9em;
}
.ref-remove {
  display: inline-block; margin: 0 0 1.1em;
  padding: 6px 14px; font: inherit; font-size: 12.5px;
  color: #777; background: #fff;
  border: 1px solid var(--c-line); border-radius: 999px;
  cursor: pointer;
}
.ref-remove:hover { color: var(--c-red); border-color: var(--c-red); }
.ref-actions { margin: .2em 0 1em; }
.btn-add {
  display: inline-block;
  padding: 11px 24px; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--c-accent-dark); background: #fff;
  border: 1.5px dashed var(--c-accent); border-radius: 999px;
  cursor: pointer; transition: background .2s;
}
.btn-add:hover { background: var(--c-bg-soft); }
.join-form .privacy-note {
  font-size: 13px; color: #666; margin: 1.6em 0 .4em; line-height: 1.7;
}
.join-form button.btn { cursor: pointer; font: inherit; border: 0; }

/* --- ご要望フォーム(Googleフォーム埋め込み) --- */
.inquiry-form {
  max-width: 760px; margin: 0 auto 16px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  /* スマホでiframe内スクロールが効かない端末があるため切り取らない */
  overflow: visible;
}
.inquiry-form iframe {
  display: block; width: 100%; border: 0;
  height: 1044px;
  border-radius: 14px;
}
@media (max-width: 640px) {
  /* スマホは項目が縦に伸びるぶん高さを確保し、送信ボタンまで必ず表示 */
  .inquiry-form iframe { height: 1300px; }
}
.form-fallback {
  max-width: 760px; margin: 0 auto 56px;
  font-size: 13px; line-height: 1.8; color: #666; text-align: center;
}

/* --- instagram埋め込み --- */
.insta-embed {
  max-width: 540px; margin: 0 auto;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.1);
  background: #fff;
}
/* Instagramの埋め込みは「プロフィール(約158px)+ 正方形サムネイル3列」構成。
   下に余白が出ないよう、ヘッダー＋2段ぶんの高さちょうどに合わせる */
.insta-embed iframe {
  display: block; width: 100%; height: 520px; border: 0;
}
@media (max-width: 620px) {
  .insta-embed iframe { height: calc((100vw - 40px) / 3 * 2 + 160px); }
}

/* --- report (オリジナル踏襲: 濃グレーキャプション) --- */
.report-grid {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 28px; max-width: 1000px; margin: 0 auto; padding: 0 1em;
}
.report-grid a {
  display: block; flex: 1 1 200px; max-width: 240px; margin: 0 auto;
  color: var(--c-text); transition: transform .3s;
}
.report-grid a:hover { opacity: 1; transform: translateY(-6px); }
.report-grid figure { margin: 0; }
.report-grid img {
  width: 100%; border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  transition: box-shadow .3s;
}
.report-grid a:hover img { box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.report-grid figcaption {
  text-align: center; margin-top: 14px;
  font-size: 14px; font-weight: 500;
  letter-spacing: .12em; color: var(--c-text-light);
}
.report-grid .vol-label, .report-grid .vol-num { font: inherit; color: inherit; }
/* 1行表示リード(狭い画面では自然に折返し) */
.one-line { white-space: nowrap; }
@media (max-width: 1060px) {
  .one-line { white-space: normal; }
}

/* スマホ版トップページは最新号1枚のみ表示(一覧ページでは全件表示) */
@media (max-width: 640px) {
  #report .report-grid a:nth-last-child(n+2) { display: none; }
  #report .report-grid a { max-width: 280px; }
}

/* --- support (オリジナル踏襲: 2カラム+オレンジDLボタン) --- */
.support-head {
  background-image: url(../img/support_hero.webp);
  background-size: contain;
  background-position: top right;
}
.admission {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px;
  align-items: center; margin: 2em 0 4em;
}
.admission h2 { font-size: 1.4em; font-weight: 600; padding-bottom: .5em; }
.admission h2 + p { padding-bottom: 1.5em; }
.admission ol { display: grid; gap: 1em; padding-left: 1em; margin-bottom: 1em; }
.admission .note { font-size: 14px; }
.adm-dl {
  display: block; background: var(--c-accent); color: #fff;
  font-weight: 600; font-size: 1.4em; line-height: 1.6;
  padding: 1.5em; border-radius: 5px; text-align: center;
}
.adm-dl:hover { opacity: 1; color: #ffff99; }

/* --- privacy (オリジナル踏襲: シンプル) --- */
.privacy-body { max-width: 900px; }
.privacy-body h2 { font-size: 1.1em; font-weight: 600; margin: 2.5em 0 1em; }
.privacy-body ul, .privacy-body ol { margin: 1em 0 2em; display: grid; gap: .8em; line-height: 1.6; }
.privacy-body ul li { position: relative; padding-left: 1.2em; }
.privacy-body ul li::before { content: "・"; position: absolute; left: 0; top: 0; }

/* --- scroll reveal --- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
/* JSが無効・読込失敗の場合は最初から表示 */
.no-js .reveal { opacity: 1; transform: none; }
/* revealのtransformがホバー効果を打ち消さないように */
.policy-card.reveal.is-visible { transition: transform .3s, box-shadow .3s; }
.policy-card.reveal.is-visible:hover { transform: translateY(-10px) scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* --- responsive --- */
@media (max-width: 900px) {
  .message-figure { margin-bottom: 32px; }
}
/* タブレット幅: メニューが折り返さないようハンバーガーに切り替え、トップ画像は高さを抑える */
@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .gnav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid var(--c-line);
    transform: translateY(-130%); transition: transform .35s ease;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
  }
  .gnav.open { transform: none; }
  .gnav ul { flex-direction: column; gap: 0; padding: 12px 0; }
  .gnav a { display: block; padding: 14px 28px; font-size: 16px; }
  .gnav a::after { display: none; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  /* 幅の割に縦長の画面(タブレット縦など)で人物が巨大化して文字に重ならないよう、高さを幅の62%までに */
  .hero {
    min-height: min(calc(100vh - var(--header-h)), 62vw);
    min-height: min(calc(100svh - var(--header-h)), 62vw);
    /* 高さを抑えた分、拡大率も高さ基準(=cover)に戻す。幅 = 高さ×2910/891 */
    --hero-h: min(100vh - var(--header-h), 62vw);
    --hero-h: min(100svh - var(--header-h), 62vw);
    --hero-bg-w: calc(3.756 * var(--hero-h));   /* 高さの1.15倍に拡大し、頭上を詰めて顔を大きく */
  }
}
@media (max-width: 768px) {
  /* スマホは顔を大きく見せ、文字は人物の左（余白側）に横書きで重ねる */
  .hero {
    display: flex; align-items: flex-end;
    min-height: 0;
    aspect-ratio: 900 / 1000;
    background: #eef2f7 url(../img/hero_mobile.jpg) no-repeat center center / cover;
  }
  .hero-inner {
    width: 46%;
    padding: 0 0 16% 6px;   /* 文字ブロックを画面端ぎりぎりまで寄せ、句読点と顔の距離を確保 */
    margin: 0;
    text-align: left;
  }
  .hero .hero-copy {
    font-size: 9.6vw;
    line-height: 1.2;
    letter-spacing: .03em;
  }
  .hero .hero-copy .c1 {
    font-size: .5em; letter-spacing: .02em; margin-bottom: .34em;
    white-space: nowrap;
  }
  .hero .hero-copy .c2 { white-space: nowrap; }
  .hero .hero-name {
    margin-top: 14px;
    padding-top: 13px;
    font-size: 7.4vw; letter-spacing: .04em;
    white-space: nowrap;
  }
  /* 横線は人物にかからない長さに抑える */
  .hero .hero-name::before { width: 3.9em; height: 2px; }
  .hero .hero-name span { font-size: .34em; letter-spacing: .12em; margin-bottom: 3px; color: #086d00; font-weight: 700; }  /* 「愛媛県議会議員」を下段の名前と同じ濃い緑に */
  .hero .hero-sub {
    margin-top: 11px;
    font-size: 3.7vw; line-height: 1.55; letter-spacing: 0;
    width: 58vw;            /* 体に重なってOK。折返しは2行のまま */
    white-space: nowrap;
    font-weight: 800;
    text-shadow:
      1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff,
      .8px .8px 0 #fff, -.8px -.8px 0 #fff, .8px -.8px 0 #fff, -.8px .8px 0 #fff,
      0 0 8px #fff;
  }
  .section { padding: 44px 0; }
  .sec-head { margin-bottom: 28px; }
  .btn-row { margin-top: 28px; }
  .brand .brand-name { font-size: 16px; }
}

/* 下層ページのレスポンシブ(オリジナル踏襲) */
@media (max-width: 900px) {
  .sub-head .en { padding-top: 3em; }
  .profile-head { background-size: 46% auto; background-position: center right; }
  .bio-list { width: 100%; font-size: 15px; }
  .bio-list li:nth-child(-n+9) { width: 52%; }
  .admission { grid-template-columns: 1fr; }
  .adm-dl { max-width: 420px; margin: 0 auto; }
  .policies-head, .support-head { background-size: 60% auto; }
}

/* スマホの下層ページは写真を上部に大きく配置し、文字と重ねない */
@media (max-width: 700px) {
  .sub-visual {
    background-size: 100% auto;
    background-position: top center;
  }
  /* 写真(縦横比 690:767)のぶんだけ本文を下げる */
  .profile-head .sub-head { padding-top: 111.2vw; }
  /* 写真(縦横比 1382:707)のぶんだけ本文を下げる */
  .policies-head .sub-head,
  .support-head .sub-head { padding-top: 51.2vw; }
  .sub-visual .sub-head .en { padding-top: 1.4em; }
  .bio-list li:nth-child(-n+9) { width: 100%; }
}