/* ================================================
   ROOT LLC - Enhanced Page Styles with Glassmorphism
   世界最高峰の背景エフェクト実装版
   ================================================ */

/* ===== Hero Section - 背景動画付き ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-4);
  overflow: hidden;
  
  /* フォールバック背景（動画が読み込まれない場合） */
  background: linear-gradient(135deg, 
    #e0e7ff 0%,
    #f0f4ff 20%,
    #ffffff 40%,
    #fef3f3 60%,
    #fdf4ff 80%,
    #f0f4ff 100%
  );
}

/* 背景動画 */
.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 0;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

/* 動画が読み込まれたら表示 */
.hero__video.loaded {
  opacity: 1;
}

/* ローディング表示削除済み */

/* 動画の上にオーバーレイ（コンテンツの可読性向上） */
.hero__video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.2) 0%,
    rgba(10, 10, 10, 0.4) 50%,
    rgba(10, 10, 10, 0.6) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* 放射状のグロー効果（動画の上に重ねる） - 控えめに */
.hero::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0.04) 50%, transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
  animation: heroGlow1 15s ease-in-out infinite alternate;
  z-index: 2;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 20%;
  right: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, rgba(139, 92, 246, 0.04) 50%, transparent 70%);
  border-radius: 50%;
  filter: blur(70px);
  animation: heroGlow2 12s ease-in-out infinite alternate-reverse;
  z-index: 2;
  pointer-events: none;
}

@keyframes heroGlow1 {
  0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  100% { transform: translate(30px, -30px) scale(1.2); opacity: 1; }
}

@keyframes heroGlow2 {
  0% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  100% { transform: translate(-40px, 20px) scale(1.15); opacity: 0.9; }
}

.hero__grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(to right, rgba(37, 99, 235, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 99, 235, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.3;
  animation: gridMove 20s linear infinite;
  z-index: 3;
  pointer-events: none;
}

@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(80px, 80px); }
}

.hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  /* 動画の下に配置（透明背景） */
  background: transparent;
  padding: var(--space-8);
}

.hero__title {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.15;
  color: var(--root-black);
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 20px rgba(255, 255, 255, 0.9);
}

.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: var(--leading-relaxed);
  color: var(--root-gray-600);
  margin-bottom: var(--space-8);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.8);
}

.hero__cta {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ===== Philosophy Section - 神秘的な背景 ===== */
.philosophy {
  position: relative;
  padding: var(--space-20) var(--space-4);
  text-align: center;
  overflow: hidden;
  
  /* グラデーション背景 - より明確に */
  background: linear-gradient(180deg, 
    #ffffff 0%, 
    #f5f5f5 50%,
    #ffffff 100%
  );
}

/* 中央から放射する光 */
.philosophy::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, 
    rgba(37, 99, 235, 0.5) 0%, 
    rgba(37, 99, 235, 0.3) 30%,
    rgba(139, 92, 246, 0.2) 50%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(60px);
  animation: philosophyPulse 8s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

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

.philosophy__container {
  position: relative;
  z-index: 10;
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  /* グラスモーフィズム */
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08);
}

.philosophy__heading {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--root-black);
  margin-bottom: var(--space-6);
}

.philosophy__text {
  font-size: var(--text-xl);
  line-height: var(--leading-loose);
  color: var(--root-gray-600);
  margin-bottom: var(--space-4);
}

.philosophy__emphasis {
  font-size: var(--text-2xl);
  line-height: var(--leading-relaxed);
  color: var(--root-black);
  font-weight: var(--font-medium);
  margin-top: var(--space-6);
}

/* ===== Competencies Section - 3D的な背景 ===== */
.competencies {
  position: relative;
  padding: var(--space-20) var(--space-4);
  overflow: hidden;
  
  /* 複雑なグラデーション - より明確に */
  background: 
    radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0.05) 30%, transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.12) 0%, rgba(139, 92, 246, 0.04) 30%, transparent 60%),
    linear-gradient(180deg, 
      rgba(245, 250, 255, 1) 0%, 
      rgba(255, 255, 255, 1) 50%, 
      rgba(252, 245, 255, 1) 100%
    );
}

