/* =========================================
   Reset & Base Styles
========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    width: 100%;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f5f5f5;
    /* 画像の隙間が目立たないように薄い背景色 */
}

/* =========================================
   Split Container Layout (PC)
========================================= */
.split-container {
    display: flex;
    width: 100%;
    height: 100vh;
    /* 画面全体の高さを確保 */
    overflow: hidden;
    /* コンテナ全体としてはスクロールさせない */
}

/* 左側ペイン (固定) */
.left-pane {
    flex: 1;
    /* 左右50%ずつ分割 */
    height: 100vh;
    background-color: #ffffff;
    /* 茶色の余白を消すため、背景を白に設定 */
    display: flex;
    justify-content: center;
    /* 画像を中央に配置 */
    align-items: center;
    overflow: hidden;
    /* 左側はスクロールさせない */
    position: relative;
    /* 背景色を画像の端の色に合わせていっそ馴染ませる */
}

.left-pane .fixed-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    /* 余白を完全にゼロにして画像を最大化 */
    position: relative;
    overflow: hidden;
}

/* ベース背景画像 */
.left-pane .bg-img {
    width: 100%;
    height: 100%;
    /* containによる白いletterboxing（上下の余白）を消すためcoverに変更し、最大限まで拡大 */
    object-fit: cover;
    /* 下の文字（インスタグラム等）が絶対に切れないように、基準位置を右下に固定 */
    object-position: bottom right;
}

/* 常に背景画像と同じスケーリングをするラッパー */
.left-pane .overlay-wrapper {
    position: absolute;
    bottom: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    aspect-ratio: 1480 / 1600;
    pointer-events: none;
    /* ラッパー自体はクリックを透過 */
}

/* アニメーションの定義 */
/* お菓子用のホバー振動（控えめに調整） */
@keyframes hoverShake {
    0% {
        transform: rotate(0deg) translate(0, 0);
    }

    25% {
        transform: rotate(1.5deg) translate(1px, -1px);
    }

    50% {
        transform: rotate(0deg) translate(0, 0);
    }

    75% {
        transform: rotate(-1.5deg) translate(-1px, 1px);
    }

    100% {
        transform: rotate(0deg) translate(0, 0);
    }
}

/* カート用の定期的なぷるぷる */
@keyframes periodicJiggle {

    0%,
    85% {
        transform: rotate(0deg) translate(0, 0);
    }

    /* 85%の時間は静止 */
    87% {
        transform: rotate(2deg) translate(1px, -1px);
    }

    89% {
        transform: rotate(-2deg) translate(-1px, 1px);
    }

    91% {
        transform: rotate(2deg) translate(1px, -1px);
    }

    93% {
        transform: rotate(-2deg) translate(-1px, 1px);
    }

    95% {
        transform: rotate(2deg) translate(1px, -1px);
    }

    97% {
        transform: rotate(-2deg) translate(-1px, 1px);
    }

    100% {
        transform: rotate(0deg) translate(0, 0);
    }
}

/* カートの配置（全体の傾き・位置制御） */
.left-pane .overlay-cart-container {
    position: absolute;
    left: 62%;
    /* 先ほどよりさらに少し右上へ */
    top: 22%;
    width: 44%;
    height: auto;
    transform: rotate(-16deg);
    transform-origin: bottom right;
}

/* インスタグラムオーバーレイ（テキストを隠して配置 ※被らないように下へ） */
.left-pane .overlay-insta-container {
    position: absolute;
    left: 63%;
    /* 左にずらしていたのを、元の右寄り位置へ戻す */
    top: 76%;
    /* 高さは下寄りのまま固定 */
    width: 35%;
    /* 文字の下に可愛く収まるサイズ感 */
    height: auto;
    transform: rotate(-3deg);
    pointer-events: auto;
}

.left-pane .overlay-insta {
    width: 100%;
    height: auto;
    display: block;
}

.left-pane .overlay-insta {
    width: 100%;
    height: auto;
    display: block;
}

/* カート画像単体（アニメーション制御） */
.left-pane .overlay-cart {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: auto;
    /* 画像単体はホバー等を検知可能にする */
    animation: periodicJiggle 4s infinite;
    /* 4秒ごとにぷるぷる */
}

