/* ===========================================
   SERVICE PAGE - 下層サービスページ共通CSS
   対象: page-video.php / page-event.php / page-system.php
         page-creative.php / page-next.php

   構成:
     1. CSS変数（フロントページと共通）
     2. PAGE HERO
     3. セクションシステム（.sec / .sec-dark）
     4. パララックス背景
     5. ヘッディングアニメーション
     6. h2 / h3 スタイル
     7. OVERVIEW コンポーネント
     8. SERVICE CARDS コンポーネント
     9. WORKFLOW コンポーネント
    10. GALLERY コンポーネント
    11. CTA BAND
    12. NAV BAND
    13. アニメーション keyframes
   =========================================== */


/* ===========================================
   1. CSS変数
   フロントページと同じ変数を使用
   =========================================== */
:root {
  --black: #0a0a0a;
  --white: #f5f5f0;
  --gray: #888;
  --gray-on-light: #5c5c5c;
  --gray-on-dark: #9a9a9a;
  --accent: #e0e0d8;
}


/* ===========================================
   2. PAGE HERO
   下層ページ用ヒーローセクション
   =========================================== */
.page-hero {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  padding: 0 2.5rem 4rem;
}

/* 背景画像 */
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.7) brightness(0.35) contrast(1.15);
}

/* オーバーレイ（ビネット + 走査線） */
.page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.7) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(245,245,240,0.02) 2px, rgba(245,245,240,0.02) 4px);
  pointer-events: none;
}

/* コンテンツ領域 */
.page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
}

/* 装飾番号（001 等） */
.page-hero-index {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(6rem, 18vw, 14rem);
  line-height: 0.85;
  letter-spacing: 0.04em;
  color: rgba(245,245,240,0.08);
  text-shadow:
    1px 0 4px rgba(150,150,150,0.3),
    -1px 0 4px rgba(150,150,150,0.3),
    0 1px 4px rgba(150,150,150,0.3),
    0 -1px 4px rgba(150,150,150,0.3);
  animation: heroOutlineIn 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  position: relative;
}
.page-hero-index .fill {
  position: absolute;
  inset: 0;
  color: var(--white);
  text-shadow: none;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  animation: heroFillReveal 1.4s 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* h1: ページタイトル（日本語主体） */
.page-hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: 0.06em;
  line-height: 1;
  margin-top: 0.5rem;
  animation: heroIn 1.2s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* h1内の英語サブ表記 */
.page-hero-title .heading-en {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-top: 0.6em;
}

/* ページ説明文 */
.page-hero-desc {
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  margin-top: 1.2rem;
  letter-spacing: 0.08em;
  font-weight: 300;
  color: rgba(245,245,240,0.7);
  max-width: 600px;
  line-height: 1.8;
  animation: heroIn 1.2s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}


/* ===========================================
   3. セクションシステム（.sec / .sec-dark）
   =========================================== */
.sec,
.sec-dark {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 96px;
}

/* 明るい背景セクション */
.sec {
  padding: 7rem 2.5rem;
  border-top: 1px solid var(--black);
}

/* 暗い背景セクション */
.sec-dark {
  padding: 7rem 2.5rem;
  background:
    radial-gradient(circle at top right, rgba(58, 88, 138, 0.32), transparent 42%),
    linear-gradient(135deg, #08111f 0%, #0d1f36 48%, #132a46 100%);
  color: var(--white);
  border-top: 1px solid #333;
}

/* セクション内のコンテンツ幅制限 */
.sec-inner {
  max-width: 1200px;
  margin: 0 auto;
}


/* ===========================================
   4. パララックス背景
   =========================================== */
.parallax-bg {
  position: absolute;
  inset: -80px 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}
.parallax-bg svg {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.06;
  filter: grayscale(1) contrast(0.7);
}
/* 暗背景セクション用SVG調整 */
.sec-dark .parallax-bg svg {
  opacity: 0.04;
  filter: grayscale(1) contrast(0.5) invert(1);
}
/* セクション内の全要素をパララックスの上に配置 */
.sec > *:not(.parallax-bg),
.sec-dark > *:not(.parallax-bg) {
  position: relative;
  z-index: 1;
}


/* ===========================================
   5. ヘッディングアニメーション
   =========================================== */

/* セクションラベル（小さいテキスト: "Overview" 等） */
.sec-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-on-light);
  margin-bottom: 0.5rem;
  display: block;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.sec-dark .sec-heading {
  color: var(--gray-on-dark);
}
.sec.visible .sec-heading,
.sec-dark.visible .sec-heading {
  opacity: 1;
  transform: translateX(0);
}

/* 装飾見出し（大文字: "WHAT WE DO" 等） */
.sec-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  letter-spacing: 0.05em;
  line-height: 0.9;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

/* 文字分割アニメーション用 */
.heading-chars {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.heading-char {
  display: inline-block;
  transform: translateY(100%) rotateX(-40deg);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.heading-char.space {
  width: 0.3em;
}
.sec.visible .heading-char,
.sec-dark.visible .heading-char {
  transform: translateY(0) rotateX(0deg);
  opacity: 1;
}

/* 下線アニメーション */
.heading-line {
  display: block;
  height: 2px;
  background: currentColor;
  margin-top: 0.5rem;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sec.visible .heading-line,
.sec-dark.visible .heading-line {
  transform: scaleX(1);
}

/* セクション本文のフェードインアニメーション */
.sec-body {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s 0.4s ease, transform 0.8s 0.4s ease;
}
.sec.visible .sec-body,
.sec-dark.visible .sec-body {
  opacity: 1;
  transform: translateY(0);
}


/* ===========================================
   6. h2 / h3 スタイル
   SEO/LLMO向けセマンティック見出し
   =========================================== */

/* h2: 各セクションの主題（日本語 + 英語サブ） */
.sec-body h2,
.sec-body h2 {
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
}
.sec-body h2 .heading-en {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-top: 0.4em;
}
/* 暗背景セクションのh2英語サブ調整 */
.sec-dark .sec-body h2 .heading-en {
  opacity: 0.35;
}

/* h3: サービスカード内見出し（日本語主体） */
.service-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.8rem;
}
.service-card-title .heading-en {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-top: 0.3em;
}

/* LLMO向けセクション要約文 */
.sec-summary {
  font-size: 1rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 1.5rem;
}
.sec-dark .sec-summary {
  color: rgba(245,245,240,0.6);
}


/* ===========================================
   7. OVERVIEW コンポーネント
   =========================================== */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 3rem;
  align-items: start;
}
.overview-lead {
  font-size: 1.4rem;
  line-height: 2;
  font-weight: 300;
  color: #444;
}
.overview-lead strong {
  font-weight: 700;
  color: var(--black);
}

/* 実績数値カード */
.overview-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.stat-card {
  padding: 1.5rem;
  border: 1px solid rgba(10,10,10,0.1);
  background: rgba(10,10,10,0.02);
}
.stat-card-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.8rem;
  letter-spacing: 0.04em;
  line-height: 1;
}
.stat-card-value .unit {
  font-size: 0.4em;
  color: var(--gray-on-light);
  margin-left: 0.15em;
}
.stat-card-label {
  margin-top: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-on-light);
  line-height: 1.5;
}


