/* Filter Button Styles */

.filter-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
  border: 1px solid #e8e8e8;
  cursor: pointer;
  transition: opacity 300ms;
  background-color: #ffffff;
  color: #222222;
  height: 42px;
  width: -moz-fit-content;
  width: fit-content;
}

.filter-button:hover {
  opacity: 0.8;
}

#site-header {
  transition: background-color 200ms ease, box-shadow 200ms ease;
}

#site-header.is-scrolled {
  background-color: #ffffff !important;
}

/* PCナビ専用クラスにスコープを限定
   理由: #site-header.is-scrolled nav a は #mobile-nav 内の a タグにも
         マッチしてしまうため、.desktop-nav-override に限定することで
         mobile-nav に影響しないようにする */

#site-header.is-scrolled .desktop-nav-override nav a {
  color: #2a9ca1 !important;
  transition: color 200ms ease;
}

#site-header.is-scrolled .desktop-nav-override nav a:hover {
  color: #1c7f83 !important;
}

#site-header.is-scrolled nav {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

/* About us Recruit button (fixed pill style) */

.aboutus-recruit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 200px;
  height: 45px;
  padding: 0 24px;
  border-radius: 60px;
  background-color: #2a9ca1;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

/* 黒い背景のスライドアニメーション（右から左） */

.aboutus-recruit-btn::before {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  content: "";
  background: var(--color-text-primary);
  border-radius: 60px;
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.aboutus-recruit-btn:hover::before {
  left: 0%;
  right: auto;
  width: 100%;
}

.aboutus-recruit-btn:hover {
  color: var(--color-text-inverse) !important;
}

/* SVGを前面に配置 */

.aboutus-recruit-btn svg {
  position: relative;
  z-index: 1;
  transition: stroke 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, transform 0.3s ease;
}

.aboutus-recruit-btn:hover svg {
  transform: translateX(5px);
}

.aboutus-recruit-btn:hover svg path {
  stroke: var(--color-text-inverse);
}

/* Utility: 55px gap (for product section stack on about page) */

.gap-55px {
  gap: 55px;
}

/* Utility: 30px gap (for culture-reason section on about page) */

.gap-30px {
  gap: 30px;
}

.corner-logo {
  position: fixed;
  top: 0;
  left: 0;
  transition: opacity 150ms ease, visibility 150ms ease, transform 150ms ease;
}

.header-is-scrolled .corner-logo {
  opacity: 0;
  visibility: hidden;
}

.filter-button.active {
  background-color: #2a9ca1;
  color: #ffffff;
  border-color: #2a9ca1;
}

.filter-button.active svg {
  display: block;
}

.filter-button:not(.active) svg {
  display: none;
}

/* Member Popup Styles */

.member-popup-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 10001 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.member-popup-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.member-popup {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.95);
  background-color: #ffffff !important;
  border-radius: 8px;
  width: 768px !important;
  max-width: 768px !important;
  height: 424px !important;
  overflow-y: auto;
  z-index: 10002 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.member-popup.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.member-popup-content {
  padding: 40px !important;
}

.member-popup-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.member-popup-name-ja {
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.member-popup-social a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 0 !important;
  transition: opacity 0.2s ease !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.member-popup-social a:hover {
  opacity: 0.7 !important;
}

.member-popup-social-icon {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Note icon: larger size to match other social icons */

.member-popup-note-icon {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

.member-popup-social svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex-shrink: 0 !important;
}

.member-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.member-popup-close:hover {
  background-color: #f5f5f5;
}

.member-popup-close svg {
  width: 20px;
  height: 20px;
  stroke: #222222;
}

.member-popup-section {
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  .member-popup {
    width: 95%;
    max-height: 95vh;
  }

  .member-popup-content {
    padding: 24px;
  }

  .member-popup-name-ja {
    font-size: 23px;
  }
}

/* Header dropdown submenu: hide by default, show on hover */

.nav-dropdown {
  position: relative;
}

.nav-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 50px;
}

.nav-dropdown .submenu {
  top: calc(100% + 50px) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.nav-dropdown:hover .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =========================================================
   Header 通常ナビリンク: font-weight を 700 に統一
   対象: 全ページ共通（header の通常ナビリンクのみ）
   用途: index.html / 下層ページ / Astro header すべてで同じ太さにする
   備考: Tailwind の font-medium (500) / md:font-semibold (600) を上書き
         .desktop-nav-override > div.flex.items-center.gap-8 に限定することで
         CTA ボタン（header-cta-btn / header-action-*）には一切影響しない
   ========================================================= */

#site-header .desktop-nav-override > div.flex.items-center.gap-8 a {
  font-weight: 700 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

/* =========================================================
   Header サブメニュー: font-weight を 400 に統一（日本語テキストのみ）
   対象: 全ページ共通（header のサブメニューの日本語テキストのみ）
   用途: メイン nav の font-weight:700 の影響を受けないよう、
         サブメニュー内の日本語テキストのみ font-weight:400 に戻す
   備考: .submenu 内の font-en-inter クラスがない span（日本語テキスト）に対して
         font-weight:400 を強制し、font-medium / font-semibold / font-bold を上書き
         英文字（font-en-inter）は対象外
   ========================================================= */

#site-header .submenu span:not(.font-en-inter) {
  font-weight: 400 !important;
}

/* =========================================================
   Header サブメニュー hover 背景（横幅いっぱい + 余白あり）
   ========================================================= */

#site-header .submenu .submenu-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

#site-header .submenu .submenu-link:hover {
  background-color: transparent;
}

/* 
 * 修正理由：
 * 以前は疑似要素（::before）とネガティブマージンを使用して背景を親要素のpaddingを超えて表示しようとしていたが、
 * .submenu-link 自体に px-3（左右12px）のpaddingがあるため、width: 100% を設定することで
 * 親要素（.submenu > div）の幅いっぱい（px-6のpadding内）まで背景が伸びるようになる。
 * 疑似要素を使わず、直接 background-color を設定することでシンプルで保守しやすい実装になった。
 */

/* =========================================================
Tailwind CSS インポート
========================================================= */

@tailwind base;

@tailwind components;

@tailwind utilities;

/* =========================================================
グローバルデフォルト文字色
対象: 全ページ共通
========================================================= */

html,
body {
  --tw-text-opacity: 1;
  color: rgb(34 34 34 / var(--tw-text-opacity, 1));
}

/* ==================================================
Semantic text color tokens (compat layer)
- Do not remove existing color utilities yet
- These variables mirror current design tokens
- Used by new semantic text-* utility classes
================================================== */

:root {
  /* Primary body text color (text-textColor / #222) */
  --color-text-primary: #222222;
  /* Muted text (text-gray-400 / rgb(156 163 175)) */
  --color-text-muted: rgb(156 163 175);
  /* Inverse text for dark backgrounds (#fff) */
  --color-text-inverse: #ffffff;
  /* Accent text (brand teal / #2A9CA1) */
  --color-text-accent: #2a9ca1;
  /* ==================================================
  Additional color tokens for semantic color management
  ================================================== */
  /* Text colors */
  --color-text-link: #b3b3b3;
  /* Footer links, muted links */
  --color-text-gray-env: #747474;
  /* Environment section text color */
  /* Background colors */
  --color-bg-white: #ffffff;
  --color-bg-light: #f8f8f8;
  --color-bg-subtle: #f5f5f5;
  --color-bg-hover: #e8e8e8;
  /* Hover state backgrounds */
  /* Border colors */
  --color-border-default: #e8e8e8;
  /* Default border color */
  --color-border-separator: #4e4e4e;
  /* Footer separator */
  /* Brand/Accent colors (for backgrounds) */
  --color-brand: #2a9ca1;
  /* Brand teal (same as accent) */
  --color-brand-bg: #2a9ca1;
  /* Brand background */
  /* Tag colors */
  --color-tag-tech: #3ea8ff;
  /* Tech Blog tag color */
  /* Shadow colors */
  --color-shadow-light: #f6f6f6;
  /* Light shadow color */
}

/* ==================================================
Semantic text color utilities
- Safe compat layer: does not override .text-white 等
- Future Astro components can prefer these classes
================================================== */

.text-primary {
  color: var(--color-text-primary);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-meta {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-inverse {
  color: var(--color-text-inverse);
}

.text-accent {
  color: var(--color-text-accent);
}

.text-gray-env {
  color: var(--color-text-gray-env);
}

/* Member Popup: SNSアイコンを20pxに固定（最終勝者） */

.member-popup-social svg,
.member-popup-social-icon {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
}

/* =========================================================
   Global Font Reset
   対象: 全ページ共通
   ========================================================= */

html,
body {
  font-family: Noto Sans JP, Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Noto Sans JP", Roboto, Helvetica, Arial, sans-serif !important;
}

/* =========================================================
   Font Weight Synthesis for Android
   対象: 全ページ共通
   用途: Android端末でのフォントウェイト合成を制御
   ========================================================= */

.fw-body {
  letter-spacing: -0.005em;
  font-synthesis: weight;
}

.fw-heading {
  letter-spacing: -0.01em;
  font-synthesis: weight;
  font-family: "Noto Sans JP", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================
   English Font Standardization
   対象: 全ページ共通
   備考: font-familyはTailwindのfont-en, font-en-interクラスで統一
   ========================================================= */

/* =========================================================
   カスタムコンポーネント
   対象: 全ページ共通
   備考: Tailwindエントリは assets/css/style.css に集約
   ========================================================= */

/* =========================================================
 Typography – Font Size
 対象: 全ページ共通
 用途: すべてのfont-size定義を集約
 備考: 他のセクションからfont-size定義を移動して集約
 ========================================================= */

/* 用途: サブ見出し / 対象: PC・TB・SP / 備考: clamp使用（1441px以上） */

.subheading-md {
  font-size: 36px;
}

@media (max-width: 767px) {
  .subheading-md {
    font-size: 28px;
    line-height: 1;
  }
}

@media (min-width: 768px) and (max-width: 1439px) {
  .subheading-md {
    font-size: 36px;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  .subheading-md {
    font-size: 36px;
  }
}

@media (min-width: 1441px) {
  .subheading-md {
    font-size: clamp(36px, calc(36px + 0.6vw), 48px);
  }
}

/* 用途: ユーティリティクラス（固定サイズ） / 対象: 全画面 / 備考: 固定値 */

/* @deprecated セクションに移動済み */

/* 用途: リード文 / 対象: PC・TB・SP / 備考: clamp使用（1441px以上） */

.text-lead {
  font-size: 16px;
}

@media (max-width: 767px) {
  .text-lead {
    font-size: 15px;
  }
}

@media (min-width: 1440px) {
  .text-lead {
    font-size: 18px;
  }
}

@media (min-width: 1441px) {
  .text-lead {
    font-size: clamp(18px, calc(18px + 0.15vw), 9999px);
  }
}

/* 用途: 標準本文 / 対象: PC・TB・SP / 備考: clamp使用（1441px以上） */

.text-body {
  font-size: 16px;
}

@media (max-width: 767px) {
  .text-body {
    font-size: 14px;
  }
}

@media (min-width: 1441px) {
  .text-body {
    font-size: clamp(16px, calc(16px + 0.2vw), 9999px);
  }
}

/* 用途: 本文（小） / 対象: PC・TB・SP / 備考: clamp使用（1441px以上） */

.text-body-sm {
  font-size: 14px;
}

@media (max-width: 767px) {
  .text-body-sm {
    font-size: 13px;
  }
}

@media (min-width: 1441px) {
  .text-body-sm {
    font-size: clamp(14px, calc(14px + 2 * (100vw - 1441px) / 479), 16px);
  }
}

/* 用途: 本文（極小） / 対象: PC・TB・SP / 備考: clamp使用（1441px以上） */

/* @deprecated セクションに移動済み */

/* 用途: 小見出し / 対象: PC・TB・SP / 備考: clamp使用（1441px以上） */

.text-heading-sm {
  font-size: 24px !important;
}

@media (max-width: 767px) {
  .text-heading-sm {
    font-size: 22px !important;
  }
}

@media (min-width: 768px) and (max-width: 1440px) {
  .text-heading-sm {
    font-size: 24px !important;
  }
}

@media (min-width: 1441px) {
  .text-heading-sm {
    font-size: clamp(
      24px,
      calc(24px + 6 * (100vw - 1441px) / 479),
      30px
    ) !important;
  }
}

/* 用途: レスポンシブ小見出し / 対象: PC・TB・SP / 備考: clamp使用（1441px以上） */

.subheading-responsive {
  font-size: 28px;
}

@media (max-width: 767px) {
  .subheading-responsive {
    font-size: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1440px) {
  .subheading-responsive {
    font-size: 28px;
  }
}

@media (min-width: 1441px) {
  .subheading-responsive {
    font-size: clamp(28px, calc(28px + 6 * (100vw - 1441px) / 479), 34px);
  }
}

/* 用途: 中見出し / 対象: PC・TB・SP / 備考: clamp使用（1441px以上） */

.text-heading-md {
  font-size: 36px !important;
}

@media (max-width: 767px) {
  .text-heading-md {
    font-size: 32px !important;
  }
}

@media (min-width: 1441px) {
  .text-heading-md {
    font-size: clamp(
      36px,
      calc(36px + 6 * (100vw - 1441px) / 479),
      42px
    ) !important;
  }
}

/* 用途: カード本文 / 対象: PC・TB・SP / 備考: clamp使用（1441px以上） */

.card-body-text {
  font-size: 16px;
}

@media (max-width: 767px) {
  .card-body-text {
    font-size: 14px;
  }
}

@media (min-width: 1441px) {
  .card-body-text {
    font-size: clamp(16px, calc(16px + 2 * (100vw - 1440px) / 480), 18px);
  }
}

/* 用途: セクションサブタイトル / 対象: PC・TB・SP / 備考: clamp使用（1441px以上） */

.section-subtitle {
  font-size: 14px;
}

@media (min-width: 768px) {
  .section-subtitle {
    font-size: 18px;
  }
}

@media (min-width: 1440px) {
  .section-subtitle {
    font-size: 20px;
  }
}

@media (min-width: 1441px) {
  .section-subtitle {
    font-size: clamp(20px, calc(20px + 0.25vw), 9999px);
  }
}

/* 用途: Environment ナンバーカードタイトル / 対象: PC / 備考: clamp使用（1440px以上） */

.environment-number-card-title {
  font-size: 16px !important;
}

@media (min-width: 1441px) {
  .environment-number-card-title {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1440px) / 480),
      20px
    ) !important;
  }
}

/* 用途: Evaluation キーワード / 対象: PC / 備考: clamp使用（1440px以上） */

.evaluation-keyword {
  font-size: 20px;
}

@media (min-width: 1441px) {
  .evaluation-keyword {
    font-size: clamp(
      20px,
      calc(20px + 5 * (100vw - 1440px) / 480),
      25px
    ) !important;
  }
}

/* 用途: Environment 作業テーブルリスト項目 / 対象: PC / 備考: clamp使用（1441px以上） */

@media (min-width: 1441px) {
  .environment-work-table td li {
    font-size: clamp(
      14px,
      calc(14px + 2 * (100vw - 1441px) / 479),
      16px
    ) !important;
  }
}

/* 用途: Value セクション見出し / 対象: PC / 備考: clamp使用（1441px以上） */

@media (min-width: 1441px) {
  .value-section-heading {
    font-size: clamp(
      24px,
      calc(24px + 6 * (100vw - 1441px) / 479),
      30px
    ) !important;
  }
}

/* 用途: Culture Deck 見出し / 対象: PC / 備考: clamp使用（1441px以上） */

@media (min-width: 1441px) {
  .culture-deck-heading {
    font-size: clamp(
      24px,
      calc(24px + 6 * (100vw - 1441px) / 479),
      30px
    ) !important;
  }
}

/* 用途: Culture Deck 説明文 / 対象: PC / 備考: clamp使用（1441px以上） */

@media (min-width: 1441px) {
  .culture-deck-description {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    ) !important;
  }
}

/* 用途: AI Native ラベル / 対象: 全画面 / 備考: 固定値 */

.ai-native-label {
  font-size: 14px;
}

/* 用途: Member Popup 氏名（日本語） / 対象: PC・TB・SP / 備考: レスポンシブ対応 */

@media (max-width: 1024px) {
  .member-popup-name-ja {
    font-size: 24px;
  }
}

/* Member Popup: 767px以下でfont-sizeを23pxに */

@media (max-width: 767px) {
  .member-popup-name-ja {
    font-size: 23px !important;
  }
}

/* 用途: Member Popup 氏名（英語） / 対象: 全画面 / 備考: 固定値 */

/* 用途: Member Popup セクションタイトル / 対象: 全画面 / 備考: 固定値 */

/* 用途: Member Popup インタビュータイトル / 対象: 全画面 / 備考: 固定値 */

/* 用途: Member Popup インタビューテキスト / 対象: 全画面 / 備考: 固定値 */

/* 用途: Hero セクション見出し（1439px以下） / 対象: TB・SP / 備考: 固定値 */

@media (max-width: 1439px) {
  #hero-section h1 span:first-child {
    font-size: 44px;
  }

  #hero-section h1 span:last-child {
    font-size: 65px;
  }
}

/* 用途: Interview セクション日付テキスト / 対象: PC / 備考: clamp使用（1440px以上） */

@media (min-width: 1441px) {
  .interview-section .text-xs {
    font-size: clamp(
      12px,
      calc(12px + 2 * (100vw - 1440px) / 480),
      14px
    ) !important;
  }
}

/* 用途: Value-Culture リードテキスト / 対象: PC / 備考: clamp使用（1440px以上） */

@media (min-width: 1441px) {
  .value-culture-lead {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1440px) / 480),
      20px
    ) !important;
  }
}

/* 用途: Benefits セクションカード h5 / 対象: PC / 備考: clamp使用（1440px以上） */

@media (min-width: 1441px) {
  #benefits .grid h5 {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1440px) / 480),
      20px
    ) !important;
  }
}

/* 用途: Numbers セクションカード h4 / 対象: PC / 備考: clamp使用（1440px以上） */

@media (min-width: 1441px) {
  #numbers .grid h4 {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1440px) / 480),
      20px
    ) !important;
  }
}

/* 用途: AI Native Tech Blog 見出し / 対象: PC / 備考: clamp使用（1440px以上） */

@media (min-width: 1441px) {
  .ai-native-tech-blog-heading {
    font-size: clamp(
      32px,
      calc(32px + 8 * (100vw - 1440px) / 480),
      40px
    ) !important;
  }
}

/* 用途: AI Native Tech Blog カード h4 / 対象: 全幅 / 備考: 1440pxまでは固定、1441px以上は拡大 */

.ai-native-section .tech-blog-card h4 {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

@media (min-width: 1441px) {
  .ai-native-section .tech-blog-card h4 {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    ) !important;
  }

  .ai-native-section h4.text-white {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    ) !important;
  }
}

/* 用途: Section タイトル（h2） / 対象: PC・TB・SP / 備考: clamp使用、vw使用 */

.section-title {
  font-size: clamp(56px, 12vw, 72px);
}

@media (max-width: 767px) {
  .section-title {
    font-size: 48px !important;
  }
}

@media (min-width: 1440px) {
  .section-title:not(.section-title-large) {
    font-size: clamp(77px, calc(14.4px + 4vw), 9999px) !important;
  }
}

/* 用途: Product サブ見出し / 対象: PC / 備考: clamp使用（1440px以上） */

@media (min-width: 1440px) {
  .text-fluid-product-heading {
    font-size: clamp(
      32px,
      calc(32px + ((100vw - 1440px) * 0.01)),
      9999px
    ) !important;
  }
}

/* 用途: Product 本文 / 対象: PC / 備考: clamp使用（1440px以上） */

@media (min-width: 1440px) {
  .product-body-fluid {
    font-size: 16px;
    font-size: clamp(16px, calc(16px + ((100vw - 1440px) * 0.005)), 18px);
  }
}

/* 用途: Product CTA / 対象: PC / 備考: clamp使用（1440px以上） */

@media (min-width: 1440px) {
  .product-cta-fluid,
  .product-cta-fluid span {
    font-size: clamp(16px, calc(-2px + 1.25vw), 22px) !important;
  }

  .interview-section .interview-more-link span {
    font-size: clamp(16px, calc(-2px + 1.25vw), 22px) !important;
  }
}

/* 用途: Member section もっと見るリンク / 対象: PC / 備考: clamp使用（1441px以上） */

@media (min-width: 1441px) {
  .member-more-link span.text-base {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    ) !important;
  }
}

/* 用途: Recruit セクションボタン（1023px以下） / 対象: TB・SP / 備考: 固定値 */

@media (max-width: 1024px) {
  .recruit-section .btn-white {
    font-size: 17px !important;
  }
}

/* 用途: Environment カードタイトル / 対象: PC / 備考: clamp使用（1440px以上） */

/* 用途: Environment カードサブタイトル / 対象: PC / 備考: clamp使用（1440px以上） */

/* 用途: Environment カードサブタイトル / 対象: PC / 備考: clamp使用（1440px以上） */

@media (min-width: 1440px) {
  .environment-card-subtitle {
    font-size: clamp(
      14px,
      calc(14px + (100vw - 1440px) * 0.01),
      19px
    ) !important;
  }
}

/* 用途: Member section サブタイトル（1440px以下） / 対象: PC・TB / 備考: 固定値 */

@media (max-width: 1440px) {
  .member-section .member-subtitle.xl\:text-fluid-xl {
    font-size: 20px !important;
  }

  .member-section .member-section-body {
    font-size: 16px !important;
  }

  .interview-section .interview-section-body {
    font-size: 16px !important;
  }

  #product-overview .member-subtitle.xl\:text-fluid-xl {
    font-size: 20px !important;
  }

  #product-overview .member-section-body {
    font-size: 16px !important;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  .member-section .member-subtitle.xl\:text-fluid-xl {
    font-size: 20px !important;
  }

  #product-overview .member-subtitle.xl\:text-fluid-xl {
    font-size: 20px !important;
  }
}

/* 用途: Member section サブタイトル（1441px以上） / 対象: PC / 備考: clamp使用 */

@media (min-width: 1441px) {
  .member-section .member-subtitle.xl\:text-fluid-xl {
    font-size: clamp(
      20px,
      calc(20px + ((100vw - 1441px) * 0.0083)),
      9999px
    ) !important;
  }

  #product-overview .member-subtitle.xl\:text-fluid-xl {
    font-size: clamp(
      20px,
      calc(20px + ((100vw - 1441px) * 0.0083)),
      9999px
    ) !important;
  }

  #product-overview .member-section-body {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1440px) / 480),
      20px
    ) !important;
  }
}

/* 用途: Filter ボタン / 対象: PC / 備考: clamp使用（1441px以上） */

@media (min-width: 1441px) {
  .filter-button {
    font-size: clamp(
      14px,
      calc(14px + 2 * (100vw - 1441px) / 479),
      16px
    ) !important;
  }
}

/* 用途: AI Native カードリスト / 対象: PC・TB・SP / 備考: clamp使用（1441px以上） */

@media (min-width: 1441px) {
  .ai-native-card-list,
  .ai-native-card .ai-native-card-list li {
    font-size: clamp(
      14px,
      calc(14px + 6 * (100vw - 1441px) / 479),
      20px
    ) !important;
  }
}

@media (min-width: 768px) and (max-width: 1440px) {
  .ai-native-card-list,
  .ai-native-card .ai-native-card-list li {
    font-size: 14px !important;
  }
}

@media (max-width: 767px) {
  .ai-native-card-list,
  .ai-native-card .ai-native-card-list li {
    font-size: 16px !important;
  }
}

/* 用途: AI Native サークルラベル / 対象: PC / 備考: clamp使用（1441px以上） */

@media (max-width: 1440px) {
  .ai-native-circle-label {
    font-size: 14px !important;
  }
}

@media (min-width: 1441px) {
  .ai-native-circle-label {
    font-size: clamp(
      14px,
      calc(14px + 4 * (100vw - 1441px) / 479),
      18px
    ) !important;
  }
}

/* 用途: Footer 見出し（h4） / 対象: PC / 備考: clamp使用（1441px以上） */

@media (max-width: 1440px) {
  .site-footer h4 {
    font-size: 16px !important;
  }
}

@media (min-width: 1441px) {
  .site-footer h4 {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    ) !important;
  }
}

/* 用途: Footer リンク（text-sm） / 対象: PC / 備考: clamp使用（1441px以上） */

@media (max-width: 1440px) {
  .site-footer .text-sm {
    font-size: 14px !important;
  }
}

@media (min-width: 1441px) {
  .site-footer .text-sm {
    font-size: clamp(
      14px,
      calc(14px + 2 * (100vw - 1441px) / 479),
      16px
    ) !important;
  }
}

/* 用途: Footer コピーライト（text-xs） / 対象: PC / 備考: clamp使用（1441px以上） */

@media (max-width: 1440px) {
  .footer-copyright .text-xs {
    font-size: 12px !important;
  }
}

@media (min-width: 1441px) {
  .footer-copyright .text-xs {
    font-size: clamp(
      12px,
      calc(12px + 2 * (100vw - 1441px) / 479),
      14px
    ) !important;
  }
}

/* 用途: Footer リンク（375px以下） / 対象: SP / 備考: 固定値 */

@media (max-width: 375px) {
  .site-footer .footer-links a.text-sm {
    font-size: 12px !important;
  }
}

/* 用途: Mobile nav ロゴテキスト / 対象: SP / 備考: 固定値 */

#mobile-nav .mobile-nav-logo-text {
  font-size: 12px;
}

/* 用途: Mobile menu 閉じるボタン / 対象: SP / 備考: 固定値 */

.mobile-menu-close {
  font-size: 28px;
}

/* 用途: Mobile nav リンク / 対象: SP / 備考: 固定値 */

#mobile-nav a {
  font-size: 16px;
}

@media (max-width: 767px) {
  #mobile-nav a {
    font-size: 16px !important;
  }
}

/* 用途: Mobile menu ジョブボタン / 対象: SP / 備考: 固定値 */

#mobile-nav .mobile-menu-job-btn {
  font-size: 16px;
}

.mobile-menu-job-btn {
  font-size: 16px;
}

/* 用途: Mobile menu コンタクトボタン / 対象: SP / 備考: 固定値 */

.mobile-menu-contact-btn {
  font-size: 16px;
}

/* 用途: Mobile nav メニューセクションタイトル / 対象: SP / 備考: 固定値 */

#mobile-nav .menu-section-title {
  font-size: 16px;
}

/* 用途: Mobile nav メニューリンク / 対象: SP / 備考: 固定値 */

#mobile-nav ul li a,
#mobile-nav ul li p,
#mobile-nav .menu-links a,
#mobile-nav .menu-links a:visited,
#mobile-nav .menu-links a:link,
#mobile-nav .menu-links a:active {
  font-size: 16px;
}

.mobile-actions .mobile-menu-job-btn,
.mobile-actions .mobile-menu-contact-btn {
  font-size: 16px;
}

/* 用途: Recruit セクションボタン（599px以下） / 対象: SP / 備考: 固定値 */

@media (max-width: 599px) {
  .recruit-action-group .btn-white {
    font-size: 16px !important;
  }

  .recruit-action-group .recruit-btn-jobs,
  .recruit-action-group .recruit-btn-contact {
    font-size: 16px !important;
  }

  .index-page #recruit-section .recruit-action-group .btn-white {
    font-size: 16px !important;
  }
}

/* 用途: Environment セクションカードサブタイトル（599px以下） / 対象: SP / 備考: 固定値 */

@media (max-width: 599px) {
  .index-page #environment-section .environment-card-subtitle {
    font-size: 13px !important;
  }
}

/* 用途: Footer 見出し（599px以下） / 対象: SP / 備考: 固定値 */

@media (max-width: 599px) {
  .footer-main-row h4,
  .footer-grid-nav h4 {
    font-size: 15px !important;
  }
}

/* 用途: Footer リンク（599px以下） / 対象: SP / 備考: 固定値 */

@media (max-width: 599px) {
  .footer-main-row a,
  .footer-main-row p,
  .footer-grid-nav a,
  .footer-grid-nav p,
  .footer-grid-nav li a,
  .footer-grid-nav li p,
  .footer-links a {
    font-size: 13px !important;
  }

  .footer-grid-nav ul li a,
  .footer-grid-nav ul li a p {
    font-size: 13px !important;
  }

  .site-footer .text-sm,
  .footer-main-row .text-sm {
    font-size: 13px !important;
  }
}

/* 用途: Footer コピーライト（599px以下） / 対象: SP / 備考: 固定値 */

@media (max-width: 599px) {
  .footer-copyright p {
    font-size: 12px !important;
  }
}

/* 用途: Footer グリッドナビ p（599px以下） / 対象: SP / 備考: 固定値 */

@media (max-width: 599px) {
  .footer-grid-nav ul li p {
    font-size: 15px !important;
  }

  #site-footer .footer-grid-nav ul li a,
  #site-footer .footer-grid-nav ul li p {
    font-size: 0.75rem !important;
  }
}

/* 用途: Footer ロゴテキスト（767px以下） / 対象: SP / 備考: 固定値 */

@media (max-width: 767px) {
  .site-footer-logo > div > p {
    font-size: 12px !important;
  }
}

/* 用途: Footer ナビゲーションブロック gap / 対象: PC / 備考: 1440px基準で24px固定、1441px以上で拡大 */

/* .site-footer .gap-4 より優先度を上げるため、.site-footer .footer-nav-block を使用 */

@media (max-width: 1440px) {
  .site-footer .footer-nav-block {
    gap: 24px !important;
  }
}

/* 用途: Hero セクション h1（330px以下） / 対象: SP / 備考: 固定値 */

@media (max-width: 330px) {
  .index-page #hero-section h1 span.text-32,
  .index-page #hero-section h1 span.block.text-32 {
    font-size: 18px !important;
  }

  main.index-page #hero-section h1 span.max-\[375px\]:block.text-58,
  main.index-page
    #hero-section
    h1.hero-main-heading
    span.max-\[375px\]:block.text-58,
  main.index-page
    #hero-section
    h1.hero-main-heading
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page
    #hero-section
    .hero-heading
    h1.hero-main-heading
    span.max-\[375px\]:block.text-58,
  main.index-page
    #hero-section
    .hero-heading
    h1.hero-main-heading
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page
    #hero-section
    div.hero-heading
    h1.hero-main-heading
    span.max-\[375px\]:block.text-58,
  main.index-page
    #hero-section
    div.hero-heading
    h1.hero-main-heading
    span.max-\[375px\]:block.hidden.text-58,
  html body main.index-page #hero-section h1 span.max-\[375px\]:block.text-58,
  html
    body
    main.index-page
    #hero-section
    h1.hero-main-heading
    span.max-\[375px\]:block.text-58 {
    font-size: 40px !important;
  }

  .index-page #hero-section h1 span.text-58,
  .index-page #hero-section h1 span.max-\[375px\]:hidden.block.text-58 {
    font-size: 40px !important;
  }

  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page.font-en
    #hero-section
    div.absolute.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    div.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px !important;
  }
}

/* 用途: Member カード英語表記（1439px以下） / 対象: PC・TB / 備考: 固定値 */

@media (max-width: 1439px) {
  .member-section .member-card-name-en {
    font-size: 14px !important;
  }

  .index-page #member-section .member-card-name-en {
    font-size: 14px !important;
  }
}

/* 用途: Environment 作業テーブル th（767px以下） / 対象: SP / 備考: 固定値 */

@media (max-width: 767px) {
  #environment-section .environment-work-table th {
    font-size: 14px !important;
  }
}

/* 用途: Tech Blog カード h4（599px以下） / 対象: SP / 備考: 固定値 */

@media (max-width: 599px) {
  .index-page .tech-blog-card h4 {
    font-size: 15px !important;
  }
}

/* 用途: Heading Medium / 対象: PC・TB・SP / 備考: clamp使用（1441px以上） */

.heading-md {
  font-size: 20px !important;
}

@media (max-width: 767px) {
  .heading-md {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

@media (min-width: 1441px) {
  .heading-md {
    font-size: clamp(
      20px,
      calc(20px + 6 * (100vw - 1441px) / 479),
      26px
    ) !important;
  }
}

/* =========================================================
 Typography – Font Size セクション終了
 ========================================================= */

/* =====================================================
 * FV（Hero Section）height 設計ルール
 * - FV（Hero Section）の高さは、PC/タブレット帯では原則として vh 基準で連続的に変化させる
 * - 1140〜1439px 帯では min-height を使用しない
 *   → width 変更時に height と min-height の勝敗が切り替わり、高さがジャンプする（ガクッとする）現象を防ぐため
 * - 過去に min-height: 815px が原因でガクつきが発生したため、この帯には再追加しないこと
 * - 1440px はデザイン基準幅として固定値（815px）を使用し、それより大きい幅では clamp による Fluid 拡大を行う
 * ===================================================== */

/* =========================================================
 Hero Section: 1439px以下での固定高さ
 対象: index.html（Heroセクション）、その他全ページ
 用途: タブレット・スマホでのヒーローセクション高さ固定
 ========================================================= */

@media (max-width: 1439px) {
  #hero-section {
    height: 815px !important;
  }

  /* 緑の背景領域の高さを707pxに固定（1439px以下、ただし80vhを超えない） */

  .bg-hero-background-color {
    height: 707px !important;
    max-height: 80vh !important;
  }

  /* 1439px以下でのヒーロータイトルのサイズ調整（1440px以上は既存レイアウトを維持） */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  #hero-section h1 span:first-child {
    font-size: 44px;
  }

  #hero-section h1 span:last-child {
    font-size: 65px;
  }
}

/* =========================================================
 Value-Culture 背景画像: 1023px以下で非表示
 対象: index.html（Value-Cultureセクション）
 用途: タブレット・スマホでは擬似要素背景を非表示、SP画像を表示
 ========================================================= */

@media (max-width: 1024px) {
  /* 1023px以下ではセクション下端にSP画像を揃えるため、padding-bottomをゼロに上書き */

  .value-culture-section {
    padding-bottom: 0 !important;
  }

  .value-culture-section::after {
    display: none !important;
  }

  /* 1023px以下ではSP用Value-Culture画像を2回り大きく＆テキストブロックの下に揃える */

  .value-culture-section .value-culture-sp-image img {
    width: 66.6667% !important;
    /* 元の w-1/3 から約2倍 */
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

/* Value-Culture section: 768px以上で上下paddingを8remに固定 */

@media (min-width: 768px) {
  .value-culture-section {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
  }
}

/* 1023px以下ではpadding-bottomを再度ゼロに上書き（タブレット含む） */

@media (max-width: 1024px) {
  .value-culture-section {
    padding-bottom: 0 !important;
  }
}

/* Value-Culture SP画像は 1025〜1439px では非表示にする（疑似要素背景のみ表示） */

@media (min-width: 1025px) and (max-width: 1439px) {
  .value-culture-sp-image {
    display: none !important;
  }
}

/* =========================================================
 Member Popup: 1439px以下での強制制御
 対象: index.html（Memberセクション）、members.html
 用途: タブレット・スマホでのポップアップ表示制御（IDベースを最優先で適用）
 ========================================================= */

@media (max-width: 1439px) {
  #member-popup,
  #member-popup-overlay {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* JavaScriptによる表示ロジック: .active が付いたときのみ表示 */

  #member-popup.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1) !important;
    z-index: 10002 !important;
    height: -moz-fit-content !important;
    height: fit-content !important;
    max-height: 80vh !important;
  }

  #member-popup-overlay.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10001 !important;
  }
}

@media (max-width: 1024px) {
  .ai-native-section .tech-blog-card {
    padding: 20px !important;
  }

  /* Keep border visible on all screen sizes */

  .ai-native-section .tech-blog-card::before {
    z-index: 10 !important;
  }

  /* Ensure content stays above border */

  .ai-native-section .tech-blog-card > * {
    position: relative;
    z-index: 20 !important;
  }
}

/* =========================================================
Member Section: 599px以下で縦並びレイアウトにする
対象: index.html（Memberセクション）、members.html
用途: 小さい画面では横長レイアウトを廃止して縦並びに統一
========================================================= */

@media (max-width: 599px) {
  /* 画像ブロック（1番目のdiv）: 縦並びレイアウト用に幅を100%に（JavaScriptでテキストボックスと同じ幅に調整される） */

  .member-section .member-card > div:first-child {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  /* テキストブロック（2番目のdiv）: 縦並びレイアウト用に高さをautoに */

  .member-section .member-card > div:nth-child(2) {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  /* テキストコンテンツ: 縦並びレイアウト用に下側のみ角丸、上のborder削除 */

  .member-section .member-card-content {
    border-top: 0;
    border-left: 1px solid var(--color-border-default);
    border-right: 1px solid var(--color-border-default);
    border-bottom: 1px solid var(--color-border-default);
    border-radius: 0 0 4px 4px;
  }

  .interview-section .interview-card > div:first-child {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Interview cards (tablet): remove borders and corner rounding */

  .interview-section .interview-card-content {
    border: none !important;
  }

  .interview-section .interview-card-image {
    border-radius: 0 !important;
  }
}

@media (max-width: 1439px) {
  .ai-native-section
    .c-inner-container
    > .flex.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 100px !important;
  }

  .value-culture-lead {
    width: 50% !important;
    max-width: 50% !important;
  }

  /* Ensure member popup maintains correct size and positioning on all screen sizes */

  .member-popup {
    width: 768px !important;
    height: -moz-fit-content !important;
    height: fit-content !important;
    max-width: 768px !important;
    max-height: 80vh !important;
    background-color: var(--color-bg-white) !important;
    border-radius: 8px !important;
    overflow-y: auto !important;
  }

  .member-popup.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1) !important;
    z-index: 10002 !important;
    background-color: var(--color-bg-white) !important;
    height: -moz-fit-content !important;
    height: fit-content !important;
    max-height: 80vh !important;
  }

  .member-popup-content {
    padding: 40px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Fix image and SVG sizes in popup at 1439px and below (thumbnail only) */

  .member-popup-content img.member-popup-image-thumb {
    width: 10px !important;
    height: 10px !important;
    max-width: 10px !important;
    max-height: 10px !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }

  /* Ensure social SVG icons maintain proper size */

  .member-popup-social svg,
  .member-popup-social-icon {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    flex-shrink: 0 !important;
  }

  /* Note icon: ensure proper size (exclude from small image rule) */

  .member-popup-note-icon {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  .member-popup-social a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
  }
}

@media (max-width: 1024px) {
  .value-culture-lead {
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 767px) {
  /* 767px以下でヘッダーのインラインロゴを非表示にする */

  [data-header-inline-logo] {
    display: none !important;
  }

  #hero-section > div.absolute.top-0.z-10 {
    /* モバイル時は右端固定で拡大し、左を見切らせる */
    width: 100vw !important;
    left: auto !important;
    right: 0 !important;
    height: auto !important;
  }
}

/* =========================================================
 Hero Section & Message Section: タブレットサイズ（768px〜1024px）で緑と白の比率調整
 対象: index.html（Heroセクション、Messageセクション）
 用途: タブレットサイズでのみ、hero-sectionを高く、message-sectionのpadding-topを減らす
 備考: 
  - 1023pxと1024pxでFV高さを統一するため、max-widthを1024pxに変更
  - FVが画面下にはみ出さないよう、ヘッダー高さを考慮した計算に変更
    (calc(100vh + 60px) → calc(100vh - var(--site-header-h)))
    1140px〜1439pxと同じロジックで統一
 ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
  .index-page #hero-section {
    height: calc(100vh - var(--site-header-h)) !important;
    min-height: calc(100vh - var(--site-header-h)) !important;
  }
}

/* =========================================================
 Message Section: 768px〜1439pxで白領域のpadding-topを100pxに設定
 対象: index.html（Messageセクション）
 用途: 768px〜1439px（タブレット含む）で白領域のpadding-topを100pxに調整
 ========================================================= */

@media (min-width: 768px) and (max-width: 1439px) {
  .index-page #message-section {
    padding-top: 100px !important;
  }
}

