/* =========================================================
   AI星図 2026 — style.css
   コンセプト：群雄割拠のAIを「4つの星系」として描く
   ダークな宇宙背景 × 各社固有のネオンカラー
   ========================================================= */

:root{
  --bg:        #0a0b14;
  --bg-soft:   #121322;
  --panel:     rgba(255,255,255,.04);
  --panel-bd:  rgba(255,255,255,.10);
  --ink:       #eef0f7;
  --ink-soft:  #a7abc0;
  --ink-dim:   #6d7290;

  --claude: #e0895f;
  --openai: #2fd4a7;
  --google: #5b9bff;
  --grok:   #b79bff;

  --accent: #8b5cf6;              /* JSで書き換わる現在セクションのアクセント */
  --maxw: 1120px;

  --f-jp: "Zen Kaku Gothic New", system-ui, sans-serif;
  --f-en: "Space Grotesk", var(--f-jp);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--f-jp);
  background:var(--bg);
  color:var(--ink);
  line-height:1.85;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* 背景のほのかなグラデ（アクセント連動） */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 700px at 80% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%);
  transition:background 1.1s ease;
}

canvas#starfield{ position:fixed; inset:0; z-index:-1; display:block; }

/* ---- 進捗バー ---- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
  background:rgba(255,255,255,.06);
}
.scroll-progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #fff));
  box-shadow:0 0 12px var(--accent);
  transition:width .1s linear, background 1s ease;
}

/* ---- サイドナビ ---- */
.sidenav{
  position:fixed; right:22px; top:50%; transform:translateY(-50%);
  z-index:55; display:flex; flex-direction:column; gap:14px;
}
.sidenav .dot{
  width:11px; height:11px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);
  position:relative; transition:all .3s ease;
}
.sidenav .dot::after{
  content:attr(data-label);
  position:absolute; right:22px; top:50%; transform:translateY(-50%) translateX(6px);
  font-size:12px; color:var(--ink-soft); white-space:nowrap;
  background:rgba(10,11,20,.9); padding:3px 9px; border-radius:20px;
  border:1px solid var(--panel-bd);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
}
.sidenav .dot:hover::after{ opacity:1; transform:translateY(-50%) translateX(0); }
.sidenav .dot.active{
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 14px var(--accent); transform:scale(1.35);
}
@media (max-width:820px){ .sidenav{ display:none; } }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:80px 24px; position:relative; text-align:center;
}
.hero-inner{ max-width:900px; }
.eyebrow{
  font-family:var(--f-en); font-size:clamp(12px,1.4vw,14px);
  color:var(--ink-dim); letter-spacing:.16em; margin-bottom:26px;
}
.hero-title{
  font-weight:900; line-height:1.18;
  font-size:clamp(34px, 7.2vw, 82px); letter-spacing:.01em;
}
.hero-title .line{ display:block; }
.hero-title em{
  font-style:normal;
  background:linear-gradient(115deg, var(--claude), var(--openai) 40%, var(--google) 68%, var(--grok));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:220% auto; animation:hue 9s linear infinite;
}
@keyframes hue{ to{ background-position:220% center; } }
.hero-sub{
  margin:30px auto 0; max-width:640px;
  color:var(--ink-soft); font-size:clamp(15px,2vw,18px); line-height:1.9;
}

/* 惑星の軌道 */
.hero-orbit{
  position:relative; width:min(74vw,340px); height:min(74vw,340px);
  margin:52px auto 40px;
}
.sun{
  position:absolute; inset:0; margin:auto; width:78px; height:78px;
  border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-en); font-weight:700; font-size:20px; color:#0a0b14;
  background:radial-gradient(circle at 35% 30%, #fff, #cfd3ff 40%, #8b5cf6);
  box-shadow:0 0 46px rgba(139,92,246,.7), inset 0 0 18px rgba(255,255,255,.6);
}
.orbit{
  position:absolute; inset:0; margin:auto; border-radius:50%;
  border:1px dashed rgba(255,255,255,.14);
  animation:spin linear infinite;
}
.orbit-1{ width:44%;  height:44%;  animation-duration:9s;  }
.orbit-2{ width:64%;  height:64%;  animation-duration:15s; }
.orbit-3{ width:84%;  height:84%;  animation-duration:22s; }
.orbit-4{ width:104%; height:104%; animation-duration:30s; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.planet{
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%;
}
.p-claude{ background:var(--claude); box-shadow:0 0 16px var(--claude); }
.p-openai{ background:var(--openai); box-shadow:0 0 16px var(--openai); }
.p-google{ background:var(--google); box-shadow:0 0 16px var(--google); }
.p-grok{   background:var(--grok);   box-shadow:0 0 16px var(--grok);   }
@media (prefers-reduced-motion: reduce){
  .orbit, .hero-title em{ animation:none; }
}

.scroll-cue{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-en); font-size:13px; letter-spacing:.08em;
  color:var(--ink-soft); text-decoration:none;
}
.scroll-cue .chev{
  width:9px; height:9px; border-right:2px solid var(--ink-soft);
  border-bottom:2px solid var(--ink-soft); transform:rotate(45deg);
  animation:bob 1.6s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:rotate(45deg) translate(0,0);} 50%{ transform:rotate(45deg) translate(3px,3px);} }

