/* SynapseConnect の紹介ページ（src/synapse.html）。動きは sc.js */
@media (max-width:600px){.sc .pc-br{display:none}}
.sc-hero{position:relative;overflow:hidden}
.sc-hero::after{content:"";position:absolute;right:-12%;top:-30%;width:70vw;max-width:820px;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--accent-rgb),.22),rgba(var(--accent-2-rgb),.06) 55%,transparent);animation:sc-breathe 7s ease-in-out infinite}
@keyframes sc-breathe{50%{transform:scale(1.08);opacity:.75}}
.page-hero .sc-h1{position:relative;z-index:1;color:var(--ink);font-size:clamp(28px,4vw,48px);font-weight:700;line-height:1.4;margin-top:18px}
/* 名前をいちばん大きく（以前は大きな英字「SYNAPSE」と小さな名前が二重に出て変だった：2026-10-09） */
.sc-name{display:block;font-size:1.25em;line-height:1.2;letter-spacing:.06em;margin-bottom:10px;background:linear-gradient(90deg,var(--accent-2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-lead{position:relative;z-index:1;margin-top:20px;color:var(--ink-sub);font-size:clamp(16px,1.6vw,19px);line-height:1.9}
.sc-hero .actions{position:relative;z-index:1;display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.sc-sec{padding:110px 0;border-top:1px solid var(--line)}
.sc-p{margin-top:18px;color:var(--ink-sub);max-width:44em;line-height:1.9}

/* ---- 人とAIの図 ---- */
.sc-hubwrap{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;margin-top:48px;align-items:stretch}
.sc-hub{position:relative;aspect-ratio:1.25;border:1px solid var(--line);border-radius:24px;background:radial-gradient(60% 60% at 50% 50%,rgba(var(--accent-rgb),.10),transparent 70%),var(--surface);overflow:hidden}
.sc-lines{position:absolute;inset:0;width:100%;height:100%}
.sc-lines line{stroke:rgba(var(--accent-rgb),.25);stroke-width:.25;stroke-dasharray:1 1.2;vector-effect:non-scaling-stroke}
.sc-lines line.on{stroke:var(--accent-2);stroke-width:2;stroke-dasharray:6 8;animation:sc-dash .8s linear infinite}
.sc-lines line.on.rec{stroke:var(--accent)}
@keyframes sc-dash{to{stroke-dashoffset:-28}}
.sc-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;z-index:2;
  background:radial-gradient(circle at 35% 30%,rgba(var(--accent-2-rgb),.35),rgba(var(--accent-rgb),.25) 45%,rgba(5,7,15,.9) 75%);border:1px solid rgba(var(--accent-rgb),.6);
  box-shadow:0 0 50px rgba(var(--accent-rgb),.35),inset 0 0 30px rgba(var(--accent-2-rgb),.2);animation:sc-pulse 3.2s ease-in-out infinite}
@keyframes sc-pulse{50%{box-shadow:0 0 80px rgba(var(--accent-rgb),.55),inset 0 0 40px rgba(var(--accent-2-rgb),.3)}}
.sc-core b{font-size:clamp(12px,1.3vw,16px);letter-spacing:.02em}
.sc-core span{font-size:11px;color:var(--ink-sub)}
.sc-node{position:absolute;transform:translate(-50%,-50%);width:27%;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(12,17,32,.92);z-index:3;transition:border-color .4s,box-shadow .4s}
.sc-node b{display:block;font-size:12.5px;line-height:1.4}
.sc-node span{display:block;font-size:11px;color:var(--ink-sub);line-height:1.5;margin-top:2px}
.sc-node em{display:inline-block;margin-top:6px;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:1px 8px;border-radius:999px;color:var(--ink-sub);border:1px solid var(--line)}
.sc-node.ag b::before{content:"AI ";font-family:var(--mono);font-size:10px;color:var(--accent-2)}
.sc-node.on{border-color:rgba(var(--accent-2-rgb),.8);box-shadow:0 0 24px rgba(var(--accent-2-rgb),.3)}
.sc-node.on em{color:var(--bg);background:var(--accent-2);border-color:var(--accent-2)}
.sc-node.on.rec{border-color:rgba(var(--accent-rgb),.9);box-shadow:0 0 24px rgba(var(--accent-rgb),.35)}
.sc-node.on.rec em{background:var(--accent);border-color:var(--accent)}
.sc-log{border:1px solid var(--line);border-radius:24px;background:var(--surface);padding:20px 20px 12px;display:flex;flex-direction:column;min-height:0}
.sc-log-h{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-sub)}
.sc-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 10px var(--accent-2);animation:sc-blink 1.4s ease-in-out infinite}
@keyframes sc-blink{50%{opacity:.3}}
.sc-log ol{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:10px;overflow:hidden;flex:1}
.sc-log li{font-size:13px;line-height:1.6;padding:10px 12px;border-radius:12px;background:rgba(var(--accent-rgb),.06);border:1px solid var(--line);animation:sc-in .5s cubic-bezier(.16,.84,.34,1) both}
.sc-log li time{font-family:var(--mono);font-size:11px;color:var(--ink-sub);margin-right:8px}
.sc-log li .k{font-size:11px;padding:1px 7px;border-radius:999px;margin-right:6px;color:var(--bg);background:var(--accent-2)}
.sc-log li .k.rec{background:var(--accent)}
.sc-log li.done{background:rgba(var(--accent-2-rgb),.12);border-color:rgba(var(--accent-2-rgb),.5)}
@keyframes sc-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---- こんな使い方 ---- */
.sc-cases{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}
.sc-cases li{padding:18px 18px 16px;border-radius:16px;border:1px solid var(--line);background:var(--surface);font-size:15px;line-height:1.7}
.sc-cases small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--accent);margin-bottom:6px}
.sc-ba{margin-top:28px;border:1px solid rgba(var(--accent-rgb),.35);border-radius:24px;padding:28px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.08),transparent 60%),var(--surface)}
.sc-ba-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.sc-ba-head p{font-size:15px;color:var(--ink-sub)}
.sc-ba-tabs{display:flex;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--line);background:var(--bg)}
.sc-ba-tabs button{font:500 14px "Noto Sans JP",sans-serif;color:var(--ink-sub);background:none;border:0;border-radius:999px;padding:8px 16px;cursor:pointer;transition:background .3s,color .3s}
.sc-ba-tabs button[aria-selected=true]{color:var(--bg);background:linear-gradient(100deg,var(--accent-2),var(--accent))}
.sc-ba-rows{margin-top:20px;display:grid;gap:8px}
.sc-ba-rows>div{display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.sc-ba-rows dt{font-size:13px;color:var(--ink-sub)}
.sc-ba-rows dd,.sc-ba-r{position:relative;font-size:15px;line-height:1.7}
.sc-ba .a,.sc-ba .b{transition:opacity .45s,transform .45s}
.sc-ba .a{position:absolute;left:0;top:50%;transform:translateY(-30%);opacity:0;color:var(--ink);font-weight:500}
.sc-ba .b{display:block}
.sc-ba[data-k="1"] .b{opacity:0;transform:translateY(-8px)}
.sc-ba[data-k="1"] .a{opacity:1;transform:translateY(-50%)}
.sc-ba[data-k="1"] .sc-ba-rows>div{border-color:rgba(var(--accent-2-rgb),.45)}
.sc-ba-r{margin-top:16px;padding:14px 16px;border-radius:14px;text-align:center;font-weight:700;color:#F87171;border:1px dashed rgba(248,113,113,.4)}
.sc-ba-r .a{left:0;right:0;color:var(--accent-2)}
.sc-ba[data-k="1"] .sc-ba-r{border-color:rgba(var(--accent-2-rgb),.5);border-style:solid}

/* ---- しくみの流れ ---- */
.sc-flow{position:relative;display:grid;grid-template-columns:1fr 90px 1fr 90px 1fr;align-items:center;margin-top:48px;padding-bottom:64px}
.sc-col{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:22px 20px;position:relative;z-index:1}
.sc-col h3{font-size:15px;margin-bottom:12px}
.sc-col ul{list-style:none;display:grid;gap:6px}
.sc-col li{font-size:13px;padding:6px 10px;border-radius:10px;background:var(--bg);border:1px solid var(--line);transition:border-color .4s,color .4s}
.sc-col li.on{border-color:rgba(var(--accent-2-rgb),.8);color:#fff}
.sc-ai li.on{border-color:rgba(var(--accent-rgb),.9)}
.sc-mem{text-align:center;border-color:rgba(var(--accent-rgb),.5);background:radial-gradient(circle at 50% 30%,rgba(var(--accent-rgb),.18),transparent 70%),var(--surface)}
.sc-mem h3{font-size:18px;margin:10px 0}
.sc-mem p{font-size:12px;color:var(--ink-sub);margin-top:12px}
.sc-orb{position:relative;width:84px;height:84px;margin:0 auto}
.sc-orb i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(var(--accent-2-rgb),.5);animation:sc-spin 9s linear infinite}
.sc-orb i:nth-child(2){inset:12px;border-color:rgba(var(--accent-rgb),.7);animation-duration:6s;animation-direction:reverse}
.sc-orb i:nth-child(3){inset:28px;background:radial-gradient(circle,var(--accent-2),var(--accent));border:0;box-shadow:0 0 30px rgba(var(--accent-rgb),.7);animation:sc-pulse2 2.4s ease-in-out infinite}
.sc-orb i:nth-child(1)::after,.sc-orb i:nth-child(2)::after{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 8px var(--accent-2)}
@keyframes sc-spin{to{transform:rotate(360deg)}}
@keyframes sc-pulse2{50%{transform:scale(1.18)}}
.sc-layers{display:flex;flex-direction:column;gap:4px}
.sc-layers span{font-size:12px;padding:5px;border-radius:8px;border:1px solid rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.08)}
.sc-layers span:nth-child(2){margin:0 10px}.sc-layers span:nth-child(3){margin:0 20px}
.sc-pipe{position:relative;height:2px;background:var(--line);margin:0 8px}
.sc-pipe span{position:absolute;left:50%;top:-26px;transform:translateX(-50%);font-size:11px;font-family:var(--mono);color:var(--ink-sub);white-space:nowrap}
.sc-pipe i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 12px var(--accent-2);animation:sc-run 1.6s linear infinite}
.sc-pipe i::after{content:"";position:absolute;right:8px;top:3px;width:30px;height:2px;background:linear-gradient(90deg,transparent,var(--accent-2))}
@keyframes sc-run{from{left:0;opacity:0}15%{opacity:1}85%{opacity:1}to{left:calc(100% - 8px);opacity:0}}
.sc-back{position:absolute;left:calc((100% - 180px)/3*1.5 + 90px);right:calc((100% - 180px)/6);bottom:8px;height:44px;border:2px dashed rgba(var(--accent-rgb),.45);border-top:0;border-radius:0 0 18px 18px}
.sc-back span{position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);font-size:12px;color:var(--accent);white-space:nowrap}
.sc-back i{position:absolute;bottom:-5px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:sc-ret 2.4s linear infinite}
@keyframes sc-ret{from{left:100%;opacity:0}10%{opacity:1}90%{opacity:1}to{left:0;opacity:0}}
.sc-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:56px}
.sc-feats>div{padding:22px 20px;border-radius:18px;border:1px solid var(--line);background:var(--surface)}
.sc-feats b{font-size:16px}
.sc-feats p{font-size:14px;color:var(--ink-sub);margin-top:8px;line-height:1.8}
.sc-note{margin-top:20px;font-size:13px;color:var(--ink-sub)}