/* 動的な背景パターン - より明確に */
.competencies::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle, rgba(37, 99, 235, 0.1) 2px, transparent 2px);
  background-size: 40px 40px;
  opacity: 0.6;
  animation: competenciesPattern 30s linear infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes competenciesPattern {
  0% { transform: translate(0, 0); }
  100% { transform: translate(40px, 40px); }
}

.competencies__container {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-content);
  margin: 0 auto;
}

.competencies__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.competencies__title {
  font-size: var(--text-4xl);
  font-weight: var(--font-semibold);
  color: var(--root-black);
  margin-bottom: var(--space-3);
}

.competencies__subtitle {
  font-size: var(--text-xl);
  color: var(--root-gray-600);
  line-height: var(--leading-relaxed);
}

.competencies__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* ===== Stats Section - 宇宙的な背景 ===== */
.stats-section {
  position: relative;
  padding: var(--space-16) var(--space-4);
  overflow: hidden;
  
  /* 深い黒のグラデーション - より明確に */
  background: 
    radial-gradient(circle at 30% 50%, rgba(37, 99, 235, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 70% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 40%),
    linear-gradient(135deg, 
      #0a0a0a 0%, 
      #1a1a1a 50%, 
      #0a0a0a 100%
    );
}

/* 星のような粒子 */
.stats-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 80px 80px, 120px 120px;
  background-position: 0 0, 40px 60px;
  animation: statsStars 60s linear infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes statsStars {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-80px, -80px); }
}

/* 光の流れ - より明確に */
.stats-section::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 1000px;
  background: radial-gradient(ellipse, 
    rgba(37, 99, 235, 0.6) 0%, 
    rgba(37, 99, 235, 0.3) 30%,
    rgba(139, 92, 246, 0.2) 50%,
    transparent 70%
  );
  filter: blur(80px);
  animation: statsGlow 10s ease-in-out infinite alternate;
  z-index: 2;
  pointer-events: none;
}

@keyframes statsGlow {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.2) rotate(180deg); opacity: 1; }
}

.stats {
  position: relative;
  z-index: 10;
  max-width: var(--max-width-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  text-align: center;
}

.stats__item {
  /* ダークグラスモーフィズム */
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: var(--transition-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stats__item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(37, 99, 235, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px 0 rgba(37, 99, 235, 0.2);
}

.stats__number {
  color: var(--root-white);
  font-size: var(--text-5xl);
  font-weight: var(--font-semibold);
  line-height: 1;
}

.stats__label {
  color: var(--root-gray-400);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* ===== Approach Section - レイヤード背景 ===== */
.approach {
  position: relative;
  padding: var(--space-20) var(--space-4);
  overflow: hidden;
  
  /* 複層グラデーション */
  background: 
    radial-gradient(circle at 15% 20%, rgba(37, 99, 235, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 40%),
    linear-gradient(180deg, 
      rgba(255, 255, 255, 1) 0%, 
      rgba(245, 245, 245, 1) 50%,
      rgba(255, 255, 255, 1) 100%
    );
}

/* 浮遊する光の球体 - より明確に */
.approach::before {
  content: '';
  position: absolute;
  top: 20%;
  right: 10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, 
    rgba(37, 99, 235, 0.35) 0%, 
    rgba(37, 99, 235, 0.15) 50%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(60px);
  animation: approachFloat1 20s ease-in-out infinite;
}

.approach::after {
  content: '';
  position: absolute;
  bottom: 30%;
  left: 15%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, 
    rgba(139, 92, 246, 0.3) 0%, 
    rgba(139, 92, 246, 0.1) 50%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(50px);
  animation: approachFloat2 18s ease-in-out infinite reverse;
}

@keyframes approachFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 40px) scale(1.15); }
}

@keyframes approachFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.1); }
}

