/* 基本的なリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden; /* ボディ全体のスクロールを禁止 */
    font-family: sans-serif;
    overscroll-behavior-y: contain; /* 追加: 縦方向のオーバースクロール時のデフォルト動作を抑制 */
}
body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
.container {
    width: 100%;
    height: 100svh; /* ビューポートの最小の高さに合わせる */
    overflow: hidden; /* 追加: 中身がはみ出ないように */
    position: relative; /* page-wrapperの基準のため */
}

.page-wrapper {
    height: 100%; /* コンテナの高さに合わせる */
    transition: transform 0.5s ease-out; /* スムーズなアニメーション */
}

.page {
    position: relative;
    width: 100vw;
    height: 100svh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: #f5f1e6;
}

/* ページ内のコンテンツ用コンテナ */
.content {
    position: relative; /* 背景より手前に表示するため */
    z-index: 10;
    text-align: center;
    /* テキストが見やすいように背景を少し暗くする（オプション） */
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 10px;
    opacity: 1; /* 初期状態は不透明 */
    transition: opacity 0.5s ease-in-out; /* 0.5秒かけて不透明度を変化 */
}
.content .icon {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    animation: float 3s ease-in-out infinite;
}
.content .icon2 {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    animation: float2 3s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    25% {
        transform: translateY(-15px);
    }
    50% {
        transform: translateY(0px);
    }
    75% {
        transform: translateY(15px);
    }
    100% {
        transform: translateY(0px);
    }
}
@keyframes float2 {
    0% {
        transform: translateX(0px);
    }
    25% {
        transform: translateX(-15px);
    }
    50% {
        transform: translateX(0px);
    }
    75% {
        transform: translateX(15px);
    }
    100% {
        transform: translateX(0px);
    }
}
/* フェードアウトを実行するためのクラス (JSで付与) */
.content.fading-out {
    opacity: 0;
    pointer-events: none; /* アニメーション後、クリックイベントなどを拾わないように */
}

/* --- 各ページの背景設定 --- */
.page-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* coverからcontainに変更 */
    object-position: center center;
    z-index: 0;
    user-select: none;
    -webkit-user-drag: none;
}

h1 {
    margin-bottom: 20px;
    font-size: 2rem;
}
p {
   font-size: 1.2rem;
}

/* --- ボタンエリア --- */
.button-area {
    aspect-ratio: 750 / 1125;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    /* background-color: rgba(255, 255, 255, 0.8);  */ /* 半透明の白 */
    padding: 0; /* 上下のパディングを減らす */
    text-align: center; /* ボタンを中央揃え */
    z-index: 2; /* コンテンツより手前、必要であれば調整 */
    transform: translateY(-50%);
    pointer-events: none;
}
.button-area .cta-button {
    position: absolute;
    width: 100%;
    height: 15%;
    left: 0;
    bottom: 0;
    pointer-events: auto;
    /* background-color: rgba(0, 255, 255, 0.3); */
}
#page1 .motal-btn-area {
    aspect-ratio: 750 / 1125;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    padding: 0;
    text-align: center;
    z-index: 2;
    transform: translateY(-50%);
    pointer-events: none;
}
#page1 #modal-btn {
    position: absolute;
    z-index: 1;
    top: 70%;
    width: 78%;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    pointer-events: auto;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
.modal-content {
    position: relative;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    cursor: default;
  }  
  .modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 32px;
    color: #333;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s;
  }
  .modal-close:hover {
    color: #000;
  }
  .modal-body {
    margin-top: 10px;
  }
  #new_btn {
    position: absolute;
    z-index: 1;
    top: 66.5%;
    width: 78%;
    left: 50%;
    transform: translateX(-50%);
  }
#page1 .button-area .cta-button {
    bottom: 3%;
}
.button-area .anchor-button,
.button-area .form3sec_btn {
    position: absolute;
    pointer-events: auto;
    /* background-color: rgba(0, 0, 255, 0.3); */
}
.button-area .anchor-button-01 {
    width: 47%;
    height: 3%;
    top: 3%;
    right: 0;
}
.button-area .anchor-button-02 {
    width: 35%;
    height: 3%;
    top: 6.5%;
    right: 0;
}
.button-area .anchor-button-03 {
    width: 70%;
    height: 3%;
    bottom: 21%;
    left: 50%;
    transform: translateX(-50%);
}
.button-area .anchor-button-04 {
    width: 29%;
    height: 3%;
    bottom: 50.5%;
    right: 40%;
}
.button-area input {
    pointer-events: auto;
    width: 100%;
    font-size: 1.3rem;
    border: 1px solid #000;
}
.button-area .form3sec_error {
    text-align: left;
}

