@charset "UTF-8";
/* ============================================================
   BUSINESS — index-test.html 専用の上書き
   ------------------------------------------------------------
   style.css は index.html と共用なので触らず、ここで後勝ちさせる。

   ★直しているもの★
   .stack__panel は position:sticky / top:0 / min-height:100svh。
   これは「1画面に収まる内容」を前提にした作りで、
   BUSINESS の中身は 1139px（ビューポート 720px）あった。
   画面より背の高いパネルを top:0 で貼り付けると、
   はみ出した下部は読まれないまま次のパネルに覆われる。
   → 中盤の積層はやめ、普通に流れるセクションに戻す。
     「覆いかぶさる」見た目は、境目の金の細線だけ残して代替する。

   ★足しているもの★
   ① 事業ごとの図版（線画SVG）
   ② 3枚を貫く金の線。スクロールで左→右に描かれ、
      各カードの位置で菱形の節を打つ＝「3つの事業が連携している」
      という本文の主張を、そのまま図にしたもの。
   ============================================================ */

/* ---------- 1. 積層をやめる ---------- */
.stack .stack__panel {
  position: static;
  min-height: 0;
  box-shadow: none;
}
/* 継ぎ目は金の細線1本で示す。パネルが重なる感じだけ残す */
.stack .stack__panel + .stack__panel { position: relative; }
.stack .stack__panel + .stack__panel::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-300), transparent);
  opacity: 0.5; pointer-events: none;
}

/* ---------- 2. カード ---------- */
/* 3枚の背の高さを揃える。文字量が1行ずれても頭が揃っていないと
   「組み上がった」に見えないため */
.biz-grid { align-items: stretch; }
.biz-card { display: flex; flex-direction: column; }
.biz-card__desc { margin-top: auto; }

/* ---------- 3. カードの面を持ち上げる ----------
   実測すると、セクションの地が rgb(11,20,40) に対して
   カードの地は rgb(21,29,49)。差が小さすぎて「カードが乗っている」
   ように見えず、面ごと暗く沈んで見えていた。
   （文字のコントラストは 7.2〜13.7 で足りていたので、原因は面の方）
   さらに図版の地に rgba(0,0,0,.18) を重ねていて、
   暗い面をもう一段暗くしていた。黒を抜き、白を足す。 */
#business .biz-card {
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.028));
  border-color: rgba(198, 167, 104, 0.22);
}
#business .biz-card:hover,
#business .biz-card:focus-within { border-color: rgba(198, 167, 104, 0.42); }

/* ---------- 4. 事業ごとの図版 ---------- */
.biz-fig {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  margin-bottom: clamp(18px, 2.4vw, 26px);
  border: 1px solid rgba(198, 167, 104, 0.24); border-radius: 3px;
  /* 黒を重ねない。カードより一段だけ明るくして、図が浮くようにする */
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035));
  overflow: hidden;
}
.biz-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.biz-fig .st { fill: none; stroke: var(--gold-300); vector-effect: non-scaling-stroke; }
.biz-fig .st--dim  { stroke: rgba(198, 167, 104, 0.34); }
.biz-fig .st--faint{ stroke: rgba(237, 232, 220, 0.13); }
.biz-fig .fl { fill: var(--gold-300); }

/* ---- Wi-Fi の電波が外へ広がる（光回線） ----
   円弧を内側から順に光らせる。発信源を原点にして少しだけ膨らませると
   「今そこから飛んでいる」ように見える。
   transform-origin は viewBox の座標で指定できる（SVGの既定が view-box のため） */
.biz-fig .wave {
  stroke: var(--gold-300); stroke-width: 2.4; stroke-linecap: round;
  transform-origin: 160px 138px;
  animation: bizWave 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
  opacity: 0;
}
.biz-fig .wave--1 { animation-delay: 0s; }
.biz-fig .wave--2 { animation-delay: .26s; }
.biz-fig .wave--3 { animation-delay: .52s; }
@keyframes bizWave {
  0%       { opacity: 0;   transform: scale(.72); }
  22%      { opacity: 1;   transform: scale(1); }
  62%      { opacity: .55; transform: scale(1.06); }
  100%     { opacity: 0;   transform: scale(1.12); }
}
/* 発信源の点。電波が出る瞬間に合わせて息をする */
.biz-fig .wifi-dot { animation: bizDot 2.6s cubic-bezier(.4, 0, .2, 1) infinite; transform-origin: 160px 138px; }
@keyframes bizDot { 0%, 100% { transform: scale(1); opacity: .85; } 18% { transform: scale(1.25); opacity: 1; } }

