/* Kenshin Aoki r3 — AI・SNS・eスポーツの3ページだけで使う見た目。共通の部品は style.css。
   ページごとに主役の色を1つ持つ（AI＝青／SNS＝橙／eスポーツ＝緑。DESIGN.md「3つの別ページ」）。
   ★触ったら: python3 checks/check_site.py と checks/shoot.py を回す（3ページ分も撮る）。 */

/* ---------- ページの色 ---------- */
.pg-ai  { --pc: var(--blue);   --pc-text: var(--blue);        --pc-band: var(--blue);        --pc-soft: rgb(29 92 255 / .1);  --pc-dark: var(--blue-on-dark); }
.pg-sns { --pc: var(--orange); --pc-text: var(--orange-text); --pc-band: var(--orange-text); --pc-soft: rgb(255 122 26 / .12); --pc-dark: var(--orange-on-dark); }
.pg-es  { --pc: var(--green);  --pc-text: var(--green-text);  --pc-band: var(--green-text);  --pc-soft: rgb(21 160 90 / .12);  --pc-dark: #34d17a; }
.pg .cursor { background: var(--pc); }
.pg .statement { background: var(--pc-band); }
.sw.gr { background: var(--green); }
.eyebrow { margin-bottom: 14px; font-size: .9375rem; font-weight: 700; letter-spacing: .12em; color: var(--pc-text); }

/* ---------- 1 扉 ---------- */
.ph-kicker { color: var(--pc-text); }
.ph-obj { width: 100%; height: 100%; object-fit: contain; will-change: transform; }   /* 透明な版（*-a.webp）を使う＝白を消す重ね方は要らない（奥の球の層の上で白い四角が出るため・2026-10-03） */
.ph-note {
  position: absolute; left: 0; right: 0; bottom: 2%; margin: 0; text-align: center;
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: .04em; color: var(--pc-text);
}
.motion .ph-note { opacity: 0; }
.ph-tilt-box { perspective: 1400px; }
.ph-controller { transform-style: preserve-3d; }
.ph-ripple {
  position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; margin: -23% 0 0 -23%;
  border-radius: 50%; box-shadow: inset 0 0 0 2px var(--orange); opacity: 0; pointer-events: none;
  animation: phRipple 3.6s var(--ease-out) infinite;
}
.ph-ripple:nth-child(2) { animation-delay: 1.2s; }
.ph-ripple:nth-child(3) { animation-delay: 2.4s; }
@keyframes phRipple { 0% { transform: scale(.6); opacity: 0; } 15% { opacity: .5; } 100% { transform: scale(1.9); opacity: 0; } }
@media (max-width: 860px) {
  .ph-note { display: none; }
}

/* ---------- AI 3 どこまで任せられるか（固定して進む章） ---------- */
.feat { background: var(--bg-see); }
.feat-stage { padding: var(--section) var(--gutter); }
.motion .feat { height: 520vh; }
.motion .feat-stage { position: sticky; top: 0; height: 100svh; padding-block: calc(var(--nav-h) + 16px) 28px; display: grid; align-items: center; }
.feat-grid { width: 100%; max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.feat-head h2 { font-size: var(--fs-h2); }
.feat-head > p { margin-top: 18px; color: var(--ink-2); font-size: var(--fs-lead); max-width: 30em; }
.feat-index { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 2px; }
.feat-index button {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 9px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-weight: 600; color: var(--ink-2); transition: color .4s;
}
.feat-index button::before { content: ""; flex: none; width: 22px; height: 3px; border-radius: 3px; background: #d5dae3; transition: width .6s var(--ease-out), background-color .4s; }
.feat-index button:hover { color: var(--ink); }
.feat-index li.is-on button { color: var(--pc-text); }
.feat-index li.is-on button::before { width: 44px; background: var(--pc); }
.feat-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.feat-item { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-lg); background: #fff; }
.feat-item img { width: 62%; margin: -6px auto 10px; mix-blend-mode: multiply; }
.feat-text h3 { font-size: var(--fs-h3); margin-bottom: 16px; }
.feat-text p { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; font-size: .9375rem; line-height: 1.75; }
.feat-text p + p { margin-top: 12px; }
.feat-text b { font-size: .75rem; font-weight: 700; padding: 2px 10px; border-radius: 99px; white-space: nowrap; }
.feat-text .now { color: var(--ink-2); }
.feat-text .now b { background: #e4e8ef; color: var(--ink-2); }
.feat-text .next b { background: var(--pc); color: #fff; }
.feat-bar { display: none; }
/* 動く人だけ: 1枚ずつ重ねて入れ替える */
.motion .feat.is-live .feat-items { display: grid; grid-template-columns: 1fr; grid-template-areas: "s"; }
.motion .feat.is-live .feat-item {
  grid-area: s; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 12px 28px;
  padding: clamp(24px, 3vw, 40px); min-height: min(62svh, 520px); overflow: hidden;
  opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .55s var(--ease-out), transform .9s var(--ease-out); pointer-events: none;
}
.motion .feat.is-live .feat-item.is-past { transform: translateY(-28px) scale(.98); }
.motion .feat.is-live .feat-item.is-on { opacity: 1; transform: none; transition-delay: .08s; pointer-events: auto; }
.motion .feat.is-live .feat-item img { width: 136%; max-width: none; margin: -12% -18%; transform: scale(.86) rotate(-4deg); transition: transform 1.2s var(--ease-out); }
.motion .feat.is-live .feat-item.is-on img { transform: none; }
.motion .feat.is-live .feat-text .now span { -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(currentColor, currentColor) 0 56% / 0 1.5px no-repeat; transition: background-size .9s var(--ease-out); }
.motion .feat.is-live .feat-item.is-on .now span { background-size: 100% 1.5px; transition-delay: .5s; }
.motion .feat.is-live .feat-text .next { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.motion .feat.is-live .feat-item.is-on .next { opacity: 1; transform: none; transition-delay: .95s; }
.motion .feat.is-live .feat-bar { display: block; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 22px; max-width: var(--wrap); margin: 0 auto; height: 3px; border-radius: 3px; background: #e2e6ed; overflow: hidden; }
.motion .feat.is-live .feat-bar i { display: block; height: 100%; background: var(--pc); transform-origin: left; transform: scaleX(0); }
@media (max-width: 860px) {
  .feat-grid { grid-template-columns: 1fr; gap: 20px; }
  .feat-head h2 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem); }
  .motion .feat.is-live .feat-head > p, .motion .feat.is-live .feat-index { display: none; }
  .motion .feat.is-live .feat-item { grid-template-columns: 1fr; min-height: 0; }
  .motion .feat.is-live .feat-item img { width: min(60vw, 270px, 30svh); margin: -6% auto -4%; }
}
@media (max-width: 640px) {
  .feat-items { grid-template-columns: 1fr; }
}

/* ---------- AI 4 研修 ---------- */
.training { padding: var(--section) var(--gutter); }
.training-grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.training h2 { font-size: var(--fs-h2); }
.training-lead { margin-top: 20px; font-size: var(--fs-lead); color: var(--ink-2); max-width: 30em; }
.training-points { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 24px; counter-reset: tp; }
.training-points li { counter-increment: tp; display: grid; grid-template-columns: 40px 1fr; gap: 4px 18px; }
.training-points li::before {
  content: counter(tp); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pc-soft); color: var(--pc-text); font: 600 1.0625rem/1 var(--font-latin);
}
.training-points b { font-size: var(--fs-h3); line-height: 1.5; }
.training-points span { color: var(--ink-2); }
.training-visual { margin: 0; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r-lg); background: var(--bg-alt); }
.training-visual img { width: 80%; mix-blend-mode: multiply; }
@media (max-width: 860px) {
  .training-grid { grid-template-columns: 1fr; }
  .training-visual { order: -1; max-width: 420px; }
}

/* ---------- AI 5 進め方：線が伸びて段が灯る ---------- */
.flow-sec { background: var(--bg-see); padding: var(--section) var(--gutter); }
.flow { list-style: none; max-width: var(--wrap); margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; position: relative; --fl: 1; }
.flow::before, .flow::after { content: ""; position: absolute; left: 9px; right: 9px; top: 8px; height: 2px; border-radius: 2px; background: #dfe3ea; }
.flow::after { background: var(--pc); transform-origin: left; transform: scaleX(var(--fl)); }
.flow li { position: relative; z-index: 1; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.flow-dot { display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--pc); transition: background-color .5s; }
.flow li.is-on .flow-dot, .flow:not(.is-live) .flow-dot { background: var(--pc); }
.flow h3 { margin-top: 24px; font-size: var(--fs-h3); }
.flow p { margin-top: 10px; color: var(--ink-2); font-size: .9375rem; line-height: 1.85; }
.flow.is-live li:not(.is-on) { opacity: .32; transform: translateY(12px); }
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; gap: 40px; padding-left: 40px; }
  .flow::before, .flow::after { left: 8px; right: auto; top: 9px; bottom: 9px; width: 2px; height: auto; }
  .flow::after { transform-origin: top; transform: scaleY(var(--fl)); }
  .flow-dot { position: absolute; left: -40px; top: 2px; }
  .flow h3 { margin-top: -4px; }
}

/* ---------- AI 6 道具 ---------- */
.tools-sec { padding: var(--section) var(--gutter); }
.toolcards { list-style: none; max-width: var(--wrap); margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.toolcards li { display: flex; flex-direction: column; min-height: 280px; padding: 30px 28px; border-radius: var(--r-lg); background: var(--studio); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px rgb(11 18 32 / .04); transition: transform .8s var(--ease-out), box-shadow .8s var(--ease-out); }
.toolcards li:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px rgb(11 18 32 / .04), 0 30px 60px -36px rgb(11 18 32 / .35); }
.toolname { margin-bottom: auto; font: 600 clamp(2rem, 1.2rem + 2.2vw, 3.1rem)/1 var(--font-latin); letter-spacing: -.035em; transition: color .4s; }
.toolcards li:hover .toolname { color: var(--pc-text); }
.toolcards h3 { margin-top: 36px; font-size: 1.125rem; line-height: 1.55; }
.toolcards li > p:last-child { margin-top: 8px; color: var(--ink-2); font-size: .9375rem; }
.tools-sec .research { max-width: var(--wrap); margin-inline: auto; }
.tools-sec .research > * { background: var(--bg-alt); }
@media (max-width: 960px) { .toolcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .toolcards { grid-template-columns: 1fr; } .toolcards li { min-height: 0; } }

/* ---------- AI 7 浮いた時間の行き先 ---------- */
.spend { background: var(--bg-see); padding: var(--section) var(--gutter); }
.spend-grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.spend-copy h2 { font-size: var(--fs-h2); }
.spend-copy p { margin-top: 20px; font-size: var(--fs-lead); color: var(--ink-2); max-width: 28em; }
.spend-copy .link { margin-top: 28px; color: var(--orange-text); }
.spend-chart { margin: 0; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); background: #fff; }
.spend-row { display: grid; grid-template-columns: 5em 1fr; align-items: center; gap: 16px; }
.spend-row + .spend-row { margin-top: 20px; }
.spend-label { font-size: .9375rem; font-weight: 700; }
.spend-bar { display: flex; gap: 4px; height: 56px; }
.spend-bar i { display: block; height: 100%; border-radius: 12px; flex: 0 0 var(--w); transition: flex-basis 1.4s var(--ease-out) .35s; }
.spend-bar .g { background: var(--gray); }
.spend-bar .b { background: var(--blue); }
.spend-bar .o { background: var(--orange); }
.is-now .g { --w: 72%; } .is-now .b { --w: calc(28% - 4px); }
.is-next .g { --w: 26%; } .is-next .b { --w: 42%; } .is-next .o { --w: calc(32% - 8px); }
.spend-chart.pre .is-next .g { --w: 72%; } .spend-chart.pre .is-next .b { --w: calc(28% - 4px); } .spend-chart.pre .is-next .o { --w: 0%; }
.spend-chart.pre.is-in .is-next .g { --w: 26%; } .spend-chart.pre.is-in .is-next .b { --w: 42%; } .spend-chart.pre.is-in .is-next .o { --w: calc(32% - 8px); }
.spend-chart .week-legend { margin-top: 24px; }
@media (max-width: 860px) { .spend-grid { grid-template-columns: 1fr; } .spend-bar { height: 44px; } }

/* ---------- AI 8 現場1件 ---------- */
.onecase { padding: var(--section) var(--gutter); }
.onecase-card { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(14px, 2vw, 22px); border-radius: var(--r-lg); background: var(--bg-alt); }
.onecase-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); mix-blend-mode: multiply; }
.onecase-text { padding: clamp(8px, 2vw, 20px) clamp(8px, 2vw, 28px) clamp(12px, 2vw, 20px) 0; }
.onecase .case-tag { margin: 0; }
.onecase h2 { margin-top: 18px; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem); line-height: 1.35; }
.onecase dl { margin: 24px 0 0; display: grid; gap: 14px; }
.onecase dl div { display: grid; grid-template-columns: 4.6em 1fr; gap: 8px; font-size: .9375rem; line-height: 1.8; }
.onecase dt { font-size: .75rem; font-weight: 700; color: var(--ink-2); padding-top: .3em; }
.onecase dd { margin: 0; color: var(--ink-2); }
.onecase dl div:last-child dt { color: var(--pc-text); }
.onecase dl div:last-child dd { color: var(--ink); font-weight: 700; }
.onecase-note { margin-top: 20px; font-size: .8125rem; color: var(--ink-2); }
@media (max-width: 860px) { .onecase-card { grid-template-columns: 1fr; } .onecase-text { padding: 4px 8px 16px; } }

