/* ====================================
   カスタムプロパティ
   ==================================== */
:root {
    /* ページ数設定 */
    --page-count: 7; /* ★編集箇所: LPのページ数を指定してください (例: 5, 6 など) */

    /* ドットインジケーターの有効時の色 */
    --dot-active-color: #e91e63; /* ★編集箇所: アクティブなドットの色を変更できます */
    /* ドットインジケーターの通常時の色 */
    --dot-inactive-color: #ccc; /* ★編集箇所: 通常のドットの色を変更できます */
}

#page1 {
    background-color: #ffffff;
}
#page2 {
    background-color: #ffffff;
}
#page3 {
    background-color: #ffffff
}
#page4 {
    background-color: #074eac;
}
#page5 {
    background-color: #074eac;
}
#page6 {
    background-color: #074eac;
}
#page7 {
    background-color: #ffffff;
}

/* ====================================
   ベーススタイル
   ==================================== */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden; /* スワイプ領域以外はスクロールさせない */
    position: relative;
    background-color: #f8f8f8;
    color: #333;
}

/* LPコンテナ - スワイプ領域 */
.lp-container {
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    -webkit-overflow-scrolling: touch; /* iOSでのスクロールをスムーズに */
    touch-action: pan-y; /* 垂直方向のパンジェスチャーを許可し、水平方向のブラウザ挙動を抑制 */
    cursor: default;
}

/* 各ページを内包するラッパー */
.lp-pages {
    display: flex;
    width: calc(var(--page-count) * 100vw); /* ページ数 × 100vw */
    height: 100%;
    transition: transform 0.5s ease-in-out; /* スワイプアニメーション */
    will-change: transform; /* パフォーマンス最適化 */
}

/* 個々のLPページ */
.lp-page {
    width: 100vw;
    height: 100%;
    flex-shrink: 0; /* ページが縮まないように */
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平中央揃え */
    text-align: center;
    padding-bottom: 0; /* 画像が全面に来るのでパディングは不要 */
    box-sizing: border-box;
    position: relative;
    background-color: #f0f0f0; /* 画像読み込み中の代替色 */
    overflow-y: hidden; /* ページコンテンツのスクロールは不要 */
}

/* LPコンテンツ画像 */
.lp-page-content-img {
    display: block;
    width: 100%;
    max-width: calc(100dvh * 750/1094);
    height: 100%;
    object-fit: contain; /* アスペクト比を維持して要素を覆う */
    z-index: 1; /* CTAやスワイプドットより下 */
    opacity: 1; /* 透明度を1（不透明）に設定 */
    user-drag: none;
    -webkit-user-drag: none; /* WebKit系ブラウザ向け */
    pointer-events: none; /* マウスイベントを透過させる */
}

/* 固定CTAボタン */
.cta-fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 1000;
}
.cta-fixed-bottom a {
    display: block;
}
.cta-fixed-bottom a img{
    display: block;
    width: 100%;
}

/* スワイプ指示のドット */
.swipe-dots {
    position: absolute;
    bottom: 20dvh;
    width: 100%;
    text-align: center;
    z-index: 500;
    opacity: 0.8;
}
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background-color: var(--dot-inactive-color); /* 通常時のドットの色 */
    border-radius: 50%;
    transition: background-color 0.3s ease;
}
.dot.active {
    background-color: var(--dot-active-color); /* アクティブなドットの色 */
}


/* ====================================
   PC表示用のスタイル (画面幅768px以上)
   ==================================== */
@media (min-width: 768px) {
    /* LPコンテナ全体を中央に配置し、9:16の比率を維持 */
    .lp-container {
        width: 100%;
        max-width: calc(100dvh * 750/1094);
        height: 100vh; /* 画面いっぱいの高さ */
        margin: 0 auto; /* 中央寄せ */
    }

    /* 各ページ内での画像のサイズ調整 */
    .lp-page {
        width: 100%;
        max-width: calc(100dvh * 750/1094);
        height: 100%;
    }

    /* 固定CTAボタンの位置調整 */
    .cta-fixed-bottom {
        left: 50%; /* 中央に配置 */
        transform: translateX(-50%); /* 中央寄せの微調整 */
        width: 100%;
        max-width: calc(100dvh * 750/1094);
    }

    /* スワイプ指示UIの位置調整 */
    .swipe-indicator {
        left: 50%; /* 中央に配置 */
        transform: translateX(-50%); /* 中央寄せの微調整 */
        width: 100%;
        max-width: calc(100dvh * 750/1094);
    }

    /* スワイプドットの位置調整 */
    .swipe-dots {
        left: 50%; /* 中央に配置 */
        transform: translateX(-50%); /* 中央寄せの微調整 */
        width: 100%;
        max-width: calc(100dvh * 750/1094);
    }
}