/*
  並走型・海外大学（院）出願進学サポート LP。
  デザインはTANZAMキャンペーンLPのトークンをそのまま踏襲する。
    #0146BD / #2E86D3 : Tanzamブルー
    #141619           : 本文color
    #F5F7FA           : 背景
    #C9A227 / #B54708 / #FDF3E7 / #EED9BD : 温かみのあるアクセント
  外部フォント・外部アイコン・計測スクリプトは読み込まない。
*/

:root {
  --blue: #0146bd;
  --blue-light: #2e86d3;
  --ink: #141619;
  --ink-sub: #5a6068;
  --ink-mute: #9aa3ad;
  --bg: #f5f7fa;
  --surface: #ffffff;
  --border: #dfe4ec;
  --gold: #c9a227;
  --focus: #b54708;
  --cream: #fdf3e7;
  --cream-border: #eed9bd;
  /* セクション3・吹き出しで使う淡い青。暖色は使わない。 */
  --blue-bg: #eef4fb;
  --blue-chip: #e3effb;
  --blue-border: #d5e4f5;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }
a { color: var(--blue); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  padding: 8px 12px;
  z-index: 10;
}
.skip-link:focus { left: 8px; top: 8px; }

.site-header {
  padding: 14px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo { display: block; width: 118px; height: auto; }
.header-note {
  margin: 0;
  font-size: 0.74rem;
  color: var(--ink-sub);
  line-height: 1.4;
}

main {
  max-width: 1040px;
  margin: 0 auto;
  /* スマホの固定CTAバーに最後の要素が隠れないよう下に余白を取る。 */
  padding: 0 16px 96px;
}

@media (min-width: 768px) {
  main { padding-bottom: 48px; }
}

/* ---------- 共通パーツ ---------- */

.eyebrow {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--blue);
}

h1 {
  margin: 0 0 14px;
  font-size: 1.6rem;
  line-height: 1.45;
}

.accent {
  background: linear-gradient(transparent 62%, rgba(46, 134, 211, 0.28) 62%);
}

/* 見出しの改行位置を制御する。「終わりにしない。」は必ず一行に収める。 */
.nowrap { white-space: nowrap; }

h1 {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* 狭い画面では、1行目（…で、）が折り返さない大きさまで少しだけ詰める。 */
@media (max-width: 430px) {
  h1 { font-size: 1.36rem; }
}

.section {
  margin: 40px 0 0;
  scroll-margin-top: 16px;
}

.section-heading {
  margin: 0 0 12px;
  font-size: 1.2rem;
  line-height: 1.55;
}

.section-lead {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--ink-sub);
}
.section-lead b { color: var(--ink); }

.lead { margin: 0; color: var(--ink-sub); font-size: 0.96rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
}

.pull {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.75;
}

.note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--ink-sub);
  line-height: 1.7;
}

/*
  セクション見出し直下の一行要約。読み飛ばす人でも要点だけは拾えるようにする。
*/
.tagline {
  margin: 0 0 14px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
}

/*
  アイコン。すべて同一仕様のインラインSVG（24px / stroke 1.75 / currentColor）。
  外部ライブラリは読み込まない。装飾なので aria-hidden で読み上げ対象から外す。
*/
.ic {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--blue-light);
}
.ic-row { display: flex; align-items: flex-start; gap: 10px; }

/*
  吹き出し（並走型サポートチームのひとこと）。
  左に「並走」の丸マーク、本文の左下に小さな三角のしっぽを付ける。
  キャラクターは使わない。
*/
.bubble-wrap {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: start;
  margin: 20px 0 0;
}
/* 顔・名前・肩書きを縦に積んだ左の列。しっぽはこの顔を向く。 */
.bubble-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 64px;
}
.bubble-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--ink-mute);
  text-align: center;
}
.bubble-role { font-size: 0.6rem; white-space: nowrap; }
/* 狭い画面では肩書きを落とし、名前だけにする（列が窮屈になるため）。 */
@media (max-width: 430px) {
  .bubble-role { display: none; }
}
/* 吹き出しの主は無料相談を担当するメンター。キャラクターは使わない。 */
.bubble-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.bubble {
  position: relative;
  margin: 0;
  padding: 13px 15px;
  background: var(--blue-bg);
  border: 1px solid var(--blue-border);
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.8;
}
/*
  しっぽ。左の顔に向けて左向きに出す。位置は顔（44px）の中心＝上から22px。
  枠線用と塗り用の三角を1pxずらして重ねる。
*/
.bubble::before,
.bubble::after {
  content: "";
  position: absolute;
  top: 22px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 9px solid transparent;
  border-left: 0;
}
.bubble::before { left: -10px; border-right-color: var(--blue-border); }
.bubble::after { left: -9px; border-right-color: var(--blue-bg); }

