body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000; /* 背景色を黒に設定 */
}

.game-board {
    display: grid;
    grid-template-columns: repeat(5, 100px);
    gap: 10px;
    width: 545px; 


    background-size: cover; /* 画像がコンテナにぴったり収まるように調整 */
    background-position: center center; /* 画像が正確に中心に来るように設定 */
}




.card {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em; /* 文字の大きさを大きく設定 */
    cursor: pointer;
    border: 3px solid white; /* カードの枠を白く太くする */
    border-radius: 10px;
    background-color: transparent; /* カードの背景を透明に設定 */
    position: relative;
    overflow: hidden; /* 背景がはみ出さないように設定 */
    color: #FFB6C1; /* 文字色を薄ピンクに設定 */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9); /* 文字に大きな影をつける */
}

.card-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0; /* カバー時は文字を表示しない */
}