/*
================================================
BRUTUS風 はてなブログ デザインCSS
================================================
*/

/* --- 基本設定 --- */
body {
    background-color: #f9f9f9; /* 背景色を少しグレーに */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; /* モダンなフォントを指定 */
}

/* --- ヘッダー --- */
#blog-title {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#blog-title-inner {
    background-image: none !important; /* ヘッダー画像は非表示に */
}

#title a {
    color: #333;
    font-size: 28px;
    font-weight: bold;
    text-decoration: none;
}

#blog-description {
    color: #888;
    font-size: 14px;
}

/* --- レイアウト調整 --- */
/* サイドバーを非表示にし、メインコンテンツを中央に配置 */
#main {
    width: 100%;
    float: none;
}

#box2 {
    display: none; /* サイドバーを非表示 */
}

#content {
    width: 100%;
    max-width: 1200px; /* コンテンツ全体の最大幅 */
    margin: 0 auto;
}

/* --- 記事一覧をグリッドレイアウトに --- */
.archive-entries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 画面幅に応じてカラム数が自動で変わる */
    gap: 24px; /*記事カード間の余白 */
}

/* --- 記事カードのデザイン --- */
.archive-entry {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden; /* 角丸からはみ出た要素を隠す */
    transition: box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.archive-entry:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* ホバー時に影をつける */
}

/* アイキャッチ画像 */
.entry-thumb-link {
    order: -1; /* 画像を一番上に持ってくる */
}

.entry-thumb {
    width: 100%;
    height: 200px; /* 高さを固定 */
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #eee;
}

.archive-entry-header,
.archive-entry-body {
    padding: 16px;
}

.archive-entry-body {
    flex-grow: 1; /* カードの高さを揃えるため */
}

/* 記事タイトル */
.entry-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 8px 0;
}

.entry-title a {
    color: #333;
    text-decoration: none;
}

.entry-title a:hover {
    color: #000;
}

/* 日付 */
.date.archive-date {
    font-size: 12px;
    color: #999;
    margin-bottom: 12px;
}
.date.archive-date a,
.date.archive-date a:hover {
    color: #999;
}


/* 概要文 */
.entry-description {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* カテゴリー */
.categories {
    padding: 0 16px; /* 上下のpaddingをリセット */
    margin-top: -10px; /* 少し上に詰める */
    margin-bottom: 16px;
}

.categories a {
    display: inline-block;
    background-color: #eee;
    color: #777;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 3px;
    margin-right: 5px;
    text-decoration: none;
}

.categories a:hover {
    background-color: #ddd;
}

/* --- フッター --- */
#footer {
    text-align: center;
    padding: 40px 0;
    color: #aaa;
}

#footer a {
    color: #aaa;
}

/* --- スマートフォン表示の調整 --- */
@media screen and (max-width: 768px) {
    .archive-entries {
        grid-template-columns: 1fr; /* 1カラムにする */
        gap: 16px;
    }

    #title a {
        font-size: 24px;
    }
}

/*
================================================
【追記】BRUTUS風 記事詳細ページ用CSS
================================================
*/

/* --- 記事詳細ページの基本レイアウト --- */
.page-entry #main {
    padding: 20px 0; /* 上下の余白 */
}

/* 記事全体を囲むコンテナ */
.page-entry .entry {
    max-width: 800px; /* 記事の最大幅を指定 */
    margin: 0 auto;   /* 中央寄せ */
    background-color: #fff;
    border: 1px solid #eee;
    padding: 40px;
    box-sizing: border-box;
}

/* --- 記事ヘッダー --- */
.page-entry .entry-header {
    margin-bottom: 30px;
    text-align: center; /* ヘッダー情報を中央寄せ */
}

/* 投稿日 */
.page-entry .entry-header .date a {
    color: #888;
    font-size: 14px;
    text-decoration: none;
}

/* 記事タイトル */
.page-entry .entry-title {
    font-size: 32px; /* タイトルを大きく */
    font-weight: bold;
    line-height: 1.4;
    margin: 10px 0 20px 0;
}
.page-entry .entry-title a {
    color: #333;
    text-decoration: none;
}


/* カテゴリー */
.page-entry .entry-categories {
    padding: 0;
}
.page-entry .entry-categories a {
    font-size: 12px;
}


/* --- 記事本文 --- */
.entry-content {
    font-size: 16px;  /* 本文のフォントサイズ */
    line-height: 1.8; /* 行間を広めに */
    color: #333;
}

/* 本文中の見出し (h2, h3, h4) */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-weight: bold;
    margin-top: 2.5em;
    margin-bottom: 1.5em;
    border-bottom: 2px solid #333;
    padding-bottom: 0.4em;
}

.entry-content h2 {
    font-size: 1.6em; /* 25.6px */
}

.entry-content h3 {
    font-size: 1.4em; /* 22.4px */
    border-bottom: 1px solid #ccc;
}

.entry-content h4 {
    font-size: 1.2em; /* 19.2px */
    border-bottom: none;
}

/* 本文中のリンク */
.entry-content a {
    color: #1a0dab;
    text-decoration: none;
    border-bottom: 1px solid #1a0dab;
}
.entry-content a:hover {
    color: #fff;
    background-color: #1a0dab;
}


/* 本文中の画像 */
.entry-content .hatena-fotolife,
.entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 30px auto; /* 画像の上下に余白 */
    border-radius: 4px;
}

/* --- 記事フッター --- */
.entry-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 14px;
    color: #888;
}

/* SNSシェアボタン */
.social-buttons {
    margin-top: 20px;
    padding-bottom: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

/* --- 前後の記事へのページャー --- */
.pager-permalink {
    display: flex;
    justify-content: space-between;
    margin: 40px auto;
    max-width: 800px;
    padding: 0;
}

.pager-permalink a {
    display: block;
    padding: 15px;
    width: 48%;
    border: 1px solid #eee;
    background-color: #fff;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s;
}

.pager-permalink a:hover {
    background-color: #f9f9f9;
}

.pager-prev {
    text-align: left;
}
.pager-next {
    text-align: right;
}

/* --- スマートフォン表示の調整 --- */
@media screen and (max-width: 768px) {
    .page-entry .entry {
        padding: 20px;
    }

    .page-entry .entry-title {
        font-size: 24px;
    }

    .entry-content {
        font-size: 15px;
        line-height: 1.7;
    }

    .pager-permalink {
        flex-direction: column;
        gap: 10px;
    }
    .pager-permalink a {
        width: 100%;
        box-sizing: border-box;
    }
}