/* --- 1. カルーセル全体のレイアウト --- */
.youtube-carousel-section {
  /* PC表示での最大幅を設定し、中央に配置します */
  max-width: 1100px;
  margin: 60px auto; /* 上下の余白を広めにとります */
  padding: 0;
  box-sizing: border-box;
}

/* --- 2. スライドの高さ問題を修正 --- */
/* Splide.jsが設定する固定の高さを打ち消し、中身に応じて高さを自動調整させます */
.splide__slide {
  height: auto !important;
}

/* --- 3. 動画自体のスタイル --- */
/* 16:9のアスペクト比を維持するコンテナ */
.video-container {
  position: relative;
  height: 0;
  padding-bottom: 56.25%; /* 16:9の比率 */
  overflow: hidden;
  border-radius: 12px; /* 角を少し丸くして、モダンな印象に */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* 立体感を出すための影 */
  background-color: #f0f0f0; /* 読み込み中に表示される背景色 */
}

/* iframeをコンテナに完全にフィットさせます */
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- 4. ナビゲーション（矢印）のスタイル --- */
.splide__arrow {
  width: 44px;
  height: 44px;
  background: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  opacity: 0.8;
  transform: translateY(-20px); /* 少し上に浮かせる */
  transition: opacity 0.2s, transform 0.2s;
}

.splide__arrow:hover {
  opacity: 1;
  transform: translateY(-22px);
}

.splide__arrow svg {
  fill: #333; /* アイコンの色を濃いグレーに */
  width: 1.5em;
  height: 1.5em;
}

.splide__arrow--prev {
  left: -22px; /* 外側に配置 */
}

.splide__arrow--next {
  right: -22px; /* 外側に配置 */
}

/* --- 5. ページネーション（ドット）のスタイル --- */
.splide__pagination {
  /* ドットをカルーセルの下、少し離れた位置に配置します */
  bottom: -40px;
}

.splide__pagination__page {
  width: 12px;
  height: 12px;
  border: 2px solid #ddd;
  background: transparent;
  margin: 0 6px;
  opacity: 1;
  transition: all 0.3s;
}

.splide__pagination__page.is-active {
  background: #555; /* テーマのキーカラーなどに変更すると、より統一感が出ます */
  border-color: #555;
  transform: scale(1.2);
}


/* --- 6. スマートフォン用の表示調整 --- */
@media (max-width: 767px) {
  .youtube-carousel-section {
    margin-top: 40px;
    margin-bottom: 70px; /* ナビゲーションの分、下部余白を確保 */
  }



  .splide__arrow {
    transform: translateY(-10px); /* スマホでは浮かせる高さを調整 */
  }

  .splide__arrow--prev {
    left: 4px; /* 画面内に収める */
  }

  .splide__arrow--next {
    right: 4px; /* 画面内に収める */
  }
}