@charset "UTF-8";
/* CSS Document */
/* === 全体の設定 === */
:root {
    /* スライダーの高さ設定 */
    --slider-height-pc: 600px;
    --slider-height-sp: 100vh;
    
    /* 5枚 × 5秒 ＝ 25秒 に変更 */
    --total-time: 25s;         
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    background-color: #fff; /* 画像切り替え時の背景色 */
}

/* === スライダー枠 === */
.slider-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 500px;
}

/* =========================================
   PC用スタイル (769px以上)
   ========================================= */
@media (min-width: 769px) {
.overlay-text h2 {
	font-size: 2rem;
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
}
    .overlay-text p { font-size: 1rem; }
}

/* === クロスフェードのアニメーション定義 === */
/*
  全体の時間(25s)に対するパーセンテージで設定
  0% : フェードイン開始 (opacity:0)
  4% : フェードイン完了 (1s経過時点) -> opacity:1
  20%: 表示維持終了 (5s経過時点) -> opacity:1
  24%: フェードアウト完了 (6s経過時点) -> opacity:0
  100%: 次の出番まで待機 (opacity:0)

  ※この設定により、ある画像がフェードアウトしている最中に
    次の画像がフェードインしてくるため、クロスフェードに見えます。
*/

/* =========================================
   スマホ用スタイル (768px以下)
   ========================================= */
/* スマホ時の高さ変更 */
@media (max-width: 768px) {
    .slider-container {
        height: 600px;
    }
}

/* === 個別のスライド（重ね合わせ設定） === */
.slide {
    position: absolute; /* 全てのスライドを同じ位置に重ねる */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 初期状態は透明 */
    z-index: 1;
    /* アニメーション適用 */
    animation: crossfade-animation var(--total-time) infinite;
}

/* === 各スライドのアニメーション開始時間をずらす === */
/* 5秒間隔で順番にスタートさせる */
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 5s; }
.slide:nth-child(3) { animation-delay: 10s; }
.slide:nth-child(4) { animation-delay: 15s; }
.slide:nth-child(5) { animation-delay: 20s; }
/* === 画像の設定 === */
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* === テキストオーバーレイ） === */
.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    width: 90%;
    max-width: 800px;
    text-shadow: 0 2px 10px rgba(0,0,0,1),0 2px 10px rgba(0,0,0,0.5);
    z-index: 2; /* 画像より前に表示 */
}

.overlay-text h2 {
	font-size: 2.2rem;
	margin-bottom: 1rem;
	letter-spacing: 0.1em;
	font-family: "Noto Serif JP", serif;
	font-weight: normal;
}

.overlay-text p {
    font-size: 1.2rem;
}


@keyframes crossfade-animation {
    0% { opacity: 0; z-index: 1; }
    4% { opacity: 1; z-index: 2; }    /* フェードイン完了 (25秒の4%＝1秒) */
    20% { opacity: 1; z-index: 2; }   /* 表示キープ終了 (25秒の20%＝5秒) */
    24% { opacity: 0; z-index: 1; }   /* フェードアウト完了 (25秒の24%＝6秒) */
    100% { opacity: 0; z-index: 1; }
}