@charset "UTF-8";
/* ============================================================
   WEB 区画（このサイトをつくった人）専用のスタイル
   ------------------------------------------------------------
   ★配色の方針★

   土台は HARC の theme-dark をそのまま使う。
   #business・#company・閉じの大コピー・CTA帯と同じ紺（navy-900）。
   つまりこの区画は「HARCの暗いセクション」の一員として並ぶ。

   面の作り・角丸・線・光り方も、HARCが他のセクションで
   実際にやっている手をそのまま借りている。
     ・カードの面      = var(--surface)（白4%）・角丸4px      … .biz-card と同じ
     ・カーソルの追従  = 420x220 の金の放射                    … .biz-card と同じ
     ・並びの区切り    = border-bottom の細線・箱にしない      … .fact と同じ
     ・左から差す光    = linear-gradient(90deg, 金0.1x, 透明)  … #network / #recruit と同じ
     ・角から差す金    = radial-gradient(… at 79% 0%)          … .page-head と同じ
   だから「別の人が作った区画」には見えない。

   ★ポートフォリオから借りるのは1色だけ★
   #6c63ff（portfolio-tomoki18 の --accent）。
   面にも文字にも一切使わない。置くのは次の3か所だけ。
     ① 区画の左下から差す、大きく薄い空気（11%）
     ② 「得意」な1枚の上辺の線が、金から抜けていく先
     ③ 節点とレール先端の、光の外側だけ
   紺と同じ青系なので喧嘩せず、金（補色）も殺さない。
   ＝近未来が「漂う」ところで止めて、HARCの金紺は動かさない。

   ★夜空はやめた★
   以前は canvas で星と街明かりを描いていたが、
   区画がまるごと別サイトのように浮いていた。
   背景は紺のグラデーションと2つの放射だけにしてある。
   （描画コードは assets/js/web-night.js に残っているが、もう読んでいない）
   ============================================================ */

/* ============================================================
   区画の地
   ------------------------------------------------------------
   ★専用の背景はやめた★
   紺のグラデーションと2つの放射を敷いていたが、それ自体が
   「ここから別の事業」という区切りになっていた。
   いまは #business と同じ theme-dark の紺のまま。
   近未来の色（ポートフォリオの #6c63ff）は、
   「得意」な1枚の上辺の線と、節点・レール先端の滲みにだけ残してある。

   ★幅を絞る★
   container いっぱいに広げていたのが「別事業感」のいちばんの原因だった。
   本文幅（64em）までに収めて、3本の柱に付いている話に見せる。
   ============================================================ */
.web-sec {
  /* ★上の余白はゼロ★
     事業内容と地続きに見せたいので、こちら側からは空けない。
     区切りは事業内容パネルの下余白（clamp(86px,10vw,120px)）だけで足りる。
     ここに 68px を足していたので、あいだが2重の余白になっていた。 */
  padding: 0 0 clamp(38px, 4.4vw, 60px);

  /* ★事業内容パネルの下余白を、半分ほど食う★
     事業内容は .stack__panel なので下に clamp(86px,10vw,120px) の余白を持つ。
     こちらの余白をゼロにしても、まだそのぶんが空いて「ページの隙間」に見えていた。
     同じ clamp を負にして 55% ぶん引き上げ、地続きに寄せる。
     食うのは余白だけ（パネルの中身はその内側で終わる）なので、文字は重ならない。 */
  margin-top: calc(clamp(86px, 10vw, 120px) * -0.55);

  /* ★影は置かない★
     .stack__panel と同じ box-shadow（0 -30px 80px rgba(0,0,0,.45)）を
     一度入れたが、上へ80pxにじむので事業内容との境目が暗い帯になった。
     同じページの続きに見せたいので影は出さない。
     BUSINESS は position:sticky で貼り付いたまま残るため、
     この区画が透けないことだけは必要（.theme-dark が紺で塗りつぶしている）。 */
  position: relative;
}
.web-sub {
  position: relative;
  max-width: 64em;
}
/* 上に短い金の線を1本だけ。「ここから派生の話」の合図。枠は作らない */
/* ラベル。金の線は上ではなく左に置く。
   上に置くと線のぶんだけ縦に余白が要り、そこも隙間に見えていた。
   左に置けば高さが増えない（HARCの .sec-head__en と同じ形） */
.web-sub__en {
  display: flex; align-items: center; gap: 13px;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.3em;
  color: var(--gold-300);
  margin-bottom: 11px;
}
.web-sub__en::before {
  content: ""; flex: none;
  width: 34px; height: 1px;
  background: var(--gold-grad);
}
/* 見出しは h3。BUSINESS の h2（最大40px）より一段小さく */
.web-sub__title {
  font-size: clamp(17px, 2.1vw, 23px);
  font-weight: 700; line-height: 1.55; letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.web-sub__lead {
  font-size: clamp(13.5px, 1.5vw, 15px);
  font-weight: 700; line-height: 1.85;
  margin-bottom: 10px;
}
.web-sub__body {
  color: var(--text-dim); font-size: 13px; line-height: 1.85;
  max-width: 44em;
}
/* カードの上の小見出し。大きすぎず、でも見出しだと分かる大きさ */
.web-sub__label {
  margin: clamp(26px, 3vw, 34px) 0 13px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.06em;
}
/* ============================================================
   最近の制作実績
   ------------------------------------------------------------
   写真が主役なので、枠は作らず画像をそのまま置く。
   説明は画像の下に小さく。カードの語彙（金の細線・白4%の面）は使わない。
   ＝「できること3枚」と役割が違うことが、見た目でも分かるようにする。
   ============================================================ */
.works {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
}
/* 押せることを先に伝える一行 */
.works__hint {
  font-size: 11.5px; color: var(--text-mute);
  margin: -6px 0 14px;
}
.works__item { display: block; }
.works__fig {
  position: relative;
  margin: 0 0 12px;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.6s var(--ease-out);
}
/* 「サイトを開く」の札。画像の右下に置く。
   ★大きさも位置も変えない★ 出し入れは opacity だけ（縁で震えないように） */
.works__open {
  position: absolute; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px;
  font-family: var(--font-ui); font-size: 9.5px; letter-spacing: 0.12em;
  color: var(--navy-900); background: var(--gold-grad);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.works__item:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 5px; }
.works__fig img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* ふだんは少し沈めておき、乗せたときに本来の明るさへ戻す。
     ★大きさは変えない★ 拡大すると縁でホバーが切れて震える */
  filter: brightness(0.86) saturate(0.92);
  transition: filter 0.6s var(--ease-out);
}
.works__title {
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.works__role {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.14em;
  color: var(--gold-300);
  margin-bottom: 8px;
}
/* 「下に小さく」の部分 */
.works__note {
  font-size: 11.5px; line-height: 1.8; color: var(--text-mute);
  transition: color 0.6s var(--ease-out);
}

@media (hover: hover) {
  .works__item:hover .works__fig img,
  .works__item:focus-visible .works__fig img { filter: brightness(1) saturate(1); }
  .works__item:hover .works__fig,
  .works__item:focus-visible .works__fig { border-color: rgba(198, 167, 104, 0.34); }
  .works__item:hover .works__open,
  .works__item:focus-visible .works__open { opacity: 1; }
  .works__item:hover .works__note { color: var(--text-dim); }
  .works__item:hover .works__title { color: var(--gold-200); }
}
/* カーソルが無い端末では、沈めず・札も最初から出す
   （乗せられないので、隠すと押せることが伝わらない） */
@media (hover: none) {
  .works__fig img { filter: none; }
  .works__note { color: var(--text-dim); }
  .works__open { opacity: 1; }
}
/* 実名を伏せている理由の一行。本文よりさらに小さく、控えめに */
.works__anon {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 10.5px; line-height: 1.75; color: var(--text-mute);
}
.works__title { transition: color 0.5s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .works__fig, .works__fig img, .works__note,
  .works__title, .works__open { transition: none; }
}

/* ---- 閉じのボタン：HUDパネル型（角を切り落とした近未来の操作卓）----
   ポートフォリオ側のボタンの作りをそのまま持ってきて、色だけ HARC に置き換えた。
   層は3枚に分かれている。
     .hud::before … 光る枠。ゆっくり流れ続けるグラデーション
     .hud__edge   … 中の紺の塗り＋走査線＋斜めに走る光
     .hud::after  … カーソルを乗せると入れ替わって出てくる文字

   ★clip-path は .hud 本体に掛けない★
     本体に掛けると、キーボードで辿ったときの focus の輪まで切り落とされる。
     枠（::before）と塗り（__edge）の2枚だけを切る。

   ★文字の入れ替えは疑似要素で作る★
     content: attr(data-label) なので DOM を複製しない。
     ＝読み上げが二重にならない（複製方式だとそうなる）。

   ★触る端末では hover を出さない★
     @media (hover: hover) で囲む。タッチだと押した状態が残り続ける。 */
.web-sub__go {
  margin-top: clamp(24px, 2.8vw, 34px);
  text-align: right;
}
.hud {
  --cut: 11px;                            /* 角を落とす大きさ */
  --rim: 1.5px;                           /* 枠の太さ */
  --rim-a: var(--gold-300);               /* HARCのロゴ金 */
  --rim-b: rgba(108, 99, 255, 0.92);      /* ポートフォリオの近未来の色 */
  --rim-c: rgba(198, 167, 104, 0.10);     /* 枠が消える所 */
  --fill: linear-gradient(150deg, rgba(22, 35, 63, 0.95), rgba(11, 20, 40, 0.98));

  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 15px 26px;
  border-radius: 0;                       /* 角丸をやめると「装置」に見える */
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--text);
  isolation: isolate;
  /* ふだんも「透明な影」を持たせておく。
     none → drop-shadow(...) へ変えると補間できずに一瞬で切り替わる（環境次第でカクつく）。
     影から影へなら、ぼけ具合と濃さをなめらかに動かせる */
  filter: drop-shadow(0 0 0 rgba(198, 167, 104, 0));
  transition: color 0.35s ease, filter 0.45s ease;
}
/* 枠：角を落とした形に切り抜いたグラデーション。金→近未来の青→金 */
.hud::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(115deg,
    var(--rim-c), var(--rim-a) 22%, var(--rim-b) 45%,
    var(--rim-c) 62%, var(--rim-a) 88%, var(--rim-c));
  background-size: 300% 100%;
  /* ★ふだんは流さない★
     animation は掛けたまま、止めた状態（paused）にしておく。
     ホバーで animation を「後から付ける」書き方だと途中から始まって飛ぶ。
     paused → running なら、止まっていた所から静かに動き出し、
     離したときもその場で止まる（先頭へ戻らない）。 */
  animation: hud-rim 7s linear infinite;
  animation-play-state: paused;
  clip-path: polygon(
    0 var(--cut), var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
@keyframes hud-rim { to { background-position: -300% 0; } }

/* 中の塗り。枠の太さだけ内側に置くので、外周がそのまま光る縁になる */
.hud__edge {
  position: absolute; inset: var(--rim); z-index: -1;
  overflow: hidden;
  background: var(--fill);
  clip-path: polygon(
    0 calc(var(--cut) - var(--rim)), calc(var(--cut) - var(--rim)) 0, 100% 0,
    100% calc(100% - var(--cut) + var(--rim)), calc(100% - var(--cut) + var(--rim)) 100%, 0 100%);
  transition: background 0.4s ease;
}
/* 走査線。モニタに映っているような細い横縞 */
.hud__edge::before {
  content: ""; position: absolute; inset: -50%;
  background: repeating-linear-gradient(0deg,
    rgba(198, 167, 104, 0.09) 0 1px, transparent 1px 4px);
  opacity: 0.5;
  transition: opacity 0.4s ease;
}
/* 斜めに走る光。ふだんは左の外に隠してある */
.hud__edge::after {
  content: ""; position: absolute;
  top: -60%; bottom: -60%; left: -75%; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(239, 223, 184, 0.34), transparent);
  transform: skewX(-18deg);
  transition: left 0.8s var(--ease-out);
}
.hud__text,
.hud__icon {
  position: relative; z-index: 1; display: inline-flex;
  transition: transform 0.5s var(--ease-out), opacity 0.3s ease;
}
/* 乗せると入れ替わって出てくる文字 */
.hud::after {
  content: attr(data-label);
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  letter-spacing: 0.06em;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.3s ease;
}
/* 押したときも大きさを変えない。縮めると、縁にカーソルがあるときに
   ホバーが切れて同じ震えが起きる。中の塗りを少し沈めるだけにする */