/* =========================================================
   セクション共通
   ========================================================= */
.section{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(70px,12vh,140px) 24px;
}
.sec-index{
  font-family:var(--f-en); font-weight:700; font-size:14px;
  color:var(--accent); letter-spacing:.14em; transition:color 1s ease;
}
.section-head{ margin-bottom:52px; max-width:min(100%,920px); }
.section-head h2{
  font-weight:900; font-size:clamp(27px,4vw,46px); line-height:1.3;
  margin-top:10px; letter-spacing:.005em;
  max-width:100%;
  line-break:strict;
  word-break:auto-phrase;
  text-wrap:balance;
}
.keep-phrase{ display:inline-block; white-space:nowrap; }
.lead{ margin-top:18px; color:var(--ink-soft); font-size:clamp(15px,1.9vw,18px); }

/* 見出しの末尾1文字だけが次行へ残らないよう、幅ごとに段階調整 */
@media (max-width:900px){
  .section-head h2{ font-size:clamp(26px,5.4vw,40px); }
}
@media (max-width:560px){
  .section{ padding-inline:18px; }
  .section-head{ margin-bottom:38px; }
  .section-head h2{ font-size:clamp(25px,8.2vw,35px); line-height:1.35; letter-spacing:0; }
  .lead{ font-size:16px; line-break:strict; word-break:auto-phrase; text-wrap:pretty; }
}
@media (max-width:380px){
  .section-head h2{ font-size:clamp(23px,7.8vw,29px); }
}

/* ---- 全体像 4カード ---- */
.map-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.brand-card{
  padding:26px 22px; border-radius:18px;
  background:var(--panel); border:1px solid var(--panel-bd);
  position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s;
}
.brand-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--c); transform:scaleX(0); transform-origin:left; transition:transform .4s ease;
}
.brand-card:hover{ transform:translateY(-8px); border-color:color-mix(in srgb,var(--c) 55%,transparent); box-shadow:0 18px 40px -22px var(--c); }
.brand-card:hover::before{ transform:scaleX(1); }
.brand-card.claude{ --c:var(--claude); }
.brand-card.openai{ --c:var(--openai); }
.brand-card.google{ --c:var(--google); }
.brand-card.grok{   --c:var(--grok);   }
.brand-mark{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  font-family:var(--f-en); font-weight:700; font-size:22px; color:#0a0b14;
  background:var(--c); box-shadow:0 0 22px -4px var(--c); margin-bottom:16px;
}
.brand-card h3{ font-size:22px; font-weight:900; display:flex; align-items:baseline; gap:8px; }
.brand-card h3 span{ font-family:var(--f-en); font-size:12px; font-weight:500; color:var(--ink-dim); }
.brand-tag{ color:var(--c); font-weight:700; font-size:14px; margin:8px 0 12px; }
.brand-card p:last-child{ color:var(--ink-soft); font-size:14px; line-height:1.75; }
.map-hint{
  margin-top:30px; padding:18px 22px; border-radius:14px;
  background:var(--panel); border:1px solid var(--panel-bd);
  color:var(--ink-soft); font-size:15px;
}
.map-hint b{ color:var(--ink); }
@media (max-width:860px){ .map-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .map-grid{ grid-template-columns:1fr; } }

/* =========================================================
   ブランド個別セクション
   ========================================================= */
