/* ============================================
   CSSカスタムプロパティ（デザイントークン）
   サイト全体で使用する色、フォント、余白、レイアウト、
   トランジション、角丸などの変数を一元管理する
   ============================================ */
:root {
  /* ---- 色の定義 ---- */
  --color-primary: #2A2A2A;            /* メインカラー（ほぼ黒） */
  --color-secondary: #1a1a2e;          /* セカンダリカラー（濃紺） */
  --color-accent: #4a6cf7;             /* アクセントカラー（青） */
  --color-accent-hover: #3b5de7;       /* アクセントカラーのホバー時 */
  --color-text: #1a1a1a;               /* 通常テキスト色 */
  --color-text-secondary: #6b7280;     /* 補助テキスト色（グレー） */
  --color-text-inverse: #ffffff;       /* 反転テキスト色（白） */
  --color-bg: #f5f5f5;                 /* メイン背景色（ホワイトスモーク） */
  --color-bg-alt: #f5f5f5;             /* 交互セクション用の背景色（全ページ統一） */
  --color-bg-dark: #2A2A2A;            /* ダーク背景色（フッター等） */
  --color-border: #e5e7eb;             /* 通常ボーダー色 */
  --color-border-light: #f0f0f0;       /* 薄いボーダー色 */

  /* ---- フォントファミリー ---- */
  --font-primary: "Inter", "Noto Sans JP", sans-serif;   /* 本文用フォント */
  --font-heading: "Inter", "Noto Sans JP", sans-serif;   /* 見出し用フォント */

  /* ---- フォントサイズ（ビューポートに応じて可変） ---- */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);    /* 極小テキスト */
  --text-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);         /* 小テキスト */
  --text-base: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);       /* 基本テキスト */
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);        /* 大テキスト */
  --text-xl: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);          /* 特大テキスト */
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);          /* 2倍テキスト */
  --text-3xl: clamp(2rem, 1.5rem + 2vw, 3rem);              /* 3倍テキスト */
  --text-4xl: clamp(2.5rem, 1.8rem + 3vw, 4rem);            /* 4倍テキスト */

  /* ---- 余白（ビューポートに応じて可変） ---- */
  --space-xs: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);      /* 極小余白 */
  --space-sm: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);         /* 小余白 */
  --space-md: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);          /* 中余白 */
  --space-lg: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);          /* 大余白 */
  --space-xl: clamp(2rem, 1.5rem + 2vw, 4rem);              /* 特大余白 */
  --space-2xl: clamp(3rem, 2rem + 3.5vw, 6rem);             /* 2倍余白 */
  --space-3xl: clamp(4rem, 3rem + 4vw, 8rem);               /* 3倍余白 */

  /* ---- レイアウト ---- */
  --container-max: 1200px;                                    /* コンテナの最大幅 */
  --container-padding: clamp(1rem, 0.5rem + 2vw, 2rem);     /* コンテナの左右パディング */
  --header-height: 72px;                                      /* ヘッダーの高さ */

  /* ---- トランジション速度 ---- */
  --transition-fast: 150ms ease;    /* 高速（ホバー等） */
  --transition-base: 300ms ease;    /* 標準 */
  --transition-slow: 500ms ease;    /* 低速（フェードイン等） */

  /* ---- 角丸サイズ ---- */
  --radius-sm: 4px;     /* 小 */
  --radius-md: 8px;     /* 中 */
  --radius-lg: 12px;    /* 大 */
  --radius-xl: 16px;    /* 特大 */
}

/* ============================================
   リセット＆ベーススタイル
   ブラウザのデフォルトスタイルをリセットし、
   サイト全体の基本スタイルを定義する
   ============================================ */

/* 全要素のbox-sizingをborder-boxに統一し、マージン・パディングをリセット */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* スムーススクロールの有効化、ヘッダー分のスクロールオフセット設定 */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
}

/* ページ全体のフォント、文字サイズ、背景色、テキストレンダリング設定 */
body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;    /* 横スクロールを防止 */
}

/* 画像・動画のレスポンシブ対応（親要素を超えないように） */
img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* リンクのデフォルトスタイルをリセット */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* リスト記号を非表示 */
ul,
ol {
  list-style: none;
}

/* ボタンのデフォルトスタイルをリセット */
button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

/* addressタグのイタリック体を通常に戻す */
address {
  font-style: normal;
}

/* ============================================
   スプラッシュスクリーン（初回読み込み時のアニメーション）
   「AI Urban」ロゴとタグラインを表示した後、
   背景をフェードアウトしてメインページに遷移する
   ============================================ */

