:root { --navy:#102247; --navy-2:#173467; --ink:#15213a; --muted:#667085; --line:#dce3ee; --wash:#f4f7fb; --coral:#ed675e; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",sans-serif; line-height:1.8; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.section-shell { width:min(1120px,calc(100% - 40px)); margin-inline:auto; }
.site-header { height:76px; padding:0 max(24px,calc((100% - 1120px)/2)); display:flex; align-items:center; gap:34px; border-bottom:1px solid #e7ebf1; position:sticky; top:0; z-index:20; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:10px; font-weight:750; letter-spacing:.04em; color:var(--navy); font-size:18px; margin-right:auto; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; color:#fff; background:var(--navy); font-family:Georgia,serif; }
nav { display:flex; gap:28px; font-size:14px; font-weight:600; }
nav a:hover,.footer-inner a:hover { color:var(--coral); }
.header-contact { padding:9px 17px; background:var(--navy); color:#fff; border-radius:7px; font-size:13px; font-weight:700; }
.hero { min-height:650px; padding-block:100px 92px; display:grid; grid-template-columns:1.22fr .78fr; gap:84px; align-items:center; }
.eyebrow,.section-kicker { color:var(--coral); font-weight:750; letter-spacing:.14em; font-size:12px; margin:0 0 16px; }
.hero h1 { margin:0; color:var(--navy); font-size:clamp(44px,6.2vw,76px); line-height:1.16; letter-spacing:-.035em; }
.hero h1 span { color:var(--navy-2); font-size:.65em; }
.hero-lead { max-width:700px; color:#465269; font-size:17px; margin:28px 0 32px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { min-height:50px; padding:11px 22px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; font-weight:700; font-size:14px; transition:.2s ease; }
.button:hover { transform:translateY(-1px); }
.primary { background:var(--navy); color:#fff; }
.secondary { color:var(--navy); border:1px solid #bdc9d9; background:#fff; }
.small-note { font-size:12px; color:#788396; margin:15px 0 0; }
.hero-panel { background:var(--navy); color:#fff; border-radius:18px; padding:44px 38px 36px; box-shadow:0 24px 50px rgba(16,34,71,.17); position:relative; overflow:hidden; }
.hero-panel:after { content:""; position:absolute; width:220px; height:220px; right:-110px; top:-110px; border:1px solid rgba(255,255,255,.22); border-radius:50%; }
.panel-label { font-size:10px; letter-spacing:.18em; color:#aabbd8; font-weight:700; }
.hero-panel h2 { font-size:27px; line-height:1.45; margin:12px 0 26px; }
.feature-list,.course-items { list-style:none; padding:0; margin:0; }
.feature-list li,.course-items li { display:flex; gap:11px; align-items:flex-start; padding:10px 0; }
.check { flex:0 0 21px; width:21px; height:21px; border-radius:50%; display:inline-grid; place-items:center; background:#e7effb; color:var(--navy); font-size:12px; font-weight:900; margin-top:3px; }
.panel-caution { margin:25px 0 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.18); font-size:12px; color:#c3cee0; }
.intro { padding:84px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 2fr; gap:90px; }
.intro h2,.section-heading h2 { color:var(--navy); font-size:clamp(30px,4vw,45px); line-height:1.3; margin:0; letter-spacing:-.02em; }
.intro-copy { color:#4c586e; font-size:16px; }
.intro-copy p:first-child { margin-top:0; }
.course-section,.terms-section { background:var(--wash); padding:96px 0; }
.section-heading { text-align:center; max-width:720px; margin:0 auto 50px; }
.section-heading.left { text-align:left; margin-left:0; }
.section-heading > p:last-child { color:var(--muted); margin-top:14px; }
.course-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.course-card { background:#fff; border:1px solid #d9e1eb; border-radius:14px; padding:38px; position:relative; box-shadow:0 10px 30px rgba(20,40,75,.06); }
.course-card.featured { border:2px solid var(--navy); }
.featured-label { position:absolute; right:22px; top:-14px; background:var(--navy); color:#fff; border-radius:999px; padding:5px 14px; font-size:11px; font-weight:700; }
.course-tag { color:var(--coral); font-size:12px; font-weight:700; margin:0; }
.course-top h3 { font-size:28px; color:var(--navy); margin:8px 0 22px; }
.price-list { margin:0; border-top:1px solid var(--line); }
.price-list > div { display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); }
.price-list dt { font-size:14px; color:#5c687c; }
.price-list dd { margin:0; white-space:nowrap; }
.price-list strong { font-size:29px; letter-spacing:-.03em; color:var(--navy); }
.term-total { background:#eef3fa; padding:11px 14px; border-radius:6px; text-align:center; font-size:13px; margin:18px 0; }
.course-items { margin:15px 0 22px; color:#4c586e; font-size:14px; }
.payment-chip { margin:0; border:1px solid #cfd8e6; border-radius:6px; padding:9px 12px; font-size:12px; text-align:center; color:#4f5d73; font-weight:650; }
.course-notes { font-size:12px; color:#687388; margin-top:26px; }
.course-notes p { margin:5px 0; }
.details,.faq,.legal { padding:96px 0; }
.detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.detail-grid article { border-top:3px solid var(--navy); background:#fff; padding:28px 24px; box-shadow:0 8px 24px rgba(20,40,75,.07); }
.detail-grid span { color:var(--coral); font-size:11px; font-weight:800; letter-spacing:.1em; }
.detail-grid h3 { color:var(--navy); margin:8px 0; font-size:20px; }
.detail-grid p { color:#59667b; font-size:14px; margin:0; }
.terms-grid { display:grid; grid-template-columns:repeat(2,1fr); background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.terms-grid article { padding:27px 30px; border-bottom:1px solid var(--line); }
.terms-grid article:nth-child(odd) { border-right:1px solid var(--line); }
.terms-grid h3 { color:var(--navy); font-size:16px; margin:0 0 6px; }
.terms-grid p { color:#59667b; font-size:13px; margin:0; }
.faq-list { border-top:1px solid var(--line); }
.faq-list details { border-bottom:1px solid var(--line); padding:0 6px; }
.faq-list summary { cursor:pointer; font-weight:700; color:var(--navy); padding:23px 42px 23px 0; list-style:none; position:relative; }
.faq-list summary:after { content:"＋"; position:absolute; right:5px; color:var(--coral); }
.faq-list details[open] summary:after { content:"−"; }
.faq-list details p { margin:0; padding:0 42px 25px 0; color:#58647a; font-size:14px; }
.disclaimer { background:#fff3f0; border-block:1px solid #f3d6d1; }
.disclaimer-inner { padding-block:34px; display:flex; gap:20px; align-items:flex-start; }
.disclaimer-icon { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; border-radius:50%; background:var(--coral); color:#fff; font-weight:800; }
.disclaimer h2 { font-size:17px; margin:0; color:#7c332e; }
.disclaimer p { margin:4px 0 0; color:#7b5752; font-size:13px; }
.legal-table { margin:0; border-top:2px solid var(--navy); }
.legal-table > div { display:grid; grid-template-columns:240px 1fr; border-bottom:1px solid var(--line); }
.legal-table dt { background:#f5f7fa; padding:18px 20px; color:var(--navy); font-weight:700; font-size:13px; }
.legal-table dd { margin:0; padding:18px 24px; color:#4d596e; font-size:13px; }
.legal-table a { text-decoration:underline; text-underline-offset:3px; }
.contact-section { background:var(--navy); color:#fff; padding:65px 0; }
.contact-inner { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.light { color:#f59a93; }
.contact-inner h2 { font-size:30px; margin:0 0 8px; }
.contact-inner p:last-child { color:#c8d2e3; margin:0; }
.contact-actions { display:flex; flex-direction:column; align-items:center; gap:10px; min-width:240px; }
.white { background:#fff; color:var(--navy); width:100%; }
.text-link { font-weight:700; font-size:14px; text-decoration:underline; }
footer { background:#0b1831; color:#98a9c5; font-size:12px; }
.footer-inner { min-height:80px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.footer-inner div { display:flex; gap:24px; }

@media (max-width:800px) {
  .site-header { height:66px; padding-inline:20px; }
  nav { display:none; }
  .header-contact { padding:8px 12px; }
  .hero { grid-template-columns:1fr; gap:45px; padding-block:64px; }
  .intro { grid-template-columns:1fr; gap:25px; padding-block:65px; }
  .course-section,.terms-section,.details,.faq,.legal { padding-block:72px; }
  .course-grid,.detail-grid,.terms-grid { grid-template-columns:1fr; }
  .terms-grid article:nth-child(odd) { border-right:0; }
  .legal-table > div { grid-template-columns:1fr; }
  .legal-table dt { padding-bottom:7px; }
  .legal-table dd { padding-top:7px; }
  .contact-inner { align-items:flex-start; flex-direction:column; }
  .contact-actions { width:100%; }
}
@media (max-width:520px) {
  .section-shell { width:min(100% - 28px,1120px); }
  .hero h1 { font-size:41px; }
  .hero-actions,.hero-actions .button { width:100%; }
  .hero-panel,.course-card { padding:30px 22px; }
  .price-list strong { font-size:25px; }
  .price-list dd { font-size:12px; }
  .footer-inner { align-items:flex-start; flex-direction:column; padding-block:24px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }