@charset "UTF-8";
/* ============================================================
   NETWORK — 覗き窓の奥行き／左右ジグザグ／くねくね線／高速タイプ表示
   （index-test.html 専用）
   ------------------------------------------------------------
   ★覗き窓の作り（figaro-vis.jp を実測して型だけ借りたもの）★
   向こうは WebGL も GSAP も使っていない。構造はこれだけ：

     窓   … overflow:hidden ＋ clip-path で切り抜いた形
     中身 … 窓より一回り大きい層を transform:translate3d で動かす

   窓は面と一緒にページ速度で動き、中身はそれより遅く動く。
   この速度差だけで「面に穴が開いていて、奥に別の空間がある」に見える。
   形は平行四辺形、数値はこちらで決め直してある（向こうの値は使っていない）。
   ============================================================ */

/* ---------- 1. 3つの節を左／右／左に振る ---------- */
.facts--stagger {
  position: relative;                    /* くねくね線を重ねる基準 */
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 0 clamp(14px, 2.4vw, 30px);
  border-top: 0;
  margin-top: clamp(40px, 6vw, 76px);
}
.facts--stagger .fact {
  position: relative; z-index: 1;        /* 線より前 */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 6px clamp(14px, 2.6vw, 30px);
  padding: clamp(20px, 2.6vw, 30px) clamp(18px, 2.4vw, 30px);
  border-bottom: 0;
  border-left: 1px solid var(--line);
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}
/* 段ごとに落とす量を変えて、高さを揃えない。
   ※ nth-child は使わない。線や画像も同じグリッドの子なので番号がずれる */
.facts--stagger .fact[data-slot="1"] { grid-column: 1 / span 7; grid-row: 1; }
.facts--stagger .fact[data-slot="2"] { grid-column: 6 / span 7; grid-row: 2; margin-top: clamp(26px, 5vw, 72px); }
.facts--stagger .fact[data-slot="3"] { grid-column: 2 / span 7; grid-row: 3; margin-top: clamp(18px, 3.4vw, 48px); }
/* 右に出る段だけ、罫を右側へ返す */
.facts--stagger .fact[data-slot="2"] {
  border-left: 0; border-right: 1px solid var(--line); text-align: right;
}
.facts--stagger .fact[data-slot="2"] .fact__num { justify-self: end; }

.facts--stagger .fact__no { grid-column: 1; }
.facts--stagger .fact__label { grid-column: 1 / -1; }
.facts--stagger .fact__num { grid-column: 1 / -1; margin-top: 10px; }

/* ---------- 2. 空いた場所に差し込む2つの覗き窓 ---------- */
/* 01の右と、02の左。ジグザグの内側に向かって傾けてあるので、
   2つの窓が互いを向き合う形になる */
.net-media { position: relative; z-index: 1; }
.net-media--a { grid-column: 8 / span 5; grid-row: 1; }
.net-media--b { grid-column: 1 / span 5; grid-row: 2; align-self: center; }
.net-media .depth { margin: 0; }

/* ★窓の比率と層の大きさは「顔が切れないこと」から逆算している★
   object-fit:cover は縦横で大きい方の倍率を採る。
   層の縦横比が素材比(1567/1045 = 1.50)以上なら幅基準になり、横は一切切れない。
       層の縦横比 = 窓の比率 A ÷ 層の高さ倍率 k
   旧: A=16/9, k=1.33 → 1.337 < 1.50 …幅基準にならず左右の人が切れていた
   新: A=2/1,  k=1.28 → 1.563 ≥ 1.50 …横トリミングは 0
   集合写真は顔が「横に広く薄い帯」（team.jpg は縦33〜48%）なので、
   横を1ミリも削らないことを最優先し、そのぶん縦の可動域を14%に抑える。
   ＝スクロールの奥行きより、全員の顔が写っていることを優先した設定 */
.depth__win {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 2 / 1;
  background: #070D1A;
}
/* 平行四辺形。2つの窓で傾きを反転させ、ジグザグの流れに沿わせる。
   傾きを6%に留めているのは、顔の帯(縦33〜48%)で削られる量を
   端の人の位置(横8%)より内側に収めるため（実効 約3.6%） */
.net-media--a .depth__win { clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }
.net-media--b .depth__win { clip-path: polygon(0 0, 94% 0, 100% 100%, 6% 100%); }
/* 穴のふち。同じ形の線を内側に回して、面が抜けていることを示す */
.depth__win::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: 1px solid rgba(198, 167, 104, 0.30);
  clip-path: inherit;
}

.depth__far {
  position: absolute; left: 0; right: 0; top: -14%; height: 128%;
  z-index: 1;
  transform: translate3d(0, var(--y, 0px), 0);
  will-change: transform;
}
.depth__far img { width: 100%; height: 100%; object-fit: cover; }
.depth__far::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 20, 40, 0.42), rgba(11, 20, 40, 0.66));
  mix-blend-mode: multiply;
}
/* 白ホリの写真は紺をかぶせると濁るので、こちらは軽く沈める程度にする */
.net-media--b .depth__far::after {
  background: linear-gradient(180deg, rgba(11, 20, 40, 0.30), rgba(11, 20, 40, 0.52));
}