/* ---------- CTA ---------- */

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: var(--surface);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/*
  本文中のCTA。白いカードで囲むと「読むもの」に見えてボタンが沈むため、
  背景の上に直接置き、上下に余白を取って区切りとして機能させる。
*/
.cta-block {
  margin: 40px 0;
}
.cta-note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--ink-sub);
  text-align: center;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .cta { max-width: 460px; margin: 0 auto; }
}

/* ---------- ヒーロー ---------- */

.hero { padding: 28px 0 4px; }

.hero-grid { display: grid; gap: 18px; }

.hero-image-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
  background: var(--surface);
}
.hero-image-card img { display: block; width: 100%; }

/*
  スマホでは写真を最後に置く（見出しとCTAをファーストビューに残すため）。
  高さを抑え、写真だけで1画面を占領しないようにする。
*/
.hero-visual { margin-top: 4px; }
.hero-image-card img {
  max-height: 220px;
  object-fit: cover;
  object-position: center 30%;
}

.hero-body p { margin: 0 0 12px; }
.hero-body .hero-copy { font-size: 0.95rem; line-height: 1.9; }
.hero-body .hero-copy b { font-weight: 700; }

.hero-sub {
  margin: 0 0 16px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  font-size: 0.86rem;
  line-height: 1.7;
}

/* TANZAM本体との関係を一行で添える。数字バッジの直下、控えめに。 */
.badges {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
}
.badge {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.badge .ic { width: 20px; height: 20px; margin: 0 auto 2px; display: block; }
.badge-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--ink-sub);
  line-height: 1.4;
}
.badge-number {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.3;
}
.badge-number.small { font-size: 0.92rem; font-weight: 800; line-height: 1.4; }

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
    gap: 28px;
  }
  /* PCでは写真を右カラムへ戻す（DOM順はスマホ優先でテキストが先）。 */
  .hero-visual { grid-column: 2; grid-row: 1; margin-top: 0; position: sticky; top: 16px; }
  .hero-body { grid-column: 1; grid-row: 1; }
  .hero-image-card img { max-height: none; height: 460px; object-fit: cover; object-position: 62% 35%; }
  h1 { font-size: 2rem; }
  .hero .cta { margin: 0; }
}

/* ---------- 悩み ---------- */

.worry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.worry-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue-light);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.9rem;
  line-height: 1.75;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.worry-list .ic { margin-top: 3px; }
@media (min-width: 700px) {
  .worry-list { grid-template-columns: 1fr 1fr; }
}

/* ---------- 3シナリオ（ページの主役） ---------- */

.scenario-band {
  margin: 40px -16px 0;
  padding: 28px 16px 30px;
  background: var(--blue-bg);
  border-top: 1px solid var(--blue-border);
  border-bottom: 1px solid var(--blue-border);
}
.scenario-inner { max-width: 1008px; margin: 0 auto; }

.scenario-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.scenario {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}
/* 本命ルートだけ、金の細い上辺で序列を示す。 */
.scenario.is-first { border-top: 3px solid var(--gold); }

