@charset "UTF-8";

/* -------------------------------------------------------------------------
   トップ メインビジュアル切り替え
------------------------------------------------------------------------- */
.slideBox {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background-color: #fff; /* 背景が白の場合 */
}

@media screen and (max-width: 767px) {
  .slideBox {
    top: -70px;
  }
}

/* 画像共通設定 */
.item1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1; /* 最初はすべて表示状態 */
  animation-fill-mode: forwards; /* アニメーション終了時の透明度を維持 */
}

/* 1枚目：最前面。1.33秒後にフェードアウト開始 */
.item1:nth-of-type(1) {
  z-index: 3;
  animation-name: fadeOutSimple;
  animation-duration: 0.8s; /* フェードにかける時間 */
  animation-delay: 1.33s;    /* 次へ切り替わるタイミング */
}

/* 2枚目：2番目。2.66秒後にフェードアウト開始 */
.item1:nth-of-type(2) {
  z-index: 2;
  animation-name: fadeOutSimple;
  animation-duration: 0.8s;
  animation-delay: 2.66s;
}

/* 3枚目：最背面。アニメーションさせずに最後に残す */
.item1:nth-of-type(3) {
  z-index: 1;
}

/* フェードアウトのアニメーション設定 */
@keyframes fadeOutSimple {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Safari / 旧ブラウザ用 */
@-webkit-keyframes fadeOutSimple {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 追加：アニメーション終了後の状態を固定するクラス */
.slideBox.is-finished .item1 {
    animation: none !important; /* アニメーションを無効化 */
    opacity: 0;
}

/* 最後の画像（4枚目）とタイトルだけを表示させる */
.slideBox.is-finished .item1:nth-of-type(3),
.slideBox.is-finished .main_ttl {
    opacity: 1 !important;
    animation: none !important;
    visibility: visible;
}


.news-pickup {
  opacity: 0;
  transform: translateY(10px);

  animation: fadeUp 0.8s ease forwards;
  animation-delay: 1s;
}

/* ふわっと表示 */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}