body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 20px;
    text-align: center;
    background-color: #faf7f7;
    color: #333;
}

.container {
    background-color: #d1a8e9; /* 少し淡い紫色 */
    padding: 20px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    max-width: 600px; /* コンテンツ幅を制限 */
}

h1, h2 {
    color: #5d3a3a; /* 少し落ち着いた茶色 */
}

#js-question-text {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.question-options button {
    display: block; /* ボタンを縦に並べる */
    width: 90%; /* ボタンの幅 */
    margin: 10px auto; /* 上下左右中央寄せ */
    padding: 12px 20px;
    font-size: 1em;
    cursor: pointer;
    border: 1px solid #0d8444; /* 少し濃い緑色の枠線 */
    border-radius: 5px;
    background-color: #eee; /* 薄い灰色 */
    transition: background-color 0.3s ease; /* ホバー時のアニメーション */
}

.question-options button:hover {
    background-color: #ddd; /* ホバー時にもう少し濃い灰色 */
}

.god-image-container {
    margin: 20px 0; /* 画像コンテナの上下余白 */
}

#js-god-image {
    max-width: 100%; /* 親要素の幅を超えないように */
    height: auto;    /* アスペクト比を維持 */
    display: block;  /* ブロック要素にして中央寄せなどしやすく */
    margin: 0 auto; /* 中央寄せ */
    border: 3px solid #a08060; /* 例: 神話っぽい茶色の枠線 */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* 例: 影をつける */
}

#js-result-title {
    color: #800000; /* 例: タイトルの色を濃い赤 */
    margin-bottom: 15px;
}

#js-result-text {
    font-size: 1.1em;
    text-align: left; /* 結果テキストを左寄せにしても良い */
    margin-top: 15px;
}

/* 必要に応じて追加のスタイルを記述 */

/* ★ ここに「もう一度診断する」ボタンのスタイルを追加します ★ */
#js-restart-button {
    display: block; /* ボタンをブロック要素に */
    width: 60%; /* 幅を少し広めに */
    margin: 30px auto 10px auto; /* 上に大きめの余白、左右中央寄せ */
    padding: 15px 25px;
    font-size: 1.1em;
    cursor: pointer;
    border: none; /* 枠線なし */
    border-radius: 25px; /* 角を丸くする */
    background-color: #007bff; /* 青色の背景 */
    color: white; /* 白色の文字 */
    transition: background-color 0.3s ease, transform 0.1s ease; /* ホバー時のアニメーションとクリック時のわずかな変形 */
    font-weight: bold; /* 太字 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 影をつける */
    text-transform: uppercase; /* 大文字に変換 (任意) */
}

#js-restart-button:hover {
    background-color: #0056b3; /* ホバー時にもっと濃い青 */
}

#js-restart-button:active {
    transform: scale(0.98); /* クリック時にわずかに縮小 */
}
/* ★ 追加箇所はここまでです ★ */