/* =========================================================
   style.css（整理版・置き換え用）
   構成順：
   1) 変数 / Reset / Base
   2) レイアウト
   3) コンポーネント（ボタン、ヘッダー、ヒーロー）
   4) セクション骨格 / 帯ラッパー
   5) 要素ブロック（バッジ、画像、リスト、カード、ステップ、引用/FAQ、CTA、フッター）
   6) アクセシビリティ
   7) レスポンシブ
   ========================================================= */

/* 1) 変数 / Reset / Base ---------------------------------- */
:root{
  --bg:#ffffff;
  --ink:#0e1220;
  --muted:#5c6370;
  --panel:#ffffff;
  --accent:#2f65ff;
  --ring:rgba(47,101,255,.35);
  --max:1080px;
  --radius:16px;

  /* ユーティリティ用 */
  --gray-50:#f6f8fb;
  --gray-100:#f5f7fa;
  --gray-200:#e5e7eb;
  --ink-weak:#374151;
  --ink-meta:#64748b;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.75;
}

/* 2) レイアウト ------------------------------------------- */
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 20px;
}

/* 3) コンポーネント ---------------------------------------- */
/* 3-1. ボタン */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:14px; text-decoration:none;
  font-weight:700; letter-spacing:.02em; border:1px solid transparent;
  transition:transform .05s ease, box-shadow .2s ease, background .2s ease;
}
.btn--primary{
  background:#fff; color:#0b1320;
  border-color:rgba(0,0,0,.06);
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.btn--primary:hover{ transform:translateY(-1px); }
.btn--ghost{
  color:#fff; border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);
}
.btn--ghost:hover{ border-color:#fff; }
.btn--lg{ padding:14px 22px; font-size:1.05rem; }

/* 3-2. ヘッダー */
.site-header{
  position:sticky; top:0; left:0; width:100%; z-index:30;
  background:rgba(10,12,19,.55);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:64px; }
.brand{ color:#fff; text-decoration:none; }
.brand__title{ font-weight:800; letter-spacing:.02em; color:#fff; }
.brand small{ display:block; color:#cbd5e1; font-size:.85rem; }
.nav{ display:flex; gap:14px; align-items:center; }
.nav__link{
  color:#e5e7eb; text-decoration:none; padding:8px 10px; border-radius:10px;
}
.nav__link:hover{ background:rgba(255,255,255,.1); }

/* 3-3. ヒーロー */
.hero{
  padding:0 0 64px;
  background:
    radial-gradient(800px 300px at 50% -60%, rgba(122,162,255,.25), transparent 60%),
    radial-gradient(500px 200px at 10% 20%, rgba(79,227,193,.18), transparent 60%),
    radial-gradient(500px 200px at 90% 30%, rgba(122,162,255,.18), transparent 60%);
  color:#0b1320;
}
.hero__inner{ max-width:900px; }
.hero__video{
  aspect-ratio:16/9; width:100vw; max-width:none; border-radius:0; overflow:hidden;
  margin:0 0 18px; position:relative; left:50%; transform:translateX(-50%);
}
.hero__video2{
  aspect-ratio:16/9; width:100vw; max-width:none; border-radius:0; overflow:hidden;
  margin:0 0 18px; position:relative; left:50%; transform:translateX(-50%);
}

.hero__video::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.25));
  pointer-events:none; z-index:1;
}
.hero__video2::before{
  content:""; position:absolute; inset:0;
}

.hero__video video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.hero__video2 video{ width:100%; object-fit:cover; display:block; background:#000; }
.hero__badge{ position:absolute; top:80px; right:20px; z-index:2; width:180px; max-width:40vw; }
.hero__badge img{ width:100%; height:auto; display:block; }

.hero__eyebrow{
  color:#111827; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:#fff; display:inline-block; padding:4px 8px; border-radius:10px;
}
.hero__title{ font-size:clamp(28px,3.2vw,44px); line-height:1.25; margin:8px 0; color:#0b1320; }
.hero__subtitle{ color:#334155; margin:0 0 22px; }
.hero__actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* 4) セクション骨格 / 帯ラッパー --------------------------- */
.section{
  padding:68px 0;
  background:transparent;
}
.section--alt{ background:var(--gray-50); } /* 単独で使いたい場合に */
.section__title{ margin:0 0 14px; font-size:clamp(22px,2.4vw,30px); }

/* 帯ラッパー（marginはみ出し対策含む） */
.band{ display:flow-root; background:transparent; }
.band--alt{
  background:var(--gray-50);
  border-top:1px solid transparent;
  border-bottom:1px solid transparent;
}
.band > .section{ padding:68px 0; background:transparent; }

/* 5) 要素ブロック ------------------------------------------ */
/* 5-1. バッジ（横並び・角丸・小丸ドット） */
.badges-inline{
  --badge-bg:var(--gray-100);
  --badge-br:var(--gray-200);
  --badge-ink:var(--ink-weak);
  --dot:#9ca3af;
  display:flex; flex-wrap:wrap; gap:8px 10px; margin:0 0 14px; padding:0; list-style:none;
}
.badges-inline > *{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid var(--badge-br);
  background:var(--badge-bg); color:var(--badge-ink);
  border-radius:999px; font-size:14px; line-height:1.6; white-space:nowrap;
}
.badges-inline > *::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--dot);
}

/* 5-2. 画像 */
.section__image,
.cta__image,
.media-grid img{
  width:100%; height:auto; border-radius:16px; border:1px solid #eee;
}

/* 5-3. メディアグリッド */
.media-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
.profile-grid{ grid-template-columns:240px 1fr; align-items:start; }
.profile-grid img{ max-width:240px; }

/* 5-4. チェックリスト */
.checklist{ display:grid; gap:12px; grid-template-columns:1fr; }
.checklist li{
  list-style:none; padding:12px 14px; border:1px solid #eee; border-radius:12px; background:#fff;
}

/* 5-5. カード */
.cards{ display:grid; gap:16px; grid-template-columns:1fr; }
.card{
  background:var(--panel); border:1px solid #eee; border-radius:var(--radius); padding:20px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-2px); border-color:#c7d2fe; box-shadow:0 10px 24px rgba(0,0,0,.08); }
.card__title{ margin:0 0 8px; font-size:1.1rem; }
.card__text{ color:var(--muted); margin:0; }

/* 5-6. 進め方ステップ */
.steps{ display:grid; gap:16px; grid-template-columns:1fr; }
.step{
  background:#fff; border:1px solid #eee; border-radius:var(--radius); padding:20px; position:relative;
}
.step__num{
  position:absolute; top:-12px; left:-12px; width:36px; height:36px; display:grid; place-items:center;
  border-radius:50%; background:#111827; color:#fff; font-weight:800;
}

/* 5-7. 体験者の声 / FAQ */
.quotes{ display:grid; gap:14px; }
.quote{ background:#fff; border:1px solid #eee; border-radius:14px; padding:16px; }
.quote__meta{ color:var(--ink-meta); font-size:.95rem; margin-top:6px; }
details.quote summary{ cursor:pointer; }

/* 5-8. CTA */
.cta{
  padding:72px 0;
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(79,227,193,.18), transparent 60%),
    radial-gradient(700px 240px at 80% 0%, rgba(122,162,255,.22), transparent 60%),
    linear-gradient(180deg,#ffffff,#ffffff);
  border-top:1px solid rgba(255,255,255,.06);
  text-align:center; color:#5c5c5c;
}
.cta__inner{ max-width:860px; margin:0 auto; }
.cta__title{ font-size:clamp(22px,2.2vw,30px); margin:0 0 8px; }
.cta__text{ color:#cbd5e1; margin:0 0 18px; }

/* 5-9. フッター */
.site-footer{ border-top:1px solid #eee; background:#0b0c10; color:#e5e7eb; }
.footer-inner{ display:flex; gap:12px; align-items:center; justify-content:space-between; min-height:68px; }
.footer-nav a{ color:#9aa3af; text-decoration:none; margin-left:12px; }
.footer-nav a:hover{ color:#ffffff; }

/* 6) アクセシビリティ -------------------------------------- */
:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:10px; }

/* 7) レスポンシブ ------------------------------------------ */
@media (max-width:520px){
  .badges-inline{ gap:6px 8px; }
  .badges-inline > *{ padding:5px 9px; font-size:13px; }
  .hero__badge{ top:64px; right:8px; width:32vw; }
}

@media (min-width:760px){
  .checklist{ grid-template-columns:1fr 1fr; }
}

@media (min-width:820px){
  .media-grid{ grid-template-columns:repeat(3,1fr); }
}

@media (min-width:860px){
  .cards{ grid-template-columns:repeat(3,1fr); }
  .steps{ grid-template-columns:repeat(3,1fr); }
}