/* ---------- 暗い章（3ページ共通） ---------- */
.dark-obj {
  width: 100%; mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  transform: translateY(var(--ty, 0px)) scale(var(--sc, 1));
}
.promise-list.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
@media (max-width: 960px) { .promise-list.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .dark-obj { width: 92%; justify-self: center; } }
@media (max-width: 640px) { .promise-list.is-4 { grid-template-columns: 1fr; } }

/* ---------- ほかにできること（3ページ共通） ---------- */
.more { padding: var(--section) var(--gutter); }
.more-row { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.more-card {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 8px 20px;
  min-height: 280px; padding: 24px 32px 24px 16px; border-radius: var(--r-lg); background: var(--bg-alt);
  color: inherit; text-decoration: none; overflow: hidden; transition: transform .9s var(--ease-out), background-color .5s;
}
.more-card:hover { transform: translateY(-4px); }
.more-card img { width: 100%; mix-blend-mode: multiply; transition: transform 1.2s var(--ease-out); }
.more-card:hover img { transform: translateY(-8px) scale(1.05) rotate(-3deg); }
.more-text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.more-kicker { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; color: var(--kc); }
.more-card strong { font-size: var(--fs-h3); line-height: 1.5; }
.more-card .link { margin-top: 6px; color: var(--kc); white-space: nowrap; font-size: .9375rem; }
.more-card:hover .link { background-size: 100% 1.5px; }
.more-card:hover .link::after { transform: translateX(4px); }
.more-card.is-b { --kc: var(--blue); }
.more-card.is-o { --kc: var(--orange-text); }
.more-card.is-gr { --kc: var(--green-text); }
@media (max-width: 860px) {
  .more-row { grid-template-columns: 1fr; }
  .more-card { min-height: 0; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); padding: 16px 22px 16px 8px; }
}