/* =========================================================
 下層ページ: FV直下の最初のセクションの余白を64pxに統一
 対象: 下層ページ（index-page を持たないページ）の最初のセクション
 用途: スマホ〜1439px以下で、FVコンテナ直下の画像とh1の間の余白を64pxに統一
 備考: index.html は除外（.index-page を持たないページのみ対象）
 ========================================================= */

@media (max-width: 1439px) {
  main:not(.index-page) .page-body > section:first-of-type,
  main:not(.index-page) [class*="-main-content"] > section:first-of-type {
    padding-top: 64px !important;
  }
}

/* =========================================================
 見出し（h1/h2）＋サブコピー専用の共通 gap
 対象: 全ページ共通
 用途: h1/h2 と section-subtitle の間の gap を統一
 備考: 1440px基準で16px、1441px以上で拡大、767px以下で8px
 ========================================================= */

.heading-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1440px) {
  .heading-block {
    gap: clamp(16px, calc(16px + 8 * (100vw - 1440px) / 480), 9999px);
  }
}

@media (max-width: 767px) {
  .heading-block {
    gap: 8px;
  }
}

@media (min-width: 1140px) and (max-width: 1439px) {
  /* 1140–1439pxでFV画像を拡大しつつ配置と横幅を維持 */

  /* 高さはウィンドウ高さ基準（vh）に変更 */

  .index-page #hero-section {
    height: calc(100vh - var(--site-header-h, 87px)) !important;
    max-height: none !important;
  }

  .index-page
    #hero-section
    > div.absolute.inset-x-0.top-0.h-815.xl\:h-fluid-707.bg-no-repeat.bg-cover.bg-right-top.z-0.bg-hero-background-color,
  .index-page
    .absolute.inset-x-0.top-0.h-815.xl\:h-fluid-815.bg-no-repeat.bg-cover.bg-right-top.z-0.bg-hero-background-color {
    /* height: 100% !important; */
    /* max-height: 80vh !important; */
  }

  /* 1140px以上〜1439pxで全てのページの.bg-hero-background-colorに70vh上限を適用 */

  /* heightを上書きしてmax-heightを確実に適用 */

  .bg-hero-background-color {
    height: auto !important;
    max-height: 70vh !important;
    min-height: 620px !important;
  }

  .index-page #hero-section > div.absolute.top-0.right-0.z-10,
  .index-page #hero-section > div.absolute.top-0.z-10 {
    /* 1140pxから1440pxまでの範囲で、ウィンドウ幅に応じて線形に拡大 */
    /* 1140pxの時: 1377px * (1140 / 1440) = 1090.5px */
    /* 1440pxの時: 1377px */
    --fv-fluid-width: clamp(1090.5px, calc(1377px * 100vw / 1440px), 1377px);
    left: auto !important;
    right: 0 !important;
    width: var(--fv-fluid-width) !important;
    max-width: var(--fv-fluid-width) !important;
    min-width: var(--fv-fluid-width) !important;
    /* 高さはウィンドウ基準ではなく親基準に */
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .index-page #hero-section > div.absolute.top-0.right-0.z-10 > picture,
  .index-page #hero-section > div.absolute.top-0.right-0.z-10 > picture > img,
  .index-page #hero-section > div.absolute.top-0.right-0.z-10 > img {
    max-width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    -o-object-position: top !important;
       object-position: top !important;
  }

  /* 下層ページ（.index-page を持たないページ）のみに適用 */

  main:not(.index-page) #hero-section > div.absolute.top-0.z-10 {
    left: auto !important;
    right: 0 !important;
    width: clamp(1090.5px, calc(1377px * 100vw / 1440px), 1377px) !important;
    height: 100% !important;
  }
}

/* =========================================================
 Hero Section: 1440px固定サイズ
 対象: index.html（Heroセクション）、その他全ページ
 用途: デザイン基準サイズ（1440px）での固定値指定
 ========================================================= */

@media (min-width: 1440px) and (max-width: 1440px) {
  /* index.htmlのみ固定値 */

  .index-page #hero-section {
    height: 815px !important;
  }

  /* 下層ページは500pxに設定（1439pxと同じスタイル） */

  main:not(.index-page) #hero-section {
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
  }

  /* HTMLのクラス指定（h-[815px], xl:min-h-fluid-815）を打ち消す */

  main:not(.index-page) #hero-section.h-\[815px\] {
    height: 500px !important;
  }

  main:not(.index-page) #hero-section.xl\:min-h-fluid-815 {
    min-height: unset !important;
  }

  .xl\:w-fluid-1377 {
    width: 1377px !important;
  }

  .xl\:h-fluid-815 {
    height: 815px !important;
  }

  /* .xl:min-h-fluid-815 は index-page のみに適用 */

  .index-page .xl\:min-h-fluid-815 {
    min-height: 815px !important;
  }

  /* 下層ページの .xl:min-h-fluid-815 を打ち消す */

  main:not(.index-page) .xl\:min-h-fluid-815 {
    min-height: unset !important;
  }

  /* 緑の背景の高さの固定 */

  .xl\:h-fluid-707 {
    height: 707px !important;
    max-height: 80vh !important;
  }

  .bg-hero-background-color {
    height: 707px !important;
    max-height: 80vh !important;
  }

  /* FV画像コンテナに直接適用（1440px専用） */

  #hero-section > div.absolute.top-0.z-10 {
    left: auto !important;
    right: 0 !important;
    width: calc(100vw - 63px) !important;
    height: 100% !important;
  }

  /* 下層ページのFV画像コンテナも500pxの高さに合わせる */

  main:not(.index-page) #hero-section > div.absolute.top-0.z-10,
  main:not(.index-page) #hero-section > div.absolute.top-0.right-0.z-10 {
    height: 100% !important;
  }
}

/* =========================================================
 Message Section: 1440px以上で白領域をさらに狭くする
 対象: index.html（Messageセクション）
 用途: 1440px以上で白領域のpadding-topをclampで調整
 ========================================================= */

@media (min-width: 1440px) {
  .index-page #message-section {
    padding-top: clamp(
      120px,
      calc(120px + 24 * (100vw - 1440px) / 480),
      144px
    ) !important;
  }
}

/* =========================================================
 Hero Section: 1441px以上でFluid拡大
 対象: index.html（Heroセクション）、その他全ページ
 用途: 1440px以上の画面でFluid拡大（25%拡大率に統一）
 ========================================================= */

@media (min-width: 1441px) {
  /* Hero Section: 高さを一回り大きくするclamp関数 */

  #hero-section {
    height: clamp(
      815px,
      calc(815px + 284 * (100vw - 1441px) / 479),
      9999px
    ) !important;
  }

  /* Hero Section: Fluid Width/Height definitions */

  .xl\:w-fluid-1377 {
    /* Fluid Width の計算式: container拡大率（25%）に合わせて調整 */
    /* 25%拡大率に統一: 1377px * 0.25 = 344.25px増加 */
    --fv-fluid-width: clamp(
      1377px,
      calc(1377px + 344.25 * (100vw - 1440px) / 480),
      9999px
    );
    width: var(--fv-fluid-width) !important;
  }

  .xl\:h-fluid-815 {
    /* 25%拡大率に統一: 815px * 0.25 = 203.75px増加 */
    height: clamp(
      815px,
      calc(815px + 203.75 * (100vw - 1440px) / 480),
      9999px
    ) !important;
  }

  .xl\:min-h-fluid-815 {
    /* 25%拡大率に統一: 815px * 0.25 = 203.75px増加 */
    min-height: clamp(
      815px,
      calc(815px + 203.75 * (100vw - 1440px) / 480),
      9999px
    ) !important;
  }

  /* 緑の背景領域のFluid高さ（fluid-707、上限80vh） */

  .xl\:h-fluid-707 {
    height: clamp(
      707px,
      calc(707px + 177 * (100vw - 1440px) / 480),
      800px
    ) !important;
    max-height: 80vh !important;
  }

  /* FV画像コンテナに直接適用（Fluid） */

  #hero-section > div.absolute.top-0.z-10 {
    /* 右端に固定、左側は63px余白を確保 */
    left: auto !important;
    /* 左側の位置指定を解除 */
    right: 0 !important;
    /* 右端に固定 */
    width: calc(
      100vw - 63px
    ) !important;
    /* 画面幅から63pxを引いた値で幅を設定 */
    height: 100% !important;
    /* 親要素（#hero-section）の高さに合わせる */
  }

  /* FV画像コンテナ内の画像をcoverで配置し、縦横比率を保つ */

  #hero-section > div.absolute.top-0.z-10 > picture,
  #hero-section > div.absolute.top-0.z-10 > picture > img,
  #hero-section > div.absolute.top-0.z-10 > img {
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    -o-object-position: top !important;
       object-position: top !important;
  }

  /* 背景画像レイヤーにもFluidスケールを付与（fluid-707に合わせる、上限80vh） */

  .bg-hero-background-color {
    height: clamp(
      707px,
      calc(707px + 177 * (100vw - 1440px) / 480),
      800px
    ) !important;
    max-height: 80vh !important;
    width: var(--fv-fluid-width) !important;
  }
}

@media (min-width: 1440px) {
  /* Hero heading: 1440pxの時にもっと下に配置 */

  .index-page
    #hero-section
    > div.absolute.bottom-12.right-4.md\:right-10.z-10.text-right {
    bottom: 100px !important;
  }

  #hero-section > div.absolute.bottom-12.right-4.md\:right-10.z-10.text-right,
  #hero-section .hero-heading {
    bottom: 24px !important;
  }

  /* Message cards: bump overlay gaps more aggressively on xl+ */

  /* Message overlay: 25%拡大率に統一 (24px * 0.25 = 6px増加) */

  .message-overlay {
    gap: calc(24px + 6 * (100vw - 1440px) / 480) !important;
  }

  /* Message overlay title: 25%拡大率に統一 (12px * 0.25 = 3px増加) */

  .message-overlay-title {
    gap: calc(12px + 3 * (100vw - 1440px) / 480) !important;
  }

  /* Interview section: date text scales from 12px at 1440px upward */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .interview-section .text-xs {
    font-size: clamp(
      12px,
      calc(12px + 2 * (100vw - 1440px) / 480),
      14px
    ) !important;
  }

  /* Interview card content: min-height fluid scaling like work cards */

  .xl\:min-h-fluid-186 {
    min-height: clamp(
      186px,
      calc(186px + 46 * (100vw - 1440px) / 480),
      232px
    ) !important;
  }

  /* Value-Culture lead text: 16px at 1440px, scales upward */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .value-culture-lead {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1440px) / 480),
      20px
    ) !important;
  }

  /* Benefits section card h5: same scaling as value-culture-lead */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  #benefits .grid h5 {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1440px) / 480),
      20px
    ) !important;
    line-height: clamp(
      2,
      calc(2 + 0.2 * (100vw - 1440px) / 480),
      2.2
    ) !important;
  }

  /* Numbers section card h4: same scaling as value-culture-lead */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  #numbers .grid h4 {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1440px) / 480),
      20px
    ) !important;
    line-height: clamp(
      2,
      calc(2 + 0.2 * (100vw - 1440px) / 480),
      2.2
    ) !important;
  }

  /* Evaluation keywords: 20px @1440px -> 25px @1920px with responsive scaling */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .evaluation-keyword {
    font-size: clamp(
      20px,
      calc(20px + 5 * (100vw - 1440px) / 480),
      25px
    ) !important;
  }

  /* AI Native Tech Blog heading: 32px at 1440px, scales upward to 40px at 1920px */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .ai-native-tech-blog-heading {
    font-size: clamp(
      32px,
      calc(32px + 8 * (100vw - 1440px) / 480),
      40px
    ) !important;
  }

  /* AI Native Tech Blog card: hover opacity */

  .ai-native-section .tech-blog-card {
    transition: opacity 0.3s ease;
    position: relative !important;
  }

  .ai-native-section .tech-blog-card::before {
    z-index: 0 !important;
    position: absolute !important;
    content: "" !important;
  }

  .ai-native-section .tech-blog-card:hover {
    opacity: 0.7;
  }

  /* AI Native section: padding-bottom 160px at 1440px, scales upward */

  /* Recruit section: fluid gap helpers for xl+ */

  /* 25%拡大率に統一: 32px * 0.25 = 8px増加 */

  .gap-fluid-8 {
    gap: calc(32px + 8 * (100vw - 1440px) / 480) !important;
  }

  /* 25%拡大率に統一: 16px * 0.25 = 4px増加 */

  .gap-fluid-4 {
    gap: calc(16px + 4 * (100vw - 1440px) / 480) !important;
  }

  /* 25%拡大率に統一: 24px * 0.25 = 6px増加 */

  /* @deprecated セクションに移動済み */

  /* Small gap for member card text block */

  .xl\:gap-fluid-small {
    gap: 3px !important;
  }

  @media (min-width: 1920px) {
    .xl\:gap-fluid-small {
      gap: clamp(3px, calc(3px + 3 * ((100vw - 1920px) / 480)), 6px) !important;
    }
  }

  /* Footer: fluid gap helper for 53px spacing at xl+ */

  .xl\:gap-fluid-53 {
    gap: clamp(
      53px,
      calc(53px + 37 * (100vw - 1440px) / 480),
      9999px
    ) !important;
  }

  /* Member card text block: keep 3px gap up to 1919px, then scale upward */

  @media (min-width: 1441px) and (max-width: 1919px) {
    .member-card-text {
      gap: 3px !important;
    }
  }

  @media (min-width: 1920px) {
    .member-card-text {
      gap: clamp(3px, calc(3px + 3 * ((100vw - 1920px) / 480)), 6px) !important;
    }
  }

  /* Hard override existing member-card-text gap clamp at 1441px+ */

  @media (min-width: 1441px) {
    .member-card-text.member-card-text {
      gap: 3px !important;
    }
  }

  /* Member section: scale gap from 1441px+ while keeping 1440px and below unchanged */

  @media (min-width: 1441px) {
    .member-section .member-card-text {
      gap: clamp(
        3px,
        calc(3px + 7 * ((100vw - 1441px) / 479)),
        10px
      ) !important;
    }
  }

  /* IDEA / TECHタグ: 1441px以上でpaddingを緩やかに拡大（最低サイズは既存値を保持） */

  @media (min-width: 1441px) {
    .ai-native-tech-grid .bg-tagPurple,
    .ai-native-tech-grid .bg-\[\#3EA8FF\] {
      width: auto;
      height: auto;
      min-width: 43px;
      min-height: 23px;
      padding-top: clamp(
        6px,
        calc(6px + 2 * ((100vw - 1441px) / 480)),
        8px
      ) !important;
      padding-bottom: clamp(
        6px,
        calc(6px + 2 * ((100vw - 1441px) / 480)),
        8px
      ) !important;
      padding-left: clamp(
        10px,
        calc(10px + 4 * ((100vw - 1441px) / 480)),
        14px
      ) !important;
      padding-right: clamp(
        10px,
        calc(10px + 4 * ((100vw - 1441px) / 480)),
        14px
      ) !important;
    }
  }

  /* Work description: 1440px以下は16px/1.6固定 */

  @media (max-width: 1440px) {
    /* Benefits section card h5: 1440px以下で固定値 */

    #benefits .grid h5 {
      font-size: 16px !important;
      line-height: 2 !important;
    }
  }

  /* 1441px以上で緩やかに拡大 */

  @media (min-width: 1441px) {
    /* Benefits section card text-xs: 1441px以上で拡大 */

    .c-benefit-card p.text-xs {
      font-size: clamp(
        12px,
        calc(12px + 2 * (100vw - 1440px) / 480),
        14px
      ) !important;
      line-height: clamp(
        1.5,
        calc(1.5 + 0.1 * (100vw - 1440px) / 480),
        1.6
      ) !important;
    }
  }

  .product-content {
    min-height: 400px;
  }

  .product-content::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    top: clamp(-140px, -7vw, -110px);
    /* 1440pxでは固定、1441px以降は緩やかに右へスライド（rightは未使用） */
    left: clamp(
      280px,
      calc(280px + 280 * ((100vw - 1440px) / 480)),
      560px
    ) !important;
    --product-image-width: clamp(1000px, 52vw, 1200px);
    width: var(--product-image-width);
    height: calc(var(--product-image-width) * 0.662);
    max-width: none;
    max-height: none;
    background-image: url("../images/product.webp") !important;
    background-size: 98%;
    background-position: right center;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  /* Product section: scale up image size at 1441px+ */

  @media (min-width: 1441px) {
    .product-content::after {
      --product-image-width: clamp(
        1000px,
        calc(1000px + 0 * ((100vw - 1440px) / 480)),
        1000px
      );
      width: var(--product-image-width) !important;
      height: calc(var(--product-image-width) * 0.662) !important;
    }
  }

  /* Product section: scale up image size at 1650px+ */

  @media (min-width: 1650px) {
    .product-content::after {
      --product-image-width: clamp(
        1000px,
        calc(1000px + 200 * ((100vw - 1650px) / 270)),
        1200px
      );
      width: var(--product-image-width) !important;
      height: calc(var(--product-image-width) * 0.662) !important;
    }
  }

  /* Product section: 1800px以上で left を固定（メインコンテナからはみ出さないように） */

  @media (min-width: 1800px) {
    .product-content::after {
      left: 490px !important;
    }
  }

  /* Product section: push image further right at 2200px+ without changing <2200px */

  @media (min-width: 2200px) {
    .product-content::after {
      left: 490px !important;
      /* 2200px以上でのみサイズを少し拡大 */
      --product-image-width: clamp(
        1200px,
        calc(1200px + 200 * ((100vw - 2200px) / 400)),
        1400px
      );
      width: var(--product-image-width) !important;
      height: calc(var(--product-image-width) * 0.662) !important;
    }
  }

  /* Product Content gap を1440px基準でFluid化（32px→44px相当）、競合回避のため!important */

  .product-content {
    gap: calc(32px + 12 * (100vw - 1440px) / 480) !important;
  }
}

/* ここ以降 */

/* Member section: member cards hover gradient border animation */

.member-section .member-card {
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.member-section .member-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.member-section .member-card:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 8px;
  height: 2px;
  width: 0;
  background: linear-gradient(
    90deg,
    var(--color-text-accent),
    #40e0d0,
    var(--color-text-accent)
  );
  background-size: 200% 100%;
  transition: width 0.1s ease-in-out;
  pointer-events: none;
}

.member-section .member-card:hover:after {
  width: 180px;
  animation: gradient-flow 1s ease-in-out infinite;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 200% 0%;
  }
}

/* 767px以下では member-card のホバーアニメーションを無効化し、opacityアニメーションを追加 */

@media (max-width: 767px) {
  .member-section .member-card {
    transition: opacity 0.3s ease;
  }

  .member-section .member-card:hover {
    transform: none;
    box-shadow: none;
    opacity: 0.8;
  }

  .member-section .member-card:after {
    display: none;
  }
}

/* Work section: work cards hover gradient border animation */

.work-section .work-card {
  position: relative;
  overflow: visible;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.work-section .work-card:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 8px;
  height: 2px;
  width: 0;
  background: linear-gradient(
    90deg,
    var(--color-text-accent),
    #40e0d0,
    var(--color-text-accent)
  );
  background-size: 200% 100%;
  transition: width 0.1s ease-in-out;
  pointer-events: none;
}

.work-section .work-card:hover:after {
  width: 180px;
  animation: gradient-flow 1s ease-in-out infinite;
}

/* Work section: 1024px以下で:afterを非表示 */

@media (max-width: 1024px) {
  .work-section .work-card:after {
    display: none !important;
  }
}

/* Work section: 767px以下でwork-card-contentのmin-heightを無効化 */

@media (max-width: 767px) {
  .work-section .work-card-content[class*="min-h-225"],
  .work-section .work-card-content[class*="min-h-fluid-225"],
  .index-page #work-section .work-card-content[class*="min-h-225"],
  .index-page #work-section .work-card-content[class*="min-h-fluid-225"],
  .work-section a .work-card-content[class*="min-h-225"],
  .work-section a .work-card-content[class*="min-h-fluid-225"],
  .work-section a.group .work-card-content[class*="min-h-225"],
  .work-section a.group .work-card-content[class*="min-h-fluid-225"],
  .work-section .work-card-content,
  .index-page #work-section .work-card-content,
  .work-section a .work-card-content,
  .work-section a.group .work-card-content {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
}

/* .work-section .work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);

  @media (max-width: 1024px) {
    transform: none;
    box-shadow: none;
    pointer-events: none;
  }
} */

.work-section .work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 1024px以下では hover の見た目を打ち消し、opacityアニメーションを追加 */

@media (max-width: 1024px) {
  .work-section .work-card {
    transition: opacity 0.3s ease;
  }

  .work-section .work-card:hover {
    transform: none;
    box-shadow: none;
    opacity: 0.8;
  }
}

/* Interview section: interview cards hover gradient border animation */

.interview-section .interview-card {
  position: relative;
  overflow: visible;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.interview-section .interview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Interview section: 1024px以下では hover の見た目を打ち消し、opacityアニメーションを追加 */

@media (max-width: 1024px) {
  .interview-section .interview-card {
    transition: opacity 0.3s ease;
  }

  .interview-section .interview-card:hover {
    transform: none;
    box-shadow: none;
    opacity: 0.8;
  }
}

.interview-section .interview-card:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 8px;
  height: 2px;
  width: 0;
  background: linear-gradient(
    90deg,
    var(--color-text-accent),
    #40e0d0,
    var(--color-text-accent)
  );
  background-size: 200% 100%;
  transition: width 0.1s ease-in-out;
  pointer-events: none;
}

.interview-section .interview-card:hover:after {
  width: 180px;
  animation: gradient-flow 1s ease-in-out infinite;
}

/* Interview section: 1024px以下で:afterを非表示 */

@media (max-width: 1024px) {
  .interview-section .interview-card:after {
    display: none !important;
  }
}

/* Interview section: overflowをvisibleにしてhoverアニメーションを全サイズで表示 */

.interview-section {
  overflow: visible !important;
}

/* Message section: keep 3px until 1799px, then gently scale up */

@media (min-width: 1800px) {
  .message-section .member-card-text.member-card-text {
    gap: clamp(3px, calc(3px + 3 * ((100vw - 1800px) / 240)), 6px) !important;
  }
}

/* Work section: force fluid sizes with higher priority */

.xl\:w-fluid-96 {
  --fluid-w-96: clamp(384px, calc(384px + 96 * (100vw - 1440px) / 480), 9999px);
  width: var(--fluid-w-96) !important;
}

.xl\:h-fluid-216 {
  height: clamp(
    216px,
    calc(216px + 54 * (100vw - 1440px) / 480),
    9999px
  ) !important;
}

.xl\:min-h-fluid-225 {
  min-height: clamp(
    225px,
    calc(225px + 55 * (100vw - 1440px) / 480),
    280px
  ) !important;
}

.xl\:pt-fluid-5 {
  padding-top: clamp(
    20px,
    calc(20px + 5 * (100vw - 1440px) / 480),
    25px
  ) !important;
}

.xl\:px-fluid-4-5 {
  padding-left: clamp(
    18px,
    calc(18px + 5 * (100vw - 1440px) / 480),
    23px
  ) !important;
  padding-right: clamp(
    18px,
    calc(18px + 5 * (100vw - 1440px) / 480),
    23px
  ) !important;
}

.xl\:pb-fluid-6 {
  padding-bottom: clamp(
    24px,
    calc(24px + 6 * (100vw - 1440px) / 480),
    30px
  ) !important;
}

/* Work cards: 1440pxで上下左右24px。1441px以上でスケール */

@media (min-width: 1440px) and (max-width: 1440px) {
  .work-section .work-card-content {
    padding-top: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 24px !important;
    padding-left: 24px !important;
  }

  /* Work section: カード内の見出しと本文の間隔を1440pxで8pxに */

  .work-section .work-card-content .flex.flex-col.gap-2\.75,
  .work-section .work-card-content .flex.flex-col.gap-2 {
    gap: 8px !important;
  }
}

@media (min-width: 1441px) {
  .work-section .work-card-content {
    padding-top: clamp(
      24px,
      calc(24px + (100vw - 1441px) * 0.0125),
      36px
    ) !important;
    padding-right: clamp(
      18px,
      calc(18px + (100vw - 1441px) * 0.0125),
      30px
    ) !important;
    padding-bottom: clamp(
      16px,
      calc(16px + (100vw - 1441px) * 0.0125),
      28px
    ) !important;
    padding-left: clamp(
      18px,
      calc(18px + (100vw - 1441px) * 0.0125),
      30px
    ) !important;
  }

  /* Work section: カード内の見出しと本文の間隔を1441px以上で緩やかに拡大 */

  .work-section .work-card-content .flex.flex-col.gap-2\.75,
  .work-section .work-card-content .flex.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px) !important;
  }
}

/* Interview cards: 1024px以上でmin-heightを確保（186px） */

@media (min-width: 1024px) {
  .interview-section .interview-card-content {
    min-height: 186px !important;
  }
}

/* Interview cards: 1023px以下でmin-heightを解除 */

@media (max-width: 1024px) {
  .interview-section .interview-card-content {
    min-height: auto !important;
  }
}

/* Interview cards: 1440pxで上下左右24px。1441px以上でスケール */

@media (min-width: 1440px) and (max-width: 1440px) {
  .interview-section .interview-card-content {
    padding: 24px !important;
  }
}

@media (min-width: 1441px) {
  .interview-section .interview-card-content {
    padding: clamp(
      24px,
      calc(24px + (100vw - 1441px) * 0.0125),
      36px
    ) !important;
  }

  /* Interview card内の日付とテキストのgapを1441px以上で拡大 */

  .interview-section .interview-card-content .flex.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px) !important;
  }
}

.product-content > * {
  position: relative;
  z-index: 1;
}

/* index.html と下層ページの h2 を完全統一 */

/* font-size 定義は Typography – Font Size セクションに移動 */

.section-title {
  font-size: clamp(56px, 12vw, 72px);
  /* モバイル〜1439px */
  line-height: 1.1;
  font-weight: 500 !important;
}

/* 用途: Section タイトル（h2）の一回り大きいバリエーション
   PC/TB(768〜1440px): 86px固定
   1441px以上: 画面幅に応じて緩やかに拡大
   767px以下: 52px固定
*/

.section-title-large {
  font-size: 86px !important;
  line-height: 1.1;
}

/* 一回り大きいセクションタイトル用のタイトな行間 */

.section-title-large-tight {
  line-height: 1 !important;
}

@media (max-width: 767px) {
  .section-title-large {
    font-size: 52px !important;
  }
}

@media (min-width: 1440px) {
  .section-title.section-title-large,
  .section-title-large {
    font-size: 86px !important;
  }
}

@media (min-width: 1441px) {
  .section-title.section-title-large,
  .section-title-large {
    font-size: clamp(
      86px,
      calc(86px + (100vw - 1440px) * 0.04),
      134px
    ) !important;
  }
}

/* 767px以下での h2 のフォントサイズ固定（1440px 以上の見た目には影響しない） */

@media (max-width: 767px) {
  .section-title {
    font-size: 48px !important;
  }
}

/* Product サブ見出しの 1440px超フルードスケール（1440pxは32pxで維持） */

@media (min-width: 1440px) {
  .text-fluid-product-heading {
    font-size: clamp(
      32px,
      calc(32px + ((100vw - 1440px) * 0.01)),
      9999px
    ) !important;
  }

  .section-title:not(.section-title-large) {
    font-size: clamp(77px, calc(14.4px + 4vw), 9999px) !important;
  }

  .text-sm {
    line-height: 0.2rem;
  }

  .product-body-fluid,
  .product-lead-fluid,
  .product-cta-fluid {
    transform-origin: left top;
  }

  .product-body-fluid {
    font-size: 16px;
    font-size: clamp(16px, calc(16px + ((100vw - 1440px) * 0.005)), 18px);
  }

  .product-content {
    gap: calc(32px + ((100vw - 1440px) * 0.03));
  }

  .product-section {
    padding-top: calc(200px + ((100vw - 1440px) * 0.1));
    padding-bottom: calc(180px + ((100vw - 1440px) * 0.1));
  }

  /* product-cta-fluid は Value-Culture ボタンと同じスケールに合わせる */

  .product-cta-fluid,
  .product-cta-fluid span {
    font-size: clamp(16px, calc(-2px + 1.25vw), 22px) !important;
  }

  /* Interview cards: グリッド幅に追従させるため固定幅を解除 */

  .interview-section .interview-card {
    width: 100% !important;
    max-width: none !important;
  }

  /* product-cta-fluid は Value-Culture ボタンと同じくユーティリティ基準で拡大 */

  .product-cta-fluid .arrow-button-dark-lg {
    width: clamp(62px, calc(62px + (100vw - 1440px) * 0.02), 74px);
    height: clamp(38px, calc(38px + (100vw - 1440px) * 0.012), 48px);
    transform-origin: left center;
  }

  .aboutus-value-culture-link .arrow-button-dark-lg {
    width: clamp(62px, calc(62px + (100vw - 1440px) * 0.02), 74px);
    height: clamp(38px, calc(38px + (100vw - 1440px) * 0.012), 48px);
    transform-origin: left center;
  }

  /* Interview section: もっと見るボタンのスタイル（value-culture-sectionと同じ拡大率） */

  .interview-section .interview-more-link span {
    font-size: clamp(16px, calc(-2px + 1.25vw), 22px) !important;
  }

  .interview-section .interview-more-link .arrow-button-dark-lg {
    width: clamp(62px, calc(62px + (100vw - 1440px) * 0.02), 74px) !important;
    height: clamp(38px, calc(38px + (100vw - 1440px) * 0.012), 48px) !important;
    transform-origin: left center;
  }

  .interview-section .interview-more-link .arrow-lg,
  .interview-section .interview-more-link .arrow-lg img {
    width: clamp(14px, calc(14px + (100vw - 1440px) * 0.008), 18px) !important;
    height: clamp(14px, calc(14px + (100vw - 1440px) * 0.008), 18px) !important;
  }

  /* AI Native section: arrow buttons scale with viewport */

  .ai-native-section .arrow-button-light-lg {
    width: clamp(62px, calc(62px + (100vw - 1440px) * 0.02), 74px);
    height: clamp(38px, calc(38px + (100vw - 1440px) * 0.012), 48px);
    transform-origin: left center;
  }
}

/* 86px見出し用の修飾クラス: 1441px以上で同じ拡大率でスケール */

@media (min-width: 1441px) {
  .section-title:not(.section-title-large) {
    font-size: clamp(77px, calc(77px + (100vw - 1440px) * 0.04), 120px);
  }
}

/* Product 見出し・本文の折り返し幅調整 */

.product-heading-wrap,
.product-body-wrap,
.product-text-wrap {
  width: 100%;
}

@media (max-width: 1024px) {
  .product-text-wrap,
  .product-heading-wrap,
  .product-body-wrap {
    max-width: 100%;
  }
}

@media (min-width: 1024px) and (max-width: 1270px) {
  .product-text-wrap,
  .product-heading-wrap,
  .product-body-wrap {
    max-width: clamp(260px, 85vw, 380px);
  }

  .product-body-wrap br {
    display: none;
  }
}

@media (max-width: 1439px) {
  .product-section .product-text-wrap {
    width: 50% !important;
    max-width: 50% !important;
  }

  .value-culture-text-wrap {
    width: 50% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 1024px) {
  .value-culture-text-wrap {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 1439px) {
  #value-culture-section .text-body br {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .product-section .product-text-wrap {
    width: auto !important;
    max-width: none !important;
  }
}

/* Product section: hide manual line breaks on tablet and below */

@media (max-width: 1439px) {
  #product-section .text-body br {
    display: none !important;
  }
}

/* Value-Culture 背景画像 (擬似要素) */

.value-culture-section {
  position: relative;
}

.value-culture-section::after {
  content: "";
  position: absolute;
  top: auto;
  bottom: 0;
  /* widthを変数化して縦横比を維持しつつFluid化（1440px以上用のデフォルト） */
  --value-img-width: clamp(1000px, 70vw, 1350px);
  /* 1440px〜2000pxでさらに左寄りに調整（ヒーローテキストとのバランス優先） */
  left: clamp(380px, calc(400px + 200 * (100vw - 1440px) / 560), 580px);
  width: var(--value-img-width);
  height: calc(var(--value-img-width) * 0.719);
  background-image: url("../images/value.webp");
  background-size: contain;
  background-position: right 40px bottom -40px;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* Value Culture section: 1800px以上で left を固定（メインコンテナからはみ出さないように） */

@media (min-width: 1800px) {
  .value-culture-section::after {
    left: 480px !important;
  }
}

/* Value Culture section: move image more to the right at 2000px+ without changing <2000px */

@media (min-width: 2000px) {
  .value-culture-section::after {
    left: 670px !important;
  }
}

/* 1024〜1439pxでは Value-Culture 擬似要素画像を少し小さく＆セクション下部の右側に配置 */

@media (min-width: 1024px) and (max-width: 1439px) {
  .value-culture-section::after {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    --value-img-width: clamp(750px, 55vw, 1000px);
    width: var(--value-img-width);
    height: calc(var(--value-img-width) * 0.719);
  }
}

.value-culture-section .inner {
  position: relative;
  z-index: 1;
}

/* =========================================================
   フッター: 基本スタイル
   対象: 全ページ共通
   用途: フッターの基本パディングとスタイル
   ========================================================= */

.site-footer {
  padding-top: 5rem;
  padding-bottom: 40px;
}

.site-footer-logo-text {
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: right;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 1441px) {
  .interview-section .site-footer-logo-text {
    font-size: clamp(
      12px,
      calc(12px + 2 * (100vw - 1440px) / 480),
      14px
    );
  }

  .ai-native-section h4.site-footer-logo-text {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    );
  }
}

@media (max-width: 1440px) {
  .footer-copyright .site-footer-logo-text {
    font-size: 12px;
  }
}

@media (min-width: 1441px) {
  .footer-copyright .site-footer-logo-text {
    font-size: clamp(
      12px,
      calc(12px + 2 * (100vw - 1441px) / 479),
      14px
    );
  }
}

@media (max-width: 330px) {
  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.site-footer-logo-text.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.site-footer-logo-text.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
  }

  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.site-footer-logo-text
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page.font-en
    #hero-section
    div.absolute.hero-heading
    h1.hero-main-heading.site-footer-logo-text
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    div.hero-heading
    h1.hero-main-heading.site-footer-logo-text
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.site-footer-logo-text
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.site-footer-logo-text
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
  }
}

@media (min-width: 1440px) {
  .index-page
    #hero-section
    > div.absolute.bottom-12.right-4.md\:right-10.z-10.site-footer-logo-text {
    bottom: 100px;
  }

  #hero-section > div.absolute.bottom-12.right-4.md\:right-10.z-10.site-footer-logo-text {
    bottom: 24px;
  }

  .interview-section .site-footer-logo-text {
    font-size: clamp(
      12px,
      calc(12px + 2 * (100vw - 1440px) / 480),
      14px
    );
  }

  @media (min-width: 1441px) {
    .c-benefit-card p.site-footer-logo-text {
      font-size: clamp(
        12px,
        calc(12px + 2 * (100vw - 1440px) / 480),
        14px
      );
      line-height: clamp(
        1.5,
        calc(1.5 + 0.1 * (100vw - 1440px) / 480),
        1.6
      );
    }
  }

  
  .ai-native-section .tech-blog-card .site-footer-logo-text {
    font-size: clamp(
      12px,
      calc(12px + 2 * (100vw - 1441px) / 479),
      14px
    );
  }
}

@media (max-width: 1440px) {
  .footer-copyright .site-footer-logo-text {
    font-size: 12px;
  }
}

@media (min-width: 1441px) {
  .footer-copyright .site-footer-logo-text {
    font-size: clamp(
      12px,
      calc(12px + 2 * (100vw - 1441px) / 479),
      14px
    );
  }
}

@media (max-width: 1024px) {
  .product-page
    #interview-section
    .interview-card-content
    .site-footer-logo-text.text-gray-400,
  .product-page
    .interview-section
    .interview-card-content
    .site-footer-logo-text.text-gray-400,
  .product-page #interview-section .interview-card-content p.site-footer-logo-text,
  .product-page .interview-section .interview-card-content p.site-footer-logo-text {
    font-family: "Noto Sans JP", sans-serif;
  }

  .business-page
    #interview-section
    .interview-card-content
    .site-footer-logo-text.text-gray-400,
  .business-page
    .interview-section
    .interview-card-content
    .site-footer-logo-text.text-gray-400,
  .business-page #interview-section .interview-card-content p.site-footer-logo-text,
  .business-page .interview-section .interview-card-content p.site-footer-logo-text {
    font-family: "Noto Sans JP", sans-serif;
  }

  .corporate-page
    #interview-section
    .interview-card-content
    .site-footer-logo-text.text-gray-400,
  .corporate-page
    .interview-section
    .interview-card-content
    .site-footer-logo-text.text-gray-400,
  .corporate-page #interview-section .interview-card-content p.site-footer-logo-text,
  .corporate-page .interview-section .interview-card-content p.site-footer-logo-text {
    font-family: "Noto Sans JP", sans-serif;
  }
}

@media (max-width: 330px) {
  
  main.index-page
    #hero-section
    div.hero-heading.site-footer-logo-text
    h1.hero-main-heading.text-white
    span[class*="max-[375px]:block"][class*="text-58"] {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }

  
  main.index-page
    #hero-section
    div.hero-heading.text-right
    h1.hero-main-heading.site-footer-logo-text
    span[class*="max-[375px]:block"][class*="text-58"] {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }

  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.site-footer-logo-text.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.site-footer-logo-text.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }

  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.site-footer-logo-text
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page.font-en
    #hero-section
    div.absolute.hero-heading
    h1.hero-main-heading.site-footer-logo-text
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    div.hero-heading
    h1.hero-main-heading.site-footer-logo-text
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.site-footer-logo-text
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.site-footer-logo-text
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .site-footer-logo-text.lg\:mt-107 {
    margin-top: 107px;
  }
}

.site-footer-menu-title {
  margin-bottom: 16px;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 1441px) {
  .ai-native-section h4.site-footer-menu-title {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    );
  }

  .member-more-link span.site-footer-menu-title {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    );
  }
}

