/* ========================================
   ヒーローセクション動画 - 右半分エリア中心配置システム
   ======================================== */

/* CSS変数で右半分エリア制御 */
:root {
  --text-area-width: 60%;                           /* テキストエリア幅 */
  --right-area-width: 40%;                          /* 右半分エリア幅 */
  --right-area-start: var(--text-area-width);       /* 右エリア開始位置 */
  --video-center: calc(var(--text-area-width) + (var(--right-area-width) / 2)); /* 右エリア中心 */
}

/* ヒーローセクション - 動画の親要素として相対配置 */
section#topSection {
  position: relative !important;
}

/* 動画セクション - サービスグリッド基準配置 */
.hero-video-section {
  /* ヒーローセクション内の絶対配置 - スクロール追従なし */
  position: absolute;
  top: calc(50% - 1cm); /* 1cm上に移動 */
  right: 0;
  transform: translateY(-50%);
  
  /* 1cm右寄り配置 */
  margin-right: max(calc((100vw - 1300px) / 2 + 140px - 1cm), calc(140px - 1cm));
  
  /* 2.25倍サイズ（1.5倍の1.5倍） */
  width: clamp(405px, 27vw, 495px);
  height: clamp(405px, 27vw, 495px);
  
  z-index: 10;
  pointer-events: auto;
  
  /* 初期状態: 表示（動画再生確保） */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ヒーローセクション内では常時表示 */
section#topSection .hero-video-section {
  opacity: 1;
  visibility: visible;
}

/* 動画コンテナ - 完全静的表示 */
.hero-video-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px; /* 控えめな角丸 */
  overflow: hidden;
  /* 影と背景効果を削除してシームレスに */
  
  /* マウス操作を一切受け付けない */
  pointer-events: none;
  cursor: default;
}

/* 動画要素 - コントロール完全非表示 */
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px; /* 控えめな角丸 */
  
  /* 動画コントロール完全非表示 */
  outline: none;
  border: none;
  
  /* ブラウザ固有のコントロール非表示 */
  -webkit-media-controls: none;
  -webkit-media-controls-panel: none;
  -webkit-media-controls-play-button: none;
  -webkit-media-controls-start-playback-button: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  
  /* コンテキストメニュー無効化 */
  pointer-events: none;
}

/* 動画要素の疑似要素も非表示 */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-panel,
.hero-video::-webkit-media-controls-play-button,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-timeline,
.hero-video::-webkit-media-controls-current-time-display,
.hero-video::-webkit-media-controls-time-remaining-display,
.hero-video::-webkit-media-controls-mute-button,
.hero-video::-webkit-media-controls-toggle-closed-captions-button,
.hero-video::-webkit-media-controls-volume-slider {
  display: none !important;
  -webkit-appearance: none;
}

/* ホバー効果 - 完全削除（静的表示） */
.hero-video-container:hover {
  /* ホバー効果なし - 常に静的表示 */
  transform: none;
}

/* 動画要素のホバー効果も無効化 */
.hero-video:hover {
  transform: none;
}

/* アニメーション・トランジション無効化 */
.hero-video-container,
.hero-video {
  transition: none !important;
  animation: none !important;
}

/* ローディング表示を削除してシンプルに */

/* ========================================
   レスポンシブ対応 - 右半分エリア中心配置維持
   ======================================== */

/* タブレット - 1.575倍サイズ＋左寄り */
@media screen and (max-width: 1024px) {
  .hero-video-section {
    top: calc(50% - 1cm); /* 1cm上に移動 */
    margin-right: max(calc((100vw - 800px) / 2 + 100px - 1cm), calc(100px - 1cm)); /* 1cm右寄り配置 */
    width: clamp(220px, 15.75vw, 284px);               /* 1.575倍サイズ（2.25×0.7） */
    height: clamp(220px, 15.75vw, 284px);
  }
}

/* スマホ横 - 1.575倍サイズ＋左寄り */
@media screen and (max-width: 768px) {
  .hero-video-section {
    top: calc(50% - 1cm); /* 1cm上に移動 */
    margin-right: max(calc((100vw - 450px) / 2 + 70px - 1cm), calc(70px - 1cm)); /* 1cm右寄り配置 */
    width: clamp(189px, 12.6vw, 252px);               /* 1.575倍サイズ（2.25×0.7） */
    height: clamp(189px, 12.6vw, 252px);
  }
}

/* スマートフォン - 下部中央配置に切り替え */
@media screen and (max-width: 560px) {
  .hero-video-section {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: clamp(284px, 63vw, 392px);               /* 1.575倍サイズ（2.25×0.7） */
    height: clamp(284px, 63vw, 392px);              /* 1.575倍サイズ（2.25×0.7） */
    margin: 25px auto 0;
    display: block;
    opacity: 1;                                     /* スマホでは常時表示 */
    visibility: visible;
  }
}