/* ---------- SNS 3 誰が作っているか（固定して進む章） ---------- */
.handover { background: var(--bg-see); }
.handover-stage { padding: var(--section) var(--gutter); }
.motion .handover { height: 340vh; }
.motion .handover-stage { position: sticky; top: 0; height: 100svh; padding-block: calc(var(--nav-h) + 16px) 24px; display: grid; align-items: center; }
.handover-grid { width: 100%; max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.handover h2 { font-size: var(--fs-h2); }
.handover-lead { margin-top: 18px; font-size: var(--fs-lead); color: var(--ink-2); max-width: 30em; }
.handover-steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 24px; }
.handover-steps strong { display: block; font-size: var(--fs-h3); line-height: 1.55; }
.handover-steps li:nth-child(1) strong { color: var(--orange-text); }
.handover-steps li:nth-child(n+3) strong { color: var(--green-text); }
.handover-steps span { display: block; margin-top: 8px; color: var(--ink-2); }
.motion .handover.is-live .handover-steps { display: grid; grid-template-areas: "s"; min-height: 8.5em; gap: 0; }
.motion .handover.is-live .handover-steps li { grid-area: s; opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease-out), transform .8s var(--ease-out); pointer-events: none; }
.motion .handover.is-live .handover-steps li.is-on { opacity: 1; transform: none; transition-delay: .12s; pointer-events: auto; }
.handover-chart { position: relative; margin: 0; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); background: #fff; display: grid; justify-items: center; }
.ho-ring { width: min(100%, 400px, 46svh); transform: rotate(-90deg); overflow: visible; }
.ho-track, .ho-arc { fill: none; stroke-width: 36; }
.ho-track { stroke: #eef0f4; }
.ho-me { stroke: var(--orange); stroke-dasharray: 0 100; }
.ho-team { stroke: var(--green); stroke-dasharray: 100 0; }
.ho-center { position: absolute; left: 0; right: 0; top: clamp(24px, 3vw, 40px); aspect-ratio: 1; width: min(100% - 48px, 400px, 46svh); margin: 0 auto; display: grid; place-content: center; text-align: center; pointer-events: none; }
.ho-label { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem); font-weight: 700; line-height: 1.3; }
.ho-sub { margin-top: 6px; font-size: .8125rem; color: var(--ink-2); }
.handover-chart .week-legend { justify-content: center; }
@media (max-width: 860px) {
  .handover-grid { grid-template-columns: 1fr; gap: 16px; }
  .handover-chart { order: -1; padding: 18px; }
  .ho-ring { width: min(56vw, 240px, 32svh); }
  .ho-center { top: 18px; width: min(56vw, 240px, 32svh); }
  .handover h2 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem); }
  .motion .handover.is-live .handover-lead { display: none; }
  .motion .handover.is-live .handover-steps { margin-top: 14px; }
}

