@charset "UTF-8";
/* ============================================================
   コードステップ デモHP（2026-D03）
   モバイルファースト / ブレークポイント 768px
   配色: ネイビー #1a2b4a / オレンジ #d85a30 / ベース #f0f2f5
============================================================ */

:root {
  --c-navy: #1a2b4a;
  --c-orange: #d85a30;
  --c-orange-dark: #c24a22; /* ホバー用 明度-8%相当 */
  --c-base: #f0f2f5;
  --c-white: #ffffff;
  --c-navy-tint: #e8ecf4;
  --c-orange-tint: #fbeae3;
  --c-text: #1a2b4a;
  --c-text-sub: #5a6b85;
  --shadow-card: 0 4px 24px rgba(26, 43, 74, .08);
  --header-h: 60px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- utility ---------- */
.u-sp-only { display: block; }
.u-pc-only { display: none; }
span.u-sp-only, br.u-sp-only { display: inline; }
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
@media (min-width: 768px) {
  .u-sp-only, span.u-sp-only, br.u-sp-only { display: none; }
  .u-pc-only { display: block; }
  body { font-size: 16px; }
}

/* ---------- layout ---------- */
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.container--wide { max-width: 1200px; }
.container--narrow { max-width: 800px; }

.section { padding: 72px 0; background: var(--c-white); }
.section--feature { padding: 88px 0; background: var(--c-base); }
@media (min-width: 768px) {
  .section { padding: 120px 0; }
  .section--feature { padding: 140px 0; }
}

/* ---------- heading ---------- */
.heading {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 40px;
  word-break: keep-all;    /* 見出しの語中改行を防ぐ（読点・区切りでのみ折返し） */
  overflow-wrap: anywhere;
}
.heading__en {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--c-orange);
  margin-bottom: 12px;
}
.heading-sub {
  text-align: center;
  margin: -24px auto 40px;
  max-width: 720px;
}
@media (min-width: 768px) {
  .heading { font-size: 36px; margin-bottom: 56px; }
  .heading-sub { margin: -36px auto 56px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  transition: background-color .25s, transform .25s, box-shadow .25s;
}
.btn--primary {
  background: var(--c-orange);
  color: var(--c-white);
  padding: 18px 24px;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 4px 12px rgba(216, 90, 48, .3);
}
.btn--primary:hover {
  background: var(--c-orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(216, 90, 48, .35);
}
.btn--secondary {
  background: var(--c-white);
  color: var(--c-navy);
  border: 1.5px solid var(--c-navy);
  padding: 14px 32px;
}
.btn--secondary:hover { background: var(--c-navy-tint); }
@media (min-width: 768px) {
  .btn--primary { width: auto; padding: 20px 48px; }
  .btn--large { padding: 24px 64px; }
}

/* ---------- placeholder (PH) ---------- */
.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: var(--c-navy-tint);
  border: 2px dashed var(--c-text-sub);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.ph__label { font-size: 14px; font-weight: 700; color: var(--c-navy); letter-spacing: .05em; }
.ph__memo { font-size: 10px; line-height: 1.5; color: var(--c-text-sub); }
.ph--3x2 { aspect-ratio: 3 / 2; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--square { aspect-ratio: 1 / 1; }
.ph--circle { aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; }
.ph--mono { background: #dfe3ec; }

/* ---------- header ---------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--c-white);
  box-shadow: 0 1px 8px rgba(26, 43, 74, .08);
  transition: background-color .3s, box-shadow .3s;
}
.header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 0 20px;
  gap: 12px;
}
.header__logo { font-size: 18px; font-weight: 700; color: var(--c-navy); margin-right: auto; }
.header__cta { display: none; } /* SPでは非表示（2026-07-17） */
@media (min-width: 768px) { .header__cta { display: inline-block; } }
.header__cta {
  background: var(--c-orange);
  color: var(--c-white);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background-color .25s;
}
.header__cta:hover { background: var(--c-orange-dark); }

/* FV上の透明ヘッダー（トップのみ・スクロールで解除）
   【2026-07-16再変更】FVが暗い写真背景になったため文字は白（SPドロワー内はネイビーのまま） */
.page-top .header.is-transparent { background: transparent; box-shadow: none; }
.page-top .header.is-transparent .header__logo { color: var(--c-white); }
.page-top .header.is-transparent .header__menu-btn span { background: var(--c-white); }
@media (min-width: 768px) {
  .page-top .header.is-transparent .header__nav-list a { color: var(--c-white); }
}

/* SPナビ（ドロワー） */
.header__menu-btn {
  width: 44px; height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.header__menu-btn span {
  display: block;
  width: 22px; height: 2px;
  background: var(--c-navy);
  transition: transform .3s, opacity .3s, background-color .3s;
}
.header__menu-btn.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.header__menu-btn.is-open span:nth-child(2) { opacity: 0; }
.header__menu-btn.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.header.is-nav-open { background: var(--c-white) !important; }
.header.is-nav-open .header__logo { color: var(--c-navy) !important; }
.header.is-nav-open .header__menu-btn span { background: var(--c-navy) !important; }

.header__nav {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  background: var(--c-white);
  box-shadow: 0 12px 24px rgba(26, 43, 74, .12);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: transform .3s, opacity .3s, visibility .3s;
}
.header__nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.header__nav-list { padding: 8px 0; }
.header__nav-list a {
  display: block;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-navy);
  border-bottom: 1px solid var(--c-navy-tint);
}
.header__nav-list li:last-child a { border-bottom: none; }
.header__nav-list a[aria-current="page"] { color: var(--c-orange) !important; }

@media (min-width: 768px) {
  :root { --header-h: 72px; }
  .header__inner { padding: 0 24px; gap: 32px; }
  .header__menu-btn { display: none; }
  .header__nav {
    position: static;
    background: transparent;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .header__nav-list { display: flex; gap: 28px; padding: 0; }
  .header__nav-list a {
    padding: 4px 0;
    border-bottom: none;
    font-size: 15px;
    color: var(--c-navy);
    position: relative;
  }
  .header__nav-list a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -4px;
    width: 100%; height: 2px;
    background: var(--c-orange);
    transform: scaleX(0);
    transition: transform .25s;
  }
  .header__nav-list a:hover::after,
  .header__nav-list a[aria-current="page"]::after { transform: scaleX(1); }
  .header__cta { font-size: 14px; padding: 12px 20px; }
}

/* ============================================================
   トップページ
============================================================ */

/* ---------- Sec1: FV ---------- */
.fv {
  position: relative;
  background: var(--c-base); /* 【2026-07-16変更】ネイビー→ライトグレー。ネイビーはSec3学習モデルへ移動 */
  padding: calc(var(--header-h) + 32px) 0 40px;
  overflow: hidden;
}
.fv__grid {
  position: absolute;
  right: -10%; bottom: -10%;
  width: 70%; height: 80%;
  background-image:
    repeating-linear-gradient(60deg, rgba(26,43,74,.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(-60deg, rgba(26,43,74,.05) 0 1px, transparent 1px 48px);
  pointer-events: none;
}
.fv__inner { position: relative; z-index: 1; } /* FV装飾より前面 */
.fv__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.fv__catch {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-navy);
  letter-spacing: .02em;
}
.fv__catch-line { display: inline-block; }
.fv__sub {
  color: var(--c-text);
  font-size: 14px; /* 375pxで「〜スクールです。」23字を1行に収める（文字サイズ縮小優先ルール） */
  margin-top: 16px;
  word-break: keep-all;    /* 「未経験」等の語中改行を防ぐ */
  overflow-wrap: anywhere;
}
.fv__cta { margin-top: 24px; text-align: center; }
.fv__micro {
  font-size: 12px;
  color: var(--c-text-sub);
  margin-top: 10px;
}
.fv__illust { order: -1; }
.fv__text { display: contents; } /* SP: キャッチ→イラスト→サブ→CTA の順に並べ替え */
.fv__catch { order: -2; }

@media (min-width: 768px) {
  .fv {
    display: flex;
    align-items: center;
    min-height: 640px;
    max-height: 760px;
    height: calc(100vh - 6px); /* 下端に次セクションの頭を覗かせる */
    padding: var(--header-h) 0 0;
  }
  .fv__inner {
    flex-direction: row;
    align-items: center;
    gap: 48px;
    width: 100%;
  }
  .fv__text { display: block; flex: 0 0 55%; }
  .fv__illust { order: 0; flex: 0 0 calc(45% - 48px); }
  .fv__catch { font-size: 48px; order: 0; }
  .fv__sub { font-size: 18px; margin-top: 24px; }
  .fv__cta { margin-top: 36px; text-align: left; }
  .fv__micro { font-size: 13px; }
}

/* ---------- Sec2: 悩みカード ---------- */
.problems { background: var(--c-white); }
.problems__cards { display: flex; flex-direction: column; gap: 20px; }
.problem-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--c-base);
  border-radius: 12px;
  padding: 24px;
}
.problem-card__illust { flex: 0 0 88px; }
.problem-card h3 { font-size: 18px; line-height: 1.5; margin-bottom: 8px; }
.problem-card p { font-size: 14px; }
.problems__bridge {
  margin-top: 40px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
}
@media (min-width: 768px) {
  .problems__cards { flex-direction: row; gap: 32px; }
  .problem-card {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: left;
    padding: 40px;
  }
  .problem-card__illust { flex: none; width: 245px; }
  .problem-card h3 { font-size: 22px; margin-top: 20px; }
  .problem-card p { font-size: 15px; }
  .problems__bridge { margin-top: 56px; font-size: 18px; }
}

/* ---------- Sec3: 学習モデル図解 ---------- */
/* 【2026-07-16変更】FVのネイビーをこのセクションに移動（悩み=白 → 解決=ネイビー×オレンジの物語） */
.model {
  /* 乗算ブレンド: 全体を暗く保ちつつストライプの明暗差を残す */
  background-color: #24365a;
  background-image: url("../img/bg-model.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
}
.model .heading,
.model .heading-sub { color: var(--c-white); }
@media (max-width: 767px) {
  .model .heading { font-size: 24px; } /* 「コードステップの学習モデル」13字を375pxで1行に収める */
}
.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.flow__node {
  background: var(--c-white);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 24px;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.flow__node--goal { border: 2px solid var(--c-orange); }
.flow__illust { width: 88px; }
.flow__label { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
/* 旗マークは2026-07-16に削除（ゴール強調はオレンジ枠のみ） */
.flow__note { font-size: 13px; color: var(--c-text-sub); line-height: 1.6; }
.flow__arrow {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
}
.flow__arrow-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-orange);
  white-space: nowrap;
}
.flow__arrow-svg--h { display: none; }
.flow__arrow-svg--v { width: 24px; height: 64px; }
@media (min-width: 768px) {
  .flow { flex-direction: row; align-items: stretch; justify-content: center; gap: 0; }
  .flow__node {
    flex: 0 1 300px;
    max-width: 300px;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
  }
  .flow__label { font-size: 22px; }
  .flow__illust { width: 215px; }
  .flow__arrow { flex: 0 1 140px; align-self: center; padding: 0 8px; }
  .flow__arrow-svg--h { display: block; width: 100%; height: 24px; }
  .flow__arrow-svg--v { display: none; }
  .flow__arrow-label { margin-bottom: 8px; }
}

/* ---------- Sec4: 特徴・強み ---------- */
/* 【2026-07-17変更】各理由を白カードに収め、セクション背景を薄ブルーのドット柄に */
.reasons {
  background-color: #e2ebf6; /* 薄オレンジとの境界を明確にするため一段濃く */
  background-image: radial-gradient(rgba(26,43,74,.12) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}
.reason {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--c-white);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 28px 24px;
}
.reason + .reason { margin-top: 32px; }
.reason__illust { width: 70%; margin: 0 auto; }
.reason__num {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--c-orange);
  letter-spacing: .08em;
  line-height: 1;
  margin-bottom: 12px;
}
.reason__text h3 { font-size: 18px; line-height: 1.5; margin-bottom: 12px; word-break: keep-all; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .reason {
    flex-direction: row;
    align-items: center;
    gap: 56px;
  }
  .reason--reverse { flex-direction: row-reverse; }
  .reason { padding: 48px 56px; }
  .reason + .reason { margin-top: 48px; }
  .reason__illust { flex: 0 0 45%; width: auto; margin: 0; }
  .reason__text { flex: 1; }
  .reason__num { font-size: 40px; margin-bottom: 16px; }
  .reason__text h3 { font-size: 22px; }
}

/* ---------- Sec5: タイムライン ---------- */
/* 【2026-07-17変更】背景を薄オレンジに（学習の前進感。濃いオレンジはCTA優先のため使わない） */
/* 【2026-07-17変更】白背景＋四隅の幾何学装飾（ユーザー支給画像） */
.steps {
  background: var(--c-white);
  position: relative;
  overflow: hidden;
}
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}
.steps::before {
  top: 0; left: 0;
  width: 300px; height: 440px;
  background-image: url("../img/deco-steps-tl.png");
  background-position: left top;
  background-size: contain;
}
.steps::after {
  right: 0; bottom: 0;
  width: 300px; height: 460px;
  background-image: url("../img/deco-steps-br.png");
  background-position: right bottom;
  background-size: contain;
}
.steps > .container { position: relative; z-index: 1; }
@media (min-width: 768px) {
  .steps::before { width: 460px; height: 680px; }
  .steps::after { width: 460px; height: 700px; }
}

.timeline { position: relative; padding: 8px 0; }
.timeline__track {
  position: absolute;
  top: 16px; /* バッジ1の上端から開始（丸より上にはみ出さない） */
  bottom: 0;
  left: 26px; /* バッジ中心(28px)と線中心を一致させる */
  width: 4px;
}
.timeline__svg { width: 4px; height: 100%; display: block; }
.timeline__item { position: relative; padding-left: 72px; }
.timeline__item + .timeline__item { margin-top: 32px; }
.timeline__badge {
  position: absolute;
  left: 28px;
  top: 8px;
  transform: translateX(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-navy);
  color: var(--c-white);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .4s;
}
.timeline__badge.is-active { background: var(--c-orange); }
.timeline__card {
  background: var(--c-white);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.timeline__card h3 { font-size: 18px; line-height: 1.5; margin-bottom: 8px; }
.timeline__card p { font-size: 14px; }
@media (min-width: 768px) {
  /* 【2026-07-16変更】左右交互→数字を左端・テキスト右の縦一列レイアウトに統一 */
  .timeline { max-width: 800px; margin: 0 auto; }
  .timeline__track { left: 30px; } /* バッジ中心(32px)と線中心を一致 */
  .timeline__item { padding-left: 104px; min-height: 56px; }
  .timeline__item + .timeline__item { margin-top: 48px; }
  .timeline__badge {
    left: 32px;
    width: 56px; height: 56px;
    font-size: 24px;
  }
  .timeline__card { padding: 40px; }
  .timeline__card h3 { font-size: 22px; }
  .timeline__card p { font-size: 15px; }
  /* 最終ステップ（転職活動）はオレンジ枠のみ維持 */
  .timeline__item--center .timeline__card { border: 2px solid var(--c-orange); }
}

/* ---------- Sec6: 卒業生の声 ---------- */
/* 【2026-07-17】背景にオフィス見上げ写真を白オーバーレイで薄く敷く */
.voice {
  background:
    linear-gradient(0deg, rgba(255,255,255,.88), rgba(255,255,255,.88)),
    url("../img/bg-voice.jpg") center / cover no-repeat;
}

.voice__note {
  text-align: center;
  font-size: 12px;
  color: var(--c-text-sub);
  margin: -24px 0 40px;
}
.voice__cards { display: flex; flex-direction: column; gap: 20px; }
.voice-card {
  background: var(--c-white);
  border: 1px solid var(--c-navy-tint);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.voice-card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.voice-card__head .ph { width: 72px; flex: none; }
.voice-card__name { font-size: 16px; font-weight: 700; }
.voice-card__career {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-sub);
  margin-bottom: 12px;
  line-height: 1.6;
}
.voice-card__arrow { color: var(--c-orange); font-weight: 700; }
.voice-card__text { font-size: 15px; }
@media (min-width: 768px) {
  .voice__note { margin: -36px 0 56px; }
  .voice__cards { flex-direction: row; gap: 32px; }
  .voice-card { flex: 1; padding: 40px 32px; }
  .voice-card__head { flex-direction: column; text-align: center; }
  .voice-card__head .ph { width: 96px; }
  .voice-card__career { text-align: center; }
}

/* ---------- Sec7: 料金プラン抜粋 ---------- */
.price-digest { background: var(--c-base); }
.price-digest__cards { display: flex; flex-direction: column; gap: 24px; }
.plan-card {
  position: relative;
  background: var(--c-white);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 32px 24px 24px;
  text-align: center;
}
.plan-card--recommend { border: 2px solid var(--c-orange); }
.plan-card__badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--c-orange);
  color: var(--c-white);
  font-size: 13px;
  font-weight: 700;
  padding: 4px 20px;
  border-radius: 999px;
}
.plan-card__name { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.plan-card__for { font-size: 14px; color: var(--c-text-sub); margin-bottom: 16px; }
.plan-card__price { line-height: 1.3; margin-bottom: 8px; }
.plan-card__num {
  font-size: 32px;
  font-weight: 700;
  font-feature-settings: "tnum";
  color: var(--c-navy);
}
.plan-card__tax { font-size: 13px; color: var(--c-text-sub); }
.plan-card__split { font-size: 14px; }
.plan-card__term { font-size: 13px; color: var(--c-text-sub); margin-top: 8px; }
.price-digest__foot { margin-top: 40px; text-align: center; }
.price-digest__note { font-size: 12px; color: var(--c-text-sub); margin-top: 16px; }
@media (min-width: 768px) {
  .price-digest__cards { flex-direction: row-reverse; justify-content: center; gap: 32px; } /* PC: スタンダード左・転職保証右 / SP: 転職保証上 */
  .plan-card { flex: 0 1 460px; padding: 48px 40px 40px; }
  .plan-card__num { font-size: 40px; }
  .price-digest__foot { margin-top: 56px; }
  .price-digest__note { font-size: 13px; }
}

/* ---------- Sec8: FAQ ---------- */
.faq__list { border-top: 1px solid var(--c-navy-tint); }
.faq-item { border-bottom: 1px solid var(--c-navy-tint); }
.faq-item__q {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 18px 4px;
  text-align: left;
  transition: background-color .25s;
}
.faq-item__q:hover { background: var(--c-orange-tint); }
.faq-item__mark { color: var(--c-orange); font-weight: 700; flex: none; }
.faq-item__q-text { font-size: 15px; font-weight: 500; flex: 1; line-height: 1.6; }
.faq-item__icon { position: relative; flex: none; width: 16px; height: 16px; }
.faq-item__icon::before, .faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: var(--c-navy);
  transform: translate(-50%, -50%);
  transition: transform .3s;
}
.faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item__q[aria-expanded="true"] .faq-item__icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.faq-item__q[aria-expanded="true"] .faq-item__icon::after { transform: translate(-50%, -50%) rotate(135deg); }
.faq-item__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
}
.faq-item__a-inner {
  background: var(--c-base);
  border-radius: 8px;
  padding: 20px;
  margin: 0 4px 18px;
  font-size: 15px;
}
@media (min-width: 768px) {
  .faq-item__q { padding: 22px 8px; }
  .faq-item__q-text { font-size: 16px; }
  .faq-item__a-inner { padding: 24px 28px; margin: 0 8px 22px; }
}