/* ===========================================
   8. SERVICE CARDS コンポーネント
   =========================================== */
.service-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
.service-card {
  border: 1px solid rgba(245,245,240,0.1);
  padding: 2.5rem 2rem;
  background: rgba(245,245,240,0.03);
  transition: background 0.4s, border-color 0.4s;
  position: relative;
  overflow: hidden;
}
.service-card:hover {
  background: rgba(245,245,240,0.06);
  border-color: rgba(245,245,240,0.2);
}

/* 装飾番号（01, 02...） */
.service-card-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.5rem;
  line-height: 1;
  color: rgba(245,245,240,0.08);
  position: absolute;
  top: 1rem;
  right: 1.5rem;
}

/* カード内テキスト */
.service-card p {
  font-size: 0.95rem;
  line-height: 1.9;
  color: rgba(245,245,240,0.65);
}
.service-card ul {
  list-style: none;
  margin-top: 1.2rem;
}
.service-card ul li {
  font-size: 0.88rem;
  line-height: 1.8;
  padding-left: 1.2rem;
  position: relative;
  color: rgba(245,245,240,0.55);
}
.service-card ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gray-on-dark);
}


/* ===========================================
   9. WORKFLOW コンポーネント
   =========================================== */
.workflow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  margin-top: 3rem;
  border: 1px solid rgba(10,10,10,0.1);
}
.workflow-step {
  padding: 2rem 1.5rem;
  border-right: 1px solid rgba(10,10,10,0.1);
  position: relative;
}
.workflow-step:last-child {
  border-right: none;
}

/* ステップ番号 */
.workflow-step-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  color: rgba(10,10,10,0.1);
  line-height: 1;
  margin-bottom: 1rem;
}

/* ステップタイトル */
.workflow-step-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  font-weight: 700;
}

/* ステップ説明文 */
.workflow-step p {
  font-size: 0.9rem;
  line-height: 1.8;
  color: #555;
}

/* ステップ間の矢印 */
.workflow-arrow {
  position: absolute;
  right: -0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--gray);
  z-index: 2;
  background: var(--white);
  padding: 0.2rem 0;
}


/* ===========================================
   10. GALLERY コンポーネント
   =========================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
.gallery-item {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
  background: var(--black);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.85) contrast(1.05);
  transform: scale(1.02);
  transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item:hover img {
  filter: grayscale(0) brightness(1) contrast(1);
  transform: scale(1.06);
}

/* インナーボーダー */
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(245,245,240,0.1);
  margin: 8px;
  pointer-events: none;
  transition: border-color 0.4s;
}
.gallery-item:hover::after {
  border-color: rgba(245,245,240,0.25);
}

/* ホバー時ラベル */
.gallery-item-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 1.2rem;
  background: linear-gradient(to top, rgba(10,10,10,0.8) 0%, transparent 100%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item:hover .gallery-item-label {
  transform: translateY(0);
}


/* ===========================================
   11. CTA BAND
   =========================================== */
.cta-band {
  padding: 5rem 2.5rem;
  background: var(--black);
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band-inner {
  position: relative;
  z-index: 1;
}
.cta-band-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: 0.06em;
}
.cta-band-sub {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: rgba(245,245,240,0.6);
  line-height: 1.8;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2rem;
  padding: 1rem 3rem;
  background: var(--white);
  color: var(--black);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.1s, gap 0.3s;
}
.cta-btn:hover {
  background: var(--accent);
  gap: 1.2rem;
}
.cta-btn:active {
  transform: scale(0.98);
}


/* ===========================================
   12. NAV BAND（前後ページナビゲーション）
   =========================================== */
.nav-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2.5rem;
  border-top: 1px solid var(--black);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav-band a {
  color: var(--black);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.3s;
}
.nav-band a:hover {
  gap: 0.8rem;
}


/* ===========================================
   13. アニメーション keyframes
   =========================================== */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroOutlineIn {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFillReveal {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* ===========================================
   追記分 ─ service-page.css 末尾に追加してください
   追記位置: 13. アニメーション keyframes セクションの直前
   =========================================== */


/* ===========================================
   14. セクションシステム追加: .sec-accent
   .sec（明るい）と .sec-dark（暗い）の中間トーン。
   明背景だがやや冷たい印象を持たせたアクセント用。
   003以降の下層ページでも再利用可能。
   =========================================== */
.sec-accent {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 96px;
  padding: 7rem 2.5rem;
  background:
    radial-gradient(circle at bottom left, rgba(58, 88, 138, 0.06), transparent 50%),
    linear-gradient(135deg, #f0f0ea 0%, #e8e8e0 55%, #e0e0d6 100%);
  color: var(--black);
  border-top: 1px solid #d0d0c8;
}

/* sec-accent 内のパララックス背景SVG */
.sec-accent .parallax-bg svg {
  opacity: 0.05;
  filter: grayscale(1) contrast(0.6);
}

/* sec-accent 内の全要素をパララックスの上に配置 */
.sec-accent > *:not(.parallax-bg) {
  position: relative;
  z-index: 1;
}

/* sec-accent のセクションラベル色 */
.sec-accent .sec-heading {
  color: var(--gray-on-light);
}
.sec-accent.visible .sec-heading {
  opacity: 1;
  transform: translateX(0);
}

/* sec-accent のheading-char / heading-line アニメーション */
.sec-accent.visible .heading-char {
  transform: translateY(0) rotateX(0deg);
  opacity: 1;
}
.sec-accent.visible .heading-line {
  transform: scaleX(1);
}

/* sec-accent のsec-body フェードイン */
.sec-accent .sec-body {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s 0.4s ease, transform 0.8s 0.4s ease;
}
.sec-accent.visible .sec-body {
  opacity: 1;
  transform: translateY(0);
}

/* sec-accent の h2 英語サブ表記 */
.sec-accent .sec-body h2 .heading-en {
  opacity: 0.4;
}

/* sec-accent のsec-summary テキスト色 */
.sec-accent .sec-summary {
  color: #555;
}


/* ===========================================
   15. STRENGTH CARDS コンポーネント
   概要セクション内で強みを横並びで表示するカード。
   3カラム（PCでは縦並びリスト風）。
   =========================================== */
.strength-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.strength-card {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}
.strength-card:last-child {
  border-bottom: none;
}

/* 装飾番号 */
.strength-card-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  line-height: 1;
  color: rgba(10, 10, 10, 0.12);
  flex-shrink: 0;
  min-width: 2.4rem;
}

/* カードタイトル */
.strength-card-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: var(--black);
}

/* カード説明文 */
.strength-card p {
  font-size: 0.92rem;
  line-height: 1.85;
  color: #555;
}

/* --- 暗背景セクション内での調整 --- */
.sec-dark .strength-card {
  border-bottom-color: rgba(245, 245, 240, 0.08);
}
.sec-dark .strength-card-num {
  color: rgba(245, 245, 240, 0.12);
}
.sec-dark .strength-card-title {
  color: var(--white);
}
.sec-dark .strength-card p {
  color: rgba(245, 245, 240, 0.6);
}


/* ===========================================
   16. EVENT SHOWCASE コンポーネント
   実績紹介カード。2カラム×2行（画像 + テキスト）。
   hover時に画像がカラー化するBrutalist Monoトーン。
   =========================================== */
.event-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}

.event-card {
  border: 1px solid rgba(10, 10, 10, 0.08);
  background: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.event-card:hover {
  border-color: rgba(10, 10, 10, 0.18);
  box-shadow: 0 12px 40px rgba(10, 10, 10, 0.06);
}

/* カード内画像 */
.event-card-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--black);
}
.event-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.85) contrast(1.05);
  transform: scale(1.02);
  transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.event-card:hover .event-card-image img {
  filter: grayscale(0) brightness(1) contrast(1);
  transform: scale(1.06);
}