.hud:active .hud__edge { background: linear-gradient(150deg, rgba(14, 24, 45, 0.97), rgba(7, 14, 30, 0.99)); }
.hud:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 4px; }

@media (hover: hover) {
  /* ★ボタン自身は動かさない★
     translateY(-3px) で持ち上げていたが、これが「文字がガクガクする」原因だった。
     下の縁にカーソルが来ると → ボタンが3px上がる → カーソルが枠の外に出る →
     ホバーが切れて元の位置へ戻る → またカーソルが中に入る …を繰り返す。
     そのたびに入れ替わる文字の transition が最初から走り直すので震えて見える。
     ＝「操作対象は動かさない」。持ち上がった感じは、当たり判定が変わらない
     光（drop-shadow）と縁の明るさだけで出す。 */
  .hud:hover {
    filter: drop-shadow(0 14px 30px rgba(198, 167, 104, 0.30));
    --rim-c: rgba(198, 167, 104, 0.30);
  }
  /* 乗せたときだけ、ゆっくり流れ出す（7秒で一周）。速めると落ち着かないので上げない */
  .hud:hover::before { animation-play-state: running; }
  .hud:hover .hud__edge { background: linear-gradient(150deg, rgba(30, 46, 78, 0.96), rgba(16, 28, 54, 0.98)); }
  .hud:hover .hud__edge::before { opacity: 0.82; animation: hud-scan 1.2s linear infinite; }
  .hud:hover .hud__edge::after { left: 130%; }       /* 光が横切る */
  .hud:hover .hud__text { transform: translateY(-140%); opacity: 0; }
  .hud:hover .hud__icon { transform: translate(1.9em, -0.1em) rotate(45deg) scale(1.08); opacity: 0; }
  .hud:hover::after { transform: translateY(0); opacity: 1; }
}
@keyframes hud-scan { to { transform: translateY(4px); } }

