/* ===== Voyager Top — FV slider + interactive overlays =================== */

/* ── FV Slider ─────────────────────────────────────────────────────────── */
/* Matches the SVG hero band visual: paper background, ~705px tall, large
   navy headline on the left, illustration on the right, dot pagination
   bottom-center, anchor MORE indicator bottom-right. */
.vt-fv {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 810;
  background: #081624;
  overflow: hidden;
  isolation: isolate;
}
.vt-fv__track { position: absolute; inset: 0; }
.vt-fv__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .85s cubic-bezier(.4,0,.2,1), visibility 0s linear .85s;
}
.vt-fv__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .85s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
}

/* ── Slide backgrounds ──────────────────────────────────────── */
.vt-fv__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.vt-fv__slide--co .vt-fv__bg {
  background: #fffefd;
}
/* ─── Solution slide: ベースカラー ─── */
.vt-fv__slide--sol-ai    { background-color: #0c0812; }
.vt-fv__slide--sol-ocr   { background-color: #f39800; }
.vt-fv__slide--sol-sys   { background-color: #fff; }
.vt-fv__slide--sol-iteee { background-color: #f0f8ff; }

/* ══ Slide 2: AIシステム受託開発 ══
   ダーク暗紫 + 右斜めパネル + 境界グロー
   スライドイン時に右パネルが左からワイプイン
*/
.vt-fv__slide--sol-ai .vt-fv__bg {
  background:
    radial-gradient(ellipse 540px 640px at 80% 52%, #291527 0%, transparent 55%),
    #0c0812;
}
/* 右斜めパネル（明るい暗紫） */
.vt-fv__slide--sol-ai .vt-fv__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #1e1030 0%, #2a1a38 60%, #1e0e2c 100%);
  clip-path: polygon(52% 0%, 100% 0%, 100% 100%, 40% 100%);
}
.vt-fv__slide.is-active.vt-fv__slide--sol-ai .vt-fv__bg::before {
  animation: vtFvAiPanelIn .95s cubic-bezier(.25,.46,.45,.94) .1s both;
}
/* 境界グロー + 左テキスト暗幕 */
.vt-fv__slide--sol-ai .vt-fv__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      transparent 39.5%,
      rgba(240,238,219,.04) 40.5%,
      rgba(240,238,219,.14) 41.5%,
      rgba(240,238,219,.05) 42.5%,
      transparent 44%),
    linear-gradient(to right,
      rgba(12,8,18,1)   0%,
      rgba(12,8,18,.96) 34%,
      rgba(12,8,18,.52) 47%,
      transparent       56%);
}

/* ══ Slide 3: 最強AI-OCR ══
   ボールドオレンジ + SVGそのままの斜め三角ワイプ
   スライドイン時に三角が右からワイプイン
*/
.vt-fv__slide--sol-ocr .vt-fv__bg {
  background: linear-gradient(170deg, #f9a40a 0%, #f39800 45%, #e88200 100%);
}
/* 斜めクリームエリア（SVGポリゴン: 左辺86.5% → 右上 → 右辺86.5%） */
.vt-fv__slide--sol-ocr .vt-fv__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom-left, #fefaef 0%, #fdf0dc 100%);
  clip-path: polygon(0% 86.5%, 100% 0%, 100% 86.5%);
  opacity: .72;
}
.vt-fv__slide.is-active.vt-fv__slide--sol-ocr .vt-fv__bg::before {
  animation: vtFvOcrWipe .85s cubic-bezier(.25,.46,.45,.94) .12s both;
}
/* 左テキスト暗幕 */
.vt-fv__slide--sol-ocr .vt-fv__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(22,8,0,.44) 0%,
    rgba(22,8,0,.26) 26%,
    rgba(22,8,0,.06) 46%,
    transparent      58%);
}

