/* LANGX for 英検® LP 共通スタイル（index.html / interview.html）
   変更したら index.html の styles.css?v= を更新すること（キャッシュ対策。interview.html は再生成で反映） */

/* ==== 1. トークン（色・凹み） ==== */
:root {
  /* ページ左右の余白（スマホ20px〜タブレットで広げ、最大56px）と、中身の最大幅1080pxを保つ外枠の幅 */
  --gutter: clamp(20px, 5vw, 56px);
  --wrap-max: calc(1080px + 2 * var(--gutter));
  /* ブランドカラー */
  --red: #ED2F1A;          /* CTA・強調 */
  --red-hover: #C82413;
  --navy: #182F57;         /* 見出し・ロゴ色 */
  --ink: #202226;          /* 本文の濃い文字 */
  --text-sub: #4E5053;     /* 本文 */
  --text-muted: #6B7075;   /* 注記・補足（白・薄いグレー背景でもコントラスト比 4.5 以上） */
  --line: #D9DCDD;         /* 枠線 */
  --pink-bg: #FEF0F0;      /* 薄いピンクのセクション背景 */
  --coral: #F26353;        /* 利用者の声の枠など */
  --line-green: #2CB768;   /* LINE ボタン */
  /* 凹んだ面（スキューモーフィズム）：共同研究バッジ・理由カード上半分・ご利用の流れ／環境・注意事項 */
  --inset-bg: #F3F4F7;
  --inset-shadow: inset 3px 3px 8px rgba(24,47,87,0.12), inset -3px -3px 8px rgba(255,255,255,0.9);
}

/* ==== 2. ベース ==== */
html { scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; font-family: 'Noto Sans JP', 'Inter', 'Hiragino Sans', 'Yu Gothic UI', sans-serif; -webkit-font-smoothing: antialiased; color: var(--ink); }
* { box-sizing: border-box; }
img { max-width: 100%; }