/* カーソルが無い端末では乗せられないので、縁は流したままにする */
@media (hover: none) {
  .hud::before { animation-play-state: running; }
}

@media (prefers-reduced-motion: reduce) {
  /* 止めるのではなく、ふだんの姿のまま動かさない */
  .hud, .hud__text, .hud__icon, .hud__edge,
  .hud__edge::after, .hud::after { transition: none; }
  .hud::before, .hud__edge::before { animation: none; }
}

/* ============================================================
   できること（3枚）
   ------------------------------------------------------------
   面・角丸・線・カーソルの追従は HARC の .biz-card に合わせている。
   ============================================================ */
.pick {
  display: grid; gap: clamp(11px, 1.3vw, 16px);
  grid-template-columns: repeat(3, 1fr);
}
.pick__card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(18px, 2.1vw, 25px);
  /* ★事業内容の3枚（var(--surface)＝白4%）より薄い★
     すぐ上に同じ濃さのカードが3枚並んでいるので、同じ濃さだと
     「もう1つの事業の3本柱」に見えてしまう。一段落として従属させる */
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line-soft);
  border-radius: 4px;                          /* HARCのカードは4px */
  transition: transform 0.6s var(--ease-out), border-color 0.6s var(--ease-out);
}
/* 上辺の線。金から近未来の青へ抜ける。
   ふだんは幅ゼロで隠してあり、カーソルを乗せたカードだけ端から端まで伸びる。
   （以前は02番だけ最初から通していたが、それをやめて全カードの反応にした） */
