/* 基本的なリセットと設定 */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8;
    padding: 1rem 0; /* 上下に少しパディング */
}

/* メインコンテンツエリアのスタイル */
main#content {
    max-width: 800px; /* コンテンツの最大幅 */
    margin: 0 auto;
    padding: 1.5rem 2rem;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- 以下、Markdown要素のスタイルは前回のものと同じ --- */

#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    line-height: 1.3;
    color: #222;
}

#content h1 { font-size: 2em; border-bottom: 1px solid #eee; padding-bottom: 0.3em; }
#content h2 { font-size: 1.6em; border-bottom: 1px solid #eee; padding-bottom: 0.3em; }
#content h3 { font-size: 1.3em; }
#content h4 { font-size: 1.1em; }

#content p {
    margin-bottom: 1em;
}

#content a {
    color: #007bff;
    text-decoration: none;
}

#content a:hover {
    text-decoration: underline;
}

#content ul, #content ol {
    padding-left: 2em;
    margin-bottom: 1em;
}

#content li {
    margin-bottom: 0.5em;
}

#content blockquote {
    border-left: 4px solid #ccc;
    padding-left: 1em;
    margin-left: 0;
    color: #666;
    font-style: italic;
}

#content code {
    background-color: #f0f0f0;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.9em;
}

#content pre {
    background-color: #f0f0f0;
    padding: 1em;
    border-radius: 5px;
    overflow-x: auto; /* コードが長い場合に横スクロール */
}

#content pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 1em; /* pre内のcodeはサイズ調整不要 */
}

#content img {
    /* デフォルト (PC向け): コンテナ幅を超えず、かつ最大幅を600pxに制限 */
    max-width: 100%;      /* コンテナ幅を超えないように */
    display: block;       /* 中央揃えのため */
    margin: 1em auto;     /* 上下にマージン、左右中央揃え */
    height: auto;         /* アスペクト比を維持 */
    border-radius: 4px;
    /* ↓↓↓ PC表示時の画像の最大幅を追加 ↓↓↓ */
    max-width: 500px;     /* PCでの最大幅を600pxに設定 (この値は調整可能) */
}

#content hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 2em 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) { /* タブレットサイズ以下 */
    main#content {
        margin: 0 auto;
        padding: 1rem 1.5rem;
        border-radius: 0;
    }
    body {
        padding: 0;
    }
    #content h1 { font-size: 1.8em; }
    #content h2 { font-size: 1.4em; }

    /* ↓↓↓ タブレット以下で画像幅を調整 ↓↓↓ */
    #content img {
        /* 768px以下では、PCで設定した最大幅(600px)を無視して、
           コンテナ幅いっぱいに表示されるようにする (max-width: 100%が優先される) */
        max-width: 100%; /* 600px制限を解除し、コンテナ幅いっぱいを優先 */
    }
}

@media (max-width: 480px) { /* スマートフォンサイズ */
    body {
        font-size: 15px;
    }
    main#content {
        padding: 1rem;
        border-radius: 0; /* スマホでも角丸なし */
    }
    #content h1 { font-size: 1.6em; }
    #content h2 { font-size: 1.3em; }
    /* スマートフォンでは max-width: 100% が引き続き適用される */
}