/* カード本文エリア */
.event-card-body {
  padding: 1.8rem 1.6rem;
}

/* タグ（Self-Hosted / Food Festival 等） */
.event-card-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-on-light);
  display: block;
  margin-bottom: 0.6rem;
}

/* カードタイトル（英語） */
.event-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0;
}

/* カードタイトル（日本語サブ） */
.event-card-title-ja {
  font-size: 0.82rem;
  font-weight: 500;
  margin-top: 0.3rem;
  color: #555;
}

/* カード説明文 */
.event-card-body p {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.85;
  color: #555;
}

/* --- sec-accent 内での event-showcase 調整 --- */
.sec-accent .event-card {
  border-color: rgba(10, 10, 10, 0.06);
  background: rgba(255, 255, 255, 0.6);
}
.sec-accent .event-card:hover {
  border-color: rgba(10, 10, 10, 0.15);
}

/* --- sec-dark 内での event-showcase 調整 --- */
.sec-dark .event-card {
  border-color: rgba(245, 245, 240, 0.08);
  background: rgba(245, 245, 240, 0.03);
}
.sec-dark .event-card:hover {
  border-color: rgba(245, 245, 240, 0.18);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.sec-dark .event-card-tag {
  color: var(--gray-on-dark);
}
.sec-dark .event-card-title {
  color: var(--white);
}
.sec-dark .event-card-title-ja {
  color: rgba(245, 245, 240, 0.55);
}
.sec-dark .event-card-body p {
  color: rgba(245, 245, 240, 0.6);
}


/* ===========================================
   17. OPERATION GRID コンポーネント
   3カラムの特徴紹介。アイコン + タイトル + 説明。
   暗背景（sec-dark）での使用を主想定。
   =========================================== */
.operation-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
}

.operation-item {
  padding: 2rem 0;
  border-top: 1px solid rgba(245, 245, 240, 0.1);
}

/* アイコン（テキストベース: SYS / VID / OPS 等） */
.operation-item-icon {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem;
  line-height: 1;
  color: rgba(245, 245, 240, 0.15);
  margin-bottom: 1rem;
}

/* タイトル */
.operation-item-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  color: var(--white);
}

/* 説明文 */
.operation-item p {
  font-size: 0.92rem;
  line-height: 1.85;
  color: rgba(245, 245, 240, 0.6);
}

/* --- 明背景セクション内での調整 --- */
.sec .operation-item,
.sec-accent .operation-item {
  border-top-color: rgba(10, 10, 10, 0.1);
}
.sec .operation-item-icon,
.sec-accent .operation-item-icon {
  color: rgba(10, 10, 10, 0.1);
}
.sec .operation-item-title,
.sec-accent .operation-item-title {
  color: var(--black);
}
.sec .operation-item p,
.sec-accent .operation-item p {
  color: #555;
}

/* ===========================================
   追記分（003 SYSTEM） ─ service-page.css 末尾に追加
   前回 002 で追記した sec-accent / strength-cards /
   event-showcase / operation-grid の後に続けてください
   =========================================== */


/* ===========================================
   18. PAGE HERO CODE RAIN
   コードテキストの背景装飾（systemページ固有だが他ページでも使用可能）
   page-hero 内で背景画像の代わり、または補助として表示
   =========================================== */
.page-hero-code {
  position: absolute;
  inset: 0;
  z-index: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: rgba(245, 245, 240, 0.04);
  line-height: 1.8;
  padding: 6rem 2rem;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-all;
}


/* ===========================================
   19. PRINCIPLE LIST コンポーネント
   番号付き設計原則リスト。左に番号、右にタイトル+説明。
   =========================================== */
.principle-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(10, 10, 10, 0.1);
}
.principle-item {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.1);
}
.principle-item:last-child {
  border-bottom: none;
}

/* 番号セル */
.principle-item-num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  color: rgba(10, 10, 10, 0.12);
  border-right: 1px solid rgba(10, 10, 10, 0.1);
  padding: 1.2rem 0;
}

/* 本文セル */
.principle-item-body {
  padding: 1.2rem 1.5rem;
}

/* タイトル */
.principle-item-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

/* 説明文 */
.principle-item p {
  font-size: 0.9rem;
  line-height: 1.8;
  color: #555;
}

/* --- 暗背景セクション内での調整 --- */
.sec-dark .principle-list {
  border-color: rgba(245, 245, 240, 0.1);
}
.sec-dark .principle-item {
  border-bottom-color: rgba(245, 245, 240, 0.1);
}
.sec-dark .principle-item-num {
  color: rgba(245, 245, 240, 0.12);
  border-right-color: rgba(245, 245, 240, 0.1);
}
.sec-dark .principle-item-title {
  color: var(--white);
}
.sec-dark .principle-item p {
  color: rgba(245, 245, 240, 0.6);
}


/* ===========================================
   20. SERVICE LIST 3カラム・ボーダー接合バリアント
   修飾クラス .service-list--cols をservice-listに追加して使用。
   基本のservice-list（2カラム・gap）を上書きせずに共存可能。
   =========================================== */
.service-list.service-list--cols {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid rgba(245, 245, 240, 0.1);
}
.service-list--cols .service-card {
  border: none;
  border-right: 1px solid rgba(245, 245, 240, 0.1);
  background: transparent;
}
.service-list--cols .service-card:last-child {
  border-right: none;
}
.service-list--cols .service-card:hover {
  background: rgba(245, 245, 240, 0.04);
}

/* サービスカード番号（003では装飾的に使用） */
.service-list--cols .service-card-number {
  position: static;
  color: rgba(245, 245, 240, 0.06);
  margin-bottom: 1.2rem;
}

/* 英語タイトル主体のカードスタイル */
.service-card-title-ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(245, 245, 240, 0.6);
  margin-bottom: 1rem;
  display: block;
}

/* 明背景セクション内での title-ja 調整 */
.sec .service-card-title-ja,
.sec-accent .service-card-title-ja {
  color: #555;
}


/* ===========================================
   21. TECH STACK コンポーネント
   技術スタック一覧。可変カラム数のカードグリッド。
   =========================================== */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}
