/* =========================================================
   por todo — 白と黒だけで「×」と「輪」を表現する
   ルールは DESIGN.md を参照
   ========================================================= */

:root {
  --f-min: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --f-go: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --f-lat: "Jost", "Futura", sans-serif;
  --gutter: clamp(20px, 5vw, 64px);
  --sec-pad: clamp(104px, 14vw, 200px);
  --ease: cubic-bezier(.22, .8, .22, 1);
}

.theme-dark  { --fg: #fff; --bg: #000; --muted: #a6a6a6; --dim: #4d4d4d; --rule: rgba(255,255,255,.22); background: var(--bg); color: var(--fg); }
.theme-light { --fg: #000; --bg: #fff; --muted: #5c5c5c; --dim: #b0b0b0; --rule: rgba(0,0,0,.18);     background: var(--bg); color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: #000;
  color: #000;
  font-family: var(--f-go);
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: .04em;
  /* 日本語は文節の切れ目（<wbr>）でだけ改行する。Safari でも同じ位置で折り返す */
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 16px; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
section { position: relative; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.nw { white-space: nowrap; }

/* ロゴ画像の背景色を面の色になじませる（写真には使わない） */
.theme-dark img[src*="/brand/"], .gather__logo { mix-blend-mode: screen; }
.theme-light img[src*="/brand/"] { mix-blend-mode: multiply; }

.wrap { width: min(100% - var(--gutter) * 2, 1180px); margin-inline: auto; }
.sp { display: inline; } .pc { display: none; }
@media (min-width: 900px) { .sp { display: none; } .pc { display: inline; } }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; background: #fff; color: #000; }
.skip:focus { top: 12px; }

/* ---------- 文字の役割
   明朝 = 思想の言葉（見出し・一文）だけ
   ゴシック = 説明・手順・一覧
   Jost = 英字ラベル・番号 ---------- */
.sec-head {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-lat); font-weight: 300;
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.sec-head__no { color: var(--fg); letter-spacing: .08em; }
.sec-head__no::after { content: ""; display: inline-block; width: 36px; height: 1px; margin-left: 14px; vertical-align: middle; background: currentColor; }

.h2, .statement, .hero__title, .h3, .service__title, .edu__title, .cycle__core, .cycle__name, .step__name, .site-footer__tag {
  font-family: var(--f-min); font-weight: 500;
  font-feature-settings: "palt";
 
}
.h2 { font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3.4rem); line-height: 1.42; letter-spacing: .03em; }
.h2--xl { font-size: clamp(2.2rem, 1rem + 5.2vw, 5.4rem); line-height: 1.28; letter-spacing: .02em; }
.statement { font-size: clamp(1.9rem, .4rem + 6.4vw, 6.2rem); line-height: 1.22; letter-spacing: .02em; }
.h3 { font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem); line-height: 1.6; letter-spacing: .04em; margin-bottom: 28px; }
.lead { margin-top: 28px; max-width: 34em; color: var(--muted); }
.lead--fg { color: var(--fg); font-size: 1.05em; }
.prose p + p { margin-top: 1.2em; }
.todo { display: block; width: fit-content; margin-top: 10px; font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.todo::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; border: 1px solid currentColor; vertical-align: 1px; }

/* 「A → B → C」の連なり */
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font-weight: 500; font-size: clamp(1rem, .92rem + .35vw, 1.1rem); letter-spacing: .06em; }
.chain span:not(:last-child)::after { content: "→"; font-family: var(--f-lat); font-weight: 300; margin-inline: .6em; color: var(--muted); }

/* 「A × B」の掛け合わせ */
.pair { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-weight: 500; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem); letter-spacing: .06em; padding-block: 18px; border-block: 1px solid var(--rule); }
.pair__x { font-family: var(--f-lat); font-weight: 300; font-size: 1.6em; line-height: 1; margin-inline: .45em; color: var(--muted); }

/* ---------- ○×の印（ボタン・問い合わせ行） ---------- */
.mark {
  position: relative; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid currentColor;
  transition: background .35s, color .35s;
}
.mark::before, .mark::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44%; height: 1px; background: currentColor;
  transition: transform .5s var(--ease), background .35s;
}
.mark::before { transform: translate(-50%, -50%) rotate(45deg); }
.mark::after  { transform: translate(-50%, -50%) rotate(-45deg); }
a:hover .mark, a:focus-visible .mark { background: var(--fg); }
a:hover .mark::before, a:focus-visible .mark::before { background: var(--bg); transform: translate(-50%, -50%) rotate(135deg); }
a:hover .mark::after,  a:focus-visible .mark::after  { background: var(--bg); transform: translate(-50%, -50%) rotate(45deg); }

.field-cta { margin-top: clamp(64px, 8vw, 96px); }
.btn { display: inline-flex; align-items: center; gap: 20px; text-decoration: none; }
.btn__label { font-weight: 500; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); letter-spacing: .08em; padding-bottom: 4px; border-bottom: 1px solid currentColor; }
.btn .mark { width: 56px; height: 56px; }