/* ==== 3. レイアウト・ユーティリティ ==== */
/* ファーストビュー・「実は・・・」の2カラム。スクロールバーの有無で列数が変わらないよう、中央揃えの切り替え（920px）と同じ幅で切り替える */
.two-col { grid-template-columns: 1fr; }
.section-divider { height: clamp(36px, 5vw, 64px); line-height: 0; }  /* 区切りのドット模様（中身は app.js が描画）。高さを先に確保して表示ずれを防ぐ */
.container { max-width: var(--wrap-max); margin: 0 auto; padding: clamp(40px, 5.5vw, 64px) var(--gutter); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: clamp(24px, 3.5vw, 36px); }
/* 「購入する」と「LINEで共有」などの2ボタンの組（.cta-pair）は同じ幅・高さにそろえる（画面が狭いときは等幅のまま縮む） */
.cta-pair { align-items: stretch; width: 100%; }
.cta-pair .btn { flex: 1 1 0; max-width: 220px; justify-content: center; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.cta-pair .btn-buy, .cta-pair .btn-white { border: 2px solid transparent; }  /* LINEボタンの枠線（2px）と寸法をそろえる */
@media (max-width: 640px) { .cta-pair .btn-buy { flex-grow: 1.5; } }  /* スマホは購入側（「料金・プランを見る」など文言が長い）を広く、LINEで共有を狭く */
/* 見出しのマーカーと強調数字 */
.hl { background: linear-gradient(transparent 60%, rgba(242,99,83,0.30) 60%); padding: 0 2px; }
.num-accent { margin: 0 1px; font-family: 'Inter', 'Noto Sans JP', sans-serif; font-size: 1.25em; line-height: 1; color: var(--red); }

/* ==== 4. 共通部品（ボタン・見出し・パネル・注記・FAQ・フッター） ==== */
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; text-decoration: none; transition: background 120ms cubic-bezier(0.22,0.61,0.36,1), transform 120ms cubic-bezier(0.22,0.61,0.36,1); }
.btn-buy { padding: 16px 36px; background: var(--red); color: #FFFFFF; font-size: 17px; font-weight: 800; box-shadow: 0 12px 26px -8px rgba(24,47,87,0.45); }
.btn-line { padding: 16px 32px; background: transparent; color: var(--line-green); border: 2px solid var(--line-green); font-size: 16px; font-weight: 700; box-shadow: 0 6px 16px -4px rgba(44,183,104,0.28); }
.btn-white { background: #FFFFFF; color: var(--navy); }
.section-label { font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: 16px; }
.section-title { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 900; color: var(--ink); letter-spacing: -0.01em; }
.block-title { margin: 0 0 24px; font-size: clamp(18px, 2.4vw, 24px); font-weight: 900; color: var(--ink); text-align: center; }
.panel { max-width: 980px; margin: 0 auto; background: var(--inset-bg); border-radius: 20px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--inset-shadow); }
/* interview.html の特長カードで使用（index.html では未使用） */
.feat-card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; padding: 28px; box-shadow: 0 1px 3px rgba(24,47,87,0.08), 0 1px 2px rgba(24,47,87,0.04); transition: box-shadow 220ms cubic-bezier(0.22,0.61,0.36,1), transform 220ms cubic-bezier(0.22,0.61,0.36,1); }
/* 注記のまとまり：左揃え・「※」の後ろで折り返しをそろえる（ぶら下げインデント） */
.notes-block { max-width: 880px; margin: 16px auto 0; font-size: 13px; line-height: 1.7; color: var(--text-muted); }
.notes-block p { margin: 0 0 4px; padding-left: 1em; text-indent: -1em; }
.faq { border-top: 1px solid #E5E7EA; }
.faq:first-of-type { border-top: 0; }
.faq > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; font-size: clamp(15px, 1.8vw, 17px); font-weight: 700; color: var(--ink); line-height: 1.6; }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::before { content: "Q"; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #FFFFFF; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.faq > summary::after { content: ""; flex-shrink: 0; margin-left: auto; margin-top: 8px; width: 10px; height: 10px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform 200ms ease; }
.faq[open] > summary::after { transform: rotate(-135deg); margin-top: 12px; }
.faq > p { margin: 0 0 18px 40px; font-size: 15px; line-height: 1.9; color: var(--text-sub); text-wrap: pretty; }
.faq-group { margin: 28px 0 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: var(--red); }
.footer-link { color: rgba(255,255,255,0.85); text-decoration: none; }
.report-zoom { cursor: zoom-in; }
/* ヘッダーのページ内リンク（特長・料金） */
.nav-link { color: inherit; text-decoration: none; white-space: nowrap; }
.nav-signin { font-size: 13px; font-weight: 600; color: #6B7075; }   /* 購入済みの方向けのログイン導線。購入ボタンより控えめに */
/* スマホのメニュー（ハンバーガー）。PC では使わない */
.nav-toggle { display: none; position: relative; width: 40px; height: 40px; margin-right: -8px; padding: 0; border: 0; background: none; color: var(--navy); cursor: pointer; }
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { position: absolute; left: 10px; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 200ms cubic-bezier(0.22,0.61,0.36,1), opacity 150ms; }
.nav-toggle-bar { top: 19px; }
.nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; left: 0; }
.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); background: var(--navy); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-6px) rotate(-45deg); background: var(--navy); }
.sp-menu { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; padding: 8px var(--gutter) 20px; background: rgba(255,255,255,0.98); border-bottom: 1px solid #D9DCDD; box-shadow: 0 12px 24px -12px rgba(24,47,87,0.25); }
.sp-menu[hidden] { display: none; }
.sp-menu-link { display: block; padding: 14px 4px; border-bottom: 1px solid #ECEEF0; color: var(--navy); font-size: 16px; font-weight: 700; text-decoration: none; }
.sp-menu-buy { justify-content: center; margin: 16px 0 4px; padding: 14px 20px; font-size: 16px; }
.sp-menu-signin { border-bottom: 0; text-align: center; font-size: 14px; font-weight: 600; color: #6B7075; text-decoration: underline; }
/* 「※」付きの箇条書き（注意事項）：「※」の後ろで折り返しをそろえる */
.mark-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.9; color: var(--text-sub); }
.mark-list li { display: flex; gap: 8px; }
.mark-list li > span:first-child { flex-shrink: 0; }
/* 紹介動画の再生ボタン（ポスター画像の中央） */
.video-play { position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(24,47,87,0.82); box-shadow: 0 8px 24px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; transition: transform 200ms ease, background 200ms ease; }

/* ==== 5-0. ファーストビュー ==== */
/* 920px以下は コピー → KV → CTA → 注記 の順に縦積み（PCの配置は 921px 以上のメディアクエリ） */
.hero-grid { max-width: var(--wrap-max); margin: 0 auto; padding: clamp(32px, 5vw, 56px) var(--gutter) clamp(32px, 4vw, 48px); display: grid; grid-template-areas: "copy" "visual" "cta" "note"; gap: clamp(32px, 4vw, 48px); align-items: center; }
.hero-copy { grid-area: copy; }
.hero-visual { grid-area: visual; width: min(100%, 500px); margin-left: auto; }
.hero-cta { grid-area: cta; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: min(100%, 480px); }
.hero-note { grid-area: note; margin: -16px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-muted); text-align: center; }  /* 上のCTAとの間隔を詰める */
.hero-badge img, .hero-visual img { display: block; width: 100%; height: auto; }
/* 共同研究バッジ：凹んだパネルにロゴを入れ、ラベルを上辺に重ねて一つの塊に見せる */
.hero-badge { position: relative; width: min(100%, 480px); margin: 16px 0 40px; padding: 30px 20px 14px; background: var(--inset-bg); border-radius: 16px; box-shadow: var(--inset-shadow); }
.hero-badge-label { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; padding: 6px 18px; border-radius: 999px; background: var(--red); color: #FFFFFF; font-size: 15px; font-weight: 800; letter-spacing: 0.04em; box-shadow: 0 4px 10px -4px rgba(237,47,26,0.5); }
.hero-title { width: min(100%, 480px); margin: 0 0 48px; font-weight: 900; color: var(--navy); line-height: 1.35; letter-spacing: -0.01em; text-align: center; container-type: inline-size; }
/* コピーの左右端を下のロゴの文字端（画像幅の92%）にそろえる。5.33cqi ≒ 0.92 ÷ 文字幅17.35em（実測で微調整）。22px は cqi 非対応ブラウザ用 */
.hero-title-copy { display: block; font-size: 22px; font-size: 5.33cqi; white-space: nowrap; }
.hero-title-logo { display: block; width: 100%; height: auto; margin-top: 12px; }

/* ==== 5-1. 「実は・・・」：一次試験合格から二次試験本番までのタイムライン ==== */
/* 920px以下は 見出し → タイムライン → 本文 の順に縦積み */
.gap-grid { display: grid; grid-template-areas: "head" "visual" "text"; gap: clamp(32px, 5vw, 64px); align-items: center; }
.gap-head { grid-area: head; }
.gap-visual { grid-area: visual; }
.gap-text { grid-area: text; }
.gap-source { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.gap-timeline { max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; }
.gap-step { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: #FFFFFF; color: var(--navy); box-shadow: 0 1px 3px rgba(24,47,87,0.08); }
.gap-step-final { background: var(--red); color: #FFFFFF; box-shadow: 0 10px 22px -10px rgba(237,47,26,0.6); }
.gap-step-label { font-size: 15px; font-weight: 700; }
.gap-step-main { font-size: 24px; font-weight: 900; }
/* 矢印（軸＋三角）と「たった約2週間！」を横並びで中央に。矢印の先端は「本番」ボックスの手前で止める */
.gap-period-row { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 0; }
.gap-arrow { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.gap-arrow::before { content: ""; width: 6px; height: 40px; background: var(--navy); border-radius: 3px 3px 0 0; }
.gap-arrow::after { content: ""; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 16px solid var(--navy); }
.gap-period { margin: 0; font-size: 17px; font-weight: 900; color: var(--navy); white-space: nowrap; }
.gap-period-num { margin: 0 2px; font-family: 'Inter', 'Noto Sans JP', sans-serif; font-size: 48px; line-height: 1; color: var(--red); vertical-align: -6px; }
.gap-copy { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.9; color: var(--navy); }
.gap-copy-strong { display: inline-block; margin-top: 4px; padding-bottom: 10px; font-size: clamp(24px, 2.6vw, 28px); font-weight: 900; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12' viewBox='0 0 32 12'%3E%3Cpath d='M0 6 Q8 -1 16 6 T32 6' fill='none' stroke='%23F26353' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 32px 12px repeat-x; }

/* ==== 5-2. つまずきやすい3つの理由 → AI模擬面接が解決（理由と解決を1枚のカードにして縦につなぐ） ==== */
.pair-grid { display: grid; gap: 28px; margin-top: clamp(24px, 3.5vw, 36px); }
.pair { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #FFFFFF; box-shadow: 0 12px 28px -16px rgba(24,47,87,0.35), 0 1px 3px rgba(24,47,87,0.06); }
.pair-arrow { position: relative; display: flex; justify-content: center; padding-top: 28px; }
.pair-arrow > span { color: var(--red); font-size: 14px; font-weight: 900; letter-spacing: 0.06em; }
.pair-arrow::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 14px solid var(--inset-bg); }  /* 上半分から下へ流れる切り欠き */
.solution { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 10px 18px 24px; text-align: center; }
.solution-img { display: block; width: auto; max-width: 100%; height: clamp(200px, 18vw, 230px); margin-top: auto; object-fit: contain; }  /* カードの一番下に置く */
.solution-text { margin: 0; font-size: clamp(14px, 3.7vw, 18px); font-weight: 900; line-height: 1.5; color: var(--navy); }
.reason { padding: 26px 22px 24px; background: var(--inset-bg); box-shadow: var(--inset-shadow); }  /* カード上半分（理由）だけ凹ませる */
.reason-head { display: flex; align-items: center; gap: 14px; }
.reason-no { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; font-size: 12px; font-weight: 900; line-height: 1.1; color: var(--red); }
.reason-no > span { font-family: 'Inter', sans-serif; font-size: 30px; }
.reason-title { margin: 0; font-size: clamp(20px, 2vw, 22px); font-weight: 900; line-height: 1.4; color: var(--navy); }
.reason-text { margin: 12px 0 0; font-size: clamp(13px, 4vw, 15px); line-height: 1.8; color: var(--text-sub); }  /* 説明文は2行に収まるサイズ */

/* ==== 5-3. 5つの特長：見出し（AI模擬面接／ロゴ／5つの特長）と各特長 ==== */
.ftitle { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; }
.ftitle-pre { flex-basis: 100%; text-align: center; font-size: clamp(22px, 2.8vw, 34px); font-weight: 900; color: var(--navy); }
.ftitle-lead { margin: 14px 0 0; font-size: clamp(22px, 2.8vw, 34px); font-weight: 900; color: var(--navy); }
.ftitle-line { flex-basis: 100%; text-align: center; }  /* PCでも単独の行にする（「5つの特長」） */
.ftitle-badge { display: inline-block; margin: 0 4px; padding: 3px 12px; background: var(--red); color: #FFFFFF; font-size: 1.3em; line-height: 1.2; }
.ftitle-pre .ftitle-badge { font-size: 1.05em; }  /* 「AI模擬面接」は控えめに */
.ftitle-logo { display: block; width: min(90vw, 420px); height: auto; margin-top: 12px; }
/* ロゴのキラキラ：文字の上を光が流れる（ロゴ形状でマスク）＋周りで星がまたたく */
.sparkle { position: relative; display: block; }
.sparkle img { display: block; width: 100%; height: auto; }
.sparkle::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.85) 50%, transparent 65%) -150% 0 / 60% 100% no-repeat; -webkit-mask: url("images/logo_navy.svg") center / 100% 100% no-repeat; mask: url("images/logo_navy.svg") center / 100% 100% no-repeat; animation: logo-shine 3.2s ease-in-out infinite; }
.spark { position: absolute; width: 22px; height: 22px; background: #F5B82E; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: twinkle 2.4s ease-in-out infinite; pointer-events: none; }
.spark.s1 { top: -14px; left: -2%; }
.spark.s2 { top: -18px; right: -3%; width: 28px; height: 28px; animation-delay: 0.8s; }
.spark.s3 { bottom: -16px; left: 44%; width: 18px; height: 18px; animation-delay: 1.6s; }
@keyframes logo-shine { 0%, 30% { background-position: -150% 0; } 70%, 100% { background-position: 250% 0; } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .sparkle::after, .spark { animation: none; } .spark { opacity: 1; } }
/* 5つの特長：1つずつ独立して縦に積む。PCは文章と画面を左右に置き、特長ごとに左右を入れ替える（760px以下は縦1列） */
.f5-list { display: flex; flex-direction: column; gap: clamp(36px, 5vw, 64px); margin-top: clamp(36px, 5vw, 56px); }
.f5 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.f5:nth-child(even) .f5-copy { order: 2; }
.f5-no { display: flex; align-items: baseline; gap: 6px; font-size: 15px; font-weight: 900; color: var(--red); letter-spacing: 0.04em; }
.f5-no b { font-family: 'Inter', sans-serif; font-size: 44px; line-height: 1; }
.f5-h { margin: 10px 0 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 900; line-height: 1.45; color: var(--navy); }
.f5-text { margin: 12px 0 0; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.9; color: var(--text-sub); }
.f5-vis { position: relative; }
.f5-photo { display: block; width: 100%; height: auto; border-radius: 20px; }
.f5-media { position: relative; width: 100%; }
.f5-poster { position: absolute; inset: 0; height: 100%; pointer-events: none; transition: opacity 250ms ease; }
.f5-media.is-playing .f5-poster { opacity: 0; }
/* 結果画面の再現（アプリと同じ暗い配色）。文言は実際の結果画面のもの */
.app { border-radius: 16px; padding: clamp(14px, 2vw, 20px); background: #131C2B; color: #E6EBF2; font-size: 13px; line-height: 1.6; box-shadow: 0 1px 0 rgba(143,185,222,0.2), 0 2px 5px rgba(14,42,71,0.08), 0 24px 40px -18px rgba(14,42,71,0.45); }
.app-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 11px; letter-spacing: 0.2em; color: #C9D2DE; }
.app-card { border-radius: 10px; background: #1A2536; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); padding: 12px 14px; }
.app-card.is-warn { box-shadow: inset 3px 0 0 #E8A93B, inset 0 0 0 1px rgba(232,169,59,0.35); }
.app-card.is-bad { box-shadow: inset 3px 0 0 #F87171, inset 0 0 0 1px rgba(248,113,113,0.35); }
.app-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.app-badge { font-size: 10px; padding: 1px 8px; border-radius: 999px; color: #F3C46B; box-shadow: inset 0 0 0 1px rgba(243,196,107,0.5); }
.is-bad .app-badge { color: #F8A5A5; box-shadow: inset 0 0 0 1px rgba(248,165,165,0.5); }
.app-q { margin: 10px 0; padding: 2px 0; font-weight: 700; display: flex; justify-content: space-between; gap: 10px; align-items: center; transition: box-shadow 200ms; }
.app-sub { font-size: 10px; color: #8C97A8; }
.app-box { border-radius: 8px; background: #111925; padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; transition: box-shadow 200ms; }
.app-box + .app-box { margin-top: 8px; }
.app-box.is-model { background: #1C3B37; }
.app-box.is-model .app-sub { color: #6FD3A4; }
.app-text { font-size: 12px; color: #D5DCE6; }
.app-play { flex: none; display: inline-flex; align-items: center; }
.pbtn { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #3A4558; color: #FFFFFF; }
.pbtn.is-y { background: #F2D129; color: #131C2B; }
.pbtn.is-g { background: #2D8A66; }
.pbtn svg { width: 11px; height: 11px; margin-left: 2px; }
.app-adv { margin: 8px 0 0; font-size: 11.5px; line-height: 1.75; color: #C7CFDA; }
.app-adv strong { color: #FFFFFF; }
.fb-head { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.fb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.fb-box { border-radius: 8px; padding: 8px 10px; font-size: 11px; line-height: 1.6; color: #D5DCE6; }
.fb-box.is-good { background: #1B2B33; box-shadow: inset 0 0 0 1px rgba(74,222,128,0.35); }
.fb-box.is-next { background: #2A2A2C; box-shadow: inset 0 0 0 1px rgba(243,196,107,0.4); }
.fb-ttl { margin-bottom: 4px; font-weight: 700; font-size: 12px; }
.is-good .fb-ttl { color: #4ADE80; }
.is-next .fb-ttl { color: #F3C46B; }
.fb-box ul { margin: 0; padding-left: 1.1em; }
.fb-box li + li { margin-top: 2px; }
@media (max-width: 420px) { .fb-cols { grid-template-columns: 1fr; } }
.app-arrow { margin: 6px 0; text-align: center; font-size: 11px; color: #8C97A8; }
.app-del { color: #F87171; text-decoration: line-through; }
.app-ins { color: #6FD3A4; font-weight: 700; }
/* 合否（特長2） */
.r-title { text-align: center; font-weight: 700; font-size: 15px; }
.r-grade { text-align: center; font-size: 11px; color: #8C97A8; }
.r-main { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 14px 0 12px; }
.r-pass, .r-score { color: #4ADE80; font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; }
.r-score { font-family: 'Inter', sans-serif; font-weight: 800; border-left: 1px solid #3A4558; padding-left: 16px; line-height: 1.2; }
.r-score small { display: block; font-size: 10px; font-weight: 500; color: #8C97A8; }
.r-bar { position: relative; height: 8px; border-radius: 4px; margin: 28px 6px 26px; background: linear-gradient(90deg, #7F1D1D, #B91C1C 40%, #166534 60%, #15803D); }
.r-band { position: absolute; top: -3px; bottom: -3px; left: 48%; width: 22%; border-radius: 4px; background: linear-gradient(90deg, #F87171, #4ADE80); box-shadow: 0 0 0 2px #131C2B; }
.r-line { position: absolute; left: 57%; top: -22px; transform: translateX(-50%); font-size: 10px; white-space: nowrap; }
.r-line::after { content: ""; position: absolute; left: 50%; top: 16px; width: 1px; height: 18px; background: #E6EBF2; }
.r-val { position: absolute; top: 14px; font-size: 10px; color: #C7CFDA; transform: translateX(-50%); }
/* 画面の下の「もう一度」ボタン（画面に重ねず下に置く） */
.f5-vis.js-f5anim { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.f5-vis.js-f5anim .app { flex-basis: 100%; }
.f5-replay { margin-right: auto; display: inline-flex; visibility: hidden; align-items: center; gap: 4px; padding: 6px 12px; border: 0; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; color: var(--navy); background: rgba(255,255,255,0.96); box-shadow: 0 6px 16px -8px rgba(14,42,71,0.4); cursor: pointer; }
.js-f5anim.is-done .f5-replay { visibility: visible; }   /* 場所は最初から空けておき、表示だけ切り替える（出たときにレイアウトがずれない） */
/* 動き（app.js が順に付け外しする）：再生中の波形と光、書き足し、順に現れる */
.wave { display: inline-flex; gap: 2px; align-items: center; height: 14px; margin-right: 6px; opacity: 0; transition: opacity 200ms; }
.wave i { display: block; width: 3px; height: 4px; border-radius: 2px; background: currentColor; }
.is-playing .wave { opacity: 1; }
.is-playing .wave i { animation: f5-wave 0.55s ease-in-out infinite alternate; }
.wave i:nth-child(2) { animation-delay: 0.12s; } .wave i:nth-child(3) { animation-delay: 0.24s; } .wave i:nth-child(4) { animation-delay: 0.06s; }
@keyframes f5-wave { from { height: 3px; } to { height: 14px; } }
.app-q.is-playing, .app-box.is-playing { box-shadow: 0 0 0 2px rgba(242,209,41,0.6); border-radius: 8px; }
.js-f5anim.is-ready .app-del { color: inherit; text-decoration: none; }
.js-f5anim.is-ready .app-ins { display: none; }
.js-f5anim.is-ready .app-ins.is-shown { display: inline; animation: f5-in 400ms cubic-bezier(0.22,0.61,0.36,1) both; }
.js-f5anim.is-ready .app-del.is-shown { color: #F87171; text-decoration: line-through; }
.js-f5anim.is-ready .f5-step { opacity: 0; transform: translateY(6px); transition: opacity 400ms, transform 400ms cubic-bezier(0.22,0.61,0.36,1); }   /* 場所は空けておき、後から現れる（高さが変わらない） */
.js-f5anim.is-ready .f5-step.is-shown { opacity: 1; transform: none; }
/* 特長2：推定レンジのバーが伸び → スコアが出て → 「合格圏内」が飛び出す */
.r-band { transform-origin: left center; }
.js-f5anim.is-ready .r-band { transform: scaleX(0); transition: transform 600ms cubic-bezier(0.22,0.61,0.36,1); }
.js-f5anim.is-ready .r-band.is-shown { transform: none; }
.js-f5anim.is-ready .r-score { opacity: 0; transition: opacity 400ms; }
.js-f5anim.is-ready .r-score.is-shown { opacity: 1; }
.js-f5anim.is-ready .r-pass { opacity: 0; transform: scale(0.5); }
.js-f5anim.is-ready .r-pass.is-shown { animation: f5-pop 550ms cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes f5-pop { 0% { opacity: 0; transform: scale(0.5); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
.r-pass { display: inline-block; }
@keyframes f5-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .f5 { grid-template-columns: 1fr; gap: 16px; }
  .f5:nth-child(even) .f5-copy { order: 0; }
  .f5-no b { font-size: 36px; }
}

/* ==== 5-4. 利用者の声 ==== */
.voice { display: flex; flex-direction: column; align-items: center; }
.voice-bubble { position: relative; align-self: stretch; background: #FFFFFF; border: 1.5px solid var(--coral); border-radius: 22px; padding: 26px 24px; box-shadow: 0 8px 20px -10px rgba(242,99,83,0.35); }
.voice-tail { position: absolute; bottom: -9px; left: 36px; width: 18px; height: 18px; background: #FFFFFF; border-right: 1.5px solid var(--coral); border-bottom: 1.5px solid var(--coral); transform: rotate(45deg); }
.voice-quote { position: absolute; top: -10px; right: 18px; }
.voice-text { margin: 0; font-size: clamp(15px, 1.9vw, 17px); line-height: 1.95; color: var(--navy); font-weight: 600; text-wrap: pretty; }
.voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 28px); }
.voice-meta { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.voice-avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--coral); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.voice-name { font-size: 15px; font-weight: 700; color: var(--red); }

/* ==== 5-5. 料金：プラン選択 ==== */
.plan-campaign { margin: 0 0 18px; text-align: center; font-size: clamp(18px, 2.4vw, 22px); font-weight: 900; color: var(--red); letter-spacing: 0.04em; }
.plan-list { max-width: 560px; margin: 0 auto; padding: 0; border: 0; display: flex; flex-direction: column; gap: 14px; }
.plan-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.plan { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: #FFFFFF; border: 2px solid var(--line); border-radius: 16px; cursor: pointer; transition: border-color 150ms ease, background 150ms ease; }
.plan.is-selected { border-color: var(--red); background: #FFF9F0; }
.plan input { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 22px; height: 22px; margin: 0; border: 2px solid #C9CDD0; border-radius: 50%; background: #FFFFFF; display: grid; place-content: center; cursor: pointer; }
.plan input:checked { border-color: var(--red); }
.plan input:checked::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--red); }
.plan input:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.plan-body { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.plan-name { font-size: 17px; font-weight: 800; color: var(--navy); }
.plan-unit { font-size: 13px; color: var(--text-muted); }
.plan-price { margin-left: auto; font-family: 'Inter', 'Noto Sans JP', sans-serif; font-size: clamp(22px, 3vw, 26px); font-weight: 800; color: var(--navy); white-space: nowrap; }
.plan-tax { margin-left: 4px; font-family: 'Noto Sans JP', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.ref-offer-bar { position: sticky; top: 0; z-index: 51; }  /* 限定特典バー：ヘッダー（top は --offer-h＝このバーの高さ。app.js が設定）と一緒に追従 */
.ref-offer-bar .offer-short { display: none; }
@media (max-width: 640px) {
  .ref-offer-bar { padding: 8px 16px !important; }
  .ref-offer-bar .offer-long { display: none; }   /* スマホは1行に収まる短い文言にする（追従バーの高さを抑える） */
  .ref-offer-bar .offer-short { display: inline; }
}
.plan-bonus { display: table; margin: 4px 0 2px; padding: 2px 8px; border-radius: 6px; background: var(--red); color: #FFFFFF; font-size: 12px; font-weight: 800; vertical-align: 0.15em; white-space: nowrap; }  /* 限定特典：ref 付きの来訪だけ app.js が表示 */
.plan-bonus[hidden] { display: none; }
.plan-unit.is-bonus { color: var(--red); font-weight: 700; }
.plan-badge { position: absolute; top: -13px; left: 16px; padding: 3px 12px; border-radius: 999px; background: var(--red); color: #FFFFFF; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; }
/* 期間限定キャンペーン（先行特典）：期間中だけ app.js が表示・価格を書き換える */
.promo-bar { background: var(--navy); color: #FFFFFF; text-align: center; padding: 10px 16px; font-size: clamp(13px, 1.6vw, 16px); font-weight: 700; line-height: 1.5; }
.promo-bar-off { margin-left: 4px; font-size: 1.25em; font-weight: 900; color: #FFD34D; }
.promo-bar-note { display: inline-block; margin-left: 10px; font-size: 0.85em; font-weight: 500; opacity: 0.92; }
.plan-was { display: block; margin: 0 0 2px; text-align: right; font-family: 'Noto Sans JP', sans-serif; font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--text-muted); text-decoration: line-through; }  /* 元の価格は割引後の左に小さく */
.plan-price.is-promo { color: var(--red); }
.plan-campaign .promo-off { margin-left: 4px; font-size: 1.3em; }
.plan-promo-note { margin: 12px auto 0; max-width: 560px; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.plan-desc { margin: 16px auto 0; text-align: center; font-size: 15px; color: var(--text-sub); }

/* ==== 5-6. ご利用の流れ・ご利用環境 ==== */
.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.step-num { width: 32px; height: 32px; border-radius: 999px; background: var(--navy); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; flex-shrink: 0; }
.item-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.step-text { margin: 0; font-size: 15px; line-height: 1.9; color: var(--text-sub); text-wrap: pretty; }
.env-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.env-text { margin: 0; font-size: 15px; line-height: 1.9; color: var(--text-sub); }

/* ==== 6. ホバー・アクティブ ==== */
.js-intro-video:hover .video-play { transform: scale(1.08); background: var(--red); }
.footer-link:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
.nav-link:hover { color: var(--red); text-decoration: underline; }
.btn-buy:hover { background: var(--red-hover); }
.btn-buy:active { transform: scale(0.98); }
.btn-white:hover { background: var(--pink-bg); }
.btn-white:active { transform: scale(0.98); }
.btn-line:hover { background: rgba(44,183,104,0.10); }
.btn-line:active { transform: scale(0.98); }
.feat-card:hover { box-shadow: 0 6px 16px -4px rgba(24,47,87,0.10), 0 2px 4px rgba(24,47,87,0.05) !important; transform: translateY(-2px); }
.footer-line:hover { opacity: 0.85; }

/* ==== 7. 画面幅ごとの設定 ==== */
/* スマホ（〜640px）：カード列を横スクロール（1枚ずつ吸着）にする。利用者の声・つまずきやすい3つの理由 */

/* タブレット以下（〜920px、1カラム）：ファーストビューと左揃えの見出しブロックを中央揃えにする。
   2カラム前提の左寄せ／右寄せのままだと、コピーが左端・KVが右端に寄って不揃いに見えるため */
@media (max-width: 920px) {
  /* 横スクロールのカルーセル（理由・特長・利用者の声）：タブレットは1.5〜2枚見える幅、スマホは下の640pxで1枚＋次がのぞく幅 */
  .sp-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); gap: 14px; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 20px; scrollbar-width: none; }  /* 画面の端まで広げる */
  .sp-scroll::-webkit-scrollbar { display: none; }
  .sp-scroll > * { flex: 0 0 min(400px, calc(100% - 24px)); scroll-snap-align: start; }
  .hero-copy { text-align: center; }
  .hero-badge, .hero-title, .hero-visual, .hero-cta { margin-left: auto; margin-right: auto; }
  .hero-title { margin-bottom: 0; }
  .hero-visual { margin-top: -28px; margin-bottom: -30px; }  /* 上のロゴ・下のCTAとの間を詰める（KV画像の上下端には透明な余白がある） */
  .stack-center { text-align: center; margin-left: auto; margin-right: auto; }
}
/* ヘッダー：840px 以下は、LANGXとは・特長・「購入済みの方はこちら（サインイン）」をメニューの中へ。料金・購入・メニューボタンを並べる
   （641〜840px では PC の並びが入りきらず、ロゴが縮んだりリンクが切れたりするため） */
@media (max-width: 840px) {
  .nav-pc { display: none; }
  .nav-toggle { display: block; }
  .site-nav-links { gap: 12px !important; }
}
#site-nav a[href="#top"], #site-nav a[href="/"] { flex-shrink: 0; }   /* ロゴは縮めない */
@media (max-width: 640px) {
  #site-nav a[href="#top"] img, #site-nav a[href="/"] img { height: 26px !important; }
  .sp-scroll > * { flex-basis: calc(100% - 24px); scroll-snap-align: center; }  /* 次のカードが少しのぞく幅 */
  .sp-scroll .reason-text { font-size: 14px; }
}


/* PC（921px〜） */
@media (min-width: 921px) {
  .sp-br { display: none; }  /* スマホ用の改行をなくす */
  .two-col { grid-template-columns: repeat(2, 1fr); }
  /* 左列にコピーとCTAを上下に並べ、右のKVに対して縦中央にそろえる */
  .hero-grid { grid-template-areas: "copy visual" "cta visual" ". note"; row-gap: 0; }
  .hero-note { width: min(100%, 500px); margin: -20px 0 0 auto; }  /* PCはKVの真下（KVと同じ幅・右寄せ。画像下端の余白に重ねる） */
  .hero-copy { align-self: end; }
  .hero-cta { align-self: start; }
  /* 「実は・・・」も左列に見出しと本文を並べ、右のタイムラインに対して縦中央にそろえる */
  .gap-grid { grid-template-areas: "head visual" "text visual"; row-gap: 0; }
  .gap-head { align-self: end; }
  .gap-text { align-self: start; margin-top: 20px; }
  .reason-text { font-size: clamp(14px, 1.3vw, 16px); }  /* 3列で列幅が狭いので画面幅に合わせて縮める */
  .pair-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .ftitle { flex-direction: row; column-gap: 20px; row-gap: 10px; }
  .ftitle .ftitle-lead, .ftitle .ftitle-logo { margin-top: 0; }
  .ftitle .ftitle-logo { width: 460px; }
}

/* 料金欄のボタン：文言の幅でプランごとに並びが変わらないよう、狭い画面では常に縦並び */
@media (max-width: 400px) {
  .plan-cta-pair { flex-direction: column; align-items: center; }
}