/* スプラッシュ全体のコンテナ（画面全体を覆う固定配置） */
.splash {
  position: fixed;
  inset: 0;             /* 上下左右全て0に固定 */
  z-index: 9999;        /* 最前面に配置 */
  pointer-events: none;  /* クリックイベントを透過 */
}

/* スプラッシュの背景（フェードアウト対象） */
.splash-bg {
  position: absolute;
  inset: 0;
  background-color: var(--color-bg);
  transition: opacity 0.8s ease;   /* 0.8秒かけてフェードアウト */
}

/* スプラッシュ遷移中：背景のみ透明にする（ロゴ・タグラインは残す） */
.splash.is-transitioning .splash-bg {
  opacity: 0;
}

/* スプラッシュ内コンテンツの配置（画面中央に配置） */
.splash-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* スプラッシュロゴ「AI Urban」のスタイル
   画面中央のやや上に固定配置し、フェードインアニメーションで表示 */
.splash-logo {
  position: fixed;
  left: 50%;
  top: calc(50% - 1.25rem);              /* 画面中央より1.25rem上に配置 */
  transform: translate(-50%, -50%);       /* 中央揃え */
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1rem + 3vw, 3rem);  /* レスポンシブなフォントサイズ */
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;                             /* 初期状態は非表示 */
  animation: splash-fade-in 0.3s ease 0.1s forwards;  /* 0.1秒後に0.3秒かけてフェードイン */
}

/* スプラッシュのタグライン
   「Shall we world of AI that you have never imagined?」を
   ロゴの下に画面中央配置で表示 */
.splash-tagline {
  position: fixed;
  left: 50%;
  top: calc(50% + 1.25rem);              /* 画面中央より1.25rem下に配置 */
  transform: translateX(-50%);            /* 水平中央揃え */
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #000;                            /* 黒色テキスト */
  white-space: nowrap;
}

/* タグラインの各単語（順次フェードインアニメーション） */
.splash-word {
  opacity: 0;
  animation: splash-word-in 0.2s ease forwards;  /* 0.2秒でフェードイン */
}

/* 各単語のアニメーション遅延（0.3秒間隔で順番に表示） */
.splash-word-1 { animation-delay: 0.4s; }   /* "Shall we" */
.splash-word-2 { animation-delay: 0.7s; }   /* "world of AI that you have never" */
.splash-word-3 { animation-delay: 1.0s; }   /* "imagined" */
.splash-word-4 { animation-delay: 1.3s; }   /* "?" */

/* スプラッシュロゴのフェードイン＋スケールアニメーション */
@keyframes splash-fade-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);   /* わずかに縮小した状態から */
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);       /* 等倍に拡大して完全表示 */
  }
}

/* タグライン各単語の下からスライドインアニメーション */
@keyframes splash-word-in {
  0% {
    opacity: 0;
    transform: translateY(4px);    /* 4px下からスライド */
  }
  100% {
    opacity: 1;
    transform: translateY(0);      /* 元の位置に到達 */
  }
}

/* ============================================
   ユーティリティクラス
   再利用可能な汎用スタイル
   ============================================ */

/* スクリーンリーダー専用（視覚的に非表示だがアクセシビリティで読み上げ可能） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* キーボードナビゲーション用スキップリンク（Tab操作時のみ表示） */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 0.5rem 1rem;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  font-weight: 600;
}

/* スキップリンクがフォーカスされた時に画面上部に表示 */
.skip-link:focus {
  top: 1rem;
}

/* 中央揃えコンテナ（最大幅制限付き） */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* PC専用表示クラス（768px未満では非表示） */
.pc-only {
  display: none;
}

@media (min-width: 768px) {
  .pc-only {
    display: inline;
  }
}

/* ============================================
   ボタンスタイル
   サイト全体で使用するボタンの共通スタイルと
   バリエーション（primary、outline、large）
   ============================================ */

/* ボタン共通スタイル */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  white-space: nowrap;
}

/* プライマリボタン（黒背景・白文字） */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* プライマリボタンのホバー時（アクセントカラーに変化） */
.btn-primary:hover {
  background-color: var(--color-accent);
}

/* アウトラインボタン（枠線のみ・透明背景） */
.btn-outline {
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}

/* アウトラインボタンのホバー時（背景色が付く） */
.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* 大きいサイズのボタン */
.btn-large {
  padding: 1.125rem 3rem;
  font-size: var(--text-base);
}

/* ============================================
   ヘッダー
   「CAREER」「AI Urban」「CONTACT」を3カラムグリッドで配置。
   初期状態は画面中央に固定、スプラッシュ後に上方へスライド、
   スクロール時にはページ最上部に固定される
   ============================================ */

