/* FirstStage 全体の案内ページ（/about「FirstStageとは」・/school/system「受講のしくみ」）。
   school-flat-v1.css（.sf-*）の上に重ねる。色はサイト共通の変数だけを使い、ライト・ダーク両方に合わせる。
   画面写真の枠と番号の色（#C95054）は、撮影レシピ（capture.mjs）で重ねた番号と同じにする。 */
.fg{--fg-mark:#C95054}
.fg .sf-narrow{margin-inline:auto}
.fg .fg-left{margin-inline:0}
.fg-pc{display:inline}
.fg-small{font-size:.9rem;color:var(--muted);line-height:1.8;max-width:46em}
.fg-textlink{color:var(--coral-text);font-weight:700;text-decoration:none;white-space:nowrap}
.fg-textlink:hover{text-decoration:underline}

/* ファーストビュー */
.fg-name{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:22px 0 0!important;padding:10px 18px;border-radius:var(--r-pill,999px);background:var(--surface-2);color:var(--muted);font-size:.95rem}
.fg-name b{color:var(--ink);font-family:var(--f-title,var(--f-display));letter-spacing:.04em}
.fg-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center}
.fg-hero--split .sf-facts-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.fg-hero-photo{margin:0;border-radius:var(--r-lg,28px);overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:5/4}
.fg-hero-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* 画面写真（ブラウザの枠＋スマホ） */
.fg-shots{position:relative;margin:0;padding:0 0 34px 0}
.fg-browser{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-card)}
.fg-browser-bar{display:flex;gap:6px;padding:9px 12px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.fg-browser-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.fg-browser img,.fg-phone img,.fg-step-shot img{display:block;width:100%;height:auto}
.fg-phone{position:absolute;right:-8px;bottom:0;width:27%;border:5px solid var(--ink);border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-card)}
.fg-shots figcaption{margin-top:14px;font-size:.84rem;color:var(--muted);max-width:68%}

/* 入口ふたつ */
.fg-doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.fg-door{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-top:6px solid var(--fg-door,var(--cta));border-radius:var(--r-md,20px);padding:28px 30px}
.fg-door--make{--fg-door:var(--cta);--fg-door-text:var(--coral-text)}
.fg-door--learn{--fg-door:var(--mint);--fg-door-text:var(--mint-text)}
.fg-door-tag{display:inline-block;align-self:flex-start;font-size:.84rem;font-weight:700;color:var(--fg-door-text);border:1px solid var(--fg-door-text);border-radius:var(--r-pill,999px);padding:2px 12px;margin-bottom:12px!important}
.fg-door h3{font-size:clamp(20px,2vw,24px);margin-bottom:8px}
.fg-door>p{font-size:1rem;color:var(--ink)}
.fg-door-list{list-style:none;margin:4px 0 0;padding:0}
.fg-door-list li{border-top:1px solid var(--line)}
.fg-door-list a{display:flex;flex-direction:column;gap:2px;padding:12px 4px 12px 16px;text-decoration:none;position:relative}
.fg-door-list a:before{content:'';position:absolute;left:2px;top:20px;width:7px;height:7px;border-radius:2px;background:var(--b-main,var(--fg-door))}
.fg-door-list li[class*="brand-"] a:before{background:var(--b-main)}
.fg-door-list b{color:var(--ink);font-size:1rem}
.fg-door-list span{color:var(--muted);font-size:.9rem}
.fg-door-list a:hover b{color:var(--fg-door-text);text-decoration:underline}
.fg-door-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:auto 0 0!important;padding-top:18px}
.fg-door-actions .btn{margin-top:0}
.fg-after{margin-top:22px!important;font-size:.96rem;color:var(--muted);max-width:42em}
.fg-after a{color:var(--coral-text);font-weight:700}
.fg-after .ext{font-weight:400;font-size:.9em}

/* どこから始める？ */
.fg-start{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.fg-start .sf-pick-card:not([class*="brand-"]){--b-main:var(--cta);--b-text:var(--coral-text);--b-tint:var(--surface-2)}

/* 運営 */
.fg-org{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start}
.fg-org h2{font-size:clamp(20px,2.2vw,26px)}
.fg-org-facts{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md,20px);padding:8px 22px}
.fg-org-facts div{padding:12px 0;border-top:1px solid var(--line)}
.fg-org-facts div:first-child{border-top:0}
.fg-org-facts dt{font-size:.84rem;color:var(--muted)}
.fg-org-facts dd{margin:2px 0 0;color:var(--ink);font-size:.95rem;overflow-wrap:anywhere}

/* 4つの場面 */
.fg-flow{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:64px}
.fg-step{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:44px;align-items:center}
.fg-step:nth-child(even){grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr)}
.fg-step:nth-child(even) .fg-step-text{order:2}
.fg-step-no{font-size:.84rem;font-weight:700;letter-spacing:.14em;color:var(--coral-text);margin-bottom:6px!important}
.fg-step h3{font-size:clamp(20px,2.1vw,26px);margin-bottom:10px}
.fg-step-text>p{font-size:1.02rem;color:var(--ink)}
.fg-keys{list-style:none;counter-reset:fgk;margin:4px 0 14px;padding:0;display:grid;gap:8px}
.fg-keys li{counter-increment:fgk;display:flex;align-items:center;gap:10px;font-size:.97rem;color:var(--ink);font-weight:700}
.fg-keys li:before{content:counter(fgk);flex:none;width:26px;height:26px;border-radius:50%;background:var(--fg-mark);color:#fff;font-size:.85rem;line-height:26px;text-align:center}
.fg-step-shot a{display:block;cursor:zoom-in}
.fg-step-shot{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#f3f6f6;box-shadow:var(--shadow-card)}

/* 安心して使えるように */
.fg-safe{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fg-safe li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md,20px);padding:22px 24px}
.fg-safe h3{font-size:1.08rem;margin-bottom:6px}
.fg-safe p{font-size:.97rem;color:var(--muted);margin:0}
.fg-people-courses{margin-top:22px}

/* よくあるご質問 */
.fg-faq{display:grid;gap:10px;margin:8px 0 18px}
.fg-faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm,13px);padding:0 20px}
.fg-faq summary{cursor:pointer;padding:16px 0;font-weight:700;color:var(--ink);list-style-position:inside}
.fg-faq details p{margin:0 0 16px;font-size:1rem;color:var(--ink);max-width:42em}

.fg a:focus-visible,.fg summary:focus-visible{outline:3px solid var(--cta);outline-offset:3px}

@media(max-width:900px){
.fg-hero-grid{grid-template-columns:1fr;gap:36px}
.fg-doors,.fg-org{grid-template-columns:1fr}
.fg-step{grid-template-columns:1fr;gap:20px}
.fg-step:nth-child(even){grid-template-columns:1fr}
.fg-step:nth-child(even) .fg-step-text{order:0}
.fg-flow{gap:52px}
}
@media(max-width:720px){
.fg-pc{display:none}
.fg-hero-photo{aspect-ratio:16/9;border-radius:var(--r-md,20px)}
.fg-door{padding:22px 20px}
.fg-start,.fg-safe{grid-template-columns:1fr}
.fg-hero--split .sf-facts-row{grid-template-columns:1fr}
.fg-phone{right:-4px;width:31%;border-width:4px;border-radius:16px}
.fg-shots figcaption{max-width:64%}
.fg-name{border-radius:var(--r-sm,13px)}
.fg-door-actions .btn{width:100%;justify-content:center}
}