html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* ビューポートの高さに合わせる */
}

h1 {
    background-color: rgba(253, 253, 253, 0.8); /* 背景色をグレーに設定 */
    display: inline-block; /* 背景の横幅を文字に合わせる */
    padding: 10px; /* タイトルの周囲にスペースを追加 */
    margin: 10 0; /* デフォルトのマージンを取り除く */
    border-radius: 30px; /* 楕円形にするための設定 */
}

body {
    background-image: url('../images/main.png');
    background-size: cover; /* 背景画像をカバーするように設定 */
    background-repeat: no-repeat; /* 画像の繰り返しを無効にする */
    background-position: center; /* 画像を中央に配置 */
    padding-bottom: 0px;
    text-align: center;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: left;
    padding: 5px 0;
}

a.button-god {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50; /* お好みの背景色に変更してください */
    color: white;
    text-decoration: none;
    border-radius: 30px; /* 楕円形にするための設定 */
    margin: 5px 0;
    transition: background-color 0.3s;
}

a.button-god:hover {
    background-color: #45a049; /* ホバー時の背景色 */
}

a.button-seed {
    display: inline-block;
    padding: 10px 20px;
    background-color: #008CBA; /* お好みの背景色に変更してください */
    color: white;
    text-decoration: none;
    border-radius: 30px; /* 楕円形にするための設定 */
    margin: 5px 0;
    transition: background-color 0.3s;
}

a.button-seed:hover {
    background-color: #007B9A; /* ホバー時の背景色 */
}

@media screen and (max-width: 600px) {
    body {
        font-size: 16px; /* 例として、フォントサイズを大きく */
    }
    /* その他のスマートフォン向けスタイル */
}