/*
Theme Name: CYBRIX GAMES
Theme URI: https://cybrix-games.com
Author: CYBRIX GAMES
Author URI: https://cybrix-games.com
Description: CYBRIX GAMES コーポレートサイト WordPress テーマ
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cybrix-games
*/

/* ============================================================
   CYBRIX GAMES — Global Styles
   Main Color: #adff00 (Lime Neon)
   Accent: #39ff14 (Green), #bf00ff (Purple)
   Background: #020408
   Fonts: Orbitron, Share Tech Mono, Noto Sans JP
   ============================================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --neon: #adff00;
  --neon-rgb: 173,255,0;
  --neon-green: #39ff14;
  --neon-green-rgb: 57,255,20;
  --neon-purple: #bf00ff;
  --dark-bg: #020408;
  --dark-bg2: #010306;
}

html {
  scroll-behavior: auto;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--dark-bg);
  color: #f2f2f2;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }
ul { list-style: none; }
button { border: none; outline: none; }

/* === 可読性向上: 本文 p タグの最小フォントサイズを 18px に統一 (2026-06) ===
   既存のクラス別ルール / インライン指定より優先させるため !important を付与 */
p { font-size: 18px !important; line-height: 1.9; }

.sp { display: none; }

@media (max-width: 768px) {
  .sp { display: block!important; }
  .pc { display: none; }
}
/* ==============================
   ANIMATIONS
============================== */
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes glitch-top {
  0%, 90%, 100% { transform: translate(0); opacity: 0; }
  92% { transform: translate(-3px, -2px); opacity: 0.6; }
  94% { transform: translate(3px, 2px); opacity: 0.6; }
  96% { transform: translate(-2px, 0); opacity: 0.6; }
}

@keyframes glitch-bottom {
  0%, 88%, 100% { transform: translate(0); opacity: 0; }
  90% { transform: translate(3px, 2px); opacity: 0.5; }
  93% { transform: translate(-3px, -1px); opacity: 0.5; }
  95% { transform: translate(2px, 0); opacity: 0.5; }
}

@keyframes glitch-in {
  0% { opacity: 0; transform: translateY(20px) skewX(-5deg); }
  60% { opacity: 1; transform: translateY(-4px) skewX(1deg); }
  80% { transform: translateY(2px) skewX(-0.5deg); }
  100% { opacity: 1; transform: translateY(0) skewX(0); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scroll-pulse {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes scanDown {
  0%   { top: 0; opacity: 0.8; }
  100% { top: 100%; opacity: 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ==============================
   BOOTLOADER
============================== */
.bootloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #020408;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Share Tech Mono', monospace;
  overflow: hidden;
  transition: opacity 0.4s ease;
}

.bootloader.flash {
  opacity: 0;
}

.bootloader.done {
  display: none;
}

.bootloader .scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 4px);
}

.bootloader .grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: linear-gradient(rgba(173,255,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(173,255,0,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}

.bootloader .corner {
  position: absolute;
  width: 32px;
  height: 32px;
  z-index: 2;
}

.bootloader .corner.tl { top: 24px; left: 24px; border-top: 2px solid var(--neon); border-left: 2px solid var(--neon); }
.bootloader .corner.tr { top: 24px; right: 24px; border-top: 2px solid var(--neon); border-right: 2px solid var(--neon); }
.bootloader .corner.bl { bottom: 24px; left: 24px; border-bottom: 2px solid var(--neon); border-left: 2px solid var(--neon); }
.bootloader .corner.br { bottom: 24px; right: 24px; border-bottom: 2px solid var(--neon); border-right: 2px solid var(--neon); }

.boot-hex {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  font-size: 14px;
  color: rgba(173,255,0,0.2);
  letter-spacing: 0.1em;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 60px;
}

.boot-hex.top { top: 16px; }
.boot-hex.bottom { bottom: 16px; }

.boot-panel {
  position: relative;
  z-index: 3;
  width: min(680px, 90vw);
  display: flex;
  flex-direction: column;
}

.boot-header {
  border-top: 1px solid rgba(173,255,0,0.4);
  border-left: 1px solid rgba(173,255,0,0.4);
  border-right: 1px solid rgba(173,255,0,0.4);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(173,255,0,0.03);
}

.boot-header .title {
  font-size: 14px;
  color: var(--neon);
  letter-spacing: 0.3em;
}

.boot-header .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green);
  display: inline-block;
  animation: blink-cursor 1s ease-in-out infinite;
}

.boot-terminal {
  border: 1px solid rgba(173,255,0,0.4);
  background: rgba(0,0,0,0.6);
  padding: 16px 20px;
  height: clamp(200px, 35vh, 300px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: none;
}

.boot-terminal::-webkit-scrollbar { display: none; }

.boot-line {
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 1.6;
  animation: fade-up 0.2s ease;
}

.boot-line .prefix {
  color: rgba(173,255,0,0.4);
  margin-right: 8px;
}

.boot-cursor {
  font-size: 14px;
  color: var(--neon);
  animation: blink-cursor 0.8s step-end infinite;
}

.boot-progress-section {
  border: 1px solid rgba(173,255,0,0.4);
  border-top: none;
  padding: 14px 20px 16px;
  background: rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.boot-progress-label {
  font-size: 14px;
  color: rgba(173,255,0,0.6);
  letter-spacing: 0.2em;
}

.boot-progress-pct {
  font-size: 14px;
  font-weight: 700;
  color: var(--neon);
  text-shadow: 0 0 8px var(--neon);
  letter-spacing: 0.1em;
}

.boot-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(173,255,0,0.1);
  position: relative;
  overflow: hidden;
}

.boot-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--neon), var(--neon-green));
  box-shadow: 0 0 8px var(--neon), 0 0 16px rgba(173,255,0,0.4);
  transition: width 0.05s linear;
}

.boot-center-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(173,255,0,0.05) 0%, transparent 70%);
  animation: pulse-glow 3s ease-in-out infinite;
}

/* ==============================
   TICKER TAPE
============================== */
.ticker-tape {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 28px;
  background: rgba(0,0,0,0.85);
  border-bottom: 1px solid rgba(173,255,0,0.3);
  overflow: hidden;
  z-index: 1000;
  display: flex;
  align-items: center;
}

.ticker-track {
  display: flex;
  white-space: nowrap;
  animation: ticker 30s linear infinite;
}

.ticker-item {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: var(--neon);
  letter-spacing: 0.15em;
  padding: 0 40px;
  opacity: 0.85;
}

.ticker-item .diamond {
  color: var(--neon-green);
}

/* ==============================
   NAVIGATION
============================== */
.main-nav {
  position: fixed;
  top: 28px;
  left: 0;
  width: 100%;
  z-index: 999;
  padding: 18px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(2,4,8,0.9) 0%, transparent 100%);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.nav-brand .nav-logo {
  height: 44px;
  width: auto;
}

.nav-brand .brand-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.1em;
  text-shadow: 0 0 10px var(--neon), 0 0 30px rgba(173,255,0,0.5);
}

.nav-brand .brand-name .underscore {
  color: var(--neon);
}

.nav-brand .brand-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: var(--neon);
  letter-spacing: 0.3em;
  display: block;
  margin-top: 2px;
  opacity: 0.8;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a.nav-link {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color:#fff;
  text-decoration: none;
  letter-spacing: 0.2em;
  transition: color 0.3s, text-shadow 0.3s;
}

.nav-links a.nav-link:hover {
  color: var(--neon);
  text-shadow: 0 0 10px var(--neon);
}

.nav-entry-btn {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #020408;
  background: var(--neon);
  padding: 10px 24px;
  letter-spacing: 0.15em;
  text-decoration: none;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: background 0.3s, box-shadow 0.3s;
  display: inline-block;
}

.nav-entry-btn:hover {
  background: var(--neon-green);
  box-shadow: 0 0 10px var(--neon-green), 0 0 20px var(--neon-green);
}

.nav-mute-btn {
  background: transparent;
  border: 1px solid rgba(173,255,0,0.5);
  color: var(--neon);
  padding: 9px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.15em;
  transition: all 0.25s;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}

.nav-mute-btn:hover {
  box-shadow: 0 0 10px rgba(173,255,0,0.3);
  background: rgba(173,255,0,0.08);
}

.nav-mute-btn.muted {
  border-color: rgba(255,255,255,0.2);
  color:#fff;
}

/* ==============================
   HERO SECTION
============================== */
.hero {
  position: relative;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 700px;
  overflow: hidden;
  background: #020408;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(120px, 22vw, 320px);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(173,255,0,0.06);
  letter-spacing: 0.05em;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(173,255,0,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(173,255,0,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 1;
}

.hero-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px);
  z-index: 2;
  pointer-events: none;
}

.hero-particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.hero-glow-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(ellipse at center, rgba(173,255,0,0.08) 0%, rgba(173,255,0,0.03) 40%, transparent 70%);
  z-index: 4;
  animation: pulse-glow 4s ease-in-out infinite;
}

.hero-circuit {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  opacity: 0.15;
  pointer-events: none;
}

.hero-circuit.left { left: 100px; }
.hero-circuit.right { right: 100px; transform: translateY(-50%) scaleX(-1); }

.hero-horizon {
  position: absolute;
  bottom: 120px;
  left: 0;
  width: 100%;
  height: 1px;
  z-index: 5;
  background: linear-gradient(90deg, transparent 0%, rgba(173,255,0,0.1) 10%, rgba(173,255,0,0.4) 30%, rgba(173,255,0,0.6) 50%, rgba(173,255,0,0.4) 70%, rgba(173,255,0,0.1) 90%, transparent 100%);
}

.hero-neon-line {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  z-index: 5;
  opacity: 0.3;
}

.hero-neon-line.left-line {
  left: 80px;
  background: linear-gradient(180deg, transparent 0%, var(--neon) 30%, var(--neon) 70%, transparent 100%);
}

.hero-neon-line.right-line {
  right: 80px;
  background: linear-gradient(180deg, transparent 0%, var(--neon-purple) 30%, var(--neon-purple) 70%, transparent 100%);
}