/* ══ Slide 4: SystemSharing ══
   白背景 + 右に大きな黄色の円がポップイン
   スライドイン時に円が小さい→大きくバウンド
*/
.vt-fv__slide--sol-sys .vt-fv__bg {
  background: #fff;
}
/* 大きな黄色の円（580px / 右寄せ） */
.vt-fv__slide--sol-sys .vt-fv__bg::before {
  content: '';
  position: absolute;
  width: 580px;
  height: 580px;
  border-radius: 50%;
  background: #ffe100;
  box-shadow:
    0 0 0 32px rgba(255,225,0,.18),
    0 0 0 64px rgba(255,225,0,.07);
  top: 50%;
  left: 78%;
  transform: translate(-50%, -50%);
}
.vt-fv__slide.is-active.vt-fv__slide--sol-sys .vt-fv__bg::before {
  animation: vtFvCirclePop .85s cubic-bezier(.34,1.56,.64,1) .2s both;
}
/* 左白パネル（円を隠してテキスト可読性確保） */
.vt-fv__slide--sol-sys .vt-fv__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    #fff   0%,
    #fff   48%,
    rgba(255,255,255,.86) 58%,
    rgba(255,255,255,.36) 68%,
    transparent           78%);
}

/* ══ Slide 5: iteee ══
   淡青白 + ドットグリッド + シアンリングが広がる
   スライドイン時にリングが外側に展開
*/
.vt-fv__slide--sol-iteee .vt-fv__bg {
  background-color: #f0f8ff;
  background-image: radial-gradient(circle, rgba(0,159,232,.17) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}
/* シアンリング（右寄せ） */
.vt-fv__slide--sol-iteee .vt-fv__bg::before {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 44px solid rgba(0,159,232,.30);
  box-shadow: inset 0 0 0 44px rgba(0,159,232,.06);
  top: 50%;
  left: 76%;
  transform: translate(-50%, -50%);
}
.vt-fv__slide.is-active.vt-fv__slide--sol-iteee .vt-fv__bg::before {
  animation: vtFvRingExpand .9s cubic-bezier(.34,1.56,.64,1) .15s both;
}
/* 左テキスト領域カバー */
.vt-fv__slide--sol-iteee .vt-fv__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    #f0f8ff   0%,
    #f0f8ff   46%,
    rgba(240,248,255,.85) 56%,
    rgba(240,248,255,.36) 66%,
    transparent           76%);
}

/* ── Slide full-bleed image ─────────────────────────────────── */
.vt-fv__full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Content layout ─────────────────────────────────────────── */
.vt-fv__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 64px;
  gap: 48px;
}
.vt-fv__copy {
  flex: 0 0 52%;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.vt-fv__deco {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ── Typography ─────────────────────────────────────────────── */
.vt-fv__eye {
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #F3CB00;
  margin: 0 0 20px;
}
.vt-fv__headline {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: 58px;
  line-height: 1.25;
  letter-spacing: .02em;
  color: #fff;
  margin: 0 0 22px;
}
.vt-fv__tagline {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: rgba(255,255,255,.80);
  margin: 0 0 16px;
  letter-spacing: .04em;
}
.vt-fv__desc {
  font-size: 13.5px;
  line-height: 1.9;
  color: rgba(255,255,255,.52);
  margin: 0 0 36px;
}
.vt-fv__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid #F3CB00;
  color: #F3CB00;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 28px;
  border-radius: 4px;
  text-decoration: none;
  align-self: flex-start;
  transition: background .2s, color .2s;
  letter-spacing: .06em;
}
.vt-fv__cta::after {
  content: '→';
  font-size: 16px;
}
.vt-fv__cta:hover {
  background: #F3CB00;
  color: #0d1e38;
}

/* Services chips (slide 2) */
.vt-fv__svcs {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vt-fv__svcs li {
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.75);
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: .04em;
}

/* ── Decorative SVG ──────────────────────────────────────────── */
.vt-fv__compass {
  width: min(340px, 100%);
  height: auto;
  opacity: .85;
}
.vt-fv__grid-svg {
  width: min(340px, 100%);
  height: auto;
  opacity: .75;
}
.vt-fv__c-spin {
  transform-origin: 180px 180px;
  animation: compassSpin 36s linear infinite;
}
@keyframes compassSpin {
  to { transform: rotate(360deg); }
}

/* ── Text reveal animation on active slide ───────────────────── */
.vt-fv__slide.is-active .vt-fv__eye      { animation: fvIn .6s  .05s both; }
.vt-fv__slide.is-active .vt-fv__headline { animation: fvIn .7s  .15s both; }
.vt-fv__slide.is-active .vt-fv__tagline  { animation: fvIn .65s .28s both; }
.vt-fv__slide.is-active .vt-fv__desc     { animation: fvIn .65s .38s both; }
.vt-fv__slide.is-active .vt-fv__cta      { animation: fvIn .6s  .50s both; }
.vt-fv__slide.is-active .vt-fv__svcs     { animation: fvIn .65s .38s both; }
.vt-fv__slide.is-active .vt-fv__deco       { animation: fvDecoIn .9s .1s both; }
.vt-fv__slide.is-active .vt-fv__full       { animation: vtFvFullIn .9s ease both; }
.vt-fv__slide.is-active .vt-fv__sol-badge  { animation: fvIn .50s .00s both; }
.vt-fv__slide.is-active .vt-fv__sol-quote  { animation: fvIn .65s .06s both; }
.vt-fv__slide.is-active .vt-fv__sol-head   { animation: fvIn .80s .18s both; }
.vt-fv__slide.is-active .vt-fv__sol-sub    { animation: fvIn .65s .32s both; }
.vt-fv__slide.is-active .vt-fv__sol-foot   { animation: fvIn .65s .45s both; }
@keyframes fvIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fvDecoIn {
  from { opacity: 0; transform: scale(.94) translateX(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes vtFvFullIn {
  from { opacity: 0; transform: scale(.99); }
  to   { opacity: 1; transform: none; }
}
/* ─── Solution slide decorative animations ─── */
@keyframes vtFvAiPanelIn {
  from { clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); }
  to   { clip-path: polygon(52% 0%, 100% 0%, 100% 100%, 40% 100%); }
}
@keyframes vtFvOcrWipe {
  from { clip-path: polygon(100% 86.5%, 100% 0%, 100% 86.5%); }
  to   { clip-path: polygon(0% 86.5%, 100% 0%, 100% 86.5%); }
}
@keyframes vtFvCirclePop {
  from { transform: translate(-50%, -50%) scale(.25); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}
@keyframes vtFvRingExpand {
  from { transform: translate(-50%, -50%) scale(.15); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}

/* ── Pagination dots ─────────────────────────────────────────── */
.vt-fv__dot-hits {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
  align-items: center;
}
.vt-fv__dot-hit {
  width: 28px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .3s, width .3s;
}
.vt-fv__dot-hit[aria-selected="true"] {
  background: #F3CB00;
  width: 44px;
}
.vt-fv__dot-hit:focus-visible {
  outline: 2px solid #F3CB00;
  outline-offset: 3px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1439px) {
  .vt-fv__inner { padding: 0 40px; }
  .vt-fv__headline { font-size: 50px; }
}
@media (max-width: 1023px) {
  .vt-fv { height: 600px; }
  .vt-fv__headline { font-size: 42px; }
  .vt-fv__deco { display: none; }
  .vt-fv__copy { flex: 1; }
}
@media (max-width: 767px) {
  .vt-fv { height: auto; min-height: 500px; padding-bottom: 64px; }
  .vt-fv__inner { padding: 80px 28px 20px; flex-direction: column; align-items: flex-start; transform: none; left: 0; max-width: 100%; }
  .vt-fv__headline { font-size: 36px; }
  .vt-fv__tagline { font-size: 14px; }
  .vt-fv__desc { font-size: 12.5px; margin-bottom: 28px; }
}

/* MORE anchor indicator — bottom-right */
.vt-fv__more {
  position: absolute;
  right: 56px;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #25426B;
  text-decoration: none;
  z-index: 5;
  animation: vtFvMoreBob 2.4s ease-in-out infinite;
}
.vt-fv__more span {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
}
@keyframes vtFvMoreBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ── Slide 2: Solution layout ───────────────────────────────── */
.vt-fv__sol-body {
  position: absolute;
  inset: 0;
  padding: 72px 96px 0;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.vt-fv__sol-quote {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,.68);
  letter-spacing: .04em;
  line-height: 1.75;
  margin: 0;
}
.vt-fv__sol-head {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: 92px;
  line-height: 1.1;
  letter-spacing: .02em;
  color: #fff;
  margin: 24px 0 0;
  text-shadow: 0 8px 48px rgba(0,0,0,.5);
}
.vt-fv__sol-foot {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.13);
  padding: 20px 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 680px;
}
.vt-fv__sol-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.50);
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .10em;
}
.vt-fv__sol-brand img { opacity: .6; }
.vt-fv__sol-cta {
  display: flex;
  align-items: center;
  gap: 0;
  color: rgba(255,255,255,.72);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: .06em;
  transition: color .2s;
}
.vt-fv__sol-cta::after {
  content: '─────→';
  display: inline-block;
  margin-left: 10px;
  font-size: 12px;
  letter-spacing: -2px;
  color: rgba(255,255,255,.40);
  transition: color .25s, letter-spacing .25s;
}
.vt-fv__sol-cta:hover { color: #fff; }
.vt-fv__sol-cta:hover::after { color: rgba(255,255,255,.85); letter-spacing: 0; }
/* Sub-headline (iteee tagline) */
.vt-fv__sol-sub {
  font-family: Outfit, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.48);
  letter-spacing: .06em;
  margin: 10px 0 0;
}
/* Patent badge (SystemSharing) */
.vt-fv__sol-badge {
  display: inline-block;
  background: #c62828;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 2px;
  letter-spacing: .10em;
  margin: 0 0 10px;
  align-self: flex-start;
}
/* Logo: 暗背景スライドは白反転 */
.vt-fv__slide--sol-ai  .vt-fv__sol-brand img,
.vt-fv__slide--sol-ocr .vt-fv__sol-brand img {
  filter: brightness(0) invert(1);
  opacity: .45;
}
/* SystemSharing: dark text on light bg */
.vt-fv__slide--sol-sys .vt-fv__sol-quote { color: rgba(37,66,107,.68); }
.vt-fv__slide--sol-sys .vt-fv__sol-head  { color: #25426B; text-shadow: none; }
.vt-fv__slide--sol-sys .vt-fv__sol-brand { color: rgba(37,66,107,.50); }
.vt-fv__slide--sol-sys .vt-fv__sol-brand img { filter: none; opacity: .7; }
.vt-fv__slide--sol-sys .vt-fv__sol-foot  { border-top-color: rgba(37,66,107,.12); }
.vt-fv__slide--sol-sys .vt-fv__sol-cta   { color: rgba(37,66,107,.72); }
.vt-fv__slide--sol-sys .vt-fv__sol-cta::after  { color: rgba(37,66,107,.38); }
.vt-fv__slide--sol-sys .vt-fv__sol-cta:hover   { color: #25426B; }
.vt-fv__slide--sol-sys .vt-fv__sol-cta:hover::after { color: rgba(37,66,107,.78); }
/* iteee: ペールブルーベースのためテキストをダーク系に */
.vt-fv__slide--sol-iteee .vt-fv__sol-quote { color: rgba(30,46,115,.62); }
.vt-fv__slide--sol-iteee .vt-fv__sol-head  { color: #2563eb; text-shadow: none; font-family: Outfit, sans-serif; }
.vt-fv__slide--sol-iteee .vt-fv__sol-sub   { color: rgba(30,58,138,.55); }
.vt-fv__slide--sol-iteee .vt-fv__sol-brand { color: rgba(37,66,107,.50); }
.vt-fv__slide--sol-iteee .vt-fv__sol-brand img { filter: none; opacity: .70; }
.vt-fv__slide--sol-iteee .vt-fv__sol-foot  { border-top-color: rgba(37,99,235,.15); }
.vt-fv__slide--sol-iteee .vt-fv__sol-cta   { color: rgba(37,99,235,.72); }
.vt-fv__slide--sol-iteee .vt-fv__sol-cta::after  { color: rgba(37,99,235,.38); }
.vt-fv__slide--sol-iteee .vt-fv__sol-cta:hover   { color: #2563eb; }
.vt-fv__slide--sol-iteee .vt-fv__sol-cta:hover::after { color: rgba(37,99,235,.80); }

@media (max-width: 1439px) {
  .vt-fv__sol-body { padding: 64px 64px 0; }
  .vt-fv__sol-head { font-size: 80px; }
}
@media (max-width: 1023px) {
  .vt-fv__sol-body { padding: 56px 48px 0; }
  .vt-fv__sol-head { font-size: 64px; }
}
@media (max-width: 767px) {
  .vt-fv__sol-body { padding: 56px 28px 0; }
  .vt-fv__sol-head { font-size: 44px; }
  .vt-fv__sol-quote { font-size: 13.5px; }
  .vt-fv__sol-foot { max-width: 100%; }
}

/* ── Click-through overlays on baked-in SVG content ────────────────────── */
/* Each overlay is an invisible button positioned over an interactive area
   of the SVG. The hover effect comes from .btn-shine / .pulse-zone / a
   subtle outline ring matching the rest of the site. */
.vt-overlay {
  position: absolute;
  background: transparent;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  transition:
    transform .3s var(--ease-sharp),
    box-shadow .3s var(--ease-sharp),
    background .3s var(--ease-sharp);
}
.vt-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(37,66,107,0);
  transition: box-shadow .3s var(--ease-sharp);
}
.vt-overlay:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.08);
  box-shadow: 0 22px 40px rgba(37,66,107,.22);
}
.vt-overlay:hover::after { box-shadow: 0 0 0 2px rgba(255,255,255,.45); }
.vt-overlay--light:hover { background: rgba(37,66,107,.05); }
.vt-overlay--light:hover::after { box-shadow: 0 0 0 2px rgba(37,66,107,.25); }
.vt-overlay:active { transform: translateY(0) scale(.99); }


/* ═══════════════════════════════════════════════════════════════════════
   ── Tech-feel overlay animations ──────────────────────────────────────
   Layered on top of .vt-overlay to give navigation hits a cutting-edge,
   playful, attention-grabbing vibe: animated scan lines, neon-cyan glow
   rings, click ripples, ambient breathing pulse on MORE buttons, and an
   orbiting dot around yellow CTA cards. Each modifier is composable —
   e.g. .vt-tech.vt-tech--card.vt-tech--scan stacks the card glow + sweep.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --tech-cyan: #00C2FF;
  --tech-cyan-soft: rgba(0,194,255,.55);
  --tech-cyan-glow: rgba(0,194,255,.35);
  --tech-yellow: #F3CB00;
  --tech-yellow-soft: rgba(243,203,0,.6);
  --tech-navy: #25426B;
  --ease-tech: cubic-bezier(.22,1.12,.36,1);
}

/* Base tech overlay — establishes the stacking context and click ripple
   helper. The ::before pseudo is the scan-line / glow surface; the
   existing .vt-overlay::after stays as the original outline ring. */
.vt-tech {
  isolation: isolate;
  overflow: hidden;
  transition:
    transform .35s var(--ease-tech),
    box-shadow .35s var(--ease-tech),
    background .35s var(--ease-tech),
    filter .35s var(--ease-tech);
}
.vt-tech::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease-tech);
  z-index: 1;
}

/* Scan-line sweep — a diagonal cyan stripe glides across on hover. */
.vt-tech--scan::before {
  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 38%,
      rgba(255,255,255,.18) 47%,
      var(--tech-cyan-soft) 50%,
      rgba(255,255,255,.18) 53%,
      transparent 62%,
      transparent 100%);
  background-size: 260% 260%;
  background-position: 120% 0;
  mix-blend-mode: screen;
}
.vt-tech--scan:hover::before {
  opacity: 1;
  animation: vtTechScan 1.1s var(--ease-tech) both;
}
@keyframes vtTechScan {
  0%   { background-position: 130% 0;  opacity: 0; }
  20%  { opacity: 1; }
  100% { background-position: -30% 0; opacity: 0; }
}