.stack-item {
  padding: 1.5rem;
  border: 1px solid rgba(10, 10, 10, 0.08);
  background: rgba(10, 10, 10, 0.015);
  transition: border-color 0.3s, background 0.3s;
}
.stack-item:hover {
  border-color: rgba(10, 10, 10, 0.2);
  background: rgba(10, 10, 10, 0.03);
}

/* カテゴリラベル（Language / Framework 等） */
.stack-item-category {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-on-light);
  margin-bottom: 0.6rem;
}

/* 技術名 */
.stack-item-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 説明文 */
.stack-item-desc {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  line-height: 1.7;
  color: #666;
}

/* --- 暗背景セクション内での調整 --- */
.sec-dark .stack-item {
  border-color: rgba(245, 245, 240, 0.08);
  background: rgba(245, 245, 240, 0.02);
}
.sec-dark .stack-item:hover {
  border-color: rgba(245, 245, 240, 0.18);
  background: rgba(245, 245, 240, 0.04);
}
.sec-dark .stack-item-category {
  color: var(--gray-on-dark);
}
.sec-dark .stack-item-name {
  color: var(--white);
}
.sec-dark .stack-item-desc {
  color: rgba(245, 245, 240, 0.55);
}


/* ===========================================
   22. CASE STUDY コンポーネント
   事例カード。2カラムグリッド + 技術タグ。
   暗背景セクション（sec-dark）での使用を主想定。
   =========================================== */
.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
.case-card {
  border: 1px solid rgba(245, 245, 240, 0.1);
  background: rgba(245, 245, 240, 0.03);
  overflow: hidden;
  transition: border-color 0.4s;
}
.case-card:hover {
  border-color: rgba(245, 245, 240, 0.2);
}

/* カードヘッダー（タグ + タイトル） */
.case-card-header {
  padding: 2rem 2rem 0;
}

/* タグ（Event × System 等） */
.case-card-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.4);
  margin-bottom: 0.6rem;
  display: block;
}

/* 英語タイトル */
.case-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  margin: 0;
}

/* 日本語サブタイトル */
.case-card-title-ja {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(245, 245, 240, 0.6);
  margin-top: 0.2rem;
}

/* カード本文 */
.case-card-body {
  padding: 1.2rem 2rem 2rem;
}
.case-card-body p {
  font-size: 0.92rem;
  line-height: 1.9;
  color: rgba(245, 245, 240, 0.6);
}

/* 技術タグ一覧 */
.case-card-techs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}
.case-card-tech {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(245, 245, 240, 0.12);
  color: rgba(245, 245, 240, 0.5);
  text-transform: uppercase;
}

/* --- 明背景セクション内での調整 --- */
.sec .case-card,
.sec-accent .case-card {
  border-color: rgba(10, 10, 10, 0.08);
  background: rgba(10, 10, 10, 0.015);
}
.sec .case-card:hover,
.sec-accent .case-card:hover {
  border-color: rgba(10, 10, 10, 0.18);
}
.sec .case-card-tag,
.sec-accent .case-card-tag {
  color: var(--gray-on-light);
}
.sec .case-card-title,
.sec-accent .case-card-title {
  color: var(--black);
}
.sec .case-card-title-ja,
.sec-accent .case-card-title-ja {
  color: #555;
}
.sec .case-card-body p,
.sec-accent .case-card-body p {
  color: #555;
}
.sec .case-card-tech,
.sec-accent .case-card-tech {
  border-color: rgba(10, 10, 10, 0.12);
  color: var(--gray-on-light);
}


/* ===========================================
   23. WORKFLOW 暗背景セクション上書き
   service-page.css のworkflowは明背景前提。
   sec-dark 内で使う場合の色・背景を上書き。
   =========================================== */
.sec-dark .workflow {
  border-color: rgba(245, 245, 240, 0.1);
}
.sec-dark .workflow-step {
  border-right-color: rgba(245, 245, 240, 0.1);
  border-bottom-color: rgba(245, 245, 240, 0.1);
}
.sec-dark .workflow-step-num {
  color: rgba(245, 245, 240, 0.08);
}
.sec-dark .workflow-step-title {
  color: var(--white);
}
.sec-dark .workflow-step p {
  color: rgba(245, 245, 240, 0.6);
}

/* 暗背景でのworkflow矢印（背景色をsec-darkに合わせる） */
.sec-dark .workflow-arrow {
  color: rgba(245, 245, 240, 0.3);
  background: linear-gradient(135deg, #050505 0%, #151515 52%, #2a2a2a 100%);
}


/* ===========================================
   24. セクションシステム追加: .sec-green
   緑がかった暗背景バリアント。
   004 CREATIVEのFeaturedセクション等で使用。
   =========================================== */
.sec-green {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 96px;
  padding: 7rem 2.5rem;
  background:
    radial-gradient(circle at top right, rgba(94, 145, 112, 0.28), transparent 42%),
    linear-gradient(135deg, #08150f 0%, #10281d 50%, #183626 100%);
  color: var(--white);
  border-top: 1px solid #333;
}

/* sec-green 内の全要素をパララックスの上に配置 */
.sec-green > *:not(.parallax-bg) {
  position: relative;
  z-index: 1;
}

/* sec-green 用パララックスSVG調整 */
.sec-green .parallax-bg svg {
  opacity: 0.04;
  filter: grayscale(1) contrast(0.5) invert(1);
}

/* sec-green 用セクションラベル */
.sec-green .sec-heading {
  color: var(--gray-on-dark);
}
.sec-green.visible .sec-heading {
  opacity: 1;
  transform: translateX(0);
}

/* sec-green 用ヘッディングアニメーション */
.sec-green.visible .heading-char {
  transform: translateY(0) rotateX(0deg);
  opacity: 1;
}
.sec-green.visible .heading-line {
  transform: scaleX(1);
}

/* sec-green 用本文フェードイン */
.sec-green.visible .sec-body {
  opacity: 1;
  transform: translateY(0);
}

/* sec-green 用 h2 英語サブ */
.sec-green .sec-body h2 .heading-en {
  opacity: 0.35;
}

/* sec-green 用 sec-summary */
.sec-green .sec-summary {
  color: rgba(245, 245, 240, 0.6);
}


/* ===========================================
   25. OVERVIEW VISUAL コンポーネント
   overview-grid 内の画像ブロック。
   004ではoverview-statsの代わりに画像を表示。
   =========================================== */
.overview-visual {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  background: var(--black);
}
.overview-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.85) contrast(1.05);
  transform: scale(1.02);
  transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.overview-visual:hover img {
  filter: grayscale(0) brightness(1) contrast(1);
  transform: scale(1.06);
}

/* インナーボーダー */
.overview-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(245, 245, 240, 0.1);
  margin: 10px;
  pointer-events: none;
  transition: border-color 0.4s;
}
.overview-visual:hover::after {
  border-color: rgba(245, 245, 240, 0.25);
}


/* ===========================================
   26. FEATURED WORK コンポーネント
   2カラムグリッド（画像 + テキスト）。
   004 CREATIVEのパラパラ漫画セクションで使用。
   sec-green / sec-dark 内での使用を主想定。
   =========================================== */