/* =========================================================
   HEADER — 今いる面の色に合わせて切り替わる
   ========================================================= */
.site-header {
  --hfg: #fff; --hbg: #000; --hrule: rgba(255,255,255,.18);
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  padding: 10px var(--gutter);
  color: var(--hfg); background: var(--hbg);
  border-bottom: 1px solid transparent;
  transition: background .35s, color .35s, border-color .35s;
}
.site-header[data-theme="light"] { --hfg: #000; --hbg: #fff; --hrule: rgba(0,0,0,.14); }
.site-header.is-scrolled { border-bottom-color: var(--hrule); }
.site-header__brand { display: grid; }
.site-header__brand img { grid-area: 1 / 1; width: 44px; height: 44px; transition: opacity .35s; }
.logo-on-light { opacity: 0; }
.site-header[data-theme="light"] .logo-on-light { opacity: 1; }
.site-header[data-theme="light"] .logo-on-dark { opacity: 0; }
.site-header__now {
  display: flex; align-items: baseline; gap: 2px;
  font-family: var(--f-lat); font-weight: 300; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hfg);
}
.site-header__now b { font-weight: 400; }
.site-header__of { opacity: .5; margin-right: 12px; }
.js-now-label { opacity: .7; white-space: nowrap; }
.site-header__nav { display: none; }
.site-header__nav ul { display: flex; gap: 30px; }
.site-header__nav a { font-size: 13px; letter-spacing: .12em; text-decoration: none; }
.site-header__nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.site-header__cta { margin-left: auto; font-size: 13px; letter-spacing: .12em; text-decoration: none; border: 1px solid currentColor; padding: 7px 16px; transition: background .3s, color .3s; }
.site-header__cta:hover { background: var(--hfg); color: var(--hbg); }
@media (max-width: 420px) { .js-now-label { display: none; } }
@media (min-width: 900px) {
  .site-header { padding: 12px var(--gutter); gap: 28px; }
  .site-header__brand img { width: 52px; height: 52px; }
  .site-header__nav { display: block; margin-left: auto; }
  .site-header__cta { margin-left: 0; }
}

/* =========================================================
   01 HERO — 四方から来た線が交わり、ロゴになる
   ========================================================= */