.hero-corner {
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 6;
  border-color: var(--neon);
  border-style: solid;
  border-width: 0;
}

.hero-corner.tl { top: 80px; left: 48px; border-top-width: 2px; border-left-width: 2px; }
.hero-corner.tr { top: 80px; right: 48px; border-top-width: 2px; border-right-width: 2px; }
.hero-corner.bl { bottom: 40px; left: 48px; border-bottom-width: 2px; border-left-width: 2px; }
.hero-corner.br { bottom: 40px; right: 48px; border-bottom-width: 2px; border-right-width: 2px; }

.hero-status-panel {
  position: absolute;
  left: 52px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-status-item {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: rgba(173,255,0,0.5);
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.hero-data-panel {
  position: absolute;
  right: 52px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
}

.hero-data-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--neon);
  text-shadow: 0 0 10px var(--neon), 0 0 30px rgba(173,255,0,0.5);
  line-height: 1;
}

.hero-data-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color:#fff;
  letter-spacing: 0.2em;
  margin-top: 4px;
}

.hero-content {
  position: relative;
  z-index: 8;
  text-align: center;
  padding: 0 20px;
}

.hero-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: var(--neon);
  letter-spacing: 0.4em;
  margin-bottom: 24px;
  opacity: 0;
  animation: fade-up 0.8s ease forwards 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.hero-label .line {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--neon);
  opacity: 0.6;
}

.hero-logo {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(64px, 9vw, 140px);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 0.9;
  text-transform: uppercase;
  position: relative;
  opacity: 0;
  animation: glitch-in 1s ease forwards 0.6s;
}

.hero-logo .cybrix {
  color: var(--neon);
  text-shadow: 0 0 10px var(--neon), 0 0 30px rgba(173,255,0,0.5), 0 0 60px rgba(173,255,0,0.2);
}

.hero-logo .games {
  color: #fff;
  text-shadow: 0 0 30px rgba(255,255,255,0.3);
}

.hero-sub {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 400;
  color:#fff;
  letter-spacing: 0.5em;
  margin-top: 12px;
  opacity: 0;
  animation: fade-up 0.8s ease forwards 1s;
}

.hero-catch {
  margin-top: 40px;
  opacity: 0;
  animation: fade-up 0.8s ease forwards 1.3s;
}

.hero-catch .en {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(14px, 1.8vw, 20px);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.hero-catch .jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(14px, 1.2vw, 14px);
  font-weight: 300;
  color:#fff;
  letter-spacing: 0.15em;
  margin-top: 8px;
}

.hero-cta {
  margin-top: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fade-up 0.8s ease forwards 1.6s;
}

.hero-cta .btn-primary {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #020408;
  background: var(--neon);
  padding: 16px 40px;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s;
  display: inline-block;
}

.hero-cta .btn-primary:hover {
  box-shadow: 0 0 20px var(--neon), 0 0 40px rgba(173,255,0,0.4);
}

.hero-cta .btn-secondary {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--neon);
  background: transparent;
  border: 1px solid var(--neon);
  padding: 15px 36px;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
  transition: background 0.3s, box-shadow 0.3s;
  display: inline-block;
}

.hero-cta .btn-secondary:hover {
  background: rgba(173,255,0,0.1);
  box-shadow: 0 0 15px rgba(173,255,0,0.3);
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fade-up 0.8s ease forwards 2s;
}

.hero-scroll-indicator .text {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color:#fff;
  letter-spacing: 0.3em;
}

.hero-scroll-indicator .line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--neon), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}

.hero-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 8;
  background: linear-gradient(90deg, transparent 0%, var(--neon) 20%, var(--neon-green) 50%, var(--neon) 80%, transparent 100%);
  opacity: 0.6;
}

/* ==============================
   SECTION COMMON
============================== */
.section-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.4em;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.section-label .bar {
  height: 2px;
  transition: width 0.8s ease 0.3s;
}

.section-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(48px, 6.5vw, 84px);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
  line-height: 1.05;
}

.section-subtitle {
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(14px, 1.6vw, 16px);
  letter-spacing: 0.35em;
  margin-top: 8px;
}

/* ==============================
   BUSINESS SECTION
============================== */
.business-section {
  position: relative;
  background: transparent;
  padding: 100px 0 120px;
  overflow: hidden;
  z-index: 1;
}

.business-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,4,8,0.88) 0%, rgba(1,2,5,0.94) 100%);
  z-index: 0;
}

.business-top-sep {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-green) 30%, var(--neon) 70%, transparent);
  opacity: 0.4;
  z-index: 1;
}

.business-neon-bar {
  position: absolute;
  right: 0;
  top: 10%;
  width: 3px;
  height: 80%;
  background: linear-gradient(180deg, transparent, var(--neon-green) 25%, var(--neon) 75%, transparent);
  opacity: 0;
  transition: opacity 1s ease 0.2s;
  z-index: 1;
}

.business-watermark {
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-family: 'Orbitron', sans-serif;
  font-size: 100px;
  font-weight: 900;
  color: rgba(173,255,0,0.025);
  letter-spacing: 0.1em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.business-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 2;
}

.business-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 2px;
  perspective: 1200px;
}

.business-card {
  position: relative;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(173,255,0,0.1);
  padding: 36px 32px;
  cursor: default;
  overflow: hidden;
  opacity: 0;
  transform-origin: center center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.business-card.visible {
  opacity: 1;
  transform: none !important;
}

.business-card:hover {
  box-shadow: 0 0 30px rgba(173,255,0,0.1), inset 0 0 30px rgba(173,255,0,0.03);
}

.business-card .top-edge {
  position: absolute;
  top: 0;
  left: -100%;
  right: 0;
  height: 2px;
  transition: left 0.4s ease;
}

.business-card:hover .top-edge {
  left: 0%;
}

.business-card .bottom-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0;
  transition: opacity 0.3s;
}

.business-card:hover .bottom-glow {
  opacity: 0.7;
}

.business-card .card-id {
  font-family: 'Share Tech Mono', monospace;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.business-card .card-tag {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.25em;
  padding: 4px 10px;
}

.business-card .card-icon {
  width: auto;
  height: 48px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: transform 0.3s ease;
}

.business-card:hover .card-icon {
  transform: scale(1.05);
}

.business-card .card-icon span {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.1em;
}

.business-card .card-logo {
  height: 60px;
  width: auto;
  display: block;
  margin-bottom: 16px;
  object-fit: contain;
}

/* カードのサムネイル画像（CYBRIX FACTORY 各プロジェクト） */
.business-card .card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 2px 0 20px;
  overflow: hidden;
  border: 1px solid rgba(173,255,0,0.22);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.business-card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.business-card:hover .card-image img { transform: scale(1.06); }

.business-card .card-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.4;
}

.business-card .card-title-en {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.2em;
  margin-bottom: 16px;
}

.business-card .card-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color:#fff;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

.business-cta {
  margin-top: 72px;
  text-align: center;
}

.business-cta a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #020408;
  background: var(--neon);
  padding: 18px 56px;
  letter-spacing: 0.25em;
  text-decoration: none;
  clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
  box-shadow: 0 0 24px rgba(173,255,0,0.5);
  transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
}

.business-cta a:hover {
  background: var(--neon-green);
  box-shadow: 0 0 36px rgba(57,255,20,0.6);
  transform: scale(1.03);
}

/* ==============================
   COMPANY SECTION
============================== */
.company-section {
  position: relative;
  background: transparent;
  padding: 140px 0 100px;
  overflow: hidden;
  z-index: 1;
}

.company-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,4,8,0.85) 0%, rgba(2,4,8,0.92) 100%);
  z-index: 0;
}

.company-scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon) 30%, var(--neon-green) 70%, transparent);
  opacity: 0.5;
  z-index: 1;
}

.company-neon-bar {
  position: absolute;
  left: 0;
  top: 8%;
  width: 3px;
  height: 84%;
  background: linear-gradient(180deg, transparent, var(--neon) 25%, var(--neon-green) 75%, transparent);
  opacity: 0;
  transition: opacity 1s ease 0.2s;
  z-index: 1;
}

.company-watermark {
  position: absolute;
  right: -50px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-family: 'Orbitron', sans-serif;
  font-size: 100px;
  font-weight: 900;
  color: rgba(173,255,0,0.03);
  letter-spacing: 0.1em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.company-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 2;
}

.company-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.company-map-container {
  position: relative;
  width: 100%;
  height: 500px;
  border: 1px solid rgba(173,255,0,0.15);
  overflow: hidden;
  cursor: grab;
}

.company-map-container:active {
  cursor: grabbing;
}

.company-map-container .map-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: rgba(173,255,0,0.35);
  letter-spacing: 0.3em;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

.company-map-container .map-label {
  position: absolute;
  top: 12px;
  left: 16px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: rgba(173,255,0,0.5);
  letter-spacing: 0.25em;
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 900px) {
  .company-layout {
    grid-template-columns: 1fr;
  }
  .company-map-container {
    height: 400px;
  }
}

/* ═══════════════════════════════════════════════════════
   PAGE SECTIONS (共通スタイル)
═══════════════════════════════════════════════════════ */
.page-section {
  position: relative;
  padding: 100px 24px;
  min-height: auto;
}

.page-section-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.page-section-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 0%, rgba(173, 255, 0, 0.03), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.page-section-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

.page-hero {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 160px 24px 80px;
}

/* MESSAGE SECTION */
.message-section {
  position: relative;
  padding: 100px 24px;
  background: rgba(0, 0, 0, 0.4);
}

.message-inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.message-text {
  font-size: 20px;
  line-height: 2.1;
  color:#fff;
  margin-bottom: 24px;
}

.message-author {
  text-align: right;
  margin-top: 48px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: #adff00;
  letter-spacing: 0.2em;
}

/* HISTORY SECTION */
.history-timeline {
  position: relative;
  padding-left: 40px;
}

.history-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, #adff00, rgba(173, 255, 0, 0.2));
}

.history-item {
  position: relative;
  margin-bottom: 48px;
  padding-left: 32px;
}

.history-item::before {
  content: '';
  position: absolute;
  left: -40px;
  top: 8px;
  width: 12px;
  height: 12px;
  background: #adff00;
  border: 2px solid #000;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(173, 255, 0, 0.6);
}

.history-year {
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #adff00;
  margin-bottom: 12px;
}

.history-content {
  font-size: 16px;
  line-height: 1.8;
  color:#fff;
}

.history-image {
  margin-top: 16px;
  width: 100%;
  max-width: 600px;
  height: 300px;
  border: 1px solid rgba(173, 255, 0, 0.15);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

/* ACCESS SECTION */
.access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 48px;
}

.access-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.access-item {
  padding: 24px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(173, 255, 0, 0.15);
  position: relative;
}

.access-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #adff00, transparent);
}

.access-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: #adff00;
  letter-spacing: 0.2em;
  margin-bottom: 12px;
}

.access-value {
  font-size: 16px;
  line-height: 1.8;
  color:#fff;
}

.access-map {
  width: 100%;
  height: 400px;
  border: 1px solid rgba(173, 255, 0, 0.15);
  border-radius: 4px;
  overflow: hidden;
}

/* SERVICE DETAIL SECTIONS */
.service-detail {
  padding: 80px 24px;
  background: rgba(0, 0, 0, 0.3);
  position: relative;
}

.service-detail:nth-child(even) {
  background: rgba(0, 0, 0, 0.5);
}

.service-detail-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.service-detail-logo {
  height: 60px;
  width: auto;
  display: block;
  margin-bottom: 20px;
  object-fit: contain;
}

.service-detail-content h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #adff00;
  margin-bottom: 16px;
}

.service-detail-content .subtitle {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: rgba(173, 255, 0, 0.6);
  letter-spacing: 0.2em;
  margin-bottom: 32px;
}

.service-detail-content p {
  font-size: 16px;
  line-height: 1.9;
  color:#fff;
  margin-bottom: 16px;
}

.service-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}

.service-feature {
  padding: 16px;
  background: rgba(173, 255, 0, 0.05);
  border: 1px solid rgba(173, 255, 0, 0.15);
  font-size: 14px;
  color:#fff;
}

.service-feature::before {
  content: '◆ ';
  color: #adff00;
}

.service-detail-visual {
  width: 100%;
  height: 400px;
  background: rgba(173, 255, 0, 0.05);
  border: 1px solid rgba(173, 255, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: rgba(173, 255, 0, 0.4);
  overflow: hidden;
}

.service-detail-visual,
.service-detail-content {
  opacity: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.service-detail-visual.tumble-done,
.service-detail-content.tumble-done {
  opacity: 1 !important;
  transform: none !important;
}

/* RECRUIT POSITIONS (子ページ用) */
.recruit-positions {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.position-card {
  background: rgba(2, 4, 8, 0.85);
  padding: 32px 36px;
  border: 1px solid rgba(173, 255, 0, 0.13);
  position: relative;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.position-card:hover {
  border-color: rgba(173, 255, 0, 0.25);
  box-shadow: 0 0 20px rgba(173, 255, 0, 0.1);
  background: rgba(2, 4, 8, 0.95);
}

.position-tag {
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 4px 10px;
  margin-bottom: 16px;
}

.position-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}

.position-desc {
  font-size: 14px;
  line-height: 1.8;
  color:#fff;
  margin-bottom: 20px;
}

.position-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.position-tags span {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: rgba(173, 255, 0, 0.8);
  border: 1px solid rgba(173, 255, 0, 0.2);
  padding: 4px 10px;
  letter-spacing: 0.12em;
}

.position-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-apply {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #020408;
  background: #adff00;
  padding: 12px 28px;
  text-decoration: none;
  letter-spacing: 0.15em;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(173, 255, 0, 0.27);
  display: inline-block;
  text-align: center;
}

.btn-apply:hover {
  box-shadow: 0 0 30px rgba(173, 255, 0, 0.4);
  transform: translateY(-2px);
}

.btn-details {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color:#fff;
  background: transparent;
  padding: 12px 28px;
  text-decoration: none;
  letter-spacing: 0.15em;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  display: inline-block;
  text-align: center;
}

.btn-details:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.2);
  color:#fff;
}

/* TEAM MEMBER (子ページ用) */
.team-member {
  background: rgba(2, 4, 8, 0.85);
  padding: 0;
  border: 1px solid rgba(173, 255, 0, 0.13);
  position: relative;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  overflow: hidden;
}

.team-member:hover {
  border-color: rgba(173, 255, 0, 0.25);
  box-shadow: 0 0 20px rgba(173, 255, 0, 0.1);
  background: rgba(2, 4, 8, 0.95);
}

.member-avatar {
  width: 100%;
  height: 300px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(173, 255, 0, 0.15);
}

.team-member > div:not(.member-avatar) {
  padding: 28px 24px 32px;
}

.member-role {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}

.member-name {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}

.member-bio {
  font-size: 14px;
  line-height: 1.7;
  color:#fff;
  margin-bottom: 20px;
}

.member-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.member-stats .stat {
  flex: 1;
  min-width: 100px;
}

.member-stats .stat-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color:#fff;
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: 6px;
}

.member-stats .stat-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #adff00;
  display: block;
}

@media (max-width: 900px) {
  .access-grid,
  .service-detail-inner {
    grid-template-columns: 1fr;
  }
  
  .service-features {
    grid-template-columns: 1fr;
  }
  
  .position-card {
    padding: 28px 20px;
  }
  
  .position-title {
    font-size: 20px;
  }
  
  .position-desc {
    font-size: 14px;
  }
  
  .team-member > div:not(.member-avatar) {
    padding: 24px 20px 28px;
  }
  
  .member-name {
    font-size: 18px;
  }
  
  .member-bio {
    font-size: 14px;
  }
}

.company-table {
  border: 1px solid rgba(173,255,0,0.18);
  position: relative;
  overflow: hidden;
}

.company-table .corner {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 3;
  border-color: var(--neon);
  border-style: solid;
  border-width: 0;
}

.company-table .corner.tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.company-table .corner.tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.company-table .corner.bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.company-table .corner.br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

.company-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-bottom: 1px solid rgba(173,255,0,0.08);
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.company-row.visible {
  opacity: 1;
  transform: translateX(0);
}

.company-row:last-child {
  border-bottom: none;
}

.company-row .label-cell {
  padding: 22px 28px;
  background: rgba(173,255,0,0.035);
  border-right: 1px solid rgba(173,255,0,0.12);
  display: flex;
  align-items: center;
  gap: 12px;
}

.company-row .label-cell .diamond {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--neon);
  box-shadow: 0 0 6px var(--neon);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.company-row .label-cell span {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: rgba(173,255,0,0.65);
  letter-spacing: 0.12em;
}

.company-row .value-cell {
  padding: 22px 32px;
  display: flex;
  align-items: center;
}

.company-row .value-cell span {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 17px;
  color: #e0eef2;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* ==============================
   NEWS SECTION
============================== */
.news-section {
  position: relative;
  z-index: 2;
  padding: 100px 48px;
  background: transparent;
}

.news-list {
  max-width: 900px;
  border-left: 1px solid rgba(173,255,0,0.2);
  padding-left: 32px;
}

.news-item {
  display: grid;
  /* タグ列は内容に合わせて広がる（カテゴリー名のはみ出し防止） */
  grid-template-columns: 120px minmax(90px, max-content) 1fr;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(173,255,0,0.06);
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.3s, padding-left 0.3s;
  cursor: pointer;
}

.news-item.visible {
  opacity: 1;
  transform: translateX(0);
}

.news-item:hover {
  background: rgba(173,255,0,0.03);
  padding-left: 12px;
}

.news-item .date {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color:#fff;
  letter-spacing: 0.1em;
}

.news-item .tag {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 3px 10px;
  text-align: center;
  white-space: nowrap;
  justify-self: start;
}

.news-item .text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color:#fff;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.news-view-all {
  margin-top: 40px;
  padding-left: 32px;
}

.news-view-all a {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--neon);
  letter-spacing: 0.3em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid rgba(173,255,0,0.3);
  transition: all 0.3s ease;
}

.news-view-all a:hover {
  background: rgba(173,255,0,0.1);
  border-color: var(--neon);
}

/* ==============================
   SINGLE POST CONTENT
============================== */
.single-content h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: #fff;
  margin: 48px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(173,255,0,0.15);
}
.single-content h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 700;
  color:#fff;
  margin: 36px 0 16px;
}
.single-content p {
  margin-bottom: 24px;
}
.single-content img {
  max-width: 100%;
  height: auto;
  border: 1px solid rgba(173,255,0,0.1);
  margin: 24px 0;
}
.single-content ul, .single-content ol {
  margin: 16px 0 24px 24px;
  color:#fff;
}
.single-content li {
  margin-bottom: 8px;
  line-height: 1.8;
}
.single-content a {
  color: #adff00;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.single-content a:hover {
  color: #39ff14;
}
.single-content blockquote {
  border-left: 3px solid #adff00;
  padding: 16px 24px;
  margin: 24px 0;
  background: rgba(173,255,0,0.03);
  color:#fff;
  font-style: italic;
}

/* ==============================
   EVENTS SECTION
============================== */
.events-section {
  position: relative;
  z-index: 2;
  padding: 100px 48px;
  background: transparent;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  max-width: 1100px;
}

.event-card {
  background: rgba(2,4,8,0.85);
  padding: 28px;
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

.event-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.event-card .scan-overlay {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
  pointer-events: none;
}

.event-card .info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.event-card .info-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.2em;
  margin-bottom: 3px;
}

.event-card .info-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.05em;
}

.event-card .slots-bar {
  height: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 1px;
}

.event-card .slots-fill {
  height: 100%;
  transition: width 1s ease;
}

/* ==============================
   MESSAGE SECTION
============================== */
.message-section {
  position: relative;
  z-index: 2;
  padding: 100px 48px; /* 他セクションと同じ上下余白 */
  background: transparent;
  overflow: hidden;
}

.message-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(173,255,0,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.message-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: var(--neon);
  border-style: solid;
  border-width: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.message-corner.visible { opacity: 0.6; }
.message-corner.tl { top: 40px; left: 40px; border-top-width: 2px; border-left-width: 2px; }
.message-corner.tr { top: 40px; right: 40px; border-top-width: 2px; border-right-width: 2px; }
.message-corner.bl { bottom: 40px; left: 40px; border-bottom-width: 2px; border-left-width: 2px; }
.message-corner.br { bottom: 40px; right: 40px; border-bottom-width: 2px; border-right-width: 2px; }

.message-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.message-quote {
  font-family: 'Orbitron', sans-serif;
  font-size: 56px;
  color: rgba(173,255,0,0.18);
  line-height: 0.8;
  margin-bottom: 12px;
}

.message-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(18px, 2.8vw, 26px);
  color:#fff;
  line-height: 2.2;
  letter-spacing: 0.08em;
  white-space: pre-line;
  min-height: 300px;
  text-align: left;
  padding: 0 40px;
}

.message-cursor {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  background: var(--neon);
  margin-left: 2px;
  vertical-align: middle;
  animation: blink-cursor 0.7s infinite;
}

.message-signature {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 40px;
}

.message-signature .line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon));
  margin-bottom: 16px;
}

.message-signature .role {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.1em;
}

.message-signature .company {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  color:#fff;
  margin-top: 4px;
}

/* ==============================
   TEAM SECTION
============================== */
.team-section {
  position: relative;
  z-index: 2;
  padding: 100px 48px;
  background: transparent;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 1200px;
}

.team-card {
  background: rgba(2,4,8,0.9);
  padding: 32px 24px;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.team-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.team-card .scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0.6;
  pointer-events: none;
}

.team-card .stat-bar-bg {
  height: 1px;
  background: rgba(255,255,255,0.08);
}

.team-card .stat-bar-fill {
  height: 100%;
  transition: width 1.5s ease;
}

/* ==============================
   RECRUIT SECTION
============================== */
.recruit-section {
  position: relative;
  z-index: 2;
  padding: 100px 48px;
  background: transparent;
}

.recruit-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 900px;
}

.recruit-item {
  background: rgba(2,4,8,0.85);
  padding: 28px 32px;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.3s ease, background 0.3s ease;
  backdrop-filter: blur(8px);
}

.recruit-item.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ==============================
   CONTACT SECTION
============================== */
.contact-section {
  position: relative;
  z-index: 2;
  padding: 120px 48px;
  background: rgba(173,255,0,0.02);
  border-top: 1px solid rgba(173,255,0,0.1);
  overflow: hidden;
  text-align: center;
}

.contact-grid-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(173,255,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(173,255,0,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.contact-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(173,255,0,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.contact-cta-primary {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: #020408;
  background: linear-gradient(135deg, var(--neon), var(--neon-green));
  letter-spacing: 0.3em;
  text-decoration: none;
  padding: 20px 48px;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 0 40px rgba(173,255,0,0.4), 0 0 80px rgba(173,255,0,0.2);
  position: relative;
  overflow: hidden;
}

.contact-cta-primary:hover {
  box-shadow: 0 0 60px rgba(173,255,0,0.7), 0 0 120px rgba(173,255,0,0.3);
  transform: scale(1.05);
}

.contact-cta-secondary {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--neon);
  border: 1px solid rgba(173,255,0,0.4);
  letter-spacing: 0.3em;
  text-decoration: none;
  padding: 20px 48px;
  display: inline-block;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.contact-cta-secondary:hover {
  background: rgba(173,255,0,0.1);
  border-color: var(--neon);
  box-shadow: 0 0 30px rgba(173,255,0,0.2);
}

.contact-social a {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color:#fff;
  letter-spacing: 0.2em;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-social a:hover {
  color: var(--neon);
}

/* ==============================
   GLITCH DIVIDER
============================== */
.glitch-divider {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 2;
}

.glitch-divider canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.glitch-divider .neon-border {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon) 20%, var(--neon-green) 50%, var(--neon) 80%, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glitch-divider .neon-border.top { top: 0; }
.glitch-divider .neon-border.bottom { bottom: 0; }

.glitch-divider.triggered .neon-border { opacity: 0.6; }

.glitch-divider .transition-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: rgba(173,255,0,0.4);
  letter-spacing: 0.4em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
}

.glitch-divider.triggered .transition-label { opacity: 1; }

/* ==============================
   FOOTER
============================== */
.main-footer {
  position: relative;
  background: #010306;
  overflow: hidden;
  padding: 0;
}

.main-footer .footer-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(173,255,0,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.main-footer .footer-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(173,255,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173,255,0,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.main-footer .footer-neon-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(173,255,0,0.6) 20%, rgba(173,255,0,0.8) 50%, rgba(173,255,0,0.6) 80%, transparent);
  box-shadow: 0 0 8px rgba(173,255,0,0.3), 0 0 20px rgba(173,255,0,0.15);
}

.main-footer .footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 48px 40px;
}

.main-footer .footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  padding-bottom: 48px;
}

.main-footer .footer-brand {
  flex-shrink: 0;
  max-width: 340px;
}

.main-footer .footer-logo-img {
  height: 40px;
  width: auto;
  margin-bottom: 12px;
}

.main-footer .footer-logo {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.08em;
  text-shadow: 0 0 12px var(--neon), 0 0 30px rgba(173,255,0,0.35);
}

.main-footer .footer-logo .accent {
  color: var(--neon);
}

.main-footer .footer-tagline {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: rgba(173,255,0,0.5);
  letter-spacing: 0.35em;
  margin-top: 8px;
  text-transform: uppercase;
}

.main-footer .footer-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color:#fff;
  line-height: 1.9;
  margin-top: 20px;
  letter-spacing: 0.02em;
}

.main-footer .footer-nav {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.main-footer .footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 110px;
}

.main-footer .footer-col-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--neon);
  letter-spacing: 0.25em;
  margin-bottom: 6px;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 10px;
}

.main-footer .footer-col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 1px;
  background: rgba(173,255,0,0.4);
}

.main-footer .footer-col a {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color:#fff;
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: color 0.3s, transform 0.3s;
  display: inline-block;
}

.main-footer .footer-col a:hover {
  color: var(--neon);
  transform: translateX(4px);
}

.main-footer .footer-bottom {
  border-top: 1px solid rgba(173,255,0,0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.main-footer .footer-bottom .copyright {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color:#fff;
  letter-spacing: 0.1em;
}

.main-footer .footer-legal {
  display: flex;
  gap: 24px;
}

.main-footer .footer-legal a {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: rgba(173,255,0,0.35);
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 0.3s;
}

.main-footer .footer-legal a:hover {
  color: var(--neon);
}

/* ==============================
   HAMBURGER MENU (SP)
============================== */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(173,255,0,0.3);
  cursor: pointer;
  z-index: 1001;
  padding: 0;
}

.hamburger-line {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--neon);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger-btn.active .hamburger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.hamburger-btn.active .hamburger-line:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.active .hamburger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(2,4,8,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 80px 24px 40px;
  gap: 0;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 300px;
  margin-bottom: 32px;
}

.mobile-menu-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: var(--neon);
  letter-spacing: 0.4em;
}

.mobile-menu-close {
  background: transparent;
  color:#fff;
  font-size: 28px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.1);
  transition: color 0.3s, border-color 0.3s;
}

.mobile-menu-close:hover {
  color: var(--neon);
  border-color: var(--neon);
}

.mobile-menu-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 300px;
}

.mobile-menu-links li {
  width: 100%;
  border-bottom: 1px solid rgba(173,255,0,0.06);
}

.mobile-menu-links a {
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color:#fff;
  letter-spacing: 0.25em;
  text-decoration: none;
  padding: 18px 0;
  text-align: center;
  transition: color 0.3s, text-shadow 0.3s;
}

.mobile-menu-links a:hover {
  color: var(--neon);
  text-shadow: 0 0 10px var(--neon);
}

.mobile-menu-entry {
  display: block;
  margin-top: 28px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #020408;
  background: var(--neon);
  padding: 16px 48px;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-align: center;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  box-shadow: 0 0 24px rgba(173,255,0,0.4);
  transition: background 0.3s, box-shadow 0.3s;
}

.mobile-menu-entry:hover {
  background: var(--neon-green);
  box-shadow: 0 0 36px rgba(57,255,20,0.5);
}

.mobile-menu-footer {
  margin-top: auto;
  padding-top: 24px;
}

.mobile-menu-footer span {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color:#fff;
  letter-spacing: 0.15em;
}

/* ==============================
   RESPONSIVE
============================== */

/* Tablet */
@media (max-width: 1024px) {
  .hero-circuit { opacity: 0.08; }
  .hero-circuit.left { left: 20px; }
  .hero-circuit.right { right: 20px; }
  .hero-neon-line.left-line { left: 20px; }
  .hero-neon-line.right-line { right: 20px; }
  .hero-corner.tl { left: 16px; }
  .hero-corner.tr { right: 16px; }
  .hero-corner.bl { left: 16px; }
  .hero-corner.br { right: 16px; }
  .hero-status-panel { left: 24px; }
  .hero-data-panel { right: 24px; }
  .main-nav { padding: 14px 24px; }
  .nav-links { gap: 20px; }
  .business-inner { padding: 0 24px; }
  .company-inner { padding: 0 24px; }
  .news-section { padding: 80px 24px; }
  .events-section { padding: 80px 24px; }
  .team-section { padding: 80px 24px; }
  .recruit-section { padding: 80px 24px; }
  .contact-section { padding: 80px 24px; }
  .message-section { padding: 80px 24px; }
  .main-footer .footer-inner { padding: 48px 24px 32px; }
  .main-footer .footer-nav { gap: 32px; }
}

/* SP */
@media (max-width: 768px) {
  /* --- Nav --- */
  .nav-links { display: none !important; }
  .hamburger-btn { display: flex; }
  .mobile-menu { display: block; }
  .main-nav {
    padding: 10px 16px;
    background: rgba(2,4,8,0.95);
  }
  .nav-brand .brand-name { font-size: 14px; }
  .nav-brand .brand-sub { font-size: 14px; letter-spacing: 0.2em; }

  /* --- Ticker --- */
  .ticker-tape { height: 24px; }
  .ticker-item { font-size: 14px; padding: 0 24px; }
  .main-nav { top: 24px; }

  /* --- Hero --- */
  .hero {
    height: calc(var(--vh, 1vh) * 100);
  }
  .hero-status-panel { display: none !important; }
  .hero-data-panel { display: none !important; }
  .hero-circuit { display: none !important; }
  .hero-neon-line { display: none !important; }
  .hero-corner { display: none !important; }
  .hero-content { padding: 0 16px; }
  .hero-watermark { font-size: clamp(60px, 18vw, 120px); }
  .hero-logo { font-size: clamp(40px, 12vw, 72px); line-height: 0.95; }
  .hero-sub { font-size: clamp(14px, 2.5vw, 14px); letter-spacing: 0.3em; margin-top: 8px; }
  .hero-label { font-size: 14px; letter-spacing: 0.25em; margin-bottom: 16px; gap: 10px; }
  .hero-label .line { width: 24px; }
  .hero-catch { margin-top: 24px; }
  .hero-catch .en { font-size: clamp(14px, 3vw, 16px); letter-spacing: 0.15em; }
  .hero-catch .jp { font-size: clamp(14px, 2.5vw, 14px); letter-spacing: 0.08em; }
  .hero-cta { margin-top: 32px; gap: 12px; flex-direction: column; align-items: center; }
  .hero-cta .btn-primary { padding: 14px 32px; font-size: 14px; width: 220px; text-align: center; }
  .hero-cta .btn-secondary { padding: 13px 28px; font-size: 14px; width: 220px; text-align: center; }
  .hero-scroll-indicator { bottom: 24px; }
  .hero-scroll-indicator .line { height: 28px; }
  .hero-horizon { bottom: 80px; }
  .hero-glow-center { width: 400px; height: 400px; }

  /* --- Glitch Divider --- */
  .glitch-divider { height: 48px !important; }
  .glitch-divider .transition-label { font-size: 14px; letter-spacing: 0.2em; }

  /* --- Business Section --- */
  .business-section { padding: 60px 0 80px; }
  .business-inner { padding: 0 16px; }
  .business-watermark { font-size: 48px; left: -20px; }
  .business-cards { gap: 12px; perspective: 800px; }
  .business-card { padding: 24px 20px; }
  .business-card .card-id { font-size: 22px; }
  .business-card .card-title { font-size: 19px; }
  .business-card .card-desc { font-size: 14px; line-height: 1.8; }
  .business-cta { margin-top: 48px; }
  .business-cta a { padding: 14px 36px; font-size: 14px; letter-spacing: 0.15em; }

  /* --- Company Section --- */
  .company-section { padding: 80px 0 60px; }
  .company-inner { padding: 0 16px; }
  .company-watermark { font-size: 48px; right: -30px; }
  .company-layout { grid-template-columns: 1fr; gap: 24px; }
  .company-map-container { height: 280px; }
  .company-row { grid-template-columns: 1fr; }
  .company-row .label-cell {
    border-right: none;
    border-bottom: 1px solid rgba(173,255,0,0.06);
    padding: 14px 16px;
  }
  .company-row .label-cell span { font-size: 14px; }
  .company-row .value-cell { padding: 14px 16px; }
  .company-row .value-cell span { font-size: 15px; }

  /* --- Section Headers --- */
  .section-label { font-size: 14px; letter-spacing: 0.25em; margin-bottom: 14px; gap: 10px; }
  .section-title { font-size: clamp(32px, 8vw, 48px); }
  .section-subtitle { font-size: clamp(14px, 2.2vw, 14px); letter-spacing: 0.25em; }

  /* --- News Section --- */
  .news-section { padding: 60px 16px; }
  .news-list { padding-left: 16px; border-left-width: 1px; }
  .news-item {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 0;
  }
  .news-item .date { font-size: 14px; }
  .news-item .tag { font-size: 14px; width: fit-content; }
  .news-item .text { font-size: 14px; line-height: 1.6; }
  .news-view-all { padding-left: 16px; margin-top: 28px; }
  .news-view-all a { font-size: 14px; padding: 10px 20px; }

  /* --- Events Section --- */
  .events-section { padding: 60px 16px; }
  .events-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 100%;
  }
  .event-card { padding: 20px; }
  .event-card .info-grid { gap: 8px; }

  /* --- Message Section --- */
  .message-section { padding: 60px 16px; }
  .message-quote { font-size: 48px; margin-bottom: 20px; }
  .message-text {
    font-size: clamp(14px, 3.5vw, 18px);
    line-height: 2;
    padding: 0 8px;
    min-height: 200px;
  }
  .message-signature { padding-right: 8px; margin-top: 40px; }
  .message-signature .role { font-size: 14px; }
  .message-signature .company { font-size: 15px; }
  .message-corner.tl { top: 16px; left: 16px; width: 20px; height: 20px; }
  .message-corner.tr { top: 16px; right: 16px; width: 20px; height: 20px; }
  .message-corner.bl { bottom: 16px; left: 16px; width: 20px; height: 20px; }
  .message-corner.br { bottom: 16px; right: 16px; width: 20px; height: 20px; }

  /* --- Team Section --- */
  .team-section { padding: 60px 16px; }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 100%;
  }
  .team-card { padding: 20px 14px; }

  /* --- Recruit Section --- */
  .recruit-section { padding: 60px 16px; }
  .recruit-list { gap: 14px; max-width: 100%; }
  .recruit-item { padding: 20px 16px; }

  /* --- Contact Section --- */
  .contact-section { padding: 60px 16px; }
  .contact-cta-primary { padding: 16px 32px; font-size: 14px; letter-spacing: 0.2em; }
  .contact-cta-secondary { padding: 16px 32px; font-size: 14px; letter-spacing: 0.2em; }
  .contact-social { gap: 20px; flex-wrap: wrap; }
  .contact-social a { font-size: 14px; }

  /* --- Footer --- */
  .main-footer .footer-inner { padding: 40px 16px 28px; }
  .main-footer .footer-top { flex-direction: column; align-items: flex-start; gap: 32px; padding-bottom: 32px; }
  .main-footer .footer-brand { max-width: 100%; }
  .main-footer .footer-logo { font-size: 16px; }
  .main-footer .footer-tagline { font-size: 14px; margin-top: 6px; }
  .main-footer .footer-desc { font-size: 14px; margin-top: 14px; }
  .main-footer .footer-nav { gap: 28px; width: 100%; }
  .main-footer .footer-col { min-width: 0; flex: 1; }
  .main-footer .footer-col-title { font-size: 14px; margin-bottom: 4px; padding-bottom: 8px; }
  .main-footer .footer-col a { font-size: 14px; }
  .main-footer .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 20px; }
  .main-footer .footer-bottom .copyright { font-size: 14px; }
  .main-footer .footer-legal { gap: 16px; }
  .main-footer .footer-legal a { font-size: 14px; }

  /* --- Page Hero (Subpages) --- */
  .page-hero {
    min-height: 40vh;
    padding: 100px 16px 60px;
  }
  .page-hero h1 { font-size: clamp(28px, 9vw, 52px) !important; margin-bottom: 16px !important; }
  .page-hero p { font-size: 14px !important; }

  /* --- Page Section (Subpages) --- */
  .page-section { padding: 60px 0; }
  .page-section-inner { padding: 0 16px; }

  /* --- Service Detail --- */
  .service-detail { padding: 48px 16px; }
  .service-detail-inner { grid-template-columns: 1fr !important; gap: 24px; }
  .service-detail-content h3 { font-size: 20px; }
  .service-detail-content .subtitle { font-size: 14px; }
  .service-detail-content p { font-size: 14px; line-height: 1.8; }
  .service-features { gap: 8px; }
  .service-feature { font-size: 14px; padding: 8px 14px; }
  .service-detail-visual { height: 200px; border-radius: 4px; overflow: hidden; }

  /* --- History Timeline --- */
  .history-timeline { padding-left: 20px; }
  .history-timeline::before { left: 0; }
  .history-item { padding-left: 24px; margin-bottom: 32px; }
  .history-item::before { left: -6px; width: 12px; height: 12px; }
  .history-year { font-size: 14px; }
  .history-content { font-size: 14px; line-height: 1.8; }
  .history-image { height: 180px; }

  /* --- Access Section --- */
  .access-grid { grid-template-columns: 1fr !important; gap: 24px; }
  .access-info { flex-direction: column; gap: 16px; }
  .access-item { padding: 16px; }
  .access-label { font-size: 14px; }
  .access-value { font-size: 14px; line-height: 1.8; }
  .access-map { height: 250px; }

  /* --- Message (About page) --- */
  .message-inner { padding: 0 8px; }
  .message-text { font-size: 16px !important; line-height: 2 !important; }
  .message-author { font-size: 14px; margin-top: 32px; }

  /* --- Footer (subpages) - handled by unified footer styles above --- */

  /* --- Bootloader --- */
  .boot-panel { width: 92vw; }
  .boot-header .title { font-size: 14px; letter-spacing: 0.15em; }
  .boot-terminal { height: clamp(160px, 30vh, 240px); padding: 12px 14px; }
  .boot-line { font-size: 14px; }
  .boot-hex { font-size: 14px; padding: 0 16px; }
  .bootloader .corner { width: 20px; height: 20px; }
  .bootloader .corner.tl { top: 12px; left: 12px; }
  .bootloader .corner.tr { top: 12px; right: 12px; }
  .bootloader .corner.bl { bottom: 12px; left: 12px; }
  .bootloader .corner.br { bottom: 12px; right: 12px; }
}

/* Small SP (iPhone SE etc.) */
@media (max-width: 375px) {
  .hero-logo { font-size: clamp(32px, 11vw, 52px); }
  .hero-sub { font-size: 14px; letter-spacing: 0.2em; }
  .hero-catch .en { font-size: 14px; }
  .hero-catch .jp { font-size: 14px; }
  .hero-cta .btn-primary { width: 190px; padding: 12px 24px; font-size: 14px; }
  .hero-cta .btn-secondary { width: 190px; padding: 11px 20px; font-size: 14px; }
  .team-grid { grid-template-columns: 1fr; }
  .section-title { font-size: clamp(28px, 9vw, 40px); }
  .message-text { font-size: 15px; }
  .business-card .card-desc { font-size: 14px; }
  .company-row .value-cell span { font-size: 14px; }
  .mobile-menu-links a { font-size: 14px; padding: 16px 0; }
}

/* =====================================================================
   DECK STYLE LAYER — 会社説明資料のトンマナ再現
   （上部コーナー装飾 / 同心円リアクター背景 / フッター発光エンブレム / HUDフレーム）
   素材: img/deck/corner.svg, rings.svg, reactor.svg
===================================================================== */

/* --- 1. 上部コーナーの回路装飾（資料各ページ上部のモチーフ） --- */
.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  top: 104px;
  width: 240px;
  height: 60px;
  background: url(img/deck/corner.svg) no-repeat center / contain;
  opacity: 0.9;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 0 6px rgba(173,255,0,0.45));
}
.page-hero::before { left: 40px; }
.page-hero::after  { right: 40px; transform: scaleX(-1); }

/* フロントHEROにも同じ装飾（明示マークアップ） */
.hero .deck-corner {
  position: absolute;
  top: 120px;
  width: 240px;
  height: 60px;
  background: url(img/deck/corner.svg) no-repeat center / contain;
  opacity: 0.9;
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 0 6px rgba(173,255,0,0.45));
}
.hero .deck-corner.left  { left: 48px; }
.hero .deck-corner.right { right: 48px; transform: scaleX(-1); }

/* --- 2. 同心円リアクター背景は「オプトイン」方式に（全セクション一律をやめる） --- */
/* リングを出したいセクションにだけ .has-rings を付与する。
   isolation でスタッキングコンテキストを作り、リングを z-index:-1 で
   「自身の背景より上・全コンテンツより下」に敷く。
   （子要素の position を書き換えない＝ .message-glow 等の absolute 装飾を壊さない） */
.has-rings { position: relative; isolation: isolate; }
.has-rings::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: min(900px, 92vmin);
  height: min(900px, 92vmin);
  transform: translate(-50%, -50%);
  background: url(img/deck/rings.svg) no-repeat center / contain;
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
}

/* --- 3. フッターの発光リアクター・エンブレム（資料下部のモチーフ） --- */
.main-footer .footer-neon-line {
  position: relative;
  overflow: visible;
}
.main-footer .footer-neon-line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  background: url(img/deck/reactor.svg) no-repeat center / contain;
  filter: drop-shadow(0 0 8px rgba(173,255,0,0.5));
  pointer-events: none;
}
/* --- 4. HUDフレーム（角を切り欠いた資料のボックス調） --- */
.access-item {
  position: relative;
  border: 1px solid rgba(173,255,0,0.22);
  background: rgba(173,255,0,0.02);
  padding: 24px 26px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.access-item::before,
.access-item::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: #adff00;
  opacity: 0.8;
}
.access-item::before { top: 8px; left: 8px; border-top: 2px solid; border-left: 2px solid; }
.access-item::after  { bottom: 8px; right: 8px; border-bottom: 2px solid; border-right: 2px solid; }

/* レスポンシブ：狭幅ではコーナー装飾を控えめに */
@media (max-width: 768px) {
  .page-hero::before, .page-hero::after,
  .hero .deck-corner { width: 150px; height: 38px; top: 92px; opacity: 0.7; }
  .page-hero::before { left: 12px; }
  .page-hero::after  { right: 12px; }
  .hero .deck-corner.left  { left: 14px; }
  .hero .deck-corner.right { right: 14px; }
}
@media (max-width: 480px) {
  .page-hero::before, .page-hero::after,
  .hero .deck-corner { display: none; }
}

/* =====================================================================
   ★ DECK REDESIGN OVERRIDE ★  会社説明資料スライド調への全面刷新
   （背景WebGL/パーティクル/グリッチ/スキャンライン等のノイズ演出を撤去し、
     純黒・中央寄せ緑発光見出し・コーナー装飾・同心円・リアクター区切り・HUD枠 へ）
   ※このブロックは意図的に最後に置き、以前のスタイルを上書きします
===================================================================== */

/* --- 0. ベース：純黒キャンバス --- */
html, body { background: #000 !important; }
:root { --dark-bg: #000; --dark-bg2: #000; }

/* --- 1. ノイズ系レイヤーを全撤去 --- */
#webgl-canvas,
#hero-particle-canvas,
.hero-particle-canvas,
.hero-scanlines,
.hero-grid,
.hero-watermark,
.hero-glow-center,
.hero-circuit,
.hero-horizon,
.hero-neon-line,
.business-watermark,
.company-watermark,
.company-scan-line,
.glitch-divider canvas,
.glitch-divider .neon-border,
.glitch-divider .transition-label {
  display: none !important;
}

/* --- 2. ヒーロー：資料の「タイトルスライド」調にクリーン化 --- */
.hero {
  background: #000 !important;
  border-bottom: 1px solid rgba(173,255,0,0.12);
}
/* 中央に薄い同心円ウォーターマーク */
.hero::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: min(900px, 92vmin);
  height: min(900px, 92vmin);
  transform: translate(-50%, -50%);
  background: url(img/deck/rings.svg) no-repeat center / contain;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}
.hero-content { position: relative; z-index: 5; }
.hero-logo { animation: fade-up 0.9s ease forwards 0.5s !important; }
.hero-logo .games { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.35); }
.hero-bottom-bar { background: linear-gradient(90deg, transparent, rgba(173,255,0,0.7), transparent) !important; height: 1px !important; }

/* --- 3. セクション見出し：中央寄せ＋緑発光（資料調） --- */
.section-header { text-align: center !important; }
.section-header .section-label { justify-content: center !important; }
.section-header .section-label .bar { display: none; }
.section-title {
  color: #fff !important;
  text-shadow: 0 0 18px rgba(173,255,0,0.35), 0 0 48px rgba(173,255,0,0.18) !important;
}
.section-subtitle { color: var(--neon) !important; opacity: 0.85; }
/* 見出しのスライドイン演出は残しつつ初期位置を補正（中央寄せでも崩れない） */

/* --- 4. セクション区切り：グリッチ → リアクター発光ライン --- */
.glitch-divider {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent !important;
}
.glitch-divider::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(173,255,0,0.65) 50%, transparent);
  box-shadow: 0 0 8px rgba(173,255,0,0.35);
}
.glitch-divider::after {
  content: "";
  position: relative;
  z-index: 1;
  width: 46px; height: 46px;
  background: url(img/deck/reactor.svg) no-repeat center / contain #000;
  border-radius: 50%;
  filter: drop-shadow(0 0 8px rgba(173,255,0,0.5));
}

/* --- 5. 同心円ウォーターマークの微調整（背景を確実に黒へ） --- */
.business-section, .company-section,
.news-section, .events-section, .team-section, .recruit-section,
.message-section, .contact-section,
.page-section, .service-detail {
  background-color: #000 !important;
}