.scenario-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.scenario-if {
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--blue-chip);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue-light);
}
.scenario h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 1.6;
}
.scenario-role {
  margin: 0 0 2px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.scenario p.scenario-prep {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 0.85rem;
  color: var(--ink-sub);
  line-height: 1.75;
}
@media (min-width: 820px) {
  .scenario-list { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 比較表 ---------- */

.compare {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.compare li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.compare li.is-ours { border: 2px solid var(--blue-light); }
.compare h3 {
  margin: 0 0 6px;
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.compare dl { margin: 0; font-size: 0.85rem; line-height: 1.75; }
.compare dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-top: 6px;
}
.compare dd { margin: 0; color: var(--ink-sub); }
@media (min-width: 820px) {
  .compare { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 強み ---------- */

.strengths { display: grid; gap: 12px; margin-top: 4px; }
.strength h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.strength h3 .ic { margin-top: 3px; }
.strength p { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.85; }
.strength p:last-child { margin-bottom: 0; }
.strength ul { margin: 0 0 10px; padding-left: 1.2em; font-size: 0.88rem; line-height: 1.85; }
.strength-num {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}
.scholarship-names {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--ink-sub);
}

.section-figure {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 12px;
  border-radius: 10px;
}

/* ---------- 提携校 ---------- */

.uni-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.uni {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.uni b { font-size: 0.86rem; line-height: 1.5; }
.uni span { font-size: 0.76rem; color: var(--ink-sub); line-height: 1.5; }
.uni-rank {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--blue-chip);
  border: 1px solid var(--blue-border);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
}
@media (min-width: 640px) { .uni-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .uni-list { grid-template-columns: repeat(3, 1fr); } }

.uni-more {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--ink-sub);
  line-height: 1.8;
}

.route-points {
  margin: 14px 0 0;
  padding-left: 1.2em;
  font-size: 0.88rem;
  line-height: 1.85;
}

/* ---------- 1.5 実績ストリップ ---------- */

/*
  ヒーロー直下の薄い帯。左に合格実績のチップ、右に一言の声3つ。
  「実績がある」ことだけを一目で伝える帯なので、PCで約120pxに収める。
*/
.strip {
  margin: 22px -16px 0;
  padding: 14px 16px;
  background: #fff;
  border-top: 1px solid var(--blue-border);
  border-bottom: 1px solid var(--blue-border);
}
.strip-inner { max-width: 1008px; margin: 0 auto; display: grid; gap: 14px; }
.strip-label { margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; color: var(--blue); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
  background: var(--surface);
  border: 1px solid var(--blue-border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.76rem;
  line-height: 1.6;
  white-space: nowrap;
}
.strip-note { margin: 8px 0 0; font-size: 0.72rem; line-height: 1.6; color: var(--ink-sub); }
.strip-quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.strip-quote { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; }
.strip-quote img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.strip-quote p { margin: 0; font-size: 0.78rem; line-height: 1.5; }
.strip-quote b { display: block; font-size: 0.68rem; font-weight: 700; color: var(--ink-sub); }
.strip-more { margin: 8px 0 0; font-size: 0.78rem; font-weight: 700; }

@media (min-width: 880px) {
  .strip-inner { grid-template-columns: 1.05fr 0.95fr; gap: 28px; align-items: center; }
}

/* ---------- 受講生の声 / メンター ---------- */

/* 進学段階ごとの小見出し。声のグループを見分けるためだけの軽い区切り。 */
.voice-group-heading {
  margin: 20px 0 10px;
  padding-left: 10px;
  border-left: 4px solid var(--blue-light);
  font-size: 0.95rem;
  line-height: 1.6;
}

/*
  合格実績。国ごとに1行、ラベルと大学名の2カラム。
  スマホでは縦に積み、ラベルが細い列に潰れないようにする。
*/
.results { margin: 0 0 16px; padding: 16px 18px; }
.results-heading { margin: 0 0 12px; font-size: 1rem; }
.results-list { margin: 0; }
.results-list div {
  display: grid;
  gap: 2px 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.results-list div:first-child { border-top: 0; padding-top: 0; }
.results-list dt {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue-light);
  letter-spacing: 0.02em;
}
/* 奨学金の行だけはラベルも本文と同じインクで、他国の行と区別する。 */
.results-list div.is-scholarship dt { color: var(--ink); }
.results-list dd {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.75;
}
.results-list div.is-scholarship dd { color: var(--ink); font-weight: 700; }
@media (min-width: 620px) {
  .results-list div { grid-template-columns: 7.5em 1fr; align-items: baseline; }
}

.voices { display: grid; gap: 12px; margin-top: 4px; }
@media (min-width: 860px) { .voices { grid-template-columns: 1fr 1fr; } }
/* 学部進学は3人なので、幅が足りるPCでは3列に並べて1段に収める。 */
@media (min-width: 1000px) { .voices-3 { grid-template-columns: repeat(3, 1fr); } }

.voice { display: flex; flex-direction: column; }
.voice-head {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.voice-head img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}
.voice-name { margin: 0; font-size: 0.98rem; line-height: 1.5; }
.voice-meta { margin: 2px 0 0; font-size: 0.78rem; color: var(--ink-sub); line-height: 1.6; }
.voice blockquote {
  margin: 0 0 8px;
  padding-left: 12px;
  border-left: 4px solid var(--gold);
  font-size: 0.87rem;
  line-height: 1.8;
}
.voice-tag {
  margin: 0 0 8px;
  font-size: 0.76rem;
  color: var(--ink-mute);
}
/*
  引用が「何の実例か」を示す小見出し。引用の上に置き、読む前に文脈が分かる
  ようにする（以前は引用の下に「＝…」と置いていて、記号の意味が伝わりにくかった）。
*/
.voice-label {
  /* .voice は縦フレックスなので、align-self を指定しないと横いっぱいに伸びる。 */
  align-self: flex-start;
  margin: 0 0 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--blue-bg);
  border: 1px solid var(--blue-border);
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.6;
}
.voice-link { margin: auto 0 0; font-size: 0.82rem; font-weight: 700; padding-top: 6px; }

.mentors { display: grid; gap: 12px; margin-top: 4px; }
@media (min-width: 700px) { .mentors { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .mentors { grid-template-columns: repeat(4, 1fr); } }

.mentor { text-align: left; }
.mentor img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  margin-bottom: 10px;
}
.mentor h3 { margin: 0 0 6px; font-size: 1rem; }
.mentor p { margin: 0; font-size: 0.84rem; line-height: 1.8; color: var(--ink-sub); }
.mentor .mentor-skill {
  margin-top: 8px;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--ink);
}
.mentor .mentor-skill b { color: var(--blue); }
.mentor .mentor-scores {
  margin-top: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink);
}
/* 元画像が100pxしかないメンターは、拡大でぼやけないよう72pxで出す。 */
.mentor.is-small img { width: 72px; height: 72px; }
/*
  インタビュー記事のあるメンターは、カード全体をリンクにする。
  中身は他のカードと同じ見た目のまま、hoverでわずかに浮かせて押せることを示す。
*/
.mentor.is-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.mentor.is-link:hover {
  transform: translateY(-2px);
  border-color: var(--blue-light);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}
.mentor-more {
  display: block;
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blue);
}
.mentor-flag {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--blue-light);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

/*
  ===== モバイル軽量化（Round 15）=====
  <900px でのみ効く。PC（>=900px）の見た目は一切変えない。
  原稿はHTMLに全て残したまま、スマホでは要約表示に切り替える。
*/
@media (max-width: 899px) {
  /* セクション間の余白を詰める */
  .section { margin-top: 28px; }

  /*
    メンターはスマホでも1カラムのフルカード表示のまま（Round 16 でクライアント決定）。
    Round 15 で入れていた 2カラム圧縮・本文の非表示は撤回した。
  */

  /* 受講生の声：スマホでは各カード1つ目の引用だけ見せる */
  .voice blockquote ~ blockquote { display: none; }

  /* 提携校：名前＋QS順位だけの2カラムチップに畳む */
  .uni-list { grid-template-columns: 1fr 1fr; gap: 6px; }
  .uni { padding: 8px 10px; gap: 0; }
  .uni b { font-size: 0.78rem; line-height: 1.45; }
  .uni span:not(.uni-rank) { display: none; }
  .uni-rank { margin-top: 4px; font-size: 0.68rem; padding: 0 7px; }
  .route-points { line-height: 1.7; }
  .route-points li { margin-bottom: 2px; }

  /* ヒーロー写真をさらに低く（見出しとCTAを1画面に収める） */
  .hero-image-card img { max-height: 170px; }
}

@media (max-width: 899px) {
  /* 余白の詰め（文言は一切削らない、間隔だけ） */
  .card { padding: 14px; }
  .section-heading { font-size: 1.12rem; margin-bottom: 10px; }
  .section-lead { margin-bottom: 12px; line-height: 1.75; }
  .pull { margin-top: 12px; padding: 10px 12px; line-height: 1.7; }
  .worry-list li { padding: 10px 12px; line-height: 1.7; }
  .scenario { padding: 13px; }
  .steps li { padding: 12px; }
  .cta-card, .cta-block { margin-top: 14px; }
  .hero-body p { margin-bottom: 10px; }
  .hero-image-card img { max-height: 140px; }

  /* 受講生の声：写真を小さくして1枚あたりの高さを下げる */
  .voice-head { grid-template-columns: 56px 1fr; gap: 10px; margin-bottom: 8px; }
  .voice-head img { width: 56px; height: 56px; }
  .voice-meta { font-size: 0.72rem; line-height: 1.5; }
  .voice blockquote { font-size: 0.84rem; line-height: 1.7; }

  /* 保護者セクションはクライアント決定により現状維持 */
  .keep-as-is .card { padding: 18px; }
  .keep-as-is .section-heading { font-size: 1.2rem; margin-bottom: 12px; }
  .keep-as-is .section-lead { margin-bottom: 16px; line-height: 1.85; }
}

@media (max-width: 899px) {
  /* 行間をわずかに詰める（1.85/1.8 → 1.7）。文言は削らない。 */
  .strength p, .strength ul, .strength li { line-height: 1.7; }
  .strength h3 { margin-bottom: 6px; }
  .scholarship-names { line-height: 1.7; padding: 8px 10px; }
  .faq-item p { line-height: 1.7; }
  .faq-item summary { padding: 11px 12px; }
  .steps p, .steps h3 { line-height: 1.65; }
  .compare li { padding: 12px; }
  .compare dl { line-height: 1.7; }
  .scenario-band { padding: 22px 16px 24px; }
  .letter-band { padding-top: 24px; padding-bottom: 24px; }
  .strip { padding: 12px 16px; }
  .final { padding: 24px 16px 28px; }
  .voice-link { padding-top: 4px; }
  .voice-tag { line-height: 1.55; }

  .keep-as-is p, .keep-as-is li { line-height: 1.8; }
}

/* ---------- 代表より（手紙） ---------- */

/*
  chat風の吹き出しとは別物として、1枚の手紙に見えるように組む。
  帯は淡い青、中身は白1枚、署名は右下。アイコンは置かない。
*/
.letter-band {
  margin: 40px -16px 0;
  padding: 28px 16px 30px;
  background: var(--blue-bg);
  border-top: 1px solid var(--blue-border);
  border-bottom: 1px solid var(--blue-border);
}
.letter-inner { max-width: 1008px; margin: 0 auto; }
.letter-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.letter-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.letter-eyebrow .logo { width: 84px; }
.letter-eyebrow span {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--blue);
}
.letter-card h2 {
  margin: 0 0 16px;
  font-size: 1.18rem;
  line-height: 1.6;
}
.letter-card p {
  margin: 0 0 14px;
  font-size: 0.92rem;
  line-height: 1.95;
}
.letter-close {
  margin: 0 0 20px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8;
}
.letter-sign {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
/* 代表の顔写真。メンターの丸写真と同じ見え方に揃える。 */
.letter-avatar {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
  border: 2px solid var(--surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}
.letter-sign-name { margin: 0; font-size: 0.88rem; line-height: 1.6; text-align: right; }
.letter-sign-name span {
  display: block;
  color: var(--ink-sub);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}
/*
  署名は実際の手書きをスキャンした透過PNG。傾けたり色を被せたりせず、
  そのままの筆跡を高さ48pxで置く。
*/
.letter-signature {
  display: block;
  height: 48px;
  width: auto;
  margin: 4px 0 0 auto;
}

@media (min-width: 768px) {
  .letter-card { padding: 30px 32px; }
  .letter-card h2 { font-size: 1.35rem; }
}

/* ---------- 保護者 ---------- */

.parent-points {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.parent-points li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.87rem;
  line-height: 1.8;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.parent-points .ic { margin-top: 4px; }
.figure-block { margin: 16px 0 0; }
.figure-block figcaption {
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--ink-sub);
  text-align: center;
  line-height: 1.6;
}
.figure-block img {
  display: block;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

/* ---------- 流れ ---------- */

.steps {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  counter-reset: step;
}
.steps li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.step-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
}
.steps h3 { margin: 0 0 4px; font-size: 0.95rem; line-height: 1.6; }
.steps p { margin: 0; font-size: 0.84rem; color: var(--ink-sub); line-height: 1.8; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* ---------- FAQ ---------- */

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.6;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform 0.15s;
  margin-right: 2px;
}
.faq-item[open] summary::after { transform: rotate(225deg); }
.faq-item p {
  margin: 0;
  padding: 0 14px 13px;
  font-size: 0.85rem;
  color: var(--ink-sub);
  line-height: 1.75;
}
.faq-item p b { color: var(--ink); }

/* ---------- 最終CTA ---------- */

.final {
  margin: 40px -16px 0;
  padding: 32px 16px 36px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 8px;
}
.final-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.final h2 { margin: 0 0 12px; font-size: 1.35rem; line-height: 1.55; }
.final p { margin: 0 0 16px; font-size: 0.92rem; line-height: 1.85; color: var(--ink-sub); }
/* 相談の担当者を、フォームの直前で顔とともに示す。 */
.final-host {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}

/*
  予約カード。
  TimeRex はページ内への埋め込みに対応していないため、
  予約ページを別窓で開くボタンだけを置く。
*/
/*
  予約カードは白い .final 帯の上に載るので、背景を本文背景色にして
  「白の上に白」で輪郭が消えないようにする（影ではなく面で区別する）。
*/
.booking-card {
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  text-align: left;
}

.booking-top {
  display: grid;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.booking-host-name {
  font-size: 0.9rem;
  color: var(--ink-sub);
  line-height: 1.6;
}

.booking-host {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
}

.booking-host img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}

.booking-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.booking-facts li {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink-sub);
  white-space: nowrap;
}

@media (min-width: 740px) {
  .booking-top {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .booking-facts { justify-content: flex-end; }
}

.booking-note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--ink-sub);
  line-height: 1.7;
  text-align: center;
}

