@charset "UTF-8";


html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: "ヒラギノ明朝 ProN", "Hiragino Mincho Pro";
}

/*headerを全画面表示（横幅100%・縦幅100%）にする */
header {
    width: 100%;
    height: 100vh;
    /* vh = 画面の高さに対するパーセント（100vhで画面ぴったり） */
    position: relative;
    overflow: hidden;
}

/* containerも全画面いっぱいに広げる */
.container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 画像ボックスを全画面に広げる */
.image-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*画像の比率を保ったまま、画面いっぱいに引き伸ばしてトリミングする */
    opacity: 0;
    z-index: 1;
    /* 画像を背景（下側）にする */
    animation: change-img-anim 30s infinite;
}

/*全画面の真ん中にタイトルとメニューを配置する */
.text-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    /* 画像より手前に表示する */
    text-align: center;
    padding: 20px;
}

/* タイトル文字のスタイル */
.text {
    color: #ffffff;
    font-size: 48px;
    margin: 0 0 24px 0;
    font-weight: bold;
    letter-spacing: 2px;
}

/* navタグ内のメニューを横並びにするスタイル */
.overlay-nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0;
}

/* リンク文字のデザイン */
.overlay-nav a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    display: inline-block;
}

/* ホバー時の効果 */
.overlay-nav a:hover {
    text-decoration: underline;
}

/* --- 以下、アニメーション処理（変更なし） --- */
.image:nth-of-type(1) {
    animation: change-img-anim-first 30s infinite;
    animation-delay: 0s;
}

.image:nth-of-type(2) {
    animation-delay: 10s;
}

.image:nth-of-type(3) {
    animation-delay: 20s;
}

@keyframes change-img-anim-first {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    36% {
        opacity: 1;
    }

    45% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes change-img-anim {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    36% {
        opacity: 1;
    }

    45% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}