/* 学習サイトの講座紹介ページ(course.aya-alchemist.net/lp/〇〇/)の共通デザイン 2026-10-18 */
:root{--bg:#f4f7f5;--paper:#fff;--fg:#1c2a27;--muted:#5d6e69;--line:#cfdad6;--accent:#1f6a62;--soft:#dcebe7;--line-green:#06c755;--warm:#f6efe4;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#111917;--paper:#172120;--fg:#e2ebe8;--muted:#97a8a3;--line:#2d3c38;--accent:#62b7ab;--soft:#1c3532;--warm:#2a241b;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;line-height:1.9;font-size:16px}
a{color:var(--accent)}
.top{max-width:880px;margin:0 auto;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px}
.top a{color:var(--muted);text-decoration:none}
.top .brand{font-weight:700;letter-spacing:.12em;color:var(--accent)}
.hero{background:linear-gradient(160deg,var(--soft),var(--bg) 70%);padding:40px 16px 44px}
.hero .in,.sec .in{max-width:760px;margin:0 auto}
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:0 10px}
h1{font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif;font-size:clamp(26px,6vw,38px);line-height:1.45;margin:10px 0 12px}
.hero p.lead{font-size:16.5px;margin:0 0 22px}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-block;padding:13px 20px;border-radius:10px;font-weight:700;text-decoration:none;text-align:center;font-size:15.5px}
.btn.main{background:var(--accent);color:#fff}
.btn.sub{border:1.5px solid var(--accent);color:var(--accent);background:var(--paper)}
.btn.line{background:var(--line-green);color:#fff}
.note{font-size:13px;color:var(--muted);margin:10px 0 0}
.sec{padding:36px 16px}
.sec.alt{background:var(--paper)}
h2{font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif;font-size:clamp(21px,4.6vw,27px);line-height:1.5;margin:0 0 16px}
h3{font-size:17px;margin:24px 0 8px}
ul.check{list-style:none;padding:0;margin:0;display:grid;gap:8px}
ul.check li{padding-left:28px;position:relative}
ul.check li::before{content:"✓";position:absolute;left:4px;color:var(--accent);font-weight:700}
ol.steps{padding-left:1.4em;margin:0}
ol.steps li{margin:6px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.sec:not(.alt) .card{background:var(--paper)}
.card strong{display:block;margin-bottom:4px}
.card p{margin:0;font-size:14.5px;color:var(--muted)}
table.info{width:100%;border-collapse:collapse;font-size:15px;background:var(--paper)}
table.info th,table.info td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
table.info th{width:8.5em;background:var(--soft);font-weight:700}
.voice{background:var(--warm);border-radius:14px;padding:20px 22px;margin:14px 0}
.voice p{margin:0 0 10px}
.voice .who{font-size:13.5px;color:var(--muted);margin:0}
.voice .q{font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif;font-size:18px;line-height:1.6;margin-bottom:8px}
.cta{background:var(--soft);border-radius:16px;padding:24px 20px;text-align:center}
.cta h2{margin-bottom:8px}
.cta .btns{justify-content:center;margin-top:14px}
.small{font-size:13.5px;color:var(--muted)}
footer{max-width:880px;margin:0 auto;padding:28px 16px 48px;font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
footer a{color:var(--muted)}
@media (max-width:520px){.btns .btn{flex:1 1 100%}table.info th{width:6.5em}}