.brand-hero{ display:flex; align-items:center; gap:clamp(16px,4vw,44px); margin-bottom:56px; }
.giant-mark{
  font-family:var(--f-en); font-weight:700;
  font-size:clamp(80px,16vw,168px); line-height:.85; color:var(--accent);
  text-shadow:0 0 60px color-mix(in srgb,var(--accent) 60%,transparent);
  transition:color 1s ease, text-shadow 1s ease; flex:none;
}
.brand-hero-text h2{ font-size:clamp(30px,6vw,60px); font-weight:900; line-height:1; margin-top:8px; }
.brand-hero-text h2 em{
  font-style:normal; display:block; font-family:var(--f-en);
  font-size:clamp(13px,2vw,17px); font-weight:500; color:var(--ink-dim);
  letter-spacing:.1em; margin-top:12px;
}
.brand-status{ color:var(--accent); font-weight:700; margin-top:16px; font-size:clamp(14px,1.8vw,16px); transition:color 1s ease; }

.feature-rows{ display:flex; flex-direction:column; gap:16px; }
.feature-row{
  display:flex; gap:20px; align-items:flex-start;
  padding:24px 26px; border-radius:16px;
  background:var(--panel); border:1px solid var(--panel-bd);
  transition:border-color .35s, background .35s;
}
.feature-row:hover{ border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.feature-row.highlight{
  background:linear-gradient(120deg, color-mix(in srgb,var(--accent) 14%,transparent), transparent 70%);
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
}
.feat-icon{
  flex:none; width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  font-size:24px; background:color-mix(in srgb,var(--accent) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); transition:all .35s;
}
.feature-row h4{ font-size:18px; font-weight:700; margin-bottom:6px; }
.feature-row p{ color:var(--ink-soft); font-size:15px; }
.feature-row b{ color:var(--ink); }
@media (max-width:560px){
  .brand-hero{ flex-direction:column; align-items:flex-start; text-align:left; gap:6px; }
  .feature-row{ flex-direction:column; gap:12px; }
}

/* =========================================================
   一番賢い？
   ========================================================= */
.race-note{
  display:flex; align-items:center; justify-content:center; gap:clamp(14px,4vw,40px);
  padding:34px 24px; border-radius:20px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--panel-bd);
}
.race-line{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.race-flag{
  font-family:var(--f-en); font-weight:700; font-size:clamp(18px,3vw,26px);
  padding:10px 20px; border-radius:12px; color:#0a0b14;
}
.race-flag.claude{ background:var(--claude); box-shadow:0 0 26px -6px var(--claude); }
.race-flag.openai{ background:var(--openai); box-shadow:0 0 26px -6px var(--openai); }
.race-date{ font-size:13px; color:var(--ink-dim); font-family:var(--f-en); }
.race-vs{
  font-weight:900; font-size:clamp(13px,2vw,15px); color:var(--accent);
  padding:8px 16px; border:1px dashed color-mix(in srgb,var(--accent) 50%,transparent);
  border-radius:30px; transition:color 1s;
}
.race-caption{ text-align:center; margin:24px auto 44px; max-width:640px; color:var(--ink-soft); }
.race-caption b{ color:var(--ink); }

.twin-cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.twin{ padding:28px 26px; border-radius:18px; border:1px solid var(--panel-bd); background:var(--panel); }
.twin-icon{ font-size:30px; margin-bottom:12px; }
.twin h4{ font-size:19px; margin-bottom:8px; }
.twin p{ color:var(--ink-soft); font-size:15px; }
.twin.bad{ border-color:rgba(255,84,112,.4); }
.twin.good{ border-color:rgba(47,212,167,.4); }
@media (max-width:640px){ .twin-cards{ grid-template-columns:1fr; } }

/* =========================================================
   使い分け（表）
   ========================================================= */
.use-table{
  border:1px solid var(--panel-bd); border-radius:16px; overflow:hidden;
  background:var(--panel);
}
.use-row{
  display:grid; grid-template-columns:1.5fr 1fr 1.5fr; gap:14px;
  padding:16px 22px; border-bottom:1px solid var(--panel-bd); align-items:center;
  font-size:14.5px;
}
.use-row:last-child{ border-bottom:0; }
.use-row.use-head{ background:color-mix(in srgb,var(--accent) 12%,transparent); font-weight:700; color:var(--ink); }
.use-row:not(.use-head) div:first-child{ color:var(--ink); }
.use-row:not(.use-head) div:last-child{ color:var(--ink-soft); }
.pill{
  display:inline-block; padding:4px 12px; border-radius:20px; font-size:12.5px; font-weight:700;
  color:#0a0b14; margin:2px 5px 2px 0; font-family:var(--f-en);
}
.pill.claude{ background:var(--claude); }
.pill.openai{ background:var(--openai); }
.pill.google{ background:var(--google); }
.pill.grok{   background:var(--grok);   }

.usecase-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:26px; }
.uc{
  padding:22px 24px; border-radius:16px; background:var(--panel);
  border:1px solid var(--panel-bd); border-left:4px solid var(--accent);
  font-size:14.5px; color:var(--ink-soft); transition:border-color 1s;
}
.uc-who{ display:block; color:var(--ink); font-weight:700; margin-bottom:6px; font-size:15px; }
@media (max-width:760px){
  .use-row{ grid-template-columns:1fr; gap:6px; }
  .use-row.use-head{ display:none; }
  .use-row:not(.use-head) div:first-child{ font-weight:700; }
  .usecase-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   注意点
   ========================================================= */
.caution-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.caution-card{
  padding:28px 24px; border-radius:18px; background:var(--panel);
  border:1px solid rgba(255,84,112,.28); position:relative;
}
.caution-num{
  font-family:var(--f-en); font-weight:700; font-size:32px;
  color:#ff5470; opacity:.85; margin-bottom:10px;
}
.caution-card h4{ font-size:18px; margin-bottom:8px; }
.caution-card p{ color:var(--ink-soft); font-size:14.5px; }
.honest{
  margin-top:34px; padding:30px 34px; border-radius:18px;
  background:linear-gradient(120deg, color-mix(in srgb,var(--accent) 12%,transparent), transparent);
  border:1px solid var(--panel-bd); border-left:5px solid var(--accent);
  font-size:clamp(16px,2.1vw,20px); line-height:1.85; color:var(--ink); transition:border-color 1s;
}
.honest b{ color:var(--accent); transition:color 1s; }
@media (max-width:760px){ .caution-grid{ grid-template-columns:1fr; } }

/* =========================================================
   第一歩 + フッター
   ========================================================= */
.steps{ list-style:none; display:flex; flex-direction:column; gap:14px; counter-reset:s; }
.steps li{
  display:flex; gap:22px; align-items:flex-start;
  padding:24px 26px; border-radius:16px; background:var(--panel); border:1px solid var(--panel-bd);
}
.step-n{
  flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-en); font-weight:700; font-size:20px; color:#0a0b14;
  background:var(--accent); box-shadow:0 0 24px -6px var(--accent); transition:all 1s;
}
.steps h4{ font-size:18px; margin-bottom:4px; }
.steps p{ color:var(--ink-soft); font-size:15px; }