/* ヘッダー本体：画面中央に固定配置（スプラッシュ中） */
.site-header {
  position: fixed;
  top: 50%;                    /* 画面の縦方向中央 */
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  transform: translateY(-50%);  /* 要素自身の高さの半分だけ上にずらして中央揃え */
  background-color: transparent;
  border-bottom: none;
  transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.4s ease,
              box-shadow 0.4s ease,
              border-bottom 0.4s ease;
}

/* スプラッシュ完了後：画面中央から5cm上にアニメーション移動 */
.site-header.is-ready {
  top: calc(50% - 5cm);
}

/* スクロール時：ページ最上部に固定（通常のヘッダー位置） */
.site-header.scrolled {
  top: 0;
  transform: translateY(0);
}

/* ヘッダー内部レイアウト：3カラムグリッド
   左: CAREER | 中央: AI Urban | 右: CONTACT */
.header-inner {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--container-padding);
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* 左右均等・中央は内容に合わせる */
  align-items: center;
  height: 100%;
}

/* CAREERリンク（ヘッダー左側） */
.header-career-link {
  grid-column: 1;
  justify-self: start;
  margin-left: 1cm;            /* 左端から1cmの余白 */
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text);
  position: relative;           /* ホバー時の下線用 */
}

/* CAREERリンクのホバー時に下線をアニメーション表示 */
.header-career-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;                    /* 初期は幅0（非表示） */
  height: 1.5px;
  background-color: var(--color-primary);
  transition: width var(--transition-base);
}

.header-career-link:hover::after {
  width: 100%;                 /* ホバー時に全幅に展開 */
}

/* モバイル時：左側リンクのフォントサイズ・余白を縮小して崩れを防ぐ */
@media (max-width: 767px) {
  .header-career-link {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    margin-left: var(--space-sm);
  }
}

/* モバイル用CONTACTリンク（右列に小さく表示） */
.header-contact-mobile {
  display: none;               /* デフォルト非表示 */
}

@media (max-width: 767px) {
  /* メインページ：モバイルでCONTACTを直接表示するためハンバーガーを非表示 */
  .main-header .hamburger {
    display: none;
  }

  .header-contact-mobile {
    display: flex;
    align-items: center;
    grid-column: 3;
    justify-self: end;
    margin-right: var(--space-sm);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-text);
    text-decoration: none;
  }
}

/* サイトロゴ「AI Urban」（ヘッダー中央） */
.site-logo {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;           /* タグラインの配置基準 */
}

/* ヘッダーのタグライン「Shall we world of AI that you have never imagined?」
   スプラッシュアニメーションと同じ位置（画面中央やや下）に固定配置
   スプラッシュ完了後にフェードインし、スクロール時に非表示になる */
.header-tagline {
  position: fixed;
  top: calc(50% + 2rem);       /* 画面中央より2rem下に配置 */
  left: 0;
  right: 0;
  text-align: center;           /* ビューポート全幅で中央揃え */
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #000;
  opacity: 0;                   /* 初期状態は非表示 */
  transition: opacity 0.6s ease;
  pointer-events: none;          /* クリック不可 */
  white-space: nowrap;
  z-index: 100;
}

/* スプラッシュ完了後：タグラインをフェードイン表示 */
.site-header.is-ready .header-tagline {
  opacity: 1;
}

/* スクロール時：タグラインを完全に非表示 */
.site-header.scrolled .header-tagline {
  opacity: 0;
  transform: translateX(-50%) translateY(-0.5rem);
  pointer-events: none;
  visibility: hidden;
}

/* ロゴテキスト「AI Urban」のスタイル
   スプラッシュ時はhiddenで非表示、アニメーション完了後にvisibleで表示
   スクロール時にフォントサイズが縮小する */
.logo-text {
  font-size: clamp(1.5rem, 1rem + 3vw, 3rem);   /* スプラッシュと同じレスポンシブサイズ */
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  text-transform: uppercase;
  visibility: hidden;           /* 初期状態は非表示（スプラッシュロゴが代わりに表示） */
  transition: font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              letter-spacing 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* スプラッシュ完了後：ロゴテキストを表示 */
.logo-text.is-visible {
  visibility: visible;
}

/* スクロール時：ロゴを少し小さくしてヘッダーに収まるようにする */
.site-header.scrolled .logo-text {
  font-size: 2rem;
  letter-spacing: 0.15em;
}

/* グローバルナビゲーション（CONTACTリンク）
   モバイルでは非表示、768px以上で表示 */
.global-nav {
  display: none;
}

@media (min-width: 768px) {
  .global-nav {
    display: block;
    grid-column: 3;
    justify-self: end;
    margin-right: 1cm;          /* 右端から1cmの余白 */
  }
}

/* ナビゲーションリスト（CONTACT等のリンクを横並び） */
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* ナビゲーションリンクのスタイル */
.nav-list a {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text);
  position: relative;           /* ホバー時の下線用 */
}