/* ---------- Sec9: クロージングCTA ---------- */
.closing {
  position: relative;
  /* 【2026-07-17】転職成功イメージの写真背景＋ネイビーオーバーレイ（右に人物・中央テキストの可読性優先） */
  background:
    linear-gradient(90deg, rgba(26,43,74,.94) 0%, rgba(26,43,74,.88) 55%, rgba(26,43,74,.55) 100%),
    url("../img/bg-closing.jpg") left top / auto 165% no-repeat;
  padding: 88px 0;
  overflow: hidden;
  text-align: center;
}
.closing__inner { position: relative; }
.closing__title { color: var(--c-white); font-size: 26px; font-weight: 700; line-height: 1.5;   word-break: keep-all;
  overflow-wrap: anywhere;
}
.closing__text { color: rgba(255,255,255,.85); margin-top: 24px; }
.closing__points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 32px;
}
.closing__points li {
  color: var(--c-white);
  font-size: 14px;
  padding-left: 26px;
  position: relative;
}
.closing__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-60%) rotate(-45deg);
  width: 14px; height: 8px;
  border-left: 2px solid var(--c-white);
  border-bottom: 2px solid var(--c-white);
}
.closing__btn { margin-top: 40px; }
@media (min-width: 768px) {
  .closing { padding: 160px 0; }
  .closing__title { font-size: 36px; }
  .closing__points { flex-direction: row; justify-content: center; gap: 40px; margin-top: 40px; }
  .closing__btn { margin-top: 48px; }
}