/* 中間の層＝金の光のもや。絵ではないので大きく動かしても破綻しない。
   写真をゆっくりにしたぶん、奥行きはこちらの速度差で作る */
.depth__haze {
  position: absolute; left: -10%; right: -10%; top: -80%; height: 260%;
  z-index: 2; pointer-events: none; opacity: 0.5;
  background:
    radial-gradient(36% 30% at 24% 30%, rgba(198, 167, 104, 0.34), transparent 70%),
    radial-gradient(30% 26% at 76% 70%, rgba(237, 232, 220, 0.16), transparent 72%);
  transform: translate3d(0, var(--y, 0px), 0);
  will-change: transform;
}

.depth__cap {
  margin-top: 12px;
  font-size: 12px; line-height: 1.8; letter-spacing: 0.06em; color: var(--text-dim);
}
.depth__cap::before {
  content: ""; display: inline-block; vertical-align: 0.28em;
  width: 18px; height: 1px; margin-right: 10px; background: var(--gold-400);
}

/* ---------- 3. 3つの節をたどる、くねくねした線 ---------- */
/* 直線で結ぶと表になってしまう。左右に振った節を曲線でつなぐと
   「一本の道が拠点を巡っている」に見える。座標は network.js が実測して引く */
.net-thread {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.net-thread svg { width: 100%; height: 100%; display: block; overflow: visible; }
.net-thread__p {
  fill: none; stroke: var(--gold-400); stroke-width: 1.5;
  stroke-linecap: round; opacity: 0.72;
  /* pathLength=1 にしてあるので、実長を測らずに割合で描ける */
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--d, 0));
}
.net-thread__n {
  fill: var(--gold-300);
  transform: rotate(45deg) scale(0); transform-box: fill-box; transform-origin: center;
  transition: transform 0.5s var(--ease-out);
}
.net-thread__n.is-on { transform: rotate(45deg) scale(1); }

/* ---------- 4. 高速タイプ表示 ---------- */
/* 文字は最初から全部DOMに入れておき、見せる／見せないだけを切り替える。
   1文字ずつ挿入すると幅が伸び縮みして、周りのレイアウトが揺れるため。 */
.type__c { opacity: 0; }
.type__c.is-on { opacity: 1; }
/* キャレットは幅0の入れ物＋擬似要素の棒。
   幅を持たせると、進むたびに行の長さが変わって文字が横に暴れる */
.type__caret { position: relative; display: inline-block; width: 0; }
.type__caret::before {
  content: ""; position: absolute; left: 0; top: 0.08em;
  width: 2px; height: 1em; background: var(--gold-300);
  animation: typeCaret 0.5s steps(1) infinite;
}
@keyframes typeCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- 5. 狭い画面 ---------- */
@media (max-width: 760px) {
  .facts--stagger { grid-template-columns: 1fr; }
  .facts--stagger .fact[data-slot="1"],
  .facts--stagger .fact[data-slot="2"],
  .facts--stagger .fact[data-slot="3"] { grid-column: 1; grid-row: auto; margin-top: 14px; }
  .facts--stagger .fact[data-slot="2"] {
    border-right: 0; border-left: 1px solid var(--line); text-align: left;
  }
  .facts--stagger .fact[data-slot="2"] .fact__num { justify-self: start; }
  /* 縦一列になると「左右を縫う線」が意味を失うので出さない */
  .net-thread { display: none; }
  .net-media--a, .net-media--b { grid-column: 1; grid-row: auto; }
  /* 幅が狭いぶん 16:9 まで戻す。k は 16/9 ÷ 1.50 = 1.185 が上限なので 1.16 に置く
     （これを超えると、また左右の人が切れる） */
  .depth__win { aspect-ratio: 16 / 9; }
  .net-media--a .depth__win { clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%); }
  .net-media--b .depth__win { clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%); }
  .depth__far { top: -8%; height: 116%; }
}

/* ---------- 6. 動きを控える設定のとき ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .depth__far,
  html:not(.motion-full) .depth__haze { transform: none; }
  html:not(.motion-full) .net-thread__p { stroke-dashoffset: 0; }
  html:not(.motion-full) .net-thread__n { transform: rotate(45deg) scale(1); }
  html:not(.motion-full) .type__c { opacity: 1; }
  html:not(.motion-full) .type__caret { display: none; }
}
html.motion-reduced .depth__far,
html.motion-reduced .depth__haze { transform: none; }
html.motion-reduced .net-thread__p { stroke-dashoffset: 0; }
html.motion-reduced .net-thread__n { transform: rotate(45deg) scale(1); }
html.motion-reduced .type__c { opacity: 1; }
html.motion-reduced .type__caret { display: none; }