@media (max-width: 330px) {
  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.site-footer-menu-title
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page.font-en
    #hero-section
    div.absolute.hero-heading
    h1.hero-main-heading.site-footer-menu-title
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    div.hero-heading
    h1.hero-main-heading.site-footer-menu-title
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.site-footer-menu-title
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.site-footer-menu-title
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
  }
}

@media (min-width: 1441px) {
  .member-more-link span.site-footer-menu-title {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    );
  }
}

@media (max-width: 330px) {
  
  main.index-page
    #hero-section
    div.hero-heading.text-right
    h1.hero-main-heading.site-footer-menu-title
    span[class*="max-[375px]:block"][class*="text-58"] {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }

  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.site-footer-menu-title
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page.font-en
    #hero-section
    div.absolute.hero-heading
    h1.hero-main-heading.site-footer-menu-title
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    div.hero-heading
    h1.hero-main-heading.site-footer-menu-title
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.site-footer-menu-title
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.site-footer-menu-title
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }
}

.site-footer-menu-link {
  font-size: 14px;
  font-weight: 500;
  text-decoration-line: none;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  color: var(--color-text-link);
}

.site-footer-menu-link:hover {
  opacity: 0.8;
}

.site-footer-menu-link-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 1441px) {
  .ai-native-section h4.site-footer-menu-link-white {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    );
  }
}

@media (max-width: 330px) {
  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.site-footer-menu-link-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page.font-en
    #hero-section
    div.absolute.hero-heading
    h1.hero-main-heading.site-footer-menu-link-white
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    div.hero-heading
    h1.hero-main-heading.site-footer-menu-link-white
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.site-footer-menu-link-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.site-footer-menu-link-white
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
  }

  
  main.index-page
    #hero-section
    div.hero-heading.text-right
    h1.hero-main-heading.site-footer-menu-link-white
    span[class*="max-[375px]:block"][class*="text-58"] {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }

  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.site-footer-menu-link-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page.font-en
    #hero-section
    div.absolute.hero-heading
    h1.hero-main-heading.site-footer-menu-link-white
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    div.hero-heading
    h1.hero-main-heading.site-footer-menu-link-white
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.site-footer-menu-link-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.site-footer-menu-link-white
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }
}

.site-footer-separator {
  border-color: var(--color-border-separator);
}

@media (min-width: 1440px) {
  .site-footer-social-link.message-block {
    gap: 47px;
  }

  #product-section .site-footer-social-link.flex-col.gap-4.xl\:gap-fluid-8 {
    gap: 16px;
  }

  #value-culture-section .site-footer-social-link.flex-col.gap-4.md\:gap-4.xl\:gap-fluid-4 {
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  /* AI Native circles: shrink inner image on tablet/mobile */

  /* AI Native circles: tighten gap on tablet/mobile */

  /* AI Native section: reduce vertical gap on tablet/mobile */

  .ai-native-section.site-footer-social-link.flex-col.gap-\[220px\] {
    gap: 120px;
  }
}

@media (max-width: 767px) {
  #evaluation .grade-structure-block > .site-footer-social-link.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
}

.site-footer-social-link {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

#site-header .desktop-nav-override > div.site-footer-social-link.items-center.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

#site-header .desktop-nav-override > div.flex.site-footer-social-link.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

@media (min-width: 1441px) {
  .ai-native-section h4.site-footer-social-link {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    );
  }
}

@media (max-width: 330px) {
  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.site-footer-social-link
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page.font-en
    #hero-section
    div.absolute.hero-heading
    h1.hero-main-heading.site-footer-social-link
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    div.hero-heading
    h1.hero-main-heading.site-footer-social-link
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.site-footer-social-link
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.site-footer-social-link
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
  }
}

@media (max-width: 1439px) {
  .ai-native-section
    .c-inner-container
    > .site-footer-social-link.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 100px;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  .work-section .work-card-content .site-footer-social-link.flex-col.gap-2\.75,
  .work-section .work-card-content .site-footer-social-link.flex-col.gap-2 {
    gap: 8px;
  }
}

@media (min-width: 1441px) {
  .work-section .work-card-content .site-footer-social-link.flex-col.gap-2\.75,
  .work-section .work-card-content .site-footer-social-link.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .interview-section .interview-card-content .site-footer-social-link.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }

  @media (min-width: 1441px) {
    .message-section .site-footer-social-link.flex-col.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480);
    }
  }
}

@media (max-width: 1439px) {
  #site-header .desktop-nav-override > div.site-footer-social-link.items-center.gap-8 {
    gap: 24px;
  }

  #site-header .desktop-nav-override > div.flex.site-footer-social-link.gap-8 {
    gap: 24px;
  }
}

@media (max-width: 599px) {
  .index-page #recruit-section .site-footer-social-link.flex-col.gap-fluid-8 {
    gap: 60px;
  }

  .index-page #recruit-section .site-footer-social-link.flex-col.gap-fluid-4 {
    gap: 12px;
  }
}

@media (max-width: 330px) {
  
  main.index-page
    #hero-section
    div.hero-heading.text-right
    h1.hero-main-heading.site-footer-social-link
    span[class*="max-[375px]:block"][class*="text-58"] {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }

  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.site-footer-social-link
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page.font-en
    #hero-section
    div.absolute.hero-heading
    h1.hero-main-heading.site-footer-social-link
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    div.hero-heading
    h1.hero-main-heading.site-footer-social-link
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.site-footer-social-link
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.site-footer-social-link
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }
}

@media (max-width: 1440px) {
  .interview-section
    .site-footer-social-link.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .interview-section
    .site-footer-social-link.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }
}

@media (max-width: 1440px) {
  .work-section
    .site-footer-social-link.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .site-footer-social-link.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .work-section
    .site-footer-social-link.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .work-section
    .site-footer-social-link.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .work-section
    .site-footer-social-link.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 1440px) {
  .member-section
    .site-footer-social-link.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .member-section
    .site-footer-social-link.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .member-section
    .site-footer-social-link.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 767px) {
  #environment-section .grade-structure-block > .site-footer-social-link.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .ai-native-section
    .c-inner-container
    > .site-footer-social-link.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 80px;
  }
}

.site-footer-social-link:hover {
  opacity: 0.8;
}

.c-footer-grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 1441px) {
  #benefits .c-footer-grid h5 {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1440px) / 480),
      20px
    );
  }

  #numbers .c-footer-grid h4 {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1440px) / 480),
      20px
    );
  }
}

@media (min-width: 1440px) {
  #benefits .c-footer-grid h5 {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1440px) / 480),
      20px
    );
    line-height: clamp(
      2,
      calc(2 + 0.2 * (100vw - 1440px) / 480),
      2.2
    );
  }

  #numbers .c-footer-grid h4 {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1440px) / 480),
      20px
    );
    line-height: clamp(
      2,
      calc(2 + 0.2 * (100vw - 1440px) / 480),
      2.2
    );
  }

  @media (max-width: 1440px) {
    #benefits .c-footer-grid h5 {
      font-size: 16px;
      line-height: 2;
    }
  }
}

@media (min-width: 1441px) {
  @media (min-width: 1441px) {
    .message-section .c-footer-grid.grid-cols-1.md\:grid-cols-2.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480);
    }
  }

  @media (max-width: 767px) {
    #message-section .c-inner-container .gap-fluid-120 > .c-footer-grid.grid-cols-1,
    .message-section .c-inner-container .gap-fluid-120 > .c-footer-grid {
      gap: 40px;
    }
  }
}

@media (max-width: 1440px) {
  .site-footer .c-footer-grid {
    gap: 40px;
  }
}

@media (min-width: 1441px) {
  .site-footer .c-footer-grid {
    gap: clamp(40px, calc(40px + 10 * (100vw - 1441px) / 479), 50px);
  }
}

@media (max-width: 1024px) {
  .message-section .c-footer-grid a {
    transition: opacity 0.3s ease;
  }

  .message-section .c-footer-grid a:hover {
    opacity: 0.8;
  }
}

.c-footer-grid {
  grid-template-columns: repeat(4, max-content);
}

/* =========================================================
   ボタン: 基本スタイル
   対象: 全ページ共通
   用途: 各種ボタンの基本スタイル定義
   ========================================================= */

.btn {
  display: inline-flex;
  height: 45px;
  width: 200px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-width: 0px;
  padding-left: 24px;
  padding-right: 24px;
  font-size: 16px;
  font-weight: 500;
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

#site-header .desktop-nav-override > div.flex.btn.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

@media (min-width: 1440px) and (max-width: 1440px) {
  
  .work-section .work-card-content .flex.flex-col.btn {
    gap: 8px;
  }
}

@media (min-width: 1441px) {
  
  .work-section .work-card-content .flex.flex-col.btn {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .interview-section .interview-card-content .flex.flex-col.btn {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }
}

@media (max-width: 1439px) {
  #site-header .desktop-nav-override > div.flex.btn.gap-8 {
    gap: 24px;
  }
}

.btn:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.btn-primary {
  border-radius: 60px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (max-width: 767px) {
  
  #site-header.is-scrolled.btn-primary {
    background-color: transparent;
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
  }
}

.btn-primary:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1));
}

.btn-primary:hover {
  background-color: var(--color-bg-hover);
}

.btn-secondary {
  border-radius: 9999px 8px 8px 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 1441px) {
  .ai-native-section h4.btn-secondary {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    );
  }
}

@media (max-width: 330px) {
  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.btn-secondary
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page.font-en
    #hero-section
    div.absolute.hero-heading
    h1.hero-main-heading.btn-secondary
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    div.hero-heading
    h1.hero-main-heading.btn-secondary
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.btn-secondary
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.btn-secondary
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
  }

  
  main.index-page
    #hero-section
    div.hero-heading.text-right
    h1.hero-main-heading.btn-secondary
    span[class*="max-[375px]:block"][class*="text-58"] {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }

  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.btn-secondary
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page.font-en
    #hero-section
    div.absolute.hero-heading
    h1.hero-main-heading.btn-secondary
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    div.hero-heading
    h1.hero-main-heading.btn-secondary
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.btn-secondary
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.btn-secondary
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }
}

.btn-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.btn-secondary:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1));
}

.btn-outline {
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 1441px) {
  .ai-native-section h4.btn-outline {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    );
  }
}

@media (max-width: 330px) {
  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.btn-outline
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page.font-en
    #hero-section
    div.absolute.hero-heading
    h1.hero-main-heading.btn-outline
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    div.hero-heading
    h1.hero-main-heading.btn-outline
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.btn-outline
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.btn-outline
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
  }

  
  main.index-page
    #hero-section
    div.hero-heading.text-right
    h1.hero-main-heading.btn-outline
    span[class*="max-[375px]:block"][class*="text-58"] {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }

  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.btn-outline
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page.font-en
    #hero-section
    div.absolute.hero-heading
    h1.hero-main-heading.btn-outline
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    div.hero-heading
    h1.hero-main-heading.btn-outline
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.btn-outline
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.btn-outline
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }
}

.btn-outline:hover {
  opacity: 0.8;
}

.btn-outline:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.btn-outline-dark {
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.btn-outline-dark:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.btn-outline-dark:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1));
}

.btn-sm {
  height: 2.25rem;
  width: auto;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 14px;
}

.btn-md {
  height: 45px;
  width: auto;
  padding-left: 24px;
  padding-right: 24px;
  font-size: 16px;
}

.btn-lg {
  height: 52px;
  width: auto;
  padding-left: 32px;
  padding-right: 32px;
  font-size: 18px;
}

.btn-white {
  display: inline-flex;
  height: 45px;
  width: 200px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 60px;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 24px;
  padding-right: 24px;
  font-size: 16px;
  font-weight: 700;
  text-decoration-line: none;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

#site-header .desktop-nav-override > div.flex.btn-white.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

@media (max-width: 330px) {
  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.btn-white.leading-1\.3,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.btn-white.leading-1\.3 {
    font-size: 40px;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  
  .work-section .work-card-content .flex.flex-col.btn-white {
    gap: 8px;
  }
}

@media (min-width: 1441px) {
  
  .work-section .work-card-content .flex.flex-col.btn-white {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .interview-section .interview-card-content .flex.flex-col.btn-white {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }
}

@media (max-width: 1439px) {
  #site-header .desktop-nav-override > div.flex.btn-white.gap-8 {
    gap: 24px;
  }
}

@media (max-width: 767px) {
  
  #site-header.is-scrolled.btn-white {
    background-color: transparent;
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
  }
}

@media (max-width: 330px) {
  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.btn-white.leading-1\.3,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.btn-white.leading-1\.3 {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }
}

.btn-white {
  color: var(--color-text-primary);
}

.btn-white:hover {
  background-color: var(--color-bg-hover);
}

/* Recruit section: button slide effect (右から左へのスライド) */

.recruit-section .btn-white {
  background: #fff;
  color: var(--color-text-primary);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transition: color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

/* ブランドカラー背景のスライドアニメーション（右から左） */

.recruit-section .btn-white::before {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  content: "";
  background: var(--color-brand);
  border-radius: 60px;
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.recruit-section .btn-white:hover::before {
  left: 0%;
  right: auto;
  width: 100%;
}

.recruit-section .btn-white:hover {
  color: var(--color-text-inverse) !important;
}

/* SVGを前面に配置 */

.recruit-section .btn-white svg {
  position: relative;
  z-index: 1;
  transition: stroke 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
    transform 0.3s ease;
}

.recruit-section .btn-white:hover svg {
  transform: translateX(5px);
}

.recruit-section .btn-white:hover svg path {
  stroke: var(--color-text-inverse);
}

@media (min-width: 1440px) {
  .btn-white {
    width: calc(200px + 50 * (100vw - 1440px) / 480) !important;
    height: calc(45px + 10 * (100vw - 1440px) / 480) !important;
    font-size: calc(16px + 4 * (100vw - 1440px) / 480) !important;
  }
}

.btn-outline-white {
  display: inline-flex;
  height: 45px;
  width: 200px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  background-color: transparent;
  padding-left: 24px;
  padding-right: 24px;
  font-size: 16px;
  font-weight: 700;
  text-decoration-line: none;
}

#site-header .desktop-nav-override > div.flex.btn-outline-white.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

@media (max-width: 330px) {
  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.btn-outline-white.leading-1\.3,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.btn-outline-white.leading-1\.3 {
    font-size: 40px;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  
  .work-section .work-card-content .flex.flex-col.btn-outline-white {
    gap: 8px;
  }
}

@media (min-width: 1441px) {
  
  .work-section .work-card-content .flex.flex-col.btn-outline-white {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .interview-section .interview-card-content .flex.flex-col.btn-outline-white {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }
}

@media (max-width: 1439px) {
  #site-header .desktop-nav-override > div.flex.btn-outline-white.gap-8 {
    gap: 24px;
  }
}

@media (max-width: 330px) {
  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.btn-outline-white.leading-1\.3,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.btn-outline-white.leading-1\.3 {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }
}

.btn-outline-white {
  position: relative;
  overflow: hidden;
  color: var(--color-text-inverse);
  transition: color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  isolation: isolate;
}

/* 白い背景のスライドアニメーション（右から左） */

.btn-outline-white:before {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  content: "";
  background: var(--color-text-inverse);
  border-radius: 100px;
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.btn-outline-white:hover:before {
  left: 0%;
  right: auto;
  width: 100%;
}

/* ホバー時のテキストとSVGの色を黒に */

.btn-outline-white:hover {
  color: var(--color-text-primary) !important;
}

/* SVGを前面に配置 */

.btn-outline-white svg {
  position: relative;
  z-index: 1;
  transition: stroke 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
    transform 0.3s ease;
}

.btn-outline-white:hover svg {
  transform: translateX(5px);
}

.btn-outline-white:hover svg path {
  stroke: var(--color-text-primary);
}

/* =========================================================
   矢印: 基本スタイル
   対象: 全ページ共通
   用途: 矢印アイコン・ボタンの基本スタイル
   ========================================================= */

.arrow {
  display: inline-block;
  flex-shrink: 0;
}

.arrow img {
  display: block;
}

.arrow-sm {
  height: 0.5rem;
  width: 0.5rem;
}

.arrow-sm img {
  height: 0.5rem;
  width: 0.5rem;
}

.arrow-md {
  height: 0.625rem;
  width: 0.625rem;
}

.arrow-md img {
  height: 0.625rem;
  width: 0.625rem;
}

.arrow-lg {
  height: 14px;
  width: 14px;
}

.arrow-lg img {
  height: 14px;
  width: 14px;
}

.arrow-right img {
  transform: rotate(0deg);
}

.arrow-down img {
  transform: rotate(90deg);
}

.arrow-up img {
  transform: rotate(-90deg);
}

.arrow-left img {
  transform: rotate(180deg);
}

.arrow-external img {
  transform: rotate(-45deg);
}

@media (min-width: 1440px) {
  .arrow-button.message-block {
    gap: 47px;
  }

  #product-section .arrow-button.flex-col.gap-4.xl\:gap-fluid-8 {
    gap: 16px;
  }

  #value-culture-section .arrow-button.flex-col.gap-4.md\:gap-4.xl\:gap-fluid-4 {
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  /* AI Native circles: shrink inner image on tablet/mobile */

  /* AI Native circles: tighten gap on tablet/mobile */

  /* AI Native section: reduce vertical gap on tablet/mobile */

  .ai-native-section.arrow-button.flex-col.gap-\[220px\] {
    gap: 120px;
  }
}

@media (max-width: 767px) {
  #evaluation .grade-structure-block > .arrow-button.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
}

.arrow-button {
  display: flex;
  height: 22px;
  width: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 60px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

#site-header .desktop-nav-override > div.arrow-button.items-center.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

#site-header .desktop-nav-override > div.flex.arrow-button.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

@media (max-width: 1439px) {
  .ai-native-section
    .c-inner-container
    > .arrow-button.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 100px;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  .work-section .work-card-content .arrow-button.flex-col.gap-2\.75,
  .work-section .work-card-content .arrow-button.flex-col.gap-2 {
    gap: 8px;
  }
}

@media (min-width: 1441px) {
  .work-section .work-card-content .arrow-button.flex-col.gap-2\.75,
  .work-section .work-card-content .arrow-button.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .interview-section .interview-card-content .arrow-button.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }

  @media (min-width: 1441px) {
    .message-section .arrow-button.flex-col.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480);
    }
  }
}

@media (max-width: 1439px) {
  #site-header .desktop-nav-override > div.arrow-button.items-center.gap-8 {
    gap: 24px;
  }

  #site-header .desktop-nav-override > div.flex.arrow-button.gap-8 {
    gap: 24px;
  }
}

@media (max-width: 767px) {
  
  #site-header.is-scrolled.arrow-button {
    background-color: transparent;
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
  }
}

@media (max-width: 599px) {
  .index-page #recruit-section .arrow-button.flex-col.gap-fluid-8 {
    gap: 60px;
  }

  .index-page #recruit-section .arrow-button.flex-col.gap-fluid-4 {
    gap: 12px;
  }
}

@media (max-width: 1440px) {
  .interview-section
    .arrow-button.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .interview-section
    .arrow-button.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }
}

@media (max-width: 1440px) {
  .work-section
    .arrow-button.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .arrow-button.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .work-section
    .arrow-button.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .work-section
    .arrow-button.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .work-section
    .arrow-button.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 1440px) {
  .member-section
    .arrow-button.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .member-section
    .arrow-button.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .member-section
    .arrow-button.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 767px) {
  #environment-section .grade-structure-block > .arrow-button.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .ai-native-section
    .c-inner-container
    > .arrow-button.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 80px;
  }
}

.arrow-button {
  border: 1px solid var(--color-text-primary);
}

@media (min-width: 1440px) {
  .arrow-link.message-block {
    gap: 47px;
  }

  #product-section .arrow-link.flex-col.gap-4.xl\:gap-fluid-8 {
    gap: 16px;
  }

  #value-culture-section .arrow-link.flex-col.gap-4.md\:gap-4.xl\:gap-fluid-4 {
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  /* AI Native circles: shrink inner image on tablet/mobile */

  /* AI Native circles: tighten gap on tablet/mobile */

  /* AI Native section: reduce vertical gap on tablet/mobile */

  .ai-native-section.arrow-link.flex-col.gap-\[220px\] {
    gap: 120px;
  }
}

@media (max-width: 767px) {
  #evaluation .grade-structure-block > .arrow-link.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
}

.arrow-link {
  display: flex;
  align-items: center;
  gap: 5px;
}

#site-header .desktop-nav-override > div.arrow-link.items-center.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

#site-header .desktop-nav-override > div.flex.arrow-link.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

@media (max-width: 1439px) {
  .ai-native-section
    .c-inner-container
    > .arrow-link.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 100px;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  .work-section .work-card-content .arrow-link.flex-col.gap-2\.75,
  .work-section .work-card-content .arrow-link.flex-col.gap-2 {
    gap: 8px;
  }
}

@media (min-width: 1441px) {
  .work-section .work-card-content .arrow-link.flex-col.gap-2\.75,
  .work-section .work-card-content .arrow-link.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .interview-section .interview-card-content .arrow-link.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }

  @media (min-width: 1441px) {
    .message-section .arrow-link.flex-col.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480);
    }
  }
}

@media (max-width: 1439px) {
  #site-header .desktop-nav-override > div.arrow-link.items-center.gap-8 {
    gap: 24px;
  }

  #site-header .desktop-nav-override > div.flex.arrow-link.gap-8 {
    gap: 24px;
  }
}

@media (max-width: 599px) {
  .index-page #recruit-section .arrow-link.flex-col.gap-fluid-8 {
    gap: 60px;
  }

  .index-page #recruit-section .arrow-link.flex-col.gap-fluid-4 {
    gap: 12px;
  }
}

@media (max-width: 1440px) {
  .interview-section
    .arrow-link.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .interview-section
    .arrow-link.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }
}

@media (max-width: 1440px) {
  .work-section
    .arrow-link.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .arrow-link.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .work-section
    .arrow-link.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .work-section
    .arrow-link.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .work-section
    .arrow-link.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 1440px) {
  .member-section
    .arrow-link.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .member-section
    .arrow-link.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .member-section
    .arrow-link.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 767px) {
  #environment-section .grade-structure-block > .arrow-link.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .ai-native-section
    .c-inner-container
    > .arrow-link.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 80px;
  }
}

@media (min-width: 1440px) {
  .arrow-button-dark.message-block {
    gap: 47px;
  }

  #product-section .arrow-button-dark.flex-col.gap-4.xl\:gap-fluid-8 {
    gap: 16px;
  }

  #value-culture-section .arrow-button-dark.flex-col.gap-4.md\:gap-4.xl\:gap-fluid-4 {
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  /* AI Native circles: shrink inner image on tablet/mobile */

  /* AI Native circles: tighten gap on tablet/mobile */

  /* AI Native section: reduce vertical gap on tablet/mobile */

  .ai-native-section.arrow-button-dark.flex-col.gap-\[220px\] {
    gap: 120px;
  }
}

@media (max-width: 767px) {
  #evaluation .grade-structure-block > .arrow-button-dark.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
}

.arrow-button-dark {
  display: flex;
  height: 12px;
  width: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 60px;
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

#site-header .desktop-nav-override > div.arrow-button-dark.items-center.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

#site-header .desktop-nav-override > div.flex.arrow-button-dark.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

@media (max-width: 1439px) {
  .ai-native-section
    .c-inner-container
    > .arrow-button-dark.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 100px;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  .work-section .work-card-content .arrow-button-dark.flex-col.gap-2\.75,
  .work-section .work-card-content .arrow-button-dark.flex-col.gap-2 {
    gap: 8px;
  }
}

@media (min-width: 1441px) {
  .work-section .work-card-content .arrow-button-dark.flex-col.gap-2\.75,
  .work-section .work-card-content .arrow-button-dark.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .interview-section .interview-card-content .arrow-button-dark.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }

  @media (min-width: 1441px) {
    .message-section .arrow-button-dark.flex-col.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480);
    }
  }
}

@media (max-width: 1439px) {
  #site-header .desktop-nav-override > div.arrow-button-dark.items-center.gap-8 {
    gap: 24px;
  }

  #site-header .desktop-nav-override > div.flex.arrow-button-dark.gap-8 {
    gap: 24px;
  }
}

@media (max-width: 599px) {
  .index-page #recruit-section .arrow-button-dark.flex-col.gap-fluid-8 {
    gap: 60px;
  }

  .index-page #recruit-section .arrow-button-dark.flex-col.gap-fluid-4 {
    gap: 12px;
  }
}

@media (max-width: 1440px) {
  .interview-section
    .arrow-button-dark.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .interview-section
    .arrow-button-dark.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }
}

@media (max-width: 1440px) {
  .work-section
    .arrow-button-dark.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .arrow-button-dark.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .work-section
    .arrow-button-dark.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .work-section
    .arrow-button-dark.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .work-section
    .arrow-button-dark.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 1440px) {
  .member-section
    .arrow-button-dark.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .member-section
    .arrow-button-dark.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .member-section
    .arrow-button-dark.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 767px) {
  #environment-section .grade-structure-block > .arrow-button-dark.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .ai-native-section
    .c-inner-container
    > .arrow-button-dark.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 80px;
  }
}

@media (min-width: 1440px) {
  .arrow-button-dark-lg.message-block {
    gap: 47px;
  }

  #product-section .arrow-button-dark-lg.flex-col.gap-4.xl\:gap-fluid-8 {
    gap: 16px;
  }

  #value-culture-section .arrow-button-dark-lg.flex-col.gap-4.md\:gap-4.xl\:gap-fluid-4 {
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  /* AI Native circles: shrink inner image on tablet/mobile */

  /* AI Native circles: tighten gap on tablet/mobile */

  /* AI Native section: reduce vertical gap on tablet/mobile */

  .ai-native-section.arrow-button-dark-lg.flex-col.gap-\[220px\] {
    gap: 120px;
  }
}

@media (max-width: 767px) {
  #evaluation .grade-structure-block > .arrow-button-dark-lg.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
}

.arrow-button-dark-lg {
  display: flex;
  height: 38px;
  width: 62px;
  align-items: center;
  justify-content: center;
  border-radius: 60px;
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

#site-header .desktop-nav-override > div.arrow-button-dark-lg.items-center.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

#site-header .desktop-nav-override > div.flex.arrow-button-dark-lg.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

@media (max-width: 1439px) {
  .ai-native-section
    .c-inner-container
    > .arrow-button-dark-lg.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 100px;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  .work-section .work-card-content .arrow-button-dark-lg.flex-col.gap-2\.75,
  .work-section .work-card-content .arrow-button-dark-lg.flex-col.gap-2 {
    gap: 8px;
  }
}

@media (min-width: 1441px) {
  .work-section .work-card-content .arrow-button-dark-lg.flex-col.gap-2\.75,
  .work-section .work-card-content .arrow-button-dark-lg.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .interview-section .interview-card-content .arrow-button-dark-lg.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }

  @media (min-width: 1441px) {
    .message-section .arrow-button-dark-lg.flex-col.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480);
    }
  }
}

@media (max-width: 1439px) {
  #site-header .desktop-nav-override > div.arrow-button-dark-lg.items-center.gap-8 {
    gap: 24px;
  }

  #site-header .desktop-nav-override > div.flex.arrow-button-dark-lg.gap-8 {
    gap: 24px;
  }
}

@media (max-width: 599px) {
  .index-page #recruit-section .arrow-button-dark-lg.flex-col.gap-fluid-8 {
    gap: 60px;
  }

  .index-page #recruit-section .arrow-button-dark-lg.flex-col.gap-fluid-4 {
    gap: 12px;
  }
}

@media (max-width: 1440px) {
  .interview-section
    .arrow-button-dark-lg.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .interview-section
    .arrow-button-dark-lg.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }
}

@media (max-width: 1440px) {
  .work-section
    .arrow-button-dark-lg.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .arrow-button-dark-lg.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .work-section
    .arrow-button-dark-lg.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .work-section
    .arrow-button-dark-lg.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .work-section
    .arrow-button-dark-lg.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 1440px) {
  .member-section
    .arrow-button-dark-lg.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .member-section
    .arrow-button-dark-lg.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .member-section
    .arrow-button-dark-lg.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 767px) {
  #environment-section .grade-structure-block > .arrow-button-dark-lg.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .ai-native-section
    .c-inner-container
    > .arrow-button-dark-lg.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 80px;
  }
}

@media (min-width: 1440px) {
  .arrow-button-light-lg.message-block {
    gap: 47px;
  }

  #product-section .arrow-button-light-lg.flex-col.gap-4.xl\:gap-fluid-8 {
    gap: 16px;
  }

  #value-culture-section .arrow-button-light-lg.flex-col.gap-4.md\:gap-4.xl\:gap-fluid-4 {
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  /* AI Native circles: shrink inner image on tablet/mobile */

  /* AI Native circles: tighten gap on tablet/mobile */

  /* AI Native section: reduce vertical gap on tablet/mobile */

  .ai-native-section.arrow-button-light-lg.flex-col.gap-\[220px\] {
    gap: 120px;
  }
}

@media (max-width: 767px) {
  #evaluation .grade-structure-block > .arrow-button-light-lg.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
}

.arrow-button-light-lg {
  display: flex;
  height: 38px;
  width: 62px;
  align-items: center;
  justify-content: center;
  border-radius: 60px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

#site-header .desktop-nav-override > div.arrow-button-light-lg.items-center.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

#site-header .desktop-nav-override > div.flex.arrow-button-light-lg.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

@media (max-width: 1439px) {
  .ai-native-section
    .c-inner-container
    > .arrow-button-light-lg.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 100px;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  .work-section .work-card-content .arrow-button-light-lg.flex-col.gap-2\.75,
  .work-section .work-card-content .arrow-button-light-lg.flex-col.gap-2 {
    gap: 8px;
  }
}

@media (min-width: 1441px) {
  .work-section .work-card-content .arrow-button-light-lg.flex-col.gap-2\.75,
  .work-section .work-card-content .arrow-button-light-lg.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .interview-section .interview-card-content .arrow-button-light-lg.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }

  @media (min-width: 1441px) {
    .message-section .arrow-button-light-lg.flex-col.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480);
    }
  }
}

@media (max-width: 1439px) {
  #site-header .desktop-nav-override > div.arrow-button-light-lg.items-center.gap-8 {
    gap: 24px;
  }

  #site-header .desktop-nav-override > div.flex.arrow-button-light-lg.gap-8 {
    gap: 24px;
  }
}

@media (max-width: 767px) {
  
  #site-header.is-scrolled.arrow-button-light-lg {
    background-color: transparent;
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
  }
}

@media (max-width: 599px) {
  .index-page #recruit-section .arrow-button-light-lg.flex-col.gap-fluid-8 {
    gap: 60px;
  }

  .index-page #recruit-section .arrow-button-light-lg.flex-col.gap-fluid-4 {
    gap: 12px;
  }
}

@media (max-width: 1440px) {
  .interview-section
    .arrow-button-light-lg.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .interview-section
    .arrow-button-light-lg.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }
}

@media (max-width: 1440px) {
  .work-section
    .arrow-button-light-lg.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .arrow-button-light-lg.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .work-section
    .arrow-button-light-lg.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .work-section
    .arrow-button-light-lg.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .work-section
    .arrow-button-light-lg.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 1440px) {
  .member-section
    .arrow-button-light-lg.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .member-section
    .arrow-button-light-lg.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .member-section
    .arrow-button-light-lg.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 767px) {
  #environment-section .grade-structure-block > .arrow-button-light-lg.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .ai-native-section
    .c-inner-container
    > .arrow-button-light-lg.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 80px;
  }
}

@media (min-width: 1440px) {
  .arrow-button-light-lg-arrow2.message-block {
    gap: 47px;
  }

  #product-section .arrow-button-light-lg-arrow2.flex-col.gap-4.xl\:gap-fluid-8 {
    gap: 16px;
  }

  #value-culture-section .arrow-button-light-lg-arrow2.flex-col.gap-4.md\:gap-4.xl\:gap-fluid-4 {
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  /* AI Native circles: shrink inner image on tablet/mobile */

  /* AI Native circles: tighten gap on tablet/mobile */

  /* AI Native section: reduce vertical gap on tablet/mobile */

  .ai-native-section.arrow-button-light-lg-arrow2.flex-col.gap-\[220px\] {
    gap: 120px;
  }
}

@media (max-width: 767px) {
  #evaluation .grade-structure-block > .arrow-button-light-lg-arrow2.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
}

.arrow-button-light-lg-arrow2 {
  display: flex;
  height: 38px;
  width: 62px;
  align-items: center;
  justify-content: center;
  border-radius: 60px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

#site-header .desktop-nav-override > div.arrow-button-light-lg-arrow2.items-center.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

#site-header .desktop-nav-override > div.flex.arrow-button-light-lg-arrow2.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

@media (max-width: 1439px) {
  .ai-native-section
    .c-inner-container
    > .arrow-button-light-lg-arrow2.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 100px;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  .work-section .work-card-content .arrow-button-light-lg-arrow2.flex-col.gap-2\.75,
  .work-section .work-card-content .arrow-button-light-lg-arrow2.flex-col.gap-2 {
    gap: 8px;
  }
}

@media (min-width: 1441px) {
  .work-section .work-card-content .arrow-button-light-lg-arrow2.flex-col.gap-2\.75,
  .work-section .work-card-content .arrow-button-light-lg-arrow2.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .interview-section .interview-card-content .arrow-button-light-lg-arrow2.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }

  @media (min-width: 1441px) {
    .message-section .arrow-button-light-lg-arrow2.flex-col.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480);
    }
  }
}

@media (max-width: 1439px) {
  #site-header .desktop-nav-override > div.arrow-button-light-lg-arrow2.items-center.gap-8 {
    gap: 24px;
  }

  #site-header .desktop-nav-override > div.flex.arrow-button-light-lg-arrow2.gap-8 {
    gap: 24px;
  }
}

@media (max-width: 767px) {
  
  #site-header.is-scrolled.arrow-button-light-lg-arrow2 {
    background-color: transparent;
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
  }
}

@media (max-width: 599px) {
  .index-page #recruit-section .arrow-button-light-lg-arrow2.flex-col.gap-fluid-8 {
    gap: 60px;
  }

  .index-page #recruit-section .arrow-button-light-lg-arrow2.flex-col.gap-fluid-4 {
    gap: 12px;
  }
}

@media (max-width: 1440px) {
  .interview-section
    .arrow-button-light-lg-arrow2.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .interview-section
    .arrow-button-light-lg-arrow2.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }
}

@media (max-width: 1440px) {
  .work-section
    .arrow-button-light-lg-arrow2.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .arrow-button-light-lg-arrow2.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .work-section
    .arrow-button-light-lg-arrow2.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .work-section
    .arrow-button-light-lg-arrow2.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .work-section
    .arrow-button-light-lg-arrow2.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 1440px) {
  .member-section
    .arrow-button-light-lg-arrow2.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .member-section
    .arrow-button-light-lg-arrow2.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .member-section
    .arrow-button-light-lg-arrow2.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 767px) {
  #environment-section .grade-structure-block > .arrow-button-light-lg-arrow2.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .ai-native-section
    .c-inner-container
    > .arrow-button-light-lg-arrow2.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 80px;
  }
}

/* Lock arrow button size up to and including 1440px */

@media (max-width: 1440px) {
  .arrow-button {
    width: 42px !important;
    height: 22px !important;
  }

  .arrow-md,
  .arrow-md img {
    width: 10px !important;
    height: 10px !important;
  }
}

/* Force md padding for Recruit section when utility priority is insufficient */

@media (min-width: 768px) and (max-width: 1439px) {
  .recruit-section {
    padding-top: 140px !important;
    padding-bottom: 140px !important;
  }
}

/* Recruit section buttons: タブレット以下で余白と文字サイズを調整 */

/* font-size 定義は Typography – Font Size セクションに移動 */

@media (max-width: 1024px) {
  .recruit-section .btn-white {
    padding-top: 14px !important;
    /* 上下の余白を広げる（デフォルトのh-[45px]に加えて） */
    padding-bottom: 14px !important;
    font-size: 17px !important;
    /* 文字サイズを少し大きく（16px → 17px） */
  }

  /* Environment cards: align subtitle text sizing with member-card-role on tablet and below */

  .index-page #environment-section .environment-card-subtitle {
    font-size: 14px !important;
  }
}

/* Lock arrow-button at exactly 1440px */

@media (min-width: 1440px) and (max-width: 1440px) {
  .arrow-button {
    width: 42px !important;
    height: 22px !important;
  }

  .arrow-md,
  .arrow-md img {
    width: 10px !important;
    height: 10px !important;
  }

  /* Also lock work-section, interview-section, member-section arrow buttons at 1440px */

  .work-section .arrow-button,
  .interview-section .arrow-button,
  .member-section .arrow-button {
    width: 42px !important;
    height: 22px !important;
  }
}

/* Fluid scaling for arrow buttons/icons on xl+: start after 1440px */

@media (min-width: 1441px) {
  .arrow-button {
    width: clamp(
      42px,
      calc(42px + 20 * (100vw - 1441px) / 479),
      62px
    ) !important;
    height: clamp(
      22px,
      calc(22px + 16 * (100vw - 1441px) / 479),
      38px
    ) !important;
  }

  .arrow-md {
    width: clamp(
      10px,
      calc(10px + 4 * (100vw - 1441px) / 479),
      14px
    ) !important;
    height: clamp(
      10px,
      calc(10px + 4 * (100vw - 1441px) / 479),
      14px
    ) !important;
  }

  .arrow-md img {
    width: clamp(
      10px,
      calc(10px + 4 * (100vw - 1441px) / 479),
      14px
    ) !important;
    height: clamp(
      10px,
      calc(10px + 4 * (100vw - 1441px) / 479),
      14px
    ) !important;
  }

  /* Member section "more" link: scale arrow button and text */

  .member-more-link .arrow-button-dark-lg {
    width: clamp(
      62px,
      calc(62px + 12 * (100vw - 1441px) / 479),
      74px
    ) !important;
    height: clamp(
      38px,
      calc(38px + 7 * (100vw - 1441px) / 479),
      45px
    ) !important;
  }

  .member-more-link span.text-base {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    ) !important;
  }

  /* Member card arrow button: 1440px以下は固定、1441px以上でinterview-sectionのもっと見るボタンと同じ拡大率 */

  @media (max-width: 1440px) {
    .member-card-arrow {
      width: 62px !important;
      height: 38px !important;
    }

    .member-card-arrow-img {
      width: 14px !important;
      height: 14px !important;
    }
  }

  @media (min-width: 1441px) {
    .member-card-arrow {
      width: clamp(62px, calc(62px + (100vw - 1440px) * 0.02), 74px) !important;
      height: clamp(
        38px,
        calc(38px + (100vw - 1440px) * 0.012),
        48px
      ) !important;
    }

    .member-card-arrow-img {
      width: clamp(
        14px,
        calc(14px + (100vw - 1440px) * 0.008),
        18px
      ) !important;
      height: clamp(
        14px,
        calc(14px + (100vw - 1440px) * 0.008),
        18px
      ) !important;
    }
  }

  /* Section subtitles: fluid scaling */

  /* Message section h3: 1440px以下は32px固定、1441px以上で拡大 */

  .message-section h3.text-\[32px\] {
    font-size: 32px !important;
  }

  @media (min-width: 1441px) {
    .message-section h3.text-\[32px\] {
      font-size: clamp(
        32px,
        calc(32px + 8 * (100vw - 1441px) / 479),
        40px
      ) !important;
    }

    /* Message section: メインコンテンツのgapを1441px以上で拡大（25%拡大率に統一） */

    .message-section .flex.flex-col.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480) !important;
    }

    /* Message section: Business/Productカードのgrid gapを25%拡大率に統一 */

    .message-section .grid.grid-cols-1.md\:grid-cols-2.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480) !important;
    }
  }

  /* Message section: 767px以下ではBusiness/Productカードのgapを40pxに */

  @media (max-width: 767px) {
    #message-section .c-inner-container .gap-fluid-120 > .grid.grid-cols-1,
    .message-section .c-inner-container .gap-fluid-120 > .grid {
      gap: 40px !important;
    }
  }

  /* Member card arrows: match interview arrows fluid sizing */

  @media (min-width: 1441px) {
    .member-section .arrow-button {
      width: clamp(
        42px,
        calc(42px + 20 * (100vw - 1441px) / 479),
        62px
      ) !important;
      height: clamp(
        22px,
        calc(22px + 16 * (100vw - 1441px) / 479),
        38px
      ) !important;
    }

    .member-section .arrow-md,
    .member-section .arrow-md img {
      width: clamp(
        10px,
        calc(10px + 4 * (100vw - 1441px) / 479),
        14px
      ) !important;
      height: clamp(
        10px,
        calc(10px + 4 * (100vw - 1441px) / 479),
        14px
      ) !important;
    }
  }
}