.hero {
  --size: min(76vw, 44svh);
  min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto auto; justify-items: center;
  padding: 88px var(--gutter) 40px;
  overflow: clip;
}
.hero__logo { position: relative; width: var(--size); aspect-ratio: 1; align-self: center; }
.hero__logo img { position: relative; width: 100%; }
.hero__rays { position: absolute; left: 50%; top: 49.3%; width: 0; height: 0; }
.ray { position: absolute; left: 0; top: 0; width: calc(var(--size) * .3); height: 1px; transform-origin: 0 0; transform: rotate(var(--a)) translateX(calc(var(--size) * .42)); }
.ray i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,.8), rgba(255,255,255,0)); }
.hero__text { width: 100%; max-width: 560px; margin-top: 24px; }
.hero__eyebrow { font-size: 12px; letter-spacing: .12em; color: var(--muted); margin-bottom: 18px; }
.hero__eyebrow span { font-family: var(--f-lat); letter-spacing: .2em; color: #fff; }
.hero__title { font-size: clamp(1.55rem, .6rem + 4.4vw, 3.8rem); line-height: 1.45; letter-spacing: .03em; }
.hero__sub { margin-top: 18px; color: var(--muted); }
.hero__cue { justify-self: start; margin-top: 36px; display: flex; align-items: center; gap: 12px; font-family: var(--f-lat); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.hero__cue::before { content: ""; width: 1px; height: 36px; background: currentColor; }
@media (min-width: 900px) {
  .hero { --size: min(40vw, 68svh); grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; align-items: end; column-gap: 4vw; padding: 120px var(--gutter) 56px; }
  .hero__logo { grid-column: 2; grid-row: 1 / 3; align-self: center; margin-right: 2vw; }
  .ray { width: calc(var(--size) * .55); }
  .hero__text { grid-column: 1; grid-row: 1; align-self: end; justify-self: start; max-width: none; margin: 0; }
  .hero__title { font-size: min(3.4vw, 3.8rem); }
  .hero__cue { grid-column: 1; grid-row: 2; }
}
.motion .ray i { animation: ray-in 1.1s var(--ease) var(--d) both; }
.motion .hero__logo img { animation: logo-in 1.2s var(--ease) .75s both; }
.motion .hero__text > * { animation: text-in .9s var(--ease) both; }
.motion .hero__eyebrow { animation-delay: 1.3s !important; }
.motion .hero__title  { animation-delay: 1.45s !important; }
.motion .hero__sub    { animation-delay: 1.6s !important; }
.motion .hero__cue { animation: text-in .9s var(--ease) 1.9s both; }
@keyframes ray-in { from { transform: translateX(70vmax); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes logo-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes text-in { from { opacity: 0; } to { opacity: 1; } }

/* 線を描く共通指定 */
.js .draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }

/* =========================================================
   02 WHY
   ========================================================= */
.why { padding-block: var(--sec-pad); }
.why__grid { display: grid; gap: 56px; }
.why__copy .prose { margin-top: 36px; max-width: 30em; }
.why__fig svg { width: 100%; max-width: 520px; margin-inline: auto; overflow: visible; }
.why__ring, .why__line { fill: none; stroke: #000; stroke-width: 1.2; }
.why__node circle { fill: #000; }
.why__node text { font-family: var(--f-min); font-weight: 500; font-size: 24px; fill: #000; letter-spacing: .06em; }
.why__fig figcaption { margin-top: 20px; text-align: center; font-size: 13px; color: var(--muted); }
@media (min-width: 900px) { .why__grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 6vw; } }

/* =========================================================
   03 PHILOSOPHY — 循環が一周する
   ========================================================= */
.cycle { padding-top: var(--sec-pad); }
.cycle__intro { padding-bottom: 48px; }
.cycle__inner { display: grid; gap: 32px; align-items: center; }
.cycle__fig { position: relative; width: min(100%, 440px); margin-inline: auto; }
.cycle__fig svg { overflow: visible; width: 100%; }
.cycle__base { fill: none; stroke: var(--rule); stroke-width: 1; }
.cycle__arc { fill: none; stroke: #fff; stroke-width: 1.6; }
.cnode circle { fill: #000; stroke: #fff; stroke-width: 1.4; transition: fill .3s; }
.cnode text { fill: var(--muted); font-family: var(--f-min); font-weight: 500; font-size: 20px; letter-spacing: .06em; transition: fill .3s; }
.cnode.is-lit circle, .cnode.is-lit text { fill: #fff; }
.cycle__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); display: grid; justify-items: center; gap: 6px; text-align: center; opacity: 0; }
.motion .cycle__center { opacity: 1; }
.cycle__count { font-family: var(--f-lat); font-weight: 300; font-size: 12px; letter-spacing: .24em; color: var(--muted); }
.cycle__count b { font-weight: 400; color: #fff; }
.cycle__name { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.2rem); letter-spacing: .08em; line-height: 1.3; }
.cycle__name.is-small { font-size: clamp(1.15rem, .9rem + 1.2vw, 1.7rem); }
.cycle__steps { display: grid; gap: 28px; }
.step { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: baseline; }
.step__no { font-family: var(--f-lat); font-weight: 300; font-size: 12px; letter-spacing: .2em; color: var(--muted); }
.step__name { font-size: 1.3rem; letter-spacing: .06em; }
.step p { grid-column: 2; color: var(--muted); }
.cycle__core { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--rule); font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem); line-height: 1.45; letter-spacing: .03em; }
.cycle__core .arrow { font-family: var(--f-lat); font-weight: 300; }
.cycle__track { padding-bottom: var(--sec-pad); }
@media (min-width: 900px) { .cycle__inner { grid-template-columns: 1.1fr 1fr; gap: 6vw; } .cycle__fig { width: min(100%, 520px); } }
.motion .cycle__track { height: 460vh; padding-bottom: 0; }
.motion .cycle__stage { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; overflow: clip; padding-top: 48px; }
.motion .cycle__inner { gap: 20px; }
.motion .cycle__fig { width: min(78vw, 44svh); }
.motion .cycle__steps { grid-template-areas: "s"; gap: 0; }
.motion .step { grid-area: s; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s var(--ease); }
.motion .step.is-active { opacity: 1; transform: none; }
.motion .step__name { font-size: 1.1rem; }
.motion .cycle__core { margin-top: 20px; padding-top: 18px; font-size: clamp(1.25rem, 1rem + 2vw, 2.4rem); opacity: .22; transition: opacity .5s; }
.motion .cycle__core.is-on { opacity: 1; }
@media (min-width: 900px) {
  .motion .cycle__fig { width: min(100%, 60svh); }
  .motion .step__name { font-size: 1.5rem; }
  .motion .cycle__core { margin-top: 48px; padding-top: 32px; }
}

/* =========================================================
   04 TWO FIELDS
   ========================================================= */
.fields { padding-block: var(--sec-pad); }
.fields__map { position: relative; margin-top: clamp(56px, 8vw, 96px); }
.fields__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fields__lines path { fill: none; stroke: #000; stroke-width: 1; }
.fields__origin { width: 112px; margin: 0 auto 72px; position: relative; }
.fields__pair { display: grid; gap: 64px; padding-inline: 22px; }
.field { display: block; text-decoration: none; position: relative; }
.field--soccer { text-align: right; }
.field__tag { display: block; font-family: var(--f-lat); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.field__name { display: block; font-family: var(--f-lat); font-weight: 300; font-size: clamp(3.5rem, 2rem + 8vw, 7.5rem); line-height: 1; letter-spacing: .02em; margin: 8px 0 20px; }
.field__desc { display: block; }
.field__go { display: inline-block; margin-top: 20px; font-size: 13px; letter-spacing: .1em; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.field__go::after { content: " ↓"; }
.field:hover .field__name { font-style: italic; }
.fields__common { margin-top: 72px; padding-top: 72px; text-align: center; position: relative; }
.fields__one { font-family: var(--f-min); font-weight: 500; font-feature-settings: "palt"; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.8rem); letter-spacing: .06em; line-height: 1.6; }
.fields__common-label { font-size: 12px; letter-spacing: .12em; color: var(--muted); }
.fields__common ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin-top: 12px; font-weight: 500; font-size: clamp(1rem, .92rem + .5vw, 1.2rem); letter-spacing: .06em; }
.fields__common li:not(:last-child)::after { content: "×"; font-family: var(--f-lat); font-weight: 300; margin-inline: .7em; color: var(--muted); }
.fields__note { margin-top: 56px; text-align: center; font-size: 13px; color: var(--muted); text-wrap: balance; }
@media (max-width: 899px) {
  .fields__common ul { flex-direction: column; align-items: center; gap: 0; }
  .fields__common li:not(:last-child)::after { display: block; margin: 2px 0; line-height: 1.2; }
}
@media (min-width: 900px) {
  .fields__pair { grid-template-columns: 1fr 1fr; gap: 8vw; padding-inline: 48px; }
  .field--soccer { margin-top: 140px; }
  .fields__origin { width: 140px; }
}

/* =========================================================
   05 AI
   ========================================================= */
.ai { padding: clamp(72px, 10vw, 140px) 0 var(--sec-pad); border-top: 1px solid var(--rule); }
.field-head__big {
  font-family: var(--f-lat); font-weight: 300; line-height: .8;
  font-size: clamp(6rem, 2rem + 22vw, 20rem); letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1px var(--fg);
  margin: -8px 0 clamp(24px, 4vw, 48px) -.05em; user-select: none;
}
.ai__intro .lead, .soccer__intro .lead { color: var(--fg); }

/* ボード図（AI：仕事の仕分け / SOCCER：作戦ボード） */
.board { margin-top: clamp(64px, 9vw, 120px); }
.board__cap { margin-top: 20px; font-size: 14px; line-height: 1.9; }
.board__note { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.board__surface { display: none; position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--fg); overflow: clip; }
.js .board__surface { display: block; }
.ico { display: inline-block; width: 1.2em; height: 1.2em; margin-right: .45em; vertical-align: -.25em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.note {
  position: absolute; left: 0; top: 0; height: 30px;
  display: flex; align-items: center; padding: 0 10px;
  background: #fff; border: 1px solid #000;
  font-size: 12px; letter-spacing: .04em; white-space: nowrap; overflow: hidden;
  will-change: transform; transition: background .4s, color .4s;
}
.note.is-auto { background: #000; color: #fff; }
.sort__col { position: absolute; top: 4%; margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .08em; transition: opacity .4s; }
.sort__col--human { left: 4%; }
.sort__col--ai { left: 54%; }
.sort__ring { position: absolute; border: 1px solid #000; border-radius: 22px; transition: opacity .5s, clip-path .9s var(--ease); clip-path: inset(0 100% 0 0); }
.sort__ring.is-on { clip-path: inset(0 0 0 0); }
.sort__loop { position: absolute; font-size: 12px; letter-spacing: .08em; transition: opacity .4s; }
.sort__freed { position: absolute; margin: 0; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 8px; border: 1px solid #000; font-size: 12px; line-height: 1.6; transition: opacity .5s; }
.sort__freed .ico { width: 22px; height: 22px; margin: 0; }
.js .sort__col, .js .sort__freed, .js .sort__loop { opacity: 0; }
.sort__col.is-on, .sort__freed.is-on, .sort__loop.is-on { opacity: 1 !important; }
@media (min-width: 900px) {
  .board--ai { max-width: 860px; }
  .board--ai .board__surface { aspect-ratio: 16 / 11; }
  .note { height: 38px; font-size: 14px; padding: 0 14px; }
  .sort__col, .sort__loop, .sort__freed { font-size: 14px; }
}

/* 作戦ボード */
.tactics { width: 100%; overflow: visible; border: 1px solid var(--rule); }
.tactics__pitch rect, .tactics__pitch path { fill: none; stroke: rgba(255,255,255,.32); stroke-width: 1; }
.tactics__spot { fill: rgba(255,255,255,.5); }
.tactics__goal { stroke: #fff; stroke-width: 3; }
.xman path { fill: none; stroke: #a6a6a6; stroke-width: 1.6; stroke-linecap: round; }
.oman { fill: #000; stroke: #fff; stroke-width: 1.8; }
.tactics__pass, .tactics__shot { fill: none; stroke: #fff; stroke-width: 1.4; }
.tactics__run { fill: none; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; }
.tactics__heads path { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s; }
.js .tactics__heads path { opacity: 0; }
.js .tactics__heads path.is-on { opacity: 1; }
.tactics__ball circle { fill: #fff; }
.tactics__ball path { fill: #000; }
@media (min-width: 900px) { .board--tactics { max-width: 860px; } }

.service { margin-top: clamp(96px, 12vw, 160px); padding-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--fg); }
.service__kicker { font-size: 12px; letter-spacing: .12em; color: var(--muted); }
.service__title { margin-top: 14px; font-size: clamp(2rem, 1.1rem + 4.4vw, 4.8rem); line-height: 1.25; letter-spacing: .02em; }
.x { font-family: var(--f-lat); font-weight: 300; margin-inline: .12em; }
.service__body { margin-top: 28px; max-width: 34em; font-size: 1.05em; }
.flow { display: grid; margin-top: 56px; border-top: 1px solid var(--rule); }
.flow li { padding: 14px 0; border-bottom: 1px solid var(--rule); font-weight: 500; font-size: 1.05rem; letter-spacing: .08em; }
.flow li + li::before { content: "↓"; font-family: var(--f-lat); font-weight: 300; color: var(--muted); margin-right: 14px; }
.one { margin-top: 56px; display: grid; gap: 28px; align-items: center; }
.one__diagram { display: grid; grid-template-columns: auto 1fr; align-items: center; }
.one__src { font-size: 14px; font-weight: 500; letter-spacing: .06em; padding-bottom: 4px; border-bottom: 1px solid var(--fg); }
.one__to { display: grid; gap: 10px; position: relative; padding-left: 40px; font-family: var(--f-lat); font-size: 1.2rem; letter-spacing: .12em; }
.one__to::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 1px; background: var(--fg); }
.one__to::after { content: ""; position: absolute; left: 20px; top: 1em; bottom: 1em; width: 1px; background: var(--fg); }
.one__to span { position: relative; padding-left: 16px; }
.one__to span::before { content: ""; position: absolute; left: -20px; top: 50%; width: 28px; height: 1px; background: var(--fg); }
.one__text strong { font-weight: 500; border-bottom: 1px solid var(--fg); }
@media (min-width: 900px) {
  .service { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6vw; }
  .service__kicker, .service__title { grid-column: 1 / -1; }
  .flow { grid-template-columns: repeat(5, 1fr); grid-column: 1 / -1; border-top: 0; margin-top: 72px; position: relative; }
  .flow::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--fg); }
  .flow li { padding: 24px 16px 0 0; border: 0; position: relative; }
  .flow li::after { content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--fg); }
  .flow li + li::before { content: none; }
  .one { grid-column: 1 / -1; grid-template-columns: auto 1fr; gap: 6vw; margin-top: 88px; }
}

.ai__for, .road { margin-top: clamp(88px, 10vw, 140px); }
.rows li { padding: 16px 0 16px 2em; border-top: 1px solid var(--rule); position: relative; }
.rows li:last-child { border-bottom: 1px solid var(--rule); }
.rows li::before { content: "×"; position: absolute; left: 0; font-family: var(--f-lat); font-weight: 300; color: var(--muted); }

.road__list { border-top: 1px solid var(--rule); }
.road__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--muted); }
.road__list li.is-now { color: var(--fg); font-weight: 500; }
.road__tag { font-family: var(--f-go); font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.is-now .road__tag { color: var(--bg); background: var(--fg); padding: 1px 8px; }
.road__chain > span { color: var(--muted); font-weight: 400; }
.road__chain > span.is-now { color: var(--fg); font-weight: 500; }
.road__chain .road__tag { margin-left: 8px; }
@media (min-width: 900px) {
  .road__list { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--fg); border-bottom: 0; }
  .road__list li { flex-direction: column; justify-content: flex-start; gap: 8px; padding: 20px 14px 0 0; border: 0; position: relative; font-size: 15px; }
  .road__list li::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 1px solid var(--fg); }
  .road__list li.is-now::before { background: var(--fg); }
}

/* =========================================================
   06 SOCCER
   ========================================================= */
.soccer { padding-block: clamp(72px, 10vw, 140px) var(--sec-pad); }
.soccer .field-head__big { font-size: clamp(4.4rem, 1rem + 17vw, 16rem); }

/* 写真：白黒・角丸なし・影なし */
.photo img, .photo-band img { width: 100%; object-fit: cover; }
.photo figcaption, .photo-band figcaption { margin-top: 12px; font-size: 12px; letter-spacing: .12em; color: var(--muted); }
.photo-band { margin-top: clamp(72px, 10vw, 140px); }
.photo-band img { aspect-ratio: 4 / 5; object-position: 50% 60%; }
.photo-band figcaption { font-family: var(--f-go); }
@media (min-width: 900px) { .photo-band img { aspect-ratio: 21 / 9; max-height: 80svh; object-position: 50% 62%; } }

.pitch { margin-top: clamp(80px, 10vw, 140px); }
.pitch svg { width: 100%; max-width: 820px; margin-inline: auto; overflow: visible; }
.pitch__mark { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1; }
.pitch__spot { fill: rgba(255,255,255,.5); }
.pitch__arc { fill: none; stroke: #fff; stroke-width: 1.6; }
.pnode circle { fill: #000; stroke: #fff; stroke-width: 1.4; transition: fill .3s; }
.pnode.is-lit circle { fill: #fff; }
.pnode text { fill: #fff; font-family: var(--f-go); font-size: 16px; letter-spacing: .06em; }
.pnode .n { font-family: var(--f-lat); font-size: 12px; fill: #a6a6a6; }
.pitch__back { fill: #fff; font-family: var(--f-go); font-size: 15px; letter-spacing: .1em; transition: opacity .5s; }
.js .pitch__back { opacity: 0; }
.js .pitch__back.is-on { opacity: 1; }
/* 手順の一覧は読み上げ用（画面には図だけを見せる） */
.loop-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* スマホは専用の図：円を小さくし、文字を円のまわりに直接置く */
.pitch__sp { display: none; }
.pitch__sp .pnode text { font-size: 13px; letter-spacing: .04em; }
.pitch__sp .pitch__back { font-size: 12px; }
@media (max-width: 699px) {
  .pitch__wide { display: none; }
  .pitch__sp { display: block; }
}

.soccer__body { display: grid; gap: 48px; margin-top: clamp(80px, 10vw, 140px); }
.photo--huddle { width: 86%; }
.index { border-top: 1px solid var(--fg); }
.index__row { display: grid; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.index dt { font-weight: 500; font-size: 1.1rem; letter-spacing: .06em; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.index__tag { font-size: 11px; letter-spacing: .14em; padding: 0 8px; background: var(--fg); color: var(--bg); line-height: 1.8; }
.index dd { color: var(--muted); }
.index__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; }
.index__links a { font-family: var(--f-lat); color: var(--fg); letter-spacing: .04em; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.index__row.is-core dt { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.index__row.is-core dd { color: var(--fg); }
@media (min-width: 900px) {
  .soccer__body { grid-template-columns: 5fr 7fr; gap: 6vw; align-items: start; }
  .photo--huddle { width: 100%; position: sticky; top: 110px; }
}

/* =========================================================
   07 HOW WE WORK
   ========================================================= */
.how { padding-block: var(--sec-pad); }
.how__head { display: grid; gap: 48px; }
.photo--watch { width: 64%; justify-self: end; }
.photo--watch img { aspect-ratio: 3 / 4; object-position: 60% 40%; }
@media (min-width: 900px) {
  .how__head { grid-template-columns: 1.4fr .6fr; gap: 6vw; align-items: end; }
  .photo--watch { width: 100%; }
}
.track { --fill: 0; position: relative; margin-top: clamp(72px, 9vw, 120px); padding-left: 40px; }
.track__rail { position: absolute; left: 7px; top: 10px; bottom: 64px; width: 1px; background: var(--rule); }
.track__fill { position: absolute; left: 0; top: 0; width: 1px; height: calc(var(--fill) * 100%); background: var(--fg); }
.track__marker { position: absolute; left: -7px; top: calc(var(--fill) * 100%); width: 15px; height: 15px; margin-top: -7px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 6px var(--bg); }
.track__stations { display: grid; gap: 36px; }
.station strong { display: block; font-weight: 500; font-size: 1.3rem; letter-spacing: .1em; line-height: 1.5; }
.station__no { font-family: var(--f-lat); font-weight: 300; font-size: 12px; letter-spacing: .2em; color: var(--muted); }
.station p { font-size: 14px; color: var(--muted); }
.js .station, .js .station p { color: var(--dim); transition: color .3s; }
.js .station.is-on { color: var(--fg); }
.js .station.is-on p { color: var(--muted); }
.js .station.is-current strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.track__loop { margin-top: 36px; font-size: 14px; letter-spacing: .08em; transition: opacity .4s; }
.js .track__loop { opacity: .25; }
.js .track__loop.is-on { opacity: 1; }
@media (min-width: 900px) {
  .track { padding-left: 0; padding-top: 48px; }
  .track__rail { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 1px; }
  .track__fill { height: 1px; width: calc(var(--fill) * 100%); }
  .track__marker { left: calc(var(--fill) * 100%); top: -7px; margin: 0 0 0 -7px; }
  .track__stations { grid-template-columns: repeat(5, 1fr); gap: 24px; }
  .track__loop { text-align: right; }
}

.edu { margin-top: clamp(104px, 12vw, 180px); display: grid; gap: 40px; padding-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--fg); }
.edu__title { font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem); line-height: 1.5; letter-spacing: .03em; }
.edu__body > * + * { margin-top: 24px; }
.edu__grow-label { font-size: 13px; color: var(--muted); }
.edu__body .pair { margin-top: 8px; }
.edu__note { font-size: 13px; color: var(--muted); }
@media (min-width: 900px) { .edu { grid-template-columns: 1fr 1.2fr; gap: 6vw; } }

/* =========================================================
   08 FUTURE
   ========================================================= */
.future { padding-block: var(--sec-pad); }
.future__intro .lead { font-size: 1.05em; }
.gather__track { margin-top: 48px; }
.gather__inner { display: grid; gap: 28px; align-items: center; }
.gather__fig { width: min(100%, 420px); margin-inline: auto; }
.gather__fig svg { width: 100%; overflow: hidden; }
.gather__ring { fill: none; stroke: #fff; stroke-width: 1.4; }
.gather__dots circle { fill: #fff; }
.gather__x { stroke: #fff; stroke-width: 1.4; }
.gather__logo { opacity: 0; }
.gather__steps li { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); font-weight: 500; font-size: clamp(1rem, .92rem + .5vw, 1.3rem); letter-spacing: .06em; transition: color .35s; }
.gather__steps li:last-child { border-bottom: 1px solid var(--rule); }
.gather__steps li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; transition: background .35s; }
.gather__final { margin-top: 28px; font-size: 14px; line-height: 1.9; transition: opacity .5s; }
.js .gather__steps li { color: var(--dim); }
.js .gather__steps li.is-on { color: #fff; }
.js .gather__steps li.is-on::before { background: #fff; }
.js .gather__final { opacity: .2; }
.js .gather__final.is-on { opacity: 1; }
@media (min-width: 900px) { .gather__inner { grid-template-columns: 1.1fr 1fr; gap: 6vw; } .gather__fig { width: min(100%, 520px); } }
.motion .gather__track { height: 420vh; }
.motion .gather__stage { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; overflow: clip; padding-top: 48px; }
.motion .gather__fig { width: min(72vw, 40svh); }
.motion .gather__steps li { padding: 8px 0; }
.motion .gather__final { margin-top: 16px; font-size: 13px; }
@media (min-width: 900px) {
  .motion .gather__fig { width: min(100%, 60svh); }
  .motion .gather__steps li { padding: 14px 0; }
  .motion .gather__final { margin-top: 28px; font-size: 14px; }
}

.future__after { margin-top: clamp(72px, 10vw, 140px); display: grid; gap: 80px; }
.future__col p:not(.chain):not(.pair) { color: var(--muted); }
.future__col .chain { margin-bottom: 24px; }
.founder { display: grid; gap: 32px; }
.founder .pair { margin-bottom: 24px; }
.photo--founder { width: 58%; }
.photo--founder img { aspect-ratio: 3 / 4; object-position: 50% 30%; }
.photo--founder figcaption .todo { display: inline-block; margin: 0 0 0 8px; }
@media (min-width: 900px) {
  .future__after { max-width: 820px; }
  .founder { grid-template-columns: 200px 1fr; gap: 40px; align-items: start; }
  .photo--founder { width: 100%; }
  .photo--founder figcaption .todo { display: block; margin: 6px 0 0; }
}

/* =========================================================
   09 CONTACT
   ========================================================= */
.contact { padding-block: var(--sec-pad); }
.contact .lead { color: var(--fg); }
.contact__rows { margin-top: clamp(56px, 7vw, 88px); border-top: 1px solid var(--fg); }
.contact__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 20px; padding: 26px 0; border-bottom: 1px solid var(--fg); text-decoration: none; }
.contact__field { grid-column: 1; font-family: var(--f-lat); font-weight: 300; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.contact__what { grid-column: 1; font-weight: 500; font-size: clamp(1.1rem, .95rem + .8vw, 1.5rem); letter-spacing: .06em; line-height: 1.6; }
.contact__row .mark { grid-column: 2; grid-row: 1 / 3; width: 56px; height: 56px; }
.contact__sns { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; }
.contact__sns-label { font-family: var(--f-lat); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.contact__sns ul { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.contact__sns a { font-family: var(--f-lat); letter-spacing: .06em; text-underline-offset: 5px; text-decoration-thickness: 1px; }
@media (min-width: 900px) {
  .contact__row { grid-template-columns: 160px 1fr auto; padding: 34px 0; }
  .contact__field, .contact__what { grid-row: 1; }
  .contact__what { grid-column: 2; }
  .contact__row .mark { grid-column: 3; grid-row: 1; width: 64px; height: 64px; }
}

/* ---------- 問い合わせフォーム ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form { margin-top: clamp(56px, 7vw, 88px); }
.form__topic { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--fg); }
.form__legend { padding: 0; margin-bottom: 8px; font-size: 13px; letter-spacing: .08em; color: var(--muted); float: left; width: 100%; padding-top: 18px; }
.topic { clear: both; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 20px; padding: 22px 0; border-bottom: 1px solid var(--rule); cursor: pointer; position: relative; }
.topic input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.topic__field { grid-column: 1; font-family: var(--f-lat); font-weight: 300; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.topic__what { grid-column: 1; font-weight: 500; font-size: clamp(1.05rem, .95rem + .7vw, 1.4rem); letter-spacing: .06em; line-height: 1.6; color: var(--muted); transition: color .3s; }
.topic .mark { grid-column: 2; grid-row: 1 / 3; width: 48px; height: 48px; color: var(--dim); }
.topic:hover .topic__what, .topic input:checked ~ .topic__what { color: var(--fg); }
.topic:hover .mark { color: var(--fg); }
.topic input:checked ~ .mark { color: var(--fg); background: var(--fg); }
.topic input:checked ~ .mark::before, .topic input:checked ~ .mark::after { background: var(--bg); }
.topic input:focus-visible ~ .topic__what { outline: 2px solid currentColor; outline-offset: 4px; }
.form__fields { display: grid; gap: 28px; margin-top: 48px; }
.field-input { display: grid; gap: 6px; }
.field-input__label { font-size: 13px; letter-spacing: .08em; color: var(--muted); }
.req { margin-left: 10px; font-size: 11px; letter-spacing: .1em; }
.field-input input, .field-input textarea {
  width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--fg); border-radius: 0;
  background: transparent; color: var(--fg); font: inherit; font-size: 16px; letter-spacing: .04em;
}
.field-input textarea { resize: vertical; line-height: 1.8; border: 1px solid var(--rule); border-bottom-color: var(--fg); padding: 12px; }
.field-input input:focus, .field-input textarea:focus { outline: none; border-bottom-width: 2px; }
.field-input textarea::placeholder { color: var(--dim); }
.field-input.is-error .field-input__label, .form__topic.is-error .form__legend { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.form__trap { display: none; }
.form__foot { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.btn--submit { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.btn--submit[disabled] { opacity: .4; cursor: wait; }
.btn--submit:hover .mark, .btn--submit:focus-visible .mark { background: var(--fg); }
.btn--submit:hover .mark::before, .btn--submit:focus-visible .mark::before { background: var(--bg); transform: translate(-50%, -50%) rotate(135deg); }
.btn--submit:hover .mark::after, .btn--submit:focus-visible .mark::after { background: var(--bg); transform: translate(-50%, -50%) rotate(45deg); }
.form__status { font-size: 14px; }
@media (min-width: 900px) {
  .topic { grid-template-columns: 160px 1fr auto; padding: 28px 0; }
  .topic__field, .topic__what { grid-row: 1; }
  .topic__what { grid-column: 2; }
  .topic .mark { grid-column: 3; grid-row: 1; width: 56px; height: 56px; }
  .form__fields { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .field-input--wide { grid-column: 1 / -1; }
}
.contact__sns a { font-size: 1.05rem; }
.ext { margin-left: 4px; font-family: var(--f-lat); }

/* 03 の写真 */
.photo--f2f { margin-top: clamp(56px, 8vw, 104px); }
.photo--f2f img { aspect-ratio: 4 / 3; object-position: 55% 50%; }
@media (min-width: 900px) { .photo--f2f img { aspect-ratio: 1170 / 540; } }

/* 創業者の名前 */
.founder__name { display: grid; gap: 2px; margin-top: 14px; }
.founder__role { font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.founder__ja { font-family: var(--f-min); font-weight: 500; font-size: 1.25rem; letter-spacing: .12em; color: var(--fg); line-height: 1.5; }
.founder__kana { font-size: 11px; letter-spacing: .2em; color: var(--muted); }
.founder__title { margin-top: 6px; font-size: 13px; letter-spacing: .06em; color: var(--fg); }

/* ---------- FOOTER ---------- */
.site-footer { padding-block: 72px 40px; }
.site-footer__inner { display: grid; gap: 28px; justify-items: start; }
.site-footer img { width: 104px; }
.site-footer__tag { letter-spacing: .06em; }
.site-footer nav { display: grid; gap: 12px; }
.site-footer nav ul { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; }
.site-footer nav a { text-decoration: none; color: var(--muted); }
.site-footer nav a:hover { color: #fff; }
.site-footer__sns a { font-family: var(--f-lat); letter-spacing: .06em; }
.site-footer__copy { font-family: var(--f-lat); color: var(--muted); letter-spacing: .14em; }
@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: auto 1fr auto; align-items: center; column-gap: 48px; }
  .site-footer nav { justify-items: end; }
  .site-footer__copy { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}