/* スライドショー */

/* リセットと基本設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* paddingやborderを幅・高さに含める */
}

body {
    overflow-x: hidden; /* 横スクロールバーを防ぐ */
}

/* 1. フルスクリーンスライドショーエリア */
.fullscreen-slider {
    width: 100vw; /* ビューポートの幅いっぱい */
    height: 100vh; /* ビューポートの高さいっぱい */
    position: relative;
    overflow: hidden; /* スライドのアニメーション時に不要な要素を隠す */
}

.slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* 背景画像の設定 */
    background-size: cover; /* 画面いっぱいに表示し、はみ出し部分はカット */
    background-position: center; /* 画像を中央に配置 */
    /* スライドの非表示/表示 */
    opacity: 0;
    transition: opacity 1s ease-in-out; /* フェードイン/アウトのアニメーション */

    display: flex; /* キャッチコピーのセンタリング */
    justify-content: center;
    align-items: center;
}

/* 現在表示中のスライド */
.slide.current {
    opacity: 1;
    z-index: 10; /* 他のスライドより前面に表示 */
}