.pick__card::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg,
    var(--gold-300) 0%, var(--gold-200) 40%, rgba(108, 99, 255, 0.85) 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
/* 乗せたときに出る光。2枚を重ねて1枚の opacity でまとめて出す。
     上 … 天から差す近未来の青（02番だけに付けていたものを全カードの反応へ）
     下 … カーソルを追いかける金（main.js の [data-tilt] が --mx/--my を入れる）
   ★グラデーション自体は動かさず、opacity だけで出し入れする★
     グラデーションの補間は環境差が大きく、板が切り替わったように見えることがある */
.pick__card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(124% 58% at 50% 0%, rgba(108, 99, 255, 0.15), transparent 62%),
    radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%),
      rgba(198, 167, 104, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
/* ★カードも持ち上げない★
   ボタンで起きた「縁にカーソルが来るとホバーが切れて震える」のと同じ構造。
   translateY(-4px) をやめ、縁の明るさと光だけで反応を返す。 */
.pick__card:hover,
.pick__card:focus-visible {
  border-color: rgba(198, 167, 104, 0.34);
}
.pick__card:hover::before,
.pick__card:focus-visible::before { transform: scaleX(1); }
.pick__card:hover::after,
.pick__card:focus-visible::after { opacity: 1; }

.pick__num {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.3em;
  color: var(--gold-300); margin-bottom: 11px;
}
.pick__icon { color: var(--gold-300); margin-bottom: 11px; }
.pick__icon svg { width: 24px; height: 24px; }
.pick__title {
  font-size: clamp(15px, 1.6vw, 17px); font-weight: 700;
  line-height: 1.55; margin-bottom: 8px;
}
.pick__lead { color: var(--text-dim); font-size: 12.5px; line-height: 1.7; margin-bottom: 14px; }
.pick__list {
  border-top: 1px solid var(--line-soft);
  padding-top: 13px; margin-bottom: 15px;
}
.pick__list li {
  position: relative; padding-left: 15px;
  font-size: 12px; line-height: 1.72; color: var(--text-dim);
}
.pick__list li::before {
  content: ""; position: absolute; left: 0; top: 0.92em;
  width: 6px; height: 1px; background: var(--gold-400);
}
.pick__go {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.16em;
  color: var(--gold-300);
}
.pick__go .arrow {
  position: relative; width: 22px; height: 1px; background: currentColor;
  transition: width 0.4s var(--ease-out);
}
.pick__go .arrow::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.pick__card:hover .pick__go .arrow { width: 34px; }

/* ---- 02番（得意なもの）----
   ★見た目の優遇はやめた★
   以前はこの1枚だけ、上辺の線と上から差す近未来の空気を常時出していた。
   いまは「カーソルを乗せたカードに付く」反応に統一している（PC）。
   クラスは、狭い画面で先頭へ回すためだけに残してある。 */

/* ============================================================
   強み4つ — 順に灯る4段
   ------------------------------------------------------------
   ★設計の要点3つ★
   ① 連続と離散を分ける
      左のレールだけがスクロール量に連動して伸びる（連続）。
      段の中身は一度だけ、部位ごとに時間差で入る（離散）。
      文字までスクロールに連動させると、動かすたびに描き直しが走ってがたつく。
   ② 1変数駆動
      段ごとに --lit（0→1）が1つだけ切り替わり、
      番号・見出しの1文字ずつ・本文・タグ・節点・光の帯が全部そこから出ている。
      だから途中で止めても絵が破綻せず、演出同士がズレようがない。
   ③ 動く距離を部位ごとに変える
      全部同じ距離だと1枚の板が動いたように見えて奥行きが出ない。
      実測の階段（見出し40 → 本文60）に合わせている。

   ★箱にしない★
   以前は1段ずつ濃い板に載せていたが、HARCの並び（.fact）は
   細線で区切るだけで箱を作らない。そちらに合わせた。

   ★transform は書かない★
   translate / scale の個別プロパティで書いている。
   同じ要素に transform と keyframes を混ぜると、片方が丸ごと消える。
   ============================================================ */
.edge {
  position: relative;
  display: grid;
  padding-left: clamp(26px, 3.6vw, 46px);
  /* ★上の線はやめた★ 区画の中に横線が増えるほど「別の事業の表」に見える。
     段の区切り（border-bottom）だけ残してある */
}

/* ---- 左のレール。地の線はうっすら、その上を金が下へ伸びる ---- */
.edge__rail {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--line-soft);
}
.edge__rail i {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--gold-200), var(--gold-400));
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}
/* 伸びていく先端の光。線だけだと「描かれている」感が出ない。
   ★芯は金、外へ抜けるところだけ近未来の青★ 金だけだと温度が一定になる */