/* ナビゲーションリンクのホバー時に下線をアニメーション表示 */
.nav-list a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background-color: var(--color-primary);
  transition: width var(--transition-base);
}

.nav-list a:hover::after {
  width: 100%;
}

/* ============================================
   ハンバーガーメニュー（モバイル用）
   768px未満で表示される3本線のメニューボタン
   タップで×印に変形するアニメーション付き
   ============================================ */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  z-index: 110;
  grid-column: 3;
  justify-self: end;
}

/* 768px以上ではハンバーガーメニューを非表示 */
@media (min-width: 768px) {
  .hamburger {
    display: none;
  }
}

/* ハンバーガーメニューの各ライン */
.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-primary);
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

/* メニュー開閉時のアニメーション：1本目のラインを回転して×の上線に */
.hamburger.is-active .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

/* メニュー開閉時：2本目のラインを非表示 */
.hamburger.is-active .hamburger-line:nth-child(2) {
  opacity: 0;
}

/* メニュー開閉時：3本目のラインを回転して×の下線に */
.hamburger.is-active .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================
   モバイルナビゲーション
   ハンバーガーメニュータップ時に表示される
   全画面オーバーレイのナビゲーション
   ============================================ */
.mobile-nav {
  position: fixed;
  inset: 0;                    /* 全画面表示 */
  z-index: 105;
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);              /* 背景ぼかし効果 */
  -webkit-backdrop-filter: blur(16px);      /* Safari対応 */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

/* モバイルナビゲーションが表示された状態 */
.mobile-nav[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

/* モバイルナビゲーションのリンクリスト（縦並び中央揃え） */
.mobile-nav-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

/* モバイルナビゲーションのリンクスタイル */
.mobile-nav-list a {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.15em;
}

/* ============================================
   ヒーローセクション（メインビジュアル）
   ページ上部のファーストビュー領域
   画像スライダー、紹介テキスト、メインタイトルを含む
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;          /* ビューポート全高 */
  min-height: 100dvh;         /* 動的ビューポート高さ（モバイル対応） */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: calc(var(--header-height) + var(--space-2xl)) var(--space-2xl);
  overflow: hidden;
}

/* ヒーローセクションの背景 */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-bg);
}

/* ヒーローセクションの内部コンテナ */
.hero-inner {
  text-align: center;
  width: 100%;
  max-width: var(--container-max);   /* .containerと同じ1200pxに揃えて左端を統一 */
  padding-inline: var(--container-padding);
}

/* ヒーロー画像コンテナ（image 01, 02を横並び表示）
   スプラッシュ完了後にフェードイン表示される */
.hero-images {
  display: flex;
  justify-content: center;
  gap: 0;                     /* 画像間の隙間なし */
  margin-bottom: var(--space-lg);
  margin-top: 6cm;            /* ヘッダーとの間隔（6cm下にオフセット） */
  opacity: 0;                 /* 初期状態は非表示 */
  transition: opacity 1.5s ease;
  width: 100%;                /* 横幅いっぱいに表示 */
}

/* ヒーロー画像がフェードイン完了後の表示状態 */
.hero-images.is-visible {
  opacity: 1;
}

/* ヒーロー画像のスタイル（ページ幅いっぱいに表示） */
.hero-img {
  width: 50%;                 /* 2枚を50%ずつで横並び */
  height: auto;
  object-fit: cover;           /* アスペクト比を維持しつつ領域を埋める */
}

/* ヒーロー画像ラッパー（image(01)用・キャプション配置の基準となる相対配置コンテナ）
   .hero-images のフレックス子要素として50%幅を占め、
   内部の .hero-img は width:100% で親幅いっぱいに表示される */
.hero-img-wrap {
  position: relative;   /* 子要素の absolute 配置の基準点 */
  width: 50%;           /* .hero-images の半分幅（image(02)と横並びになる） */
}

/* ラッパー内の画像は親幅（50%）いっぱいに表示
   （通常の .hero-img は width:50% のため、ラッパー内では上書きが必要） */
.hero-img-wrap .hero-img {
  width: 100%;
}