/* 強制上書き: 1440px以上でProduct擬似要素を右へ寄せる */

@media (min-width: 1440px) {
  /* Product section padding-bottom: 1440px基準で160pxから拡大 */

  #product-section,
  .product-section {
    padding-bottom: clamp(
      160px,
      calc(160px + 40 * (100vw - 1440px) / 480),
      200px
    ) !important;
  }

  /* AI Native Tech Blog cards: scale spacing and text on xl+ */

  @media (min-width: 1441px) {
    .ai-native-section .tech-blog-card {
      display: flex !important;
      align-items: flex-start !important;
      width: 100% !important;
      min-height: clamp(
        144px,
        calc(144px + 6 * ((100vw - 1440px) / 480)),
        150px
      ) !important;
      padding-top: clamp(
        16px,
        calc(16px + 4 * (100vw - 1441px) / 479),
        20px
      ) !important;
      padding-bottom: clamp(
        16px,
        calc(16px + 4 * (100vw - 1441px) / 479),
        20px
      ) !important;
      padding-left: clamp(
        16px,
        calc(16px + 4 * (100vw - 1441px) / 479),
        20px
      ) !important;
      padding-right: clamp(
        25px,
        calc(25px + 3 * (100vw - 1441px) / 479),
        28px
      ) !important;
      gap: clamp(
        12px,
        calc(12px + 4 * (100vw - 1441px) / 479),
        16px
      ) !important;
    }

    .ai-native-section .tech-blog-card::before {
      z-index: 0 !important;
    }
  }

  .ai-native-section .tech-blog-card p,
  .ai-native-section .tech-blog-card .text-xs {
    font-size: clamp(
      12px,
      calc(12px + 2 * (100vw - 1441px) / 479),
      14px
    ) !important;
  }

  /* Tech Blog tags: TECH tag background color */

  .ai-native-section .tech-blog-card .bg-\[#3EA8FF\] {
    background-color: var(--color-tag-tech) !important;
  }

  /* Tech Blog tags: scale width and height from 1441px */

  @media (min-width: 1441px) {
    .ai-native-section .tech-blog-card .bg-tagPurple,
    .ai-native-section .tech-blog-card .bg-tagBlue,
    .ai-native-section .tech-blog-card .bg-\[#3EA8FF\] {
      width: clamp(
        43px,
        calc(43px + 5 * ((100vw - 1440px) / 480)),
        48px
      ) !important;
      height: clamp(
        23px,
        calc(23px + 3 * ((100vw - 1440px) / 480)),
        26px
      ) !important;
    }
  }

  /* TechBlog thumbnail box: 105px at 1440px, scales upward to 145px at 1920px */

  .ai-native-section .tech-blog-card .w-105 {
    width: clamp(
      105px,
      calc(105px + 40 * (100vw - 1441px) / 479),
      145px
    ) !important;
    height: clamp(
      105px,
      calc(105px + 40 * (100vw - 1441px) / 479),
      145px
    ) !important;
  }

  .ai-native-section .tech-blog-card .text-3xl {
    font-size: clamp(
      42px,
      calc(42px + 10 * ((100vw - 1440px) / 480)),
      52px
    ) !important;
    line-height: 1 !important;
  }
}

/* Override 1024px padding for Tech Blog cards on xl+ (gentle scaling) */

@media (min-width: 1441px) {
  .ai-native-section .tech-blog-card {
    padding-top: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    ) !important;
    padding-bottom: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    ) !important;
    padding-left: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    ) !important;
    padding-right: clamp(
      25px,
      calc(25px + 3 * (100vw - 1441px) / 479),
      28px
    ) !important;
  }
}

/* Extra specificity to override 1024px fixed padding when inside product-section */

@media (min-width: 1441px) {
  #product-section .ai-native-section .tech-blog-card {
    padding-top: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    ) !important;
    padding-bottom: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    ) !important;
    padding-left: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    ) !important;
    padding-right: clamp(
      25px,
      calc(25px + 3 * (100vw - 1441px) / 479),
      28px
    ) !important;
  }
}

/* Footer buttons: hide at 1180px and below */

@media (max-width: 1180px) {
  .footer-buttons {
    display: none !important;
  }
}

/* Footer: Tablet & Mobile Layout (1023px and below) */

/* Note: Legacy 949px/945px rules are superseded by 1023px rules below */

/* Override: Product section bottom padding 160px at 1440px, fluidly larger above */

@media (min-width: 1440px) {
  #product-section {
    padding-bottom: clamp(
      160px,
      calc(160px + 40 * (100vw - 1440px) / 480),
      200px
    ) !important;
  }
}

/* =========================================================
   ヘッダーアクションボタン: hover効果
   対象: 全ページ共通（ヘッダー）
   用途: ヘッダーの「募集職種」「カジュアル面談」ボタンのhover効果
   ========================================================= */

/* Header action buttons: スライドアニメーション設定 */

.header-action-jobs,
.header-action-contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* テキストとアイコンを前面に配置 */

.header-action-jobs > *,
.header-action-contact > * {
  position: relative;
  z-index: 1;
}

/* ブランドカラー背景のスライドアニメーション（右から左） */

.header-action-jobs::before,
.header-action-contact::before {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  content: "";
  background: var(--color-brand);
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.header-action-jobs:hover::before,
.header-action-contact:hover::before {
  left: 0%;
  right: auto;
  width: 100%;
}

.header-action-jobs:hover,
.header-action-contact:hover {
  background-color: transparent !important;
  color: var(--color-text-inverse) !important;
  transition: color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.header-action-jobs:hover *,
.header-action-contact:hover * {
  color: var(--color-text-inverse) !important;
}

.header-action-jobs:hover img,
.header-action-contact:hover img {
  filter: brightness(0) invert(1);
}

/* Header action buttons: maintain white color on hover even when scrolled */

#site-header.is-scrolled .header-action-jobs:hover,
#site-header.is-scrolled .header-action-contact:hover {
  background-color: transparent !important;
  color: var(--color-text-inverse) !important;
}

#site-header.is-scrolled .header-action-jobs:hover *,
#site-header.is-scrolled .header-action-contact:hover * {
  color: var(--color-text-inverse) !important;
}

#site-header.is-scrolled .header-action-jobs:hover img,
#site-header.is-scrolled .header-action-contact:hover img {
  filter: brightness(0) invert(1);
}

/* Header action buttons: width adjustment for 1439px and below */

@media (max-width: 1439px) {
  .header-cta-btn {
    width: 165px !important;
  }

  /* Navigation menu gap adjustment */

  #site-header .desktop-nav-override > div.flex.items-center.gap-8 {
    gap: 24px !important;
  }
}

/* =========================================================
   タブレット・モバイルメニュー: 1024px以下
   対象: 全ページ共通（ヘッダー）
   用途: タブレット・モバイルサイズでのメニュー表示切り替え（デスクトップナビ非表示、ハンバーガーメニューボタン表示）
   変更: iPad重視の設計により、1024px以下をタブレット/モバイル扱いとする
   ========================================================= */

@media (max-width: 1024px) {
  /* Show mobile-header-bar container */

  #site-header .mobile-header-bar {
    display: flex !important;
    position: absolute;
    right: 0;
    top: 0;
    bottom: auto;
    align-items: center;
    z-index: 50;
  }

  /* Hide desktop navigation */

  #site-header .desktop-nav-override {
    display: none !important;
  }

  /* Hide CTA buttons */

  .header-cta-btn {
    display: none !important;
  }

  /* Show tablet menu button */

  .tablet-menu-btn {
    display: flex !important;
  }

  /* Hide mobile menu button (767px以下用) */

  .mobile-menu-btn {
    display: none !important;
  }

  /* Hide old tablet menu button */

  .mobile-menu-btn-tablet {
    display: none !important;
  }

  /* Mobile menu layout styles for tablet/mobile (1024px以下) */

  body.mobile-menu-open {
    position: relative;
    overflow: hidden;
    background: var(--color-text-primary);
  }

  body.mobile-menu-open #mobile-nav {
    z-index: 50000;
  }

  #mobile-nav {
    isolation: isolate;
    position: fixed !important;
    inset: 0;
    padding: 24px 20px;
    background-color: #222222 !important;
    z-index: 49999;
    overflow-y: auto;
    margin-top: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    pointer-events: auto;
    /* アニメーション設定: フェードインのみ */
    transition: opacity 0.15s ease, visibility 0.15s ease;
    will-change: opacity;
  }

  /* 表示状態 */

  #mobile-nav:not(.hidden) {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #mobile-nav.hidden {
    display: flex !important;
    /* Tailwindのdisplay:noneを上書き */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  #mobile-nav .mobile-nav-inner {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  #mobile-nav .mobile-nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin-bottom: 0;
  }

  #mobile-nav .mobile-header-branding {
    margin-bottom: 0;
  }

  #mobile-nav .mobile-nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text-inverse) !important;
  }

  #mobile-nav .mobile-nav-logo img {
    width: 150px;
    height: auto;
    max-width: 70vw;
  }

  /* font-size 定義は Typography – Font Size セクションに移動 */

  #mobile-nav .mobile-nav-logo-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-inverse);
  }

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .mobile-menu-close {
    position: static;
    width: 47px !important;
    height: 47px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-inverse);
    background: var(--color-brand);
    border: 1px solid var(--color-brand);
    border-radius: 9999px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .mobile-menu-close svg,
  .mobile-menu-close img {
    width: 14px;
    height: 14px;
  }

  .mobile-menu-close svg path {
    stroke-width: 2px;
  }

  #mobile-nav a {
    color: var(--color-text-inverse);
    display: block;
    text-align: left;
    font-size: 16px;
    line-height: 1.7;
    margin-top: 0;
  }

  #mobile-nav .mobile-actions a {
    text-align: center;
  }

  #mobile-nav .border-t {
    border-color: rgba(255, 255, 255, 0.25) !important;
  }

  #mobile-nav .bg-gray-200 {
    background-color: var(--color-bg-white) !important;
    color: var(--color-text-accent) !important;
  }

  #mobile-nav .mobile-menu-job-btn {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    text-indent: 0;
  }

  .mobile-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    align-items: stretch;
    border-top: none !important;
  }

  /* モバイルメニュー：ボタン内テキストの上下中央揃え */

  #mobile-nav .mobile-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    line-height: 1;
  }

  .mobile-menu-job-btn {
    border-radius: 60px;
    border: 1px solid #ffffff;
    color: #ffffff;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    padding: 12px 20px;
    width: 100%;
    height: 52px;
    font-family: "Noto Sans JP", sans-serif;
  }

  #mobile-nav .mobile-actions a.btn-white {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 52px;
  }

  .mobile-menu-contact-btn {
    border-radius: 60px;
    border: 1px solid #ffffff;
    color: #ffffff;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    padding: 12px 20px;
    width: 100%;
    height: 52px;
    font-family: "Noto Sans JP", sans-serif;
  }

  #mobile-nav .menu-section {
    margin-bottom: 0;
    width: 100%;
  }

  #mobile-nav .menu-section-group {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  #mobile-nav .menu-section-title {
    color: var(--color-text-inverse);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0;
    line-height: 1.4;
  }

  #mobile-nav .menu-links {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 16px;
  }

  /* font-size 定義は Typography – Font Size セクションに移動 */

  #mobile-nav ul li a,
  #mobile-nav ul li p,
  #mobile-nav .menu-links a,
  #mobile-nav .menu-links a:visited,
  #mobile-nav .menu-links a:link,
  #mobile-nav .menu-links a:active {
    color: var(--color-text-inverse);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    text-decoration: none;
  }

  /* mobile-nav のリンク色: スクロール状態に関係なく常に白
     理由: PCナビのスクロール時の色変更（#2A9CA1）が
          #site-header.is-scrolled nav a で mobile-nav にも
          適用されないよう、明示的に色を定義する */

  #mobile-nav .menu-links a,
  #mobile-nav .menu-links a:link,
  #mobile-nav .menu-links a:visited,
  #mobile-nav .menu-links a:active {
    color: var(--color-text-inverse);
  }

  #mobile-nav .menu-links a:hover {
    color: var(--color-text-accent);
  }

  /* その他の mobile-nav 内の a タグも明示的に定義 */

  #mobile-nav a {
    color: var(--color-text-inverse);
  }

  /* セクションタイトルも明示的に定義 */

  #mobile-nav .menu-section-title {
    color: var(--color-text-inverse);
  }

  /* ロゴテキストも明示的に定義 */

  #mobile-nav .mobile-nav-logo-text {
    color: var(--color-text-inverse);
  }

  /* ロゴリンクも明示的に定義 */

  #mobile-nav .mobile-nav-logo {
    color: var(--color-text-inverse) !important;
  }
}

/* =========================================================
   モバイルヘッダー & ハンバーガーメニュー: 767px以下
   対象: 全ページ共通（ヘッダー）
   用途: スマホサイズでのヘッダーとメニュー表示
   ========================================================= */

@media (max-width: 767px) {
  #site-header {
    height: 72px;
  }

  /* スクロール時も白い背景とシャドウを表示しない */

  #site-header.is-scrolled,
  #site-header.is-scrolled.bg-white,
  #site-header.is-scrolled[style],
  #site-header.is-scrolled nav {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
  }

  /* JavaScriptで設定されるインラインスタイルも上書き */

  #site-header.is-scrolled[style*="box-shadow"],
  #site-header.is-scrolled[style*="boxShadow"] {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
  }

  #site-header .desktop-nav-override {
    display: none !important;
  }

  #site-header .mobile-header-bar {
    display: flex !important;
    position: absolute;
    right: 8px;
    top: 0;
    bottom: auto;
    align-items: center;
    z-index: 50;
  }

  body.mobile-menu-open {
    position: relative;
    overflow: hidden;
    background: var(--color-text-primary);
  }

  body.mobile-menu-open #mobile-nav {
    z-index: 50000;
  }

  #mobile-nav {
    isolation: isolate;
    position: fixed;
    inset: 0;
    padding: 24px 20px;
    background-color: #222222 !important;
    z-index: 49999;
    overflow-y: auto;
    margin-top: 0 !important;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    display: flex !important;
    pointer-events: auto;
    /* アニメーション設定: フェードインのみ */
    transition: opacity 0.15s ease, visibility 0.15s ease;
    will-change: opacity;
  }

  /* 表示状態 */

  #mobile-nav:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  #mobile-nav .mobile-nav-inner {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  #mobile-nav .mobile-nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin-bottom: 0;
  }

  #mobile-nav .mobile-header-branding {
    margin-bottom: 0;
  }

  #mobile-nav .mobile-nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text-inverse) !important;
  }

  #mobile-nav .mobile-nav-logo img {
    width: 150px;
    height: auto;
    max-width: 70vw;
  }

  #mobile-nav .mobile-nav-logo-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-inverse);
  }

  #mobile-nav.hidden {
    display: flex !important;
    /* Tailwindのdisplay:noneを上書き */
    opacity: 0;
    transform: translateY(-48px);
    visibility: hidden;
    pointer-events: none;
  }

  .mobile-menu-close {
    position: static;
    width: 47px !important;
    height: 47px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-inverse);
    background: var(--color-brand);
    border: 1px solid var(--color-brand);
    border-radius: 9999px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .mobile-menu-close svg,
  .mobile-menu-close img {
    width: 14px;
    height: 14px;
  }

  .mobile-menu-close svg path {
    stroke-width: 2px;
  }

  #mobile-nav a {
    color: var(--color-text-inverse);
    display: block;
    text-align: left;
    font-size: 16px;
    line-height: 1.7;
    margin-top: 0;
  }

  #mobile-nav .mobile-actions a {
    text-align: center;
  }

  #mobile-nav .border-t {
    border-color: rgba(255, 255, 255, 0.25) !important;
  }

  #mobile-nav .bg-gray-200 {
    background-color: var(--color-bg-white) !important;
    color: var(--color-text-accent) !important;
  }

  #mobile-nav .mobile-menu-job-btn {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    text-indent: 0;
  }

  .mobile-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    align-items: stretch;
    border-top: none !important;
  }

  /* モバイルメニュー：ボタン内テキストの上下中央揃え */

  #mobile-nav .mobile-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    line-height: 1;
  }

  .mobile-menu-job-btn {
    border-radius: 60px;
    border: 1px solid #ffffff;
    color: #ffffff;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    padding: 12px 20px;
    width: 100%;
    height: 52px;
    font-family: "Noto Sans JP", sans-serif;
  }

  #mobile-nav .mobile-actions a.btn-white {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 52px;
  }

  .mobile-menu-contact-btn {
    border-radius: 60px;
    border: 1px solid #ffffff;
    color: #ffffff;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    padding: 12px 20px;
    width: 100%;
    height: 52px;
    font-family: "Noto Sans JP", sans-serif;
  }

  #mobile-nav .menu-section {
    margin-bottom: 0;
    width: 100%;
  }

  #mobile-nav .menu-section-group {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  #mobile-nav .menu-section-title {
    color: var(--color-text-inverse);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0;
    line-height: 1.4;
  }

  #mobile-nav .menu-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }

  /* mobile-nav のリンク色: スクロール状態に関係なく常に白
     理由: PCナビのスクロール時の色変更（#2A9CA1）が
          #site-header.is-scrolled nav a で mobile-nav にも
          適用されないよう、明示的に色を定義する */

  #mobile-nav .menu-links a,
  #mobile-nav .menu-links a:link,
  #mobile-nav .menu-links a:visited,
  #mobile-nav .menu-links a:active {
    color: var(--color-text-inverse);
  }

  #mobile-nav .menu-links a:hover {
    color: var(--color-text-accent);
  }

  /* その他の mobile-nav 内の a タグも明示的に定義 */

  #mobile-nav a {
    color: var(--color-text-inverse);
  }

  /* セクションタイトルも明示的に定義 */

  #mobile-nav .menu-section-title {
    color: var(--color-text-inverse);
  }

  /* ロゴテキストも明示的に定義 */

  #mobile-nav .mobile-nav-logo-text {
    color: var(--color-text-inverse);
  }

  /* ロゴリンクも明示的に定義 */

  #mobile-nav .mobile-nav-logo {
    color: var(--color-text-inverse) !important;
  }

  body.mobile-menu-open .corner-logo {
    display: none !important;
  }

  @media (max-width: 599px) {
    .corner-logo {
      width: 94px !important;
      height: 94px !important;
    }

    .corner-logo__image {
      width: 68px !important;
      height: auto !important;
    }

    .mobile-menu-btn {
      right: 6px !important;
    }
  }

  /* Recruitセクション ボタンの文字サイズを16pxに固定 */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .recruit-action-group .btn-white {
    font-size: 16px !important;
    min-height: 48px !important;
  }

  .recruit-action-group .recruit-btn-jobs,
  .recruit-action-group .recruit-btn-contact {
    font-size: 16px !important;
    min-height: 48px !important;
  }

  /* indexページのRecruitセクションをさらに強制（599px以下） */

  .index-page #recruit-section .recruit-action-group .btn-white {
    font-size: 16px !important;
    min-height: 48px !important;
  }

  /* Environment section: card subtitle を13pxに */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .index-page #environment-section .environment-card-subtitle {
    font-size: 13px !important;
  }

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .mobile-actions .mobile-menu-job-btn,
  .mobile-actions .mobile-menu-contact-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .mobile-actions .mobile-menu-job-btn img,
  .mobile-actions .mobile-menu-contact-btn img {
    position: relative;
    top: 0;
  }

  #mobile-nav .mobile-actions {
    flex-direction: column;
  }

  #mobile-nav .mobile-actions .mobile-menu-job-btn,
  #mobile-nav .mobile-actions .mobile-menu-contact-btn {
    width: 100%;
    flex: 1 1 auto;
  }
}

/* =========================================================
   PCメニュー: 1025px以上
   対象: 全ページ共通（ヘッダー）
   用途: PCサイズでのメニュー表示切り替え（モバイルヘッダーバー非表示、デスクトップナビ表示）
   変更: 1025px以上をPC扱いとするため、min-width: 1025px に変更
   ========================================================= */

@media (min-width: 1025px) {
  #site-header .mobile-header-bar {
    display: none !important;
  }
}

/* Default: hide tablet button */

.mobile-menu-btn-tablet {
  display: none !important;
}

/* Tablet hamburger button (1024px以下、768px以上) */

/* 変更: 1024px以下をタブレット/モバイル扱いとするため、max-width: 1024px に変更 */

@media (max-width: 1024px) and (min-width: 768px) {
  .mobile-menu-btn-tablet {
    display: inline-flex !important;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    border: none;
    background: var(--color-bg-white);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    position: absolute;
    top: 12px;
    right: 16px;
  }

  .mobile-menu-btn {
    display: none !important;
  }

  .mobile-menu-line-tablet {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 9999px;
    background-color: var(--color-brand);
    transition: transform 0.2s ease, opacity 0.2s ease,
      background-color 0.2s ease;
  }

  .mobile-menu-btn-tablet.is-open .mobile-menu-line-tablet:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .mobile-menu-btn-tablet.is-open .mobile-menu-line-tablet:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-btn-tablet.is-open .mobile-menu-line-tablet:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* Tablet menu button (768px〜1024px): White background, square, brand color lines */

/* 変更: 1024px以下をタブレット/モバイル扱いとするため、コメントを更新 */

.tablet-menu-btn {
  display: none;
  width: 87px;
  height: 87px;
  min-width: 87px;
  min-height: 87px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  border: none;
  background: #ffffff;
  border-radius: 0;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 60;
}

.tablet-menu-line {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 0;
  background-color: var(--color-brand);
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.tablet-menu-btn.is-open .tablet-menu-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.tablet-menu-btn.is-open .tablet-menu-line:nth-child(2) {
  opacity: 0;
}

.tablet-menu-btn.is-open .tablet-menu-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile hamburger button (767px and below) */

@media (max-width: 767px) {
  .mobile-menu-btn-tablet {
    display: none !important;
  }

  .tablet-menu-btn {
    display: none !important;
  }

  .mobile-menu-btn {
    display: inline-flex !important;
  }
}

.mobile-menu-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border: none;
  background: var(--color-brand);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}

.mobile-menu-line {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 9999px;
  background-color: #ffffff;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

/* 4本目の線を非表示（画像では3本の線） */

.mobile-menu-line:nth-child(4) {
  display: none;
}

.mobile-menu-btn.is-open .mobile-menu-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-btn.is-open .mobile-menu-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.is-open .mobile-menu-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 767px) {
  /* 背景がティール色なので、線は常に白のまま */

  body.header-is-scrolled .mobile-menu-line {
    background-color: #ffffff;
  }
}

/* =========================================================
   フッター: Fluid Scaling Utilities（1440px以下は固定、1441px以上でスケール）
   対象: 全ページ共通（フッター）
   用途: フッター要素のFluid拡大制御
   ========================================================= */

@media (max-width: 1440px) {
  /* Footer padding */

  .site-footer {
    padding-top: 80px !important;
    padding-bottom: 40px !important;
  }

  /* Footer logo */

  .site-footer-logo img {
    width: 170px !important;
  }

  /* Footer heading (h4) */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .site-footer h4 {
    font-size: 16px !important;
  }

  /* Footer links (text-sm) */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .site-footer .text-sm {
    font-size: 14px !important;
  }

  /* Footer copyright (text-xs) */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .footer-copyright .text-xs {
    font-size: 12px !important;
  }

  /* Footer gaps */

  .site-footer .gap-10 {
    gap: 40px !important;
  }

  .site-footer .gap-16\.25 {
    gap: 65px !important;
  }

  .site-footer .gap-4 {
    gap: 24px !important;
  }

  /* Footer nav block: 1440px基準で24px（.gap-4より優先） */

  .site-footer .footer-nav-block {
    gap: 24px !important;
  }

  .site-footer .gap-3 {
    gap: 12px !important;
  }

  .site-footer .gap-6 {
    gap: 32px !important;
  }

  .site-footer .gap-53 {
    gap: 53px !important;
  }
}

@media (min-width: 1441px) {
  /* Footer padding: 80px→100px, 40px→50px */

  .site-footer {
    padding-top: clamp(
      80px,
      calc(80px + 20 * (100vw - 1441px) / 479),
      100px
    ) !important;
    padding-bottom: clamp(
      40px,
      calc(40px + 10 * (100vw - 1441px) / 479),
      50px
    ) !important;
  }

  /* Footer logo: 170px→200px */

  .site-footer-logo img {
    width: clamp(
      170px,
      calc(170px + 30 * (100vw - 1441px) / 479),
      200px
    ) !important;
  }

  /* Footer heading (h4): 16px→20px */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .site-footer h4 {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1441px) / 479),
      20px
    ) !important;
  }

  /* Footer links (text-sm): 14px→16px */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .site-footer .text-sm {
    font-size: clamp(
      14px,
      calc(14px + 2 * (100vw - 1441px) / 479),
      16px
    ) !important;
  }

  /* Footer copyright (text-xs): 12px→14px */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .footer-copyright .text-xs {
    font-size: clamp(
      12px,
      calc(12px + 2 * (100vw - 1441px) / 479),
      14px
    ) !important;
  }

  /* Footer gaps */

  .site-footer .gap-10 {
    gap: clamp(40px, calc(40px + 10 * (100vw - 1441px) / 479), 50px) !important;
  }

  .site-footer .gap-16\.25 {
    gap: clamp(65px, calc(65px + 15 * (100vw - 1441px) / 479), 80px) !important;
  }

  .site-footer .gap-4 {
    gap: clamp(16px, calc(16px + 4 * (100vw - 1441px) / 479), 20px) !important;
  }

  /* Footer nav block: 1440px基準で24px、1441px以上で拡大（.gap-4より優先） */

  .site-footer .footer-nav-block {
    gap: clamp(24px, calc(24px + 6 * (100vw - 1441px) / 479), 30px) !important;
  }

  .site-footer .gap-3 {
    gap: clamp(12px, calc(12px + 3 * (100vw - 1441px) / 479), 15px) !important;
  }

  .site-footer .gap-6 {
    gap: clamp(24px, calc(24px + 1 * (100vw - 1441px) / 479), 25px) !important;
  }

  /* Footer buttons: scale button size */

  .footer-buttons .btn-outline-white {
    font-size: clamp(
      16px,
      calc(16px + 2 * (100vw - 1441px) / 479),
      18px
    ) !important;
    padding: clamp(12px, calc(12px + 2 * (100vw - 1441px) / 479), 14px)
      clamp(24px, calc(24px + 4 * (100vw - 1441px) / 479), 28px) !important;
  }
}

/* =========================================================
   アニメーション: セクション別の矢印ホバー効果
   対象: 各セクション（Work, Interview, Environment, Member, Message, Product, Value-Culture, AI-Native, Recruit, Footer, Header）
   用途: カードやリンクのホバー時に矢印が右に移動するアニメーション
   ========================================================= */

/* Work section: arrow animation on card hover */

.work-section .arrow-button {
  transition: background-color 0.3s ease;
}

.work-section .arrow-button .arrow {
  transition: transform 0.3s ease;
}

.work-section .arrow-button .arrow img {
  transition: filter 0.3s ease;
}

.work-section a:hover .arrow-button {
  background-color: var(--color-text-primary);
}

.work-section a:hover .arrow-button .arrow {
  transform: translateX(5px);
}

.work-section a:hover .arrow-button .arrow img {
  filter: brightness(0) invert(1);
}

/* Interview section: arrow animation on card hover */

.interview-section .arrow-button {
  transition: background-color 0.3s ease;
}

.interview-section .arrow-button .arrow {
  transition: transform 0.3s ease;
}

.interview-section .arrow-button .arrow img {
  transition: filter 0.3s ease;
}

.interview-section a:hover .arrow-button {
  background-color: var(--color-text-primary);
}

.interview-section a:hover .arrow-button .arrow {
  transform: translateX(5px);
}

.interview-section a:hover .arrow-button .arrow img {
  filter: brightness(0) invert(1);
}

/* Environment section: arrow animation on card hover */

.environment-section .arrow-button .arrow-md {
  transition: transform 0.2s cubic-bezier(0.45, 0, 0.55, 1);
}

.environment-section a:hover .arrow-button .arrow-md {
  transform: translateX(5px);
}

/* Environment section: カード背景の右から左へのスライドアニメーション（env-card） */

#environment-section .env-card {
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

#environment-section .env-card:before {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  z-index: 1;
  content: "";
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

#environment-section .env-card:hover:before {
  left: 0%;
  right: auto;
  width: 100%;
}

#environment-section .env-card:hover {
  position: relative;
}

#environment-section .env-card:after {
  display: block;
  position: absolute;
  inset: -4px;
  z-index: 0;
  content: "";
  background: rgba(42, 156, 161, 0.15);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
}

#environment-section .env-card:hover:after {
  opacity: 1;
  animation: pulse-glow 1s ease-out;
}

@keyframes pulse-glow {
  0% {
    transform: scale(0.95);
    opacity: 1;
  }

  90% {
    opacity: 0.1;
  }

  100% {
    transform: scale(1.2, 1.4);
    opacity: 0;
  }
}

#environment-section .env-card__bg-black {
  display: none;
}

#environment-section .env-card__content {
  position: relative;
  z-index: 2;
  transition: color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

/* Environment section: env-card hover時のテキストカラー変更（白文字） */

#environment-section .env-card:hover .environment-card-title,
#environment-section .env-card:hover .environment-card-subtitle {
  color: var(--color-text-inverse) !important;
}

/* Member section: arrow animation on card hover */

.member-section .arrow-button {
  transition: background-color 0.3s ease;
}

.member-section .arrow-button .arrow {
  transition: transform 0.3s ease;
}

.member-section .arrow-button .arrow img {
  transition: filter 0.3s ease;
}

.member-section a:hover .arrow-button {
  background-color: var(--color-text-primary);
}

.member-section a:hover .arrow-button .arrow {
  transform: translateX(5px);
}

.member-section a:hover .arrow-button .arrow img {
  filter: brightness(0) invert(1);
}

/* Member section: "もっと見る" link arrow animation on hover */

.member-section .member-more-link .arrow {
  transition: transform 0.3s ease;
}

.member-section .member-more-link:hover .arrow {
  transform: translateX(5px);
}

/* Recruit section: button SVG arrow animation on hover */

.btn-white svg {
  transition: transform 0.3s ease;
}

.btn-white:hover svg {
  transform: translateX(5px);
}

/* Message section: arrow image animation on card hover */

.message-section .member-card-arrow {
  transition: background-color 0.3s ease;
}

.message-section .member-card-arrow-img {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.message-section a:hover .member-card-arrow {
  background-color: var(--color-bg-white);
}

.message-section a:hover .member-card-arrow-img {
  transform: translateX(5px);
  filter: brightness(0.133) saturate(0);
}

/* Message section: 1024px以下でBusiness/Productカードのaリンクにopacityアニメーションを追加 */

@media (max-width: 1024px) {
  .message-section .grid a {
    transition: opacity 0.3s ease;
  }

  .message-section .grid a:hover {
    opacity: 0.8;
  }
}

/* Interview section: "もっと見る" link arrow animation on hover */

.interview-section .interview-more-link .arrow {
  transition: transform 0.3s ease;
}

.interview-section .interview-more-link:hover .arrow {
  transform: translateX(5px);
}

/* Product section: "詳しく知る" link arrow animation on hover */

.product-section .product-cta-fluid .arrow {
  transition: transform 0.3s ease;
}

.product-section .product-cta-fluid:hover .arrow {
  transform: translateX(5px);
}

/* Value-Culture section: "詳しく知る" link arrow animation on hover */

.value-culture-section .aboutus-value-culture-link .arrow {
  transition: transform 0.3s ease;
}

.value-culture-section .aboutus-value-culture-link:hover .arrow {
  transform: translateX(5px);
}

/* AI-Native section: "詳しく知る" link arrow animation on hover */

.ai-native-section .aboutus-ai-native-link .arrow {
  transition: transform 0.3s ease;
}

.ai-native-section .aboutus-ai-native-link:hover .arrow {
  transform: translateX(5px);
}

/* AI-Native section: "もっと見る" link arrow animation on hover */

.ai-native-section .tech-blog-more-link .arrow {
  transition: transform 0.3s ease;
}

.ai-native-section .tech-blog-more-link:hover .arrow {
  transform: translateX(5px);
}

/* Header: "募集職種" link arrow animation on hover */

.header-action-jobs img {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.header-action-jobs:hover img {
  transform: translateX(5px);
}

/* Header: "カジュアル面談" link arrow animation on hover */

.header-action-contact img {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.header-action-contact:hover img {
  transform: translateX(5px);
}

/* Add gap to AI Native circle inner elements for larger screens (1920px+) */

@media (min-width: 1920px) {
  .ai-native-circle-inner {
    gap: 0.5rem;
  }
}

/* AI Native circles: smooth scaling below 1440px */

@media (max-width: 1439px) {
  .ai-native-circles-grid {
    gap: clamp(32px, 6vw, 52px) !important;
  }

  .ai-native-circle-wrapper {
    width: clamp(220px, 56vw, 285px) !important;
    height: clamp(220px, 56vw, 285px) !important;
  }

  .ai-native-circle-inner {
    padding: clamp(20px, 5vw, 32px) !important;
  }
}

@media (max-width: 1024px) {
  .ai-native-circle-wrapper {
    width: clamp(180px, 44vw, 230px) !important;
    height: clamp(180px, 44vw, 230px) !important;
  }
}

.ai-native-gradient-text {
  letter-spacing: -0.02em;
  margin-bottom: 0 !important;
  width: 204px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 14px;
}

.ai-native-gradient-text img {
  display: block;
  width: 100%;
  height: auto;
}

/* AI Native card list: font-size scaling */

/* font-size 定義は Typography – Font Size セクションに移動 */

/* AI Native gradient text (figure/image): maintain size at 1440px, scale from 1441px */

@media (max-width: 1440px) {
  .ai-native-gradient-text {
    width: 204px !important;
  }
}

@media (min-width: 1441px) {
  .ai-native-gradient-text {
    width: clamp(
      204px,
      calc(204px + 56 * (100vw - 1441px) / 479),
      260px
    ) !important;
  }
}

/* AI Native circle label: maintain font-size at 1440px, scale from 1441px */

/* font-size 定義は Typography – Font Size セクションに移動 */

@media (max-width: 1440px) {
  .ai-native-circle-label {
    font-size: 14px !important;
  }
}

@media (min-width: 1441px) {
  .ai-native-circle-label {
    font-size: clamp(
      14px,
      calc(14px + 4 * (100vw - 1441px) / 479),
      18px
    ) !important;
  }
}

@media (min-width: 1440px) {
  .ai-native-circle-inner > p:first-child {
    margin-bottom: 0;
  }

  .ai-native-circle-inner > p.text-sm.leading-1\.6.font-normal {
    margin: 25px auto 0px;
  }
}

/* AI Native main image:
   - 〜1440px まではデザイン通りの見え方を維持しつつ、縦横比を保持
   - 1441px 以上では上記の .ai-native-image img のFluid幅指定で拡大（heightは自動で比率維持） */

@media (max-width: 1440px) {
  .ai-native-image img {
    max-width: 843px;
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
}

#ai-native > div:first-child {
  background-position: center 90px !important;
}

#ai-native-product,
#ai-native-development,
#ai-native-operation {
  scroll-margin-top: 100px;
  margin-bottom: 0;
}

/* Member Section テキスト: 1440px以下で固定値を保証 */

/* font-size 定義は Typography – Font Size セクションに移動 */

@media (max-width: 1440px) {
  .member-section .member-subtitle.xl\:text-fluid-xl {
    font-size: 20px !important;
  }

  .member-section .member-section-body {
    font-size: 16px !important;
    line-height: 2 !important;
  }

  .interview-section .interview-section-body {
    font-size: 16px !important;
    line-height: 2 !important;
  }

  /* Product Overview Section テキスト: 1440px以下で固定値を保証 */

  #product-overview .member-subtitle.xl\:text-fluid-xl {
    font-size: 20px !important;
  }

  #product-overview .member-section-body {
    font-size: 16px !important;
    line-height: 2 !important;
  }
}

/* Member Section テキスト: 1440pxでも固定値を保証 */

@media (min-width: 1440px) and (max-width: 1440px) {
  .member-section .member-subtitle.xl\:text-fluid-xl {
    font-size: 20px !important;
  }

  /* Product Overview Section テキスト: 1440pxでも固定値を保証 */

  #product-overview .member-subtitle.xl\:text-fluid-xl {
    font-size: 20px !important;
  }
}

/* Filter button: Fluid Scaling for xl+ */

/* font-size 定義は Typography – Font Size セクションに移動 */

@media (min-width: 1441px) {
  .filter-button {
    /* 42px x auto width, 14px font size を XL 基準で拡大 */
    height: clamp(
      42px,
      calc(42px + 10 * (100vw - 1441px) / 479),
      52px
    ) !important;
    font-size: clamp(
      14px,
      calc(14px + 2 * (100vw - 1441px) / 479),
      16px
    ) !important;
    /* padding も Fluid 化 */
    padding-left: clamp(
      12px,
      calc(12px + 4 * (100vw - 1441px) / 479),
      16px
    ) !important;
    padding-right: clamp(
      12px,
      calc(12px + 4 * (100vw - 1441px) / 479),
      16px
    ) !important;
    /* gap も Fluid 化 */
    gap: clamp(8px, calc(8px + 2 * (100vw - 1441px) / 479), 10px) !important;
  }

  /* SVGアイコンも Fluid 化 */

  .filter-button svg {
    width: clamp(
      16px,
      calc(16px + 2 * (100vw - 1441px) / 479),
      18px
    ) !important;
    height: clamp(
      16px,
      calc(16px + 2 * (100vw - 1441px) / 479),
      18px
    ) !important;
  }

  /* Member Section テキスト: 1441px以上で Fluid Scaling */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .member-section .member-subtitle.xl\:text-fluid-xl {
    font-size: clamp(
      20px,
      calc(20px + ((100vw - 1441px) * 0.0083)),
      9999px
    ) !important;
  }

  /* Product Overview Section テキスト: 1441px以上で Fluid Scaling */

  #product-overview .member-subtitle.xl\:text-fluid-xl {
    font-size: clamp(
      20px,
      calc(20px + ((100vw - 1441px) * 0.0083)),
      9999px
    ) !important;
  }

  #product-overview .member-section-body {
    font-size: clamp(
      16px,
      calc(16px + 4 * (100vw - 1440px) / 480),
      20px
    ) !important;
    line-height: 2 !important;
  }
}