.edge__rail i::after {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: 5px; height: 5px;
  translate: -50% 50%;
  border-radius: 50%;
  background: var(--gold-200);
  box-shadow: 0 0 9px 2px rgba(198, 167, 104, 0.52),
              0 0 20px 6px rgba(108, 99, 255, 0.26);
}

/* ---- 段。箱ではなく、細線で区切る ---- */
.edge__row {
  --lit: 0;                       /* この1つで段の中身すべてが決まる */
  position: relative;
  display: grid;
  /* 番号 / 本文 / 道具 の3列。
     道具を本文の下に置くと、それだけで1行ぶん縦に伸びる。
     本文の右には余りがあるので、そこへ回して縦を詰めている */
  grid-template-columns: 92px minmax(0, 1fr) minmax(108px, 132px);
  gap: clamp(12px, 2vw, 26px);
  padding: clamp(15px, 1.7vw, 21px) clamp(12px, 1.5vw, 18px);
  border-bottom: 1px solid var(--line-soft);
  transition: border-color 0.7s var(--ease-out);
}
.edge__row.is-lit { --lit: 1; border-color: rgba(198, 167, 104, 0.24); }
/* 動きを減らす設定と、JSが動かない環境。
   ★止めるのではなく「終わった状態」に飛ばす★
   止めるだけだと opacity が初期値のまま固まって中身が消える */
.edge.is-done .edge__row { --lit: 1; border-color: rgba(198, 167, 104, 0.24); }
.edge.is-done .edge__rail i { --p: 1; }
@media (scripting: none) {
  .edge__row { --lit: 1; }
  .edge__rail i { --p: 1; }
}

/* 灯った瞬間に、左から金の光が流れて残る。どこまで読んだかの目印にもなる。
   濃さと角度は #network・#recruit の帯と同じ（90deg・金0.1x・透明へ） */
.edge__row::before {
  content: ""; position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(198, 167, 104, 0.11), rgba(198, 167, 104, 0.02) 46%, transparent 74%);
  opacity: calc(0.001 + 0.999 * var(--lit));
  transform: scaleX(var(--lit));
  transform-origin: left;
  transition: transform 1.15s var(--ease-out), opacity 1.4s ease-out;
}

/* 節点。レールの光が通りかかると灯る。★芯は金、外の滲みだけ近未来の青★ */
.edge__node {
  position: absolute;
  left: calc(clamp(26px, 3.6vw, 46px) * -1);
  top: 20px;
  width: 10px; height: 10px;
  translate: -50% 0;
  scale: calc(0.45 + 0.55 * var(--lit));
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: var(--navy-900);
  opacity: calc(0.001 + 0.999 * var(--lit));
  transition: scale 0.8s var(--ease-out), opacity 0.7s ease-out,
              background-color 0.8s ease-out, border-color 0.8s ease-out,
              box-shadow 1s ease-out;
}
.edge__row.is-lit .edge__node,
.edge.is-done .edge__node {
  background: var(--gold-300);
  border-color: var(--gold-200);
  box-shadow: 0 0 0 3px rgba(198, 167, 104, 0.13),
              0 0 12px 2px rgba(198, 167, 104, 0.30),
              0 0 24px 7px rgba(108, 99, 255, 0.19);
}