/* Card hover — neon cyan ring + soft glow. We deliberately do NOT lift
   the overlay (no translateY/scale) because the underlying SVG content
   stays put, and any transform on the transparent overlay would offset
   the ring/glow above the visual it is meant to frame. */
.vt-tech--card:hover {
  transform: none;
  background: transparent;
  box-shadow:
    0 0 0 2px var(--tech-cyan),
    0 0 22px var(--tech-cyan-glow),
    0 0 46px rgba(0,194,255,.18);
}
.vt-tech--card:active {
  transform: none;
  filter: brightness(1.08) contrast(1.04);
}

/* Pill CTA hover — yellow-tuned glow (matches the existing yellow pill
   underneath). No transform: keeps the ring aligned to the pill edge. */
.vt-tech--pill:hover {
  transform: none;
  background: transparent;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.85),
    0 0 24px var(--tech-yellow-soft),
    0 0 48px rgba(243,203,0,.28);
}

/* Corner triangular MORE — yellow-tuned glow that follows the clip-path.
   The pseudo can't escape the clip, so we use a drop-shadow filter for
   the outer glow. */
.vt-tech--corner {
  filter: drop-shadow(0 0 0 transparent);
}
.vt-tech--corner:hover {
  transform: none;
  background: transparent;
  filter:
    drop-shadow(0 0 12px var(--tech-yellow-soft))
    drop-shadow(0 0 24px rgba(243,203,0,.35))
    brightness(1.08);
}
.vt-tech--corner::before {
  background:
    linear-gradient(135deg,
      transparent 30%,
      rgba(255,255,255,.55) 50%,
      transparent 70%);
  background-size: 220% 220%;
  background-position: 100% 0;
  mix-blend-mode: overlay;
}
.vt-tech--corner:hover::before {
  opacity: 1;
  animation: vtTechCornerSweep 1.1s var(--ease-tech) both;
}
@keyframes vtTechCornerSweep {
  0%   { background-position: 120% 0;  opacity: 0; }
  20%  { opacity: 1; }
  100% { background-position: -20% 0;  opacity: 0; }
}

/* Big "zone" overlays (Column header) — keep effects minimal so they
   don't fight the underlying illustration. Inner cyan ring only; no
   transform so the ring traces the section edge exactly. */
.vt-tech--zone:hover {
  transform: none;
  background: rgba(37,66,107,.04);
  box-shadow: inset 0 0 0 1px rgba(0,194,255,.35),
              0 0 24px rgba(0,194,255,.15);
}

/* Ambient breathing pulse — for MORE / CTA buttons; draws the eye
   without being obnoxious. The 2nd ::after uses the existing ring slot
   so we drive the glow via box-shadow keyframes. */
.vt-tech--pulse::after {
  animation: vtTechBreathe 2.6s ease-in-out infinite;
}
@keyframes vtTechBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243,203,0,0); }
  50%      { box-shadow: 0 0 0 6px rgba(243,203,0,.18),
                         0 0 22px 2px rgba(243,203,0,.22); }
}
/* On hover, suspend the ambient pulse so the hover ring is unambiguous. */
.vt-tech--pulse:hover::after {
  animation-play-state: paused;
}

/* Orbit dot — a small cyan dot circles the yellow MORE cards. Pure CSS;
   no JS required. The dot lives in ::before so the existing ::after
   pulse is preserved. */
.vt-tech--orbit::before {
  /* Re-purpose ::before: hide its gradient (handled by --scan if present),
     then run a radial-gradient dot via the radial helper variable. */
  background:
    radial-gradient(circle 5px at var(--orbit-x, 50%) var(--orbit-y, 0%),
      #fff 0%,
      var(--tech-cyan) 40%,
      transparent 70%);
  opacity: 1;
  animation: vtTechOrbit 4.2s linear infinite;
  mix-blend-mode: normal;
}
.vt-tech--orbit:hover::before { animation-duration: 2.4s; }
@keyframes vtTechOrbit {
  0%   { --orbit-x: 50%;  --orbit-y: 0%;   }
  25%  { --orbit-x: 100%; --orbit-y: 50%;  }
  50%  { --orbit-x: 50%;  --orbit-y: 100%; }
  75%  { --orbit-x: 0%;   --orbit-y: 50%;  }
  100% { --orbit-x: 50%;  --orbit-y: 0%;   }
}
/* Browsers without @property registration can't animate CSS variables in
   gradients. Provide a fallback: a small dot pinned top-center that
   pulses, so the effect degrades gracefully rather than disappearing. */