/* お菓子の配置 */
.left-pane .overlay-candy {
    position: absolute;
    left: 21%;
    /* カートに合わせて右上に移動 */
    top: 52.0%;
    width: 50%;
    height: auto;
    pointer-events: auto;
    /* 画像単体はホバー等を検知可能にする */
    cursor: pointer;
    /* クリックできそうな感じのポインターに変更 */
    display: block;
    /* aタグ用にブロックブロック要素化 */
}

.left-pane .overlay-candy img {
    width: 100%;
    height: auto;
    display: block;
    /* aタグの下線や謎の余白を防離 */
}

.left-pane .overlay-candy:hover {
    animation: hoverShake 0.3s infinite;
    /* 控えめに震える（少しゆっくりに） */
}

/* =========================================
   スマホ画面はめ込みGIF (LINEyoyakku.gif)
========================================= */
.right-pane .overlay-phone-screen {
    position: absolute;
    /* SVG内部の画像タグ座標から算出した完璧な位置設定 */
    left: 13.284%;
    /* X: 136.1 / 1024.5 */
    top: 37.415%;
    /* Y: 2244.9 / 6000 */
    width: 30.141%;
    /* W: 308.8 / 1024.5 */
    height: 9.145%;
    /* H: 548.7 / 6000 */
    transform: rotate(0deg);
    z-index: 50;
    pointer-events: none;
    /* クリックを透過 */
    overflow: hidden;
    /* 白枠を削り落としてスマホのベゼルに馴染ませるための強めの角丸 */
    border-radius: 12% / 6.5%;
    /* 白枠が見えないように背景を透明化 */
    background-color: transparent;
}

.right-pane .overlay-phone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* スマホ画面枠にぴったりと合わせる */
    display: block;
}

/* 右側ペイン (スクロール) */
.right-pane {
    flex: 1;
    /* 左右50%ずつ分割 */
    height: 100vh;
    overflow-y: auto;
    /* 右側のみ縦スクロールを許可 */
    overflow-x: auto;
    /* 横スクロールを許可 */
    background-color: #f7f3e8;
    /* 右側の画像の背景色と馴染む色に設定 */

    /* スムーズなスクロールのための設定 */
    -webkit-overflow-scrolling: touch;
}

.right-pane .scroll-content {
    /* 画像を自然に配置 */
    position: relative;
    /* オーバーレイ画像の基準位置にするため追加 */
    width: 100%;
    padding: 0;
}

.right-pane img {
    /* ペインの幅に合わせて元のright_pane.pngを表示。横幅をはみ出すようなズーム表示は行わない */
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 0;
}

/* 透明リンクエリア（ホームページ） */
.left-pane .link-homepage {
    position: absolute;
    left: 3.5%;
    top: 44.8%;
    width: 16.5%;
    height: 6.5%;
    z-index: 1000;
    /* 他の画像の下敷きにならないよう大幅に上げる */
    cursor: pointer;
    /* マウスホバーで指マークにする */
    pointer-events: auto !important;
    /* クリックイベントを確実に有効化 */
}

/* 透明リンクエリア（インスタグラム） */
.left-pane .link-instagram {
    position: absolute;
    left: 65.5%;
    top: 69.0%;
    width: 18.5%;
    height: 6.5%;
    z-index: 1000;
    /* 他の画像の下敷きにならないよう大幅に上げる */
    cursor: pointer;
    /* マウスホバーで指マークにする */
    pointer-events: auto !important;
    /* クリックイベントを確実に有効化 */
}

/* =========================================
   Responsive Design (Mobile / Tablet)
========================================= */
@media screen and (max-width: 768px) {
    .split-container {
        flex-direction: column;
        /* 縦に並べる */
        height: auto;
        /* 高さを内容に合わせる */
        overflow: visible;
        /* ページ全体をスクロール可能にする */
    }

    .left-pane {
        height: auto;
        /* スマホ時は左側(上部)も固定解除し一緒にスクロールするように変更 */
        position: static;
        padding: 10px;
    }

    .right-pane {
        height: auto;
        overflow-y: visible;
        /* 右側ペインの独立したスクロールを解除 */
    }

    /* スマホでは画像が高さを持ちすぎないように調整 */
    .left-pane img {
        max-height: 60vh;
    }
}