.approach__container {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-content);
  margin: 0 auto;
}

.approach__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.approach__title {
  font-size: var(--text-4xl);
  font-weight: var(--font-semibold);
  color: var(--root-black);
  margin-bottom: var(--space-3);
}

.approach__subtitle {
  font-size: var(--text-xl);
  color: var(--root-gray-600);
  line-height: var(--leading-relaxed);
}

.approach__steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

.approach__step {
  position: relative;
  padding: var(--space-6);
  /* グラスモーフィズム */
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.08);
  transition: var(--transition-base);
}

.approach__step:hover {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-color: rgba(37, 99, 235, 0.2);
  box-shadow: 0 12px 32px 0 rgba(37, 99, 235, 0.12);
  transform: translateY(-4px);
}

.approach__step-number {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--root-gray-400);
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-3);
  display: block;
}

.approach__step-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--root-black);
  margin-bottom: var(--space-3);
}

.approach__step-description {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--root-gray-600);
}

/* ===== CTA Section - 光輝く背景 ===== */
.cta-section {
  position: relative;
  padding: var(--space-20) var(--space-4);
  text-align: center;
  overflow: hidden;
  
  /* 深い黒背景 */
  background: 
    radial-gradient(ellipse at 30% 40%, rgba(37, 99, 235, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, 
      rgba(10, 10, 10, 1) 0%, 
      rgba(20, 20, 20, 1) 25%,
      rgba(26, 26, 26, 1) 50%,
      rgba(20, 20, 20, 1) 75%,
      rgba(10, 10, 10, 1) 100%
    );
}

/* 脈動する中央の光 - より強力に */
.cta-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, 
    rgba(37, 99, 235, 0.7) 0%, 
    rgba(37, 99, 235, 0.4) 30%,
    rgba(139, 92, 246, 0.3) 50%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(100px);
  animation: ctaGlow 8s ease-in-out infinite alternate;
}

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

/* 回転する光のリング - より明確に */
.cta-section::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(139, 92, 246, 0.5) 40%,
    rgba(37, 99, 235, 0.4) 50%,
    rgba(139, 92, 246, 0.5) 60%,
    transparent 100%
  );
  border-radius: 50%;
  filter: blur(60px);
  animation: ctaRotate 20s linear infinite;
  z-index: 3;
  pointer-events: none;
}

@keyframes ctaRotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.cta-section__container {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-narrow);
  margin: 0 auto;
}

.cta-section__title {
  font-size: var(--text-4xl);
  font-weight: var(--font-semibold);
  color: var(--root-white);
  margin-bottom: var(--space-6);
}

.cta-section__description {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--root-gray-400);
  margin-bottom: var(--space-8);
}

.cta-section__note {
  font-size: var(--text-sm);
  color: var(--root-gray-500);
  margin-top: var(--space-4);
}

/* ===== Service Detail Page ===== */
.service-detail {
  position: relative;
  padding: 150px var(--space-4) var(--space-20) !important;
  overflow: hidden;
  
  background: 
    radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0.05) 30%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.12) 0%, rgba(139, 92, 246, 0.04) 30%, transparent 50%),
    linear-gradient(180deg, 
      rgba(240, 245, 255, 1) 0%, 
      rgba(255, 255, 255, 1) 40%, 
      rgba(250, 245, 255, 1) 70%,
      rgba(255, 255, 255, 1) 100%
    );
}

.service-detail__container {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-content);
  margin: 0 auto;
}

.service-detail__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.service-detail__title {
  font-size: var(--text-5xl);
  font-weight: var(--font-semibold);
  color: var(--root-black);
  margin-bottom: var(--space-4);
}

