html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* ビューポートの高さに合わせる */
    display: flex;
    flex-direction: column; /* 子要素を縦に並べる */
}

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

body {
/*    background-image: url('../images/main.jpg');*/
    background-size: cover; /* 背景画像をカバーするように設定 */
    background-repeat: no-repeat; /* 画像の繰り返しを無効にする */
    background-position: center; /* 画像を中央に配置 */
    text-align: center;
    background: linear-gradient(to right, #0000FF, aqua);
}

body > footer {
    margin-top: auto; /* 自動的に利用可能なスペースを上に追加して、フッターを下部に押し出す */
}

main {
    flex: 1; /* メインコンテンツが拡張して、余分なスペースを埋める */
}

footer {
    width: 100%;
    text-align: left;
    padding: 5px 0;
    background-color:darkgray;
}

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

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

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

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

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

a.button-boys-type2:hover {
    background-color: #9a0080; /* ホバー時の背景色 */
}

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

a.button-boys-type3:hover {
    background-color: #9a9700; /* ホバー時の背景色 */
}

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

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

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

a.button-girls-type1:hover {
    background-color: #a35095; /* ホバー時の背景色 */
}

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

a.button-girls-type2:hover {
    background-color: #a35070; /* ホバー時の背景色 */
}

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

a.button-girls-type3:hover {
    background-color: #7750a3; /* ホバー時の背景色 */
}

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

a.button-girls-type4:hover {
    background-color: #C0C0C0; /* ホバー時の背景色 */
}

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

a.button-girls-type5:hover {
    background-color: #7891ff; /* ホバー時の背景色 */
}

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

a.button-girls-type6:hover {
    background-color: #daabf1; /* ホバー時の背景色 */
}

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

a.button-girls-type7:hover {
    background-color: #daabf1; /* ホバー時の背景色 */
}

.diagnosis-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* アイテム間のスペースを調整 */
}

.diagnosis-item {
    width: calc(25% - 10px); /* 4列なので25%の幅 */
    margin: 5px; /* アイテム間の余白 */
    text-align: center; /* テキストを中央揃え */
    background-color: #f0f0f09c; /* 背景色を統一 */
    padding: 15px; /* 内側の余白を追加 */
    border-radius: 10px; /* 角を丸める */
    display: flex; /* フレックスボックスを使用 */
    flex-direction: column; /* 要素を縦方向に並べる */
    justify-content: center; /* 中央揃え */
    align-items: center; /* 中央揃え */
    box-sizing: border-box; /* ボックスサイズの計算をborderとpaddingを含める */
    
    opacity: 0; /* 初期状態を透明に設定 */
    transform: translateY(20px); /* 初期状態で少し下に移動 */
    transition: opacity 1s, transform 1s; /* 透明度と位置の変化に1秒かける */
}

.diagnosis-item a {
    color: inherit; /* リンクの色を維持 */
    text-decoration: none; /* テキストの下線を消去 */
    background-color: transparent; /* リンクの背景色を透明に */
}

.diagnosis-item img {
    width: 100%; /* 画像をアイテムの幅に合わせる */
    height: auto; /* 高さを自動調整 */
    border-radius: 5px; /* 画像の角を少し丸める */
}

.diagnosis-item span {
    margin-top: 10px; /* 画像とテキストの間隔 */
}

@media screen and (max-width: 600px) {
    body {
        font-size: 16px; /* 例として、フォントサイズを大きく */
    }
    /* その他のスマートフォン向けスタイル */
    .diagnosis-item {
        width: calc(50% - 10px); /* スマホでは2列表示 */
    }
}