/* ---- 番号とカテゴリ。左から差し込む（移動20px＝いちばん小さい） ---- */
.edge__label {
  display: flex; flex-direction: column; gap: 4px;
  opacity: calc(0.001 + 0.999 * var(--lit));
  translate: calc(-20px * (1 - var(--lit))) 0;
  transition: translate 0.9s var(--ease-out) 0.04s, opacity 0.9s ease-out 0.04s;
}
.edge__no {
  font-family: var(--font-en); font-weight: 500;
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1;
  color: var(--gold-300);
  font-variant-numeric: tabular-nums;
}
.edge__cat {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.26em;
  color: var(--text-mute);
  transition: color 0.8s var(--ease-out);
}
.edge__row.is-lit .edge__cat,
.edge.is-done .edge__cat { color: var(--text-dim); }

/* ---- 見出し。1文字ずつ、ぼけたまま浮上する（移動40px） ----
   blur を1行足すだけで「1文字ずつ登場」の上位互換になる。
   --i は文字の順番で、web-edge.js が入れている */
.edge__title { font-size: clamp(14.5px, 1.6vw, 17px); font-weight: 700; line-height: 1.55; }
.edge__title .char {
  display: inline-block;
  opacity: calc(0.001 + 0.999 * var(--lit));
  translate: 0 calc(40px * (1 - var(--lit)));
  filter: blur(calc(10px * (1 - var(--lit))));
  transition:
    translate 0.95s var(--ease-out) calc(0.10s + var(--i, 0) * 0.026s),
    opacity   0.70s ease-out        calc(0.10s + var(--i, 0) * 0.026s),
    filter    0.80s ease-out        calc(0.10s + var(--i, 0) * 0.026s);
}

/* ---- 本文（移動60px＝見出しより大きい＝奥行き） ---- */
.edge__desc {
  margin-top: 7px;
  color: var(--text-dim); font-size: 12.5px; line-height: 1.78;
  opacity: calc(0.001 + 0.999 * var(--lit));
  translate: 0 calc(60px * (1 - var(--lit)));
  transition: translate 1.05s var(--ease-out) 0.32s, opacity 0.8s ease-out 0.32s;
}

/* ---- タグ。縮んだ状態から湧いて出る ----
   translateY だけだと「流れてきた」。scale を混ぜると「湧いて出た」になる。
   点く順番は web-edge.js がわざと崩している（左から順だと機械に見える） */
/* ---- 使う道具。本文の右の列に、縦に並べる ----
   ★丸い枠はやめた★
   段そのものが線で区切られているのに、その中に小さな枠を3つ並べると
   「枠の中に枠」になって、見るべきものが増えるだけだった。
   枠を外し、頭に金の短い線を置くだけにしている
   （カードの箇条書き .pick__list li::before と同じ見せ方にそろえた）。 */
.edge__tags {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 4px;
}
.edge__tag {
  position: relative; padding-left: 13px;
  font-family: var(--font-ui); font-size: 9.5px; letter-spacing: 0.08em;
  line-height: 1.5; color: var(--text-mute);
  opacity: calc(0.001 + 0.999 * var(--lit));
  /* 枠が無くなったので、縮ませるのではなく横から差し込む形にした
     （素の文字を scale すると、字が拡大しているように見える） */
  translate: calc(-10px * (1 - var(--lit))) 0;
  transition: translate 0.8s var(--ease-out) calc(0.50s + var(--i, 0) * 0.07s),
              opacity 0.6s ease-out          calc(0.50s + var(--i, 0) * 0.07s);
}
.edge__tag::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 6px; height: 1px; background: var(--gold-400);
}
.edge__row.is-lit .edge__tag,
.edge.is-done .edge__tag { color: var(--text-dim); }

/* ---- 段に乗せたときの反応 ----
   読み物なので、動かすのは控える。形も位置も変えず、
   下線が金に寄る・節点の滲みが広がる・番号が明るくなる、の3つだけ。 */
