/* ==============================================
   html要素（ページのルート要素）に背景を設定
   ============================================== */

/* html要素にはアニメーション背景色のみを設定 */
html {
    background-color: #E4DAD0; /* アニメーションの開始色 */
    animation: backgroundColorChange 16s infinite alternate ease-in-out;
}

/* htmlの直前に疑似要素(::before)を生成し、タイル背景を半透明で上に重ねる */
html::before {
    content: ''; /* 疑似要素に必須のプロパティ */
    position: fixed; /* 画面全体に固定表示 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/bg_tile.png'); /* タイル画像を指定 */
    background-repeat: repeat;
    opacity: 0.3; /* ★タイルの濃さを調整 (0.0〜1.0)★ */
    z-index: -1;  /* コンテンツの背面に配置 */
    pointer-events: none; /* この要素がクリック等の操作を妨げないようにする */
}


/* 背景色アニメーションのキーフレーム */
@keyframes backgroundColorChange {
    0% {
        background-color: #E4DAD0; /* 開始色 */
    }
    100% {
        background-color: #DC965A; /* 終了色 */
    }
}


/* ==============================================
   基本設定 - bodyは透明に
   ============================================== */
body {
    margin: 0;
    padding: 0;
    background-color: transparent; /* bodyの背景色を透明にし、htmlの背景が見えるように */

    font-family: 'Roboto', sans-serif; /* Google FontのRoboto */
    overflow-x: hidden; /* 横スクロールの防止 */
}


/* ==============================================
   コンテナと共通画像設定
   ============================================== */
.container {
    position: relative;
    width: 100vw;
    min-height: 100vh;
}

/* 画像全般の基本設定（SVG含む） */
.image {
    position: absolute;
    height: auto; /* 縦横比を維持 */
}

/* リンクを張る画像の親要素 */
.image-link {
    position: absolute;
    display: block;
    z-index: 1;
}
.image-link .image {
    position: static;
}


/* ==============================================
   アニメーション関連
   ============================================== */

.fade-in-item, .scroll-fade-in-item {
    opacity: 0;
    transition: opacity 0.8s ease-in-out; /* アニメーション速度は0.8sを維持 */
}

.is-visible {
    opacity: 1;
}

/* 画像3のスライドショーのコンテナ */
.image3-slideshow {
    position: absolute;
    /* topは各デバイスの指示で設定 */
    right: 0; /* 右寄せ */
    width: calc(100vw - 20px); /* 画面幅より20px小さい */
    height: calc(100vw - 20px); /* 正方形 */
    overflow: hidden;
    opacity: 0; /* 初期状態を透明に */
    transition: opacity 0.8s ease-in-out; /* フェードインアニメーション */
    z-index: -1; /* コンテナのz-indexは-1を維持 */
}

.image3-slideshow .image3 {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease-in-out; /* フェードインアニメーション */
    z-index: 0; /* コンテナ内で表示されるように */
}

.image3-slideshow .image3.active {
    opacity: 1;
}


/* ==============================================
   PC版レイアウト (min-width: 1024px)
   ============================================== */
@media (min-width: 1024px) {
    /* 画像1 (左上から下へ20px、右へ20pxの位置) */
    .image1-link {
        top: 20px;
        left: 20px;
        width: 256px; /* PC版 画像1の幅を明示（仮定） */
    }
    .image1-link .image1 {
        width: 100%;
    }

    /* 画像2 (右上から下へ80px、左へ40pxの位置) */
    .image2 {
        top: 80px;
        right: 40px;
        z-index: 1;
        width: 100px; /* PC版の画像2の幅を100pxに */
    }

    /* 画像3スライド（ページ上から279pxの位置） */
    .image3-slideshow {
        top: 279px; /* ★PC版の指定★ */
        left: auto; /* 右寄せのため */
        right: 0; /* 右サイドにマージン不要 */
        width: calc(100vw - 20px); /* 画面幅より20px小さい */
        height: calc(100vw - 20px); /* 正方形を維持 */
        z-index: -1;
    }

    /* 画像4 (画像3のスライド下から20px、左から20pxの位置) */
    /* image3のtop(279px) + image3のheight(calc(100vw - 20px)) + 20px */
    .image4-link {
        top: calc(279px + (100vw - 20px) + 20px);
        left: 20px;
        width: 285px; /* PC版の画像4の幅を285pxに */
    }
    .image4-link .image4 {
        width: 100%;
    }

    /* 画像5 (スライド下から20px、右から20pxの位置) */
    /* image3のtop(279px) + image3のheight(calc(100vw - 20px)) + 20px */
    .image5 {
        top: calc(279px + (100vw - 20px) + 20px);
        right: 20px;
        z-index: 1;
        width: 480px; /* PC版の画像5の幅を480pxに */
    }

    /* テキスト1 */
    .text1 {
        font-size: 10px; /* PC版サイズ */
        color: #333333;
        position: fixed; /* PC版はfixedを維持 */
        bottom: 5px;
        left: 20px;
        white-space: nowrap;
        z-index: 2;
    }
}