/* ---- 違い ---- */
.sc-vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.sc-vs-c{padding:26px 24px;border-radius:20px;border:1px solid var(--line);background:var(--surface)}
.sc-vs-c h3{font-size:16px;color:var(--ink-sub)}
.sc-vs-c ul{list-style:none;margin-top:14px;display:grid;gap:10px}
.sc-vs-c li{position:relative;padding-left:22px;font-size:14px;line-height:1.8;color:var(--ink-sub)}
.sc-vs-c li::before{content:"–";position:absolute;left:4px;color:var(--ink-sub)}
.sc-vs-c.me{border-color:rgba(var(--accent-rgb),.5);background:linear-gradient(160deg,rgba(var(--accent-rgb),.12),transparent 60%),var(--surface)}
.sc-vs-c.me h3{color:var(--ink);background:linear-gradient(90deg,var(--accent-2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-vs-c.me li{color:var(--ink)}
.sc-vs-c.me li::before{content:"✓";color:var(--accent-2)}

/* ---- 導入の流れ ---- */
.sc-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px;counter-reset:none}
.sc-steps li{position:relative;padding:22px 20px 20px;border-radius:18px;border:1px solid var(--line);background:var(--surface)}
.sc-steps li>span{font-family:var(--mono);font-size:30px;line-height:1;background:linear-gradient(90deg,var(--accent-2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-steps b{display:block;font-size:16px;margin-top:12px}
.sc-steps p{font-size:14px;color:var(--ink-sub);line-height:1.8;margin-top:6px}
.sc-steps small{display:inline-block;margin-top:8px;font-size:12px;padding:2px 10px;border-radius:999px;color:var(--accent-2);border:1px solid rgba(var(--accent-2-rgb),.4)}

/* ---- 締め ---- */
.sc-end{text-align:center;background:radial-gradient(60% 80% at 50% 0%,rgba(var(--accent-rgb),.16),transparent 70%)}
.sc-big{font-size:clamp(30px,5vw,56px);font-weight:700;line-height:1.35;background:linear-gradient(100deg,var(--ink) 30%,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-end .sc-p{margin:22px auto 0}
.sc-end .actions{display:flex;justify-content:center;margin-top:30px}
.sc-end .more-link{display:inline-block;margin-top:24px}

/* ---- スマホ ---- */
@media (max-width:900px){
  .sc-hubwrap{grid-template-columns:1fr}
  .sc-log{min-height:300px}
  .sc-cases{grid-template-columns:1fr 1fr}
  .sc-flow{grid-template-columns:1fr;gap:0;padding-bottom:0}
  .sc-pipe{width:2px;height:56px;margin:0 auto}
  .sc-pipe span{left:14px;top:50%;transform:translateY(-50%)}
  .sc-pipe i{left:-3px;animation-name:sc-run-v}
  .sc-pipe i::after{display:none}
  @keyframes sc-run-v{from{top:0;opacity:0}15%{opacity:1}85%{opacity:1}to{top:calc(100% - 8px);opacity:0}}
  .sc-back{position:static;height:auto;border:0;margin-top:16px;text-align:center}
  .sc-back span{position:static;transform:none;display:inline-block;padding:8px 14px;border-radius:999px;border:1px dashed rgba(var(--accent-rgb),.5)}
  .sc-back i{display:none}
  .sc-src ul,.sc-ai ul{grid-template-columns:1fr 1fr}
  .sc-feats,.sc-vs,.sc-steps{grid-template-columns:1fr}
}
@media (max-width:600px){
  .sc-sec{padding:72px 0}
  /* 人とAIの図：PCと同じ円形のまま小さく。ノードは短い名前と状態の点だけ、ログは新しい3件 */
  .sc-hubwrap{gap:12px;margin-top:32px}
  .sc-hub{aspect-ratio:1;border-radius:20px}
  .sc-core{width:34%}
  .sc-core b{font-size:11px}.sc-core span{font-size:10px}
  .sc-node{width:auto;min-width:64px;padding:6px 10px;border-radius:999px;text-align:center;display:flex;align-items:center;gap:6px;white-space:nowrap}
  .sc-node b,.sc-node span{display:none}
  .sc-node::before{content:attr(data-s);font-size:13px;font-weight:700}
  /* 暗くて見えにくかった：線は常にうっすら見せ、ノードの枠と背景を明るく */
  .sc-lines line{stroke:rgba(var(--accent-rgb),.55);stroke-width:1.2;stroke-dasharray:3 4}
  .sc-node{border-color:rgba(var(--accent-rgb),.6);background:#141C34}
  .sc-node.ag::before{color:var(--ink)}
  .sc-node em{order:-1;width:8px;height:8px;padding:0;margin:0;border-radius:50%;font-size:0;border:1px solid var(--ink-sub);flex:none}
  .sc-node.on em{box-shadow:0 0 8px var(--accent-2)}
  .sc-log{min-height:236px;padding:14px 14px 8px} /* 3件そろったときの高さを先に取る（増えるたびにページが動かないように） */
  .sc-log ol{gap:8px}
  .sc-log li{font-size:12.5px;padding:8px 10px}
  .sc-log li:nth-child(n+4){display:none}
  .sc-cases{grid-template-columns:1fr}
  /* 比べる表：切り替えをやめ、各行に「いま」と「SynapseConnect なら」を上下に並べる */
  .sc-ba{padding:18px 14px}
  .sc-ba-tabs{display:none}
  .sc-ba-rows>div{grid-template-columns:1fr;gap:6px;padding:14px}
  .sc-ba-rows dt{font-weight:700;color:var(--ink)}
  .sc-ba .a,.sc-ba .b,.sc-ba[data-k="1"] .a,.sc-ba[data-k="1"] .b{position:static;display:block;opacity:1;transform:none;transition:none}
  .sc-ba .b::before{content:"いま：";color:#F87171;font-size:12px;font-weight:700}
  .sc-ba .a::before{content:"これからは：";color:var(--accent-2);font-size:12px;font-weight:700}
  .sc-ba .b{color:var(--ink-sub);font-size:14px}
  .sc-ba .a{margin-top:4px;font-size:15px}
  .sc-ba-r{text-align:left}
  .sc-ba-r .b{color:#F87171}
}
/* ---- スマホ：並びを横スワイプに（2026-10-09 杉山さん 案B。バーは sc.js が足す） ---- */
.sc-sbar{display:none}
@media (max-width:600px){
  :is(.sc-cases,.sc-ba-rows,.sc-feats,.sc-vs,.sc-steps){display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:-16px;margin-right:-16px;padding:0 16px 4px;scrollbar-width:none}
  .sc-ba-rows{margin-left:-14px;margin-right:-14px;padding:0 14px 4px}
  :is(.sc-cases,.sc-ba-rows,.sc-feats,.sc-vs,.sc-steps)::-webkit-scrollbar{display:none}
  :is(.sc-cases,.sc-ba-rows,.sc-feats,.sc-vs,.sc-steps)>*{flex:0 0 82%;scroll-snap-align:center}
  .sc-steps>li.reveal,.sc-feats>div.reveal{opacity:1;transform:none}
  .sc-sbar{display:flex;align-items:center;gap:12px;margin-top:14px;font-family:var(--mono);font-size:13px;color:var(--ink-sub)}
  .sc-sbar i{flex:1;height:2px;background:var(--line);position:relative;border-radius:2px;overflow:hidden}
  .sc-sbar b{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .3s}
}
@media (prefers-reduced-motion:reduce){.sc *,.sc *::before,.sc *::after,.sc-hero::after{animation:none!important;transition:none!important}}