@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* 全体の基本スタイル */
html, body {
    height: 100%; /* ページ全体の高さを確保 */
    margin: 0; /* 余白をなくす */
    font-family: 'Noto Sans JP', sans-serif; /* 日本語フォント */
    text-align: center; /* テキストを中央揃え */
    background: linear-gradient(135deg, #a2d2ff, #d0f4de); /* 水色系のグラデーション背景 */
    color: #333; /* 文字の基本色 */
    max-widh: 600px;
}

/* フレックスボックスでコンテンツを画面いっぱいに広げる */
body {
    display: block;
    flex-direction: column; /* 縦方向のレイアウト */
}

/* ヘッダー部分 */
header {
    background: rgba(0, 0, 0, 0.7); /* 半透明の黒背景 */
    color: white; /* 文字色を白に */
    padding: 10px; /* 内側の余白 */
    font-size: 10px; /* 文字の大きさ */
    width:100%;
}

/* メインコンテンツ（中央揃え） */
main {
    font-size: 10px;
    width:100%;
    display: block;
    margin: 0 auto;
}

/* セクションタイトル */
h2 {
    color: #0077b6; /* 水色系のアクセントカラー */
    font-size: 10px; /* 文字サイズ */
    margin-top: 15px; /* 上の余白 */
    width: 100%;
}

/* フッター（ページ最下部に固定） */
footer {
    background: rgba(0, 0, 0, 0.7); /* 半透明の黒背景 */
    color: white; /* 文字色を白に */
    padding: 10px; /* 内側の余白 */
    text-align: center; /* 中央揃え */
    font-size: 10px;
}