.booking-alt {
  margin: 10px 0 0;
  font-size: 0.82rem;
  text-align: center;
}

.booking-alt a { color: var(--ink-sub); }

/* ---------- フッター ---------- */

.site-footer {
  padding: 24px 16px 88px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  text-align: center;
}
@media (min-width: 768px) { .site-footer { padding-bottom: 40px; } }

.footer-org { margin: 0 0 12px; font-size: 0.84rem; line-height: 1.8; }
.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 0 0 12px;
  padding: 0;
  font-size: 0.84rem;
}
.copyright { margin: 0; font-size: 0.78rem; color: var(--ink-sub); }

/* ---------- スマホ固定CTA ---------- */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
}
.sticky-cta .cta { min-height: 48px; font-size: 0.94rem; }
.sticky-cta[hidden] { display: none; }
@media (min-width: 768px) { .sticky-cta { display: none; } }

.strip-inner2{max-width:1040px;margin:0 auto;padding:20px 20px}
.strip-inner2 .strip-label{margin:0 0 12px}
.marquee{overflow:hidden;position:relative}
.marquee:before,.marquee:after{content:"";position:absolute;top:0;bottom:0;width:48px;z-index:1;pointer-events:none}
.marquee:before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.marquee:after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.marquee-track{display:flex;align-items:center;gap:44px;width:max-content;animation:mq 45s linear infinite}
.marquee-track img{height:38px;width:auto;display:block}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:899px){.marquee-track img{height:30px}.marquee-track{gap:32px}}