/* 検知枠を上下に走る走査線（AIカメラ） */
.biz-fig .scan { animation: bizScan 3.6s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
@keyframes bizScan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(58px); } }

/* パネルの上を光が滑る（太陽光） */
.biz-fig .sheen {
  fill: rgba(239, 223, 184, 0.5);
  animation: bizSheen 4.4s ease-in-out infinite;
}
@keyframes bizSheen { 0%, 100% { opacity: 0; transform: translateX(-40px); } 50% { opacity: 1; transform: translateX(40px); } }

/* 太陽の光条だけゆっくり回す */
.biz-fig .rays { transform-origin: 246px 46px; animation: bizRays 24s linear infinite; }
@keyframes bizRays { to { transform: rotate(360deg); } }

/* ---------- 5. 3枚を貫く金の線 ---------- */
/* --d はスクロール量（0→1）。assets/js/business.js が流す */
.biz-link {
  position: relative; height: 1px; margin: 0 0 clamp(20px, 2.6vw, 30px);
  background: var(--line-soft);
}
.biz-link__draw {
  position: absolute; inset: 0; background: var(--gold-300);
  transform-origin: 0 50%; transform: scaleX(var(--d, 0));
}
.biz-link__node {
  position: absolute; top: 50%; width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px; background: var(--gold-300);
  transform: rotate(45deg) scale(0); transform-origin: center;
  transition: transform 0.5s var(--ease-out);
}
/* 線の先端が節を通り過ぎたら、その節を打つ */
.biz-link__node.is-on { transform: rotate(45deg) scale(1); }
/* left は business.js がカラム幅と gap から実測して入れる。
   16.6% / 50% / 83.3% と決め打ちにすると gap のぶんズレる（実測で8〜9px） */
.biz-link__node { left: 50%; }

/* 狭い画面ではカードが縦積みになるので、貫く線は意味を失う＝出さない */
@media (max-width: 900px) {
  .biz-link { display: none; }
}

/* ---------- 6. ホバー：光は残す、暗くするのはやめる ----------
   motion-cinema.css は「主役以外を opacity:.42 に引く」スポットライトだが、
   このセクションは紺地なので 42% だと文字が沈んで読めなくなる。
   金の光（.biz-grid::before）は主役の位置を示すのに効いているので残し、
   他の2枚を暗くする指定だけを打ち消す。 */
.biz-grid.is-spot .biz-card:not(.is-spot-on) > * { opacity: 1; }

/* 図版を差し替えたことで .biz-card__icon のホバー拡大が効かなくなったぶん、
   触れたカードの図版の枠を金に寄せて手応えを返す（明るくする方向だけ） */
.biz-fig { transition: border-color 0.5s var(--ease-out), background 0.5s var(--ease-out); }
.biz-card:hover .biz-fig,
.biz-card:focus-within .biz-fig {
  border-color: var(--line);
  /* ホバーでも黒は重ねない（暗く見える原因だった） */
  background: linear-gradient(158deg, rgba(198, 167, 104, 0.14), rgba(255, 255, 255, 0.05));
}

/* ---------- 7. 動きを控える設定のとき ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .biz-fig .wave,
  html:not(.motion-full) .biz-fig .wifi-dot,
  html:not(.motion-full) .biz-fig .scan,
  html:not(.motion-full) .biz-fig .sheen,
  html:not(.motion-full) .biz-fig .rays { animation: none; }
  html:not(.motion-full) .biz-fig .wave { opacity: .75; transform: none; }
  html:not(.motion-full) .biz-fig .sheen { opacity: 0; }
  html:not(.motion-full) .biz-link__draw { transform: scaleX(1); }
  html:not(.motion-full) .biz-link__node { transform: rotate(45deg) scale(1); }
}
html.motion-reduced .biz-fig .wave,
html.motion-reduced .biz-fig .wifi-dot,
html.motion-reduced .biz-fig .scan,
html.motion-reduced .biz-fig .sheen,
html.motion-reduced .biz-fig .rays { animation: none; }
html.motion-reduced .biz-fig .wave { opacity: .75; transform: none; }
html.motion-reduced .biz-fig .sheen { opacity: 0; }
html.motion-reduced .biz-link__draw { transform: scaleX(1); }
html.motion-reduced .biz-link__node { transform: rotate(45deg) scale(1); }