/* ============================================
   基本設定
   ============================================ */

/* box-sizing を border-box にすると、
   padding や border を含めた寸法で width を計算できる。
   幅計算のズレを防ぐため、レスポンシブでは事実上必須の設定 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    /* ブラウザ既定の余白を消す。
       これを消さないとヘッダーの背景色が画面端まで届かない */
    margin: 0;

    background-color: #f0f8ff;

    /* 日本語フォントを優先順に指定。sans-serif は最後の保険 */
    font-family: "Helvetica Neue", Arial,
                 "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

    /* 行間。日本語は英語より広めにすると読みやすい */
    line-height: 1.7;
    color: #333;
}

/* ============================================
   幅制限の共通クラス
   背景を敷く要素の「内側」に使う。
   外枠（背景色）と内側（幅制限）の役割を分けることで、
   背景は画面いっぱい・文字は中央800px、という表示になる
   ============================================ */
.container {
    /* 画面が広いときの上限。これが無いと大画面で1行が長くなりすぎる */
    max-width: 800px;

    /* 左右の余白を均等にして中央寄せ */
    margin-inline: auto;

    /* スマホで端に張り付かないための余白 */
    padding: 16px;
}

/* ============================================
   ヘッダー
   本文より明るくし、下に濃い線を引いて「上部の帯」に見せる
   ============================================ */
.site-header {
    background-color: #ffffff;

    /* 本文側の境界を明確にする。
       線を太めにするとヘッダーの存在感が出る */
    border-bottom: 2px solid #d0d7de;
}

/* nav を横並びにする。
   flex にしておくと、後で項目が増えても崩れにくい */
.site-header nav {
    display: flex;
    flex-wrap: wrap;   /* 狭い画面で入りきらない場合は折り返す */
    align-items: center;
}

.site-header nav a {
    color: #0645ad;
    text-decoration: none;

    /* タップ領域を確保する。
       上下に余白を取らないとスマホで押しにくい */
    padding: 8px 0;
}

.site-header nav a:hover {
    text-decoration: underline;
}

/* ★区切り線（B案）
   「a + a」は隣接兄弟セレクタで、
   「直前に a がある a」＝2番目以降のリンクだけにマッチする。
   リンクの外側に線を引くため、
   ホバー時の下線やクリック範囲に影響しない */
.site-header nav a + a {
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid #ccc;
}

/* ============================================
   メイン
   ============================================ */
.site-main {
    /* ヘッダー・フッターとの間隔を空ける */
    padding-block: 32px;

    /* コンテンツが少なくてもフッターが上がってこないようにする */
    min-height: 60vh;
}

/* ============================================
   フッター
   ヘッダーとは逆に暗くし、文字も小さく控えめにする
   ============================================ */
.site-footer {
    background-color: #e8eef4;
    border-top: 1px solid #d0d7de;

    /* 文字を小さく・薄くして「補助情報」であることを示す */
    font-size: 0.85rem;
    color: #666;

    /* 中央寄せ。ヘッダーが左寄せなので、対比がつく */
    text-align: center;
}

/* フッター内の p の既定マージンを消す */
.site-footer p {
    margin: 0;
}

/* ============================================
   見出し
   ============================================ */

/* clamp(最小値, 可変値, 最大値)
   画面幅に応じて文字サイズが滑らかに変化する。
   4vw = 画面幅の4%。
   メディアクエリで段階的に切り替えるより自然な変化になる */
h1 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.3;

    /* 上の余白を詰める。
       main 側で padding-block を取っているため二重になるのを防ぐ */
    margin-top: 0;
}

h2 {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
}

/* ============================================
   画像
   将来 <img> を追加したときに画面からはみ出さないようにする。
   レスポンシブ崩れの最頻出原因なので、先に入れておく
   ============================================ */
img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   狭い画面向けの調整
   768px 以下（タブレット縦・スマホ）に適用される。
   viewport の指定が無いと、この分岐は正しく動かない
   ============================================ */
@media (max-width: 768px) {
    .container {
        padding: 12px;
    }

    .site-main {
        padding-block: 24px;
    }
}