.closing{ margin-top:46px; text-align:center; max-width:720px; margin-left:auto; margin-right:auto; }
.closing-lead{
  font-size:clamp(24px,4.5vw,40px); font-weight:900; line-height:1.3; margin-bottom:14px;
  background:linear-gradient(115deg,var(--claude),var(--openai) 45%,var(--google) 72%,var(--grok));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.closing p:last-child{ color:var(--ink-soft); font-size:16px; }
.closing b{ color:var(--ink); }

.site-footer{ margin-top:64px; padding-top:30px; border-top:1px solid var(--panel-bd); text-align:center; }
.site-footer p{ font-size:14px; color:var(--ink-soft); }
.ft-sub{ margin-top:6px; }
.ft-sub a{ color:var(--accent); text-decoration:none; transition:color 1s; }
.ft-sub a:hover{ text-decoration:underline; }
.ft-related{ margin-top:16px; }
.ft-related a{
  display:inline-block; color:var(--ink); text-decoration:none; font-size:14px; font-weight:700;
  padding:10px 22px; border-radius:30px; border:1px solid var(--accent);
  transition:background .3s, color 1s, border-color 1s;
}
.ft-related a:hover{ background:color-mix(in srgb,var(--accent) 18%,transparent); }
.ft-note{ margin-top:14px; font-size:12px; color:var(--ink-dim); }

/* =========================================================
   スクロール・リビール
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.06s; }
.reveal:nth-child(3){ transition-delay:.12s; }
.reveal:nth-child(4){ transition-delay:.18s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-cue .chev{ animation:none; }
}

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }