@charset "UTF-8";

/* ==========================================================================
   Google Fonts & 変数定義（サイト共通）
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');

:root {
  --bg-color: #050505;
  --surface-color: #111111;
  --primary-blue: #004785;
  --accent-cyan: #00e5ff;
  --accent-green: #00ff88;
  --accent-red: #ff2a5f;
  --accent-orange: #ff9d00;
  --text-main: #f4f4f5;
  --text-muted: #a1a1aa;
  --border-color: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   基本リセット ＆ 全体レイアウト設定
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.8;
}

.container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 表示切り替え用ユーティリティ */
.pc-only { display: block; }
.sp-only { display: none !important; }
.menu-toggle { display: none; }

/* ==========================================================================
   背景・サイバー動く格子（アニメーション）
   ========================================================================== */
.page-bg {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(120deg, #050505 40%, #0a192f 60%, #050505 80%);
  background-size: 200% 200%;
  animation: gradientMove 15s ease infinite;
  z-index: -20;
}

.page-grid {
  position: fixed;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background-image: 
    linear-gradient(var(--border-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.3;
  z-index: -10;
  pointer-events: none;
  transform: perspective(1000px) rotateX(50deg);
  animation: pageGridMove 10s linear infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pageGridMove {
  0% { transform: perspective(1000px) rotateX(50deg) translateY(0); }
  100% { transform: perspective(1000px) rotateX(50deg) translateY(60px); }
}

/* ==========================================================================
   共通ナビゲーション（ヘッダー）
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; width: 100%;
  padding: 24px 0;
  z-index: 100;
  transition: all 0.4s ease;
  background: transparent;
}

.site-header.scrolled {
  padding: 16px 0;
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.brand {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--text-main);
  text-decoration: none;
  line-height: 1.2;
  position: relative;
  z-index: 1001; 
}

.accent-gold { color: #e2b659; }

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.header-contact {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ★ヘッダーのホバー効果（青く光る） */
.header-contact a {
  transition: color 0.3s ease;
}
.header-contact a:hover {
  color: var(--accent-cyan);
}

.header-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 40px;
  border: 1px solid var(--border-color);
  background-color: rgba(5, 5, 5, 0.6);
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}
.header-action-btn:hover {
  background-color: var(--primary-blue);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

.site-nav {
  display: flex;
  gap: 24px;
}
.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.site-nav a span {
  display: none;
}

/* ==========================================================================
   ヘッダーのホバー（マウスカーソルを合わせた時）のふんわり発光エフェクト
   ========================================================================== */

/* 1. 左側のロゴ（青系でふんわり光る） */
.brand {
  transition: text-shadow 0.3s ease, opacity 0.3s ease;
}
.brand:hover {
  text-shadow: 0 0 15px rgba(0, 229, 255, 0.6); /* ふんわりとしたシアンブルーの光 */
}

/* 各タグにマウスを乗せた時の色と発光色を指定 */
.site-nav a.nav-home:hover     { color: var(--accent-cyan);   text-shadow: 0 0 12px rgba(0, 229, 255, 0.5); }
.site-nav a.nav-services:hover { color: var(--accent-red);    text-shadow: 0 0 12px rgba(255, 42, 95, 0.5); }
.site-nav a.nav-company:hover  { color: var(--accent-green);  text-shadow: 0 0 12px rgba(0, 255, 136, 0.5); }
.site-nav a.nav-recruit:hover  { color: var(--accent-orange); text-shadow: 0 0 12px rgba(255, 157, 0, 0.5); }
.site-nav a.nav-faq:hover      { color: var(--accent-cyan);   text-shadow: 0 0 12px rgba(0, 229, 255, 0.5); }

/* ==========================================================================
   下層ページ共通コンポーネント
   ========================================================================== */
.subpage-hero {
  padding: 160px 0 60px;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(to bottom, rgba(5,5,5,0), rgba(5,5,5,0.8));
}

.subpage-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.breadcrumbs {
  padding: 24px 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.breadcrumbs a { color: var(--text-muted); text-decoration: none; transition: color 0.3s; }
.breadcrumbs span { margin: 0 8px; color: rgba(255, 255, 255, 0.3); }

.section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.section-title span {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  margin-top: 6px;
  letter-spacing: 0.05em;
}
/* 見出し下の日本語のページ別カラー設定 */
.title-cyan span   { color: var(--accent-cyan) !important; }
.title-red span    { color: var(--accent-red) !important; }
.title-green span  { color: var(--accent-green) !important; }
.title-orange span { color: var(--accent-orange) !important; }
.title-cyan span   { color: var(--accent-cyan) !important; }

/* ==========================================================================
   共通フッター
   ========================================================================== */
.site-footer {
  padding: 80px 0 40px;
  background-color: rgba(5, 5, 5, 0.85);
  border-top: 1px solid var(--border-color);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}

.footer-brand { font-size: 2rem; font-weight: 900; margin-bottom: 8px; }
.footer-company { font-family: 'Noto Sans JP', sans-serif; font-size: 1.5rem; font-weight: 900; color: var(--text-main); margin-bottom: 12px; letter-spacing: 0.05em; }
.footer-map-link, .footer-tel-link { color: var(--text-muted); text-decoration: none; transition: color 0.3s ease; display: inline-block; }
.footer-map-link:hover { color: var(--accent-cyan); text-decoration: underline; }
.footer-tel-link { display: block; margin-top: 14px; font-size: 1.3rem; font-weight: 900; color: var(--text-main); }
.footer-tel-link:hover { color: var(--accent-cyan); }

.footer-right { flex: 0 0 420px; }
.footer-recruit-banner {
  background: rgba(255, 157, 0, 0.03);
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--accent-orange);
  padding: 32px;
  text-align: center;
  backdrop-filter: blur(5px);
}
.footer-recruit-text h3 { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 900; color: var(--accent-orange); letter-spacing: 0.1em; margin-bottom: 12px; }
.footer-recruit-text p { color: var(--text-main); font-size: 0.95rem; font-weight: 500; margin-bottom: 24px; line-height: 1.6; }
.footer-recruit-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 50px; background-color: var(--accent-orange); color: #000; font-weight: 900; font-size: 1rem; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(255, 157, 0, 0.2); }
.footer-recruit-btn:hover { background-color: #ffb133; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 157, 0, 0.4); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 0;
}
.footer-policy-link { color: var(--text-muted); text-decoration: none; transition: color 0.3s ease; font-size: 0.85rem; }
.footer-policy-link:hover { color: var(--accent-cyan); }

/* スクロールアニメーション */
.fade-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }


/* ==========================================================================
   スマートフォン用レスポンシブ設定
   ========================================================================== */
@media (max-width: 768px) {
  /* ★アニメーションの停止コードを削除し、スマホでも動くようにしました */
  .pc-only { display: none !important; }
  .sp-only { display: flex !important; } /* ← !importantを追加！ */
  
  /* ハンバーガーメニュー */
  .menu-toggle { display: block; background: transparent; border: none; width: 32px; height: 24px; position: relative; z-index: 1001; cursor: pointer; }
  .menu-toggle-bar { position: absolute; left: 0; width: 100%; height: 2px; background-color: var(--text-main); transition: all 0.3s ease; }
  .menu-toggle-bar:nth-child(1) { top: 0; }
  .menu-toggle-bar:nth-child(2) { top: 11px; }
  .menu-toggle-bar:nth-child(3) { top: 22px; }
  .menu-toggle.is-active .menu-toggle-bar:nth-child(1) { transform: translateY(11px) rotate(45deg); }
  .menu-toggle.is-active .menu-toggle-bar:nth-child(2) { opacity: 0; }
  .menu-toggle.is-active .menu-toggle-bar:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

  /* スマホ版ドロワーメニューパネル */
  .header-right { 
    position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; 
    background-color: rgba(5, 5, 5, 0.95); 
    display: flex; flex-direction: column; justify-content: flex-start; /* 上寄せに変更 */
    align-items: center; transition: right 0.4s ease; z-index: 1000; 
    padding: 120px 0 60px; /* 上下に余白を設定 */
    overflow-y: auto;
  }
  .header-right.is-active { right: 0; }
  
  /* ★スマホメニューの連絡先エリア（画像のような箱型デザイン） */
  .header-contact.sp-only.menu-contact-grid { 
    display: grid !important;
    grid-template-columns: 1fr 1fr; /* 画面を半分に割る */
    gap: 12px;
    width: 100%;
    padding: 0 20px;
    margin-top: auto; /* ナビメニューの下に押しやる */
    padding-bottom: 40px; /* 一番下の余白 */
  }

  .menu-contact-box {
    background-color: rgba(15, 15, 15, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.05); /* うっすらとした枠線 */
    padding: 24px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .menu-contact-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
    color: var(--accent-orange); /* アイコンをオレンジ色に */
  }

  .menu-contact-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 16px;
  }

  .menu-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    border: 1px solid var(--accent-orange);
    color: var(--accent-orange);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.3s;
  }

  .site-nav { flex-direction: column; align-items: center; gap: 32px; }
  .site-nav a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 1.5rem; line-height: 1.2; }
  .site-nav a span { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; }
  
  .nav-home span     { color: var(--accent-cyan); }
  .nav-services span { color: var(--accent-red); }
  .nav-company span  { color: var(--accent-green); }
  .nav-recruit span  { color: var(--accent-orange); }
  .nav-faq span      { color: var(--accent-cyan); }
  
  .subpage-hero { padding: 120px 0 40px; }
  .subpage-title { font-size: 2.2rem; }
  .section-title { font-size: 1.8rem; margin-bottom: 24px; }

  /* ★フッターの並び順を入れ替える（バナーを上へ） */
  .footer-top {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important; /* バナーと会社情報の間の隙間（お好みで調整してください） */
  }
  
  .footer-right {
    order: 1 !important; /* 採用バナーを強制的に【1番目(上)】へ */
    width: 100% !important;
    margin: 0 !important;
  }

  .footer-recruit-banner { padding: 32px 20px; border-left: none; border-right: none; }
  
  /* ★絶対に改行させない指定 */
  .footer-recruit-text p {
    white-space: nowrap; /* 改行禁止 */
    font-size: clamp(11px, 3.5vw, 15px); /* 画面幅に合わせて文字を縮小し、枠に収める */
  }

  /* ★会社概要を左寄せに戻す */
  .footer-left {
    order: 2 !important; /* 会社情報を強制的に【2番目(下)】へ */
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
  }

  
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-policy-split { display: none; }
}