/* 帰国生入試特化コース v2（2026-10-03）
   色・書体は車さんの site.css / kikoku.css のトークンをそのまま使い、作りだけを詰める。
   1 FV の強弱  2 情報の形に合わせた図  3 余白と見出しの段  4 申込ボタンの動き  5 FAQ  6 写真の統一 */

:root{
  --sec-y:56px;          /* 節の上下（SP） */
  --sec-y-pc:96px;       /* 節の上下（PC） */
  --measure:34em;        /* 本文の行の長さ */
  --ph-r:12px;           /* 写真の角 */
  --ph-shadow:0 6px 20px rgba(46,74,94,.12);
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 3 余白と見出しの段 ---------- */
body{font-size:15px;line-height:1.95}
.sec{padding:var(--sec-y) 0}
@media (min-width:768px){.sec{padding:var(--sec-y-pc) 0}}
.ttl{font-size:24px;line-height:1.5;margin-bottom:18px;padding-top:22px}
@media (min-width:768px){.ttl{font-size:32px;margin-bottom:22px}}
.lead{font-size:15px;max-width:30em;margin:0 auto 36px;line-height:1.95}
@media (min-width:768px){.lead{font-size:16px;margin-bottom:44px}}
/* 小見出しは2段だけ：19px（カードの見出し）と 15px（ラベル） */
.why__t,.stage__t,.cq__a,.st__t{font-size:19px;line-height:1.5}
@media (min-width:768px){.why__t,.stage__t,.cq__a{font-size:21px}}
/* 本文は1行34字前後で折る */
.why__text>p,.cq__d,.more__p,.duo__text p,.stc p,.mt__to p{max-width:var(--measure);font-size:15px;line-height:1.95}
.stage__list li{font-size:14.5px}

/* ---------- 1 ファーストビュー ---------- */
.fv__tag{font-size:12.5px;padding:6px 12px}
@media (min-width:768px){.fv__tag{font-size:15px;padding:9px 20px}}
.fv__points{list-style:none;margin:30px auto 0;padding:0;display:grid;gap:8px;max-width:560px}
.fv__points li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:15px;font-weight:700;color:var(--navy);line-height:1.4}
.fv__points .ic{width:22px;height:22px;margin:0;stroke:var(--rose);flex:0 0 auto}
@media (min-width:768px){
  .fv__points{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:12px;margin-top:36px}
  .fv__points li{justify-content:center;font-size:16px;padding:12px 16px}
}
.fv__cta{margin-top:26px}
@media (min-width:768px){.fv__cta{margin-top:30px}}
.fv .tri{padding-top:18px}