/* ---------- SNS 4 対応できること（タイルの組み方） ---------- */
.bento-sns .s-train { grid-column: span 7; grid-row: span 2; }
.bento-sns .s-train h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.bento-sns .s-train p { font-size: var(--fs-lead); }
.bento-sns .s-train img { width: 86%; }
.bento-sns .s-ops, .bento-sns .s-plan { grid-column: span 5; }
.bento-sns .s-short, .bento-sns .s-video, .bento-sns .s-nation { grid-column: span 4; }
.tile-more { font-size: .875rem !important; margin-top: 12px !important; }
.bento-es .e-one { grid-column: span 7; grid-row: span 2; }
.bento-es .e-one h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.bento-es .e-one p { font-size: var(--fs-lead); }
.bento-es .e-one img { width: 84%; }
.bento-es .e-review, .bento-es .e-route { grid-column: span 5; }
.bento-es .e-home { grid-column: span 12; flex-direction: row; align-items: center; min-height: 320px; gap: 32px; }
.bento-es .e-home .tile-text { flex: 1; }
.bento-es .e-home img { width: min(34%, 360px); margin: -4% 0; flex: none; }
@media (max-width: 1080px) {
  .bento-sns .s-train, .bento-es .e-one, .bento-es .e-home { grid-column: span 2 !important; }
}
@media (max-width: 640px) {
  .bento-sns .s-train, .bento-es .e-one, .bento-es .e-home { grid-column: span 1 !important; }
  .bento-es .e-home { flex-direction: column; align-items: stretch; }
  .bento-es .e-home img { width: 64%; margin: 0 auto -4%; }
}

