@charset "UTF-8";
/* =====================================================================
   guide/styles.css ── /guide/（受験ガイド）
   Figma「受験ガイド PC 1280(編集版)」1882:2 / 「受験ガイド SP 393(編集版)」1882:46 に準拠。
   SP は 640px 以下。共通の変数・リセット・ヘッダー/フッターは /sitev2/css/common.css（先に読み込む）
   ※画像は固定サイズの枠（.thumb）に縦横比を保って収める＝カードの高さが画像の実寸に引っ張られない
   ===================================================================== */
.page-guide{--maxw:860px;line-height:1.8}
.page-guide header.site,.page-guide footer.site{--maxw:1080px}
.page-guide section{padding-block:48px}
.bg-sec{background:var(--paper)}
.page-guide h2{display:flex;align-items:center;gap:14px;color:var(--navy);font-weight:900;font-size:23px;line-height:1.4}
.page-guide h2::before{content:"";width:6px;height:28px;background:var(--yellow);flex:0 0 auto}

/* ページヒーロー */
.hero{background:var(--navy);color:#fff;padding-block:40px;text-align:center}
.hero .inner{display:flex;flex-direction:column;align-items:center;gap:10px}
.hero .bc{font-size:11.5px;line-height:1.5;color:#9FB0CC}
.hero .bc a:hover{text-decoration:underline}
.hero h1{font-size:30px;font-weight:900;line-height:1.4}
.hero p{font-size:13.5px;line-height:1.75;color:#C9D2E4}

/* ---- 全体の流れ ---- */
.page-guide .sec-flow{padding-bottom:63px}
.flow5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:24px}
.flow5 .f{background:var(--paper);border-radius:10px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.flow5 .no{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--yellow);font-family:var(--numfont);font-weight:500;font-size:16px;line-height:1;flex:0 0 auto}
.flow5 p{font-size:12px;font-weight:700;color:var(--navy);line-height:1.5}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.tile{position:relative;background:var(--white);border:1.5px solid var(--line);border-top-width:5px;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:6px}
.tile::before{content:"";display:block;height:4px;background:var(--navy)}
.tile .t{font-size:12px;font-weight:900;line-height:1.5;color:var(--sub)}
.tile .big{display:flex;align-items:baseline;gap:2px;color:var(--navy);font-size:13px;font-weight:900;line-height:1.4;white-space:nowrap}
.tile .big .n{font-family:var(--numfont);font-weight:500;font-size:30px;line-height:1.1;letter-spacing:.6px}
.tile .big .n-cost{letter-spacing:2px}
.tile p{font-size:12px;line-height:1.65;color:var(--sub)}
/* 税別メイン＋税込を小さく併記 */
.tile .inc{margin-top:-4px;font-size:12px;font-weight:700;line-height:1.4;color:var(--navy)}
.inc-s{font-size:.85em}
.tiles-note{margin-top:10px;font-size:12px;line-height:1.6;color:var(--sub)}

/* ---- 動画 ---- */
.sec-video .inner{display:flex;flex-direction:column;align-items:center;gap:20px}
.sec-video h2{align-self:stretch}
.video-box{width:280px;height:498px;max-width:100%}
.video-box video{display:block;width:100%;height:100%;object-fit:contain;background:#000;border-radius:8px}
.video-cap{font-size:12.5px;line-height:1.6;color:var(--sub);text-align:center}

/* ---- STEPごとのくわしい手順 ---- */
.step{position:relative;width:449px;max-width:100%;margin:28px auto 0;background:var(--white);border:1.5px solid var(--line);border-radius:10px;padding:24px 22px 20px}
.step + .step{margin-top:31px}
.step > .no{position:absolute;left:16.5px;top:-14.5px;background:var(--navy);color:var(--yellow);border-radius:999px;padding:3px 16px;font-family:var(--numfont);font-weight:500;font-size:13px;line-height:1.5;white-space:nowrap}
.step h3{color:var(--navy);font-weight:900;font-size:17px;line-height:1.5}
.step .cols{display:flex;gap:20px;align-items:flex-start;margin-top:10px}
.step .txt{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px}
.step .txt p,.step .stack > p{font-size:14px;line-height:1.8}
.step .txt .nt{font-size:12px;line-height:1.65;color:var(--sub)}
.step .txt b{font-weight:700}
.cond{background:var(--paper);border-radius:8px;padding:10px 14px;font-size:13px;font-weight:700;line-height:1.65;color:var(--navy)}
.step .txt p + .cond{margin-top:2px}

/* 画像サムネイル（Figmaの点線枠の寸法＝表示サイズ。画像は枠内に縦横比を保って収める） */
.imgs{flex:0 0 auto;display:flex;justify-content:center}
.thumb{width:140px;height:230px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.thumb img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px}
.thumb.ph{background:var(--white);border:2px dashed #B8C0D0;border-radius:8px;color:#7A8398;font-size:11px;font-weight:700;line-height:1.6;text-align:center;padding:6px;overflow-wrap:anywhere}

/* STEP4: 本文2段落 → 画像2枚（中央・横並び）→ 赤帯 → 紺の注意ボックス */
.stack{display:flex;flex-direction:column;margin-top:10px}
.stack > .p2{margin-top:8px}
.imgs.row{gap:29px;margin-top:10px}
.deadline{margin-top:12px;background:var(--red);color:#fff;border-radius:8px;padding:10px 13px 10px 14px;font-size:13.5px;font-weight:900;line-height:1.65}
.rules{margin-top:12px;border:2px solid var(--navy);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.rules .rt{color:var(--navy);font-size:14px;font-weight:900;line-height:1.5}
.rules .chips{display:flex;gap:10px}
.rules .chip{flex:1 1 0;min-width:0;background:var(--navy);border-radius:8px;padding:12px 10px;display:flex;flex-direction:column;gap:4px;text-align:center}
.rules .chip b{color:#fff;font-size:14px;font-weight:900;line-height:1.4}
.rules .chip span{color:#C9D2E4;font-size:11px;line-height:1.5}
.rules .rn{font-size:12px;line-height:1.7;color:var(--sub)}

/* ---- つまずいたときは ---- */
.sec-trouble .inner{display:flex;flex-direction:column;gap:18px}
.qa{background:var(--white);border:1.5px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.q{display:flex;gap:8px;color:var(--navy);font-size:14.5px;font-weight:900;line-height:1.6}
.q::before{content:"Q.";color:var(--red);flex:0 0 auto}
.a{display:flex;gap:8px;font-size:14px;line-height:1.75}
.a::before{content:"A.";color:var(--navy);font-weight:900;line-height:1.7;flex:0 0 auto}

/* ボタン */
.btns{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.pillbtn{display:inline-flex;justify-content:center;align-items:center;border-radius:999px;font-weight:900;font-size:14px;line-height:1.4;padding:12px 30px;text-align:center;max-width:100%}
.pillbtn:hover{opacity:.88}
.pb-red{background:var(--red);color:#fff;box-shadow:0 4px 10px rgba(181,24,9,.3)}
.pb-line{background:var(--white);border:2px solid var(--navy);color:var(--navy)}

/* ---- まだお申込み前の方へ ---- */
.page-guide .pre-cta{background:var(--navy);color:#fff;text-align:center}
.pre-cta .inner{display:flex;flex-direction:column;align-items:center;gap:14px}
.pre-cta .cap{font-size:19px;font-weight:900;line-height:1.5;color:#fff}
.pre-cta .cap + p{font-size:13px;line-height:1.7;color:#C9D2E4}

/* PC で幅が足りないとき（タブレット等） */
@media(max-width:860px){
  .flow5 .f{padding-inline:4px}
}

/* ===== SP（Figma 1882:46 / 393幅） ===== */
@media(max-width:640px){
  .pcbr{display:none}
  .page-guide section{padding-block:38px}
  .page-guide h2{gap:12px;font-size:18px}
  .page-guide h2::before{width:5px;height:24px}

  .hero{padding-block:36px}
  .hero h1{font-size:24px}
  .hero p{font-size:12.5px}

  /* 5ステップ図解は横長ブロック5行（番号丸＋ラベル1行） */
  .page-guide .sec-flow{padding-bottom:53px}
  .flow5{grid-template-columns:1fr;gap:8px}
  .flow5 .f{flex-direction:row;gap:12px;padding:10px 14px;text-align:left}
  .flow5 p{font-size:13px;white-space:nowrap}
  .tiles{grid-template-columns:1fr;gap:12px;margin-top:24px}
  .tiles-note{margin-top:12px}

  .video-box{width:240px;height:427px}

  .sec-steps .inner{display:flex;flex-direction:column;align-items:center;gap:26px}
  .sec-steps h2{align-self:stretch}
  .step,.step + .step{width:100%;margin:0;padding:22px 16px 16px}
  .step > .no{left:12.5px;top:-12.5px;padding:2px 14px;font-size:12px}
  .step h3{font-size:15px}
  .step .cols{flex-direction:column;align-items:stretch;gap:8px;margin-top:8px}
  .step .txt p,.step .stack > p{font-size:13px}
  .step .txt .nt{font-size:11.5px}
  .step .txt p + .cond{margin-top:0}
  .cond{padding:10px 12px;font-size:12.5px}
  .thumb{width:150px;height:250px}

  .stack{margin-top:8px}
  .imgs.row{gap:12px;margin-top:8px}
  .deadline{margin-top:8px;padding:10px 12px;font-size:12.5px}
  .rules{margin-top:8px;padding:12px;gap:8px}
  .rules .rt{font-size:13.5px}
  .rules .chips{flex-direction:column;gap:8px}
  .rules .chip{padding:10px;gap:3px}
  .rules .chip b{font-size:13px}
  .rules .rn{font-size:11.5px}

  .sec-trouble .inner{gap:16px}
  .q{font-size:13.5px}
  .a{font-size:13px}
  .btns{flex-direction:column;gap:10px}
  .pillbtn{width:280px;font-size:13.5px}

  .pre-cta .cap{font-size:16px}
  .pre-cta .cap + p{font-size:12.5px}
}