/* =========================================================
   コネスポ 開発者紹介ページ（mode=developer）専用スタイル
   ── 創業者エディトリアル・プロフィール ──
   基盤（:root トークン / .cstop ベース / .kicker(.on-dark) /
   .btn(.ghost) / .head / .reveal(.in)）は community_top.css で
   定義済み。ここでは再定義しない。全セレクタを .cstop 配下に
   スコープする。モチーフ＝コミュニティTOPと同じ
   “つながりの点と線（ノード）”。明→暗→明の律動で構成。
   ========================================================= */

/* =========================================================
   1) 表紙ヘッダー（ダーク）
   ========================================================= */
.cstop .dev-cover{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--ink); color:#fff;
  padding:clamp(72px,11vw,128px) 0 clamp(64px,9vw,108px);
}
/* 右上のライム放射状グロー（低主張で奥行きだけ） */
.cstop .dev-cover::before{
  content:""; position:absolute; right:-140px; top:-160px;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(132,204,22,.18), transparent 68%);
  pointer-events:none; z-index:0;
}
/* 淡いノード網（ヒーロー netfx 同系。線は白、ノードにライム数点） */
.cstop .dev-net{
  position:absolute; right:-40px; top:24px;
  width:460px; max-width:48vw; height:auto;
  opacity:.7; pointer-events:none; z-index:0;
}
.cstop .dev-net .ln{
  stroke:rgba(255,255,255,.18); stroke-width:1.2;
  stroke-dasharray:240; stroke-dashoffset:240;
  animation:devDraw 2.4s var(--ease) .5s forwards;
}
.cstop .dev-net .nd{fill:var(--acc)}
.cstop .dev-net .nd.w{fill:rgba(255,255,255,.55)}
@keyframes devDraw{to{stroke-dashoffset:0}}

/* 2カラム非対称（ポートレート｜テキスト） */
.cstop .dev-cover-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(240px,360px) 1fr;
  gap:clamp(36px,5vw,64px); align-items:center;
}

/* ポートレート：洗練フレーム＋ライムのノード装飾 */
.cstop .dev-cover .dev-portrait{
  position:relative; border-radius:22px; overflow:visible;
  isolation:isolate;
}
.cstop .dev-cover .dev-portrait img{
  width:100%; height:auto; display:block;
  border-radius:22px;
  box-shadow:0 40px 80px -36px rgba(0,0,0,.7),
             0 0 0 1px rgba(255,255,255,.06);
}
/* 角にオフセット配置する小さな塗り円（ノード）×2 */
.cstop .dev-portrait-node{
  position:absolute; border-radius:50%; background:var(--acc);
  z-index:2; pointer-events:none;
}
.cstop .dev-portrait-node.n1{
  width:26px; height:26px; right:-13px; top:-13px;
  border:5px solid var(--ink);
  box-shadow:0 8px 20px -6px rgba(132,204,22,.7);
}
.cstop .dev-portrait-node.n2{
  width:14px; height:14px; left:-7px; bottom:34px;
  border:4px solid var(--ink);
}

/* テキスト側 */
.cstop .dev-cover-lead{min-width:0}
.cstop .dev-cover-lead .kicker{margin-bottom:18px}

/* 大きなディスプレイ見出し（statement） */
.cstop .dev-statement{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(36px,5.4vw,60px); line-height:1.04;
  letter-spacing:-.02em; color:#fff; text-wrap:balance;
  margin:0 0 22px;
}
/* 役割ラベル（muted） */
.cstop .dev-cover-lead .dev-role{
  font-family:var(--disp); font-weight:700;
  font-size:15px; letter-spacing:.04em;
  color:#aab0bd; margin:0;
}
.cstop .dev-cover-lead .dev-name{
  color:#bef264; font-weight:800; font-size:17px; letter-spacing:.08em;
}