@supports not (background: paint(_)) {
  .vt-tech--orbit::before {
    background:
      radial-gradient(circle 5px at 50% 0%,
        #fff 0%, var(--tech-cyan) 40%, transparent 70%);
    animation: vtTechOrbitFallback 2s ease-in-out infinite;
  }
  @keyframes vtTechOrbitFallback {
    0%, 100% { opacity: .5; transform: scale(.9); }
    50%      { opacity: 1;  transform: scale(1.05); }
  }
}
/* Register --orbit-x / --orbit-y so the gradient position can interpolate
   between keyframes (Chromium/Safari/Firefox 128+). */
@property --orbit-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --orbit-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

/* Click ripple — universal across all .vt-tech buttons. A short cyan
.vt-tech:active {
  transform: none !important;
  animation: vtTechClick .35s var(--ease-tech) both;
}
@keyframes vtTechClick {
  0%   { box-shadow: 0 0 0 0 var(--tech-cyan-soft); }
  60%  { box-shadow: 0 0 0 14px rgba(0,194,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,194,255,0); }
}

/* The base .vt-overlay:hover applies `transform: translateY(-4px)` for
   the non-tech variants. .vt-tech overlays must NOT translate (would
   detach the glow ring from the visual underneath), so we hard-override
   it here regardless of which modifier is composed on top. */
.vt-tech:hover {
  transform: none !important;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .vt-tech::before,
  .vt-tech--pulse::after,
  .vt-tech--orbit::before {
    animation: none !important;
  }
}


/* ── .vt-tech--bullet ──────────────────────────────────────────────────
   Per-bullet service link (e.g. "・IT環境整備"). The hit area sits on
   top of an existing baked-in bullet line in the SVG. Hover paints a
   thin cyan underline + soft glow under the text, with a small "data
   stream" dot riding along the line. No transform, no fill — keeps the
   underlying text legible. */
.vt-tech--bullet {
  display: block;
  text-decoration: none;
}
.vt-tech--bullet::before {
  /* Underline + dot, lives in ::before so the existing ::after ring
     animation (from the .vt-overlay base) can still flash on focus. */
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--tech-cyan) 18%,
    #fff 50%,
    var(--tech-cyan) 82%,
    transparent 100%);
  background-size: 200% 100%;
  background-position: -100% 0;
  opacity: 0;
  transition: opacity .22s var(--ease-tech);
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: normal;
  box-shadow: 0 0 8px var(--tech-cyan-glow);
}
.vt-tech--bullet:hover {
  background: transparent;
  /* small cyan ring around the text row */
  box-shadow:
    0 0 0 1.5px var(--tech-cyan),
    0 0 12px var(--tech-cyan-glow);
}
.vt-tech--bullet:hover::before {
  opacity: 1;
  animation: vtTechBulletFlow .9s linear infinite;
}
@keyframes vtTechBulletFlow {
  0%   { background-position: -120% 0; }
  100% { background-position:  120% 0; }
}
/* Suppress the heavier card-style scan-line on bullets (it can drown out
   the small label) — keep only the soft underline + ring. */