.service-detail__intro {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--root-gray-600);
  max-width: var(--max-width-narrow);
  margin: 0 auto var(--space-12);
  text-align: center;
}

.service-detail__section {
  margin-bottom: var(--space-16);
  scroll-margin-top: 150px; /* Fixed header height + extra space */
  /* グラスモーフィズム */
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08);
  transition: var(--transition-base);
}

.service-detail__section:hover {
  box-shadow: 0 12px 48px 0 rgba(37, 99, 235, 0.12);
  transform: translateY(-2px);
}

.service-detail__section-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--root-black);
  margin-bottom: var(--space-6);
}

.service-detail__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.service-detail__text {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--root-gray-600);
}

.service-detail__list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
}

.service-detail__list-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--root-gray-200);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--root-gray-600);
}

.service-detail__list-item:last-child {
  border-bottom: none;
}

.service-detail__list-item::before {
  content: '・';
  color: var(--root-accent);
  font-weight: var(--font-semibold);
  margin-right: var(--space-2);
}

/* ===== About/Company Page ===== */
.about-page {
  position: relative;
  padding: 150px var(--space-4) var(--space-20) !important;
  overflow: hidden;
  
  background: 
    radial-gradient(circle at 10% 30%, rgba(37, 99, 235, 0.18) 0%, rgba(37, 99, 235, 0.08) 30%, transparent 60%),
    radial-gradient(circle at 90% 70%, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.05) 30%, transparent 60%),
    linear-gradient(180deg, 
      rgba(245, 248, 255, 1) 0%, 
      rgba(255, 255, 255, 1) 50%,
      rgba(252, 245, 255, 1) 100%
    );
}

.about-page__container {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-content);
  margin: 0 auto;
}

.about-page__header {
  margin-bottom: var(--space-12);
}

.about-page__title {
  font-size: var(--text-5xl);
  font-weight: var(--font-semibold);
  color: var(--root-black);
  margin-bottom: var(--space-4);
}

.about-page__content {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-12);
}

.about-page__sidebar {
  position: sticky;
  top: 120px;
}

.about-page__sidebar-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--root-gray-400);
  margin-bottom: var(--space-2);
}

.about-page__sidebar-subtitle {
  font-size: var(--text-base);
  color: var(--root-gray-600);
  line-height: var(--leading-relaxed);
}

.about-page__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.about-page__section {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  /* グラスモーフィズム */
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left: 3px solid rgba(37, 99, 235, 0.2);
  border-radius: var(--radius-md);
  transition: var(--transition-base);
}

.about-page__section:hover {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-left-color: rgba(37, 99, 235, 0.5);
  transform: translateX(4px);
  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.08);
}

.about-page__section:last-child {
  border-bottom: none;
}

.about-page__section-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--root-gray-400);
  margin-bottom: var(--space-3);
}

.about-page__section-content {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--root-gray-600);
}

/* ===== Message Page ===== */
.message-page {
  position: relative;
  padding: 150px var(--space-4) var(--space-20) !important;
  overflow: hidden;
  
  background: 
    radial-gradient(circle at 70% 30%, rgba(37, 99, 235, 0.2) 0%, rgba(37, 99, 235, 0.08) 30%, transparent 60%),
    radial-gradient(circle at 30% 70%, rgba(139, 92, 246, 0.18) 0%, rgba(139, 92, 246, 0.06) 30%, transparent 60%),
    linear-gradient(135deg, 
      rgba(240, 245, 255, 1) 0%, 
      rgba(255, 255, 255, 1) 40%, 
      rgba(250, 240, 255, 1) 70%,
      rgba(255, 255, 255, 1) 100%
    );
}

.message-page__container {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-narrow);
  margin: 0 auto;
}

.message-page__header {
  margin-bottom: var(--space-12);
}

.message-page__title {
  font-size: var(--text-4xl);
  font-weight: var(--font-semibold);
  color: var(--root-black);
  margin-bottom: var(--space-2);
}