.featured-work {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 3rem;
  border: 1px solid rgba(245, 245, 240, 0.1);
}

/* 画像エリア */
.featured-work-visual {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  background: rgba(7, 22, 15, 0.7);
}
.featured-work-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.8) brightness(0.8) contrast(1.1);
  transform: scale(1.02);
  transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.featured-work:hover .featured-work-visual img {
  filter: grayscale(0) brightness(1) contrast(1);
  transform: scale(1.06);
}

/* 画像インナーボーダー */
.featured-work-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(245, 245, 240, 0.08);
  margin: 10px;
  pointer-events: none;
}

/* テキストエリア */
.featured-work-body {
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* タグ（Signature Creative 等） */
.featured-work-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.4);
  margin-bottom: 1rem;
}

/* 英語タイトル */
.featured-work-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 0.3rem;
}

/* 日本語サブタイトル */
.featured-work-title-ja {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(245, 245, 240, 0.6);
  margin-bottom: 1.2rem;
}

/* 本文 */
.featured-work-body p {
  font-size: 0.95rem;
  line-height: 1.9;
  color: rgba(245, 245, 240, 0.65);
}

/* リスト */
.featured-work-body ul {
  list-style: none;
  margin-top: 1.2rem;
}
.featured-work-body ul li {
  font-size: 0.88rem;
  line-height: 1.8;
  padding-left: 1.2rem;
  position: relative;
  color: rgba(245, 245, 240, 0.5);
}
.featured-work-body ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gray-on-dark);
}


/* ===========================================
   27. SERVICE CARD VISUAL バリアント
   修飾クラス .service-list--visual をservice-listに追加。
   画像付きの3カラムサービスカード（明背景用）。
   =========================================== */
.service-list.service-list--visual {
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* カードスタイル上書き（明背景用） */
.service-list--visual .service-card {
  border: 1px solid rgba(10, 10, 10, 0.1);
  background: rgba(10, 10, 10, 0.02);
  padding: 0;
  overflow: hidden;
  transition: border-color 0.4s;
}
.service-list--visual .service-card:hover {
  border-color: rgba(10, 10, 10, 0.25);
  background: rgba(10, 10, 10, 0.02);
}

/* カード内画像エリア */
.service-card-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background: var(--black);
}
.service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.85) contrast(1.05);
  transform: scale(1.02);
  transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-list--visual .service-card:hover .service-card-image img {
  filter: grayscale(0) brightness(1) contrast(1);
  transform: scale(1.06);
}

/* カード内テキストエリア */
.service-list--visual .service-card-body {
  padding: 1.8rem 1.5rem;
}

/* タグ（Corporate / Product / Branding 等） */
.service-card-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-on-light);
  margin-bottom: 0.6rem;
  display: block;
}

/* service-list--visual 内の h3 タイトル */
.service-list--visual .service-card-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.8rem;
  color: var(--black);
}
.service-list--visual .service-card-title .heading-en {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.5;
  margin-top: 0.3em;
}

/* カード内本文 */
.service-list--visual .service-card p {
  font-size: 0.92rem;
  line-height: 1.9;
  color: #555;
}


/* ===========================================
   28. PROCESS GRID コンポーネント
   2カラム: リード文 + ステップリスト。
   sec-dark 内での使用を主想定。
   =========================================== */
.process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 3rem;
  align-items: start;
}

/* リード文 */
.process-lead {
  font-size: 1.1rem;
  line-height: 2;
  color: rgba(245, 245, 240, 0.65);
}
.process-lead strong {
  font-weight: 700;
  color: var(--white);
}

/* ステップリスト（枠線で囲んだ縦並び） */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(245, 245, 240, 0.1);
}

/* 各ステップ */
.process-step {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  border-bottom: 1px solid rgba(245, 245, 240, 0.1);
}
.process-step:last-child {
  border-bottom: none;
}

/* ステップ番号 */
.process-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  color: rgba(245, 245, 240, 0.1);
  border-right: 1px solid rgba(245, 245, 240, 0.1);
  padding: 1.2rem 0;
}

/* ステップ本文 */
.process-step-body {
  padding: 1.2rem 1.5rem;
}

/* ステップタイトル */
.process-step-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

/* ステップ説明文 */
.process-step p {
  font-size: 0.9rem;
  line-height: 1.8;
  color: rgba(245, 245, 240, 0.55);
}

/* --- 明背景セクション内での調整 --- */
.sec .process-steps {
  border-color: rgba(10, 10, 10, 0.1);
}
.sec .process-step {
  border-bottom-color: rgba(10, 10, 10, 0.1);
}
.sec .process-step-num {
  color: rgba(10, 10, 10, 0.12);
  border-right-color: rgba(10, 10, 10, 0.1);
}
.sec .process-lead {
  color: #444;
}
.sec .process-lead strong {
  color: var(--black);
}
.sec .process-step-title {
  color: var(--black);
}
.sec .process-step p {
  color: #555;
}


/* ===========================================
   29. USE CASE GRID コンポーネント
   可変カラム数のカードグリッド。明背景セクション用。
   =========================================== */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}
.usecase-item {
  padding: 1.8rem 1.5rem;
  border: 1px solid rgba(10, 10, 10, 0.08);
  background: rgba(10, 10, 10, 0.015);
  transition: border-color 0.3s;
}
.usecase-item:hover {
  border-color: rgba(10, 10, 10, 0.2);
}

/* アイコンラベル */
.usecase-item-icon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-on-light);
  margin-bottom: 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}

/* h3 タイトル */
.usecase-item-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

/* 説明文 */
.usecase-item p {
  font-size: 0.88rem;
  line-height: 1.8;
  color: #666;
}

/* --- 暗背景セクション内での調整 --- */
.sec-dark .usecase-item,
.sec-green .usecase-item {
  border-color: rgba(245, 245, 240, 0.08);
  background: rgba(245, 245, 240, 0.02);
}
.sec-dark .usecase-item:hover,
.sec-green .usecase-item:hover {
  border-color: rgba(245, 245, 240, 0.18);
}
.sec-dark .usecase-item-icon,
.sec-green .usecase-item-icon {
  color: var(--gray-on-dark);
  border-bottom-color: rgba(245, 245, 240, 0.08);
}
.sec-dark .usecase-item-title,
.sec-green .usecase-item-title {
  color: var(--white);
}
.sec-dark .usecase-item p,
.sec-green .usecase-item p {
  color: rgba(245, 245, 240, 0.55);
}


/* ===========================================
   30. CTA BAND: sec-green 背景バリアント
   004 CREATIVE の CTA は緑系グラデーション
   =========================================== */
.cta-band--green {
  background:
    radial-gradient(circle at top right, rgba(94, 145, 112, 0.2), transparent 42%),
    linear-gradient(135deg, #08150f 0%, #10281d 50%, #183626 100%);
}
/* ===========================================
   31. MANIFESTO GRID コンポーネント（005 NEXT）
   2カラム: リード文 + 柱リスト。
   overview-grid と類似構成だが、右カラムが
   番号付きリスト（pillar-item）になる点が異なる。
   =========================================== */
.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 3rem;
  align-items: start;
}

