/* =========================================
   1. テンプレートの余白を強制キャンセル！
   ========================================= */
#wrapper {
    padding: 0 !important;
    max-width: 100% !important;
}

.oya-layout-wrapper {
width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    height: 80vh; 
    min-height: 550px;
    display: flex; 
    overflow: hidden;
    background-color: #6ca6ff; /* 背景色 */
}

/* 左右の背景パネル */
.side-left, .side-right {
    flex: 1;
    background-size: cover;
    background-position: center;
}
.side-left { border-right: 2px solid #6ca6ff; }
.side-right { border-left: 2px solid #6ca6ff; }

/* メイン画面（ここが中央にくる） */
.game-screen {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 100%;
    background-color: #6ca6ff;
    margin: 0 auto; /* 真ん中寄せ */
    overflow: hidden;
}

/* 画像を配置する基準のエリア */
.scroll-area {
    position: relative;
    width: 100%;
    height: 100%; 
}

/* =========================================
   2. 各画像の配置（それぞれ個別に絶対配置する）
   ========================================= */

.oya0 {
    position: absolute;
    top: 5%; 
    left: 50%; 
    transform: translateX(-50%);
    width: 80%; 
}

/* スタートボタン（<a>タグ自体を配置する） */
.oya1 {
    position: absolute;
    top: 45%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 50%; 
    z-index: 10;
    display: block; /* aタグの範囲を広げるために必須 */
}
/* aタグの中の画像の設定 */
.oya1 img {
    width: 100%; 
    height: auto;
    transition: transform 0.3s ease;
}
.oya1:hover img {
    transform: scale(1.1);
}

.oya2 {
    position: absolute;
    bottom: 20%; 
    right: 5%; 
    width: 35%; /* 少し小さく調整 */
    z-index: 4; 
    animation: float 3s ease-in-out infinite;
}

.oya3 {
    position: absolute;
    bottom: -5%; 
    left: 50%; 
    transform: translateX(-50%);
    width: 60%; /* 少し小さく調整 */
    z-index: 3; 
    animation: float-center 3s ease-in-out infinite;
}

/* スマホ表示の時は左右を消す */
@media (max-width: 600px) {
    .side-left, .side-right { display: none; }
}

/* アニメーション */
@keyframes float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
@keyframes float-center {
    0%   { transform: translateX(-50%) translateY(0px); }
    50%  { transform: translateX(-50%) translateY(-10px); }
    100% { transform: translateX(-50%) translateY(0px); }
}