/* ============================================================
   トップページの「現場360」の部品（2026-10-19）
   - WHAT WE DO の紹介映像（再生画面）
   - WHY 360° の実写360度（見回せる表示）
   - SERVICES の「現場・工場」の見出し
   トップだけが読み込む。style.css に入れると、公開中の約900ページの
   キャッシュキーが一斉に書き換わるため、別のファイルにしている。
   部品の作りは統合ページ /genba/ の冒頭と紹介映像の再生画面を移植したもの。
   ============================================================ */
:root {
  --g360-night: #071119;
  --g360-hazard: #f4b400;          /* 装飾専用。文字色に使わない */
  --g360-on-dark: #e9f1f5;
  --g360-on-dark-2: #c6d7e2;
}
.g360-pv [hidden], .g360-sph [hidden], .g360-sph[hidden] { display: none !important; }

/* ---------- 再生の丸（黄色い丸＋三角） ---------- */
.g360-play__ic { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--g360-hazard); display: grid; place-items: center; }
.g360-play__ic::before { content: ""; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--g360-night); }

/* ---------- 本文の中の導線（統合ページへ） ---------- */
.g360-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; color: var(--jg-primary); font-size: 16px; font-weight: 700; text-decoration: none; border-bottom: 2px solid rgba(0, 102, 136, .28); transition: border-color var(--dur-1) ease; }
.g360-link:hover { border-color: var(--jg-primary); }

/* ============================================================
   紹介映像（WHAT WE DO）
   焼き込んだ字幕を隠さないため、映像の上には「再生する」の札だけを置き、
   操作列は映像の下に置く（統合ページと同じ。標準の controls は使わない）
   ============================================================ */
.top26-what__fig.g360-pv { border-radius: 0; box-shadow: none; }
.g360-pv__frame { position: relative; border-radius: 10px; overflow: hidden; background: var(--g360-night); box-shadow: var(--shadow); }
.g360-pv__stage { position: relative; aspect-ratio: 16 / 9; cursor: pointer; }
.g360-pv__stage video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; background: var(--g360-night); }
.g360-pv__big { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 9px; border-radius: 999px; cursor: pointer;
  color: #fff; font-family: var(--font-body); font-size: 15px; font-weight: 700; line-height: 1;
  background: rgba(7, 17, 25, .6); border: 1px solid rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .2s, border-color .2s; }