.message-page__subtitle {
  font-size: var(--text-lg);
  color: var(--root-gray-600);
}

.message-page__content {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--root-gray-600);
  /* グラスモーフィズム */
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

.message-page__content p {
  margin-bottom: var(--space-6);
}

.message-page__author {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--root-gray-200);
  text-align: right;
}

.message-page__author-name {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--root-black);
  margin-bottom: var(--space-1);
}

.message-page__author-title {
  font-size: var(--text-base);
  color: var(--root-gray-600);
}

/* ===== Contact Page ===== */
.contact-page {
  position: relative;
  padding: 150px var(--space-4) var(--space-20) !important;
  overflow: hidden;
  
  background: 
    radial-gradient(circle at 50% 20%, rgba(37, 99, 235, 0.25) 0%, rgba(37, 99, 235, 0.1) 30%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.08) 30%, transparent 50%),
    linear-gradient(180deg, 
      rgba(235, 242, 255, 1) 0%, 
      rgba(255, 255, 255, 1) 40%,
      rgba(245, 240, 255, 1) 70%,
      rgba(255, 255, 255, 1) 100%
    );
}

.contact-page__container {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-narrow);
  margin: 0 auto;
}

.contact-page__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.contact-page__title {
  font-size: var(--text-4xl);
  font-weight: var(--font-semibold);
  color: var(--root-black);
  margin-bottom: var(--space-3);
}

.contact-page__description {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--root-gray-600);
}

.contact-form {
  /* グラスモーフィズム */
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 48px 0 rgba(31, 38, 135, 0.12);
  transition: var(--transition-base);
}

.contact-form:hover {
  box-shadow: 0 20px 64px 0 rgba(37, 99, 235, 0.15);
}

.contact-form__success {
  background-color: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  text-align: center;
}

/* ===== Responsive Design ===== */
@media (max-width: 1024px) {
  .competencies__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  .approach__steps {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  
  .service-detail__content {
    grid-template-columns: 1fr;
  }
  
  .about-page__content {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  .about-page__sidebar {
    position: static;
  }
  
  /* タブレット用のpadding調整 */
  .service-detail,
  .about-page,
  .message-page,
  .contact-page {
    padding: 150px var(--space-4) var(--space-16) !important;
  }
  
  /* タブレットでも透過枠を削除 */
  .hero__content {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 80vh;
    padding: var(--space-12) var(--space-3);
  }
  
  /* モバイルでは動画のオーバーレイを濃くして可読性を向上 */
  .hero__video-overlay {
    background: rgba(10, 10, 10, 0.4);
  }
  
  .hero::before,
  .hero::after {
    width: 300px;
    height: 300px;
  }
  
  .hero__title {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  
  .hero__content {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  
  .philosophy,
  .competencies,
  .approach,
  .cta-section,
  .stats-section {
    padding: var(--space-12) var(--space-3);
  }
  
  .service-detail,
  .about-page,
  .message-page,
  .contact-page {
    padding: 150px var(--space-3) var(--space-12) !important;
  }
  
  .contact-form {
    padding: var(--space-6);
  }
}

/* スマートフォン - さらに小さい画面用の追加設定 */
@media (max-width: 480px) {
  .service-detail,
  .about-page,
  .message-page,
  .contact-page {
    padding-top: 150px !important;
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
    padding-bottom: var(--space-12) !important;
  }
}

/* アクセシビリティ: アニメーション削減 */
@media (prefers-reduced-motion: reduce) {
  /* 動画を一時停止（ユーザーが再生可能） */
  .hero__video {
    animation-play-state: paused;
  }
  
  .hero::before,
  .hero::after,
  .philosophy::before,
  .approach::before,
  .approach::after,
  .cta-section::before,
  .cta-section::after {
    animation: none !important;
  }
  
  .hero__grid,
  .competencies::after,
  .stats-section::before {
    animation: none !important;
  }
}