/* リード文 */
.manifesto-lead {
  font-size: 1.4rem;
  line-height: 2;
  font-weight: 300;
  color: #444;
}
.manifesto-lead strong {
  font-weight: 700;
  color: var(--black);
}

/* 柱リスト（枠線で囲んだ縦並び） */
.manifesto-pillars {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(10, 10, 10, 0.1);
}

/* 各柱アイテム */
.pillar-item {
  display: grid;
  grid-template-columns: 5rem 1fr;
  border-bottom: 1px solid rgba(10, 10, 10, 0.1);
}
.pillar-item:last-child {
  border-bottom: none;
}

/* 番号セル */
.pillar-item-num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  color: rgba(10, 10, 10, 0.12);
  border-right: 1px solid rgba(10, 10, 10, 0.1);
  padding: 1.2rem 0;
}

/* 本文セル */
.pillar-item-body {
  padding: 1.2rem 1.5rem;
}

/* タイトル */
.pillar-item-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

/* 説明文 */
.pillar-item p {
  font-size: 0.9rem;
  line-height: 1.8;
  color: #555;
}


/* ===========================================
   32. PILLAR CARD コンポーネント（005 NEXT）
   2カラム: ビジュアル + テキスト。
   .reversed で左右反転。sec-dark 内使用を主想定。
   =========================================== */

/* カードラッパー（マージン） */
.pillar-deep {
  margin-top: 3rem;
}
.pillar-deep + .pillar-deep {
  margin-top: 0;
}

/* カード本体 */
.pillar-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(245, 245, 240, 0.1);
}

/* 反転レイアウト */
.pillar-card.reversed {
  direction: rtl;
}
.pillar-card.reversed > * {
  direction: ltr;
}

/* ビジュアル側 */
.pillar-card-visual {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  background: rgba(10, 10, 10, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pillar-card-visual-inner {
  padding: 3rem;
  text-align: center;
}

/* ビジュアル内装飾番号 */
.pillar-card-visual-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(5rem, 12vw, 8rem);
  line-height: 0.85;
  color: rgba(245, 245, 240, 0.06);
  letter-spacing: 0.04em;
}

/* ビジュアル内ラベル */
.pillar-card-visual-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.35);
  margin-top: 0.8rem;
}

/* テキスト側 */
.pillar-card-body {
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* タグ（Next-Gen Service / ... ） */
.pillar-card-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.4);
  margin-bottom: 1rem;
}

/* h3 タイトル */
.pillar-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 0.3rem;
}

/* 日本語サブタイトル */
.pillar-card-title-ja {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(245, 245, 240, 0.6);
  margin-bottom: 1.2rem;
}

/* 本文 */
.pillar-card-body p {
  font-size: 0.95rem;
  line-height: 1.9;
  color: rgba(245, 245, 240, 0.6);
}

/* 特徴リスト */
.pillar-card-features {
  list-style: none;
  margin-top: 1.5rem;
}
.pillar-card-features li {
  font-size: 0.88rem;
  line-height: 1.8;
  padding-left: 1.2rem;
  position: relative;
  color: rgba(245, 245, 240, 0.5);
}
.pillar-card-features li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gray-on-dark);
}
.pillar-card-features li + li {
  margin-top: 0.3rem;
}


/* ===========================================
   33. COMPARISON テーブル（005 NEXT）
   3カラムのグリッドテーブル。
   .highlight で「当社」列を視覚強調。
   =========================================== */
.comparison {
  margin-top: 3rem;
  border: 1px solid rgba(10, 10, 10, 0.1);
  overflow: hidden;
}

/* ヘッダー行 */
.comparison-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: rgba(10, 10, 10, 0.03);
  border-bottom: 1px solid rgba(10, 10, 10, 0.1);
}
.comparison-header-cell {
  padding: 1rem 1.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  border-right: 1px solid rgba(10, 10, 10, 0.1);
}
.comparison-header-cell:last-child {
  border-right: none;
}

/* データ行 */
.comparison-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}
.comparison-row:last-child {
  border-bottom: none;
}

/* セル共通 */
.comparison-cell {
  padding: 1rem 1.5rem;
  font-size: 0.88rem;
  line-height: 1.7;
  color: #555;
  border-right: 1px solid rgba(10, 10, 10, 0.06);
}
.comparison-cell:last-child {
  border-right: none;
}
.comparison-cell:first-child {
  font-weight: 500;
  color: var(--black);
}

/* ハイライト列（当社アプローチ） */
.comparison-cell.highlight {
  background: rgba(10, 10, 10, 0.02);
  color: var(--black);
  font-weight: 500;
}


/* ===========================================
   34. MODEL GRID コンポーネント（005 NEXT）
   サブスクリプション3フェーズカード。
   sec-dark 内使用を主想定。
   =========================================== */
.model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 3rem;
  border: 1px solid rgba(245, 245, 240, 0.1);
}

/* 各フェーズカード */
.model-card {
  padding: 2.5rem 2rem;
  border-right: 1px solid rgba(245, 245, 240, 0.1);
  transition: background 0.4s;
}
.model-card:last-child {
  border-right: none;
}
.model-card:hover {
  background: rgba(245, 245, 240, 0.04);
}

/* フェーズラベル */
.model-card-phase {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.4);
  margin-bottom: 0.8rem;
}

/* h3 タイトル（英語） */
.model-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}

/* 日本語サブタイトル */
.model-card-title-ja {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(245, 245, 240, 0.55);
  margin-bottom: 1rem;
}

/* 本文 */
.model-card p {
  font-size: 0.92rem;
  line-height: 1.9;
  color: rgba(245, 245, 240, 0.6);
}

/* リスト */
.model-card ul {
  list-style: none;
  margin-top: 1rem;
}
.model-card ul li {
  font-size: 0.85rem;
  line-height: 1.8;
  padding-left: 1.2rem;
  position: relative;
  color: rgba(245, 245, 240, 0.48);
}
.model-card ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gray-on-dark);
}


/* ===========================================
   35. WHY GRID コンポーネント（005 NEXT）
   2カラム: リード文 + 強みポイントリスト。
   overview-grid と類似構成だが、右カラムが
   アイコン付きポイントカード。
   =========================================== */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 3rem;
  align-items: start;
}

/* リード文 */
.why-lead {
  font-size: 1.1rem;
  line-height: 2;
  color: #444;
}
.why-lead strong {
  font-weight: 700;
  color: var(--black);
}

/* ポイントリスト */
.why-points {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(10, 10, 10, 0.1);
}

/* 各ポイント */
.why-point {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  border-bottom: 1px solid rgba(10, 10, 10, 0.1);
}
.why-point:last-child {
  border-bottom: none;
}

/* アイコンセル */
.why-point-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  color: rgba(10, 10, 10, 0.12);
  border-right: 1px solid rgba(10, 10, 10, 0.1);
  padding: 1.2rem 0;
}

/* テキストセル */
.why-point-body {
  padding: 1.2rem 1.5rem;
}