/* ==============================================
   タブレット版 (max-width: 1023px)
   ============================================== */
@media (max-width: 1023px) {
    /* 画像1 (左上から下へ20px、右へ20pxの位置) */
    .image1-link {
        top: 20px;
        left: 20px;
        width: 256px; /* タブレット版 画像1の幅を200pxに */
    }
    .image1-link .image1 {
        width: 100%;
    }
    /* 画像2 (右上から下へ80px、左へ40pxの位置) */
    .image2 {
        top: 80px;
        right: 40px;
        width: 100px; /* タブレット版 画像2の幅を100pxに */
    }

    /* 画像3（スライド）をページ上から279pxの位置に */
    .image3-slideshow {
        top: 279px; /* ★タブレット版の指定★ */
        left: auto; /* 右寄せのため */
        right: 0; /* 右サイドにマージン不要 */
        width: calc(100vw - 20px);
        height: calc(100vw - 20px);
    }

    /* 画像4 */
    .image4-link {
        top: calc(279px + (100vw - 20px) + 20px); /* 画像3のbottomから20px下 */
        left: 20px;
        width: 285px; /* タブレット版 画像4の幅を285pxに */
    }
    /* 画像5 */
    .image5 {
        top: calc(279px + (100vw - 20px) + 20px); /* 画像3のbottomから20px下 */
        right: 20px;
        width: 340px; /* タブレット版 画像5の幅を340pxに */
    }
    /* テキスト1 */
    .text1 {
        font-size: 10px; /* PCと同じサイズに固定 */
        position: fixed; /* タブレット版はfixedを維持 */
        bottom: 5px;
        left: 20px;
    }
}

/* タブレット版 (横幅 768px 以下) - 小さなタブレット向け画像5調整 */
@media (max-width: 768px) {
    .image5 {
        width: 380px; /* 小さなタブレット版 画像5の幅を380pxに設定 */
        height: auto;
    }
}


/* ==============================================
   スマートフォン版 (max-width: 767px)
   ============================================== */
@media (max-width: 767px) {
    /* 画像1 */
    .image1-link {
        top: 10px;
        left: 10px;
        width: 226px; /* スマートフォン版 画像1の幅を明示 */
    }

    /* 画像3（スライド）をページ上から380pxの位置に */
    .image3-slideshow {
        top: 383px; /* ★スマートフォン版調整: 383pxに固定★ */
        width: calc(100vw - 10px);
        height: calc(100vw - 10px);
    }

    /* 画像2をW70pxに縮小 */
    .image2 {
        top: 70px;
        right: 20px; /* ★左へ10px移動 (10px -> 20px)★ */
        width: 70px; /* スマートフォン版調整 */
        height: auto;
    }

    /* 画像5をW260pxに縮小 */
    .image5 {
        top: calc(383px + (100vw - 10px) + 10px); /* 画像3のbottomから10px下 */
        right: 10px;
        width: 280px; /* スマートフォン版調整 */
        height: auto;
    }

    /* 画像4は画像5のbottom + 200px空けて位置 (160px + 40px) */
    /* 画像5のtop(上記計算) + 画像5のheight(260px) + 200px */
    .image4-link {
        top: calc( (383px + (100vw - 10px) + 10px) + 260px + 200px); /* ★スマートフォン版調整: 下へ40px移動★ */
        left: 10px;
        width: 285px; /* スマートフォン版 画像4の幅 */
    }

    /* テキストを画像4の直下に配置 */
    .text1 {
        font-size: 10px; /* PCと同じサイズに固定 */
        position: absolute; /* スマートフォン版はabsoluteに変更 */
        /* 画像4のtop(上記計算) + 画像4のheight(285px) + 0px ★上に100px移動★ */
        top: calc( ( (383px + (100vw - 10px) + 10px) + 260px + 200px) + 285px + 0px );
        left: 10px;
        bottom: auto; /* bottom指定を解除 */
    }
}