body {
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
    color: #333;
}

h1 {
    color: #5a2a8a;
    /* この margin-bottom は .instruction-text との兼ね合いで調整が必要かもしれません */
    margin-bottom: 20px; /* ここを調整しました */
}

/* ★★★ ここから追加・修正 ★★★ */
.instruction-text {
    font-size: 1.1em;
    color: #666;
    margin-top: 0px; /* h1の下に直接配置するため */
    margin-bottom: 30px;
    text-align: center;
}

.card {
    width: 150px; /* カードの幅 */
    height: 220px; /* カードの高さ */
    background-color: #fff; /* カードの背景色 */
    border: 3px solid #ccc; /* カードの枠線 */
    border-radius: 15px; /* カードの角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影をつけて立体感を出す */
    cursor: pointer; /* マウスカーソルを指の形にする */
    transition: transform 0.2s, border-color 0.2s; /* ホバー時のアニメーション */
    overflow: hidden; /* 画像がカードの枠からはみ出ないようにする */
    position: relative; /* 子要素の配置基準にする */
}

.card img {
    width: 100%; /* 親要素（.card）の幅いっぱいに広げる */
    height: 100%; /* 親要素（.card）の高さに合わせる */
    object-fit: cover; /* 画像がアスペクト比を維持しつつ、カード全体を覆うように調整 */
    display: block; /* 画像の下に余計なスペースができないようにする */
}

.card:hover {
    transform: translateY(-10px); /* ホバー時に少し浮き上がる */
    border-color: #5a2a8a; /* ホバー時に枠線の色を変える */
}
/* ★★★ ここまで追加・修正 ★★★ */

#card-selection {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.company-name { /* この部分は既存のコードと同じですが、位置を揃えました */
    font-size: 1.2em;
    color: #5a2a8a;
    margin-top: 20px;
    margin-bottom: 40px;
    font-weight: bold;
    text-align: center;
}

#result {
    text-align: center;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    min-width: 300px;
}

#fortune-text {
    font-size: 1.8em;
    color: #e74c3c;
    font-weight: bold;
    margin-bottom: 15px;
}

#advice-text {
    font-size: 1.2em;
    line-height: 1.6;
    color: #444;
}

#reset-button {
    background-color: #5a2a8a;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    margin-top: 25px;
    transition: background-color 0.3s ease;
}

#reset-button:hover {
    background-color: #7d48b1;
}