/* ラッパー内のキャプションを画像の外側直下に配置
   absolute で画像のフロー外に出すことで、画像サイズに影響を与えない */
.hero-img-wrap .img-caption {
  position: absolute;
  bottom: -14px;   /* 画像の下端から14px下（画像外側）に配置 */
  left: 0;
}

/* スライド内の画像とキャプションをまとめるラッパー
   フレックスコンテナである .hero-slide の中で、
   画像とキャプションを縦方向に積み上げ、左寄せで表示するために使用 */
.slide-img-wrap {
  text-align: left;   /* キャプション文字を左揃えに */
}

/* 画像の外側直下に表示する小さなキャプション（著作権・出典表記）
   ブラウザの最小フォントサイズ制限(多くは10px)に合わせて10pxを基本とする。
   image(01): .hero-img-wrap 内で absolute 配置に上書き
   image(06): .slide-img-wrap 内で通常フロー配置
   image(07): .features-visual 内で通常フロー配置 */
.img-caption {
  display: block;       /* インライン要素 span をブロック表示に変換 */
  font-size: 10px;      /* 非常に小さなキャプションサイズ */
  color: #000;          /* 黒文字 */
  line-height: 1;       /* 行間を詰める */
  margin-top: 2px;      /* 画像との間に2pxの余白 */
  text-align: left;     /* 左寄せ */
}

/* ヒーロー「AI Urbanとは」セクション */
.hero-about {
  margin-bottom: var(--space-lg);
}

/* 「AI Urbanとは」の見出し */
.hero-about-heading {
  font-family: var(--font-heading);
  font-size: calc(var(--text-sm) * 1.5);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

/* 「AI Urbanとは」の説明テキスト */
.hero-about-text {
  font-size: calc(0.8125rem * 1.5);
  line-height: 1.9;
  color: #000;
  text-align: left;
}

/* Value + VISIONリストをまとめて中央配置するラッパー */
.hero-vision-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 500px;
  margin-bottom: var(--space-2xl);
}

/* Value とリストをまとめるブロック */
.hero-vision-block {
  text-align: center;
}

/* VISIONタイトル「Value」
   リスト項目と同じ左端に揃えるためpadding-leftを0に設定 */
.hero-vision-title {
  font-family: var(--font-heading);
  font-size: calc(var(--text-sm) * 1.5);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xl);
  padding-left: 0;
}

/* VISIONの箇条書き
   margin-left:-1em で1文字分左にずらす */
.hero-vision-list {
  list-style: none;
  font-size: var(--text-lg);
  line-height: 2.5;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  text-align: left;
}

/* VISIONの各リスト項目
   余白をすべてリセットして完全に左端を揃える */
.hero-vision-list li {
  padding: 0;
  margin: 0;
  display: block;
}

/* 「AI Urbanとは」テキスト下の区切り線（1000px空白の後に細い黒線） */
.hero-about-divider {
  border: none;
  border-top: 1px solid #000;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: var(--space-lg);
}

/* ヒーローセクションのメインタイトル */
.hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-md);
  text-align: left;
}

/* ヒーローセクションの説明文 */
.hero-description {
  font-size: var(--text-lg);
  color: #000;
  line-height: 2;
  margin-bottom: 0;
  text-align: left;
}

/* ヒーローセクションの区切り線 */
.hero-divider {
  border: none;
  border-top: 0.5px solid #000;
  width: 60%;
  margin: 6rem auto;
}

/* ============================================
   画像スライダー（スクロール駆動 sticky 方式）
   JSによって.heroから分離され、独自のsectionとして
   DOMに挿入される。CSSのposition: stickyで
   ビューポートに固定しながらスクロール量に応じて
   スライドが切り替わる
   ============================================ */

/* スライダーセクションのラッパー（JSで動的に生成）
   height はJSで「スライド数 × ビューポート高さ」に設定される */
.hero-slider-section {
  position: relative;
}

/* スティッキーコンテナ：スクロール中もビューポート上部に固定
   スライダーセクション内をスクロールする間、この要素は画面に張り付く */
.hero-slider-sticky {
  position: sticky;
  top: 0;                      /* ビューポート上端に固定 */
  height: 100vh;               /* ビューポート全高 */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-inline: var(--container-padding);
  padding-top: 1cm;            /* 上余白1cm */
  box-sizing: border-box;
}

/* スティッキーコンテナ内のスライド画像の最大高さ制限 */
.hero-slider-sticky .hero-feature-img {
  max-height: calc(100vh - 1cm);
  object-fit: contain;
}

/* スライダー本体（相対配置・はみ出し非表示） */
.hero-feature-slider {
  position: relative;
  width: 100%;
  max-width: 1000px;
  overflow: hidden;
}

