/* slide 2 */
#slideshow_container {
}
#slideshow_container p {
  text-align:right;
  color:white;
  font-size:1.2rem;
  padding:0px;
  margin:0px 5px 2px 0px;
  font-family: "Monotype Corsiva", "Apple Chancery", "Lucida Calligraphy", "Palatino Linotype", "Dancing Script", cursive;
}
#slideshow {
  margin:2px auto;
  position: relative;
  width: 80%;
  aspect-ratio: 16 / 9;
/*  height: 400px;  */
  overflow: hidden; /* 画像がはみ出さないように */
}
#slideshow img {
  position: absolute;
  top: 0;
  left: 0;  
  width: 100%;       /* 横幅を枠いっぱいにする */
  height: 100%;      /* 高さを枠いっぱいにする */
  object-fit: cover; /* 枠に合わせてトリミング（隙間なく埋める） */
  object-position: center center; /* 画像の中心を基準にする */
  opacity: 0;
  transition: opacity 2s ease-in-out, transform 12s linear;
  will-change: opacity, transform;
}
/* 表示状態（JSでこのクラスをつける） */
#slideshow img.active {
  opacity: 1;
}
/* コメントのスタイル 2026.0204 */
.slide-text {
  position: absolute; /* 画像の上に重ねる */
  bottom: 10px;       /* 下からの位置 */
  left: 0;
  width: 100%;
  text-align: center; /* 中央寄せ */
  color: #fff;        /* 白文字 */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8); /* 読みやすく影をつける */
  font-size: 1.0rem;
  z-index: 1000;    /* 画像より手前に表示  10 */
  /* 文字を見やすくする装飾 */
  color: #ffffff;       /* 白文字 */
  font-size: 1.0rem;    /* 文字サイズ */
  font-weight: bold;    /* 太字 */
  
  /* 白文字が背景に溶け込まないように黒い影をつける */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); 
  
  /* フェードイン・アウトのアニメーション */
  opacity: 0;
  transition: opacity 2s ease;
  
  /* 文字選択を防止（スライドショーの邪魔にならないように） */
  pointer-events: none;
}

/* 表示用クラス */
.slide-text.active {
  opacity: 1;
}

/*-------------- mobile responsive -----iphone6s --------------------*/
@media screen and  (max-width: 480px) { 
#slideshow {
  margin:2px auto;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

}

/* === アニメーションのバリエーション === */
/* パターンA: ズームイン */
.effect-zoom-in {
  transform: scale(1.0);
}
.effect-zoom-in.active {
  transform: scale(1.15); /* 1.15倍までゆっくり拡大 */
}

/* パターンB: ズームアウト */
.effect-zoom-out {
  transform: scale(1.15);
}
.effect-zoom-out.active {
  transform: scale(1.0);
}

/* パターンC: 左へ少しスライド */
.effect-slide-left {
  transform: translateX(50px);
}
.effect-slide-left.active {
  transform: translateX(0);
}

/* パターンD: ただのフェード（動きなし） */
.effect-fade {
  transform: scale(1.0);
}