/* ---------- 4 申込ボタン：LP006 と同じふわふわ（2.6秒で3px） ---------- */
@keyframes kikoku-cta-float{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.btn-g,.ft__btn{animation:kikoku-cta-float 2.6s ease-in-out infinite;will-change:transform}
.btn-g:active{animation:none}
@media (prefers-reduced-motion:reduce){.btn-g,.ft__btn{animation:none}}
/* スマホの固定バー：予約欄が見えているあいだは引っ込める */
.bar{transition:transform .25s ease}
body.is-near-reserve .bar{transform:translateY(110%)}

/* ---------- 2 図：数字を大きく ---------- */
.bars__v{font-size:22px;letter-spacing:.01em}
@media (min-width:768px){.bars__v{font-size:26px}}
.bars__d{font-size:15px}

/* 2 図：出願できる大学はタグの並び */
.unis{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.unis li{font-size:13px;font-weight:700;line-height:1.3;color:var(--navy);background:var(--rose-bg);border-radius:999px;padding:6px 12px;white-space:nowrap}
.cmp--l td{vertical-align:middle}

/* 2 図：入学時期の3類型は比べる表 */
.cmp3-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px}
.cmp3{width:100%;min-width:640px;border-collapse:separate;border-spacing:0;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 18px rgba(46,74,94,.08);font-size:14px;line-height:1.75}
.cmp3 thead th{background:var(--navy);color:#fff;font-size:16px;font-weight:700;padding:14px 12px;text-align:center;letter-spacing:.06em}
.cmp3 thead th:first-child{background:var(--navy)}
.cmp3 tbody th{width:9.5em;text-align:left;font-size:12.5px;font-weight:700;color:var(--text-2);padding:14px 12px;background:var(--rose-bg);vertical-align:top;line-height:1.6}
.cmp3 td{padding:14px 14px;vertical-align:top;color:var(--text)}
.cmp3 tbody tr+tr th,.cmp3 tbody tr+tr td{border-top:1px solid var(--line)}
.cmp3 td+td{border-left:1px solid var(--line)}
.cmp3 tbody tr:first-child td{font-weight:700;color:var(--navy);font-size:15px}
.cmp3__num td{color:var(--navy);font-weight:700}
.cmp3__num b{font-size:34px;line-height:1;letter-spacing:.01em;color:var(--rose);margin-right:2px;font-variant-numeric:tabular-nums}
@media (min-width:768px){.cmp3-wrap{margin:0;padding:0}.cmp3{font-size:15px}.cmp3__num b{font-size:42px}}

/* 2 図：4つのSTAGE は時間の流れ（縦の線でつなぐ） */
.stages{position:relative;display:grid;gap:0;grid-template-columns:1fr;counter-reset:none}
.stage{grid-template-columns:1fr;background:transparent;box-shadow:none;border-radius:0;overflow:visible;position:relative;padding:0 0 28px 68px}
.stage:last-child{padding-bottom:0}
.stage__photo{display:none}
.stage__body{background:#fff;border-radius:14px;box-shadow:0 4px 18px rgba(46,74,94,.08);padding:18px 18px 20px}
.stage__head{display:block}
.stage__no{position:absolute;left:0;top:6px;width:52px;height:52px;z-index:1}
.stage::before{content:"";position:absolute;left:25px;top:58px;bottom:0;width:2px;background:var(--rose-2);opacity:.5}
.stage:last-child::before{display:none}
.stage__when{margin:0 0 8px;font-size:12px}
.stage__t{margin:0 0 10px}
@media (min-width:900px){
  /* PC は左から右へ。番号の円を1本の線でつなぐ */
  .stages{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .stage{padding:76px 0 0}
  .stage__no{left:50%;top:0;margin-left:-26px}
  .stage::before{left:50%;right:auto;top:25px;bottom:auto;width:calc(100% + 18px);height:2px}
  .stage__body{height:100%}
  .stage__when{display:table;margin:0 auto 10px}
  .stage__t{text-align:center;font-size:19px}
}

/* ---------- 5 よくある質問：開いている質問を分かるように ---------- */
.faq details{transition:box-shadow .2s}
.faq details[open]{box-shadow:0 4px 18px rgba(46,74,94,.10);border-color:transparent}
.faq details[open] summary::after{transform:rotate(-135deg);top:26px}
.faq summary:hover{background:var(--rose-bg)}
.faq summary:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.faq .a{font-size:15px;line-height:1.95}

/* ---------- 6 写真：角・影・切り抜きをそろえる ---------- */
.pt__head img,.school__photo img,.duo__photo img,.card__img img{object-fit:cover;object-position:50% 40%}
.duo__photo{transform:none;padding:0;background:transparent;border-radius:var(--ph-r);box-shadow:var(--ph-shadow);margin:0;aspect-ratio:4/3}
.duo--rev .duo__photo{transform:none}
.duo__photo[style*="aspect-ratio:4/5"]{aspect-ratio:4/5}
.school__photo{border-radius:var(--ph-r);box-shadow:var(--ph-shadow);aspect-ratio:4/3}
.pt{border-radius:var(--ph-r)}
.pt__head{height:170px}
.wor__photo{border-radius:var(--ph-r);border:0;box-shadow:var(--ph-shadow)}

/* ---------- 点検で直したもの（2026-10-03） ---------- */
/* ヘッダーの「よくある質問」：? の円が行の高さに押されて下にずれていた。ナビと同じ線のアイコンに替える */
.hd__faq::before{content:"";width:18px;height:18px;border:0;border-radius:0;font-size:0;line-height:1;background:var(--navy);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.4-1 .9-1 1.7M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.4-1 .9-1 1.7M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat}
.hd__faq{line-height:1;gap:6px}
/* 固定バー：最初の画面の申込ボタンが見えているあいだは出さない（同じボタンが2つ並んでいた） */
body.is-fv-visible .bar{transform:translateY(110%)}
/* FV の3点：タブレット幅では1列（3列だと1つずつ2行に割れていた） */
@media (min-width:768px) and (max-width:1023px){.fv__points{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}
/* 入学時期の比較：スマホは同じ項目を並べたカード、タブレット以上は表 */
.cmp3 tbody th small{display:block;font-weight:400;font-size:11px;margin-top:4px;line-height:1.5}
.cmp3__num small{display:block;font-size:12px;font-weight:400;color:var(--text-2)}
.cmp3-sp{display:grid;gap:14px}
.cmp3-wrap{display:none}
@media (min-width:768px){.cmp3-sp{display:none}.cmp3-wrap{display:block}}
.c3{background:#fff;border-radius:14px;box-shadow:0 4px 18px rgba(46,74,94,.08);overflow:hidden}
.c3__h{background:var(--navy);color:#fff;font-weight:700;font-size:17px;letter-spacing:.08em;text-align:center;padding:12px 16px;margin:0}
.c3 dl{margin:0;padding:6px 18px 16px;display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:0 12px}
.c3 dt{font-size:12px;font-weight:700;color:var(--text-2);padding:12px 0 0;line-height:1.6}
.c3 dd{margin:0;padding:10px 0 0;font-size:14.5px;line-height:1.8;min-width:0}
.c3 dt+dd{border-top:0}
.c3 dl > dt:not(:first-child),.c3 dl > dt:not(:first-child)+dd{border-top:1px solid var(--line)}
.c3__lead{font-weight:700;color:var(--navy)}
.c3__num{color:var(--navy);font-weight:700}
.c3__num b{font-size:34px;line-height:1;color:var(--rose);margin-right:2px;font-variant-numeric:tabular-nums}
.c3__note{font-size:12.5px;color:var(--text-2);margin:2px 4px 0;line-height:1.7}