/*
Theme Name: Lightning Child
Template: lightning
Version: 1.0
*/


/* ベースの微調整（必要に応じて） */
:root{
--brand:#4f46e5; /* アクセントカラー */
--ink:#111827; /* テキスト */
--bg:#ffffff; /* 背景 */
}


html,body{scroll-behavior:auto;} /* GSAPを使うのでブラウザのスムーススクロールは無効 */


/* 余白の基準 */
.section{padding: clamp(60px, 10vw, 120px) min(6vw, 48px);}
.max{max-width: 1100px; margin: 0 auto;}
.eyebrow{letter-spacing:.08em; font-weight:700; color:var(--brand); text-transform:uppercase; font-size:.9rem}
.lead{font-size:clamp(20px, 3.5vw, 28px); line-height:1.5;}


/* ===== Hero ===== */
.hero{position:relative; min-height: 75svh; display:grid; place-items:center; background: radial-gradient(1200px 600px at 10% 10%, #eef2ff, transparent), radial-gradient(800px 400px at 90% 80%, #ecfeff, transparent); overflow:hidden;}
.hero__inner{display:grid; gap:18px; text-align:center}
.hero h1{font-size:clamp(36px, 7vw, 64px); line-height:1.1; letter-spacing:.01em}
.hero p{color:#374151}
.hero .cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{display:inline-block; padding:14px 20px; border-radius:999px; font-weight:700; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease;}
.btn--primary{background:var(--brand); color:#fff}
.btn--ghost{border:2px solid var(--brand); color:var(--brand); background:#fff}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.08)}


/* 浮遊オブジェクト（パステルの丸） */
.floating{position:absolute; inset:auto; border-radius:999px; opacity:.7; filter:blur(1px);}
.f1{width:120px; height:120px; background:#fef3c7; top:10%; left:5%}
.f2{width:90px; height:90px; background:#e0f2fe; bottom:12%; right:8%}
.f3{width:160px; height:160px; background:#ede9fe; top:20%; right:25%}


/* ===== フィーチャー：スクロールでふわっと登場 ===== */
.features{background:#fff}
.grid{display:grid; gap:24px; grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 4; background:#fff; border-radius:20px; padding:24px; box-shadow:0 8px 24px rgba(17,24,39,.08);}
.card h3{margin:.2em 0 .4em}
.card p{color:#4b5563}
@media (max-width: 960px){.card{grid-column:span 6}}
@media (max-width: 640px){.card{grid-column:span 12}}


/* ===== 横パネル（ノーミーツ風） ===== */
.panels{position:relative; background:#0f172a; color:#e5e7eb}
.panels .max{overflow:visible}
.panels__wrap{display:flex; gap:24px; height: clamp(320px, 70svh, 520px);}
.panel{flex:0 0 80%; background:#111827; border-radius:28px; padding:24px; display:grid; place-content:end; box-shadow:0 10px 30px rgba(0,0,0,.25);}
.panel h3{font-size:clamp(22px, 3vw, 32px); margin:0}
.badge{display:inline-block; background:#22d3ee; color:#0f172a; font-weight:800; letter-spacing:.04em; padding:6px 10px; border-radius:999px; font-size:.8rem}


/* 進行ドット */
.progress{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:8px}
.dot{width:8px; height:8px; border-radius:999px; background:#475569; opacity:.6}
.dot.is-active{opacity:1; background:#e2e8f0}


/* 汎用アニメ用の初期状態 */
.reveal{opacity:0; transform:translateY(16px)}