/* h3 タイトル */
.why-point-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

/* 説明文 */
.why-point p {
  font-size: 0.88rem;
  line-height: 1.8;
  color: #555;
}


/* ===========================================
   36. SEC-DARK 背景バリアント（005 NEXT）
   Pillar 02 LLMO セクション用。
   グラデーション方向を変えて視覚的に区別。
   =========================================== */
.sec-dark--alt {
  background:
    radial-gradient(circle at bottom left, rgba(140, 140, 140, 0.12), transparent 40%),
    linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 52%, #252525 100%);
}
/* ===========================================
   37. PAGE HERO COMPACT バリアント（COMPANY）
   背景画像なし・高さ50vhのコンパクトヒーロー。
   会社概要・採用情報・プライバシーポリシー等で使用。
   =========================================== */

/* コンパクトヒーロー: 高さ縮小 */
.page-hero--compact {
  min-height: 50vh;
}

/* オーバーレイ: 背景画像がないのでグラデーション直接指定 */
.page-hero--compact .page-hero-overlay {
  background:
    radial-gradient(circle at top right, rgba(140, 140, 140, 0.1), transparent 35%),
    linear-gradient(135deg, #050505 0%, #151515 52%, #2a2a2a 100%);
}

/* 走査線エフェクト（コンパクトヒーロー固有） */
.page-hero-scanlines {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(245, 245, 240, 0.015) 2px,
    rgba(245, 245, 240, 0.015) 4px
  );
  pointer-events: none;
}

/* 装飾テキスト: 文字サイズ調整（"COMPANY"は長いため） */
.page-hero--compact .page-hero-index {
  font-size: clamp(5rem, 15vw, 12rem);
}


/* ===========================================
   38. INFO TABLE コンポーネント（COMPANY）
   会社情報の定義リスト風テーブル。
   2カラムグリッド: ラベル | 値。
   =========================================== */
.info-table {
  margin-top: 3rem;
  border: 1px solid rgba(10, 10, 10, 0.1);
  width: 100%;
}

/* 各行 */
.info-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}
.info-row:last-child {
  border-bottom: none;
}

/* ラベルセル */
.info-label {
  padding: 1.2rem 1.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(10, 10, 10, 0.02);
  border-right: 1px solid rgba(10, 10, 10, 0.08);
  display: flex;
  align-items: center;
}

/* 値セル */
.info-value {
  padding: 1.2rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #444;
}

/* 値セル内リンク */
.info-value a {
  color: var(--black);
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 10, 10, 0.2);
  transition: border-color 0.3s;
}
.info-value a:hover {
  border-color: var(--black);
}

/* 値セル内補足テキスト */
.info-value small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--gray-on-light);
  line-height: 1.6;
}


/* ===========================================
   39. PROGRAM GRID コンポーネント（COMPANY）
   制作番組カード3列。sec-dark 内使用を主想定。
   model-grid（005 NEXT）と類似構成。
   =========================================== */
.program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 3rem;
  border: 1px solid rgba(245, 245, 240, 0.1);
}

/* 各番組カード */
.program-card {
  padding: 2.5rem 2rem;
  border-right: 1px solid rgba(245, 245, 240, 0.1);
  transition: background 0.4s;
}
.program-card:last-child {
  border-right: none;
}
.program-card:hover {
  background: rgba(245, 245, 240, 0.04);
}

/* タグ（TV / Radio 等） */
.program-card-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.4);
  margin-bottom: 0.8rem;
}

/* h3 番組タイトル（英語） */
.program-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}

/* 日本語サブタイトル */
.program-card-title-ja {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(245, 245, 240, 0.6);
  margin-bottom: 0.8rem;
}

/* 本文 */
.program-card p {
  font-size: 0.88rem;
  line-height: 1.8;
  color: rgba(245, 245, 240, 0.55);
}

/* リンク */
.program-card a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 245, 240, 0.6);
  border-bottom: 1px solid rgba(245, 245, 240, 0.2);
  padding-bottom: 0.2rem;
  transition: color 0.3s, border-color 0.3s;
}
.program-card a:hover {
  color: var(--white);
  border-color: var(--white);
}


/* ===========================================
   40. ACCESS GRID コンポーネント（COMPANY）
   2カラム: テキスト情報 + Google Maps embed。
   =========================================== */
.access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 3rem;
  align-items: start;
}

/* テキスト情報 */
.access-info {
  font-size: 0.95rem;
  line-height: 2;
  color: #444;
}
.access-info strong {
  font-weight: 700;
  color: var(--black);
  display: block;
  margin-bottom: 0.5rem;
}

/* 情報アイテム */
.access-info-item {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}
.access-info-item:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ラベル */
.access-info-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-on-light);
  margin-bottom: 0.4rem;
}

/* 地図コンテナ */
.access-map {
  aspect-ratio: 4 / 3;
  background: var(--black);
  border: 1px solid rgba(10, 10, 10, 0.1);
  overflow: hidden;
}
.access-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.8) contrast(1.1);
  transition: filter 0.6s;
}
.access-map:hover iframe {
  filter: grayscale(0) contrast(1);
}


/* ===========================================
   41. RELATED GRID コンポーネント（COMPANY）
   グループ企業カード2列。明背景セクション用。
   =========================================== */
.related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}

/* 各カード */
.related-card {
  border: 1px solid rgba(10, 10, 10, 0.1);
  padding: 2rem 1.8rem;
  transition: border-color 0.3s;
}
.related-card:hover {
  border-color: rgba(10, 10, 10, 0.25);
}

/* タグ */
.related-card-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-on-light);
  margin-bottom: 0.6rem;
}

/* h3 会社名 */
.related-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

/* 本文 */
.related-card p {
  font-size: 0.88rem;
  line-height: 1.8;
  color: #555;
}

/* リンク */
.related-card a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--black);
  border-bottom: 1px solid rgba(10, 10, 10, 0.2);
  padding-bottom: 0.2rem;
  transition: gap 0.3s, border-color 0.3s;
}
.related-card a:hover {
  gap: 0.7rem;
  border-color: var(--black);
}


/* ===========================================
   42. SEC 修飾: 薄い上罫線バリアント
   同系セクションが続く場合に使用。
   =========================================== */
.sec--light-border {
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}


/* ===========================================
   43. PRIVACY POLICY コンポーネント
   法務ページ用の本文レイアウト。
   =========================================== */
.policy-wrap {
  max-width: 860px;
  margin-top: 2.5rem;
}

.policy-intro {
  font-size: 1.02rem;
  line-height: 2;
  color: #444;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}

.policy-block {
  margin-bottom: 3rem;
}

.policy-block-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.4rem;
  letter-spacing: 0.06em;
  line-height: 1;
  color: rgba(10, 10, 10, 0.12);
  margin-bottom: 0.35rem;
}

.policy-block-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--black);
  display: inline-block;
}

.policy-wrap p,
.policy-wrap li {
  font-size: 0.95rem;
  line-height: 2;
  color: #444;
}

.policy-block p + p,
.policy-contact p + p {
  margin-top: 0.8rem;
}