/* ---------- footer ---------- */
.footer { background: var(--c-navy); color: var(--c-white); padding: 56px 0 32px; }
.footer__main { display: flex; flex-direction: column; gap: 24px; }
.footer__logo { font-size: 18px; font-weight: 700; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__nav a { font-size: 14px; color: rgba(255,255,255,.85); }
.footer__nav a:hover { color: var(--c-white); text-decoration: underline; }
.footer__company {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.15);
  font-size: 13px;
  color: rgba(255,255,255,.7);
}
.footer__company-title { font-weight: 700; color: rgba(255,255,255,.85); margin-bottom: 8px; }
.footer__demo-note {
  margin-top: 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-white);
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
}
.footer__copy { margin-top: 24px; text-align: center; font-size: 12px; color: rgba(255,255,255,.6); }
@media (min-width: 768px) {
  .footer { padding: 72px 0 40px; }
  .footer__main { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ============================================================
   下層ページ共通
============================================================ */
.page-title {
  position: relative;
  background: var(--c-navy);
  margin-top: var(--header-h);
  height: 160px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.page-title__grid {
  position: absolute;
  right: -10%; top: -20%;
  width: 60%; height: 140%;
  background-image:
    repeating-linear-gradient(60deg, rgba(255,255,255,.04) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.04) 0 1px, transparent 1px 48px);
  pointer-events: none;
}
.page-title .container { position: relative; width: 100%; }
.page-title__h1 { color: var(--c-white); font-size: 28px; font-weight: 700; }
.breadcrumb { margin-top: 8px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumb li { font-size: 13px; color: rgba(255,255,255,.7); }
.breadcrumb li + li::before { content: "/"; margin-right: 4px; }
.breadcrumb a:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .page-title { height: 240px; }
  .page-title__h1 { font-size: 40px; }
}

.lead-block { padding: 48px 0; } /* 上下均等にして白エリアの中央に */
.lead-block__text {
  text-align: center; font-size: 16px; font-weight: 500;
  word-break: keep-all;    /* 「伴走」等の語中改行を防ぐ（句読点・括弧でのみ折返し） */
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .lead-block { padding: 72px 0; }
  .lead-block__text { font-size: 18px; }
}

/* ページ末CTA（下層共通） */
.page-cta {
  background: var(--c-navy);
  padding: 72px 0;
  text-align: center;
}
.page-cta__title { color: var(--c-white); font-size: 24px; font-weight: 700; line-height: 1.5; }
.page-cta__text { color: rgba(255,255,255,.85); margin-top: 16px; }
.page-cta__btn { margin-top: 32px; }
@media (min-width: 768px) {
  .page-cta { padding: 120px 0; }
  .page-cta__title { font-size: 32px; }
  .page-cta__btn { margin-top: 40px; }
}

/* ============================================================
   カリキュラム
============================================================ */

/* ---------- スキルツリー ---------- */
.skilltree {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* SPは「土台→幹→枝→頂点→ゴール」の積み上げ順で読ませる（DOMはPC用にゴールが先頭のためorderで並べ替え） */
@media (max-width: 767px) {
  .skilltree__level--base { order: 1; }
  .skilltree__connector[data-tree-order="2"] { order: 2; }
  .skilltree__level--trunk { order: 3; }
  .skilltree__level--branch { order: 4; }
  .skilltree__connector[data-tree-order="3"] { order: 5; }
  .skilltree__level--top { order: 6; }
  .skilltree__connector[data-tree-order="4"] { order: 7; }
  .skilltree__level--goal { order: 8; }
}
.skilltree__level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.skilltree__connector { line-height: 0; }
.skilltree__connector svg { width: 4px; height: 40px; display: block; }
.tree-node {
  position: relative;
  background: var(--c-white);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  width: 100%;
  max-width: 360px;
}
.tree-node--base {
  background: var(--c-navy);
  color: var(--c-white);
  max-width: 480px;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); /* 台形 */
  border-radius: 0;
  box-shadow: none;
  padding: 18px 32px;
}
.tree-node--trunk { padding-top: 30px; }
.tree-node__tag {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  background: var(--c-navy-tint);
  color: var(--c-text-sub);
  font-size: 11px;
  font-weight: 500;
  padding: 1px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.tree-node--branch {
  max-width: 260px;
  background: transparent;
  box-shadow: none;
  border: 1.5px solid var(--c-navy);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 16px;
  margin-left: 48px; /* SP: インデントで従属表現 */
  position: relative;
  white-space: nowrap; /* 「データベース基礎」等の語中改行を防ぐ（ラベルは10字以内設計） */
}
.tree-node--branch::before {
  content: "";
  position: absolute;
  left: -28px; top: 50%;
  width: 24px; height: 1.5px;
  background: var(--c-text-sub);
}
.tree-node--peak { max-width: 300px; }
.tree-node--goal {
  background: var(--c-orange);
  color: var(--c-white);
  max-width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(216, 90, 48, .3);
}
.tree-node__flag { flex: none; }

@media (min-width: 768px) {
  .skilltree__level--trunk { flex-direction: row; justify-content: center; gap: 24px; }
  .skilltree__level--trunk .tree-node { flex: 0 1 280px; }
  .skilltree__level--branch {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    margin-top: 16px;
  }
  .skilltree__level--branch .tree-node--branch { flex: 0 1 200px; margin-left: 0; }
  .skilltree__level--branch .tree-node--branch::before {
    left: 50%; top: -17px;
    width: 1.5px; height: 16px;
    transform: translateX(-50%);
  }
  .skilltree__connector svg { height: 48px; }
  .tree-node { font-size: 18px; padding: 20px 32px; }
  .tree-node--trunk { padding-top: 36px; }
  .tree-node--base { max-width: 640px; }
}

/* ---------- 月別カリキュラム表（PC） ---------- */
.roadmap__table-wrap { overflow-x: auto; }
.roadmap__table th, .roadmap__table td {
  padding: 18px 20px;
  text-align: left;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.7;
}
.roadmap__table thead th {
  background: var(--c-navy);
  color: var(--c-white);
  font-weight: 700;
  white-space: nowrap;
}
.roadmap__table tbody tr:nth-child(even) { background: var(--c-base); }
.roadmap__month { white-space: nowrap; font-weight: 700; }
.roadmap__month span {
  font-size: 28px;
  color: var(--c-orange);
  font-feature-settings: "tnum";
  margin-right: 2px;
}

/* ---------- 月別カリキュラム（SPカード） ---------- */
.roadmap__cards { display: flex; flex-direction: column; gap: 20px; }
.roadmap-card {
  background: var(--c-white);
  border: 1px solid var(--c-navy-tint);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.roadmap-card__badge {
  display: inline-block;
  background: var(--c-navy);
  color: var(--c-white);
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.roadmap-card__badge span { font-size: 18px; color: #f4b59e; margin-right: 2px; }
.roadmap-card h3 { font-size: 18px; margin-bottom: 12px; }
.roadmap-card dt {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-orange);
  margin-top: 10px;
}
.roadmap-card dd { font-size: 14px; }

/* ---------- 身につくスキル ---------- */
.skills__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}
.skill-tag {
  background: var(--c-navy-tint);
  color: var(--c-navy);
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
  padding: 8px 20px;
}

/* ============================================================
   料金プラン
============================================================ */

/* ---------- PC比較表 ---------- */
.compare__pc { position: relative; }
.compare__table th, .compare__table td {
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
  border-bottom: 1px solid var(--c-navy-tint);
  background: var(--c-white);
  word-break: keep-all;         /* 語中の想定外改行を防ぐ（改行は句読点・括弧前後のみ） */
  overflow-wrap: anywhere;      /* keep-allで収まらない場合の保険 */
}
@media (max-width: 767px) {
  .compare__table th, .compare__table td { font-size: 14px; padding: 14px 12px; }
}
.compare__table tbody th {
  background: var(--c-navy-tint);
  text-align: left;
  font-weight: 500;
  width: 240px;
  font-size: 14px;
}
.compare__table tbody tr:hover td { background: var(--c-orange-tint); }
.compare__group-start th, .compare__group-start td { border-top: 3px solid var(--c-navy-tint); }
.compare__item-col { background: transparent !important; border: none !important; }
.compare__plan-head {
  background: var(--c-white);
  padding: 24px 18px 18px;
  vertical-align: bottom;
  position: relative;
}
.compare__plan-head--recommend { background: var(--c-white); }
.compare__badge {
  display: inline-block;
  background: var(--c-orange);
  color: var(--c-white);
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 16px;
  margin-bottom: 8px;
}
.compare__plan-name { display: block; font-size: 18px; font-weight: 700; }
.compare__plan-price {
  display: block;
  font-size: 28px;
  font-weight: 700;
  font-feature-settings: "tnum";
  line-height: 1.3;
  margin-top: 4px;
}
.compare__plan-price small { font-size: 12px; font-weight: 400; color: var(--c-text-sub); }
.compare__frame {
  position: absolute;
  pointer-events: none;
  /* 位置・サイズはJSで転職保証列に合わせて設定 */
}
.compare__foot {
  margin-top: 32px;
  text-align: center;
  font-size: 14px;
}
.mark-check {
  display: inline-block;
  width: 18px; height: 10px;
  border-left: 3px solid var(--c-orange);
  border-bottom: 3px solid var(--c-orange);
  transform: rotate(-45deg) translateY(-2px);
}
.mark-none { color: #a8b2c4; }

@media (min-width: 768px) {
  .compare__plan-price { font-size: 32px; }
  .compare__foot { margin-top: 40px; font-size: 15px; }
}

/* ---------- SP比較（タブ） ---------- */
.compare__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.compare__tab {
  flex: 1;
  border: 1.5px solid var(--c-navy);
  border-radius: 999px;
  padding: 10px 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-navy);
  background: var(--c-white);
  transition: background-color .25s, color .25s;
}
.compare__tab.is-active { background: var(--c-navy); color: var(--c-white); }
.compare__panel { display: none; }
.compare__panel.is-active { display: block; animation: panelFade .35s ease; }
@keyframes panelFade { from { opacity: 0; } to { opacity: 1; } }
.compare-sp-head {
  background: var(--c-white);
  border-radius: 12px 12px 0 0;
  border: 1px solid var(--c-navy-tint);
  border-bottom: none;
  padding: 20px;
  text-align: center;
}
.compare-sp-head--recommend { border: 2px solid var(--c-orange); border-bottom: none; }
.compare-sp-head--recommend + .compare-sp-table { border: 2px solid var(--c-orange); border-top: none; }
.compare-sp-table {
  background: var(--c-white);
  border: 1px solid var(--c-navy-tint);
  border-top: none;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}
.compare-sp-table th, .compare-sp-table td {
  padding: 12px 12px;
  font-size: 14px;
  line-height: 1.6;
  border-top: 1px solid var(--c-navy-tint);
  vertical-align: middle;
  word-break: keep-all;    /* 語中の想定外改行を防ぐ */
  overflow-wrap: anywhere;
}
.u-nowrap { white-space: nowrap; }
.compare-sp-table th {
  background: var(--c-navy-tint);
  font-weight: 500;
  text-align: left;
  width: 46%;
  letter-spacing: -0.02em; /* 「マンツーマンメンタリング」1行維持用 */
}
.compare-sp-table td { text-align: center; }
.compare-sp-diff {
  display: block;
  font-size: 11px;
  color: var(--c-text-sub);
  margin-top: 2px;
}

/* ---------- 支払い方法 / 給付金 ---------- */
.payment__cols { display: flex; flex-direction: column; gap: 24px; }
.payment-card {
  background: var(--c-base);
  border-radius: 12px;
  padding: 24px;
}
.payment-card--benefit {
  background: var(--c-white);
  border: 1px solid var(--c-navy-tint);
  border-left: 4px solid var(--c-orange);
  border-radius: 8px;
}
.payment-card__title { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.payment-card__list li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 8px;
}
.payment-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .75em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-navy);
}
.payment-card__num { font-size: 22px; color: var(--c-orange); font-weight: 700; }
.payment-card__note { font-size: 12px; color: var(--c-text-sub); margin-top: 12px; }
@media (min-width: 768px) {
  .payment__cols { flex-direction: row; gap: 32px; align-items: stretch; }
  .payment-card { flex: 1; padding: 40px; }
  .payment-card__title { font-size: 22px; }
  .payment-card__num { font-size: 28px; }
  .payment-card__note { font-size: 13px; }
}

/* ---------- 返金・保証条件 ---------- */
.refund { background: var(--c-base); }
.refund-card {
  background: var(--c-white);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.refund-card + .refund-card { margin-top: 20px; }
.refund-card h3 { font-size: 18px; margin-bottom: 12px; }
.refund-card p { font-size: 15px; }
.refund-card__checklist { margin-top: 12px; }
.refund-card__checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
  font-size: 15px;
}
.refund-card__checklist li::before {
  content: "";
  position: absolute;
  left: 2px; top: .55em;
  width: 14px; height: 8px;
  border-left: 2.5px solid var(--c-navy); /* 義務条件なのでネイビー */
  border-bottom: 2.5px solid var(--c-navy);
  transform: rotate(-45deg);
}
.refund-card__note { font-size: 13px; color: var(--c-text-sub); margin-top: 12px; }
@media (min-width: 768px) {
  .refund-card { padding: 40px; }
  .refund-card + .refund-card { margin-top: 24px; }
  .refund-card h3 { font-size: 22px; }
}

/* ============================================================
   本番イラスト（PH差し替え後）
============================================================ */
.fv__illust img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--c-white);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
/* 写真FV版: 白カード載せをやめて角丸＋控えめシャドウのみ */
.fv__illust--photo img {
  padding: 0;
  background: none;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(26,43,74,.16);
  object-fit: cover;
}
.problem-card__illust img,
.flow__illust img,
.reason__illust img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply; /* 白背景PNGを下地カードに馴染ませる */
}
.voice-card img,
.voice__avatar img {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

/* ---------- FV信頼帯 ---------- */
.fv__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 20px;
  justify-content: center;
}
.fv__trust li {
  position: relative;
  padding-left: 22px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  white-space: nowrap;
}
.fv__trust li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 12px; height: 7px;
  border-left: 2.5px solid var(--c-orange);
  border-bottom: 2.5px solid var(--c-orange);
  margin-top: -2px;
}
@media (min-width: 768px) {
  .fv__trust { justify-content: flex-start; }
  .fv__trust li { font-size: 14px; }
}

