/* ======================================================
   1. 記事の文字サイズとソースコードの視認性向上
   ====================================================== */
/* 本文の文字サイズと行間 */
.entry-content {
    font-size: 24px !important; /* 文字を大きく */
    line-height: 1.8 !important;
    color: #333 !important;
}

/* ソースコード（黒背景の技術ブログ風） */
.entry-content pre.code {
    font-size: 20px !important;
    font-family: "Consolas", "Monaco", "Courier New", monospace !important;
    background-color: #2d2d2d !important; /* ダーク背景 */
    color: #f8f8f2 !important;           /* 文字は明るく */
    padding: 1.5em !important;
    border-radius: 8px !important;
    overflow-x: auto !important;         /* 横スクロール対応 */
    line-height: 1.5 !important;
    margin: 20px 0 !important;
}

/* ======================================================
   2. 横幅の制限を解除してフルワイドにする（1カラム化）
   ====================================================== */
/* 画面を構成する全ての親要素の幅を100%にする */
#container, 
#content, 
#content-inner, 
#wrapper, 
#main, 
#main-inner {
    width: 96% !important;        /* 左右にわずかな余白を残して広げる */
    max-width: 1600px !important; /* 広がりすぎ防止（4Kモニタ対策） */
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;       /* 横並びを解除 */
}

/* ======================================================
   3. サイドバーを記事の下に移動して横に並べる
   ====================================================== */
/* サイドバー全体の枠 */
#box2 {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 50px auto 0 !important;
    float: none !important;
    display: flex !important;      /* 中身を横に並べる */
    flex-wrap: wrap !important;    /* 画面幅が狭い時は折り返す */
    justify-content: space-between !important;
    border-top: 2px solid #eee !important;
    padding-top: 30px !important;
}

/* サイドバー内の各項目（最新記事、アーカイブ等） */
#box2 .hatena-module {
    width: 31% !important;         /* 3列に並べる */
    min-width: 300px !important;   /* 狭くなりすぎないように調整 */
    margin-bottom: 40px !important;
}

/* ======================================================
   4. スマートフォン表示の最適化
   ====================================================== */
@media (max-width: 768px) {
    #container, #content, #main {
        width: 100% !important;
    }
    #box2 .hatena-module {
        width: 100% !important;    /* スマホでは1列に戻す */
    }
    .entry-content {
        font-size: 16px !important; /* スマホは少し小さく */
    }
}