.policy-wrap ol,
.policy-wrap ul {
  margin-top: 0.8rem;
  padding-left: 0;
}

.policy-wrap ol {
  list-style: none;
  counter-reset: policy-item;
}

.policy-wrap ol li {
  list-style: none;
  counter-increment: policy-item;
  padding-left: 2rem;
  position: relative;
}

.policy-wrap ol li::before {
  content: counter(policy-item) '.';
  position: absolute;
  left: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--gray-on-light);
  font-weight: 700;
}

.policy-wrap ul {
  list-style: none;
}

.policy-wrap ul li {
  list-style: none;
  padding-left: 1.5rem;
  position: relative;
}

.policy-wrap ul li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: var(--gray-on-light);
}

.policy-wrap a {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.policy-contact {
  margin-top: 3rem;
  padding: 2.2rem;
  border: 1px solid rgba(10, 10, 10, 0.1);
  background: rgba(10, 10, 10, 0.015);
}

.policy-contact-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-on-light);
  margin-bottom: 1rem;
}

.policy-revision {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
  text-align: right;
}

.policy-revision p {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--gray-on-light);
  line-height: 1.8;
}


/* ===========================================
   44. RECRUIT PAGE コンポーネント
   採用情報ページ専用のカード・表・フロー。
   =========================================== */
.recruit-message {
  max-width: 780px;
}

.recruit-message p {
  font-size: 1.02rem;
  line-height: 2;
  color: #444;
}

.recruit-message p + p {
  margin-top: 1rem;
}

.recruit-message strong {
  font-weight: 700;
}

.recruit-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 2.5rem;
  border: 1px solid rgba(245, 245, 240, 0.08);
}

.recruit-stat-card {
  padding: 2rem 1.6rem;
  border-right: 1px solid rgba(245, 245, 240, 0.08);
}

.recruit-stat-card:last-child {
  border-right: none;
}

.recruit-stat-label,
.recruit-business-label,
.recruit-flow-label,
.recruit-apply-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-on-dark);
  margin-bottom: 0.8rem;
}

.recruit-stat-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 0.95;
  letter-spacing: 0.05em;
  color: var(--white);
}

.recruit-stat-card p {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  line-height: 1.8;
  color: rgba(245, 245, 240, 0.72);
}

.recruit-business-box {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(245, 245, 240, 0.08);
}

.recruit-business-box p {
  font-size: 0.96rem;
  line-height: 2;
  color: rgba(245, 245, 240, 0.78);
}

.recruit-data-table {
  width: 100%;
  margin-top: 2.2rem;
}

.recruit-data-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.5rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}

.recruit-data-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-on-light);
  white-space: nowrap;
  padding-top: 0.2rem;
}

.recruit-data-value {
  font-size: 1rem;
  line-height: 1.9;
  color: #333;
}

.recruit-data-value small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--gray-on-light);
}

.recruit-intro-dark {
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(245, 245, 240, 0.78);
}

.persona-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.persona-tag {
  padding: 0.7rem 1.2rem;
  border: 1px solid rgba(245, 245, 240, 0.14);
  background: rgba(245, 245, 240, 0.03);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(245, 245, 240, 0.85);
}

.recruit-flow-wrap {
  margin-top: 3rem;
}

.recruit-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 1rem;
  border: 1px solid rgba(245, 245, 240, 0.08);
}

.recruit-flow-step {
  padding: 2rem 1rem;
  text-align: center;
  border-right: 1px solid rgba(245, 245, 240, 0.08);
}

.recruit-flow-step:last-child {
  border-right: none;
}

.recruit-flow-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.06em;
  line-height: 1;
  color: rgba(245, 245, 240, 0.28);
}

.recruit-flow-title {
  margin-top: 0.7rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--white);
}

.recruit-flow-sub {
  margin-top: 0.35rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-on-dark);
}

.recruit-works {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.2rem;
}

.recruit-work-card {
  border: 1px solid rgba(10, 10, 10, 0.08);
  padding: 1.8rem 1.5rem;
  transition: border-color 0.3s, transform 0.3s;
}

.recruit-work-card:hover {
  border-color: rgba(10, 10, 10, 0.22);
  transform: translateY(-2px);
}

.recruit-work-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-on-light);
  margin-bottom: 0.75rem;
}

.recruit-work-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.recruit-work-card p {
  font-size: 0.88rem;
  line-height: 1.8;
  color: #555;
}

.recruit-work-card a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--black);
  transition: gap 0.3s;
}

.recruit-work-card a:hover {
  gap: 0.7rem;
}

.recruit-apply-panel {
  max-width: 760px;
  margin-top: 2rem;
  padding: 2.4rem 2.2rem;
  border: 1px solid rgba(245, 245, 240, 0.1);
}

.recruit-apply-panel p {
  font-size: 0.95rem;
  line-height: 2;
  color: rgba(245, 245, 240, 0.8);
}

.recruit-apply-deadline {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(245, 245, 240, 0.16);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--white);
}

.recruit-apply-contact {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 245, 240, 0.08);
}

.recruit-apply-panel a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}


/* ===========================================
   45. TOPICS ARCHIVE コンポーネント
   トピックス一覧ページ用の投稿カード。
   =========================================== */
.topics-archive-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.2rem;
}

.topics-archive-card {
  border: 1px solid rgba(10, 10, 10, 0.08);
  background: rgba(255, 255, 255, 0.72);
  transition: border-color 0.3s, transform 0.3s, background 0.3s;
}

.topics-archive-card:hover {
  border-color: rgba(10, 10, 10, 0.2);
  background: rgba(255, 255, 255, 0.94);
  transform: translateY(-2px);
}

.topics-archive-link {
  display: block;
  padding: 1.7rem 1.8rem;
  text-decoration: none;
  color: inherit;
}

.topics-archive-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.topics-archive-date,
.topics-archive-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.topics-archive-date {
  color: var(--gray-on-light);
}

.topics-archive-cat {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(10, 10, 10, 0.08);
  color: #444;
  text-transform: uppercase;
}

.topics-archive-title {
  margin-top: 0.95rem;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--black);
}

.topics-archive-excerpt {
  margin-top: 0.8rem;
  font-size: 0.92rem;
  line-height: 1.9;
  color: #555;
}

.topics-archive-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
  transition: gap 0.3s;
}

.topics-archive-card:hover .topics-archive-more {
  gap: 0.8rem;
}

.topics-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}

.topics-pagination-item a,
.topics-pagination-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.9rem;
  border: 1px solid rgba(10, 10, 10, 0.08);
  text-decoration: none;
  color: var(--black);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  transition: border-color 0.3s, background 0.3s;
}

.topics-pagination-item a:hover {
  border-color: rgba(10, 10, 10, 0.22);
  background: rgba(10, 10, 10, 0.03);
}

.topics-pagination-item .current {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.topics-empty {
  margin-top: 2rem;
  padding: 2rem 1.8rem;
  border: 1px solid rgba(10, 10, 10, 0.08);
}

.topics-empty p {
  font-size: 0.96rem;
  line-height: 1.9;
  color: #555;
}