.g360-pv__big:hover { background: rgba(7, 17, 25, .82); border-color: #fff; }
.g360-pv__big-t { font-family: var(--font-label); font-size: 13.5px; font-weight: 600; color: var(--g360-on-dark-2); font-variant-numeric: tabular-nums; }
.g360-pv__frame.is-started .g360-pv__big { display: none; }
.g360-pv__frame.is-ended .g360-pv__big { display: inline-flex; }
.g360-pv__spin { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 3px solid rgba(233, 241, 245, .25); border-top-color: var(--g360-on-dark); opacity: 0; pointer-events: none; transition: opacity .2s; }
.g360-pv__frame.is-waiting .g360-pv__spin { opacity: 1; animation: g360Spin .9s linear infinite; }
@keyframes g360Spin { to { transform: rotate(360deg); } }
.g360-pv__bar { display: flex; align-items: center; gap: 2px; height: 52px; padding: 0 6px; background: var(--g360-night);
  border-top: 1px solid rgba(233, 241, 245, .08); color: var(--g360-on-dark); }
.g360-pv__btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: inherit; cursor: pointer; transition: background-color .15s; }
.g360-pv__btn:hover { background: rgba(233, 241, 245, .1); }
.g360-pv__btn svg { width: 22px; height: 22px; fill: currentColor; }
.g360-pv__btn svg + svg, .g360-pv__frame.is-playing .g360-pv__i-play, .g360-pv__frame.is-muted .g360-pv__i-vol, .g360-pv__frame.is-full .g360-pv__i-full { display: none; }
.g360-pv__frame.is-playing .g360-pv__i-pause, .g360-pv__frame.is-muted .g360-pv__i-mute, .g360-pv__frame.is-full .g360-pv__i-exit { display: block; }
.g360-pv__time { flex: none; padding: 0 8px 0 4px; font-family: var(--font-label); font-size: 13px; font-weight: 500; color: var(--g360-on-dark-2);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.g360-pv__seek { --p: 0%; flex: 1 1 auto; min-width: 0; height: 44px; margin: 0 8px; padding: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.g360-pv__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--g360-hazard) 0 var(--p), rgba(233, 241, 245, .25) var(--p) 100%); }
.g360-pv__seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--g360-hazard); box-shadow: 0 0 0 3px rgba(7, 17, 25, .55); }
.g360-pv__seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(233, 241, 245, .25); }
.g360-pv__seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--g360-hazard); }
.g360-pv__seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--g360-hazard); box-shadow: 0 0 0 3px rgba(7, 17, 25, .55); }
.g360-pv__frame :focus-visible { outline: 3px solid var(--g360-hazard); outline-offset: 2px; }
.g360-pv__bar :focus-visible { outline-offset: -3px; }
.g360-pv__frame:fullscreen { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; border-radius: 0; background: #000; box-shadow: none; }
.g360-pv__frame:fullscreen .g360-pv__stage { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.g360-pv__frame:fullscreen .g360-pv__bar { flex: none; height: auto; min-height: 56px; padding-bottom: env(safe-area-inset-bottom); }
.g360-pv__frame:-webkit-full-screen { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; border-radius: 0; background: #000; box-shadow: none; }
.g360-pv__frame:-webkit-full-screen .g360-pv__stage { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.g360-pv__frame:-webkit-full-screen .g360-pv__bar { flex: none; height: auto; min-height: 56px; padding-bottom: env(safe-area-inset-bottom); }
.g360-pv__note { margin: 12px 2px 0; color: var(--jg-ink-2); font-size: 14px; line-height: 1.7; }

/* ============================================================
   実写360度（WHY 360°）。生成画像の写真を置き換え、自分の手が映った現場を見回せるようにする
   全画面・傾けて見回す・ゴーグルの3つを必ず載せる（全社ルール 2026-08-25）
   ============================================================ */
.top26-fieldScene__photo.g360-sph { position: relative; min-height: 420px; aspect-ratio: 16 / 10; background: var(--jg-deep); overflow: hidden; color: #fff; isolation: isolate; }
.g360-sph__view { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; outline: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.g360-sph__view:focus-visible { box-shadow: inset 0 0 0 3px var(--g360-hazard); }
.g360-sph__view.is-drag { cursor: grabbing; }
.g360-sph__view canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.g360-sph.is-ready .g360-sph__view canvas { opacity: 1; }
.top26-fieldScene__photo .g360-sph__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 60%; -webkit-user-drag: none; pointer-events: none; }
.g360-sph__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 17, 25, .5) 0, rgba(7, 17, 25, 0) 96px), linear-gradient(0deg, rgba(7, 17, 25, .55) 0, rgba(7, 17, 25, 0) 104px); }
.g360-sph__badge { position: absolute; z-index: 3; left: 16px; top: 16px; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; max-width: calc(100% - 32px);
  min-height: 36px; margin: 0; padding: 6px 14px 6px 10px; border-radius: 999px; pointer-events: none;
  background: rgba(7, 17, 25, .62); border: 1px solid rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.4; letter-spacing: .02em; }
.g360-sph__badge svg { flex: none; width: 20px; height: 20px; }
.g360-sph__badge span { font-weight: 500; color: var(--g360-on-dark-2); }
/* 見回せることを、最初に一度だけ伝える（触れたら止める。動きを減らす設定では出さない） */
.g360-sph__hand { position: absolute; z-index: 2; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; opacity: 0; pointer-events: none; }
.g360-sph__hand svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45)); }
.g360-sph.is-hint .g360-sph__hand { animation: g360Hand 3.2s cubic-bezier(.45, .05, .35, 1) 1 both; }
@keyframes g360Hand {
  0% { opacity: 0; transform: translateX(0) scale(.9); }
  12% { opacity: 1; transform: translateX(0) scale(1); }
  38% { transform: translateX(-56px); }
  70% { transform: translateX(56px); }
  88% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0) scale(.9); }
}
.g360-sph__tools { position: absolute; z-index: 4; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.g360-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 6px; cursor: pointer;
  background: rgba(8, 21, 31, .72); border: 1px solid rgba(255, 255, 255, .34); color: #fff;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.g360-tool:hover { background: rgba(8, 21, 31, .9); border-color: #fff; }
.g360-tool.is-on { background: var(--color-cta-primary); border-color: transparent; }
.g360-tool svg { flex: none; width: 16px; height: 16px; }
.g360-tool:focus-visible, .g360-sph__close:focus-visible { outline: 3px solid var(--g360-hazard); outline-offset: 2px; }
.g360-sph__close { display: none; position: absolute; z-index: 5; left: 12px; top: calc(12px + env(safe-area-inset-top));
  min-height: 44px; padding: 0 16px; border-radius: 6px; cursor: pointer;
  background: rgba(8, 21, 31, .85); border: 1px solid rgba(255, 255, 255, .4); color: #fff; font-family: var(--font-body); font-size: 14px; font-weight: 700; }

/* 全画面（iPhone の Safari は映像以外を全画面にできないので、画面いっぱいに広げる代わりを用意する） */
.top26-fieldScene__photo.g360-sph.is-fs { position: fixed; inset: 0; z-index: 2000; width: auto; height: 100vh; height: 100dvh; min-height: 0; aspect-ratio: auto; border-radius: 0; }
.g360-sph.is-fs .g360-sph__badge { display: none; }
.g360-sph.is-fs .g360-sph__view { touch-action: none; }
.g360-sph.is-fs .g360-sph__close { display: block; }
.g360-sph.is-fs .g360-sph__tools { right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); }
/* 入場の動き（translate）が付いた親の中では position:fixed が画面に固定されないので、全画面の間だけ外す。
   遷移も止める（translate が 0 から none へ動く 0.8 秒の間も、親が固定の基準になってしまう） */
html.g360-fs-lock, html.g360-fs-lock body { overflow: hidden; }
html.g360-fs-lock .top26-fieldScene { translate: none !important; transition: none !important; overflow: visible !important; }

/* ============================================================
   SERVICES の「現場・工場」の見出し：サービス名「現場360」と、統合ページへの導線
   カード（名前・説明・画像）は管理画面のデータなので触らない
   ============================================================ */
.top26-pillar__top.g360-pillarTop { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: center; padding-bottom: 26px; }
.g360-pillarTop h3 { font-size: 34px; line-height: 1.25; letter-spacing: .02em; }
.g360-pillarTop .top26-pillar__lead { margin-top: 12px; color: var(--jg-ink); font-size: 18px; font-weight: 700; line-height: 1.6; }
.g360-pillarTop .g360-link { margin-top: 14px; }
.g360-pillarTop__fig { margin: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--jg-tint); box-shadow: 0 12px 28px rgba(0, 52, 77, .14); }
.g360-pillarTop__fig img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }

@media (max-width: 1080px) {
  .top26-pillar__top.g360-pillarTop { grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; }
}
@media (max-width: 720px) {
  .g360-pv__frame { border-radius: 6px; }
  .g360-pv__big { left: 12px; bottom: 12px; min-height: 44px; padding-right: 16px; font-size: 14px; }
  .g360-pv__big-t { display: none; }
  .g360-pv__big .g360-play__ic { width: 26px; height: 26px; }
  .g360-pv__big .g360-play__ic::before { border-width: 5px 0 5px 9px; }
  .g360-pv__bar { height: 48px; padding: 0 2px; }
  .g360-pv__time { padding: 0 4px 0 2px; font-size: 12px; }
  .g360-pv__seek { margin: 0 6px; }
  .g360-pv__note { font-size: 13.5px; }

  .top26-fieldScene__photo.g360-sph { aspect-ratio: auto; height: 380px; min-height: 0; }
  .g360-sph__badge { left: 10px; top: 10px; max-width: calc(100% - 20px); gap: 2px 8px; border-radius: 16px; font-size: 13px; }
  .g360-sph__tools { left: 10px; right: 10px; bottom: 10px; justify-content: center; gap: 6px; }
  .g360-tool { min-height: 44px; padding: 0 12px; font-size: 13px; }
  .g360-sph__hand { width: 64px; height: 64px; margin: -32px 0 0 -32px; }

  .top26-pillar__top.g360-pillarTop { grid-template-columns: 1fr; gap: 18px; padding-bottom: 18px; }
  .g360-pillarTop h3 { font-size: 28px; }
  .g360-pillarTop .top26-pillar__lead { font-size: 17px; }
  .g360-pillarTop__fig { aspect-ratio: 16 / 8; }
  .g360-link { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .g360-pv__frame.is-waiting .g360-pv__spin { animation: none; border-color: var(--g360-on-dark); }
  .g360-pv__big, .g360-pv__btn, .g360-sph__view canvas { transition: none; }
  .g360-sph.is-hint .g360-sph__hand { animation: none; }
}