body {
    background: url("ブログ/ぶろぐ背景.jpg") no-repeat center center fixed;
  background-size: cover;      /* ← 画面いっぱいに引き延ばす */
  background-position: center; /* ← 中央に配置 */
  background-repeat: no-repeat;/* ← 繰り返しなし */
  background-attachment: fixed;/* ← スクロールしても固定（任意） */
    color: #fff;
    font-family: "TMP";
    margin: 0;
    padding: 20px;
}

/* =============================
   グリッドレイアウト
============================= */
.container {
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: auto auto 1fr; /* ← 左下は 1fr で伸びる */
    gap: 30px;
    height: 90vh; /* 画面にフィットする高さ */
}

/* =============================
   左上の画像
============================= */
.left-top img {
    width: 100%;
    height: auto;
    border: 2px solid #666;
    background-color: rgba(0, 0, 0, 0.85); /* 真っ黒 or 85%の不透明度 */
    backdrop-filter: blur(2px);            /* 任意：背景画像を少しぼかす */
    border: 2px solid #666;
}

/* =============================
   天使のまねごと屋さんエリア
============================= */
.left-box {
    border: 2px solid #666;
    padding: 20px;
    font-size: 26px;
    line-height: 1.4;
    height: auto; /* ← 右側に引っ張られない */
    background-color: rgba(0, 0, 0, 0.85); /* 真っ黒 or 85%の不透明度 */
    backdrop-filter: blur(2px);            /* 任意：背景画像を少しぼかす */
    border: 2px solid #666;
}

.left-box-title {
    border-bottom: none; /* ← アンダーライン消す */
}

/* =============================
   左下の最近の投稿（スクロールあり）
============================= */
.left-bottom {
    border: 2px solid #666;
    padding: 20px;
    width: 280px;
    overflow-y: auto;      /* ← スクロールバー出る */
    max-height: 100%;      /* ← 左下の枠の最大サイズ */
    background-color: rgba(0, 0, 0, 0.85); /* 真っ黒 or 85%の不透明度 */
    backdrop-filter: blur(2px);            /* 任意：背景画像を少しぼかす */
    border: 2px solid #666;
}

.lb-title {
    font-size: 22px;
    margin-bottom: 10px;
    border-bottom: 1px solid #999;
    padding-bottom: 6px;
}

.lb-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.lb-list li {
    margin-bottom: 8px;
    font-size: 18px;
}

.lb-list a {
    text-decoration: none;
    color: #fff;
}

/* =============================
   右側コンテンツ（スクロール付き）
============================= */
.right-content {
    grid-column: 2 / 3;
    grid-row: 1 / 4; /* ← 右は1〜3行をまたぐので独立 */
    border: 2px solid #666;
    padding: 20px;

    overflow-y: auto;      /* ← 記事が長いとスクロール */
    max-height: 90vh;      /* ← 画面内に収める */
    background-color: rgba(0, 0, 0, 0.85); /* 真っ黒 or 85%の不透明度 */
    backdrop-filter: blur(2px);            /* 任意：背景画像を少しぼかす */
    border: 2px solid #666;
}

.blog-title {
    font-size: 24px;
    border-bottom: 1px solid #999;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.blog-body {
    font-size: 16px;
    line-height: 1.7;
}


/* 画面幅が 768px 以下のとき（スマホ/タブレット） */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;  /* ← 1カラムに切り替え */
        grid-template-rows: auto auto auto auto; /* 全部縦並び */
        height: auto; /* 高さ固定を解除 */
    }

    .right-content {
        grid-column: 1 / 2;
        grid-row: auto;
        max-height: none; /* スクロール領域解除 */
    }

    .left-bottom {
        max-height: none;
    }
}