@charset "UTF-8";

body {
    background-color: #000000;
    color: #cccccc;
    font-family: "MS PGothic", "MS Gothic", "Osaka", sans-serif;
    font-size: 13px; /* 当時の標準サイズ */
    line-height: 1.4;
    margin: 20px;
}

/* リンクの色（画像内の青いリンク色に合わせる） */
a { color: #6666ff; text-decoration: underline; }
a:visited { color: #cc99ff; }
a:hover { color: #ffffff; text-decoration: none; }

.container {
    max-width: 800px;
    margin: 0 auto;
}

/* === ここからが画像のデザイン再現 === */

/* 全体を囲む枠（テーブルの外枠に相当） */
.log-box {
    border: 1px solid #888888; /* 明るめのグレーの枠線 */
    margin-bottom: 20px; /* 記事ごとの間隔 */
}

/* ヘッダー部分（濃いグレーの背景） */
.log-header {
    display: flex; /* 横並びにする */
    background-color: #333333; /* 画像のような濃いグレー */
    border-bottom: 1px solid #888888; /* 本文との境界線 */
}

/* 日付とタイトル */
.log-title {
    flex-grow: 1; /* 余白を埋める */
    padding: 2px 5px;
    color: #aaccff; /* 画像のような淡い青紫 */
    font-weight: bold;
}

/* カテゴリ（右側の枠） */
.log-category {
    padding: 2px 8px;
    color: #dddddd;
    border-left: 1px solid #888888; /* タイトルとの境界線 */
    white-space: nowrap; /* 改行させない */
    min-width: 50px; /* 最低限の幅確保 */
    text-align: center;
}

/* 記事本文（黒背景） */
.log-body {
    background-color: #000000;
    color: #cccccc;
    padding: 5px; /* テキストが枠にくっつかないように */
}

/* ヘッダー（サイトタイトル）等はシンプルに */
.site-header h1 {
    color: #fff;
    border-left: 5px solid #0000cc;
    padding-left: 10px;
    margin-bottom: 20px;
}
.menu-bar { margin-bottom: 20px; text-align: right; font-size: 12px;}

/*.page-bar { margin-bottom: 20px; text-align: right; font-size: 12px;} */