/* 各スライド共通スタイル（GPU合成を有効化） */
.hero-slide {
  text-align: center;
  padding: 1cm 0;
  box-sizing: border-box;
  will-change: transform, opacity;   /* GPUアクセラレーション */
}

/* 最初のスライド（初期表示状態） */
.hero-slide-1 {
  transform: translateX(0);
  opacity: 1;
}

/* 2〜4番目のスライド（初期状態は右外に配置、非表示） */
.hero-slide-2,
.hero-slide-3,
.hero-slide-4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(100%);   /* 右外に配置 */
  opacity: 0;                    /* 非表示 */
}

/* スライダー内の画像スタイル */
.hero-feature-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* ヒーローセクションのアクションボタン群 */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

/* ============================================
   クライアントセクション
   「TRUSTED BY LEADING BRANDS」として
   主要クライアント名を横並びで表示
   ============================================ */
.clients {
  padding-block: var(--space-2xl);
  background-color: var(--color-bg);
  border-block: 1px solid var(--color-border-light);
}

/* クライアントセクションのラベル */
.clients-label {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

/* クライアント名のグリッドレイアウト（横並び折り返し） */
.clients-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg) var(--space-xl);
}

/* 各クライアント名のスタイル */
.client-name {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  opacity: 0.6;                 /* 薄く表示 */
  transition: opacity var(--transition-base);
}

/* クライアント名のホバー時に完全表示 */
.client-name:hover {
  opacity: 1;
}

/* SAMPLE01下の区切り線（1000px空白の後にページ全幅の黒線） */
.clients-divider {
  border: none;
  border-top: 1px solid #000;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 1000px;
  margin-bottom: 0;
}

/* ============================================
   セクション共通スタイル
   各セクション（About、Service、News等）に共通する
   パディング、ラベル、タイトルのスタイル
   ============================================ */

/* セクション共通のパディング */
.section {
  padding-block: var(--space-3xl);
}

/* セクションラベル（番号＋タグ名の横並び） */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* セクション番号（00, 01, 02...） */
.section-number {
  font-size: var(--text-xs);
  font-weight: 600;   /* セクションタグと同じ太さに統一 */
  letter-spacing: 0.15em;
  color: #000;
}

/* セクションタグ名（ABOUT, SERVICE等） */
.section-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #000;
}

/* セクションタイトル */
.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  margin-bottom: var(--space-xl);
}

/* ============================================
   Aboutセクション
   企業紹介・説明文と画像を2カラムで表示
   ============================================ */
.about {
  background-color: var(--color-bg);
}

/* Aboutセクションのコンテンツ（モバイルは1カラム、PCは2カラム） */
.about-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: stretch;   /* テキスト列を画像の高さに合わせて伸縮 */
}

@media (min-width: 768px) {
  .about-content {
    grid-template-columns: 1fr 1fr;   /* PC: テキストと画像を横並び */
  }
}

/* Aboutセクションのテキスト列：画像の上端に揃える */
.about-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Aboutセクションのテキスト段落間余白 */
.about-text p + p {
  margin-top: var(--space-sm);
}

/* About画像のプレースホルダー */
.about-image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #e8ecf1 0%, #d1d5db 100%);
  border-radius: var(--radius-lg);
}

/* Aboutセクション右カラムの実画像：全体を表示 */
.about-image {
  align-self: center;   /* テキスト列に対して縦中央で揃える */
}

.about-image img {
  width: 100%;
  height: auto;         /* 画像の縦横比を維持して全体を表示 */
  display: block;
  border-radius: var(--radius-lg);
}

/* ============================================
   Serviceセクション
   4つのサービスカードをグリッドで表示
   （AI Model Generation, EC Support, Marketing Support, AI Solutions）
   ============================================ */
.service {
  background-color: #f5f5f5;
}

/* CAPABILITIESの説明テキスト */
.service-lead {
  font-size: var(--text-base);
  line-height: 1.9;
  margin-bottom: var(--space-xl);
}

/* サービスカードのグリッド（モバイル1列→タブレット2列→PC4列） */
.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 600px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);   /* タブレット: 2列 */
  }
}

@media (min-width: 960px) {
  .service-grid {
    grid-template-columns: repeat(4, 1fr);   /* PC: 4列 */
  }
}

