/* ============================================================
   Top: Hero (メインビジュアル)
============================================================ */
.top-hero {
  /* 背景色は動画が読み込まれるまでのプレースホルダーとして残します */
  background: linear-gradient(135deg, var(--c-navy) 0%, #111D4A 100%);
  color: var(--c-white);
  text-align: center;
  /* ▼ 変更・追加：ヘッダーの高さ分だけ上に引っ張り上げる ▼ */
  margin-top: -92px;
  /* ヘッダー(72px) + 下余白(20px) を相殺 */
  padding: 212px 0 160px;
  /* 元の120px + 引っ張り上げた92px = 212px */

  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* 動画をコンテナいっぱいに敷き詰める */
.top-hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 画像の時と同じく、比率を保って隙間なくトリミング */
  z-index: 0;
}

/* 文字の視認性を高めるための黒い半透明オーバーレイ */
.top-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%);
  z-index: 1;
}

/* テキストやボタンを動画・オーバーレイの上に配置する */
.top-hero .container {
  position: relative;
  z-index: 2;
}

.top-hero::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(59, 175, 158, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.top-hero__catch {
  font-size: 3rem;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  margin-bottom: var(--sp-6);
  letter-spacing: 0.05em;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6);
}

.top-hero__desc {
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.8;
  margin-bottom: var(--sp-10);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.top-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--c-orange);
  color: var(--c-white);
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  padding: 20px 48px;
  border-radius: var(--r-pill);
  transition: all var(--transition);
  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.3);
}

.top-hero__btn:hover {
  background: var(--c-orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245, 166, 35, 0.4);
}

/* ============================================================
   Top: 共通セクション設定
============================================================ */
.top-section {
  margin-bottom: var(--sp-20);
}

.top-section-center {
  text-align: center;
  margin-bottom: var(--sp-12);
}

.top-section-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
  margin-bottom: var(--sp-4);
}

.top-section-desc {
  font-size: var(--fs-base);
  color: var(--c-gray-700);
  line-height: 1.8;
  max-width: 1000px;
  margin: 0 auto;
}

.top-btn-wrapper {
  text-align: center;
  margin-top: var(--sp-8);
}

.top-btn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-bold);
  color: var(--c-teal);
  border: 2px solid var(--c-teal);
  padding: 12px 32px;
  border-radius: var(--r-pill);
  transition: all var(--transition);
}

.top-btn-more:hover {
  background: var(--c-teal);
  color: var(--c-white);
}

/* ============================================================
   Top: Lineup (概略とラインアップ)
============================================================ */
.top-lineup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.top-lineup-card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.top-lineup-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-teal-mid);
}

.top-lineup-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--c-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-lineup-card__body {
  padding: var(--sp-5);
  text-align: center;
}

.top-lineup-card__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--fw-bold);
  background: var(--c-teal-light);
  color: var(--c-teal);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 8px;
}

.top-lineup-card__name {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
  margin-bottom: 8px;
}

.top-lineup-card__desc {
  font-size: var(--fs-sm);
  color: var(--c-gray-600);
}

/* ============================================================
   Top: Selection (選び方の観点)
============================================================ */
.top-select-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.top-select-card {
  background: var(--c-gray-50);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  text-align: center;
  border: 1px solid var(--c-gray-200);
}

.top-select-card__icon {
  width: 48px;
  height: 48px;
  color: var(--c-teal);
  margin-bottom: var(--sp-3);
}

.top-select-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
  margin-bottom: var(--sp-3);
}

.top-select-card__desc {
  font-size: var(--fs-sm);
  color: var(--c-gray-700);
  line-height: 1.6;
  text-align: left;
}

/* ============================================================
   Top: Cases (事例カード)
============================================================ */
.top-case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.top-case-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
}

.top-case-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-teal-mid);
}

.top-case-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--c-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-case-card__body {
  padding: var(--sp-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.top-case-card__company {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-teal);
  margin-bottom: 8px;
}

.top-case-card__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
  line-height: 1.5;
  margin-bottom: var(--sp-3);
}

.top-case-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}

.top-case-card__tag {
  font-size: 10px;
  background: var(--c-gray-100);
  color: var(--c-gray-600);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ============================================================
   Top: FAQ (5つ抜粋)
============================================================ */
.top-faq-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

/* ============================================================
   Top: News Carousel (カード型ニュースカルーセル)
============================================================ */
.top-news-wrapper {
  position: relative;
  /* 矢印ボタンがはみ出しても大丈夫なように調整 */
  margin: 0 calc(var(--sp-6) * -1);
  padding: 0 var(--sp-6);
}

.top-news-carousel {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-4);
  scrollbar-width: none;
  /* Firefox用スクロールバー非表示 */
  scroll-behavior: smooth;
  /* JSでスクロールした時に滑らかに動かす */
  outline: none;
  /* クリック時のデフォルト枠線を消す */
}

.top-news-carousel::-webkit-scrollbar {
  display: none;
}

/* Chrome/Safari用スクロールバー非表示 */

/* キーボードでフォーカスした時だけ枠線を表示（アクセシビリティ対応） */
.top-news-carousel:focus-visible {
  box-shadow: 0 0 0 3px rgba(59, 175, 158, 0.5);
  border-radius: var(--r-lg);
}

.top-news-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  /* 略（既存の .top-news-card のスタイルそのまま） */
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), border-color var(--transition);
  text-decoration: none;
}

.top-news-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--c-teal-mid);
}

.top-news-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

.top-news-card__date {
  font-size: var(--fs-xs);
  color: var(--c-gray-500);
  font-family: Arial, sans-serif;
}

.top-news-card__badge {
  font-size: 10px;
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--c-white);
}

.top-news-card__badge--release {
  background: var(--c-teal);
}

