/*
Theme Name: Astra Child
Theme URI: https://example.com/astra-child
Description: Astra子テーマ
Author: ami
Author URI: https://amidesign.ami-techmemo.com
Template: astra
Version: 1.0.0
*/

/* ここからカスタムCSSを追加 */
/* スライダー全体の設定 */
.slider {
  position: relative;
  width: 100%;
  height: 500px; /* 固定の高さ */
  overflow: hidden;
}

/* スライド内の画像の設定 */
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slideAnimation 9s infinite; /* 画像を15秒で切り替える */
}

/* 画像が親要素内に完全に収まるように表示 */
.slide img {
  width: 100%;    /* 親要素の幅に合わせて画像をリサイズ */
  height: 100%;   /* 親要素の高さに合わせて画像をリサイズ */
  object-fit: contain; /* 画像を親要素内に収める */
}

@keyframes slideAnimation {
  0% { opacity: 1; }
  25% { opacity: 1; }   /* ここで表示される時間を長くする */
  50% { opacity: 0; }
  75% { opacity: 0; }
  100% { opacity: 1; }
}

/* 各スライドに異なるタイミングを設定 */
.slide:nth-child(1) {
  animation-delay: 0s; /* 最初のスライドはすぐに表示 */
}

.slide:nth-child(2) {
  animation-delay: 5s; /* 2番目のスライドは3秒後に表示 */
}