/* ---------- SNS 5 5つの輪 ---------- */
.loop-sec { padding: var(--section) var(--gutter); }
.loop { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.loop h2 { font-size: var(--fs-h2); }
.loop-copy > p { margin-top: 16px; font-size: var(--fs-lead); color: var(--ink-2); }
.loop ol { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: c; color: var(--ink-2); }
.loop ol li { counter-increment: c; display: grid; grid-template-columns: 2.2em 5em 1fr; align-items: baseline; }
.loop ol li::before { content: counter(c); font-family: var(--font-latin); font-weight: 600; color: var(--orange-text); }
.loop ol li:last-child::before { color: var(--green-text); }
.loop ol b { color: var(--ink); font-weight: 700; }
.loop-ring { width: 100%; max-width: 560px; justify-self: center; overflow: visible; }
.lp-track { fill: none; stroke: #e6e9ef; stroke-width: 2; }
.lp-arc { fill: none; stroke: var(--orange); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--off, 0); marker-end: url(#lp-o); }
.lp-arc.is-g { stroke: var(--green); marker-end: url(#lp-g); }
.loop.is-live .lp-arc:not(.is-done) { marker-end: none; }
.lp-nodes circle { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.lp-nodes text { fill: var(--ink); font-size: 22px; font-weight: 700; font-family: var(--font); }
.lp-center { fill: var(--orange-text); font-size: 30px; font-weight: 700; font-family: var(--font); }
@media (max-width: 860px) {
  .loop { grid-template-columns: 1fr; }
  .loop ol li { grid-template-columns: 2em 4.6em 1fr; }
}

/* ---------- SNS 7 数字 ---------- */
.proof { background: var(--bg-see); padding: var(--section) var(--gutter); }
.proof-row { list-style: none; max-width: var(--wrap); margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.proof-row li { padding: clamp(32px, 3.5vw, 48px) 24px; border-radius: var(--r-lg); background: #fff; text-align: center; }
.proof-num { font: 600 clamp(3.25rem, 2rem + 3.6vw, 5.25rem)/1 var(--font-latin); letter-spacing: -.03em; color: var(--pc-text); font-variant-numeric: tabular-nums; }
.proof-num small { font-family: var(--font); font-size: .3em; font-weight: 700; letter-spacing: .02em; color: var(--ink); margin-left: .12em; }
.proof-num small.u-pre { margin: 0 .08em 0 0; }
.proof-label { margin-top: 18px; font-size: var(--fs-h3); font-weight: 700; }
.proof-note { margin-top: 6px; font-size: .9375rem; color: var(--ink-2); }
@media (max-width: 760px) { .proof-row { grid-template-columns: 1fr; } }

/* ---------- eスポーツ 3 成長の階段（固定して進む章） ---------- */
.stairs-stage { padding: var(--section) var(--gutter); }
.motion .stairs { height: 340vh; }
.motion .stairs-stage { position: sticky; top: 0; height: 100svh; padding-block: calc(var(--nav-h) + 16px) 24px; display: grid; align-items: center; }
.stairs-grid { width: 100%; max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.stairs h2 { font-size: var(--fs-h2); }
.stairs-lead { margin-top: 18px; font-size: var(--fs-lead); color: var(--ink-2); max-width: 28em; }
.stairs-steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 22px; }
.stairs-steps strong { display: flex; align-items: center; gap: 12px; font-size: var(--fs-h3); line-height: 1.5; }
.stairs-steps em { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font: 600 .9375rem/1 var(--font-latin); font-style: normal; }
.stairs-steps span { display: block; margin-top: 8px; padding-left: 44px; color: var(--ink-2); }
.motion .stairs.is-live .stairs-steps { display: grid; grid-template-areas: "s"; min-height: 7.5em; gap: 0; }
.motion .stairs.is-live .stairs-steps li { grid-area: s; opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease-out), transform .8s var(--ease-out); pointer-events: none; }
.motion .stairs.is-live .stairs-steps li.is-on { opacity: 1; transform: none; transition-delay: .12s; pointer-events: auto; }
.stairs-figure { position: relative; margin: 0; }
.stairs-img { width: 100%; }
.stairs-orb { position: absolute; left: 0; top: 0; width: 16%; will-change: transform; transform-origin: 0 0; }
@media (max-width: 860px) {
  .stairs-grid { grid-template-columns: 1fr; gap: 12px; }
  .stairs-figure { order: -1; max-width: 520px; width: 100%; justify-self: center; }
  .stairs h2 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem); }
  .motion .stairs.is-live .stairs-lead { display: none; }
  .motion .stairs.is-live .stairs-steps { margin-top: 14px; }
}

/* ---------- eスポーツ 5 暗い章の大きな数字 ---------- */
.es-count { max-width: var(--wrap); margin: 0 auto clamp(72px, 9vw, 120px); text-align: center; }
.es-count-num { font: 600 clamp(5rem, 2.6rem + 10vw, 11.5rem)/1 var(--font-latin); letter-spacing: -.04em; color: var(--pc-dark); font-variant-numeric: tabular-nums; text-shadow: 0 0 80px rgb(52 209 122 / .3); }
.es-count-num small { font-family: var(--font); font-size: .2em; font-weight: 700; letter-spacing: .02em; color: #fff; margin-left: .12em; text-shadow: none; }
.es-count-label { margin-top: 22px; font-size: var(--fs-lead); color: var(--ink-dark-2); }
.es-dark-head { display: block; text-align: center; }
.es-dark-head p { margin-inline: auto; }

/* ---------- eスポーツ 6 GAME STEP ---------- */
.gs { padding: var(--section) var(--gutter); }
.gs-card { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 32px 48px; padding: clamp(32px, 5vw, 72px); border-radius: var(--r-lg); background: linear-gradient(155deg, #edf8f1 0%, #f5f6f8 70%); }
.gs h2 { font: 600 clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem)/1 var(--font-latin); letter-spacing: -.02em; }
.gs-lead { margin-top: 22px; font-size: var(--fs-lead); color: var(--ink-2); max-width: 28em; }
.gs-list { list-style: none; margin: 28px 0 36px; padding: 0; display: grid; gap: 12px; font-weight: 600; }
.gs-list li { display: flex; align-items: center; gap: 12px; }
.gs-list li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.gs-img { width: 100%; mix-blend-mode: multiply; transition: transform 1.4s var(--ease-out); }
.gs-card:hover .gs-img { transform: rotate(-6deg) translateY(-8px); }
@media (max-width: 860px) {
  .gs-card { grid-template-columns: 1fr; }
  .gs-img { order: -1; width: min(70%, 320px); justify-self: center; margin-bottom: -12px; }
  .gs .btn { width: 100%; }
}

/* ---------- eスポーツ 7 研修へのつながり ---------- */
.bridge { background: var(--bg-see); padding: var(--section) var(--gutter); }
.bridge .more-card { background: #fff; }

/* ---------- 締めのボタン：eスポーツは2つとも別タブ ---------- */
.contact-note a { color: var(--blue); }

/* ---------- 色の帯（3ページ）：ページごとに違う模様がスクロールで動く（同じ型の帯が3回続いて見えないように・2026-09-30） ---------- */
/* ★position は指定しない（style.css の .motion .statement-stage の sticky を上書きすると、帯の文字が画面の外へ流れて消える・2026-09-30 撮影で確認）。
   sticky も位置の基準になるので、模様（::before / ::after）はこの中に収まる。動かない人のときだけ relative にする */
.pg .statement-stage { overflow: clip; }
html:not(.motion) .pg .statement-stage { position: relative; }
.pg .statement-body { position: relative; z-index: 1; }
.pg .statement-stage::before, .pg .statement-stage::after { content: ""; position: absolute; pointer-events: none; }
/* AI＝時計の針が、スクロールした分だけ回る（時間が戻ってくる） */
.pg-ai .statement-stage::before {
  left: 50%; top: 50%; width: min(120vw, 1100px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .16), inset 0 0 0 90px rgb(255 255 255 / .02);
}
.pg-ai .statement-stage::after {
  left: 50%; top: 50%; width: 2px; height: min(55vw, 500px); translate: -50% -100%; transform-origin: 50% 100%;
  background: linear-gradient(rgb(255 255 255 / 0), rgb(255 255 255 / .3)); rotate: calc(var(--sp, 0) * 540deg);
}
/* SNS＝波紋が、中心から外へ広がり続ける（届く） */
.pg-sns .statement-stage::before, .pg-sns .statement-stage::after {
  left: 50%; top: 50%; width: min(80vw, 760px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .28); animation: bandRipple 5s var(--ease-out) infinite;
}
.pg-sns .statement-stage::after { animation-delay: 2.5s; }
@keyframes bandRipple { 0% { scale: .25; opacity: 0; } 20% { opacity: 1; } 100% { scale: 1.6; opacity: 0; } }
/* eスポーツ＝階段が、スクロールした分だけ下からせり上がる（一段ずつ） */
.pg-es .statement-stage::before {
  left: 0; right: 0; bottom: 0; height: 42%;
  background:
    linear-gradient(rgb(255 255 255 / .07), rgb(255 255 255 / .07)) 0 100% / 25% 25% no-repeat,
    linear-gradient(rgb(255 255 255 / .07), rgb(255 255 255 / .07)) 33.3% 100% / 25% 50% no-repeat,
    linear-gradient(rgb(255 255 255 / .07), rgb(255 255 255 / .07)) 66.6% 100% / 25% 75% no-repeat,
    linear-gradient(rgb(255 255 255 / .07), rgb(255 255 255 / .07)) 100% 100% / 25% 100% no-repeat;
  transform: translateY(calc((1 - var(--sp, 0)) * 70%));
}
@media (prefers-reduced-motion: reduce) { .pg-sns .statement-stage::before, .pg-sns .statement-stage::after { animation: none; opacity: .5; scale: 1; } }
html:not(.motion) .pg-es .statement-stage::before { transform: none; }