.hero-photo{position:relative;color:#fff;overflow:hidden;background:#1b2a3a}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:88% 32%}
.hero-overlay-inner{position:relative;max-width:1040px;margin:0 auto;padding:84px 20px 92px}
.hero-overlay-inner>*{max-width:560px}
.hero-photo .hero-eyebrow{color:#bcd7f2;font-weight:700;margin:0 0 14px}
.hero-photo h1{color:#fff;font-size:2.15rem;line-height:1.45;margin:0 0 18px;background:none}
.hero-photo h1 .accent{background:none;color:#fff}
.hero-sub{font-size:1rem;line-height:1.95;margin:0 0 14px;color:#e8eff7;text-shadow:0 1px 8px rgba(0,0,0,.35);background:none;border:none;padding:0;border-radius:0}
.hero-cta-row .cta{box-shadow:0 4px 18px rgba(0,0,0,.35)}
.hero-badges-band{background:var(--bg,#f5f7fa)}
.hero-badges-band ul{max-width:1040px;margin:0 auto;padding:20px 20px 4px}
.sp-only{display:none}
@media (max-width:899px){
.hero-overlay-inner{padding:230px 20px 48px}
.hero-photo h1{font-size:1.26rem;letter-spacing:-.01em}
.hero-sub{font-size:.95rem}
.sp-only{display:inline}
.hero-bg{bottom:auto;height:300px;background-size:cover;background-position:60% 32%;background-repeat:no-repeat}
}

.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,18,30,.94) 0%,rgba(8,18,30,.86) 34%,rgba(8,18,30,.45) 62%,rgba(8,18,30,.15) 100%)}
@media (max-width:899px){.hero-shade{background:linear-gradient(180deg,rgba(8,18,30,.18) 0,rgba(8,18,30,.35) 150px,rgba(11,21,34,.96) 260px,#0b1522 320px,#0b1522 100%)}}
.uni-rank2{display:inline-block;margin-left:8px;font-size:.72rem;font-weight:700;color:#2e86d3;background:#e3effb;border-radius:999px;padding:1px 8px;vertical-align:2px;white-space:nowrap}


/* =========================================================================
   ここから下は移植時の追加分（Issue #2009）。上の元CSSは内容を変えていない。

   1) ユーティリティクラス
      元HTMLは `style="margin-top:18px"` のように style 属性で微調整していた。
      配信時のCSPは `style-src 'self'` で、これは style 属性
      （style-src-attr のフォールバック先）もブロックする。値はそのままに
      クラスへ移した。
   ========================================================================= */
.u-linebreak { display: block; height: .85em; }
.u-mt-16 { margin-top: 16px; }
.u-mt-18 { margin-top: 18px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-56 { margin-top: 56px; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-12 { margin-bottom: 12px; }
.u-m-0 { margin: 0; }
.u-fs-105 { font-size: 1.05rem; }
.u-sup { font-size: 0.7em; vertical-align: super; }
.u-center-note { text-align: center; margin: 8px 0 0; }
.u-link-blue { color: #2e86d3; }
.u-cta-block { text-align: center; margin: 36px 0 8px; }
.u-fineprint { font-size: .78rem; color: #9aa3ad; margin: 10px 0 0; }

/* 2) ファーストビューの背景画像。
      元は hero-bg の style 属性に data URI で入っていた。`?v=` はビルドが
      画像の中身から計算して差し込む（Xserverが静的ファイルへ1年キャッシュを
      上乗せするため、参照側に版番号がないと差し替えが届かない）。 */
.hero-bg { background-image: url('assets/hero.jpg?v=a7fc0b00'); }

/* 3) 同意バナー。画面下に固定し、本文の閲覧を妨げない。 */
.consent {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  max-width: 696px;
  margin: 0 auto;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #dfe4ec;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 60;
}

.consent[hidden] { display: none; }
.consent-title { margin: 0 0 6px; font-size: 0.98rem; }
.consent-desc { margin: 0 0 12px; font-size: 0.82rem; color: #5a6068; }
.consent-actions { display: flex; gap: 10px; }

/* 「同意する」「拒否する」は同格で並べる（片方を目立たせない）。 */
.consent-button {
  flex: 1;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #1f4f8f;
  border-radius: 10px;
  background: #ffffff;
  color: #1f4f8f;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

/* フッターの「Cookie設定」。リンクと同じ見た目にする。 */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* =========================================================================
   MAGEEEK からの指摘への対応（2026-09-10）。

   元CSS（このファイル上部）は受領したHTMLと1文字も違わない状態を保っている。
   新しいビルドが届いたときに diff で突き合わせられるようにするため、元の行は
   編集せず、ここに後から効く上書きルールを足している。
   セレクタの詳細度は元と同じなので、後に書いた分が勝つ。
   ========================================================================= */

/* 指摘1: スマホで大学の順位バッジ（「QS 22位」等）が消えていた。

   元CSSは幅899px以下で `.uni span:not(.uni-rank) { display: none; }` として
   いる。実際のバッジに付いているクラスは `uni-rank2` で、`:not(.uni-rank)` に
   一致してしまうため一緒に隠れていた。元CSSのコメントが
   「提携校：名前＋QS順位だけの2カラムチップに畳む」なので、順位は出す意図で
   あることは明らかである。隠す対象から外して元の意図に戻す。 */
@media (max-width: 899px) {
  .uni span.uni-rank2 { display: inline-block; }
}

/* 指摘2: パソコンで担当者の文が「担当しま／す。」と途中で折り返していた。

   元CSSは幅740px以上で `.booking-top` を左右2列（`minmax(0, 1fr) auto`）にし、
   右列の `.booking-facts`（実績のチップ）を右寄せにしている。チップが横幅を
   取りすぎて、左列の文が1行に収まらなくなっていた。

   縦に積む案を採用した（チップを小さくする案・文を短くする案と並べて比較し、
   文言と文字サイズを変えずに済むこの案をユーザーが選択）。文は1行に収まり、
   カードの高さは約43px 高くなる。幅740〜1000px ではみ出しが無いことを確認済み。 */
@media (min-width: 740px) {
  .booking-top { grid-template-columns: 1fr; }
  .booking-facts { justify-content: flex-start; }
}

/* 指摘1の続き: スマホで順位バッジの位置がカードごとにばらついていた。

   バッジ（`uni-rank2`）は大学名と同じ行の中に置かれているため、表示位置が
   大学名の長さで決まってしまう。名前の最後の行が短い大学ではその右隣に、
   名前が行いっぱいの大学では次の行に来る。実測では位置が6通りに散らばって
   いた。

   案Bをユーザーが選択した（比較用HTMLで現状・案A・案Bを並べて提示）。
   バッジを大学名と同じ行から出して独立した行にし、カードの下端へ寄せる。
   これで左端が揃い、横に並ぶ2枚のバッジの高さも揃う。

   スマホ幅（899px以下）のときだけ効かせるので、パソコンでの見え方は変わらない。
   一覧全体の高さは現状より約84px 高くなる。 */
@media (max-width: 899px) {
  .uni b {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    width: 100%;
  }
  /* 上に余白を寄せてバッジをカードの下端へ落とす。 */
  .uni span.uni-rank2 { margin: auto 0 0; }
}

/* 受講生の声のカード幅。

   カードは `figure` 要素で、ブラウザが既定で左右40pxの余白を付ける。
   LP側の `.card` はこれを打ち消していないため、カードが入るべき枠より
   左右40pxずつ内側に縮んでいた。実測では、学部進学の3枚並びが328pxの枠に
   対して248px、大学院進学の2枚並びが498pxの枠に対して418pxしかなく、
   カードの間隔が不ぞろいに見え、文字の入る幅も足りず、写真が名前の横では
   なく本文の中ほどに浮いて見えていた。受領した元HTMLの時点で同じ症状で、
   元HTMLと公開版を同じ幅で測って数値が一致することを確認済み。

   `margin` を一括で0にすると `figure` の既定の上下余白（1em）まで消えて
   縦の間隔が変わるため、左右だけを落とす `margin-inline` を使う。

   保護者の声のカード（`.section.keep-as-is` の中にある単独の `.voice`）は
   今の幅のまま残すというユーザーの決定により、`.voice` 単独ではなく
   `.voices` の中のカードだけを対象にする。スマホでも同じ症状が出ている
   ので、画面幅の条件は付けない。 */
.voices .voice { margin-inline: 0; }