/* 講座一覧 /school：FirstStage 全体の顔としてのフラットな見た目。色はサイト共通の変数（style.css）を使うので、ライト・ダーク両方に合う。
   講座カードだけは、講座ごとのブランド色（.brand-講座スラッグ）で見分けられるようにする。 */
.sf{--b-main:var(--cta);--b-text:var(--coral-text);--b-tint:var(--surface-2);--b-on:#fff}
.sf-wrap{width:min(var(--wrap,1120px),calc(100% - 48px));margin-inline:auto}
.sf-center{text-align:center}
.sf-narrow{max-width:40em;margin-inline:auto}
.sf .sf-narrow{margin-inline:auto} /* .sf p の余白指定に負けて左に寄っていたのを直す */
.sf-section{padding-block:72px}
.sf-alt{background:var(--surface-2)}
.sf h1,.sf h2,.sf h3{color:var(--ink);font-family:var(--f-title,var(--f-display));line-height:1.5;margin:0 0 .6em}
.sf h2{font-size:clamp(24px,2.6vw,34px)}
.sf p{margin:0 0 1.1em}

/* ファーストビュー（飾らず、文字で伝える） */
.sf-hero{padding:56px 0 64px;border-bottom:1px solid var(--line)}
.sf-hero h1{font-size:clamp(32px,4.4vw,52px);margin-bottom:18px}
.sf-lead{max-width:38em;color:var(--ink);font-size:1.05rem}
.sf-facts-row{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:12px}
.sf-facts-row li{background:var(--surface-2);border-radius:var(--r-sm,13px);padding:14px 16px;font-size:.92rem;color:var(--muted);line-height:1.6}
.sf-facts-row b{display:block;color:var(--ink);font-size:1rem}

/* どちらから始める？ */
.sf-pick{padding-block:56px;background:var(--surface-2)}
.sf-pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.sf-pick-card{display:flex;flex-direction:column;gap:4px;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--b-main);border-radius:var(--r-sm,13px);padding:18px 22px;transition:border-color .15s,background .15s}
.sf-pick-card:hover{background:var(--b-tint)}
.sf-pick-q{color:var(--muted);font-size:.95rem}
.sf-pick-a{color:var(--b-text);font-weight:700;font-size:1.15rem}

/* 講座カード */
.sf-list{display:grid;gap:24px}
.sf-course{display:grid;grid-template-columns:1.4fr 1fr;background:var(--surface);border:1px solid var(--line);border-top:6px solid var(--b-main);border-radius:var(--r-md,20px);overflow:hidden;scroll-margin-top:100px}
.sf-course-main{padding:30px 32px}
.sf-course-side{padding:30px 28px;background:var(--b-tint);display:flex;flex-direction:column}
.sf-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px!important}
.sf-status,.sf-for{font-size:.84rem;font-weight:700;border-radius:var(--r-pill,999px);padding:3px 12px;line-height:1.7}
.sf-status{background:var(--b-main);color:var(--b-on)}
.is-coming_soon .sf-status{background:transparent;color:var(--b-text);border:1px solid var(--b-text)}
.is-closed .sf-status{background:var(--surface-2);color:var(--muted)}
.sf-for{background:var(--surface-2);color:var(--muted)}
.sf-course h2{font-size:clamp(22px,2.2vw,28px);margin-bottom:6px}
.sf-course h2 small{display:block;font-size:.84rem;letter-spacing:.08em;color:var(--muted);font-weight:700}
.sf-catch{color:var(--b-text);font-weight:700;font-size:1.05rem}
.sf-summary{font-size:1rem;color:var(--ink)}
.sf-points{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sf-points li{position:relative;padding:6px 0 6px 22px;font-size:.97rem;border-top:1px solid var(--line);color:var(--ink)}
.sf-points li:before{content:'';position:absolute;left:2px;top:15px;width:8px;height:8px;border-radius:2px;background:var(--b-main)}
.sf-price{font-size:clamp(30px,3vw,38px);font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:10px!important;font-family:var(--f-title,var(--f-display))}
.sf-price small{font-size:.85rem;margin-left:4px;color:var(--muted);font-weight:400}
.sf-facts{list-style:none;margin:0 0 10px;padding:0}
.sf-facts li{font-size:.9rem;padding:6px 0;border-top:1px solid var(--line);color:var(--ink)}
.sf-note{font-size:.86rem;color:var(--muted);line-height:1.8}
.sf-note.sf-center{max-width:46em;margin-inline:auto}
.sf-button{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 20px;border-radius:var(--r-pill,999px);background:var(--b-main);color:var(--b-on)!important;text-decoration:none;font-weight:700;transition:filter .15s}
.sf-button:hover{filter:brightness(.92)}
.sf a:focus-visible{outline:3px solid var(--b-main);outline-offset:3px}

/* どの講座も */
.sf-promise{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sf-promise li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md,20px);padding:22px 24px}
.sf-promise b{display:block;color:var(--coral-text);font-size:.9rem;letter-spacing:.1em;margin-bottom:6px}
.sf-promise h3{font-size:1.1rem;margin-bottom:6px}
.sf-promise p{font-size:.97rem;color:var(--muted);margin:0}
.sf-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}

/* 講座ごとのブランド色（各講座ページと合わせる） */
.brand-ai-drive{--b-main:#c8400c;--b-text:#a3330a;--b-tint:#fff6e0;--b-on:#fff}
.brand-web-partner{--b-main:#1f6feb;--b-text:#1554c0;--b-tint:#eef5ff;--b-on:#fff}
[data-theme="dark"] .brand-ai-drive{--b-main:#ff8a4c;--b-text:#ffb27d;--b-tint:#2b2119;--b-on:#24150b}
[data-theme="dark"] .brand-web-partner{--b-main:#6aa8ff;--b-text:#9cc4ff;--b-tint:#1a2333;--b-on:#0d1a33}

@media(max-width:900px){
.sf-course{grid-template-columns:1fr}
.sf-promise{grid-template-columns:1fr}
}
@media(max-width:720px){
.sf-wrap{width:calc(100% - 32px)}
.sf-section{padding-block:52px}
.sf-hero{padding:36px 0 44px}
.sf-facts-row{grid-template-columns:1fr}
.sf-pick-grid{grid-template-columns:1fr}
.sf-course-main,.sf-course-side{padding:22px 20px}
.sf-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.sf-pick-card,.sf-button{transition:none}}