/* SNS（円アイコン・hover でライム） */
.cstop .dev-sns{display:flex; gap:12px; margin-top:26px}
.cstop .dev-sns a{
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; font-size:22px;
  color:#fff; background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.18);
  transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.cstop .dev-sns a:hover{
  transform:translateY(-3px); background:var(--acc); color:var(--acc-ink);
  border-color:var(--acc); box-shadow:0 12px 24px -12px rgba(132,204,22,.6);
}

/* =========================================================
   セクション番号（共通）
   ========================================================= */
.cstop .dev-secnum{
  display:flex; align-items:baseline; gap:14px; margin-bottom:14px;
}
.cstop .dev-num{
  font-family:var(--disp); font-weight:800; line-height:1;
  font-size:clamp(40px,6vw,68px); letter-spacing:-.02em;
  /* フォールバック：text-stroke 非対応でも薄いライムで視認できる */
  color:var(--acc-soft);
  -webkit-text-stroke:1.5px var(--acc);
}
/* text-stroke 対応ブラウザではアウトライン表現に切替（塗りは透明） */
@supports ((-webkit-text-stroke:1px black)){
  .cstop .dev-num{color:transparent}
}
.cstop .dev-num-label{
  font-family:var(--disp); font-weight:700; font-size:12px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--acc-text);
}
.cstop .dev-secnum.on-dark .dev-num{-webkit-text-stroke-color:var(--acc)}
.cstop .dev-secnum.on-dark .dev-num-label{color:#bef264}

/* =========================================================
   2) ライトブロック（開発のきっかけ）
   ========================================================= */
.cstop .dev-block{
  padding:clamp(64px,8vw,96px) 0;
}
.cstop .dev-block h2{
  font-family:var(--disp); font-weight:800; letter-spacing:-.02em; line-height:1.06;
  font-size:clamp(28px,4vw,44px); color:var(--ink);
  position:relative; padding-bottom:16px; margin-bottom:26px;
}
.cstop .dev-block h2::after{
  content:""; position:absolute; left:0; bottom:0;
  width:52px; height:4px; background:var(--acc); border-radius:2px;
}
/* 本文の読みやすい最大幅 */
.cstop .dev-block p,
.cstop .dev-block .dev-list{max-width:36em}
.cstop .dev-block p{
  font-size:15.5px; line-height:1.9; color:var(--ink-2); margin-bottom:18px;
}
.cstop .dev-block p:last-child{margin-bottom:0}
.cstop .dev-block strong{color:var(--acc-text); font-weight:700}

/* 箇条書き（ライムの先頭マーカー） */
.cstop .dev-list{list-style:none; margin:0 0 18px; padding:0}
.cstop .dev-list li{
  position:relative; padding-left:26px; margin-bottom:11px;
  font-size:15.5px; line-height:1.85; color:var(--ink-2);
}
.cstop .dev-list li:last-child{margin-bottom:0}
.cstop .dev-list li::before{
  content:""; position:absolute; left:2px; top:.66em;
  width:10px; height:10px; border-radius:50%; background:var(--acc);
  box-shadow:0 0 0 4px var(--acc-soft);
}

/* =========================================================
   3) ダーク特集帯（テニスを科学する）
   ========================================================= */
.cstop .dev-feature{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--ink); color:#d7dbe4;
  padding:clamp(72px,10vw,116px) 0;
}
.cstop .dev-feature::before{
  content:""; position:absolute; left:-160px; bottom:-180px;
  width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(132,204,22,.14), transparent 70%);
  pointer-events:none; z-index:0;
}
.cstop .dev-feature > .wrap{position:relative; z-index:1}
.cstop .dev-feature h2{
  font-family:var(--disp); font-weight:800; letter-spacing:-.02em; line-height:1.06;
  font-size:clamp(24px,3.4vw,38px); color:#fff;
  position:relative; padding-bottom:16px; margin-bottom:30px;
}
.cstop .dev-feature h2::after{
  content:""; position:absolute; left:0; bottom:0;
  width:52px; height:4px; background:var(--acc); border-radius:2px;
}

/* 大きな引用（人間味の核）：ライム・同じ太さ・ダブルコーテーション付き */
.cstop .dev-quote{
  position:relative; margin:0 0 40px; padding:0 0 0 clamp(30px,4vw,52px); border:0;
  font-family:var(--disp); font-weight:700;
  font-size:clamp(24px,3.8vw,40px); line-height:1.32;
  letter-spacing:-.01em; color:var(--acc); text-wrap:balance; max-width:18em;
}
/* 先頭の大きなライムのダブルコーテーション */
.cstop .dev-quote::before{
  content:"\201C"; position:absolute; left:-.02em; top:-.36em;
  font-family:var(--disp); font-weight:800;
  font-size:clamp(56px,9vw,104px); line-height:1; color:var(--acc);
  opacity:.9; pointer-events:none;
}
/* 閉じのダブルコーテーション（文末・インライン） */
.cstop .dev-quote .q-close{
  display:inline-block; font-family:var(--disp); font-weight:800; color:var(--acc);
  font-size:clamp(56px,9vw,104px); line-height:0;
  vertical-align:-.40em; margin-left:.02em; opacity:.9;
}
/* モバイルのみ引用を改行する br（PCでは非表示） */
.cstop .dev-quote .q-br-m{display:none}

/* 特集本文（暗所コントラスト確保） */
.cstop .dev-feature-body p{
  font-size:15.5px; line-height:1.95; color:#d7dbe4;
  max-width:38em; margin:0;
}
.cstop .dev-feature-body strong{color:var(--acc-2); font-weight:700}