/* サービスカード（ホバー時に浮き上がりアニメーション） */
.service-card {
  background-color: var(--color-bg);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* サービスカードのアイコン */
.service-card-icon {
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

/* サービスカードのタイトル */
.service-card-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  letter-spacing: 0.02em;
}

/* サービスカードの説明テキスト */
.service-card-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* ============================================
   Newsセクション
   最新ニュースをリスト形式で表示
   日付・カテゴリ・タイトルの3カラム構成
   ============================================ */
.news {
  background-color: var(--color-bg);
}

/* ニュースリスト（上部に区切り線付き） */
.news-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

/* ニュースアイテム（下部に区切り線付き） */
.news-item {
  border-bottom: 1px solid var(--color-border);
}

/* ニュースリンク（日付・カテゴリ・タイトルを横並び） */
.news-link {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-md);
  transition: background-color var(--transition-fast);
}

.news-link:hover {
  background-color: var(--color-bg-alt);
}

/* モバイルではタイトルを折り返して全幅表示 */
@media (max-width: 599px) {
  .news-link {
    grid-template-columns: auto auto;
    row-gap: var(--space-xs);
  }

  .news-item-title {
    grid-column: 1 / -1;       /* タイトルを全幅に */
  }
}

/* ニュース日付 */
.news-date {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;   /* 数字を等幅に */
}

/* ニュースカテゴリバッジ（モダン・シンプル） */
.news-category {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.625rem;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ニュースタイトル */
.news-item-title {
  font-size: var(--text-base);
  font-weight: 500;
}

/* ニュース一覧へのリンク */
.news-more {
  text-align: center;
  margin-top: var(--space-xl);
}

/* ============================================
   Featuresセクション（テクノロジー紹介）
   技術的な特徴をテキストと画像の2カラムで表示
   ============================================ */

/* OUR TECHNOLOGY タイトルのみHelveticaフォント */
#features-heading {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* NEWS と TECHNOLOGY の間の区切り線 */
.news-features-divider {
  border: none;
  border-top: 1px solid #000;
  width: 100vw;
  margin: 0;
  margin-left: calc(50% - 50vw);
}

.features {
  background-color: #f5f5f5;
}


/* Featuresコンテンツ（モバイル1カラム→PC2カラム） */
.features-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 768px) {
  .features-content {
    grid-template-columns: 1fr 1fr;
  }
}

/* Featuresのサブタイトル */
.features-subtitle {
  font-size: var(--text-xl);   /* about-leadと同じサイズに統一 */
  font-weight: 700;
  margin-bottom: var(--space-md);
  line-height: 1.4;
}

/* Featuresの説明テキスト */
.features-text p {
  color: #000;
  line-height: 1.8;
}

.features-subtitle-second {
  margin-top: 4rem;
}

.features-subtitle-third {
  margin-top: 4rem;
}

.features-subtitle-four {
  margin-top: 4rem;
}

/* Features画像のプレースホルダー */
.features-image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
  border-radius: var(--radius-lg);
}

/* Features画像 */
.features-image {
  width: 100%;
  object-fit: cover;
}

/* Features と Cases の間の区切り線 */
.features-cases-divider {
  border: none;
  border-top: 1px solid #000;
  width: 100vw;
  margin: 0;
  margin-left: calc(50% - 50vw);
}

/* ============================================
   Casesセクション（導入事例）
   事例カードをグリッドで表示（画像＋テキスト構成）
   ============================================ */
.cases {
  background-color: var(--color-bg);
}

/* CASE STUDIES上部の画像横並びエリア */
.cases-images-row {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-xl);
}

/* 各画像ラッパー（キャプション表示のため相対配置） */
.cases-img-wrap {
  display: flex;
  flex-direction: column;
}

.cases-img-wrap img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 事例カードのグリッド（モバイル1列→タブレット以上2列） */
.cases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 600px) {
  .cases-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 事例カード（ホバー時に浮き上がりアニメーション） */
.case-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* image(09)専用カード：キャプションを表示するためoverflowを解除 */
.case-image-only {
  overflow: visible;
  border: none;
}

/* image(09)の画像に直接border-radiusを付けてはみ出しを防ぐ */
.case-image-only img {
  border-radius: var(--radius-lg);
}

/* 事例カードの画像プレースホルダー */
.case-image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #e0e5ec 0%, #c9ced6 100%);
}

/* 事例カードのテキスト部分 */
.case-body {
  padding: var(--space-md);
}

/* 事例カードのクライアント名 */
.case-client {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

/* 事例カードのタイトル */
.case-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  line-height: 1.4;
}

/* 事例カードの説明テキスト */
.case-text {
  font-size: var(--text-sm);
  color: #000;
  line-height: 1.7;
}