/* Environment card titles: align with body text fluid sizing */

/* font-size 定義は Typography – Font Size セクションに移動 */

/* Environment Card: タイトル */

.environment-card-title {
  font-size: 18px !important;
  line-height: 2 !important;
  letter-spacing: 0.025em !important;
}

/* Environment card subtitles: match member-card-role sizing */

/* font-size 定義は Typography – Font Size セクションに移動 */

/* Environment Card: サブタイトル */

.environment-card-subtitle {
  font-size: 14px !important;
  line-height: 1.1 !important;
  color: var(--color-text-gray-env) !important;
}

@media (min-width: 1440px) {
  .environment-card-title {
    font-size: clamp(
      18px,
      calc(18px + 4 * (100vw - 1440px) / 480),
      9999px
    ) !important;
  }

  .environment-card-subtitle {
    font-size: clamp(
      14px,
      calc(14px + (100vw - 1440px) * 0.01),
      19px
    ) !important;
  }
}

@media (max-width: 599px) {
  .index-page #recruit-section .flex.flex-col.gap-fluid-8 {
    gap: 60px !important;
  }

  .index-page #recruit-section .flex.flex-col.gap-fluid-4 {
    gap: 12px !important;
  }

  /* Recruit section buttons should span full width on very small screens */

  .index-page #recruit-section .recruit-action-group a {
    max-width: none !important;
    width: 100% !important;
  }
}

@media (min-width: 599px) {
  .index-page #recruit-section .recruit-action-group a {
    min-height: 48px !important;
  }
}

@media (max-width: 375px) {
  .message-overlay-title > p.c-body-text {
    font-size: 0.75rem !important;
  }

  .bg-hero-background-color {
    max-height: 80vh !important;
  }

  .site-footer .footer-links a.text-sm {
    font-size: 12px !important;
  }

  /* Footer gap-53: 375px以下で40pxに */

  .site-footer .gap-53 {
    gap: 40px !important;
  }

  /* Footer main row gap: 375px以下で40pxに */

  .footer-main-row {
    gap: 40px !important;
  }

  /* Footer grid nav: margin-top削除 */

  .footer-grid-nav {
    margin-top: 0 !important;
  }

  /* Footer gap-6: 375px以下で12pxに */

  .site-footer .gap-6 {
    gap: 12px !important;
  }
}

@media (max-width: 767px) {
  #mobile-nav a {
    font-size: 16px !important;
  }
}

/* ▼ Scrollの縦書き（正しい方向へ） */

.writing-vertical,
.scroll-indicator,
.scroll-arrow {
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  transform: rotate(0deg) !important;
  /* ←180度回転を解除！ */
  display: inline-block;
}

/* Scrollテキスト位置の細かな調整（必要あれば） */

.scroll-indicator {
  letter-spacing: 0.1em;
}

/* 矢印は上を向ける */

.scroll-arrow {
  transform: rotate(0deg) !important;
  /* ←こちらも 0 度 */
}

/* Hero scroll indicator: keep visible at bottom-left above imagery */

#hero-section .hero-scroll-indicator {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  left: 20px !important;
  bottom: 85px !important;
  z-index: 30 !important;
}

@media (max-width: 767px) {
  #hero-section .hero-scroll-indicator {
    left: 16px !important;
    bottom: 16px !important;
  }
}

/* Android対応: Tailwindのfont-en設定でRobotoが優先されるため、個別の@supportsルールは不要 */

/* ==== Hero 大見出し調整 ==== */

/* 1440px以上 → もっと下げる */

@media (min-width: 1440px) {
  .hero-main-heading {
    font-weight: 700;
    /* 太さは維持 */
  }
}

/* タブレット以下 → 少し細く */

@media (max-width: 1024px) {
  .hero-main-heading {
    font-weight: 500;
    /* mediumへ調整 */
  }

  .index-page #hero-section h1 {
    font-weight: 500 !important;
    /* medium */
  }
}

/* スマホ → 極太回避＋可読性向上 */

@media (max-width: 480px) {
  .hero-main-heading {
    font-weight: 500;
    line-height: 1.25;
    /* 詰まり防止 */
  }
}

/* Footer: Tablet & Mobile Layout (1023px and below) */

@media (max-width: 1024px) {
  /* Footer padding: タブレット以下で上下80px */

  .site-footer {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }

  /* Main row: vertical layout, left-aligned */

  .footer-main-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 32px !important;
  }

  /* Navigation grid: left-aligned */

  .footer-grid-nav {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .footer-grid-nav h4,
  .footer-grid-nav a,
  .footer-grid-nav p {
    text-align: left !important;
  }

  /* Buttons: left-aligned, full width */

  .footer-buttons {
    align-items: flex-start !important;
    width: 100% !important;
  }

  /* Links: left-aligned */

  .footer-links {
    justify-content: flex-start !important;
    text-align: left !important;
    margin-top: 0 !important;
  }

  .footer-links a {
    text-align: left !important;
  }

  /* Footer gap: タブレット以下で40pxに */

  .site-footer .gap-16\.25 {
    gap: 40px !important;
  }

  /* Copyright: left-aligned */

  .footer-copyright {
    text-align: left !important;
  }

  /* Copyright p: margin-top削除 */

  .footer-copyright p {
    margin-top: 0 !important;
  }

  /* Logo block: left-aligned container */

  .site-footer-logo {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    align-self: flex-start !important;
  }

  /* Logo text ("採用サイト"): right-aligned within logo width */

  .site-footer-logo > div > p {
    align-self: center !important;
    text-align: right !important;
  }

  .site-footer-logo p {
    width: auto !important;
    align-self: flex-end !important;
  }
}

/* ===========================
   Footer mobile normalization
   =========================== */

/* Base: 全ページ共通（index.htmlを正とする） */

.footer-main-row {
  align-items: flex-start !important;
}

.footer-main-row .site-footer-logo {
  align-items: flex-start !important;
  text-align: left !important;
}

.footer-main-row .site-footer-logo p {
  text-align: right !important;
  width: 100%;
}

/* タブレット以下（〜767px）: フッターロゴ横並び */

@media (max-width: 767px) {
  /* Footer logo: 横並び、上下中央揃え、gap 11px */

  .site-footer-logo > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 11px !important;
  }

  /* Footer logo内のpタグ: 横並び時の配置をリセット（中央揃えを確実に） */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .site-footer-logo > div > p {
    align-self: center !important;
    text-align: left !important;
    font-size: 12px !important;
  }
}

/* スマホ（〜599px）: index.htmlを基準に全ページ統一 */

@media (max-width: 599px) {
  /* Logo positioning */

  .site-footer-logo {
    margin-left: 0 !important;
  }

  /* Main row: full width children */

  .footer-main-row > * {
    width: 100% !important;
  }

  /* Navigation grid: full width, spacing */

  .footer-grid-nav {
    width: 100% !important;
  }

  /* Buttons: full width, spacing */

  .footer-buttons {
    width: 100% !important;
    margin-top: 24px !important;
  }

  /* Typography: unified font sizes (index.html基準) */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .footer-main-row h4,
  .footer-grid-nav h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
    /* font-semibold */
    line-height: 1.5 !important;
  }

  /* Links and text: unified sizing */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .footer-main-row a,
  .footer-main-row p,
  .footer-grid-nav a,
  .footer-grid-nav p,
  .footer-grid-nav li a,
  .footer-grid-nav li p,
  .footer-links a {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  /* Navigation links: ensure consistent styling */

  .footer-grid-nav ul li a,
  .footer-grid-nav ul li a p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    /* font-medium */
  }

  /* Social links: unified spacing */

  .footer-links {
    gap: 14px !important;
  }

  /* Copyright: unified sizing */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .footer-copyright p {
    font-size: 12px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
  }

  /* Site footer copyright: font-weight 600 */

  .site-footer-copyright p {
    font-weight: 600 !important;
  }

  /* Ensure all footer text elements use consistent line-height */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .site-footer .text-sm,
  .footer-main-row .text-sm {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
}

/* Footer nav <p> の余白を完全リセット */

.site-footer .footer-grid-nav p {
  margin: 0 !important;
}

/* スマホ（599px以下）の footer テキストを index.html に統一 */

/* font-size 定義は Typography – Font Size セクションに移動 */

@media (max-width: 599px) {
  .footer-grid-nav ul li p {
    font-size: 15px !important;
    font-weight: 500 !important;
    /* = font-medium */
    line-height: 1.5 !important;
  }
}

/* ▼ index.html の footer スマホ調整を全ページ共通化 ▼ */

/* font-size 定義は Typography – Font Size セクションに移動 */

@media (max-width: 599px) {
  #site-footer .footer-grid-nav ul li a,
  #site-footer .footer-grid-nav ul li p {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
  }

  #site-footer .footer-main-row,
  #site-footer .footer-buttons {
    align-items: flex-start !important;
    width: 100% !important;
  }

  #site-footer .footer-grid-nav {
    gap: 20px !important;
  }
}

@media (min-width: 768px) {
  :root {
    --site-header-h: 87px;
  }

  /* Hero: desktop/tablet fixes */

  #hero-section {
    height: calc(100vh - var(--site-header-h)) !important;
    min-height: calc(100vh - var(--site-header-h)) !important;
    max-height: calc(100vh - var(--site-header-h)) !important;
  }

  /* 768px-1139pxの範囲のみ適用（1140px以上では除外） */

  @media (min-width: 768px) and (max-width: 1139px) {
    .index-page #hero-section > div.absolute.top-0.right-0.z-10,
    #hero-section > div.absolute.top-0.z-10 {
      left: 63px !important;
      right: 0 !important;
      width: auto !important;
      height: 100% !important;
      min-height: 100% !important;
      max-height: 100% !important;
    }
  }

  /* 768px-1439pxの範囲で picture/img の幅を親要素に委ねる */

  @media (min-width: 768px) and (max-width: 1439px) {
    .index-page #hero-section > div.absolute.top-0.right-0.z-10 > picture,
    .index-page #hero-section > div.absolute.top-0.right-0.z-10 > picture > img,
    .index-page #hero-section > div.absolute.top-0.right-0.z-10 > img,
    #hero-section > div.absolute.top-0.z-10 > picture,
    #hero-section > div.absolute.top-0.z-10 > picture > img,
    #hero-section > div.absolute.top-0.z-10 > img {
      max-width: 100% !important;
      height: 100% !important;
      -o-object-fit: cover !important;
         object-fit: cover !important;
      -o-object-position: top !important;
         object-position: top !important;
    }
  }
}

/* =========================================================
   フッタースタイル: index.html <style>タグから抽出
   対象: 全ページ共通（フッター）
   用途: index.htmlの<style>タグから移動したフッター関連スタイル
   備考: 一時対応の可能性あり
   ========================================================= */

/* フッターリンク（footer-links）の文字サイズを 599px 以下で小さく */

@media (max-width: 599px) {
  footer.site-footer .footer-links a.text-sm,
  .site-footer .footer-links a.text-sm {
    font-size: 12px !important;
  }

  /* フッターの padding-top を 60px に */

  footer.site-footer {
    padding-top: 60px !important;
  }

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .index-page .tech-blog-card h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.7 !important;
  }
}

/* Footer Styles END */

/* =========================================================
   ファーストビュー: 767px以下で画面いっぱいに表示
   対象: index.html（Heroセクション）
   用途: スマホでのファーストビューを画面いっぱいに、スマホメニューを写真の上に表示
   ========================================================= */

@media (max-width: 767px) {
  /* ファーストビューを画面いっぱいに表示（index.htmlのstyleタグを上書き） */

  .index-page #hero-section {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
  }

  /* 背面の緑領域も画面いっぱいに（index.htmlのstyleタグを上書き） */

  .index-page
    #hero-section
    > div.absolute.inset-x-0.top-0.h-815.xl\:h-fluid-707.bg-no-repeat.bg-cover.bg-right-top.z-0.bg-hero-background-color,
  .index-page
    .absolute.inset-x-0.top-0.h-815.xl\:h-fluid-815.bg-no-repeat.bg-cover.bg-right-top.z-0.bg-hero-background-color {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 80vh !important;
  }

  /* ファーストビュー画像も画面いっぱいに（index.htmlのstyleタグを上書き） */

  .index-page #hero-section > div.absolute.top-0.right-0.z-10 {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
  }

  .index-page #hero-section > div.absolute.top-0.right-0.z-10 > picture,
  .index-page #hero-section > div.absolute.top-0.right-0.z-10 > picture > img {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    -o-object-position: top !important;
       object-position: top !important;
  }

  /* ヘッダーをファーストビューの上に重ね、スクロール時も常に追従 */

  #site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
  }

  /* スマホメニューはグローバル定義の z-index (49999/50000) を使用 */
}

/* 599px以下: スマホ実表示領域（UI除外）で100%高さに */

@media (max-width: 599px) {
  .index-page #hero-section {
    height: var(--viewport-height, 100svh) !important;
    min-height: var(--viewport-height, 100svh) !important;
    max-height: var(--viewport-height, 100svh) !important;
  }

  .index-page
    #hero-section
    > div.absolute.inset-x-0.top-0.h-815.xl\:h-fluid-707.bg-no-repeat.bg-cover.bg-right-top.z-0.bg-hero-background-color,
  .index-page
    .absolute.inset-x-0.top-0.h-815.xl\:h-fluid-815.bg-no-repeat.bg-cover.bg-right-top.z-0.bg-hero-background-color {
    height: var(--viewport-height, 100svh) !important;
    min-height: var(--viewport-height, 100svh) !important;
    max-height: 80vh !important;
  }

  .index-page #hero-section > div.absolute.top-0.right-0.z-10 {
    height: var(--viewport-height, 100svh) !important;
    min-height: var(--viewport-height, 100svh) !important;
    max-height: var(--viewport-height, 100svh) !important;
  }

  .index-page #hero-section > div.absolute.top-0.right-0.z-10 > picture,
  .index-page #hero-section > div.absolute.top-0.right-0.z-10 > picture > img {
    height: var(--viewport-height, 100svh) !important;
    width: 100vw !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    -o-object-position: top !important;
       object-position: top !important;
  }

  /* 599px以下で緑背景領域を非表示（ファーストビューの下に緑が見えないように） */

  .index-page .bg-hero-background-color,
  body > div.bg-hero-background-color {
    display: none !important;
  }
}

/* =========================================================
   product.html: Interview-sectionのカードレイアウトをindex.htmlと同じに
   対象: product.html
   用途: タブレットサイズ以下でproduct.htmlのInterview-sectionをindex.htmlと同じレイアウトに統一
   備考: 一時対応の可能性あり
   ========================================================= */

@media (max-width: 1024px) {
  /* product.htmlのInterview-sectionのカードのblockクラスを削除（index.htmlと同じflexレイアウトに） */

  .product-page #interview-section .interview-card,
  .product-page .interview-section .interview-card {
    display: flex !important;
  }

  /* product.htmlのInterview-sectionのカード内テキストスタイルをindex.htmlと同じに */

  .product-page
    #interview-section
    .interview-card-content
    .text-xs.text-gray-400,
  .product-page
    .interview-section
    .interview-card-content
    .text-xs.text-gray-400,
  .product-page #interview-section .interview-card-content p.text-xs,
  .product-page .interview-section .interview-card-content p.text-xs {
    font-family: "Noto Sans JP", sans-serif !important;
  }

  /* product.htmlのInterview-sectionのカードのサイズとスタイルをindex.htmlと同じに */

  @media (min-width: 1024px) {
    .product-page #interview-section .interview-card-image,
    .product-page .interview-section .interview-card-image {
      width: 100% !important;
      height: 201px !important;
    }
  }

  /* product.htmlのInterview-sectionのカードコンテンツの高さをindex.htmlと同じに */

  .product-page #interview-section .interview-card-content,
  .product-page .interview-section .interview-card-content {
    width: 100% !important;
    height: auto !important;
  }

  @media (min-width: 1024px) {
    .product-page #interview-section .interview-card-content,
    .product-page .interview-section .interview-card-content {
      min-height: 186px !important;
    }
  }

  @media (max-width: 1024px) {
    .product-page #interview-section .interview-card-content,
    .product-page .interview-section .interview-card-content {
      min-height: auto !important;
    }
  }

  @media (min-width: 768px) and (max-width: 1024px) {
    .product-page #interview-section .interview-card-image,
    .product-page .interview-section .interview-card-image {
      width: 50% !important;
      height: 245px !important;
      /* md:h-61.25 = 245px */
    }

    .product-page #interview-section .interview-card-content,
    .product-page .interview-section .interview-card-content {
      width: 50% !important;
      height: 245px !important;
      /* 画像部分と同じ高さ */
    }
  }
}

/* 767px以下でproduct.htmlのInterview-sectionのカードレイアウトをindex.htmlと同じにする */

@media (max-width: 767px) {
  .product-page #interview-section .interview-card,
  .product-page .interview-section .interview-card {
    display: flex !important;
    flex-direction: column !important;
  }

  .product-page #interview-section .interview-card-image,
  .product-page .interview-section .interview-card-image {
    width: 100% !important;
    height: auto !important;
  }

  .product-page #interview-section .interview-card-image img,
  .product-page .interview-section .interview-card-image img {
    width: 100% !important;
    height: auto !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }

  .product-page #interview-section .interview-card-content,
  .product-page .interview-section .interview-card-content {
    width: 100% !important;
    height: auto !important;
  }
}

/* 375px以下でproduct.htmlのInterview-sectionのカードコンテンツのパディング調整 */

@media (max-width: 375px) {
  .product-page #interview-section .interview-card-content,
  .product-page .interview-section .interview-card-content {
    padding: 20px !important;
  }
}

/* =========================================================
   business.html: Interview-sectionのカードレイアウトをindex.htmlと同じに
   対象: business.html
   用途: タブレットサイズ以下でbusiness.htmlのInterview-sectionをindex.htmlと同じレイアウトに統一
   備考: 一時対応の可能性あり
   ========================================================= */

@media (max-width: 1024px) {
  /* business.htmlのInterview-sectionのカード内テキストスタイルをindex.htmlと同じに */

  .business-page
    #interview-section
    .interview-card-content
    .text-xs.text-gray-400,
  .business-page
    .interview-section
    .interview-card-content
    .text-xs.text-gray-400,
  .business-page #interview-section .interview-card-content p.text-xs,
  .business-page .interview-section .interview-card-content p.text-xs {
    font-family: "Noto Sans JP", sans-serif !important;
  }

  /* business.htmlのInterview-sectionのカードコンテンツの高さをindex.htmlと同じに */

  .business-page #interview-section .interview-card-content,
  .business-page .interview-section .interview-card-content {
    width: 100% !important;
    height: auto !important;
  }

  @media (min-width: 1024px) {
    .business-page #interview-section .interview-card-content,
    .business-page .interview-section .interview-card-content {
      min-height: 186px !important;
    }
  }

  @media (max-width: 1024px) {
    .business-page #interview-section .interview-card-content,
    .business-page .interview-section .interview-card-content {
      min-height: auto !important;
    }
  }

  @media (min-width: 768px) and (max-width: 1024px) {
    .business-page #interview-section .interview-card-image,
    .business-page .interview-section .interview-card-image {
      width: 50% !important;
      height: 245px !important;
      /* md:h-61.25 = 245px */
    }

    .business-page #interview-section .interview-card-content,
    .business-page .interview-section .interview-card-content {
      width: 50% !important;
      height: 245px !important;
      /* 画像部分と同じ高さ */
    }
  }
}

/* 599px以下でbusiness.htmlのInterview-sectionのカードレイアウトをindex.htmlと同じにする */

@media (max-width: 599px) {
  .business-page #interview-section .interview-card,
  .business-page .interview-section .interview-card {
    display: flex !important;
    flex-direction: column !important;
  }

  .business-page #interview-section .interview-card-content,
  .business-page .interview-section .interview-card-content {
    width: 100% !important;
    height: auto !important;
  }
}

/* 375px以下でbusiness.htmlのInterview-sectionのカードレイアウトをindex.htmlと同じにする */

@media (max-width: 375px) {
  .business-page #interview-section .interview-card,
  .business-page .interview-section .interview-card {
    display: flex !important;
    flex-direction: column !important;
  }

  .business-page #interview-section .interview-card-content,
  .business-page .interview-section .interview-card-content {
    width: 100% !important;
    height: auto !important;
    padding: 20px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
  }
}

/* =========================================================
   corporate.html: Interview-sectionのカードレイアウトをindex.htmlと同じに
   対象: corporate.html
   用途: タブレットサイズ以下でcorporate.htmlのInterview-sectionをindex.htmlと同じレイアウトに統一
   備考: 一時対応の可能性あり
   ========================================================= */

@media (max-width: 1024px) {
  /* corporate.htmlのInterview-sectionのカードのblockクラスを削除（index.htmlと同じflexレイアウトに） */

  .corporate-page #interview-section .interview-card,
  .corporate-page .interview-section .interview-card {
    display: flex !important;
  }

  /* corporate.htmlのstyleタグ内の375px〜1023pxでの横並び設定を上書き */

  .corporate-page #interview-section .interview-card,
  .corporate-page .interview-section .interview-card {
    flex-direction: column !important;
  }

  .corporate-page #interview-section .interview-card > div:first-child,
  .corporate-page .interview-section .interview-card > div:first-child,
  .corporate-page #interview-section .interview-card > div:nth-child(2),
  .corporate-page .interview-section .interview-card > div:nth-child(2) {
    width: 100% !important;
  }

  /* corporate.htmlのInterview-sectionのカード内テキストスタイルをindex.htmlと同じに */

  .corporate-page
    #interview-section
    .interview-card-content
    .text-xs.text-gray-400,
  .corporate-page
    .interview-section
    .interview-card-content
    .text-xs.text-gray-400,
  .corporate-page #interview-section .interview-card-content p.text-xs,
  .corporate-page .interview-section .interview-card-content p.text-xs {
    font-family: "Noto Sans JP", sans-serif !important;
  }

  /* corporate.htmlのInterview-sectionのカードコンテンツの高さをindex.htmlと同じに */

  .corporate-page #interview-section .interview-card-content,
  .corporate-page .interview-section .interview-card-content {
    width: 100% !important;
    height: auto !important;
  }

  @media (min-width: 1024px) {
    .corporate-page #interview-section .interview-card-content,
    .corporate-page .interview-section .interview-card-content {
      min-height: 186px !important;
    }
  }

  @media (max-width: 1024px) {
    .corporate-page #interview-section .interview-card-content,
    .corporate-page .interview-section .interview-card-content {
      min-height: auto !important;
    }
  }

  @media (min-width: 768px) and (max-width: 1024px) {
    .corporate-page #interview-section .interview-card,
    .corporate-page .interview-section .interview-card {
      flex-direction: row !important;
    }

    .corporate-page #interview-section .interview-card-image,
    .corporate-page .interview-section .interview-card-image {
      width: 50% !important;
      height: 245px !important;
      /* md:h-61.25 = 245px */
    }

    .corporate-page #interview-section .interview-card-content,
    .corporate-page .interview-section .interview-card-content {
      width: 50% !important;
      height: 245px !important;
      /* 画像部分と同じ高さ */
    }
  }
}

@media (max-width: 599px) {
  .corporate-page #interview-section .interview-card,
  .corporate-page .interview-section .interview-card {
    display: flex !important;
    flex-direction: column !important;
  }

  .corporate-page #interview-section .interview-card-content,
  .corporate-page .interview-section .interview-card-content {
    width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 375px) {
  .corporate-page #interview-section .interview-card,
  .corporate-page .interview-section .interview-card {
    display: flex !important;
    flex-direction: column !important;
  }

  .corporate-page #interview-section .interview-card-content,
  .corporate-page .interview-section .interview-card-content {
    width: 100% !important;
    height: auto !important;
    padding: 20px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
  }
}

/* =========================================================
   corporate.html: Member-sectionのカードレイアウトをindex.htmlと同じに
   対象: corporate.html
   用途: タブレットサイズ以下でcorporate.htmlのMember-sectionをindex.htmlと同じレイアウトに統一
   備考: 一時対応の可能性あり
   ========================================================= */

@media (max-width: 1024px) {
  /* corporate.htmlのMember-sectionのカード内h3のfont-weightをindex.htmlと同じfont-semiboldに */

  .corporate-page #member-section .member-card-name,
  .corporate-page .member-section .member-card-name {
    font-weight: 600 !important;
    /* font-semibold */
  }

  /* corporate.htmlのMember-sectionのカードのblockクラスを削除（index.htmlと同じflexレイアウトに） */

  .corporate-page #member-section .member-card,
  .corporate-page .member-section .member-card {
    display: flex !important;
  }

  /* corporate.htmlのstyleタグ内の375px〜767pxでの横並び設定を上書き（index.htmlと同じ縦並びに） */

  @media (min-width: 375px) and (max-width: 767px) {
    .corporate-page #member-section .member-card,
    .corporate-page .member-section .member-card {
      flex-direction: column !important;
    }

    .corporate-page #member-section .member-card > div:first-child,
    .corporate-page .member-section .member-card > div:first-child,
    .corporate-page #member-section .member-card > div:nth-child(2),
    .corporate-page .member-section .member-card > div:nth-child(2) {
      width: 100% !important;
    }
  }

  /* 768px以上1023px以下ではindex.htmlと同じ縦積みレイアウト（2列グリッド用） */

  @media (min-width: 768px) and (max-width: 1024px) {
    .corporate-page #member-section .member-card,
    .corporate-page .member-section .member-card {
      flex-direction: column !important;
    }

    .corporate-page #member-section .member-card > div:first-child,
    .corporate-page .member-section .member-card > div:first-child,
    .corporate-page #member-section .member-card > div:nth-child(2),
    .corporate-page .member-section .member-card > div:nth-child(2) {
      width: 100% !important;
    }
  }
}

/* 330px以下でh1のfont-sizeを少し小さくする - index.htmlのstyleタグ内の設定を上書き */

@media (max-width: 330px) {
  .index-page #hero-section h1 span.text-32,
  .index-page #hero-section h1 span.block.text-32 {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
  }

  /* より詳細度の高いセレクタでindex.htmlのstyleタグ内の設定を上書き */

  main.index-page #hero-section h1 span.max-\[375px\]:block.text-58,
  main.index-page
    #hero-section
    h1.hero-main-heading
    span.max-\[375px\]:block.text-58,
  main.index-page
    #hero-section
    h1.hero-main-heading
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page
    #hero-section
    .hero-heading
    h1.hero-main-heading
    span.max-\[375px\]:block.text-58,
  main.index-page
    #hero-section
    .hero-heading
    h1.hero-main-heading
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page
    #hero-section
    div.hero-heading
    h1.hero-main-heading
    span.max-\[375px\]:block.text-58,
  main.index-page
    #hero-section
    div.hero-heading
    h1.hero-main-heading
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page
    #hero-section
    div.hero-heading.text-right
    h1.hero-main-heading.text-white
    span[class*="max-[375px]:block"][class*="text-58"],
  main.index-page
    #hero-section
    div.absolute.hero-heading
    h1.hero-main-heading
    span[class*="max-[375px]:block"][class*="text-58"],
  html body main.index-page #hero-section h1 span.max-\[375px\]:block.text-58,
  html
    body
    main.index-page
    #hero-section
    h1.hero-main-heading
    span.max-\[375px\]:block.text-58 {
    font-size: 40px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  .index-page #hero-section h1 span.text-58,
  .index-page #hero-section h1 span.max-\[375px\]:hidden.block.text-58 {
    font-size: 40px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }
}

/* 330px以下でh1のfont-sizeを少し小さくする（追加の詳細度の高いセレクタ） */

@media (max-width: 330px) {
  /* index.htmlのstyleタグ内の599px以下の設定を上書きするため、より詳細度の高いセレクタを使用 */

  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page.font-en
    #hero-section
    div.absolute.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    div.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page.font-en
    #hero-section
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }
}

/* 599px以下でproduct-image-mobileのpt-8を削除 */

@media (max-width: 599px) {
  .index-page .block.lg\:hidden.pt-8,
  .index-page div.block.lg\:hidden.pt-8 {
    padding-top: 0 !important;
  }
}

/* 1023px以下でenvironment-card-titleのline-heightを1.6に変更 */

@media (max-width: 1024px) {
  .index-page #environment-section .environment-card-title {
    line-height: 1.6 !important;
  }
}

/* 閉じるボタンは親のtransformの影響を受けないようにする */

#mobile-nav .mobile-menu-close {
  transform: translateY(0) !important;
  transition: none !important;
}

/* 1439px以下: memberカードの英語表記を統一 */

/* font-size 定義は Typography – Font Size セクションに移動 */

@media (max-width: 1439px) {
  .member-section .member-card-name-en {
    font-family: "Inter", "Inter var", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
  }

  /* index.html member cards (念のため上書き) */

  .index-page #member-section .member-card-name-en {
    font-family: "Inter", "Inter var", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
  }
}

/* 768px〜1023pxでもmt-107を維持 */

@media (min-width: 768px) and (max-width: 1024px) {
  .mt-0.lg\:mt-107 {
    margin-top: 107px !important;
  }
}

/* Interview cards grid gap: 1440px以下は24px、1441px以上は拡大 */

@media (max-width: 1440px) {
  .interview-section
    .flex.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: 24px !important;
  }

  .interview-card-list {
    gap: 24px !important;
  }
}

@media (min-width: 1440px) {
  .interview-card-list {
    gap: 24px !important;
  }
}

@media (min-width: 1441px) {
  .interview-section
    .flex.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px) !important;
  }

  .interview-card-list {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    ) !important;
  }
}

/* Work cards grid gap: 1440px以下は24px、1441px以上は拡大 */

@media (max-width: 1440px) {
  .work-section
    .flex.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px !important;
  }

  .work-section
    .flex.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px !important;
  }
}

@media (min-width: 1440px) {
  .work-section
    .flex.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px !important;
  }
}

@media (min-width: 1441px) {
  .work-section
    .flex.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px) !important;
  }

  .work-section
    .flex.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    ) !important;
  }
}

/* Member cards grid gap: 1440px以下は24px、1441px以上は拡大 */

@media (max-width: 1440px) {
  .member-section
    .flex.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px !important;
  }
}

@media (min-width: 1440px) {
  .member-section
    .flex.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px !important;
  }
}

@media (min-width: 1441px) {
  .member-section
    .flex.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    ) !important;
  }
}

/* =========================================================
   Environment SP 最適化
   対象: environment.html
   用途: スマホサイズでの環境セクション（評価制度、キャリアパス、制度表）のレイアウト最適化
   ========================================================= */

@media (max-width: 767px) {
  /* 評価制度（制度の考え方） */

  #environment-section .evaluation-concept-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 24px !important;
    padding-bottom: 20px !important;
  }

  #environment-section .evaluation-concept-figure {
    width: 100% !important;
    max-width: 200px !important;
    height: auto !important;
    flex-shrink: 1 !important;
  }

  #environment-section .evaluation-concept-image {
    width: 100% !important;
    max-width: 200px !important;
    height: auto !important;
  }

  #environment-section .evaluation-concept-wrapper {
    width: 100% !important;
  }

  #environment-section .evaluation-concept-text {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  #environment-section .evaluation-concept-text br {
    display: none !important;
  }

  /* キャリアパス */

  #environment-section .grade-structure-block > .flex.items-start.gap-8 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  #environment-section .career-path-figure {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 32px !important;
    height: auto !important;
    flex-shrink: 1 !important;
  }

  #environment-section .career-path-figure img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
  }

  #environment-section .career-path-description-wrapper {
    width: 100% !important;
    gap: 16px !important;
  }

  #environment-section .career-path-description {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  #environment-section .career-path-list {
    padding-left: 16px !important;
    margin-left: 0 !important;
  }

  /* 制度表 / 評価区分表 */

  #environment-section .environment-work-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    display: table !important;
  }

  #environment-section .environment-work-table thead {
    display: table-header-group !important;
  }

  #environment-section .grade-structure-td {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #environment-section .environment-work-table tbody {
    display: table-row-group !important;
  }

  #environment-section .environment-work-table th,
  #environment-section .environment-work-table td {
    display: table-cell !important;
    width: auto !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
  }

  #environment-section .environment-work-table th {
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
  }

  #environment-section .grade-structure-wrapper {
    overflow-x: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    gap: 16px !important;
  }

  #environment-section .grade-structure-wrapper table {
    margin-bottom: 0 !important;
    display: table !important;
    min-width: 500px !important;
    width: 100% !important;
  }

  #environment-section .grade-structure-wrapper table th,
  #environment-section .grade-structure-wrapper table td {
    display: table-cell !important;
  }

  #environment-section .grade-structure-wrapper table tbody {
    display: table-row-group !important;
  }

  #environment-section .grade-structure-wrapper table tr {
    display: table-row !important;
  }

  #environment-section .grade-structure-wrapper table th {
    width: 240px !important;
    min-width: 240px !important;
    font-weight: normal !important;
    text-align: center !important;
    border-right: 1px solid var(--color-border-default) !important;
  }

  #environment-section .grade-structure-wrapper table td {
    width: auto !important;
  }

  #environment-section .grade-structure-wrapper .grade-structure-table th {
    font-weight: normal !important;
    border-right: 1px solid var(--color-border-default) !important;
  }

  .faq-list-wrapper {
    gap: 16px !important;
  }
}

