@charset "UTF-8";


/* 768px以下 スマホ向け
--------------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

.bg_slider {
display: none!important;
}


}


/* 769px以上 PC向け
--------------------------------------------------------------------------------- */
@media print, screen and (min-width: 769px) {


/* スライダー全体のコンテナ */
.bg_slider {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #000;
}

/* 各背景画像の共通設定 */
.bg_item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  
  /* アニメーション設定 */
  animation: bg_fade_zoom 30s linear infinite;
  filter: grayscale(100%) brightness(120%) contrast(70%);
  will-change: transform, opacity;
}

/* ディレイ設定（5秒ずつずらす） */
.bg_item:nth-child(1) { animation-delay: 0s; }
.bg_item:nth-child(2) { animation-delay: -25s; }
.bg_item:nth-child(3) { animation-delay: -20s; }
.bg_item:nth-child(4) { animation-delay: -15s; }
.bg_item:nth-child(5) { animation-delay: -10s; }
.bg_item:nth-child(6) { animation-delay: -5s; }


.bg01 {
background-image: url("../2026_0810hat_no_hi_img/bg01.jpg");
}
.bg02 {
background-image: url("../2026_0810hat_no_hi_img/bg02.jpg");
}
.bg03 {
background-image: url("../2026_0810hat_no_hi_img/bg03.jpg");
}
.bg04 {
background-image: url("../2026_0810hat_no_hi_img/bg04.jpg");
}
.bg05 {
background-image: url("../2026_0810hat_no_hi_img/bg05.jpg");
}
.bg06 {
background-image: url("../2026_0810hat_no_hi_img/bg06.jpg");
}



}


/* フェード＋拡大のアニメーション */
@keyframes bg_fade_zoom {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  /* フェードイン完了 */
  8.33% {
    opacity: 1;
  }
  /* 表示キープ */
  16.66% {
    opacity: 1;
  }
  /* フェードアウト完了（完全に消える） */
  25% {
    opacity: 0;
  }
  /* アニメーション終了（消えた状態で拡大を継続させ、一瞬で初期値に戻す） */
  100% {
    opacity: 0;
    transform: scale(1.24); /* 30秒間かけて一定速度で拡大し続ける */
  }
}