/* ============================================
   Metricsセクション（パフォーマンス指標）
   ダーク背景にカウンターアニメーション付きの
   数値指標を4カラムで表示
   ============================================ */
.metrics {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

/* Metricsセクションのタイトルを中央揃え */
.metrics .section-title {
  text-align: center;
}

/* 指標カードのグリッド（モバイル2列→PC4列） */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .metrics-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 指標カード */
.metric-card {
  text-align: center;
  padding: var(--space-lg);
}

/* 指標の数値部分（数字＋単位＋方向を横並び） */
.metric-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: var(--space-xs);
}

/* 指標の数字（カウンターアニメーション対象） */
.metric-number {
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* 指標の単位（%, etc.） */
.metric-unit {
  font-size: var(--text-xl);
  font-weight: 600;
}

/* 指標の方向（UP/DOWN） */
.metric-direction {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-left: 4px;
}

/* 指標のラベル */
.metric-label {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   Recruitmentセクション（採用情報）
   採用への案内テキストとリンクボタンを表示
   ============================================ */
.recruitment {
  background-color: var(--color-bg-alt);
}

/* 採用セクション：テキストと画像を左右に並べるフレックスレイアウト */
.recruitment-layout {
  display: flex;
  align-items: flex-start;   /* テキストを画像の上端に揃える */
  gap: var(--space-xl);
}

/* 採用セクションのコンテンツ（左側テキスト） */
.recruitment-content {
  flex: 1;
}

/* 採用セクションの右側に配置する画像 */
.recruitment-image {
  flex: 1;
}

.recruitment-image img {
  width: 100%;
  display: block;
  border-radius: var(--radius-lg);
}

/* モバイル時は縦並びに切り替え */
@media (max-width: 767px) {
  .recruitment-layout {
    flex-direction: column;
  }
}

/* 採用セクションのリード文 */
.recruitment-lead {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

/* 採用セクションの段落間余白 */
.recruitment-content p + p {
  margin-top: var(--space-sm);
}

/* 採用セクションのボタン上余白 */
.recruitment-content .btn {
  margin-top: var(--space-lg);
}

/* ============================================
   Contactセクション（お問い合わせ）
   中央揃えのお問い合わせ案内とボタン
   ============================================ */
.contact {
  background-color: #f5f5f5;   /* ホワイトスモーク */
  text-align: center;
  padding-block: var(--space-3xl);
}

/* お問い合わせのリード文 */
.contact-lead {
  font-size: var(--text-lg);
  color: #000;
  margin-bottom: var(--space-xl);
  max-width: none;
  margin-inline: auto;
  white-space: nowrap;
}

/* ============================================
   フッター
   企業情報、ナビゲーション、法的リンク、
   コピーライトをダーク背景で表示
   ============================================ */
.site-footer {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding-block: var(--space-2xl) var(--space-lg);
}

/* フッターのグリッドレイアウト（モバイル1列→PC3列） */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;    /* 企業情報:ナビ:法的情報 = 2:1:1 */
  }
}

/* フッターのロゴ */
.footer-logo {
  font-size: var(--text-sm);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-md);
}

/* フッターの住所・連絡先 */
.footer-address {
  font-size: var(--text-sm);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.6);
}

.footer-address a {
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition-fast);
}

.footer-address a:hover {
  color: var(--color-text-inverse);
}

/* フッターのナビゲーション・法的リンク */
.footer-nav ul,
.footer-legal ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-nav a,
.footer-legal a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition-fast);
}

.footer-nav a:hover,
.footer-legal a:hover {
  color: var(--color-text-inverse);
}

/* フッターのコピーライト */
.footer-copyright {
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================
   フェードインアニメーション
   IntersectionObserverと連携し、要素がビューポートに
   入った時に下からスライドしながらフェードイン表示する
   ============================================ */

/* フェードイン対象要素の初期状態（非表示・下にオフセット） */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

/* フェードイン完了後の表示状態 */
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   アクセシビリティ対応：モーション軽減設定
   ユーザーがOSで「視差効果を減らす」を有効にしている場合、
   全てのアニメーション・トランジションを無効化する
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fade-in {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   印刷用スタイル
   印刷時に不要な要素を非表示にし、
   読みやすいレイアウトに調整する
   ============================================ */
@media print {
  /* 印刷時に不要な要素を非表示 */
  .site-header,
  .hamburger,
  .mobile-nav,
  .hero-bg,
  .btn {
    display: none;
  }

  /* 印刷用のフォント・背景設定 */
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  /* セクションのパディングを縮小、ページ分割を防止 */
  .section {
    padding-block: 1rem;
    page-break-inside: avoid;
  }
}