/* =========================================================
   Workカード：768〜1023pxのときだけ角丸とborderを削除
   対象: index.html（Workセクション）
   用途: タブレットサイズでのWorkカードの角丸とborderを削除
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
  /* 角丸は4px固定のためradiusはリセットしない */

  /* ① 画像ブロックの角丸を強制ゼロにする */

  .work-card .work-card-image,
  .work-card .work-card-image img {
    border-radius: 0 !important;
  }

  /* ② テキスト側の角丸と border をすべて削除 */

  .work-card .work-card-content {
    border: none !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ③ Interviewカードコンテンツのpaddingを削除 */

  .interview-card .interview-card-content {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ⑤ inline-style の width: 50% を上書き（radiusには無関係だが安全のため） */

  .work-card > div {
    width: 50% !important;
  }
}

/* =========================================================
   Workカード：767px以下では強制的に縦組みに戻す
   対象: index.html（Workセクション）
   用途: スマホサイズでのWorkカードを縦並びレイアウトに変更
   ========================================================= */

@media (max-width: 767px) {
  .work-card {
    flex-direction: column !important;
  }

  .work-card > div {
    width: 100% !important;
  }

  /* Workカード画像の角丸を調整 */

  .work-card-image {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  /* Workカードコンテンツの角丸を調整 */

  .work-card-content {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    border-top: none !important;
  }
}

/* =========================================================
   Interviewカード：767px以下では強制的に縦組みに戻す
   対象: index.html（Interviewセクション）、interview.html
   用途: スマホサイズでのInterviewカードを縦並びレイアウトに変更
   ========================================================= */

@media (max-width: 767px) {
  .interview-card {
    flex-direction: column !important;
  }

  .interview-card > div {
    width: 100% !important;
  }

  /* Interviewカード画像の角丸を調整 */

  .interview-card-image {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  /* Interviewカードコンテンツの角丸を調整 */

  .interview-card-content {
    /* 角丸サイズは常に4pxに固定（上下分離時も同サイズ） */
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    border-top: none !important;
  }
}

/* =====================================================
   Member Card Layout & Border Control
   対象: 全ページ（Memberセクション）
   用途: メンバーカードのレイアウトとボーダー制御（SP/Tablet/PCで異なる）
   備考: !importantを削除し、適切な優先度で実装
===================================================== */

/* 共通 */

.member-section .member-card-content {
  box-sizing: border-box;
}

/* 599px以下：縦並びレイアウト */

@media (max-width: 599px) {
  .member-section .member-card {
    flex-direction: column;
  }

  .member-section .member-card > div:first-child {
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .member-section .member-card > div:nth-child(2) {
    width: 100%;
  }

  .member-section .member-card-content {
    border-top: 0;
    border-left: 1px solid var(--color-border-default);
    border-right: 1px solid var(--color-border-default);
    border-bottom: 1px solid var(--color-border-default);
    border-radius: 0 0 4px 4px;
  }

  /* 画像コンテナとimgタグの角丸：上側のみ4px、左下は0 */

  .member-section .member-card .member-card-image,
  .member-section a.member-card .member-card-image,
  .member-section .member-card > div:first-child.member-card-image {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .member-section .member-card .member-card-image img,
  .member-section a.member-card .member-card-image img,
  .member-section .member-card > div:first-child.member-card-image img,
  .member-section .member-card > div:first-child img {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/* SP（600px〜767px）：横並び・左側のみ角丸（4px 0 0 4px） */

@media (min-width: 600px) and (max-width: 767px) {
  .member-section .member-card {
    flex-direction: row;
  }

  .member-section .member-card > div:first-child {
    width: 50%;
    height: auto;
    min-height: auto;
    max-height: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 0;
  }

  .member-section .member-card > div:nth-child(2) {
    width: 50%;
  }

  .member-section .member-card-content {
    border-left: 0;
    border-top: 1px solid var(--color-border-default);
    border-right: 1px solid var(--color-border-default);
    border-bottom: 1px solid var(--color-border-default);
    border-radius: 0 4px 4px 0;
  }

  /* 画像コンテナとimgタグの角丸：左側のみ4px（右上を確実に0にする） */

  .member-section .member-card .member-card-image,
  .member-section a.member-card .member-card-image,
  .member-section .member-card > div:first-child.member-card-image {
    border-top-left-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 0;
  }

  .member-section .member-card .member-card-image img,
  .member-section a.member-card .member-card-image img,
  .member-section .member-card > div:first-child.member-card-image img,
  .member-section .member-card > div:first-child img {
    border-top-left-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 0;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
    width: 100%;
  }
}

/* md:h-61.25の高さ指定をメンバーカードの写真表示コンテナで無効化 */

@media (min-width: 768px) {
  .member-section .member-card > div:first-child.md\:h-61\.25,
  .member-section .member-card > div:first-child {
    height: auto !important;
  }
}

/* Tablet（768px〜1024px）：縦積み・上側のみ角丸（4px 4px 0 0） */

@media (min-width: 768px) and (max-width: 1024px) {
  .member-section .member-card {
    flex-direction: column;
  }

  .member-section .member-card > div:first-child {
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .member-section .member-card > div:nth-child(2) {
    width: 100%;
  }

  .member-section .member-card-content {
    border: 1px solid var(--color-border-default);
    border-radius: 0 0 4px 4px;
  }

  /* 画像コンテナとimgタグの角丸：上側のみ4px */

  .member-section .member-card .member-card-image,
  .member-section a.member-card .member-card-image,
  .member-section .member-card > div:first-child.member-card-image {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .member-section .member-card .member-card-image img,
  .member-section a.member-card .member-card-image img,
  .member-section .member-card > div:first-child.member-card-image img,
  .member-section .member-card > div:first-child img {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* md:h-61.25の高さ指定を解除 */

  .member-section .member-card > div:first-child,
  .member-section .member-card > div:nth-child(2) {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
}

/* PC（1025px以上）：縦積み・上側のみ角丸（4px 4px 0 0） */

@media (min-width: 1025px) {
  .member-section .member-card-content {
    border: 1px solid var(--color-border-default);
    border-radius: 0 0 4px 4px;
    border-top: none;
  }

  .member-section .member-card > div:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* 画像コンテナとimgタグの角丸：上側のみ4px */

  .member-section .member-card .member-card-image,
  .member-section a.member-card .member-card-image,
  .member-section .member-card > div:first-child.member-card-image {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .member-section .member-card .member-card-image img,
  .member-section a.member-card .member-card-image img,
  .member-section .member-card > div:first-child.member-card-image img,
  .member-section .member-card > div:first-child img {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/* その他の共通スタイル */

@media (max-width: 767px) {
  .member-section .member-card {
    min-height: 183px;
  }

  .member-section .member-card > div:first-child,
  .member-section .member-card > div:nth-child(2) {
    height: auto;
  }

  .member-section .member-card > div:first-child img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .member-section .member-card .member-card-text {
    justify-content: center;
  }

  .member-section .member-card-content .arrow-button {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    align-self: flex-end;
  }

  .member-section .member-card-content .arrow-button img {
    display: block;
    margin: 0 auto;
  }
}

@media (max-width: 599px) {
  .member-section .member-card {
    min-height: 144px;
  }

  .member-section .member-card > div:nth-child(2) {
    padding: 20px;
  }
}

@media (min-width: 1441px) {
  .member-section .member-card-content {
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 23px;
    padding-right: 23px;
  }
}

/* =====================================================
   FV画像コンテナ: 768px以上でviewport高さを付与（高さのみ）
   対象: index.html以外の全ページ（Heroセクション）
   用途: 768px以上でviewport高さを付与（1140-1439pxの範囲では除外、index-page用のスタイルが適用される）
===================================================== */

@media (min-width: 768px) and (max-width: 1139px) {
  /* FV image container: height only */

  #hero-section .absolute.top-0.right-0.z-10 {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
  }

  /* Image fill container without affecting width */

  #hero-section .absolute.top-0.right-0.z-10 picture,
  #hero-section .absolute.top-0.right-0.z-10 img {
    height: 100% !important;
    max-width: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    -o-object-position: top !important;
       object-position: top !important;
  }
}

/* =========================================================
   Heading – Medium（20px基準）
   対象: 全ページ共通
   用途: 中見出し用のスタイル
   備考: font-size 定義は Typography – Font Size セクションに移動
========================================================= */

.heading-md {
  font-size: 20px !important;
  line-height: 1.4 !important;
}

/* mobile */

@media (max-width: 767px) {
  .heading-md {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

/* 1441px〜 scale */

@media (min-width: 1441px) {
  .heading-md {
    font-size: clamp(
      20px,
      calc(20px + 6 * (100vw - 1441px) / 479),
      26px
    ) !important;
    line-height: 1.4 !important;
  }
}

/* =========================================================
   @deprecated – 未使用候補（確認中）
   ※ 現在のHTMLでは使用されていない可能性が高い
   ※ 問題があれば即元に戻す
========================================================= */

/* タイポグラフィユーティリティクラス（固定フォントサイズ） */

.c-text-16 {
  font-size: 16px !important;
}

.c-text-20 {
  font-size: 20px !important;
}

.c-text-24 {
  font-size: 24px !important;
}

.c-text-36 {
  font-size: 36px !important;
}

.c-text-48 {
  font-size: 48px !important;
}

.c-text-64 {
  font-size: 64px !important;
}

/* 本文（極小）ユーティリティクラス */

.text-body-xs {
  font-size: 12px;
  line-height: 1.8;
}

@media (max-width: 767px) {
  .text-body-xs {
    font-size: 11px;
    line-height: 1.8;
  }
}

@media (min-width: 1441px) {
  .text-body-xs {
    font-size: clamp(12px, calc(12px + 2 * (100vw - 1441px) / 479), 14px);
    line-height: 1.8;
  }
}

/* =========================================================
   下層ページ Hero/FV 高さ: 1440px=500px基準でのFluid拡大

   対象: main:not(.index-page) の Hero セクションおよびFVコンテナ
   目的: グローバルの 815px 基準clampを、下層ページのみ 500px 基準に差し替え
   方針: 計算式（25%拡大・係数）は維持し、最小値・初期値だけを500pxに変更
   ========================================================= */

@media (min-width: 1441px) {
  /* Heroセクション本体: 下層ページのみ高さ500pxで固定し、グローバルのclamp(815px, ...)に勝つ */

  main:not(.index-page) #hero-section {
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
  }
}

/* レイアウトユーティリティクラス（フルードgap値） */

.gap-fluid-6 {
  gap: clamp(24px, calc(24px + 6 * (100vw - 1440px) / 480), 30px) !important;
}

/* =========================================================
   Environment Table: 横スクロール防止（1023px以下のみ）
   対象: .environment-work-table / #environment-section .grade-structure-wrapper 内の table
   目的: PC表示（1024px以上）は維持、1023px以下で th:td = 1:2 比率に調整
   ========================================================= */

@media (max-width: 1024px) {
  /* 働き方セクションの table */

  #environment-section .environment-work-table {
    table-layout: fixed !important;
    width: 100% !important;
  }

  #environment-section .environment-work-table th {
    width: 33% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #environment-section .environment-work-table td {
    width: 67% !important;
  }

  /* 等級区分セクションの table */

  #environment-section .grade-structure-wrapper {
    overflow-x: visible !important;
  }

  #environment-section .grade-structure-wrapper table {
    table-layout: fixed !important;
    min-width: 100% !important;
    width: 100% !important;
  }

  #environment-section .grade-structure-wrapper table th {
    width: 33% !important;
    min-width: 0 !important;
  }

  #environment-section .grade-structure-wrapper table td {
    width: 67% !important;
  }
}

/* =========================================================
   FAQ padding override (1023px以下)
   PC(1024px以上)は既存仕様を維持
========================================================= */

@media (max-width: 1440px) {
  @media (max-width: 1024px) {
    #faq .faq-details {
      padding-right: 24px !important;
    }
  }
}

/* =========================================================
   Our Product iframe: 黒帯対策とレスポンシブ対応
   speakerdeck-iframe と同じ挙動に揃える
========================================================= */

/* 黒帯対策: 親ラッパーの固定幅を解除し、aspect-ratio を適用 */

/* 1440px以下: max-width 768px で中央寄せ */

@media (max-width: 1440px) {
  #our-product .our-product-iframe-wrapper {
    width: 100% !important;
    max-width: 768px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
  }
}

/* 1441px以上: max-width を維持し、中央寄せ */

@media (min-width: 1441px) {
  #our-product .our-product-iframe-wrapper {
    width: 100% !important;
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
  }
}

/* iframe 自体のスタイル調整 */

#our-product .our-product-iframe-wrapper iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: transparent !important;
  aspect-ratio: unset !important;
}

/* =========================================================
   Tech Blog カード: グラデーションボーダー（常時適用用）
   対象: .tech-blog-card 全体
   備考: Tailwind 出力後も維持されるよう main.css 末尾に配置
   ========================================================= */

.tech-blog-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  padding: 1.6px;
  background: radial-gradient(
    ellipse at top left,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.25) 30%,
    rgba(255, 255, 255, 0.15) 60%,
    rgba(255, 255, 255, 0.1) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.tech-blog-card > * {
  position: relative;
  z-index: 2;
}

/* ===============================
   Tech Blog Grid Layout Control
   =============================== */

/* デフォルト（1025px以上）：3列 */

.ai-native-tech-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* 1440px以上: gap を fluid scaling */

@media (min-width: 1440px) {
  .ai-native-tech-grid {
    gap: clamp(24px, calc(24px + 6 * (100vw - 1440px) / 480), 30px) !important;
  }
}

/* 1024px以下：2列 */

@media (max-width: 1024px) {
  .ai-native-tech-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 784px以下：1列 */

@media (max-width: 784px) {
  .ai-native-tech-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   AI Native Tech Blog グリッド列数の強制制御
   - flex クラスよりも強く効かせるため !important 付き
   - 3列 / 2列 / 1列 を viewport 幅で切り替え
   ========================================== */

/* デフォルト（1025px以上）：3列 */

.ai-native-section .ai-native-tech-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* 1024px以下：2列 */

@media (max-width: 1024px) {
  .ai-native-section .ai-native-tech-grid {
    display: grid !important;
    /* 念のため再指定 */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 767px以下：1列 */

@media (max-width: 767px) {
  .ai-native-section .ai-native-tech-grid {
    display: grid !important;
    /* 念のため再指定 */
    grid-template-columns: 1fr !important;
  }
}

/* ===============================
   Tech Blog Card - Glass Base
   =============================== */

.tech-blog-card {
  position: relative;
  isolation: isolate;
  /* ガラスの本体 */
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-radius: 8px;
  overflow: hidden;
  /* ← 重要：beforeのはみ出し制御 */
}

/* =========================================================
   Mobile Navigation: 文字スタイルの強制固定
   目的: 既存CSSを一切変更せずに、mobile-nav の文字スタイルだけを強制的に固定
   
   設計方針:
   1. #mobile-nav スコープ内でのみ上書き（PCナビに影響なし）
   2. !important で既存の nav a / header nav a / is-scrolled の影響を完全に排除
   3. スマホ・タブレットで完全に同一の見た目（media query は追加しない）
   4. gap / margin / line-height を固定値で明示
   ========================================================= */

/* スマホ・タブレット共通: mobile-nav の文字スタイルを強制固定 */

@media (max-width: 1024px) {
  /* =========================================================
     見出し（.menu-section-title）: デザイン仕様厳守
     - color: #ffffff
     - font-weight: 600
     理由: #site-header.is-scrolled nav a の影響を完全に排除
     ========================================================= */

  #mobile-nav .menu-section-title {
    color: var(--color-text-inverse) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0.01em !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }

  /* =========================================================
     通常リンク（.menu-links a）: デザイン仕様厳守
     - color: #b3b3b3
     - font-weight: 400
     理由: #site-header.is-scrolled nav a の影響を完全に排除
     ========================================================= */

  #mobile-nav .menu-links a,
  #mobile-nav .menu-links a:link,
  #mobile-nav .menu-links a:visited,
  #mobile-nav .menu-links a:active {
    color: var(--color-text-link) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #mobile-nav .menu-links a:hover {
    color: var(--color-text-accent) !important;
  }

  /* =========================================================
     募集職種・カジュアル面談ボタン: デザイン仕様厳守
     - color: #ffffff
     - font-weight: 600
     理由: #site-header.is-scrolled nav a の影響を完全に排除
     ========================================================= */

  #mobile-nav .mobile-menu-job-btn,
  #mobile-nav .mobile-menu-contact-btn {
    color: var(--color-text-inverse) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0.02em !important;
  }

  /* =========================================================
     gap / margin を固定値で明示（スマホ・タブレットで完全に同一）
     ========================================================= */

  #mobile-nav .menu-links {
    gap: 12px !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
  }

  /* =========================================================
     その他の mobile-nav 内の要素も明示的に定義
     （ロゴ、その他のリンクなど）
     ========================================================= */

  #mobile-nav .mobile-nav-logo {
    color: var(--color-text-inverse) !important;
  }

  #mobile-nav .mobile-nav-logo-text {
    color: var(--color-text-inverse) !important;
  }

  /* =========================================================
     Android Chrome タップ保証対策
     ========================================================= */

  /* スマホメニュー内の全リンクにタップ可能性を明示 */

  .mobile-menu a,
  #mobile-nav a,
  #mobile-nav .menu-links a {
    position: relative;
    z-index: 10;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
  }

  /* 干渉要素の無効化 */

  #mobile-nav.hidden {
    pointer-events: none !important;
  }

  /* transform を持つ親要素の影響を最小化 */

  #mobile-nav {
    will-change: opacity, visibility;
  }

  #mobile-nav .mobile-nav-inner {
    position: relative;
    z-index: 1;
  }

  /* overlay系要素はポインターイベントを無効化（リンクは除外） */

  .submenu-overlay {
    pointer-events: none !important;
  }
}

/* =========================================================
   下層ページ専用：FV画像の固定フレーム化
   対象: aboutus / business / product / corporate / environment / members / interview
   除外: index.html (.index-page)
   用途: 下層ページのみFV画像を固定縦幅682pxに変更
   備考: index.htmlの挙動・見た目は一切変更しない
   ========================================================= */

/* 1024px以上：FV画像フレームを682px固定（削除済み） */

/* 768px〜1023px：FV画像フレームを682px固定（タブレット） */

@media (min-width: 768px) and (max-width: 1024px) {
  main:not(.index-page) #hero-section > div.absolute.top-0.right-0.z-10 {
    height: 682px !important;
    min-height: 682px !important;
    max-height: 682px !important;
  }

  main:not(.index-page)
    #hero-section
    > div.absolute.top-0.right-0.z-10
    > picture,
  main:not(.index-page)
    #hero-section
    > div.absolute.top-0.right-0.z-10
    > picture
    > img {
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    -o-object-position: top !important;
       object-position: top !important;
  }
}

/* 767px以下：FV画像をheight:autoに変更（スマホ） */

@media (max-width: 767px) {
  /* 親 #hero-section の高さ制御を解除 */

  main:not(.index-page) #hero-section {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* 緑背景を完全に非表示 */

  main:not(.index-page) .bg-hero-background-color {
    display: none !important;
  }

  /* FV画像コンテナを height:auto に */

  main:not(.index-page) #hero-section > div.absolute.top-0.right-0.z-10 {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* picture と img を height:auto に変更、object-fit解除 */

  main:not(.index-page)
    #hero-section
    > div.absolute.top-0.right-0.z-10
    > picture,
  main:not(.index-page)
    #hero-section
    > div.absolute.top-0.right-0.z-10
    > picture
    > img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    -o-object-fit: initial !important;
       object-fit: initial !important;
    -o-object-position: initial !important;
       object-position: initial !important;
  }
}

/* ----------------------------------------
   Sub pages hero background adjustment
   Keep inside hero-section
---------------------------------------- */

@media (min-width: 768px) {
  main:not(.index-page) .bg-hero-background-color {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 649px !important;
  }
}

@media (min-width: 768px) and (max-width: 1440px) {
  main:not(.index-page) #hero-section {
    height: 682px !important;
    min-height: 682px !important;
    max-height: 682px !important;
  }
}

@media (min-width: 1024px) {
  main:not(.index-page) .bg-hero-background-color {
    height: 649px !important;
    min-height: 0 !important;
    max-height: 649px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  main:not(.index-page) .bg-hero-background-color {
    height: calc(100% * 0.95) !important;
    min-height: 0 !important;
    max-height: 649px !important;
  }
}

/* ==================================================
   Sub pages hero background FINAL override
   - must override global bg-hero-background-color
   - index-page is strictly excluded
================================================== */

/* 1440px+ : override global clamp / 80vh */

@media (min-width: 1440px) {
  body:has(main:not(.index-page)) .bg-hero-background-color {
    height: clamp(
      500px,
      calc(500px + 120 * (100vw - 1440px) / 480),
      620px
    ) !important;
    max-height: 55vh !important;
  }
}

/* 768px – 1439px : smaller fixed background */

@media (min-width: 768px) and (max-width: 1439px) {
  body:has(main:not(.index-page)) .bg-hero-background-color {
    height: 560px !important;
    min-height: 560px !important;
    max-height: 560px !important;
  }
}

@media (min-width: 1441px) {
  main:not(.index-page) #hero-section {
    height: 65vh !important;
    min-height: unset !important;
    max-height: none !important;
  }

  main:not(.index-page) #hero-section > div.absolute.top-0.right-0.z-10 {
    height: 65vh !important;
    min-height: unset !important;
    max-height: none !important;
  }
}

@media (min-width: 768px) {
  main:not(.index-page) #hero-section > div.absolute.top-0.right-0.z-10 {
    right: 0 !important;
    left: 63px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1439px) {
  main:not(.index-page)
    #hero-section
    > div.absolute.top-0.right-0.z-10
    > picture,
  main:not(.index-page)
    #hero-section
    > div.absolute.top-0.right-0.z-10
    > picture
    > img {
    display: block;
    height: 100% !important;
    width: 100% !important;
    min-width: 1377px !important;
    max-width: none !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    -o-object-position: center !important;
       object-position: center !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (min-width: 768px) {
  main:not(.index-page) #hero-section > div.absolute.top-0.right-0.z-10 {
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    right: 0 !important;
  }
}

/* ==================================================
   Semantic text color tokens (compat layer)
   - Do not remove existing color utilities yet
   - These variables mirror current design tokens
   - Used by new semantic text-* utility classes
   ================================================== */

:root {
  /* Primary body text color (text-textColor / #222) */
  --color-text-primary: #222222;
  /* Muted text (text-gray-400 / rgb(156 163 175)) */
  --color-text-muted: rgb(156 163 175);
  /* Inverse text for dark backgrounds (#fff) */
  --color-text-inverse: #ffffff;
  /* Accent text (brand teal / #2A9CA1) */
  --color-text-accent: #2a9ca1;
  /* ==================================================
     Additional color tokens for semantic color management
     ================================================== */
  /* Text colors */
  --color-text-link: #b3b3b3;
  /* Footer links, muted links */
  /* Background colors */
  --color-bg-white: #ffffff;
  --color-bg-light: #f8f8f8;
  --color-bg-subtle: #f5f5f5;
  --color-bg-hover: #e8e8e8;
  /* Hover state backgrounds */
  /* Border colors */
  --color-border-default: #e8e8e8;
  /* Default border color */
  --color-border-separator: #4e4e4e;
  /* Footer separator */
  /* Brand/Accent colors (for backgrounds) */
  --color-brand: #2a9ca1;
  /* Brand teal (same as accent) */
  --color-brand-bg: #2a9ca1;
  /* Brand background */
  /* Tag colors */
  --color-tag-tech: #3ea8ff;
  /* Tech Blog tag color */
  /* Shadow colors */
  --color-shadow-light: #f6f6f6;
  /* Light shadow color */
}

/* ==================================================
   Semantic text color utilities
   - Safe compat layer: does not override .text-white 等
   - Future Astro components can prefer these classes
   ================================================== */

.text-primary {
  color: var(--color-text-primary);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-inverse {
  color: var(--color-text-inverse);
}

.text-accent {
  color: var(--color-text-accent);
}

/* =========================================================
 Member Popup Override - Temporary Safe Layer
 対象: member-popup-* クラスのみ
 用途: 既存定義を安全に上書きし、余白・文字組みを調整
 備考: このCSSは将来 MemberPopup コンポーネントに切り出せる構造
 ========================================================= */

/* Member Popup Content: padding管理（既存の!importantを上書き） */

#member-popup-content.member-popup-content {
  padding: 40px !important;
  gap: 16px;
}

/* Member Popup Header: margin整理 */

#member-popup-content.member-popup-content .member-popup-header {
  margin-bottom: 0;
}

/* Member Popup Role: margin整理 */

/* Member Popup Name (Japanese): margin整理 */

/* Member Popup Name (English): margin整理 */

/* Member Popup Social: gap整理 */

#member-popup-content.member-popup-content .member-popup-social {
  gap: 8px;
  margin-bottom: 0;
}

/* Member Popup Section Title: margin整理 */

/* Member Popup Interview Title Link: リンク装飾をCSSに移管 */

#member-popup-content.member-popup-content .member-popup-interview-title-link {
  color: inherit;
  text-decoration: none;
  transition: -webkit-text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease;
}

#member-popup-content.member-popup-content
  .member-popup-interview-title-link:hover {
  text-decoration: underline;
}

/* Member Popup Interview Text: 行間を1.8に統一、フォントサイズ16px */

#member-popup-content.member-popup-content .member-popup-interview-text {
  font-size: 16px;
  line-height: 1.8;
}

/* Member Popup Social Icons: サイズと余白を整理 */

#member-popup-content.member-popup-content .member-popup-social a {
  width: 28px;
  height: 28px;
}

#member-popup-content.member-popup-content .member-popup-social-icon {
  width: 20px;
  height: 20px;
}

#member-popup-content.member-popup-content .member-popup-note-icon {
  width: 28px;
  height: 28px;
}

/* 空要素の余白を削除 */

.member-popup-social:empty,
.member-popup-social[style*="display: none"],
#member-popup-interview-text:empty,
#member-popup-interview-text[style*="display: none"] {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* インタビューセクションの親要素が非表示の場合も余白を削除 */

.member-popup-content > div[style*="display: none"] {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================================
 レスポンシブ対応: 1023px以下
 ========================================================= */

@media (max-width: 1024px) {
  #member-popup-content.member-popup-content {
    padding: 32px !important;
  }
}

/* =========================================================
 レスポンシブ対応: 767px以下
 ========================================================= */

@media (max-width: 767px) {
  #member-popup-content .member-popup-interview-title,
  .member-popup-content .member-popup-interview-title {
    font-size: 13px !important;
    line-height: 1.6;
  }

  #member-popup-content.member-popup-content .member-popup-interview-text {
    font-size: 13px;
    line-height: 1.6;
  }
}

/* =========================================================
 レスポンシブ対応: 599px以下
 ========================================================= */

@media (max-width: 599px) {
  .member-popup-section-title {
    font-size: 10px !important;
  }
}

/* =========================================================
 レスポンシブ対応: 375px以下
 ========================================================= */

@media (max-width: 375px) {
  #member-popup-content.member-popup-content {
    padding: 20px !important;
    gap: 16px;
  }

  #member-popup-content.member-popup-content .member-popup-social {
    gap: 8px;
    margin-top: 8px;
  }

  #member-popup-content.member-popup-content .member-popup-social a {
    width: 24px;
    height: 24px;
  }

  #member-popup-content.member-popup-content .member-popup-social-icon,
  #member-popup-content.member-popup-content .member-popup-note-icon {
    width: 24px;
    height: 24px;
  }
}

/* =========================================================
 レスポンシブ対応: 1441px以上（拡大仕様を統一した式で適用）
 拡大率: 25%統一（分母: 480）
 ========================================================= */

@media (min-width: 1441px) {
  #member-popup-content.member-popup-content {
    padding: calc(40px + 10 * (100vw - 1440px) / 480) !important;
    gap: calc(16px + 4 * (100vw - 1440px) / 480);
  }

  #member-popup-content.member-popup-content .member-popup-social {
    gap: calc(8px + 2 * (100vw - 1440px) / 480);
  }

  #member-popup-content.member-popup-content .member-popup-social a {
    width: calc(28px + 7 * (100vw - 1440px) / 480);
    height: calc(28px + 7 * (100vw - 1440px) / 480);
  }

  #member-popup-content.member-popup-content .member-popup-social-icon {
    width: calc(20px + 5 * (100vw - 1440px) / 480);
    height: calc(20px + 5 * (100vw - 1440px) / 480);
  }

  #member-popup-content.member-popup-content .member-popup-note-icon {
    width: calc(28px + 7 * (100vw - 1440px) / 480);
    height: calc(28px + 7 * (100vw - 1440px) / 480);
  }
}

/* =========================================================
   下層ページFV画像コンテナ高さ統一（768px〜1439px）

   目的: 下層ページのFV高さを500pxに統一
   対象: main:not(.index-page) のみ
   範囲: 768px〜1439px
   影響: index-page、1441px以上には影響なし
   ========================================================= */

@media (min-width: 768px) and (max-width: 1439px) {
  /* Hero section 本体 */

  main:not(.index-page) #hero-section {
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
  }

  /* FV画像コンテナ: Hero本体と高さを500pxに統一し、左下だけ角丸にする */

  main:not(.index-page) #hero-section > div.absolute.top-0.right-0.z-10 {
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
    border-bottom-left-radius: 4px;
    overflow: hidden;
  }

  /* 背景色要素 */

  body:has(main:not(.index-page)) .bg-hero-background-color {
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
  }
}

/* =========================================================
   下層ページFV高さ調整: 768px〜1023pxで554pxに変更

   目的: タブレットサイズでFV高さを554pxに調整
   対象: main:not(.index-page) のみ
   範囲: 768px〜1023px
   影響: 768px〜1439pxの500px指定を上書き
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
  main:not(.index-page) #hero-section {
    height: 554px !important;
    min-height: 554px !important;
    max-height: 554px !important;
  }

  main:not(.index-page) #hero-section > div.absolute.top-0.right-0.z-10 {
    height: 554px !important;
    min-height: 554px !important;
    max-height: 554px !important;
  }
}

/* =========================================================
   下層ページFV画像高さ主導レイアウト: 768px〜1023px

   目的: middle画像を高さ主導で表示し、拡大感を解消
   対象: main:not(.index-page) のみ
   範囲: 768px〜1023px
   影響: width:100% / min-width:1377px を無効化し、高さ基準で表示
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
  main:not(.index-page)
    #hero-section
    > div.absolute.top-0.right-0.z-10
    > picture,
  main:not(.index-page)
    #hero-section
    > div.absolute.top-0.right-0.z-10
    > picture
    > img {
    width: auto !important;
    min-width: unset !important;
    max-width: none !important;
    height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }
}

/* =========================================================
   下層ページFV画像表示位置調整: 768px〜1023pxでobject-position調整

   目的: middle画像の「拡大されて見える」印象を和らげる
   対象: main:not(.index-page) のみ
   範囲: 768px〜1023px
   影響: 画像サイズやトリミング構造は変更せず、見せる範囲のみ調整
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
  main:not(.index-page)
    #hero-section
    > div.absolute.top-0.right-0.z-10
    > picture
    > img {
    -o-object-position: center top !important;
       object-position: center top !important;
  }
}

/* =========================================================
   下層ページFV高さ拡大: 1441px以上で滑らかに拡大

   基準: 1440px = 高さ500px
   対象: main:not(.index-page) のHero FVのみ
   範囲: 1441px以上
   拡大率: --fv-scale 1つの式で管理（下限1.0を保証）
   ========================================================= */

@media (min-width: 1441px) {
  main:not(.index-page) #hero-section {
    /* 1440pxを1.0とし、画面幅に応じて徐々に拡大（約25%上限想定） */
    --fv-scale: max(1, calc(1 + (100vw - 1440px) / 1600));
  }

  main:not(.index-page) #hero-section,
  main:not(.index-page) #hero-section > div.absolute.top-0.right-0.z-10 {
    height: calc(500px * var(--fv-scale));
    min-height: calc(500px * var(--fv-scale));
    max-height: calc(500px * var(--fv-scale));
  }
}

/* =========================================================
   下層ページ Hero/FV 高さ: 1441px以上でのジャンプ抑制（ミニマム修正）

   目的:
   - グローバルの clamp(815px, ...) / 65vh を削除せず、
     下層ページだけ「min値=500px」のclampで上書きする
   - 1440px=500pxを基準に、1441pxから既存の拡大思想を踏襲してなだらかに拡大
   ========================================================= */

@media (min-width: 1441px) {
  /* Heroセクション本体: 下層のみ clamp の最小値を 500px に差し替え */

  main:not(.index-page) #hero-section {
    height: clamp(
      500px,
      calc(500px + 284 * (100vw - 1441px) / 479),
      9999px
    ) !important;
    min-height: clamp(
      500px,
      calc(500px + 284 * (100vw - 1441px) / 479),
      9999px
    ) !important;
    max-height: clamp(
      500px,
      calc(500px + 284 * (100vw - 1441px) / 479),
      9999px
    ) !important;
  }

  /* FV画像コンテナ: 65vh / 他の高さ指定よりもこのclampを優先させる */

  main:not(.index-page) #hero-section > div.absolute.top-0.right-0.z-10 {
    height: clamp(
      500px,
      calc(500px + 284 * (100vw - 1441px) / 479),
      9999px
    ) !important;
    min-height: clamp(
      500px,
      calc(500px + 284 * (100vw - 1441px) / 479),
      9999px
    ) !important;
    max-height: clamp(
      500px,
      calc(500px + 284 * (100vw - 1441px) / 479),
      9999px
    ) !important;
  }
}

/* =========================================================
   マウスストーカー
   対象: 全ページ共通
   用途: マウス位置に追従する円形カーソル
   備考: SP（767px以下）では非表示
   ========================================================= */

#mouse-stalker {
  position: fixed;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: rgba(0, 165, 160, 0.5);
  border: none;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  display: none;
  opacity: 0;
  left: -100px;
  top: -100px;
}

#mouse-stalker::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  pointer-events: none;
  transform: scale(1);
  transition: box-shadow 0.3s ease-out;
}

@media (min-width: 768px) {
  #mouse-stalker {
    display: block;
  }

  #mouse-stalker.is-hover-link,
  #mouse-stalker.is-hover-work {
    transform: translate(-50%, -50%) scale(5);
    background-color: transparent !important;
  }

  #mouse-stalker.is-hover-link::before,
  #mouse-stalker.is-hover-work::before {
    inset: -0.2px;
    box-shadow: 0 0 0 0.2px rgba(0, 165, 160, 0.9) inset !important;
    transform: scale(1);
  }
}

/* =========================================================
   h2 見出しのスクロールアニメーション（index.html のみ）
   対象: index.html の h2 要素に .fade-in-up クラスが付与されたもの
   用途: スクロール時に下からぴょこっと出現するアニメーション
   ========================================================= */