/* 図版マーキー：AIMASエディタ/レンズの画像が横に流れる帯（全幅・装飾） */
.cstop .dev-stream{
  position:relative; z-index:1; width:100%; overflow:hidden;
  margin-top:clamp(40px,5.5vw,60px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.cstop .dev-stream-row{
  display:flex; gap:18px; width:max-content;
  animation:devStream 48s linear infinite;
  will-change:transform;
}
.cstop .dev-stream:hover .dev-stream-row{animation-play-state:paused}
.cstop .dev-shot{
  flex:none; width:clamp(220px,26vw,316px); aspect-ratio:16 / 10;
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,.1); background:#0d0f14;
  box-shadow:0 22px 44px -26px rgba(0,0,0,.8);
}
.cstop .dev-shot img{width:100%; height:100%; object-fit:cover; display:block}
@keyframes devStream{to{transform:translateX(-50%)}}

/* =========================================================
   4) ライト・タイムライン（開発者の略歴）
   ========================================================= */
.cstop .dev-timeline-sec{
  padding:clamp(64px,8vw,96px) 0;
}
.cstop .dev-timeline-sec h2{
  font-family:var(--disp); font-weight:800; letter-spacing:-.02em; line-height:1.06;
  font-size:clamp(28px,4vw,44px); color:var(--ink);
  position:relative; padding-bottom:16px; margin-bottom:38px;
}
.cstop .dev-timeline-sec h2::after{
  content:""; position:absolute; left:0; bottom:0;
  width:52px; height:4px; background:var(--acc); border-radius:2px;
}
.cstop .dev-timeline{position:relative; max-width:40em; margin:0; padding:0; list-style:none}
.cstop .dev-tl-item{
  position:relative; padding:0 0 28px 38px;
  font-size:15px; line-height:1.85; color:var(--ink-2);
}
/* 縦の接続線 */
.cstop .dev-tl-item::before{
  content:""; position:absolute; left:8px; top:7px; bottom:-7px;
  width:2px; background:var(--line);
}
/* ライムのノード円 */
.cstop .dev-tl-item::after{
  content:""; position:absolute; left:0; top:4px;
  width:18px; height:18px; border-radius:50%;
  background:var(--surface); border:3px solid var(--acc);
  box-shadow:0 0 0 4px var(--acc-soft);
}
.cstop .dev-tl-item:last-child{padding-bottom:0}
.cstop .dev-tl-item:last-child::before{display:none}

/* ロケーションチップ（ライム枠） */
.cstop .dev-chip{
  display:inline-block; margin:0 0 6px; padding:3px 11px;
  font-family:var(--disp); font-weight:700; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--acc-text); background:var(--acc-soft);
  border:1px solid color-mix(in srgb, var(--acc) 35%, transparent);
  border-radius:999px; line-height:1.4;
}

/* 段階的リビール：上から順に現れる（transform/opacity のみ） */
.cstop .dev-timeline-sec .dev-tl-item{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.cstop .dev-timeline-sec.in .dev-tl-item{opacity:1; transform:none}
.cstop .dev-timeline-sec.in .dev-tl-item:nth-child(1){transition-delay:.05s}
.cstop .dev-timeline-sec.in .dev-tl-item:nth-child(2){transition-delay:.12s}
.cstop .dev-timeline-sec.in .dev-tl-item:nth-child(3){transition-delay:.19s}
.cstop .dev-timeline-sec.in .dev-tl-item:nth-child(4){transition-delay:.26s}
.cstop .dev-timeline-sec.in .dev-tl-item:nth-child(5){transition-delay:.33s}
.cstop .dev-timeline-sec.in .dev-tl-item:nth-child(6){transition-delay:.40s}
.cstop .dev-timeline-sec.in .dev-tl-item:nth-child(7){transition-delay:.47s}
.cstop .dev-timeline-sec.in .dev-tl-item:nth-child(8){transition-delay:.54s}

/* =========================================================
   5) 戻り導線
   ========================================================= */
.cstop .dev-back-sec{background:var(--bg)}
.cstop .dev-back{
  text-align:center; padding:clamp(40px,6vw,64px) 0 clamp(64px,9vw,96px);
}
/* community_top.css の .btn.ghost は暗いHERO前提（白文字・白枠）。
   このページの戻りボタンは明るい背景に乗るため、可読性確保のため
   ダーク枠＝濃インクのゴーストに上書きする（開発者ページ専用）。 */
.cstop .dev-back .btn.ghost{
  color:var(--ink); border-color:var(--line);
}
.cstop .dev-back .btn.ghost:hover{
  background:var(--ink); color:#fff; border-color:var(--ink);
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media(max-width:820px){
  .cstop .dev-cover-grid{grid-template-columns:1fr; gap:36px}
  .cstop .dev-cover .dev-portrait{max-width:320px; margin:0 auto}
  .cstop .dev-cover-lead{text-align:center}
  .cstop .dev-cover-lead .kicker{justify-content:center}
  .cstop .dev-sns{justify-content:center}
  .cstop .dev-net{display:none}
}
@media(max-width:600px){
  .cstop .dev-block p,
  .cstop .dev-list li{font-size:15px}
  .cstop .dev-statement br{display:none}
  .cstop .dev-quote .q-br-m{display:inline}
  .cstop .dev-tl-item{font-size:13px}
}

/* =========================================================
   reduced-motion：community_top.css の @media でも縮約されるが、
   新規の delay 付きリビール／ノード網も静止で破綻しないこと。
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .cstop .dev-net .ln{stroke-dashoffset:0; animation:none}
  .cstop .dev-stream-row{animation:none}
  .cstop .dev-timeline-sec .dev-tl-item{
    opacity:1; transform:none; transition:none; transition-delay:0s !important;
  }
}