body {
    background-color: rgb(225, 43, 146);
}
#top_body{
    background-color: rgb(221, 0, 124);
}
/** カードイメージ */
.image-container {
    position: relative;
    width: 100%;
    max-width: 300px;
    padding-top: 100%; /* 1:1 のアスペクト比を維持 */
    margin: auto;
}
.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央揃え */
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.overlay.bottom {
    width: 130%;
    height: 130%;
}
.select-container {
    max-width: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #ddd;
    overflow: hidden;
    background: #f8f9fa;
    cursor: pointer;
}
.select-container.active {
    border: 3px solid rgb(238, 118, 118);
}
.select-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* タイマー表示を赤文字に */
#timer {
    font-size: 3.5rem;
    font-weight: bold;
    color: white;
}
/* タイマー表示(180度回転)) */
#timerR180 {
    font-size: 3.5rem;
    font-weight: bold;
    color: white;
    transform: rotate(180deg);
}
/* TOP */
.top-section {
    position: relative; /* 親要素を基準にする */
    height: auto; /* 必要に応じて高さを調整 */
}
.top-back-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 必要に応じて調整 */
    height: auto; /* 縦横比を維持 */
    z-index: -1; /* 重なり順を指定 */

}

/* images */
.top-image {
    max-width: 100%;
    height: auto;
}
.bottom-image {
    max-width: 60%;
    height: auto;
    display: block; /* 必須: img 要素をブロック要素にする */
    margin: 0 auto; /* 左右センタリング */
}
.text-image {
    max-width: 100%;
    height: auto;
}
/* images */
.image_button {
    background: none;
    border: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    cursor: pointer;
}
/* 2列制御 */
.container.two-rows {
    display: flex;
    flex-wrap: wrap; /* 複数行に対応 */
    justify-content: center; /* 中央揃え */
    gap: 16px; /* ボタン間の隙間 */
}
.image_button.two-rows {
    flex: 0 1 calc(50% - 16px); /* 2列にするための幅調整 */
    max-width: calc(50% - 16px); /* ボタンの最大幅を設定 */
    box-sizing: border-box; /* パディングやボーダーを含めた幅計算 */
}

/* 回答画面 2列制御 */
.image_answer.two-rows {
    flex: 0 1 calc(50% - 16px); /* 横幅を2列に調整 */
    max-width: calc(50% - 16px); /* 最大幅を設定 */
    box-sizing: border-box; /* パディングやボーダーを含めた幅計算 */
    aspect-ratio: 1 / 1; /* 横幅と高さを同じにする */
    display: flex; /* 子要素を中央揃えするためにフレックスボックスを使用 */
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
}

.image_answer.text {
    object-fit: contain; /* 縦横比を維持して画像を収める */
    display: block; /* 必須: img 要素をブロック要素にする */
}

/* 回答画面 イメージの重ね表示制御 */
.image_answer {
    position: relative; /* 親要素を基準に子要素を配置 */
    width: 75%; /* 必要に応じて調整 */
    height: auto; /* 必要に応じて調整 */
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
}

.image_answer_back {
    position: absolute; /* 親要素を基準に重ねる */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 縦横中央揃え */
    width: 100%; /* 親要素の幅の130% */
    height: 100%; /* 親要素の高さの130% */
    object-fit: contain; /* 縦横比を維持して表示 */
}

.image_answer_front {
    position: absolute; /* 親要素を基準に重ねる */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 縦横中央揃え */
    width: auto; /* 幅は自動調整 */
    height: calc(75%); /* .text-center の幅の半分 */
    object-fit: contain; /* 縦横比を維持して表示 */
}