.vt-tech--bullet.vt-tech--scan::before {
  /* Override the .vt-tech--scan ::before gradient set earlier — re-apply
     just the bullet underline so the cascade order works regardless of
     class ordering. */
  background: linear-gradient(90deg,
    transparent 0%,
    var(--tech-cyan) 18%,
    #fff 50%,
    var(--tech-cyan) 82%,
    transparent 100%);
  background-size: 200% 100%;
  background-position: -100% 0;
  mix-blend-mode: normal;
  left: 4px;
  right: 4px;
  top: auto;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  box-shadow: 0 0 8px var(--tech-cyan-glow);
}
.vt-tech--bullet.vt-tech--scan:hover::before {
  animation: vtTechBulletFlow .9s linear infinite;
}

/* ===== First View: バナー画像（全幅・水面ゆらめき演出） ===== */
.fv-banner{ width:100%; margin:0; background:#0a1a38; }
.fv-banner__stage{ position:relative; overflow:hidden; line-height:0; }
.fv-banner__img{
  display:block; width:100%; height:auto;
  transform-origin:50% 60%;
  animation:fvBreath 16s ease-in-out infinite;
  will-change:transform;
}
/* 下部（海エリア）に重ねる光のゆらめき層（擬似要素で追加DOM不要） */
.fv-banner__stage::before,
.fv-banner__stage::after{
  content:""; position:absolute; left:-6%; right:-6%; bottom:0;
  height:46%; pointer-events:none;
}
/* 1) コースティクス（水面のきらめき） */
.fv-banner__stage::before{
  mix-blend-mode:screen; opacity:.55;
  background:
    radial-gradient(2px 2px at 12% 30%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(2px 2px at 32% 70%, rgba(160,220,255,.85), transparent 60%),
    radial-gradient(1.6px 1.6px at 52% 42%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 72% 66%, rgba(160,220,255,.8), transparent 60%),
    radial-gradient(2px 2px at 88% 34%, rgba(255,255,255,.85), transparent 60%);
  background-size:420px 420px,520px 520px,380px 380px,600px 600px,460px 460px;
  animation:fvCaustics 18s linear infinite;
  will-change:background-position;
}
/* 2) うねり（横に流れる光帯） */
.fv-banner__stage::after{
  mix-blend-mode:soft-light; opacity:.5;
  background:repeating-linear-gradient(100deg,
     rgba(255,255,255,0) 0 42px,
     rgba(255,255,255,.10) 42px 84px,
     rgba(255,255,255,0) 84px 126px);
  animation:fvWave 9s ease-in-out infinite;
  will-change:transform;
}
@keyframes fvBreath{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }
@keyframes fvCaustics{
  from{ background-position:0 0,0 0,0 0,0 0,0 0; }
  to{ background-position:420px 210px,-520px 260px,380px -190px,-600px 300px,460px -230px; }
}
@keyframes fvWave{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-6%); } }
@media (prefers-reduced-motion:reduce){
  .fv-banner__img,
  .fv-banner__stage::before,
  .fv-banner__stage::after{ animation:none !important; }
}