.fade-in-up {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.35s ease-out,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   h1 見出しのページ読み込み時スライドインアップアニメーション（index.html のみ）
   対象: index.html の h1.hero-main-heading 内の各span要素
   用途: ページ読み込み時に下から上にスライドインアップするアニメーション（上の行→下の行の順）
   ========================================================= */

.hero-heading-line-1,
.hero-heading-line-2 {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.6s ease-out,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.hero-heading-line-1.is-visible,
.hero-heading-line-2.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* gap-fluid-120: 767px以下で一回り小さい式に変更 */

@media (max-width: 767px) {
  .gap-fluid-120 {
    gap: clamp(
      60px,
      calc(60px + 15 * (100vw - 375px) / 392),
      9999px
    ) !important;
  }
}

/* ai-native-section gap: 767px以下で80pxに */

@media (max-width: 767px) {
  .ai-native-section
    .c-inner-container
    > .flex.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 80px !important;
  }
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Noto Sans JP, Roboto, Helvetica, Arial, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.container {
  width: 100%;
}

@media (min-width: 375px) {
  .container {
    max-width: 375px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1025px) {
  .container {
    max-width: 1025px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 1920px;
  }
}

/* =========================================================
     基本コンポーネント: c-inner-container
     対象: 全ページ共通
     用途: コンテンツ幅の一元管理（最大幅1200px、1441px以上でFluid拡大）
     ========================================================= */

.c-inner-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  max-width: 1200px;
}

@media (min-width: 1441px) {
  .c-inner-container {
    /* 内部要素の拡大率（25%）に合わせて統一: calc(1200px + 300 * (100vw - 1440px) / 480) */
    /* 上限値を1900pxに引き上げ（2000px以上の画面でmessage-sectionの画像重なりを防止） */
    max-width: clamp(
        1200px,
        calc(1200px + 300 * (100vw - 1440px) / 480),
        1900px
      );
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 1028px) and (max-width: 1439px) {
  .c-inner-container {
    padding-left: 60px;
    padding-right: 60px;
  }
}

@media (min-width: 1440px) {
  .c-inner-container {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 1027px) and (min-width: 768px) {
  .c-inner-container {
    max-width: 100%;
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (max-width: 767px) {
  .c-inner-container {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* フッター内のc-inner-containerにはmax-width制限を適用しない */

.site-footer .c-inner-container {
  max-width: none;
}

@media (min-width: 1441px) {
  .site-footer .c-inner-container {
    max-width: none;
  }
}

@media (min-width: 1440px) {
  .site-footer .c-inner-container {
    padding-left: 60px;
    padding-right: 60px;
  }
}

/* =========================================================
     見出しスタイル: c-heading-2
     対象: 全ページ共通（h2見出し用）
     用途: セクション見出しの基本スタイル
     ========================================================= */

.c-heading-2 {
  line-height: 1.2;
  font-family: Helvetica, "Roboto", Arial, system-ui, -apple-system,
      BlinkMacSystemFont, sans-serif !important;
  font-weight: 500 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
     見出しスタイル: c-heading-lead
     対象: Messageセクションのリードコピー（h3）
     用途: 1440px基準でfont-sizeを制御（デフォルト30px、1440pxで32px、1441px以上で拡大）
     ========================================================= */

.c-heading-lead {
  font-size: 30px;
}

@media (min-width: 1440px) {
  .c-heading-lead {
    font-size: 32px;
    line-height: 1.6;
  }
}

@media (min-width: 1441px) {
  .c-heading-lead {
    font-size: clamp(32px, calc(32px + 0.15vw), 9999px);
    line-height: clamp(1.6, calc(1.6 + 0.005vw), 2);
  }
}

/* =========================================================
     Messageセクション: message-block
     対象: Messageセクションのブロック間gap
     用途: 1440px基準でgapを制御（デフォルト32px、1440px以上47px）
     ========================================================= */

@media (min-width: 1440px) {
  .flex.message-block {
    gap: 47px;
  }
}

/* =========================================================
     Productセクション: 見出しブロックのgap
     対象: Productセクションの見出しブロック
     用途: 1440px基準でgapを16pxに固定
     ========================================================= */

@media (min-width: 1440px) {
  #product-section .flex.flex-col.gap-4.xl\:gap-fluid-8 {
    gap: 16px;
  }
}

/* =========================================================
     Value-Cultureセクション: 見出しブロックのgap
     対象: Value-Cultureセクションの見出しブロック
     用途: 1440px基準でgapを16pxに固定
     ========================================================= */

@media (min-width: 1440px) {
  #value-culture-section .flex.flex-col.gap-4.md\:gap-4.xl\:gap-fluid-4 {
    gap: 16px;
  }
}

/* =========================================================
     Productセクション: product-heading
     対象: Productセクションのh3見出し
     用途: 1440px基準でline-heightを1.6に設定
     ========================================================= */

@media (min-width: 1440px) {
  .product-heading {
    line-height: 1.6;
  }
}

/* =========================================================
     サブ見出し: subheading-md
     対象: 全ページ共通
     備考: font-size 定義は Typography – Font Size セクションに移動
     ========================================================= */

.subheading-md {
  font-weight: 400;
  line-height: 1.4;
  font-size: 36px;
  margin: 0;
}

@media (max-width: 767px) {
  .subheading-md {
    font-size: 28px;
    line-height: 1;
  }
}

@media (min-width: 768px) and (max-width: 1439px) {
  .subheading-md {
    font-size: 36px;
    line-height: 1.4;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  .subheading-md {
    font-size: 36px;
  }
}

@media (min-width: 1441px) {
  .subheading-md {
    font-size: clamp(36px, calc(36px + 0.6vw), 48px);
    line-height: clamp(1.4, calc(1.4 + 0.01vw), 1.55);
  }
}

/* =========================================================
     ユーティリティクラス: 固定フォントサイズ
     対象: 全ページ共通
     用途: 固定サイズのテキスト指定用
     備考: font-size 定義は Typography – Font Size セクションに移動
     @deprecated セクションに移動済み
     ========================================================= */

/* =========================================================
     ユーティリティクラス: 固定gap値
     対象: 全ページ共通
     用途: 特定の間隔指定が必要な箇所用
     備考: 一時対応の可能性あり
     ========================================================= */

.gap-\[67px\] {
  gap: 67px !important;
}

.gap-\[101px\] {
  gap: 101px !important;
}

.gap-\[28px\] {
  gap: 28px !important;
}

.gap-\[39px\] {
  gap: 39px !important;
}

.gap-\[32px\] {
  gap: 32px !important;
}

.gap-\[42px\] {
  gap: 42px !important;
}

.gap-\[44px\] {
  gap: 44px !important;
}

/* =========================================================
     ユーティリティクラス: 固定padding/margin値
     対象: 全ページ共通
     用途: 特定の余白指定が必要な箇所用
     備考: 一時対応の可能性あり、重複定義あり（pt-\[80px\]が2回）
     ========================================================= */

.pt-\[80px\] {
  padding-top: 80px !important;
}

.mt-\[20px\] {
  margin-top: 20px !important;
}

.mt-\[33px\] {
  margin-top: 33px !important;
}

.mt-\[48px\] {
  margin-top: 48px !important;
}

.pt-\[80px\] {
  padding-top: 80px !important;
}

.pt-\[100px\] {
  padding-top: 100px !important;
}

.pt-\[112px\] {
  padding-top: 112px !important;
}

.pb-\[85px\] {
  padding-bottom: 85px !important;
}

.pb-\[90px\] {
  padding-bottom: 90px !important;
}

.pb-\[138px\] {
  padding-bottom: 138px !important;
}

.pb-\[225px\] {
  padding-bottom: 225px !important;
}

/* =========================================================
     ユーティリティクラス: 固定line-height値
     対象: 全ページ共通
     ========================================================= */

.leading-1\.8 {
  line-height: 1.8 !important;
}

.leading-\[2\.0\] {
  line-height: 2 !important;
}

/* =========================================================
     見出しスタイル: c-heading-3
     対象: 全ページ共通（h3見出し用）
     用途: 中見出しの基本スタイル
     ========================================================= */

.c-heading-3 {
  font-weight: 500;
  line-height: 0.9;
}

/* 英数字見出し用: Helvetica優先 */

.font-en.c-heading-3,
  .c-heading-3.font-en,
  .text-\[3\.5rem\].font-en.c-heading-3 {
  font-family: Helvetica, Roboto, Arial, system-ui, -apple-system,
      BlinkMacSystemFont, sans-serif !important;
}

/* =========================================================
     本文テキスト: c-body-text
     対象: 全ページ共通
     ========================================================= */

.c-body-text {
  font-weight: 300;
  line-height: 1.8;
}

/* =========================================================
     リード文: text-lead
     対象: 全ページ共通
     用途: リード文スタイル（元body-text）
     備考: font-size 定義は Typography – Font Size セクションに移動
     ========================================================= */

@media (min-width: 1440px) {
  /* AI Native circle styles */

  @media (min-width: 1441px) {
  }

  .ai-native-circle-inner > p.text-sm.leading-1\.6.text-lead {
    margin: 25px auto 0px;
  }
}

.text-lead {
  font-family: Noto Sans JP, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.025em;
}

@media (min-width: 1440px) {
  .ai-native-circle-inner > p.text-sm.leading-1\.6.text-lead {
    margin: 25px auto 0px;
  }
}

.text-lead {
  font-size: 16px;
  line-height: 2;
}

@media (max-width: 767px) {
  .text-lead {
    font-size: 15px;
    line-height: 1.9;
  }
}

@media (min-width: 1440px) {
  .text-lead {
    font-size: 18px;
    line-height: 2;
  }
}

@media (min-width: 1441px) {
  .text-lead {
    font-size: clamp(18px, calc(18px + 0.15vw), 9999px);
    line-height: clamp(2, calc(2 + 0.005vw), 2.4);
  }
}

/* =========================================================
     標準本文: text-body
     対象: 全ページ共通
     用途: 標準本文スタイル
     備考: font-size 定義は Typography – Font Size セクションに移動
     ========================================================= */

@media (min-width: 1440px) {
  /* AI Native circle styles */

  @media (min-width: 1441px) {
  }

  .ai-native-circle-inner > p.text-sm.leading-1\.6.text-body {
    margin: 25px auto 0px;
  }
}

.text-body {
  font-family: Noto Sans JP, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
}

@media (min-width: 1440px) {
  .ai-native-circle-inner > p.text-sm.leading-1\.6.text-body {
    margin: 25px auto 0px;
  }
}

.text-body {
  font-size: 16px;
  line-height: 1.8;
}

@media (max-width: 767px) {
  .text-body {
    font-size: 14px;
    line-height: 1.7;
  }
}

@media (min-width: 1441px) {
  .text-body {
    font-size: clamp(16px, calc(16px + 0.2vw), 9999px);
    line-height: clamp(1.8, calc(1.8 + 0.005vw), 2);
  }
}

/* =========================================================
     本文（小）: text-body-sm
     対象: 全ページ共通
     用途: 本文の小さい版（table内テキスト用）
     備考: font-size 定義は Typography – Font Size セクションに移動
     ========================================================= */

.text-body-sm {
  font-size: 14px;
  line-height: 1.8;
}

@media (max-width: 767px) {
  .text-body-sm {
    font-size: 13px;
    line-height: 1.8;
  }
}

@media (min-width: 1441px) {
  .text-body-sm {
    font-size: clamp(14px, calc(14px + 2 * (100vw - 1441px) / 479), 16px);
    line-height: 1.8;
  }
}

/* =========================================================
     本文（極小）: text-body-xs
     対象: 全ページ共通
     用途: 本文のさらに小さい版
     備考: font-size 定義は Typography – Font Size セクションに移動
     @deprecated セクションに移動済み
     ========================================================= */

/* =========================================================
     小見出し: text-heading-sm
     対象: 全ページ共通
     用途: 小見出し用
     備考: font-size 定義は Typography – Font Size セクションに移動
     ========================================================= */

.text-heading-sm {
  font-size: 24px !important;
  line-height: 1.2 !important;
}

@media (max-width: 767px) {
  .text-heading-sm {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
}

@media (min-width: 768px) and (max-width: 1440px) {
  .text-heading-sm {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
}

@media (min-width: 1441px) {
  .text-heading-sm {
    font-size: clamp(
        24px,
        calc(24px + 6 * (100vw - 1441px) / 479),
        30px
      ) !important;
    line-height: 1.2 !important;
  }
}

/* =========================================================
     中見出し: text-heading-md
     対象: 全ページ共通
     用途: 中見出し用（text-heading-smより大きい）
     備考: font-size 定義は Typography – Font Size セクションに移動
     ========================================================= */

.text-heading-md {
  font-size: 36px !important;
  line-height: 1.2 !important;
}

@media (max-width: 767px) {
  .text-heading-md {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }
}

@media (min-width: 1441px) {
  .text-heading-md {
    font-size: clamp(
        36px,
        calc(36px + 6 * (100vw - 1441px) / 479),
        42px
      ) !important;
    line-height: 1.2 !important;
  }
}

/* =========================================================
     Safety: Hide mobile nav on desktop width
     対象: 全ページ共通
     用途: JS状態が壊れた場合でもPC幅で #mobile-nav が露出しないようにする保険
     変更: 1025px以上をPC扱いとするため、min-width: 1025px に変更
     ========================================================= */

@media (min-width: 1025px) {
  #mobile-nav {
    display: none !important;
  }
}

/* =========================================================
     カード本文: card-body-text
     対象: 全ページ共通
     用途: 共有カード本文テキスト
     備考: font-size 定義は Typography – Font Size セクションに移動
     ========================================================= */

.card-body-text {
  font-family: var(--font-sans, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: inherit;
}

@media (max-width: 767px) {
  .card-body-text {
    font-size: 14px;
  }
}

@media (min-width: 1441px) {
  .card-body-text {
    font-size: clamp(16px, calc(16px + 2 * (100vw - 1440px) / 480), 18px);
  }
}

/* =========================================================
     セクションサブタイトル: section-subtitle
     対象: 全ページ共通
     用途: 統一されたサブコピースタイル
     備考: font-size 定義は Typography – Font Size セクションに移動
     ========================================================= */

.section-subtitle {
  font-family: Noto Sans JP, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.6;
  font-size: 14px;
}

@media (min-width: 768px) {
  .section-subtitle {
    font-size: 18px;
  }
}

@media (min-width: 1440px) {
  .section-subtitle {
    font-size: 20px;
  }
}

@media (min-width: 1441px) {
  .section-subtitle {
    font-size: clamp(20px, calc(20px + 0.25vw), 9999px);
    line-height: clamp(1.6, calc(1.6 + 0.005vw), 1.8);
  }
}

/* =========================================================
     プロダクト背景画像 (擬似要素)
     対象: index.html（Productセクション）
     用途: プロダクトセクションの背景画像を擬似要素で表示
     ========================================================= */

.product-content {
  position: relative;
}

/* 1024pxちょうど: 擬似要素を非表示 */

@media (min-width: 1024px) and (max-width: 1024px) {
  .product-content::after {
    display: none !important;
  }
}

/* 1025px以上1270px以下: 画像サイズを少し小さくする */

@media (min-width: 1025px) and (max-width: 1270px) {
  .product-content::after {
    display: block;
    content: "";
    position: absolute;
    top: -80px;
    width: 80vw;
    max-width: 750px;
    height: calc(80vw * 0.6);
    max-height: 480px;
    background-image: url("../images/product.webp");
    background-size: contain;
    left: auto;
    right: -20px;
    background-position: right center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
  }
}

/* 1271px以上1439px以下の中間サイズ用（元のサイズを維持） */

@media (min-width: 1271px) and (max-width: 1439px) {
  .product-content::after {
    display: block;
    content: "";
    position: absolute;
    top: -80px;
    width: 88vw;
    max-width: 840px;
    height: calc(88vw * 0.6);
    max-height: 540px;
    background-image: url("../images/product.webp");
    background-size: contain;
    left: auto;
    right: 0;
    background-position: right center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
  }
}

/* md相当（~1023px）で擬似要素をテキスト下に配置、1270px以下で画像サイズを少し小さくする */

@media (max-width: 1024px) {
  .product-section {
    overflow-x: hidden;
  }

  .product-content {
    align-items: flex-start;
  }

  .product-content::after {
    position: static;
    display: block;
    margin: 32px auto 0;
    width: 95vw;
    max-width: 920px;
    height: calc(95vw * 0.62);
    max-height: 540px;
    top: auto;
    margin-left: 0;
    margin-right: -6vw;
    background-position: center right;
  }

  .product-body-wrap br {
    display: none;
  }

  /* 375px以上はさらに左にオフセットして中央寄りに見せる */

  @media (min-width: 375px) {
    .product-content::after {
      margin-left: -8vw;
      margin-right: -2vw;
      background-position: -48px center;
    }
  }
}

/* =========================================================
     プロダクトセクション: 375px以下でのSP画像拡大
     対象: index.html（Productセクション）
     用途: モバイル表示時の画像サイズ調整
     備考: member-card-arrowのスタイルも含む（一時対応の可能性）
     ========================================================= */

@media (max-width: 599px) {
  .product-section .product-image-mobile {
    width: 98% !important;
    max-width: 98% !important;
  }

  .member-card-arrow {
    width: 58px !important;
    height: 39px !important;
  }

  .member-card-arrow-img {
    width: 10px !important;
    height: auto !important;
  }
}

/* =========================================================
     AI Native カードスタイル
     対象: index.html（AI Nativeセクション）、aboutus.html
     用途: AI Nativeセクションのカードデザイン
     ========================================================= */

.ai-native-card {
  background-color: rgba(242, 242, 242, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 8px;
  padding: 40px;
  padding-bottom: 50px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .ai-native-card-wrapper-right .ai-native-card,
    .ai-native-card-wrapper-left .ai-native-card {
    width: 92% !important;
    height: auto !important;
    padding: 24px !important;
  }
}

/* Product section: enforce 120px -> fluid bottom padding */

@media (min-width: 1440px) {
  #product-section,
    .product-section {
    padding-bottom: clamp(
        160px,
        calc(160px + 40 * (100vw - 1440px) / 480),
        200px
      ) !important;
  }

  /* AI Native circle styles */

  .ai-native-circles-grid {
    max-width: 1300px;
  }

  .ai-native-circle-wrapper {
    width: 285px;
    height: 285px;
  }

  @media (min-width: 1441px) {
    .ai-native-circle-wrapper {
      width: min(calc(285px + ((100vw - 1440px) * 0.75)), 380px);
      height: min(calc(285px + ((100vw - 1440px) * 0.75)), 380px);
    }
  }

  .ai-native-circle-shadow {
    box-shadow: 0 10px 30px var(--color-shadow-light);
  }

  .ai-native-circle-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .ai-native-circle-inner > p.text-sm.leading-1\.6.font-normal {
    margin: 25px auto 0px;
  }

  .ai-native-circle-inner > p:nth-child(2) {
    margin-bottom: 34px;
  }
}

@media (max-width: 1024px) {
  /* AI Native circles: shrink inner image on tablet/mobile */

  .ai-native-gradient-text .ai-native-circle-image {
    width: 80% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* AI Native circles: tighten gap on tablet/mobile */

  .ai-native-circles-grid {
    gap: 32px !important;
  }

  /* AI Native section: reduce vertical gap on tablet/mobile */

  .ai-native-section.flex.flex-col.gap-\[220px\] {
    gap: 120px !important;
  }
}

/* AI Native circles layout: 767px以下で「上1つ・下2つ」の2段構成にする */

@media (max-width: 767px) {
  .ai-native-circles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-native-circles-grid > .ai-native-circle-wrapper:nth-child(1) {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

@media (min-width: 1440px) {
  .c-benefit-card.message-block {
    gap: 47px;
  }

  #product-section .c-benefit-card.flex-col.gap-4.xl\:gap-fluid-8 {
    gap: 16px;
  }

  #product-section .flex.c-benefit-card.gap-4.xl\:gap-fluid-8 {
    gap: 16px;
  }

  #value-culture-section .c-benefit-card.flex-col.gap-4.md\:gap-4.xl\:gap-fluid-4 {
    gap: 16px;
  }

  #value-culture-section .flex.c-benefit-card.gap-4.md\:gap-4.xl\:gap-fluid-4 {
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  /* AI Native circles: shrink inner image on tablet/mobile */

  /* AI Native circles: tighten gap on tablet/mobile */

  /* AI Native section: reduce vertical gap on tablet/mobile */

  .ai-native-section.c-benefit-card.flex-col.gap-\[220px\] {
    gap: 120px;
  }

  /* AI Native circles: shrink inner image on tablet/mobile */

  /* AI Native circles: tighten gap on tablet/mobile */

  /* AI Native section: reduce vertical gap on tablet/mobile */

  .ai-native-section.flex.c-benefit-card.gap-\[220px\] {
    gap: 120px;
  }
}

@media (max-width: 767px) {
  #evaluation .grade-structure-block > .c-benefit-card.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
}

.c-benefit-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(232 232 232 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 24px;
}

#site-header .desktop-nav-override > div.c-benefit-card.items-center.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

@media (max-width: 1439px) {
  .ai-native-section
    .c-inner-container
    > .c-benefit-card.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 100px;
  }

  .ai-native-section
    .c-inner-container
    > .flex.c-benefit-card.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 100px;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  .work-section .work-card-content .c-benefit-card.flex-col.gap-2\.75,
  .work-section .work-card-content .c-benefit-card.flex-col.gap-2 {
    gap: 8px;
  }

  .work-section .work-card-content .flex.c-benefit-card.gap-2\.75,
  .work-section .work-card-content .flex.c-benefit-card.gap-2 {
    gap: 8px;
  }
}

@media (min-width: 1441px) {
  .work-section .work-card-content .c-benefit-card.flex-col.gap-2\.75,
  .work-section .work-card-content .c-benefit-card.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .work-section .work-card-content .flex.c-benefit-card.gap-2\.75,
  .work-section .work-card-content .flex.c-benefit-card.gap-2 {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .interview-section .interview-card-content .c-benefit-card.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }

  .interview-section .interview-card-content .flex.c-benefit-card.gap-2 {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }

  @media (min-width: 1441px) {
    .message-section .c-benefit-card.flex-col.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480);
    }

    .message-section .flex.c-benefit-card.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480);
    }
  }
}

@media (max-width: 1439px) {
  #site-header .desktop-nav-override > div.c-benefit-card.items-center.gap-8 {
    gap: 24px;
  }
}

@media (max-width: 767px) {
  
  #site-header.is-scrolled.c-benefit-card {
    background-color: transparent;
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
  }
}

@media (max-width: 599px) {
  .index-page #recruit-section .c-benefit-card.flex-col.gap-fluid-8 {
    gap: 60px;
  }

  .index-page #recruit-section .flex.c-benefit-card.gap-fluid-8 {
    gap: 60px;
  }

  .index-page #recruit-section .c-benefit-card.flex-col.gap-fluid-4 {
    gap: 12px;
  }

  .index-page #recruit-section .flex.c-benefit-card.gap-fluid-4 {
    gap: 12px;
  }
}

@media (max-width: 1440px) {
  .interview-section
    .c-benefit-card.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .interview-section
    .flex.c-benefit-card.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .interview-section
    .c-benefit-card.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .interview-section
    .flex.c-benefit-card.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }
}

@media (max-width: 1440px) {
  .work-section
    .c-benefit-card.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .flex.c-benefit-card.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .c-benefit-card.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .flex.c-benefit-card.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .work-section
    .c-benefit-card.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .flex.c-benefit-card.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .work-section
    .c-benefit-card.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .work-section
    .flex.c-benefit-card.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .work-section
    .c-benefit-card.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }

  .work-section
    .flex.c-benefit-card.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 1440px) {
  .member-section
    .c-benefit-card.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }

  .member-section
    .flex.c-benefit-card.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .member-section
    .c-benefit-card.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }

  .member-section
    .flex.c-benefit-card.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .member-section
    .c-benefit-card.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }

  .member-section
    .flex.c-benefit-card.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 767px) {
  #environment-section .grade-structure-block > .c-benefit-card.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .ai-native-section
    .c-inner-container
    > .c-benefit-card.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 80px;
  }

  .ai-native-section
    .c-inner-container
    > .flex.c-benefit-card.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 80px;
  }
}

.c-benefit-card {
  gap: 16px;
}

/* Benefit cards: keep padding at <=1440px, scale up fluidly beyond 1441px */

@media (min-width: 1441px) {
  .c-benefit-card {
    padding: clamp(24px, calc(24px + 16 * (100vw - 1441px) / 479), 40px);
  }
}

.c-benefit-card p {
  line-height: 1.8 !important;
}

/* font-size 定義は Typography – Font Size セクションに移動 */

/* Evaluation concept: stack figure and text on tablets/phones */

@media (max-width: 767px) {
  #evaluation .evaluation-concept-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
  }

  #evaluation .evaluation-concept-figure {
    width: 100% !important;
    margin: 0 auto !important;
  }
}

/* Evaluation section: stack career-path figure and text on tablets/phones */

@media (max-width: 767px) {
  #evaluation .grade-structure-block > .flex.items-start.gap-8 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
  }

  #evaluation .grade-structure-block .career-path-figure {
    width: 100% !important;
    margin: 0 auto !important;
  }
}

/* Evaluation keywords (等級・評価・報酬): brand color, bold, with letter spacing */

/* font-size 定義は Typography – Font Size セクションに移動 */

.evaluation-keyword {
  font-weight: 700;
  color: var(--color-text-accent);
  font-size: 20px;
  letter-spacing: 0.08em;
}

/* Environment navigation cards: padding scaling on xl+ (1440pxは現状維持、1441px以上で拡大) */

@media (min-width: 1441px) {
  .environment-nav-link {
    padding-top: clamp(
        14px,
        calc(14px + 10 * (100vw - 1441px) / 479),
        24px
      ) !important;
    padding-bottom: clamp(
        14px,
        calc(14px + 10 * (100vw - 1441px) / 479),
        24px
      ) !important;
    padding-left: clamp(
        20px,
        calc(20px + 14 * (100vw - 1441px) / 479),
        34px
      ) !important;
    padding-right: clamp(
        20px,
        calc(20px + 14 * (100vw - 1441px) / 479),
        34px
      ) !important;
  }

  .environment-work-table th {
    width: min(40%, calc(240px + (100vw - 1440px) * 0.2)) !important;
    max-width: 40% !important;
  }

  .environment-work-table th,
    .environment-work-table td {
    padding-top: clamp(
        14px,
        calc(14px + 6 * (100vw - 1440px) / 480),
        20px
      ) !important;
    padding-bottom: clamp(
        14px,
        calc(14px + 6 * (100vw - 1440px) / 480),
        20px
      ) !important;
    padding-left: clamp(
        24px,
        calc(24px + 12 * (100vw - 1440px) / 480),
        36px
      ) !important;
    padding-right: clamp(
        24px,
        calc(24px + 12 * (100vw - 1440px) / 480),
        36px
      ) !important;
  }

  /* Environment work table list items: font-size and line-height scaling */

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .environment-work-table td li {
    font-size: clamp(
        14px,
        calc(14px + 2 * (100vw - 1441px) / 479),
        16px
      ) !important;
    line-height: clamp(
        1.8,
        calc(1.8 + 0.1 * (100vw - 1441px) / 479),
        1.9
      ) !important;
  }

  .environment-number-card-title {
    font-size: clamp(
        16px,
        calc(16px + 4 * (100vw - 1440px) / 480),
        20px
      ) !important;
    line-height: clamp(
        1.5,
        calc(1.5 + 0.5 * (100vw - 1440px) / 480),
        2
      ) !important;
  }
}

.environment-table-heading {
  background-color: var(--color-bg-light) !important;
}

/* Value section heading and Culture Deck heading: font-size scaling on xl+ (1440pxは現状維持、1441px以上で拡大) */

/* font-size 定義は Typography – Font Size セクションに移動 */

@media (min-width: 1441px) {
  .value-section-heading {
    font-size: clamp(
        24px,
        calc(24px + 6 * (100vw - 1441px) / 479),
        30px
      ) !important;
  }

  .culture-deck-heading {
    font-size: clamp(
        24px,
        calc(24px + 6 * (100vw - 1441px) / 479),
        30px
      ) !important;
    font-family: Helvetica, Arial, sans-serif !important;
  }

  /* Culture Deck description: 16pxを1440pxまでは維持し、1441px以上で画面幅に応じて拡大 */

  .culture-deck-description {
    font-size: clamp(
        16px,
        calc(16px + 4 * (100vw - 1441px) / 479),
        20px
      ) !important;
  }
}

/* Culture Deck slide wrapper: prevent iframe overflow */

.culture-deck-slide-wrapper {
  overflow: hidden;
}

.culture-deck-slide-wrapper .deck-embed,
  .culture-deck-slide-wrapper .speakerdeck-embed-wrapper,
  .culture-deck-slide-wrapper .speakerdeck-iframe {
  max-width: 100% !important;
}

.culture-deck-slide-wrapper .speakerdeck-iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}

/* AI Native block styles */

.ai-native-block {
  position: relative;
  width: 100%;
  min-height: 540px;
  margin-bottom: 200px;
  overflow: visible;
  padding-right: 0;
}

@media (max-width: 767px) {
  .ai-native-block {
    min-height: 520px;
  }
}

/* AI Native image styles */

.ai-native-image {
  position: relative;
  z-index: 2;
  display: block;
}

.ai-native-image img {
  width: 60%;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* AI Native image scaling: keep 60% at 1440px, scale from 1441px */

@media (min-width: 1441px) {
  .ai-native-image img {
    width: clamp(
        60%,
        calc(60% + 5% * (100vw - 1441px) / 479),
        65%
      ) !important;
  }
}

.ai-native-image.ml-auto {
  margin-left: auto;
  margin-right: 0;
  display: flex;
  justify-content: flex-end;
}

.ai-native-image.ml-auto img {
  margin-left: auto;
}

/* AI Native card wrapper styles */

.ai-native-card-wrapper-right {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
  width: auto;
  max-width: calc(100% - 0px);
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
}

.ai-native-card-wrapper-left {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: auto;
  max-width: calc(100% - 0px);
  box-sizing: border-box;
}

/* AI Native card wrapper vertical position
   - 1440px / 1439px以下: 既存の bottom: 0 を維持
   - 1441px以上: 写真より少し下にカードが出るように bottom をマイナス方向へ調整 */

@media (min-width: 1441px) {
  .ai-native-card-wrapper-right,
    .ai-native-card-wrapper-left {
    bottom: clamp(
        -80px,
        calc(-80px - 40 * (100vw - 1441px) / 479),
        -120px
      ) !important;
  }
}

/* AI Native label styles */

/* font-size 定義は Typography – Font Size セクションに移動 */

.ai-native-label {
  font-size: 14px;
  font-weight: 500;
  background: linear-gradient(to right, #1fa1ff, #c345ff);
  color: white;
  padding: 0 30px;
  border-radius: 0;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 0;
}

/* Member Popup: 初期非表示と基本スタイル */

.member-popup-overlay {
  position: fixed;
  inset: 0px;
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 10001 !important;
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.member-popup-overlay.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.member-popup {
  position: fixed;
  overflow-y: auto;
  border-radius: 0.5rem;
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 10002 !important;
  background-color: var(--color-bg-white) !important;
  max-width: none !important;
  width: 768px !important;
  height: -moz-fit-content !important;
  height: fit-content !important;
  max-height: 80vh !important;
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* Popup content visibility control: hide content unless popup is active */

.member-popup:not(.active) .member-popup-content {
  display: none !important;
}

.member-popup.active .member-popup-content {
  display: flex !important;
}

.member-popup.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) scale(1) !important;
  background-color: var(--color-bg-white) !important;
  height: -moz-fit-content !important;
  height: fit-content !important;
  max-height: 80vh !important;
}

@media (min-width: 1440px) {
  .member-popup-content.message-block {
    gap: 47px;
  }

  #product-section .member-popup-content.flex-col.gap-4.xl\:gap-fluid-8 {
    gap: 16px;
  }

  #product-section .flex.member-popup-content.gap-4.xl\:gap-fluid-8 {
    gap: 16px;
  }

  #value-culture-section .member-popup-content.flex-col.gap-4.md\:gap-4.xl\:gap-fluid-4 {
    gap: 16px;
  }

  #value-culture-section .flex.member-popup-content.gap-4.md\:gap-4.xl\:gap-fluid-4 {
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  /* AI Native circles: shrink inner image on tablet/mobile */

  /* AI Native circles: tighten gap on tablet/mobile */

  /* AI Native section: reduce vertical gap on tablet/mobile */

  .ai-native-section.member-popup-content.flex-col.gap-\[220px\] {
    gap: 120px;
  }

  /* AI Native circles: shrink inner image on tablet/mobile */

  /* AI Native circles: tighten gap on tablet/mobile */

  /* AI Native section: reduce vertical gap on tablet/mobile */

  .ai-native-section.flex.member-popup-content.gap-\[220px\] {
    gap: 120px;
  }
}

@media (max-width: 767px) {
  #evaluation .grade-structure-block > .member-popup-content.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
}

.member-popup-content {
  display: flex;
  flex-direction: column;
  padding: 40px;
}

#site-header .desktop-nav-override > div.member-popup-content.items-center.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

@media (max-width: 1439px) {
  .ai-native-section
    .c-inner-container
    > .member-popup-content.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 100px;
  }

  .ai-native-section
    .c-inner-container
    > .flex.member-popup-content.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 100px;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  .work-section .work-card-content .member-popup-content.flex-col.gap-2\.75,
  .work-section .work-card-content .member-popup-content.flex-col.gap-2 {
    gap: 8px;
  }

  .work-section .work-card-content .flex.member-popup-content.gap-2\.75,
  .work-section .work-card-content .flex.member-popup-content.gap-2 {
    gap: 8px;
  }
}

@media (min-width: 1441px) {
  .work-section .work-card-content .member-popup-content.flex-col.gap-2\.75,
  .work-section .work-card-content .member-popup-content.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .work-section .work-card-content .flex.member-popup-content.gap-2\.75,
  .work-section .work-card-content .flex.member-popup-content.gap-2 {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .interview-section .interview-card-content .member-popup-content.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }

  .interview-section .interview-card-content .flex.member-popup-content.gap-2 {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }

  @media (min-width: 1441px) {
    .message-section .member-popup-content.flex-col.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480);
    }

    .message-section .flex.member-popup-content.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480);
    }
  }
}

@media (max-width: 1439px) {
  #site-header .desktop-nav-override > div.member-popup-content.items-center.gap-8 {
    gap: 24px;
  }
}

@media (max-width: 599px) {
  .index-page #recruit-section .member-popup-content.flex-col.gap-fluid-8 {
    gap: 60px;
  }

  .index-page #recruit-section .flex.member-popup-content.gap-fluid-8 {
    gap: 60px;
  }

  .index-page #recruit-section .member-popup-content.flex-col.gap-fluid-4 {
    gap: 12px;
  }

  .index-page #recruit-section .flex.member-popup-content.gap-fluid-4 {
    gap: 12px;
  }
}

@media (max-width: 1440px) {
  .interview-section
    .member-popup-content.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .interview-section
    .flex.member-popup-content.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .interview-section
    .member-popup-content.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .interview-section
    .flex.member-popup-content.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }
}

@media (max-width: 1440px) {
  .work-section
    .member-popup-content.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .flex.member-popup-content.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .member-popup-content.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .flex.member-popup-content.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .work-section
    .member-popup-content.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .flex.member-popup-content.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .work-section
    .member-popup-content.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .work-section
    .flex.member-popup-content.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .work-section
    .member-popup-content.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }

  .work-section
    .flex.member-popup-content.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 1440px) {
  .member-section
    .member-popup-content.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }

  .member-section
    .flex.member-popup-content.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .member-section
    .member-popup-content.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }

  .member-section
    .flex.member-popup-content.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .member-section
    .member-popup-content.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }

  .member-section
    .flex.member-popup-content.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 767px) {
  #environment-section .grade-structure-block > .member-popup-content.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .ai-native-section
    .c-inner-container
    > .member-popup-content.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 80px;
  }

  .ai-native-section
    .c-inner-container
    > .flex.member-popup-content.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 80px;
  }
}

.member-popup-content {
  gap: 16px;
  background-color: var(--color-bg-white) !important;
  color: var(--color-text-primary) !important;
  opacity: 1 !important;
}

/* Member Popup: ヘッダー部分 */

@media (min-width: 1440px) {
  .member-popup-header.message-block {
    gap: 47px;
  }

  #product-section .member-popup-header.flex-col.gap-4.xl\:gap-fluid-8 {
    gap: 16px;
  }

  #product-section .flex.member-popup-header.gap-4.xl\:gap-fluid-8 {
    gap: 16px;
  }

  #value-culture-section .member-popup-header.flex-col.gap-4.md\:gap-4.xl\:gap-fluid-4 {
    gap: 16px;
  }

  #value-culture-section .flex.member-popup-header.gap-4.md\:gap-4.xl\:gap-fluid-4 {
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  /* AI Native circles: shrink inner image on tablet/mobile */

  /* AI Native circles: tighten gap on tablet/mobile */

  /* AI Native section: reduce vertical gap on tablet/mobile */

  .ai-native-section.member-popup-header.flex-col.gap-\[220px\] {
    gap: 120px;
  }

  /* AI Native circles: shrink inner image on tablet/mobile */

  /* AI Native circles: tighten gap on tablet/mobile */

  /* AI Native section: reduce vertical gap on tablet/mobile */

  .ai-native-section.flex.member-popup-header.gap-\[220px\] {
    gap: 120px;
  }
}

@media (max-width: 767px) {
  #evaluation .grade-structure-block > .member-popup-header.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
}

.member-popup-header {
  margin-bottom: 0px;
  display: flex;
  flex-direction: column;
  padding-bottom: 0px;
}

#site-header .desktop-nav-override > div.member-popup-header.items-center.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

@media (max-width: 1439px) {
  .ai-native-section
    .c-inner-container
    > .member-popup-header.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 100px;
  }

  .ai-native-section
    .c-inner-container
    > .flex.member-popup-header.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 100px;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  .work-section .work-card-content .member-popup-header.flex-col.gap-2\.75,
  .work-section .work-card-content .member-popup-header.flex-col.gap-2 {
    gap: 8px;
  }

  .work-section .work-card-content .flex.member-popup-header.gap-2\.75,
  .work-section .work-card-content .flex.member-popup-header.gap-2 {
    gap: 8px;
  }
}

@media (min-width: 1441px) {
  .work-section .work-card-content .member-popup-header.flex-col.gap-2\.75,
  .work-section .work-card-content .member-popup-header.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .work-section .work-card-content .flex.member-popup-header.gap-2\.75,
  .work-section .work-card-content .flex.member-popup-header.gap-2 {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .interview-section .interview-card-content .member-popup-header.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }

  .interview-section .interview-card-content .flex.member-popup-header.gap-2 {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }

  @media (min-width: 1441px) {
    .message-section .member-popup-header.flex-col.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480);
    }

    .message-section .flex.member-popup-header.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480);
    }
  }
}

@media (max-width: 1439px) {
  #site-header .desktop-nav-override > div.member-popup-header.items-center.gap-8 {
    gap: 24px;
  }
}

@media (max-width: 599px) {
  .index-page #recruit-section .member-popup-header.flex-col.gap-fluid-8 {
    gap: 60px;
  }

  .index-page #recruit-section .flex.member-popup-header.gap-fluid-8 {
    gap: 60px;
  }

  .index-page #recruit-section .member-popup-header.flex-col.gap-fluid-4 {
    gap: 12px;
  }

  .index-page #recruit-section .flex.member-popup-header.gap-fluid-4 {
    gap: 12px;
  }
}

@media (max-width: 1440px) {
  .interview-section
    .member-popup-header.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .interview-section
    .flex.member-popup-header.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .interview-section
    .member-popup-header.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .interview-section
    .flex.member-popup-header.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }
}

@media (max-width: 1440px) {
  .work-section
    .member-popup-header.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .flex.member-popup-header.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .member-popup-header.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .flex.member-popup-header.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .work-section
    .member-popup-header.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .flex.member-popup-header.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .work-section
    .member-popup-header.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .work-section
    .flex.member-popup-header.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .work-section
    .member-popup-header.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }

  .work-section
    .flex.member-popup-header.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 1440px) {
  .member-section
    .member-popup-header.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }

  .member-section
    .flex.member-popup-header.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .member-section
    .member-popup-header.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }

  .member-section
    .flex.member-popup-header.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .member-section
    .member-popup-header.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }

  .member-section
    .flex.member-popup-header.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 767px) {
  #environment-section .grade-structure-block > .member-popup-header.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .ai-native-section
    .c-inner-container
    > .member-popup-header.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 80px;
  }

  .ai-native-section
    .c-inner-container
    > .flex.member-popup-header.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 80px;
  }
}

.member-popup-header {
  gap: 8px;
  border-bottom: none;
}

/* Member Popup: SNSアイコン */

/* Member Popup: SNSアイコン */

.member-popup-social {
  display: flex !important;
  gap: 8px !important;
  margin-top: 0;
  margin-bottom: 0;
}

/* Member Popup: 役職 */

.member-popup-role {
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Member Popup: 氏名（英語） */

.member-popup-name-en {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

@media (min-width: 1440px) {
  .member-popup-social a.message-block {
    gap: 47px;
  }

  #product-section .member-popup-social a.flex-col.gap-4.xl\:gap-fluid-8 {
    gap: 16px;
  }

  #value-culture-section .member-popup-social a.flex-col.gap-4.md\:gap-4.xl\:gap-fluid-4 {
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  /* AI Native circles: shrink inner image on tablet/mobile */

  /* AI Native circles: tighten gap on tablet/mobile */

  /* AI Native section: reduce vertical gap on tablet/mobile */

  .ai-native-section.member-popup-social a.flex-col.gap-\[220px\] {
    gap: 120px;
  }
}

@media (max-width: 767px) {
  #evaluation .grade-structure-block > .member-popup-social a.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
}

.member-popup-social a {
  display: flex;
  align-items: center;
  justify-content: center;
}

#site-header .desktop-nav-override > div.member-popup-social a.items-center.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

#site-header .desktop-nav-override > div.flex.member-popup-social a.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

@media (max-width: 1439px) {
  .ai-native-section
    .c-inner-container
    > .member-popup-social a.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 100px;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  .work-section .work-card-content .member-popup-social a.flex-col.gap-2\.75,
  .work-section .work-card-content .member-popup-social a.flex-col.gap-2 {
    gap: 8px;
  }
}

@media (min-width: 1441px) {
  .work-section .work-card-content .member-popup-social a.flex-col.gap-2\.75,
  .work-section .work-card-content .member-popup-social a.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .interview-section .interview-card-content .member-popup-social a.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }

  @media (min-width: 1441px) {
    .message-section .member-popup-social a.flex-col.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480);
    }
  }
}

@media (max-width: 1439px) {
  #site-header .desktop-nav-override > div.member-popup-social a.items-center.gap-8 {
    gap: 24px;
  }

  #site-header .desktop-nav-override > div.flex.member-popup-social a.gap-8 {
    gap: 24px;
  }
}

@media (max-width: 599px) {
  .index-page #recruit-section .member-popup-social a.flex-col.gap-fluid-8 {
    gap: 60px;
  }

  .index-page #recruit-section .member-popup-social a.flex-col.gap-fluid-4 {
    gap: 12px;
  }
}

@media (max-width: 1440px) {
  .interview-section
    .member-popup-social a.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .interview-section
    .member-popup-social a.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }
}

@media (max-width: 1440px) {
  .work-section
    .member-popup-social a.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .member-popup-social a.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .work-section
    .member-popup-social a.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .work-section
    .member-popup-social a.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .work-section
    .member-popup-social a.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 1440px) {
  .member-section
    .member-popup-social a.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .member-section
    .member-popup-social a.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .member-section
    .member-popup-social a.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 767px) {
  #environment-section .grade-structure-block > .member-popup-social a.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .ai-native-section
    .c-inner-container
    > .member-popup-social a.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 80px;
  }
}

.member-popup-social a {
  width: 28px;
  height: 28px;
  border-radius: 0;
  transition: opacity 0.2s ease;
  text-decoration: none;
  flex-shrink: 0;
}

.member-popup-social a:hover {
  opacity: 0.7;
}

.member-popup-social-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

/* Note icon: larger size to match other social icons */

.member-popup-note-icon {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  flex-shrink: 0 !important;
}

.member-popup-social svg {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  flex-shrink: 0;
}

/* Member Popup: 閉じるボタン */

@media (min-width: 1440px) {
  .member-popup-close.message-block {
    gap: 47px;
  }

  #product-section .member-popup-close.flex-col.gap-4.xl\:gap-fluid-8 {
    gap: 16px;
  }

  #value-culture-section .member-popup-close.flex-col.gap-4.md\:gap-4.xl\:gap-fluid-4 {
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  /* AI Native circles: shrink inner image on tablet/mobile */

  /* AI Native circles: tighten gap on tablet/mobile */

  /* AI Native section: reduce vertical gap on tablet/mobile */

  .ai-native-section.member-popup-close.flex-col.gap-\[220px\] {
    gap: 120px;
  }
}

@media (max-width: 767px) {
  #evaluation .grade-structure-block > .member-popup-close.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
}

.member-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#site-header .desktop-nav-override > div.member-popup-close.items-center.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

#site-header .desktop-nav-override > div.flex.member-popup-close.gap-8 a {
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: weight;
  letter-spacing: 0.02em;
}

@media (max-width: 330px) {
  main.index-page.font-en
    #hero-section
    div.member-popup-close.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page.font-en
    #hero-section
    div.member-popup-close.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page
    #hero-section
    div.member-popup-close.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
  }

  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.member-popup-close.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.member-popup-close.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
  }
}

@media (max-width: 1439px) {
  .ai-native-section
    .c-inner-container
    > .member-popup-close.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 100px;
  }
}

@media (max-width: 767px) {
  #hero-section > div.member-popup-close.top-0.z-10 {
    /* モバイル時は右端固定で拡大し、左を見切らせる */
    width: 100vw;
    left: auto;
    right: 0;
    height: auto;
  }
}

@media (min-width: 1140px) and (max-width: 1439px) {
  .index-page
    #hero-section
    > div.member-popup-close.inset-x-0.top-0.h-815.xl\:h-fluid-707.bg-no-repeat.bg-cover.bg-right-top.z-0.bg-hero-background-color,
  .index-page
    .member-popup-close.inset-x-0.top-0.h-815.xl\:h-fluid-815.bg-no-repeat.bg-cover.bg-right-top.z-0.bg-hero-background-color {
    /* height: 100% !important; */
    /* max-height: 80vh !important; */
    /* height: 100% !important; */
    /* max-height: 80vh !important; */
  }

  .index-page #hero-section > div.member-popup-close.top-0.right-0.z-10,
  .index-page #hero-section > div.member-popup-close.top-0.z-10 {
    /* 1140pxから1440pxまでの範囲で、ウィンドウ幅に応じて線形に拡大 */
    /* 1140pxの時: 1377px * (1140 / 1440) = 1090.5px */
    /* 1440pxの時: 1377px */
    /* 高さはウィンドウ基準ではなく親基準に */
    /* 1140pxから1440pxまでの範囲で、ウィンドウ幅に応じて線形に拡大 */
    /* 1140pxの時: 1377px * (1140 / 1440) = 1090.5px */
    /* 1440pxの時: 1377px */
    --fv-fluid-width: clamp(1090.5px, calc(1377px * 100vw / 1440px), 1377px);
    left: auto;
    right: 0;
    width: var(--fv-fluid-width);
    max-width: var(--fv-fluid-width);
    min-width: var(--fv-fluid-width);
    /* 高さはウィンドウ基準ではなく親基準に */
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  .index-page #hero-section > div.member-popup-close.top-0.right-0.z-10 > picture,
  .index-page #hero-section > div.member-popup-close.top-0.right-0.z-10 > picture > img,
  .index-page #hero-section > div.member-popup-close.top-0.right-0.z-10 > img {
    max-width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top;
       object-position: top;
  }

  main:not(.index-page) #hero-section > div.member-popup-close.top-0.z-10 {
    left: auto;
    right: 0;
    width: clamp(1090.5px, calc(1377px * 100vw / 1440px), 1377px);
    height: 100%;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  #hero-section > div.member-popup-close.top-0.z-10 {
    left: auto;
    right: 0;
    width: calc(100vw - 63px);
    height: 100%;
  }

  main:not(.index-page) #hero-section > div.member-popup-close.top-0.z-10,
  main:not(.index-page) #hero-section > div.member-popup-close.top-0.right-0.z-10 {
    height: 100%;
  }
}