/* --- 6. HUDフレーム：角を切り欠いた資料調ボックス --- */
.business-card,
.event-card,
.position-card,
.team-member {
  border: 1px solid rgba(173,255,0,0.28) !important;
  background: rgba(173,255,0,0.025) !important;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.business-card::after,
.event-card::after {
  content: "";
  position: absolute;
  bottom: 9px; right: 9px;
  width: 14px; height: 14px;
  border-bottom: 2px solid var(--neon);
  border-right: 2px solid var(--neon);
  opacity: 0.75;
  pointer-events: none;
}

/* --- 7. 会社概要テーブル：枠を資料調HUDフレームに --- */
.company-table {
  border: 1px solid rgba(173,255,0,0.28) !important;
  background: rgba(173,255,0,0.02) !important;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

/* --- 8. 3Dグローブ → 資料調の静的リアクター・エンブレムに置換 --- */
.company-map-container {
  background: radial-gradient(circle at 50% 50%, rgba(173,255,0,0.06), transparent 70%), #000 !important;
  border: 1px solid rgba(173,255,0,0.2);
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.company-map-container::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 86%; height: 86%;
  transform: translate(-50%, -50%);
  background: url(img/deck/rings.svg) no-repeat center / contain;
  opacity: 0.8;
  pointer-events: none;
}
.company-map-container canvas { display: none !important; }
.company-map-container .map-hint { display: none !important; }
.company-map-container .map-label { position: relative; z-index: 2; }

/* --- 9. ボタン/ナビ：発光感をやや強調（資料の鮮烈な緑） --- */
.btn-primary, .nav-entry-btn { text-shadow: none; }


/* --- 10. 追加調整：フロント側カードにもHUDフレーム、残スキャン演出を撤去 --- */
.team-card .scan-line,
.business-card .top-edge { display: none !important; }

.team-card,
.recruit-item {
  border: 1px solid rgba(173,255,0,0.28) !important;
  background: rgba(173,255,0,0.025) !important;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

/* セクション下部の余計なセパレータ/バーは控えめに */
.business-top-sep { display: none !important; }

/* =====================================================================
   ★ DECK COMPONENTS ★  資料スライドの構成要素（About等で使用）
===================================================================== */

/* セクション共通ラッパ */
.deck-sec { position: relative; padding: 96px 24px; background:#000; }
.deck-sec .inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
.deck-sec .lead {
  text-align: center;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 2;
  color:#fff;
  max-width: 920px;
  margin: 0 auto 56px;
}
.deck-sec .big-title {
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 4.6vw, 56px);
  color: #fff;
  line-height: 1.3;
  margin: 8px auto 28px;
  text-shadow: 0 0 22px rgba(173,255,0,0.25);
}
.deck-sec .big-title .accent { color: var(--neon); text-shadow: 0 0 18px rgba(173,255,0,0.6); }

/* グリーン背景セクション（キーカラー） */
.section-green {
  background: linear-gradient(135deg, #b6ff14 0%, #7be000 60%, #4fc400 100%) !important;
  color: #04210a;
  text-align: center;
  padding: 84px 24px;
  position: relative;
  overflow: hidden;
}
.section-green .inner { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; }
.section-green h2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(30px, 5vw, 60px);
  color: #04210a;
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.section-green p { color: rgba(4,33,10,0.82); font-size: clamp(14px,1.5vw,18px); line-height: 1.9; margin-top: 18px; }
.section-green .gbtn {
  display: inline-block; margin-top: 32px; padding: 16px 44px;
  background: #04210a; color: #b6ff14; font-family: 'Orbitron', sans-serif; font-weight: 700;
  letter-spacing: 0.18em; font-size: 14px; text-decoration: none;
  clip-path: polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
  transition: transform 0.2s;
}
.section-green .gbtn:hover { transform: translateY(-2px); }

/* 経営理念：枠付きステートメント（資料P4） */
.deck-statement {
  max-width: 1040px; margin: 0 auto 36px; padding: clamp(36px,5vw,64px) clamp(24px,4vw,56px);
  text-align: center; position: relative;
  border: 2px solid var(--neon);
  /* clip-pathはbox-shadowの外側グローを切り取るため、drop-shadow(クリップ後適用)で発光させる */
  box-shadow: inset 0 0 46px rgba(173,255,0,0.06);
  filter: drop-shadow(0 0 16px rgba(173,255,0,0.35));
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
  background: rgba(173,255,0,0.02);
}
.deck-statement .phrase {
  font-family: 'Noto Sans JP', sans-serif; font-weight: 900;
  font-size: clamp(40px, 7vw, 88px); color: #fff; line-height: 1.1; letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(255,255,255,0.85), 0 0 44px rgba(173,255,0,0.55);
}
.deck-philosophy-sub {
  text-align: center; max-width: 980px; margin: 0 auto 24px;
  font-size: clamp(18px, 2.4vw, 30px); font-weight: 700; color: #fff; line-height: 1.7;
  border-bottom: 1px solid rgba(173,255,0,0.4); padding-bottom: 28px;
}
.deck-philosophy-body {
  text-align: center; max-width: 900px; margin: 28px auto 0;
  font-size: clamp(14px, 1.4vw, 16px); color:#fff; line-height: 2.1;
}

/* 横並びフロー（集客→説明→契約→サポート / 初配信フロー） */
.flow-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.flow-step {
  flex: 1; min-width: 200px; max-width: 280px; position: relative;
  border: 1px solid rgba(173,255,0,0.28); background: rgba(173,255,0,0.03);
  padding: 28px 22px; text-align: center;
}
/* HUD風の角アクセント（clip-pathは矢印を切るため枠線ブラケットで表現） */
.flow-step .num::before {
  content: ""; position: absolute; top: 7px; left: 7px; width: 12px; height: 12px;
  border-top: 2px solid var(--neon); border-left: 2px solid var(--neon); opacity: 0.65;
}
.flow-step .num { font-family: 'Orbitron', sans-serif; font-size: 14px; color: var(--neon); letter-spacing: 0.2em; }
.flow-step .ttl { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 22px; color: #fff; margin: 8px 0 12px; }
.flow-step .dsc { font-size: 14px; color:#fff; line-height: 1.8; }
.flow-step:not(:last-child)::after {
  content: "›"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  color: var(--neon); font-size: 28px; z-index: 2; text-shadow: 0 0 8px rgba(173,255,0,0.6);
}

/* 3カラム・カード（育成カリキュラム / 全国対応特徴 / 将来構想） */
.deck-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.deck-card {
  position: relative; border: 1px solid rgba(173,255,0,0.28); background: rgba(173,255,0,0.03);
  padding: 30px 28px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.deck-card .card-h {
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 19px; color: var(--neon);
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(173,255,0,0.3);
  text-align: center;
}
.deck-card ul { margin: 0; padding: 0; list-style: none; }
.deck-card li {
  font-size: 14.5px; color:#fff; line-height: 1.9; padding-left: 18px; position: relative;
}
.deck-card li::before { content: "▸"; position: absolute; left: 0; color: var(--neon); }
.deck-card .card-note { font-size: 18px; color:#fff; line-height: 1.9; }

/* 拠点カード（東京/大阪/福岡）— グリーン強調 */
.loc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.loc-card {
  border: 2px solid var(--neon); background: rgba(173,255,0,0.06);
  box-shadow: inset 0 0 24px rgba(173,255,0,0.04);
  filter: drop-shadow(0 0 10px rgba(173,255,0,0.25));
  padding: 26px 26px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.loc-card .loc-name {
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 26px; color: #fff;
  letter-spacing: 0.04em; padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(173,255,0,0.5); text-shadow: 0 0 12px rgba(173,255,0,0.4);
}
.loc-card ul { margin: 0; padding: 0; list-style: none; }
.loc-card li { font-size: 15px; color:#fff; line-height: 2; padding-left: 16px; position: relative; }
.loc-card li::before { content: "・"; position: absolute; left: 0; color: var(--neon); }

/* ピラミッド（PRO TEAM 構造） */
.pyramid { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pyramid .tier {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700; color: #04210a;
  padding: 20px 10px; line-height: 1.3;
}
.pyramid .t1 { width: 54%; font-size: clamp(15px,1.6vw,19px); background: linear-gradient(135deg,#d6ff7a,#9bf000); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.pyramid .t2 { width: 78%; font-size: clamp(16px,1.8vw,21px); background: linear-gradient(135deg,#aef21f,#62cf00); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.pyramid .t3 { width: 100%; font-size: clamp(17px,2vw,23px); background: linear-gradient(135deg,#86d800,#3fa600); clip-path: polygon(11% 0, 89% 0, 100% 100%, 0 100%); }

/* 価値ボックス（スポンサー獲得 等） */
.value-box { margin-bottom: 26px; }
.value-box .vb-h {
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 19px; color: #fff;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(173,255,0,0.35);
  padding: 12px 18px; text-align: center;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.value-box .vb-b { font-size: 14px; color:#fff; line-height: 1.95; padding: 14px 8px 0; }

/* 2カラムレイアウト（PRO TEAM: 価値 + ピラミッド） */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

/* 会社概要テーブルの拡幅・改行抑制 */
.company-layout { grid-template-columns: 1fr !important; gap: 28px !important; }
.company-inner { max-width: 1180px !important; }
.company-row { grid-template-columns: 210px 1fr !important; }
.company-row .label-cell { padding: 24px 30px !important; }
.company-row .value-cell { padding: 24px 38px !important; }
.company-row .value-cell span { font-size: 18px !important; line-height: 1.7 !important; }
.company-row .label-cell span { font-size: 14px !important; }
.company-map-container { height: 300px !important; }

/* レスポンシブ */
@media (max-width: 880px) {
  .deck-grid3, .loc-cards { grid-template-columns: 1fr; }
  .split-2 { grid-template-columns: 1fr; gap: 28px; }
  .flow-step { max-width: none; }
  .flow-step:not(:last-child)::after { content: "▾"; right: 50%; top: auto; bottom: -16px; transform: translateX(50%); }
  .company-row { grid-template-columns: 1fr !important; }
  .company-row .value-cell span { font-size: 16px !important; }
}

/* --- 11. HUDフレーム化したカードのhoverグロー補正 ---
   clip-path適用要素はbox-shadowの外側が切れるため、drop-shadowで発光させる */
.business-card:hover,
.event-card:hover,
.team-card:hover,
.position-card:hover,
.recruit-item:hover {
  filter: drop-shadow(0 0 12px rgba(173,255,0,0.3));
}

/* --- 12. モバイル改行・余白の最適化 ----------------------------------
   375px/320px幅での折り返し計算に基づく調整 */

/* 見出しはバランス折返し（対応ブラウザのみ。非対応では無視され従来通り） */
.big-title,
.section-title,
.deck-philosophy-sub,
.deck-statement .phrase,
.section-green h2 { text-wrap: balance; }

@media (max-width: 768px) {
  .deck-sec { padding: 64px 20px; }

  /* 理念スローガン：375pxで1行に収まるサイズへ（40px固定だと「…変え/る」と折れる） */
  .deck-statement { padding: 30px 14px; }
  .deck-statement .phrase { font-size: clamp(23px, 7vw, 40px); }

  /* PC向けの文中<br>はモバイルでは二重改行になるため無効化し、自動折返しに任せる
     （.deck-philosophy-body の<br><br>は段落区切りなので残す） */
  .deck-philosophy-sub br { display: none; }
  .deck-philosophy-sub { font-size: clamp(16px, 4.6vw, 22px); }

  .big-title { font-size: clamp(23px, 6.4vw, 34px); }
  .deck-sec .lead { font-size: 14px; text-align: left; }

  /* グリーン帯の見出し：「ゲームで、人生を変える。」を1行維持 */
  .section-green { padding: 60px 20px; }
  .section-green h2 { font-size: clamp(23px, 6.6vw, 34px); }

  /* 縦積みフローの矢印▾がgap12pxだと次カードに食い込む */
  .flow-steps { gap: 28px; }

  .loc-card .loc-name { font-size: 21px; }
  .pyramid .tier { padding: 14px 8px; }
}

@media (max-width: 880px) {
  /* 会社概要テーブル：PC向けの広いpadding(!important)がモバイルでも勝つため上書き */
  .company-row .label-cell { padding: 14px 18px 4px !important; }
  .company-row .value-cell { padding: 4px 18px 16px !important; }
  .company-row .value-cell span { line-height: 1.65 !important; }
}

/* =====================================================================
   ★ CYBRIX FACTORY OVERRIDE ★ 工場感のあるサイバー背景へ（2026-06）
   DECK REDESIGN OVERRIDE で display:none 化されたヒーロー背景レイヤーを
   復帰させ、生産ライン（コンベア）／回路パルスのモーションを付与する。
   ※意図的に最末尾に置き、DECK REDESIGN OVERRIDE を上書きする
===================================================================== */

/* 1. ヒーロー背景のサイバーレイヤーを復帰（パーティクル/グリッド/スキャンライン/中央グロー/回路） */
#hero-particle-canvas,
.hero-particle-canvas,
.hero-scanlines,
.hero-grid,
.hero-glow-center,
.hero-circuit {
  display: block !important;
}

/* 2. グリッド＝生産ラインのコンベア（下方向へ流れ続ける） */
.hero-grid {
  background-image:
    linear-gradient(rgba(173,255,0,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173,255,0,0.07) 1px, transparent 1px) !important;
  background-size: 60px 60px !important;
  animation: factory-conveyor 5s linear infinite;
}

/* 3. 回路パターン：機械的なパルス（アニメで opacity を駆動するため静的指定はしない） */
.hero-circuit {
  animation: factory-circuit-pulse 3.2s ease-in-out infinite;
}

/* 4. 同心円ウォーターマークは控えめにしてサイバー背景に馴染ませる */
.hero::after { opacity: 0.22 !important; }

/* 5. ヒーロー下部を横断する生産コンベアベルト */
.hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70px;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(90deg,
    rgba(173,255,0,0.20) 0 16px, transparent 16px 40px);
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
          mask-image: linear-gradient(to top, #000, transparent);
  animation: factory-belt 1.4s linear infinite;
}

@keyframes factory-conveyor {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 60px, 0 60px; }
}
@keyframes factory-circuit-pulse {
  0%, 100% { opacity: 0.12; }
  50%      { opacity: 0.30; }
}
@keyframes factory-belt {
  from { background-position: 0 0; }
  to   { background-position: 40px 0; }
}

/* 6. モバイルではコンベアベルトを控えめに（視認性確保／PC・モバイル統一の一環） */
@media (max-width: 768px) {
  .hero::before { height: 48px; }
  .hero-circuit { display: none !important; } /* 狭幅では回路SVGが中央テキストに干渉するため非表示 */
}

/* =====================================================================
   ★ セクション幅の統一（2026-07）★ 主要コンテナを max-width 1280px に拡大
   CYBRIX FACTORY など各セクションのインナー幅を広げて要素を大きく見せる
   ※最末尾で既存の狭い max-width を上書き
===================================================================== */
/* 中央寄せコンテナ */
.business-inner,
.company-inner,
.deck-sec .inner,
.section-green .inner,
.events-grid,
.team-grid,
.service-detail-inner,
.page-section-inner,
.main-footer .footer-inner {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* 左寄せリスト（左の見出しと端を揃えるため中央寄せはしない） */
.news-list,
.recruit-list {
  max-width: 1280px !important;
}

/* =====================================================================
   ★ 拠点マップ復帰（2026-07）★ TOP / ABOUT の #virtual-map
   DECK REDESIGN で 3Dマップ canvas を display:none 化し rings.svg エンブレムに
   置換していたのを解除し、Three.js 3Dマップ本体を表示する。
===================================================================== */
.company-map-container canvas {                                 /* 3Dマップ本体を表示（コンテナに追従） */
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.company-map-container::after { display: none !important; }    /* rings.svg 静的エンブレムを非表示 */
.company-map-container .map-hint { display: block !important; } /* 「DRAG TO ROTATE」操作ヒントを再表示 */

/* 全幅（ビューポート幅いっぱいにフルブリード）＋高さ自動（アスペクト比で算出） */
.company-map-container {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  height: auto !important;
  aspect-ratio: 16 / 5;   /* 全幅に対して高さを自動算出（ワイドな帯） */
  min-height: 320px;      /* aspect-ratio 非対応環境などでの高さ確保 */
}
@media (max-width: 768px) {
  /* 狭幅では高さが潰れないよう縦長めのアスペクト比に */
  .company-map-container { aspect-ratio: 4 / 3; min-height: 260px; }
}

/* =====================================================================
   ★ CYBRIX FACTORY セクション背景（2026-07）★
   サイバーパンクな工場の Three.js 背景（TOP / サービスページの .business-section）
===================================================================== */
.factory-bg {
  position: absolute;
  inset: 0;
  z-index: 1;            /* .business-overlay(0) の上、.business-inner(2) の下 */
  overflow: hidden;
  pointer-events: none;
}
.factory-bg canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
/* テキスト可読性のためのスクリム（工場ネオンを活かしつつ内容を引き立てる） */
.factory-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,4,8,0.45) 0%, rgba(2,4,8,0.28) 32%, rgba(2,4,8,0.58) 100%);
  pointer-events: none;
}

/* お問い合わせページ「OTHER CONTACT」リンク（SNSヘルパー出力） */
.contact-other-links a {
  color: #adff00;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.05em;
  transition: text-shadow 0.3s ease;
}
.contact-other-links a:hover { text-shadow: 0 0 12px rgba(173,255,0,0.6); }

/* =====================================================================
   ★ Contact Form 7 のデザイン統合（2026-07）★
   CF7 の出力をサイトのサイバー調フォームに合わせる
===================================================================== */
.contact-form-wrapper .wpcf7 .form-group { margin-top: 24px; }
.contact-form-wrapper .wpcf7 .form-group:first-of-type { margin-top: 0; }
.contact-form-wrapper .wpcf7 label {
  color: #adff00;
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.2em;
  margin-bottom: 12px;
  display: block;
}
.contact-form-wrapper .wpcf7 input[type="text"],
.contact-form-wrapper .wpcf7 input[type="email"],
.contact-form-wrapper .wpcf7 input[type="tel"],
.contact-form-wrapper .wpcf7 textarea {
  width: 100%;
  padding: 16px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(173,255,0,0.2);
  color: #fff;
  font-size: 14px;
  font-family: 'Noto Sans JP', sans-serif;
  box-sizing: border-box;
}
.contact-form-wrapper .wpcf7 textarea { resize: vertical; min-height: 150px; }
.contact-form-wrapper .wpcf7 input:focus,
.contact-form-wrapper .wpcf7 textarea:focus {
  outline: none;
  border-color: #adff00;
  box-shadow: 0 0 0 1px rgba(173,255,0,0.3);
}
.contact-form-wrapper .wpcf7 .wpcf7-submit {
  margin-top: 32px;
  padding: 16px 48px;
  background: #adff00;
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.15em;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(173,255,0,0.3);
}
.contact-form-wrapper .wpcf7 .wpcf7-submit:hover { box-shadow: 0 0 30px rgba(173,255,0,0.6); }
/* CF7 の各種メッセージ */
.contact-form-wrapper .wpcf7-response-output {
  margin: 24px 0 0 !important;
  padding: 16px 20px !important;
  border-width: 1px !important;
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #fff;
}
.contact-form-wrapper form.sent .wpcf7-response-output { border-color: #39ff14 !important; color: #39ff14; background: rgba(57,255,20,0.08); }
.contact-form-wrapper form.invalid .wpcf7-response-output,
.contact-form-wrapper form.failed .wpcf7-response-output { border-color: #ff3b6b !important; color: #ff6b8a; background: rgba(255,59,107,0.08); }
.contact-form-wrapper .wpcf7-not-valid-tip { color: #ff6b8a; font-size: 14px; margin-top: 6px; }
.contact-form-wrapper .wpcf7 .wpcf7-spinner { margin: 0 0 0 14px; }

/* =====================================================================
   ★ 法的文書ページ（プライバシーポリシー / 利用規約）★
===================================================================== */
.legal-doc .legal-lead { color: #fff; line-height: 1.95; margin-bottom: 40px; }
.legal-doc .legal-h {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #adff00;
  letter-spacing: 0.05em;
  margin: 44px 0 14px;
  text-shadow: 0 0 20px rgba(173,255,0,0.25);
}
.legal-doc p { color: #fff; line-height: 1.95; margin-bottom: 14px; }
.legal-doc .legal-list { margin: 0 0 14px; padding-left: 1.4em; }
.legal-doc .legal-list li { color: #fff; font-size: 18px; line-height: 1.9; margin-bottom: 8px; list-style: disc; }
.legal-doc .legal-meta {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(173,255,0,0.15);
  color: #fff;
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.08em;
}
.legal-doc a { color: #adff00; }

/* =====================================================================
   ★ TOP: ニュース / 採用セクションを中央寄せ（2026-07）★
   見出し・リスト・VIEW ALL を 1280px 幅で中央に揃え、左寄りを解消
===================================================================== */
.news-section > div,
.recruit-section > div {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
/* 見出しブロックは他セクションと同様センター表示に統一 */
.news-section > div:first-child,
.recruit-section > div:first-child { text-align: center; }
.news-section > div:first-child > div:first-child,
.recruit-section > div:first-child > div:first-child { justify-content: center; }

/* =====================================================================
   ★ テキスト折り返しの最適化（2026-07）★
   モバイルでの不自然な改行を解消する
===================================================================== */
/* 長い英単語やURLがはみ出さないように（全体） */
body { overflow-wrap: break-word; }

/* 見出しは行のバランスを取り、本文は孤立行（1文字だけの行など）を避ける
   ※ 非対応ブラウザでは単に無視される安全なプロパティ */
h1, h2, h3, .section-title, .big-title, .card-title { text-wrap: balance; }
p { text-wrap: pretty; }

/* モバイル：PC想定の「文中の装飾的な <br>」を無効化して自然な折り返しにする
   （ロゴの改行・住所・段落区切り <br><br> など意味のある改行は残す） */
@media (max-width: 768px) {
  .page-hero p br,            /* 下層ページヒーローのリード文 */
  .deck-philosophy-sub br,    /* about 経営理念サブコピー */
  .deck-sec .lead br,         /* deck セクションのリード文 */
  .contact-section p br,      /* CONTACT セクションのリード文 */
  .footer-desc br {           /* フッターの説明文 */
    display: none;
  }
}

/* =====================================================================
   ★ 改行ユーティリティ ★ 携帯/PC で表示を切り替える <br>
   使い方: <br class="br-sp">（携帯のみ改行） / <br class="br-pc">（PCのみ改行）
   ブレークポイントはサイト共通の 768px
===================================================================== */
.br-sp { display: none; }              /* 携帯のみ改行（PCでは無効） */
.br-pc { display: inline; }            /* PCのみ改行（携帯では無効） */
@media (max-width: 768px) {
  .br-sp { display: inline; }
  .br-pc { display: none; }
}
/* 上の「装飾brの一括非表示」より優先させる（既存要素内でも .br-sp が効くように） */
@media (max-width: 768px) {
  br.br-sp { display: inline !important; }
}