/* style.css - シンプル日記のスタイル */

/* 1. 全体設定 (Body) */
body {
    /* 背景色: 薄いグレー */
    background-color: #f0f0f0; 
    /* 基本の文字色: 濃いグレー */
    color: #333333; 
    
    font-family: sans-serif;
    margin: 0 auto;
    max-width: 800px; /* 日記の最大幅 */
    padding: 20px;
}

/* 2. ヘッダー (タイトル) */
header {
    text-align: center;
    padding: 20px 0;
}

h1 {
    /* メインタイトルはそのまま濃いグレー */
    color: #333333;
    font-size: 2em;
    font-weight: normal;
}

/* 3. 日記エントリのコンテナ */
.diary-entry {
    margin-bottom: 40px;
    padding: 20px;
    /* 日記エントリ自体の背景を白にすると、薄いグレーの背景とコントラストがついて見やすくなります */
    background-color: #f0f0f0; 
    border-radius: 5px;
}

/* 4. 日付 (H2) のスタイル */
.diary-entry h2 {
    /* 日付のフォントサイズを本文より少しだけ大きく、目立ちすぎないように */
    font-size: 1.2em; 
    /* 太さを標準に戻す */
    font-weight: normal; 
    color: #333333; 
    
    /* 下線やパディングを削除 */
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 0; /* 上部の余白を削除 */
    margin-bottom: 15px; /* 下部に少し余白 */
}

/* 5. 本文 (P) のスタイル */
p {
    line-height: 1.6; /* 行間を広げて読みやすくする */
    margin-top: 0;
    margin-bottom: 15px;
}

/* 6. 区切り線 (HR) のスタイル */
hr {
    border: 0;
    height: 1px;
    background: #cccccc; /* やや薄めの線 */
    margin: 40px 0; /* 上下に広い余白 */
}

/* 7. リンク (A) のスタイル */
a {
    color: #888888;
    text-decoration: none; /* デフォルトの下線を消す */
}
a:hover {
    text-decoration: underline; /* マウスオーバー時に下線を出す */
}

/* 8. フッター */
footer {
    text-align: center;
    padding: 20px 0;
    color: #aaaaaa; /* フッターの文字色は薄くする */
    font-size: 0.8em;
}

/* 8. 引用 */
blockquote {
    /* 左マージンで全体をインデント */
    margin-left: 3em;
    /* 右側も少し内側に入れる */
    margin-right: 3em;
}

/* 9. スマートフォン対応 (@media query) */
@media (max-width: 600px) {
    
    /* 1. 全体のパディングを調整 */
    body {
        padding: 10px; 
        /* ★★★ 本文のベースサイズを大きくするならここも調整できます ★★★ */
        /* 例: 16px は一般的な標準サイズです */
        font-size: 16px; 
    }

    /* 2. タイトルのフォントサイズを小さくする */
    h1 {
        font-size: 1.2 em; /* 1.5emから少し大きくして見やすく */
    }
    
    /* 3. 日付のフォントサイズを調整 */
    .diary-entry h2 {
        /* ★★★ 日付をPCサイズ(1.2em)よりも大きく、または同じサイズにする ★★★ */
        font-size: 1em; 
    }

    /* 4. 本文のフォントサイズを調整 (もしbodyで設定したくない場合) */
    p {
        /* ★★★ PCでの設定(通常1em)を維持するか、さらに大きくする ★★★ */
        font-size: 0.8em; /* bodyが16pxなら、本文は16pxで表示されます */
    }

    /* 5. 日記エントリの内部パディングを調整 */
    .diary-entry {
        padding: 15px;
    }

    /* 6. 引用（blockquote）のインデントを減らす */
    blockquote {
        margin-left: 1.5em;
        margin-right: 1.5em;
    }
}