/* =========================================================
   セキュリティ事件簿 共通スタイル（style.css）
   - 全ページで読み込む共通デザインです
   - ブランドカラー：濃い青 #1A5276 / アクセント赤 #C0392B
   - フォント：Noto Sans JP
   ========================================================= */

/* === リセット＆ベース === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
    line-height: 1.85;
    color: #333;
    background-color: #f8f9fa;
}

a { color: #1A5276; }

/* === サイト共通ヘッダー（全ページ上部の帯） === */
.site-bar {
    background: #1A5276;
    color: #fff;
}
.site-bar__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.site-bar__logo {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.02em;
}
.site-bar__logo span { color: #f5b7b1; }
.site-bar__nav a {
    color: #eaf2f8;
    text-decoration: none;
    margin-left: 18px;
    font-size: 0.9rem;
}
.site-bar__nav a:hover { text-decoration: underline; }

/* === レイアウト === */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 24px 60px;
    background-color: #fff;
    min-height: 100vh;
}

/* === パンくずリスト === */
.breadcrumb {
    font-size: 0.8rem;
    color: #888;
    margin: 16px 0 8px;
}
.breadcrumb a { color: #1A5276; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* === ページヘッダー === */
.page-header {
    padding: 24px 0 28px;
    border-bottom: 3px solid #1A5276;
    margin-bottom: 28px;
}
.page-header h1 {
    font-size: 1.85rem;
    color: #1A5276;
    margin-bottom: 10px;
    line-height: 1.5;
}
.page-header .subtitle {
    font-size: 0.95rem;
    color: #666;
}
.page-header.center { text-align: center; }

/* === 種別バッジ === */
.badge {
    display: inline-block;
    background: #1A5276;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
}
.badge.red { background: #C0392B; }
.badge.outline {
    background: #eaf2f8;
    color: #1A5276;
    border: 1px solid #b9d4e6;
}

/* === 見出し === */
h2 {
    font-size: 1.4rem;
    color: #1A5276;
    border-left: 5px solid #1A5276;
    padding-left: 14px;
    margin: 40px 0 16px;
}
h3 {
    font-size: 1.12rem;
    color: #2C3E50;
    margin: 26px 0 12px;
    padding-bottom: 4px;
    border-bottom: 1px dashed #cdd7df;
}

/* === 本文 === */
p { margin-bottom: 16px; font-size: 1rem; }

/* === 強調 === */
.highlight { color: #C0392B; font-weight: bold; }
strong { color: #1A5276; }

/* === テーブル === */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.92rem;
}
th {
    background-color: #1A5276;
    color: #fff;
    padding: 11px 13px;
    text-align: left;
    vertical-align: top;
}
td {
    padding: 11px 13px;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
}
tr:nth-child(even) td { background-color: #f5f7fa; }

/* 事件サマリー表（左に項目名） */
.summary-table th {
    width: 28%;
    background: #2C3E50;
}

/* === リスト === */
ul, ol { margin: 12px 0 20px 24px; }
li { margin-bottom: 8px; }

/* === 目次 === */
.toc {
    background: #f5f7fa;
    border: 1px solid #e0e6ec;
    border-radius: 8px;
    padding: 18px 22px;
    margin: 24px 0;
}
.toc h2 {
    border: none;
    padding: 0;
    margin: 0 0 10px;
    font-size: 1.1rem;
}
.toc ol { margin: 0 0 0 20px; }
.toc a { color: #1A5276; text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* === グラフエリア === */
.chart-container {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin: 24px 0;
}
.chart-container h3 { margin-top: 0; border: none; }

/* === 解説ボックス === */
.commentary {
    background: #eef4f9;
    border-left: 4px solid #1A5276;
    padding: 16px 20px;
    margin: 20px 0;
    border-radius: 0 6px 6px 0;
    font-size: 0.95rem;
    line-height: 1.75;
}

/* === ポイントボックス === */
.note-box {
    background: #fff8e6;
    border: 1px solid #f0c040;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 0.92rem;
}
.note-box::before {
    content: "💡 ポイント";
    font-weight: bold;
    display: block;
    margin-bottom: 6px;
    color: #b8860b;
}

/* === 注意（赤）ボックス === */
.warn-box {
    background: #fdecea;
    border: 1px solid #e6a8a0;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 0.92rem;
}
.warn-box::before {
    content: "⚠️ ここに注意";
    font-weight: bold;
    display: block;
    margin-bottom: 6px;
    color: #C0392B;
}

/* === 対策チェックリスト === */
.checklist { list-style: none; margin-left: 0; }
.checklist li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
}
.checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #1A5276;
    font-weight: bold;
    font-size: 1.1rem;
}

/* === 事件カード（一覧用） === */
.category-block { margin: 40px 0; }
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.incident-card {
    display: block;
    border: 1px solid #e0e6ec;
    border-radius: 10px;
    padding: 18px 20px;
    text-decoration: none;
    color: #333;
    background: #fff;
    transition: box-shadow .15s, transform .15s;
}
.incident-card:hover {
    box-shadow: 0 4px 14px rgba(26,82,118,.15);
    transform: translateY(-2px);
}
.incident-card .year {
    font-size: 0.8rem;
    color: #C0392B;
    font-weight: 700;
}
.incident-card h3 {
    font-size: 1.08rem;
    color: #1A5276;
    margin: 4px 0 8px;
    border: none;
    padding: 0;
}
.incident-card p {
    font-size: 0.88rem;
    color: #555;
    margin: 0;
    line-height: 1.6;
}

/* === 関連記事 === */
.related {
    background: #f5f7fa;
    border-radius: 8px;
    padding: 18px 22px;
    margin: 32px 0;
}
.related h2 { border: none; padding: 0; margin: 0 0 10px; font-size: 1.15rem; }
.related ul { margin: 0 0 0 20px; }

/* === 広告エリア === */
.ad-area { text-align: center; margin: 30px 0; min-height: 90px; }

/* === フッター === */
.page-footer {
    text-align: center;
    padding: 30px 0 20px;
    margin-top: 48px;
    border-top: 1px solid #ddd;
    font-size: 0.85rem;
    color: #888;
}
.page-footer a { color: #1A5276; text-decoration: none; }

/* === 免責ボックス === */
.disclaimer {
    font-size: 0.8rem;
    color: #999;
    background: #f5f5f5;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 24px 0;
    line-height: 1.6;
}

/* === レスポンシブ === */
@media (max-width: 600px) {
    .container { padding: 12px 16px 40px; }
    .page-header h1 { font-size: 1.45rem; }
    h2 { font-size: 1.18rem; }
    table { font-size: 0.82rem; }
    th, td { padding: 8px; }
    .site-bar__nav a { margin-left: 12px; }
}