@media (hover: hover) {
  .edge__row:hover { border-color: rgba(198, 167, 104, 0.42); }
  .edge__row:hover .edge__node {
    box-shadow: 0 0 0 4px rgba(198, 167, 104, 0.16),
                0 0 16px 3px rgba(198, 167, 104, 0.40),
                0 0 30px 9px rgba(108, 99, 255, 0.26);
  }
  .edge__row:hover .edge__no { color: var(--gold-200); }
  .edge__row:hover .edge__tag { color: var(--text-dim); }
}
.edge__no { transition: color 0.6s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  /* 「終わった状態」は .is-done 側で出す。ここでは動きだけ消す */
  .edge__no,
  .edge__rail i,
  .edge__row,
  .edge__row::before,
  .edge__node,
  .edge__label,
  .edge__cat,
  .edge__title .char,
  .edge__desc,
  .edge__tag,
  .edge__tag::before { transition: none; }
}

/* ============================================================
   画面が狭いとき
   ============================================================ */
@media (max-width: 980px) {
  /* ★並び替えはしない★
     以前は「得意」な02番を order: -1 で先頭へ回していたが、
     そのバッジと常時表示をやめた今は、番号だけが 02 → 01 → 03 と
     入れ替わって見えるだけになっていた。書いてある順に並べる。 */
  .pick { grid-template-columns: 1fr; }
}

/* ★カーソルが無い端末では、はじめから全部に出す★
   触る端末では hover が起きない（あるいは押した状態が残る）ので、
   反応として隠しておくと一生見えない。3枚すべてに最初から付ける。 */
@media (hover: none) {
  .pick__card::before { transform: scaleX(1); }
  .pick__card::after { opacity: 1; }
  .pick__card { border-color: rgba(198, 167, 104, 0.22); }
}
@media (max-width: 768px) {
  /* 強み4段：番号を本文の上へ回し、横に並べる */
  .edge { padding-left: 22px; }
  .edge__row {
    /* 3列は入らないので1列に戻す。道具は本文の下で横に流す */
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 0 20px 14px;
  }
  .edge__tags { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; padding-top: 2px; }
  .edge__node { left: -22px; top: 26px; }
  .edge__label { flex-direction: row; align-items: baseline; gap: 12px; }
  .edge__no { font-size: 24px; }
  .edge__desc { font-size: 14px; }
  .works { grid-template-columns: 1fr; gap: 22px; }
  /* 派生の塊も、狭い画面では余白を詰める */
  .web-sub__label { margin-top: 24px; }
  /* 狭い画面では右寄せをやめ、押せる幅をしっかり取る */
  .web-sub__go { text-align: center; }
  .hud { width: 100%; padding: 15px 18px; font-size: 12.5px; }
}

/* ============================================================
   web.html（単独ページ版）だけのための後始末
   ------------------------------------------------------------
   トップページの #web を「事業内容の派生」に作り直したので、
   .web-intro / .web-sec__close 系の指定は本体から消した。
   web.html はまだ旧い作りのまま残っているため、そのままだと
   名乗りと閉じの見た目が崩れる。最低限だけここで戻しておく。

   ★このファイルは近いうちに消してよい★
   中身はトップページの #web に移っており、noindex・canonical も
   トップへ向けてある。どこからもリンクしていない。
   ============================================================ */
body[data-page="web"] .web-intro { max-width: 40em; margin-bottom: clamp(28px, 3.4vw, 44px); }
body[data-page="web"] .web-intro__lead {
  font-size: clamp(17px, 2.1vw, 22px);
  font-weight: 700; line-height: 1.68; margin-bottom: 15px;
}
body[data-page="web"] .web-intro__body {
  color: var(--text-dim); font-size: 13.5px; line-height: 1.85;
}
body[data-page="web"] .web-intro__body + .web-intro__body { margin-top: 0.85em; }
body[data-page="web"] .web-intro__actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px;
}
body[data-page="web"] .cta-band__note {
  margin-top: 16px;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.08em;
  line-height: 1.8; color: var(--text-mute);
}
@media (max-width: 768px) {
  body[data-page="web"] .web-intro__actions .btn { width: 100%; justify-content: center; }
}