.top-news-card__badge--event {
  background: var(--c-orange);
}

.top-news-card__badge--info {
  background: var(--c-gray-500);
}

.top-news-card__text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
  line-height: 1.5;
}

/* ============================================================
   カルーセルの左右ナビゲーションボタン
============================================================ */
.top-news-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-navy);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 10;
  transition: all var(--transition);
}

.top-news-btn:hover:not(:disabled) {
  background: var(--c-teal);
  color: var(--c-white);
  border-color: var(--c-teal);
}

.top-news-btn:disabled {
  opacity: 0;
  visibility: hidden;
  /* 端まで行ったらボタンを隠す */
  pointer-events: none;
}

.top-news-btn svg {
  width: 24px;
  height: 24px;
}

/* ボタンの配置位置 */
.top-news-btn--prev {
  left: -12px;
}

.top-news-btn--next {
  right: -12px;
}

/* ============================================================
   Top: News Header (見出しとカウンターの並び)
============================================================ */
.top-news-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--c-gray-200);
  /* 汎用見出しの下線をこちらに移動 */
}

/* 汎用見出し自体の余白と下線をリセット */
.top-news-header .page-section-heading {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.top-news-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-bottom: 4px;
  /* 見出しテキストと下端を揃える微調整 */
}

.top-news-counter {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-gray-500);
  font-family: Arial, sans-serif;
  letter-spacing: 0.1em;
}

.top-news-counter-current {
  color: var(--c-navy);
  font-size: var(--fs-lg);
  /* 今見ている番号を少し大きく強調 */
}

/* レスポンシブ（スマホでは縦並びにし、カウンターとリンクを左右に割る） */
@media (max-width: 768px) {
  .top-news-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  .top-news-controls {
    width: 100%;
    justify-content: space-between;
  }

  .top-news-btn {
    display: none;
  }

  .top-news-wrapper {
    margin: 0;
    padding: 0;
  }

  /* スマホではスクロールできることを視覚的に伝えるため、右端を少し見切れさせる */
  .top-news-carousel {
    padding-right: var(--sp-6);
  }

  .top-news-card {
    flex: 0 0 280px;
  }
}

/* レスポンシブ対応 */
@media (max-width: 900px) {

  .top-lineup-grid,
  .top-select-grid,
  .top-case-grid {
    grid-template-columns: 1fr;
  }

  .top-news-card {
    flex: 0 0 280px;
  }
}

@media (max-width: 768px) {

  .top-hero {
    /* ▼ 変更・追加：スマホ用の計算 ▼ */
    margin-top: -60px;
    /* スマホのヘッダー高さ(60px)を相殺 */
    padding: 140px 0 120px;
    /* 元の80px + 60px = 140px */
  }

  .top-hero__catch {
    font-size: 1.75rem;
  }

  .top-hero__desc {
    font-size: 1.05rem;
  }

  .top-section-title {
    font-size: 1.4rem;
  }
  .top-section-desc {
    text-align: left;
  }

}

/* ============================================================
   Top: Features (主な特長のジグザグレイアウト)
============================================================ */
.merged-feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10); /* 40px */
  margin-top: var(--sp-8); /* 32px */
}

.merged-feature-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6); /* 24px */
}

.merged-feature-row__img {
  width: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-gray-100);
}

.merged-feature-row__img img {
  width: 100%;
  display: block;
}

.merged-feature-row__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.merged-feature-row__title {
  font-size: var(--fs-xl); /* 1.25rem = 20px */
  font-weight: var(--fw-bold);
  color: var(--c-navy);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-tight);
}

.merged-feature-row__subtitle {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--c-teal); /* YUSHINのアクセントカラーに変更 */
  margin-bottom: var(--sp-3);
}

.merged-feature-row__desc {
  font-size: var(--fs-base);
  color: var(--c-gray-700);
  line-height: 1.6;
}

/* PC表示時のジグザグ設定 */
@media (min-width: 768px) {
  .merged-feature-row {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-10);
  }
  /* 画像を4、テキストを6の比率に設定 */
  .merged-feature-row__img {
    flex: 4 1 0%;
  }
  .merged-feature-row__text {
    flex: 6 1 0%;
  }
  /* 偶数番目の行を「テキスト＋画像」の並びにする（ジグザグ） */
  .merged-feature-row:nth-child(even) {
    flex-direction: row-reverse;
  }
}

/* ============================================================
   Top: Concept (コンセプト画像のコンテナ等)
============================================================ */
.top-concept-img {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: block;
  border-radius: var(--r-md);
}

/* ============================================================
   Top: Video Section (動画セクション固有のスタイル)
============================================================ */
/* 動画セクション全体のコンテナ */
.top-video-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

/* 動画セクションのリード文 */
.top-video-lead {
  text-align: center;
  margin-bottom: var(--sp-8);
  line-height: 1.8;
}

/* ============================================================
   Top: Video Container (16:9 レスポンシブ動画枠)
============================================================ */
.merged-video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9のアスペクト比 */
  height: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--sp-8);
  background: var(--c-gray-100);
}

.merged-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* （修正）動画見出し */
.merged-video-section-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
  margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--c-gray-200);
  padding-bottom: var(--sp-2);
}

/* （修正）YouTube案内枠 */
.merged-video-cta {
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  background: var(--c-gray-100);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-gray-700);
  flex-wrap: wrap;
}

.merged-video-cta__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  fill: #da251d; /* YouTubeカラー */
}

.merged-video-cta__text {
  margin: 0;
  line-height: 1.6;
  text-align: left;
}

.merged-video-cta__link {
  color: var(--c-navy);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  transition: opacity var(--transition);
}

.merged-video-cta__link:hover {
  opacity: 0.7;
  text-decoration: none;
}