.button-area .form3sec_box-01 {
    position: absolute;
    width: 66%;
    top: 32.5%;
    left: 12%;
    margin: 0 auto;
}
.button-area .form3sec_box-02 {
    position: absolute;
    width: 66%;
    top: 46.5%;
    left: 12%;
    margin: 0 auto;
}
.button-area .form3sec_box-03 {
    position: absolute;
    width: 66%;
    top: 60.5%;
    left: 12%;
    margin: 0 auto;
}
.button-area .form3sec_btn {
    width: 40%;
    height: 7%;
    top: 76.5%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
}
.button-area .form3sec_btn a {
    display: block;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    border-radius: unset;
    padding: 0;
    box-shadow: none;
}

/* --- PC View Adjustments --- */
@media (min-width: 768px) { /* 768px以上の画面幅で適用 (ブレークポイントは調整可能) */
    .container {
        max-width: 550px;
        margin: 0 auto; /* コンテナ自体を画面中央に配置 */
        /* 必要であれば、左右に境界線や影を追加してスマホ画面のように見せる */
        /* border-left: 1px solid #eee; */
        /* border-right: 1px solid #eee; */
        /* box-shadow: 0 0 10px rgba(0,0,0,0.1); */
    }

    /* ページ幅もコンテナに合わせる */
    .page {
        width: 100%; /* 100vw から変更 */
    }

    /* 動画や背景画像の幅もコンテナ内の100%になるため、通常は調整不要 */
    /* #page1 video { width: 100%; } */
    /* #page2, #page3, #page4, #page5 { background-size: 100% auto; } */

    /* ボタンの幅は90%のままなので、コンテナ幅に対する比率になる */
}

/* --- ページャースタイル --- */
.pager {
    position: fixed;
    bottom: 15px; /* ボタンエリアの高さと自身の高さを考慮して調整 */
    right: 20px;
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.5); /* 見やすいように背景色 */
    color: white;
    border-radius: 4px;
    font-size: 0.9rem;
    z-index: 10; /* ボタンエリアと同じかそれ以上 */
    user-select: none; /* テキスト選択不可に */
}

/* PC表示時の調整（任意） */
/* ボタンエリアが画面下部を占めるので、ページャーの位置をボタンエリアの上に調整するなど */
@media (min-width: 768px) {
    /* .container, .page のスタイルはここにも書けるが、既存のものを優先するためここでは省略 */
    .pager {
        /* PCではボタンエリアの高さが変わらないので、bottomの値は微調整程度で良いかも */
        /* もしボタンエリアと重なるなら、bottomをボタンエリアの高さ分上げるなど */
        /* 例: bottom: 60px; (button-areaのpadding 8px*2 + buttonのpadding 15px*2 + buttonのfont-sizeなど考慮) */
        /* 具体的な値は .button-area の高さを見て調整してください */
         bottom: 20px; /* 少し余裕を持たせる */
    }
}

/* カルーセルスタイル */
.carousel-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel {
    width: 100%;
    height: 100%;
    background: transparent;
}

.carousel-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}

/* Slickの矢印カスタマイズ */
.slick-prev,
.slick-next {
    z-index: 3;
    width: 30px;
    height: 30px;
}

.slick-prev {
    left: 15px;
}

.slick-next {
    right: 15px;
}

.slick-prev:before,
.slick-next:before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('../img/arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
}
.slick-prev:before {
    transform: rotate(180deg);
}
.slick-next:before {
    /* transform: rotate(90deg); */
}

/* ドットナビゲーションのカスタマイズ */
.slick-dots {
    aspect-ratio: 750 / 1125;
    position: absolute;
    top: 50%;
    left: 0;
    bottom: unset;
    width: 100%;
    /* background-color: rgba(0, 0, 0, 0.5); */
    padding: 0; /* 上下のパディングを減らす */
    text-align: center; /* ボタンを中央揃え */
    z-index: 2; /* コンテンツより手前、必要であれば調整 */
    transform: translateY(-50%);
    pointer-events: none;
}

.slick-dots li {
    margin: 120% 10px 0;
    pointer-events: auto;
}

.slick-dots li button:before {
    color: #DC0000;
    font-size: 16px;
    opacity: 0.3;
}


.slick-dots li.slick-active button:before {
    color: #DC0000;
    opacity: 1;
}

#page3 .slick-dots li button:before {
    color: #fff;
}

.slick-dotted.slick-slider {
    margin-bottom: 0;
}

/* Slickのスライダーラッパーの調整 */
.slick-list,
.slick-track {
    height: 100%;
}

.slick-slide {
    height: 100%;
}

.slick-slide > div {
    height: 100%;
}

/* ページ遷移時のフェードアウト */
.page.fade-out {
    opacity: 0;
}

/* ページ遷移時のスライドアニメーション */
.page.slide-up {
    transform: translateY(-100%);
}

.page.slide-down {
    transform: translateY(100%);
}