@media (min-width: 1441px) {
  #hero-section > div.member-popup-close.top-0.z-10 {
    /* 右端に固定、左側は63px余白を確保 */
    left: auto;
    /* 左側の位置指定を解除 */
    right: 0;
    /* 右端に固定 */
    width: calc(
      100vw - 63px
    );
    /* 画面幅から63pxを引いた値で幅を設定 */
    height: 100%;
    /* 親要素（#hero-section）の高さに合わせる */
  }

  #hero-section > div.member-popup-close.top-0.z-10 > picture,
  #hero-section > div.member-popup-close.top-0.z-10 > picture > img,
  #hero-section > div.member-popup-close.top-0.z-10 > img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top;
       object-position: top;
  }
}

@media (min-width: 1440px) {
  .index-page
    #hero-section
    > div.member-popup-close.bottom-12.right-4.md\:right-10.z-10.text-right {
    bottom: 100px;
  }

  .index-page
    #hero-section
    > div.absolute.bottom-12.member-popup-close.md\:right-10.z-10.text-right {
    bottom: 100px;
  }

  #hero-section > div.member-popup-close.bottom-12.right-4.md\:right-10.z-10.text-right {
    bottom: 24px;
  }

  #hero-section > div.absolute.bottom-12.member-popup-close.md\:right-10.z-10.text-right {
    bottom: 24px;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {
  .work-section .work-card-content .member-popup-close.flex-col.gap-2\.75,
  .work-section .work-card-content .member-popup-close.flex-col.gap-2 {
    gap: 8px;
  }
}

@media (min-width: 1441px) {
  .work-section .work-card-content .member-popup-close.flex-col.gap-2\.75,
  .work-section .work-card-content .member-popup-close.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .interview-section .interview-card-content .member-popup-close.flex-col.gap-2 {
    gap: clamp(8px, calc(8px + (100vw - 1441px) * 0.01), 12px);
  }

  @media (min-width: 1441px) {
    .message-section .member-popup-close.flex-col.gap-8 {
      gap: calc(32px + 8 * (100vw - 1440px) / 480);
    }
  }
}

@media (max-width: 1439px) {
  #site-header .desktop-nav-override > div.member-popup-close.items-center.gap-8 {
    gap: 24px;
  }

  #site-header .desktop-nav-override > div.flex.member-popup-close.gap-8 {
    gap: 24px;
  }
}

@media (max-width: 599px) {
  .index-page #recruit-section .member-popup-close.flex-col.gap-fluid-8 {
    gap: 60px;
  }

  .index-page #recruit-section .member-popup-close.flex-col.gap-fluid-4 {
    gap: 12px;
  }
}

@media (min-width: 768px) {
  @media (min-width: 768px) and (max-width: 1139px) {
    .index-page #hero-section > div.member-popup-close.top-0.right-0.z-10,
    #hero-section > div.member-popup-close.top-0.z-10 {
      left: 63px;
      right: 0;
      width: auto;
      height: 100%;
      min-height: 100%;
      max-height: 100%;
    }
  }

  @media (min-width: 768px) and (max-width: 1439px) {
    .index-page #hero-section > div.member-popup-close.top-0.right-0.z-10 > picture,
    .index-page #hero-section > div.member-popup-close.top-0.right-0.z-10 > picture > img,
    .index-page #hero-section > div.member-popup-close.top-0.right-0.z-10 > img,
    #hero-section > div.member-popup-close.top-0.z-10 > picture,
    #hero-section > div.member-popup-close.top-0.z-10 > picture > img,
    #hero-section > div.member-popup-close.top-0.z-10 > img {
      max-width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      -o-object-position: top;
         object-position: top;
    }
  }
}

@media (max-width: 767px) {
  .index-page
    #hero-section
    > div.member-popup-close.inset-x-0.top-0.h-815.xl\:h-fluid-707.bg-no-repeat.bg-cover.bg-right-top.z-0.bg-hero-background-color,
  .index-page
    .member-popup-close.inset-x-0.top-0.h-815.xl\:h-fluid-815.bg-no-repeat.bg-cover.bg-right-top.z-0.bg-hero-background-color {
    height: 100vh;
    min-height: 100vh;
    max-height: 80vh;
  }

  .index-page #hero-section > div.member-popup-close.top-0.right-0.z-10 {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
  }

  .index-page #hero-section > div.member-popup-close.top-0.right-0.z-10 > picture,
  .index-page #hero-section > div.member-popup-close.top-0.right-0.z-10 > picture > img {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top;
       object-position: top;
  }
}

@media (max-width: 599px) {
  .index-page
    #hero-section
    > div.member-popup-close.inset-x-0.top-0.h-815.xl\:h-fluid-707.bg-no-repeat.bg-cover.bg-right-top.z-0.bg-hero-background-color,
  .index-page
    .member-popup-close.inset-x-0.top-0.h-815.xl\:h-fluid-815.bg-no-repeat.bg-cover.bg-right-top.z-0.bg-hero-background-color {
    height: var(--viewport-height, 100svh);
    min-height: var(--viewport-height, 100svh);
    max-height: 80vh;
  }

  .index-page #hero-section > div.member-popup-close.top-0.right-0.z-10 {
    height: var(--viewport-height, 100svh);
    min-height: var(--viewport-height, 100svh);
    max-height: var(--viewport-height, 100svh);
  }

  .index-page #hero-section > div.member-popup-close.top-0.right-0.z-10 > picture,
  .index-page #hero-section > div.member-popup-close.top-0.right-0.z-10 > picture > img {
    height: var(--viewport-height, 100svh);
    width: 100vw;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top;
       object-position: top;
  }
}

@media (max-width: 330px) {
  
  main.index-page
    #hero-section
    div.member-popup-close.hero-heading
    h1.hero-main-heading
    span[class*="max-[375px]:block"][class*="text-58"] {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }

  main.index-page.font-en
    #hero-section
    div.member-popup-close.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page.font-en
    #hero-section
    div.member-popup-close.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58,
  main.index-page
    #hero-section
    div.member-popup-close.bottom-12.max-\[375px\]:bottom-16.right-4.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }

  main.index-page.font-en
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.member-popup-close.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58.md\:text-72.font-bold.leading-1\.3,
  main.index-page
    #hero-section
    div.absolute.bottom-12.max-\[375px\]:bottom-16.member-popup-close.md\:right-10.z-10.text-right.hero-heading
    h1.hero-main-heading.text-white
    span.max-\[375px\]:block.hidden.text-58 {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
  }
}

@media (max-width: 1440px) {
  .interview-section
    .member-popup-close.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .interview-section
    .member-popup-close.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.lg\:justify-items-stretch.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }
}

@media (max-width: 1440px) {
  .work-section
    .member-popup-close.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }

  .work-section
    .member-popup-close.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .work-section
    .member-popup-close.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .work-section
    .member-popup-close.flex-col.gap-6.md\:gap-8.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(24px, calc(24px + ((100vw - 1440px) * 0.025)), 40px);
  }

  .work-section
    .member-popup-close.flex-col.gap-6.md\:gap-4.lg\:grid.lg\:grid-cols-3.xl\:gap-fluid-8 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 1440px) {
  .member-section
    .member-popup-close.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .member-section
    .member-popup-close.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: 24px;
  }
}

@media (min-width: 1441px) {
  .member-section
    .member-popup-close.flex-col.gap-4.md\:grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:gap-fluid-6 {
    gap: clamp(
      24px,
      calc(24px + ((100vw - 1440px) * 0.025)),
      9999px
    );
  }
}

@media (max-width: 767px) {
  #environment-section .grade-structure-block > .member-popup-close.items-start.gap-8 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1139px) {
  #hero-section .member-popup-close.top-0.right-0.z-10 {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
  }

  #hero-section .member-popup-close.top-0.right-0.z-10 picture,
  #hero-section .member-popup-close.top-0.right-0.z-10 img {
    height: 100%;
    max-width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top;
       object-position: top;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  main:not(.index-page) #hero-section > div.member-popup-close.top-0.right-0.z-10 {
    height: 682px;
    min-height: 682px;
    max-height: 682px;
  }

  main:not(.index-page)
    #hero-section
    > div.member-popup-close.top-0.right-0.z-10
    > picture,
  main:not(.index-page)
    #hero-section
    > div.member-popup-close.top-0.right-0.z-10
    > picture
    > img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top;
       object-position: top;
  }
}

@media (max-width: 767px) {
  main:not(.index-page) #hero-section > div.member-popup-close.top-0.right-0.z-10 {
    position: relative;
    top: auto;
    right: auto;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  main:not(.index-page)
    #hero-section
    > div.member-popup-close.top-0.right-0.z-10
    > picture,
  main:not(.index-page)
    #hero-section
    > div.member-popup-close.top-0.right-0.z-10
    > picture
    > img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    -o-object-fit: initial;
       object-fit: initial;
    -o-object-position: initial;
       object-position: initial;
  }
}

@media (min-width: 1441px) {
  main:not(.index-page) #hero-section > div.member-popup-close.top-0.right-0.z-10 {
    height: 65vh;
    min-height: unset;
    max-height: none;
  }
}

@media (min-width: 768px) {
  main:not(.index-page) #hero-section > div.member-popup-close.top-0.right-0.z-10 {
    right: 0;
    left: 63px;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

@media (min-width: 768px) and (max-width: 1439px) {
  main:not(.index-page)
    #hero-section
    > div.member-popup-close.top-0.right-0.z-10
    > picture,
  main:not(.index-page)
    #hero-section
    > div.member-popup-close.top-0.right-0.z-10
    > picture
    > img {
    display: block;
    height: 100%;
    width: 100%;
    min-width: 1377px;
    max-width: none;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (min-width: 768px) {
  main:not(.index-page) #hero-section > div.member-popup-close.top-0.right-0.z-10 {
    min-width: 0;
    max-width: none;
    width: auto;
    right: 0;
  }
}

@media (min-width: 768px) and (max-width: 1439px) {
  main:not(.index-page) #hero-section > div.member-popup-close.top-0.right-0.z-10 {
    height: 500px;
    min-height: 500px;
    max-height: 500px;
    border-bottom-left-radius: 4px;
    overflow: hidden;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  main:not(.index-page) #hero-section > div.member-popup-close.top-0.right-0.z-10 {
    height: 554px;
    min-height: 554px;
    max-height: 554px;
  }

  main:not(.index-page)
    #hero-section
    > div.member-popup-close.top-0.right-0.z-10
    > picture,
  main:not(.index-page)
    #hero-section
    > div.member-popup-close.top-0.right-0.z-10
    > picture
    > img {
    width: auto;
    min-width: unset;
    max-width: none;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  main:not(.index-page)
    #hero-section
    > div.member-popup-close.top-0.right-0.z-10
    > picture
    > img {
    -o-object-position: center top;
       object-position: center top;
  }
}

@media (min-width: 1441px) {
  
  main:not(.index-page) #hero-section > div.member-popup-close.top-0.right-0.z-10 {
    height: calc(500px * var(--fv-scale));
    min-height: calc(500px * var(--fv-scale));
    max-height: calc(500px * var(--fv-scale));
  }

  main:not(.index-page) #hero-section > div.member-popup-close.top-0.right-0.z-10 {
    height: clamp(
      500px,
      calc(500px + 284 * (100vw - 1441px) / 479),
      9999px
    );
    min-height: clamp(
      500px,
      calc(500px + 284 * (100vw - 1441px) / 479),
      9999px
    );
    max-height: clamp(
      500px,
      calc(500px + 284 * (100vw - 1441px) / 479),
      9999px
    );
  }
}

@media (max-width: 767px) {
  .ai-native-section
    .c-inner-container
    > .member-popup-close.flex-col.gap-4.lg\:gap-8.xl\:gap-fluid-145 {
    gap: 80px;
  }
}

.member-popup-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.member-popup-close:hover {
  background-color: var(--color-bg-subtle);
}

.member-popup-close svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-text-primary);
}

/* Member Popup: セクション */

/* font-size 定義は Typography – Font Size セクションに移動 */

/* Member Popup: セクションタイトル */

.member-popup-section-title {
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Member Popup: インタビュータイトル */

/* font-size 定義は Typography – Font Size セクションに移動 */

/* Member Popup: インタビュータイトル */

.member-popup-interview-title {
  color: var(--color-text-accent);
  font-size: 14px;
  margin-top: 4px;
}

/* Member Popup: インタビューテキスト */

/* font-size 定義は Typography – Font Size セクションに移動 */

/* Member Popup: 画像サイズの固定 (10px × 10px) — サムネイルのみに適用 */

.member-popup-content img.member-popup-image-thumb {
  width: 10px !important;
  height: 10px !important;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Note icon: exclude from small image size rule */

.member-popup-note-icon {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  flex-shrink: 0 !important;
}

@media (max-width: 1024px) and (min-width: 600px) {
  .member-popup {
    width: 80% !important;
    height: -moz-fit-content !important;
    height: fit-content !important;
    max-width: none !important;
    max-height: 80vh !important;
  }
}

@media (max-width: 767px) and (min-width: 600px) {
  .member-popup {
    width: 768px !important;
    height: -moz-fit-content !important;
    height: fit-content !important;
    max-width: none !important;
    max-height: 80vh !important;
  }

  .member-popup-content {
    padding: 32px !important;
  }

  /* font-size 定義は Typography – Font Size セクションに移動 */

  .member-popup-name-ja {
    font-size: 24px;
  }
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.-top-200 {
  top: -200px;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-12 {
  bottom: 3rem;
}

.bottom-130 {
  bottom: 130px;
}

.bottom-6 {
  bottom: 24px;
}

.bottom-7\.5 {
  bottom: 1.875rem;
}

.left-0 {
  left: 0px;
}

.left-5 {
  left: 1.25rem;
}

.left-646 {
  left: 646px;
}

.right-0 {
  right: 0px;
}

.right-10 {
  right: 40px;
}

.right-4 {
  right: 16px;
}

.right-6 {
  right: 24px;
}

.right-\[16px\] {
  right: 16px;
}

.right-\[8px\] {
  right: 8px;
}

.top-0 {
  top: 0px;
}

.top-4 {
  top: 16px;
}

.top-87 {
  top: 87px;
}

.top-\[12px\] {
  top: 12px;
}

.top-\[15px\] {
  top: 15px;
}

.top-full {
  top: 100%;
}

.top-px {
  top: 1px;
}

.isolate {
  isolation: isolate;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.m-0 {
  margin: 0px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-30px {
  margin-bottom: 30px;
}

.ml-0 {
  margin-left: 0px;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-auto {
  margin-left: auto;
}

.ml-neg-screen-center {
  margin-left: calc(-50vw + 50%);
}

.mr-0 {
  margin-right: 0px;
}

.mt-0 {
  margin-top: 0px;
}

.mt-107 {
  margin-top: 107px;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20px {
  margin-top: 20px;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 16px;
}

.mt-7 {
  margin-top: 28px;
}

.mt-\[20px\] {
  margin-top: 20px;
}

.mt-\[33px\] {
  margin-top: 33px;
}

.mt-\[36px\] {
  margin-top: 36px;
}

.mt-\[48px\] {
  margin-top: 48px;
}

.mt-auto {
  margin-top: auto;
}

.box-border {
  box-sizing: border-box;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.h-105 {
  height: 105px;
}

.h-122 {
  height: 122px;
}

.h-137 {
  height: 137px;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-38 {
  height: 38px;
}

.h-40 {
  height: 160px;
}

.h-5\.75 {
  height: 23px;
}

.h-6 {
  height: 24px;
}

.h-815 {
  height: 815px;
}

.h-857 {
  height: 857px;
}

.h-87 {
  height: 87px;
}

.h-9\.5 {
  height: 38px;
}

.h-\[815px\] {
  height: 815px;
}

.h-auto {
  height: auto;
}

.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}

.h-fluid-707 {
  height: clamp(707px, calc(707px + 177 * (100vw - 1440px) / 480), 9999px);
}

.h-fluid-815 {
  height: clamp(815px, calc(815px + 203.75 * (100vw - 1440px) / 480), 9999px);
}

.h-full {
  height: 100%;
}

.min-h-14 {
  min-height: 3.5rem;
}

.min-h-158 {
  min-height: 158px;
}

.min-h-225 {
  min-height: 225px;
}

.min-h-288 {
  min-height: 288px;
}

.min-h-\[93px\] {
  min-height: 93px;
}

.min-h-fluid-225 {
  min-height: clamp(225px, calc(225px + 55 * (100vw - 1440px) / 480), 280px);
}

.w-1 {
  width: 0.25rem;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-105 {
  width: 105px;
}

.w-1088 {
  width: 1088px;
}

.w-116 {
  width: 116px;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-200 {
  width: 200px;
}

.w-240 {
  width: 240px;
}

.w-4\/5 {
  width: 80%;
}

.w-40 {
  width: 160px;
}

.w-42\.5 {
  width: 10.625rem;
}

.w-43 {
  width: 43px;
}

.w-6 {
  width: 24px;
}

.w-62 {
  width: 62px;
}

.w-8 {
  width: 32px;
}

.w-\[384px\] {
  width: 384px;
}

.w-\[768px\] {
  width: 768px;
}

.w-auto {
  width: auto;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

.min-w-\[280px\] {
  min-width: 280px;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-\[400px\] {
  max-width: 400px;
}

.max-w-\[821px\] {
  max-width: 821px;
}

.max-w-\[960px\] {
  max-width: 960px;
}

.max-w-full {
  max-width: 100%;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-none {
  flex: none;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.border-collapse {
  border-collapse: collapse;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.resize {
  resize: both;
}

.list-outside {
  list-style-position: outside;
}

.list-\[disc\] {
  list-style-type: disc;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-stretch {
  justify-items: stretch;
}

.gap-0 {
  gap: 0px;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.25 {
  gap: 5px;
}

.gap-1\.8 {
  gap: 7px;
}

.gap-10 {
  gap: 40px;
}

.gap-12 {
  gap: 3rem;
}

.gap-14 {
  gap: 3.5rem;
}

.gap-15 {
  gap: 15px;
}

.gap-16\.25 {
  gap: 4.0625rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.75 {
  gap: 0.6875rem;
}

.gap-26 {
  gap: 26px;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-30px {
  gap: 30px;
}

.gap-4 {
  gap: 16px;
}

.gap-43 {
  gap: 43px;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-53 {
  gap: 53px;
}

.gap-6 {
  gap: 24px;
}

.gap-8 {
  gap: 32px;
}

.gap-\[101px\] {
  gap: 101px;
}

.gap-\[14px\] {
  gap: 14px;
}

.gap-\[220px\] {
  gap: 220px;
}

.gap-\[28px\] {
  gap: 28px;
}

.gap-\[32px\] {
  gap: 32px;
}

.gap-\[39px\] {
  gap: 39px;
}

.gap-\[3px\] {
  gap: 3px;
}

.gap-\[42px\] {
  gap: 42px;
}

.gap-\[44px\] {
  gap: 44px;
}

.gap-\[54px\] {
  gap: 54px;
}

.gap-\[5px\] {
  gap: 5px;
}

.gap-\[67px\] {
  gap: 67px;
}

.gap-\[68px\] {
  gap: 68px;
}

.gap-fluid-1-8 {
  gap: clamp(7px, calc(7px + 2 * (100vw - 1440px) / 480), 9px);
}

.gap-fluid-120 {
  gap: clamp(120px, calc(120px + 30 * (100vw - 1440px) / 480), 9999px);
}

.gap-fluid-4 {
  gap: clamp(4px, calc(4px + 1 * (100vw - 1440px) / 480), 9999px);
}

.gap-fluid-6 {
  gap: clamp(24px, calc(24px + 6 * (100vw - 1440px) / 480), 30px);
}

.gap-fluid-8 {
  gap: clamp(32px, calc(32px + 8 * (100vw - 1440px) / 480), 9999px);
}

.gap-x-4 {
  -moz-column-gap: 16px;
       column-gap: 16px;
}

.gap-y-8 {
  row-gap: 32px;
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-24 {
  border-radius: 24px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-b {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.rounded-l {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.rounded-r {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.rounded-bl-\[4px\] {
  border-bottom-left-radius: 4px;
}

.rounded-bl-none {
  border-bottom-left-radius: 0px;
}

.rounded-br {
  border-bottom-right-radius: 0.25rem;
}

.rounded-br-\[4px\] {
  border-bottom-right-radius: 4px;
}

.rounded-br-none {
  border-bottom-right-radius: 0px;
}

.rounded-tl-\[4px\] {
  border-top-left-radius: 4px;
}

.rounded-tl-none {
  border-top-left-radius: 0px;
}

.rounded-tr-\[4px\] {
  border-top-right-radius: 4px;
}

.rounded-tr-none {
  border-top-right-radius: 0px;
}

.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l {
  border-left-width: 1px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-t-0 {
  border-top-width: 0px;
}

.border-\[\#D9D9D9\] {
  --tw-border-opacity: 1;
  border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
}

.border-\[\#E8E8E8\] {
  --tw-border-opacity: 1;
  border-color: rgb(232 232 232 / var(--tw-border-opacity, 1));
}

.border-gray-125 {
  --tw-border-opacity: 1;
  border-color: rgb(232 232 232 / var(--tw-border-opacity, 1));
}

.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.bg-\[\#3EA8FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(62 168 255 / var(--tw-bg-opacity, 1));
}

.bg-baseColor {
  --tw-bg-opacity: 1;
  background-color: rgb(34 34 34 / var(--tw-bg-opacity, 1));
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-75 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1));
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-mintHover {
  --tw-bg-opacity: 1;
  background-color: rgb(246 251 250 / var(--tw-bg-opacity, 1));
}

.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(42 156 161 / var(--tw-bg-opacity, 1));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-tagPurple {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}

.bg-techCardIconIdea {
  --tw-bg-opacity: 1;
  background-color: rgb(234 233 255 / var(--tw-bg-opacity, 1));
}

.bg-techCardIconTech {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
  background-color: transparent;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-ainative-bg {
  background-image: url('../images/ainative-background.webp');
}

.bg-gradient-to-bl {
  background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-hero-background-color {
  background-image: url('/assets/images/hero-background-color.webp');
}

.bg-recruit-bg {
  background-image: url('../images/recruit-background.webp');
}

.from-gray-200 {
  --tw-gradient-from: #e5e7eb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-white {
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}

.bg-cover {
  background-size: cover;
}

.bg-bottom {
  background-position: bottom;
}

.bg-center {
  background-position: center;
}

.bg-right-top {
  background-position: right top;
}

.bg-top {
  background-position: top;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-2 {
  padding: 0.5rem;
}

.p-4 {
  padding: 16px;
}

.p-6 {
  padding: 24px;
}

.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.px-10 {
  padding-left: 40px;
  padding-right: 40px;
}

.px-15 {
  padding-left: 15px;
  padding-right: 15px;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 16px;
  padding-right: 16px;
}

.px-4\.5 {
  padding-left: 18px;
  padding-right: 18px;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 24px;
  padding-right: 24px;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-10 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-22 {
  padding-top: 22px;
  padding-bottom: 22px;
}

.py-4 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.py-6 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.py-7 {
  padding-top: 28px;
  padding-bottom: 28px;
}

.py-7\.5 {
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-10 {
  padding-bottom: 40px;
}

.pb-120 {
  padding-bottom: 120px;
}

.pb-32 {
  padding-bottom: 8rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-6 {
  padding-bottom: 24px;
}

.pb-\[138px\] {
  padding-bottom: 138px;
}

.pb-\[225px\] {
  padding-bottom: 225px;
}

.pb-\[85px\] {
  padding-bottom: 85px;
}

.pb-\[90px\] {
  padding-bottom: 90px;
}

.pl-1 {
  padding-left: 0.25rem;
}

.pl-4\.5 {
  padding-left: 18px;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-5\.75 {
  padding-left: 23px;
}

.pl-6 {
  padding-left: 24px;
}

.pr-26 {
  padding-right: 26px;
}

.pr-5\.75 {
  padding-right: 23px;
}

.pt-10 {
  padding-top: 40px;
}

.pt-120 {
  padding-top: 120px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 5rem;
}

.pt-25 {
  padding-top: 25px;
}

.pt-32 {
  padding-top: 8rem;
}

.pt-5\.5 {
  padding-top: 22px;
}

.pt-6 {
  padding-top: 24px;
}

.pt-8 {
  padding-top: 32px;
}

.pt-\[100px\] {
  padding-top: 100px;
}

.pt-\[112px\] {
  padding-top: 112px;
}

.pt-\[200px\] {
  padding-top: 200px;
}

.pt-\[80px\] {
  padding-top: 80px;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.font-en {
  font-family: Inter, Inter var, Roboto, Helvetica Neue, Arial, sans-serif;
}

.font-en-inter {
  font-family: Inter, Helvetica, Roboto, Arial, sans-serif;
}

.font-sans {
  font-family: Noto Sans JP, Roboto, Helvetica, Arial, sans-serif;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-58 {
  font-size: 58px;
}

.text-\[24px\] {
  font-size: 24px;
}

.text-\[3\.5rem\] {
  font-size: 3.5rem;
}

.text-\[32px\] {
  font-size: 32px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-fluid-base {
  font-size: clamp(16px, calc(16px + 4 * (100vw - 1440px) / 480), 22px);
}

.text-fluid-lg {
  font-size: clamp(17px, calc(17px + 4 * (100vw - 1440px) / 480), 9999px);
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.leading-\[1\.2\] {
  line-height: 1.2;
}

.leading-\[1\.6\] {
  line-height: 1.6;
}

.leading-\[1\.8\] {
  line-height: 1.8;
}

.leading-\[2\.0\] {
  line-height: 2.0;
}

.tracking-\[0\.02em\] {
  letter-spacing: 0.02em;
}

.tracking-\[0\.05em\] {
  letter-spacing: 0.05em;
}

.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.text-\[\#b3b3b3\] {
  --tw-text-opacity: 1;
  color: rgb(179 179 179 / var(--tw-text-opacity, 1));
}

.text-brand {
  --tw-text-opacity: 1;
  color: rgb(42 156 161 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-env {
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}

.text-inherit {
  color: inherit;
}

.text-textColor {
  --tw-text-opacity: 1;
  color: rgb(34 34 34 / var(--tw-text-opacity, 1));
}

.text-textColor-default {
  --tw-text-opacity: 1;
  color: rgb(34 34 34 / var(--tw-text-opacity, 1));
}

.text-textColor-link {
  --tw-text-opacity: 1;
  color: rgb(42 156 161 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.no-underline {
  text-decoration-line: none;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.shadow-\[0_10px_30px_rgba\(0\2c 0\2c 0\2c 0\.08\)\] {
  --tw-shadow: 0 10px 30px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0 10px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* 非推奨: font-helveticaはfont-sansに統一してください */

/* TODO: 将来的に削除予定 - すべてのフォント指定をfont-sansに統一 */

.font-helvetica {
  font-family: Helvetica, Arial, sans-serif;
}

.border-t {
  border-top-width: 1px;
}

.border-l {
  border-left-width: 1px;
}

/* c-text-77-fluid: 削除済み（section-titleに統合） */

/* ---- SUBCOPY COMPLETE MATCH ---- */

@media (min-width: 768px) {
  @media (min-width: 1440px) {
    .md\:flex.message-block {
      gap: 47px;
    }

    #product-section .md\:flex.flex-col.gap-4.xl\:gap-fluid-8 {
      gap: 16px;
    }

    #product-section .md\:gap-4.flex.flex-col.xl\:gap-fluid-8 {
      gap: 16px;
    }

    #value-culture-section .md\:flex.flex-col.gap-4.md\:gap-4.xl\:gap-fluid-4 {
      gap: 16px;
    }

    #value-culture-section .md\:gap-4.flex.flex-col.md\:gap-4.xl\:gap-fluid-4 {
      gap: 16px;
    }
  }

  @media (max-width: 1024px) {
    /* AI Native circles: shrink inner image on tablet/mobile */

    /* AI Native circles: tighten gap on tablet/mobile */

    /* AI Native section: reduce vertical gap on tablet/mobile */

    .md\:flex.ai-native-section.flex-col.gap-\[220px\] {
      gap: 120px !important;
    }
  }

  @media (max-width: 767px) {
    #evaluation .grade-structure-block > .md\:flex.items-start.gap-8 {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 20px !important;
    }

    #evaluation .grade-structure-block > .md\:gap-8.flex.items-start {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 20px !important;
    }
  }
}

@media (min-width: 1025px) {
  @media (min-width: 1440px) {
    #product-section .lg\:flex-col.flex.gap-4.xl\:gap-fluid-8 {
      gap: 16px;
    }

    #value-culture-section .lg\:flex-col.flex.gap-4.md\:gap-4.xl\:gap-fluid-4 {
      gap: 16px;
    }
  }

  @media (max-width: 1024px) {
    /* AI Native circles: shrink inner image on tablet/mobile */

    /* AI Native circles: tighten gap on tablet/mobile */

    /* AI Native section: reduce vertical gap on tablet/mobile */

    .lg\:flex-col.ai-native-section.flex.gap-\[220px\] {
      gap: 120px !important;
    }
  }

  @media (max-width: 767px) {
    #evaluation .grade-structure-block > .lg\:gap-8.flex.items-start {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 20px !important;
    }
  }
}

.hover\:-translate-y-2:hover {
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-brand:hover {
  --tw-border-opacity: 1;
  border-color: rgb(42 156 161 / var(--tw-border-opacity, 1));
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-mintHover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(246 251 250 / var(--tw-bg-opacity, 1));
}

.hover\:text-brand:hover {
  --tw-text-opacity: 1;
  color: rgb(42 156 161 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-200:hover {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group:hover .group-hover\:text-brand {
  --tw-text-opacity: 1;
  color: rgb(42 156 161 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:opacity-80 {
  opacity: 0.8;
}

@media (max-width: 599px) {
  .max-\[599px\]\:block {
    display: block;
  }

  .max-\[599px\]\:hidden {
    display: none;
  }
}

@media (max-width: 499px) {
  .max-\[499px\]\:right-\[10px\] {
    right: 10px;
  }
}

@media (max-width: 375px) {
  .max-\[375px\]\:bottom-16 {
    bottom: 4rem;
  }
}

@media (min-width: 375px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .md\:right-10 {
    right: 40px;
  }

  .md\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .md\:flex {
    display: flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-216 {
    height: 216px;
  }

  .md\:h-61\.25 {
    height: 245px;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-2\/3 {
    width: 66.666667%;
  }

  .md\:w-2\/5 {
    width: 40%;
  }

  .md\:w-226 {
    width: 226px;
  }

  .md\:w-3\/5 {
    width: 60%;
  }

  .md\:w-\[258px\] {
    width: 258px;
  }

  .md\:max-w-none {
    max-width: none;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4-max {
    grid-template-columns: repeat(4, max-content);
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:items-stretch {
    align-items: stretch;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:gap-4 {
    gap: 16px;
  }

  .md\:gap-6 {
    gap: 24px;
  }

  .md\:gap-8 {
    gap: 32px;
  }

  .md\:gap-x-10 {
    -moz-column-gap: 40px;
         column-gap: 40px;
  }

  .md\:gap-y-0 {
    row-gap: 0px;
  }

  .md\:border-t {
    border-top-width: 1px;
  }

  .md\:pb-20 {
    padding-bottom: 5rem;
  }

  .md\:pb-64 {
    padding-bottom: 16rem;
  }

  .md\:pt-20 {
    padding-top: 5rem;
  }

  .md\:pt-24 {
    padding-top: 6rem;
  }

  .md\:font-semibold {
    font-weight: 600;
  }

  .md\:border-t {
    border-top-width: 1px;
  }
}

@media (min-width: 1025px) {
  .lg\:absolute {
    position: absolute;
  }

  .lg\:bottom-6 {
    bottom: 24px;
  }

  .lg\:right-6 {
    right: 24px;
  }

  .lg\:ml-0 {
    margin-left: 0px;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:mt-107 {
    margin-top: 107px;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-auto {
    height: auto;
  }

  .lg\:min-h-225 {
    min-height: 225px;
  }

  .lg\:w-full {
    width: 100%;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:justify-items-stretch {
    justify-items: stretch;
  }

  .lg\:gap-0 {
    gap: 0px;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

  .lg\:gap-8 {
    gap: 32px;
  }

  .lg\:rounded-b {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
  }

  .lg\:rounded-t {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
  }

  .lg\:rounded-bl-none {
    border-bottom-left-radius: 0px;
  }

  .lg\:rounded-br-none {
    border-bottom-right-radius: 0px;
  }

  .lg\:border-b {
    border-bottom-width: 1px;
  }

  .lg\:border-l {
    border-left-width: 1px;
  }

  .lg\:border-r {
    border-right-width: 1px;
  }

  .lg\:border-t-0 {
    border-top-width: 0px;
  }

  .lg\:px-4\.5 {
    padding-left: 18px;
    padding-right: 18px;
  }

  .lg\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .lg\:pb-6 {
    padding-bottom: 24px;
  }

  .lg\:pt-5 {
    padding-top: 1.25rem;
  }

  .lg\:border-l {
    border-left-width: 1px;
  }
}

@media (min-width: 1440px) {
  .xl\:bottom-fluid-6 {
    bottom: clamp(24px, calc(24px + 6 * (100vw - 1440px) / 480), 30px);
  }

  .xl\:right-fluid-6 {
    right: clamp(24px, calc(24px + 6 * (100vw - 1440px) / 480), 30px);
  }

  .xl\:mb-fluid-30 {
    margin-bottom: clamp(30px, calc(30px + 8 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:ml-fluid-neg-center {
    margin-left: calc(-50vw + 50%);
  }

  .xl\:mt-15 {
    margin-top: 15px;
  }

  .xl\:mt-fluid-7 {
    margin-top: clamp(16px, calc(28px + 7 * (100vw - 1440px) / 480), 35px);
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:h-fluid-28 {
    height: clamp(112px, calc(112px + 36 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:h-fluid-38 {
    height: clamp(38px, calc(38px + 8 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:h-fluid-61-25 {
    height: clamp(245px, calc(245px + 60 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:h-fluid-815 {
    height: clamp(815px, calc(815px + 203.75 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:min-h-fluid-158 {
    min-height: clamp(158px, calc(158px + 40 * (100vw - 1440px) / 480), 198px);
  }

  .xl\:min-h-fluid-225 {
    min-height: clamp(225px, calc(225px + 55 * (100vw - 1440px) / 480), 280px);
  }

  .xl\:w-fluid-580 {
    width: clamp(580px, calc(580px + 145 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:w-fluid-62 {
    width: clamp(62px, calc(62px + 12 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:w-full {
    width: 100%;
  }

  .xl\:max-w-fluid-591 {
    max-width: clamp(320px, calc(591px + 150 * (100vw - 1440px) / 480), 741px);
  }

  .xl\:max-w-full {
    max-width: 100%;
  }

  .xl\:max-w-none {
    max-width: none;
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:gap-6 {
    gap: 24px;
  }

  .xl\:gap-fluid-1-8 {
    gap: clamp(7px, calc(7px + 2 * (100vw - 1440px) / 480), 9px);
  }

  .xl\:gap-fluid-12 {
    gap: clamp(48px, calc(48px + ((100vw - 1440px) * 0.025)), 9999px);
  }

  .xl\:gap-fluid-145 {
    gap: clamp(145px, calc(145px + 35 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:gap-fluid-2-75 {
    gap: clamp(11px, calc(11px + 4 * (100vw - 1440px) / 480), 15px);
  }

  .xl\:gap-fluid-3 {
    gap: clamp(12px, calc(12px + 3 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:gap-fluid-6 {
    gap: clamp(24px, calc(24px + 6 * (100vw - 1440px) / 480), 30px);
  }

  .xl\:gap-fluid-8 {
    gap: clamp(32px, calc(32px + 8 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:gap-fluid-small {
    gap: clamp(4px, calc(4px + 1 * (100vw - 1440px) / 480), 6px);
  }

  .xl\:p-fluid-6 {
    padding: clamp(24px, calc(24px + 6 * (100vw - 1440px) / 480), 30px);
  }

  .xl\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .xl\:px-fluid-4-5 {
    padding-left: clamp(18px, calc(18px + 5 * (100vw - 1440px) / 480), 23px);
    padding-right: clamp(18px, calc(18px + 5 * (100vw - 1440px) / 480), 23px);
  }

  .xl\:px-fluid-6 {
    padding-left: clamp(24px, calc(24px + 6 * (100vw - 1440px) / 480), 30px);
    padding-right: clamp(24px, calc(24px + 6 * (100vw - 1440px) / 480), 30px);
  }

  .xl\:pb-0 {
    padding-bottom: 0px;
  }

  .xl\:pb-fluid-120 {
    padding-bottom: clamp(120px, calc(120px + 30 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:pb-fluid-148 {
    padding-bottom: clamp(148px, calc(148px + 38 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:pb-fluid-35 {
    padding-bottom: clamp(35px, calc(35px + 10 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:pb-fluid-45 {
    padding-bottom: clamp(45px, calc(45px + 10 * (100vw - 1440px) / 480), 55px);
  }

  .xl\:pb-fluid-6 {
    padding-bottom: clamp(24px, calc(24px + 6 * (100vw - 1440px) / 480), 30px);
  }

  .xl\:pt-fluid-178 {
    padding-top: clamp(168px, calc(168px + 42 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:pt-fluid-200 {
    padding-top: clamp(200px, calc(200px + 50 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:pt-fluid-25 {
    padding-top: clamp(25px, calc(25px + 6 * (100vw - 1440px) / 480), 31px);
  }

  .xl\:pt-fluid-35 {
    padding-top: clamp(35px, calc(35px + 10 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:pt-fluid-46-25 {
    padding-top: clamp(46.25px, calc(46.25px + 12 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:pt-fluid-5 {
    padding-top: clamp(20px, calc(20px + 5 * (100vw - 1440px) / 480), 25px);
  }

  .xl\:pt-fluid-6 {
    padding-top: clamp(24px, calc(24px + 6 * (100vw - 1440px) / 480), 30px);
  }

  .xl\:pt-fluid-80 {
    padding-top: clamp(80px, calc(80px + 20 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:text-\[32px\] {
    font-size: 32px;
  }

  .xl\:text-fluid-base {
    font-size: clamp(16px, calc(16px + 4 * (100vw - 1440px) / 480), 22px);
  }

  .xl\:text-fluid-lg {
    font-size: clamp(17px, calc(17px + 4 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:text-fluid-sm {
    font-size: clamp(14px, calc(14px + 3.5 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:text-fluid-xl {
    font-size: clamp(20px, calc(20px + 5 * (100vw - 1440px) / 480), 9999px);
  }

  .xl\:leading-\[1\.6\] {
    line-height: 1.6;
  }
}