@charset "utf-8";
/* CSS Document */

/* ------------------------------------------------------------ */
/*                          トップページスライドショー           　*/
/* ------------------------------------------------------------ */

/* メインビジュアル全体 */
.main-visual.slideshow {
  position: relative;
  width: 100%;
  height: 100vh; /* 画面縦幅いっぱい */
  overflow: hidden;
}

/* 各スライド */
.main-visual .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;       /* 画像を画面いっぱいに拡大 */
  background-position: center bottom;  /* 中央寄せ */
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* ▼ PC 用（デフォルト画像） */
.slide1 { background-image: url("../images/top_01.png"); }
.slide2 { background-image: url("../images/top_02.png"); }
.slide3 { background-image: url("../images/top_03.png"); }
.slide4 { background-image: url("../images/top_04.png"); }
.slide5 { background-image: url("../images/top_05.png"); }



/* 表示中のスライド */
.main-visual .slide.active {
  opacity: 1;
}

/* メンビジュアルキャッチコピー */
.text-overlay {
  position: absolute;
  bottom: 15%;
  left: 10%;
  width: auto;
  max-width: 80%; /* スマホで収まりやすくする */
}

.text-overlay img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 1;                 /* 初期は表示 */
  transition: opacity 1s ease-in-out; /* フェード用 */
}
.text-overlay img.fade-out {
  opacity: 0;                 /* フェードアウト状態 */
}


/* ドットナビゲーション */
.slideshow-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.slideshow-dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background 0.3s;
}

.slideshow-dots button.active {
  background: rgba(255,255,255,1);
}

/* タブレット用（769px〜1200px）
@media (min-width: 769px) and (max-width: 1200px) {
  .main-visual.slideshow {
    height: auto;        /* 高さ固定を外す 
    aspect-ratio: 16/9;  /* 横16:縦9で表示 
  }
}*/

/* ▼ スマホ用（768px以下で切り替え） */
@media (max-width: 768px) {
  .slide1 { background-image: url("../images/top_01_s.png"); }
  .slide2 { background-image: url("../images/top_02_s.png"); }
  .slide3 { background-image: url("../images/top_03_s.png"); }
  .slide4 { background-image: url("../images/top_04_s.png"); }
  .slide5 { background-image: url("../images/top_05_s.png"); }
	
 .text-overlay {
  bottom: 10%;
  left: 5%;
}
}