/* ---------- 給付金 計算例 ---------- */
.subsidy-example {
  margin-top: 20px;
  padding: 20px;
  background: var(--c-base);
  border-radius: 8px;
  text-align: center;
}
.subsidy-example__title { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.subsidy-example__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.subsidy-example__before {
  color: var(--c-text-sub);
  text-decoration: line-through;
  font-size: 15px;
}
.subsidy-example__arrow { color: var(--c-orange); font-weight: 700; }
.subsidy-example__after {
  font-size: 15px;
  font-weight: 700;
}
.subsidy-example__after strong {
  font-size: 28px;
  color: var(--c-orange);
}
.subsidy-example__note { font-size: 12px; color: var(--c-text-sub); margin-top: 8px; }

/* 図解ノードのラベル: 中間幅での語中改行を防ぐ（文字サイズ縮小優先） */
.flow__label {
  font-size: clamp(15px, 2vw, 22px);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.flow__note {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ---------- FV背景写真型（2026-07-16） ---------- */
/* 写真の上に直接白文字を載せる（ネイビーオーバーレイで可読性確保・ディスプレイと人物は見せる） */
.fv--photo {
  background:
    linear-gradient(90deg, rgba(26,43,74,.82) 0%, rgba(26,43,74,.55) 50%, rgba(26,43,74,.2) 100%),
    url("../img/fv-photo.jpg") left center / cover no-repeat;
}
.fv--photo .fv__catch { color: var(--c-white); }
.fv--photo .fv__sub { color: rgba(255,255,255,.9); }
.fv--photo .fv__micro { color: rgba(255,255,255,.75); }
.fv--photo .fv__trust li { color: rgba(255,255,255,.9); }
/* 【2026-07-17】FV右下のネイビー斜め装飾（学習モデルの斜めストライプと呼応） */
.fv--photo::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0; /* CTA・メダルより背面 */
  width: 48%;
  height: 58%;
  background:
    linear-gradient(115deg, transparent 52%, rgba(26,43,74,.4) 52%, rgba(26,43,74,.4) 68%, transparent 68%),
    linear-gradient(115deg, transparent 74%, rgba(15,25,46,.85) 74%);
  pointer-events: none;
}
@media (min-width: 768px) {
  /* PCは全面ボックスにして帯を右側に配置（幅48%ボックスだと帯が途中で切れるため） */
  .fv--photo::after {
    width: 100%;
    height: 100%;
    background:
      linear-gradient(128deg, transparent 76%, rgba(26,43,74,.4) 76%, rgba(26,43,74,.4) 84%, transparent 84%),
      linear-gradient(128deg, transparent 84%, rgba(15,25,46,.85) 84%);
  }
}
.fv--photo .fv__grid { display: none; } /* 写真の上に等角グリッドは重ねない */
.fv--photo .fv__illust { display: none; }
@media (max-width: 767px) {
  /* SPは文字が写真全面に重なるため、ネイビーオーバーレイを強めに */
  .fv--photo {
    background:
      linear-gradient(180deg, rgba(26,43,74,.86) 0%, rgba(26,43,74,.72) 60%, rgba(26,43,74,.55) 100%),
      url("../img/fv-photo.jpg") 60% center / cover no-repeat;
  }
}

/* ---------- FV実績バッジ（月桂樹・デモ用架空数値） ---------- */
.fv__awards {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.fv__award {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.fv__award img {
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
}
@media (min-width: 768px) {
  .fv__award img { width: 124px; height: 124px; }
}
/* リボン付き円形メダル */
.fv__medal {
  position: relative;
  width: 74px;
  height: 74px;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26,43,74,.9); /* ほぼ不透明にしてリボンの透けを防ぐ */
  margin-top: 14px; /* リボンのはみ出し分 */
}
.fv__medal::before,
.fv__medal::after {
  content: "";
  position: absolute;
  top: -14px;
  width: 18px;
  height: 30px;
  background: var(--c-orange);
  clip-path: polygon(0 0, 50% 26%, 100% 0, 100% 100%, 0 100%); /* 切り欠きは上向き */
  z-index: -1;
}
.fv__medal::before { left: 14px; transform: rotate(26deg); }
.fv__medal::after { right: 14px; transform: rotate(-26deg); }
.fv__award-num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-white);
  font-feature-settings: "tnum";
}
.fv__award-num small { font-size: 13px; font-weight: 700; margin-left: 1px; }
.fv__award-label {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}
.fv__award-label sup { font-size: 8px; }
.fv__awards-note {
  margin-top: 10px;
  font-size: 10px;
  color: rgba(255,255,255,.6);
  text-align: center;
}
@media (min-width: 768px) {
  .fv__awards { justify-content: flex-start; gap: 28px; margin-top: 28px; }
  .fv__medal { width: 88px; height: 88px; }
  .fv__medal::before { left: 20px; }
  .fv__medal::after { right: 20px; }
  .fv__award-num { font-size: 28px; }
  .fv__award-num small { font-size: 15px; }
  .fv__award-label { font-size: 12px; }
  .fv__awards-note { text-align: left; font-size: 11px; }
}

/* ---------- 画像CTAボタン（2026-07-16） ---------- */
.btn-img {
  display: inline-block;
  width: 100%;
  max-width: 300px;
  transition: transform .25s, filter .25s;
}
.btn-img img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 16px rgba(216,90,48,.35)); }
.btn-img:hover { transform: translateY(-2px); filter: brightness(1.06); }
@media (min-width: 768px) {
  .btn-img { max-width: 340px; }
  .btn-img--large { max-width: 380px; }
}

/* ---------- ヘッダーロゴマーク（2026-07-17） ---------- */
.header__logo { display: flex; align-items: center; gap: 8px; }
.header__logo-mark { width: auto; height: 26px; }
@media (min-width: 768px) { .header__logo-mark { height: 30px; } }
/* FV上の透明ヘッダー時はネイビーのマークを白に反転 */
.page-top .header.is-transparent .header__logo-mark { filter: brightness(0) invert(1); }
.header.is-nav-open .header__logo-mark { filter: none !important; }