@charset "UTF-8";

/* =========================================================
   歴史年表用 スタイル（人物事典風UI ＋ 高密度リストレイアウト）
   ※ 時代ボタンの左寄せ、ツールバーの配置適正化、動的パネルに対応
========================================================= */

/* 基本フォント設定 */
.hs-header-banner,
.hs-period-nav,
.hs-search-container,
.hs-tools-bar,
.hs-filter-panel,
.hs-timeline-section,
.hs-quiz-section,
.hs-footer-actions,
.hs-system-error {
    font-family: 'Meiryo', 'メイリオ', sans-serif;
}

#q_main_content {
    width: 100% !important;
    max-width: 960px;
    margin: 0 auto;
    float: none !important;
}

/* 💡 新設：PHPのインラインスタイルから移動したエラーメッセージ用定義 */
.hs-system-error {
    padding: 40px;
    text-align: center;
    color: #d81b60;
    font-weight: bold;
    background: #fff;
    border-radius: 12px;
    border: 2px solid #f8bbd0;
    margin-bottom: 20px;
}

/* =========================================================
   ① 人物事典風：ヘッダーバナー
========================================================= */
.hs-header-banner {
    text-align: center;
    background: linear-gradient(135deg, #8B5A2B 0%, #DAA520 100%); /* 💡事典と完全に同じグラデーション */
    color: #fff;
    padding: 25px 15px; /* 💡余白をスリム化（35px 20px → 25px 15px） */
    border-radius: 16px; /* 💡角丸を事典と統一 */
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(218, 165, 32, 0.3); /* 💡事典と同じ影 */
    border: 2px solid #FFD700; /* 💡事典と同じゴールドの枠線を追加 */
    position: relative;
}

.hs-main-title {
    font-size: 28px; /* 💡フォントサイズを事典と完全に統一 */
    font-weight: bold;
    margin: 0 0 10px 0;
    color: #FFF8E1; /* 💡文字色を事典と統一 */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

.hs-main-desc {
    font-size: 15px; /* 💡フォントサイズを事典と完全に統一 */
    line-height: 1.5;
    margin: 0 0 20px 0; /* 💡下部のボタンとの余白を最適化 */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.hs-back-btn {
    display: inline-block;
    padding: 8px 20px; /* 💡ボタンの余白を少し縮小してスリムに */
    background-color: #d8657a;
    color: #fff;
    font-weight: bold;
    font-size: 0.9rem; /* 💡文字サイズを少し縮小（約14.4px） */
    border-radius: 25px;
    text-decoration: none;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    transition: all 0.2s;
}

.hs-back-btn:hover {
    background-color: #c05266;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* =========================================================
   ② 人物事典風：検索バー（黄色枠の丸角）
========================================================= */
.hs-search-container {
    max-width: 600px;
    margin: 0 auto 30px auto;
}

.hs-search-form {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 2px solid #fbdc5e;
    border-radius: 30px;
    padding: 8px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.hs-search-icon {
    font-size: 1.2rem;
    color: #555;
    margin-right: 10px;
}

.hs-search-input {
    flex-grow: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    padding: 5px 0;
    color: #333;
    background: transparent;
}
.hs-search-input::placeholder {
    color: #aaa;
}

/* =========================================================
   ③ 人物事典風：時代ボタン（白背景＋左色ボーダー）
========================================================= */
.hs-period-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.hs-period-btn {
    padding: 8px 18px;
    font-size: 0.95rem;
    font-weight: bold;
    color: #333;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-left-width: 4px;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}

.hs-period-btn:hover {
    background-color: #fafafa;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

.hs-period-btn.is-active {
    background-color: #c79a3b;
    color: #fff;
    border-color: #c79a3b;
    border-left-color: #c79a3b;
}

/* 時代ごとの左ボーダーカラー定義 */
.btn-border-all { border-left-color: #999; }
.btn-border-kyusekki, .btn-border-jomon, .btn-border-yayoi { border-left-color: #8d6e63; }
.btn-border-kofun { border-left-color: #5d4037; }
.btn-border-asuka, .btn-border-nara { border-left-color: #8e24aa; }
.btn-border-heian { border-left-color: #ec407a; }
.btn-border-kamakura { border-left-color: #3949ab; }
.btn-border-nanboku, .btn-border-muromachi { border-left-color: #1a237e; }
.btn-border-sengoku, .btn-border-azuchi { border-left-color: #e53935; }
.btn-border-edo { border-left-color: #03a9f4; }
.btn-border-meiji, .btn-border-taisho, .btn-border-showa, .btn-border-heisei, .btn-border-reiwa { border-left-color: #43a047; }


/* =========================================================
   ④ ツールバー（配置順序適正化と要素の左寄せ）
========================================================= */
.hs-tools-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
    padding: 0 5px;
}

/* 表示条件を絞り込むトグルボタン */
.hs-filter-toggle-btn {
    padding: 6px 16px;
    background-color: #fff;
    color: #b3853d;
    border: 1px solid #d4a34b;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
}
.hs-filter-toggle-btn:hover {
    background-color: #fff9e6;
    box-shadow: 0 2px 4px rgba(212, 163, 75, 0.15);
}

/* 解説を表示するチェックボックス */
.hs-toggle-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.95rem;
    color: #555;
    font-weight: bold;
    user-select: none;
}
.hs-toggle-label input {
    margin-right: 6px;
    transform: scale(1.2);
    cursor: pointer;
}

/* 件数表示（最右端配置） */
.hs-count-display {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    margin-left: auto;
}

.hs-count-num {
    font-size: 1.3rem;
    color: #e65100;
}
.hs-count-total {
    color: #777;
}


/* =========================================================
   ⑤ 絞り込みコントロールパネル（スライド開閉対応）
========================================================= */
.hs-filter-panel {
    display: none;
    background-color: #fffdf7;
    border: 2px solid #fbeccf;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.hs-filter-panel.is-open {
    display: block;
    animation: slideDown 0.25s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.hs-filter-group {
    margin-bottom: 15px;
}
.hs-filter-group:last-child {
    margin-bottom: 0;
}

.hs-filter-group-title {
    display: block;
    font-size: 0.95rem;
    font-weight: bold;
    color: #8a6d3b;
    margin-bottom: 10px;
    border-left: 3px solid #c79a3b;
    padding-left: 8px;
}

.hs-checkbox-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding-left: 12px;
}

.hs-filter-cb {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #444;
    cursor: pointer;
    font-weight: bold;
    user-select: none;
}
.hs-filter-cb input {
    margin-right: 6px;
    cursor: pointer;
    transform: scale(1.1);
}


/* =========================================================
   ⑥ 高密度リストレイアウト（年表のコアデザイン）
========================================================= */
.hs-dense-layout {
    background-color: #fff;
    border-top: 2px solid #c79a3b;
    border-bottom: 2px solid #c79a3b;
    padding-left: 0;
    margin-bottom: 40px;
}

.hs-dense-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px dashed #e0e0e0;
    background-color: #fafbfc;
    transition: background-color 0.2s;
}

.hs-dense-row:hover {
    background-color: #fff9e6;
}

.hs-dense-row:nth-child(even) {
    background-color: #ffffff;
}
.hs-dense-row:nth-child(even):hover {
    background-color: #fff9e6;
}

.hs-dense-band {
    width: 15px;
    flex-shrink: 0;
    background-color: #004d40;
}

.hs-dense-date {
    width: 120px;
    flex-shrink: 0;
    padding: 12px 10px;
    color: #1565c0;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.hs-dense-date .d-year { font-size: 1.2rem; }
.hs-dense-date .d-md { font-size: 0.85rem; margin-top: 2px; color: #546e7a; }

.hs-dense-content {
    flex-grow: 1;
    padding: 12px 15px;
}

.hs-dense-title {
    margin: 0;
    line-height: 1.4;
}

.hs-dense-title ruby rt {
    font-size: 0.4em;
    color: #546e7a;
    padding-bottom: 2px;
}


/* =========================================================
   ⑦ 文字色(EVENT_CODE) と 文字サイズ(新PRIORITY)
========================================================= */

/* 【文字色：EVENT_CODEに完全同期】 */
.color-era { color: #00695c; }       /* era: 時代の境界（深緑） */
.color-battle { color: #c62828; }    /* battle: 戦乱・合戦（濃い赤） */
.color-politics { color: #1565c0; }  /* politics: 政治・制度（青） */
.color-incident { color: #ef6c00; }  /* incident: 事件・変・乱（オレンジ） */
.color-event { color: #424242; }     /* event: 文化・行事（ダークグレー） */
.color-birth { color: #ec407a; }     /* birth: 人物の生誕（ピンク） */
.color-death { color: #546e7a; }     /* death: 人物の死去（グレーブラウン） */
.color-position { color: #e65100; }  /* position: 官職・就任・改姓（濃い橙） */

/* 【文字サイズ：新EVENT_PRIORITY(1〜5)に完全同期】 */
.size-1 { font-size: 1.8rem; font-weight: bold; } 
.size-2 { font-size: 1.4rem; font-weight: bold; } 
.size-3 { font-size: 1.05rem; font-weight: bold; } 

.size-4 { font-size: 0.95rem; font-weight: normal; opacity: 0.85; } 
.size-5 { font-size: 0.85rem; font-weight: normal; opacity: 0.75; } 


/* 詳細解説ボックススタイル */
.hs-card-expl.hs-dense-expl {
    margin-top: 8px;
    font-size: 0.9rem;
    color: #455a64;
    line-height: 1.6;
    background-color: #ffffff;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #eaeaea;
    word-break: break-all;
}


/* =========================================================
   ⑧ 関連クイズセクション
========================================================= */
.hs-section-title {
    font-size: 1.25rem;
    color: #c79a3b;
    font-weight: bold;
    margin: 0 0 15px 0;
    border-bottom: 2px solid #fbeccf;
    padding-bottom: 6px;
}

.hs-quiz-section {
    margin-top: 35px;
    margin-bottom: 40px;
}

.hs-quiz-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.hs-quiz-card {
    flex: 1 1 calc(50% - 15px);
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 15px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hs-quiz-card:hover {
    background-color: #fff9e6;
    border-color: #fbdc5e;
    transform: translateY(-2px);
}

.hs-quiz-icon { font-size: 1.8rem; margin-right: 15px; line-height: 1; }
.hs-quiz-info { overflow: hidden; }
.hs-quiz-title {
    font-size: 1.05rem;
    color: #333;
    margin: 0 0 6px 0;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hs-quiz-diff {
    display: inline-block;
    font-size: 0.8rem;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: bold;
}
.diff-easy { background-color: #e8f5e9; color: #2e7d32; }
.diff-normal { background-color: #fff3cd; color: #f57f17; }
.diff-hard { background-color: #ffebee; color: #c62828; }
.diff-unknown { background-color: #f5f5f5; color: #757575; }


/* =========================================================
   ⑨ フッターとレスポンシブ最適化
========================================================= */
.hs-footer-actions {
    margin-top: 20px;
    margin-bottom: 45px;
    text-align: left;
    padding-left: 5px;
}

.hs-scroll-top-btn {
    display: inline-block;
    padding: 10px 22px;
    background-color: #fff;
    color: #666;
    border: 1px solid #ccc;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
}
.hs-scroll-top-btn:hover {
    background-color: #f5f5f5;
    color: #333;
}

.hs-no-data {
    text-align: center;
    padding: 50px 20px;
    color: #78909c;
    background-color: #fff;
    border-radius: 12px;
    border: 2px dashed #ccc;
    font-weight: bold;
}


/* =========================================================
   ⑩ 前後の時代へのナビゲーションボタン
========================================================= */
.hs-period-footer-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 25px;
    padding: 0 5px;
}

.hs-nav-btn {
    display: inline-block;
    padding: 12px 25px;
    background-color: #fff;
    color: #1565c0;
    border: 2px solid #cce4ff;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.hs-nav-btn:hover {
    background-color: #e3f2fd;
    border-color: #90caf9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}


/* =========================================================
   ⑪ 出来事タイトルリンクのカラー固定（★紺色化バグ修正）
========================================================= */
.hs-title-link {
    /* 💡 !importantで他ルールを上書きし、親の .color-xxx（赤・青など）を強制継承 */
    color: inherit !important; 
    text-decoration: none;
    transition: opacity 0.2s ease;
    display: inline-block;
}

.hs-title-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    opacity: 0.85; /* マウスオーバー時にクリック感を演出 */
}


/* =========================================================
   スマホ用メディアクエリ
========================================================= */
@media (max-width: 768px) {
    .hs-tools-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-left: 5px;
    }
    
    .hs-count-display {
        font-size: 0.95rem;
    }

    .hs-search-form { padding: 6px 15px; }

    .hs-checkbox-wrap {
        gap: 10px;
    }
    .hs-filter-cb {
        font-size: 0.85rem;
        width: 100%;
    }

    .hs-dense-row { flex-direction: row; }
    .hs-dense-date { width: 85px; padding: 10px 5px; }
    .hs-dense-date .d-year { font-size: 1.05rem; }
    .hs-dense-date .d-md { font-size: 0.75rem; }
    .hs-dense-content { padding: 10px 10px; }

    .size-1 { font-size: 1.4rem; }
    .size-2 { font-size: 1.15rem; }
    .size-3 { font-size: 0.95rem; }
    .size-4 { font-size: 0.85rem; }
    .size-5 { font-size: 0.8rem; }

    .hs-card-expl.hs-dense-expl { font-size: 0.85rem; padding: 8px 10px; }
    .hs-quiz-card { flex: 1 1 100%; }
    .hs-main-title { font-size: 1.5rem; }

    .hs-period-footer-nav {
        gap: 10px;
    }
    .hs-nav-btn {
        padding: 10px 15px;
        font-size: 0.85rem;
        flex: 1;
        text-align: center;
    }
}

/* =========================================================
   ⑬ 強調キーワード（赤字・リンク）のスタイル
========================================================= */
.hs-keyword-red {
    color: #d32f2f;
    font-weight: bold;
    text-decoration: none;
}

a.hs-keyword-red:hover {
    text-decoration: underline;
}

/* =========================================================
   ⑭ 詳細ページリンク用バッジ
========================================================= */
.hs-detail-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 3px 6px; /* 💡アイコン単体に合うよう左右の余白を少し狭くしました */
    background-color: #f5f5f5;
    color: #1565c0;
    border: 1px solid #cce4ff;
    border-radius: 6px; /* 💡少しだけ丸みを強めてアイコンらしく */
    font-size: 0.85rem; /* 💡アイコンが少し見やすくなるよう微拡大 */
    font-weight: normal;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* リンク全体にマウスオーバーした際、バッジも明るく反応させる */
.hs-title-link:hover .hs-detail-badge {
    background-color: #e3f2fd;
    border-color: #90caf9;
    color: #0b4594;
    transform: translateY(-1px);
}

/* =========================================================
   ⑮ カテゴリ・重要度バッジ（タイトル右側）
========================================================= */
.hs-title-badges-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    vertical-align: middle;
    font-family: 'Meiryo', sans-serif;
}

.hs-badge-category {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    line-height: 1.2;
    letter-spacing: 0.05em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 重要度バッジ専用スタイル */
.hs-badge-priority {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

.hs-badge-priority.priority-1 {
    background: linear-gradient(135deg, #d32f2f, #e53935); /* 目を引く赤グラデーション */
    border: 1px solid #b71c1c;
    box-shadow: 0 2px 4px rgba(211, 47, 47, 0.25);
}

.hs-badge-priority.priority-2 {
    background: linear-gradient(135deg, #f57c00, #ff9800); /* 注意を引くオレンジ */
    border: 1px solid #e65100;
    box-shadow: 0 2px 4px rgba(245, 124, 0, 0.2);
}

/* カテゴリ・バッジ＆帯用の背景色共通定義 */
.hs-badge-bg-era { background-color: #00695c; }
.hs-badge-bg-battle { background-color: #c62828; }
.hs-badge-bg-politics { background-color: #1565c0; }
.hs-badge-bg-incident { background-color: #ef6c00; }
.hs-badge-bg-event { background-color: #616161; }
.hs-badge-bg-birth { background-color: #ec407a; }
.hs-badge-bg-death { background-color: #546e7a; }
.hs-badge-bg-position { background-color: #e65100; }

/* スマホ用調整 */
@media (max-width: 768px) {
    .hs-title-badges-wrap {
        display: block; /* タイトルが長い場合はバッジを下の行へ逃がす */
        margin-left: 0;
        margin-top: 6px;
    }
    .hs-badge-category, .hs-badge-priority {
        font-size: 0.75rem;
        padding: 2px 8px;
    }
}

/* =========================================================
   ⑯ 将来用：歴史イベント関連画像の遅延読み込み(Lazy)用スタイル
========================================================= */
.hs-dense-img-wrap {
    margin-top: 12px;
    max-width: 100%;
    text-align: left;
}

.hs-dense-img {
    max-width: 240px; /* 一覧のレイアウトを邪魔しない心地よいサイズ */
    height: auto;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: block;
}

/* =========================================================
   ⑰ 「もっと見る」ボタンのスタイリング（自動連動対応）
========================================================= */
.hs-more-btn-wrap {
    text-align: center;
    margin: 30px 0;
    padding: 0 5px;
}

.hs-more-btn {
    width: 100%;
    max-width: 420px;
    padding: 14px 25px;
    background: linear-gradient(135deg, #ffffff, #f9f9f6);
    color: #b3853d;
    border: 2px solid #d4a34b;
    border-radius: 30px;
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);
    transition: all 0.25s ease;
    outline: none;
}

.hs-more-btn:hover {
    background: linear-gradient(135deg, #fffdf7, #fff9e6);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(212, 163, 75, 0.2);
}

.hs-more-btn:active {
    transform: translateY(0);
}

/* スマホ表示時の挙動調整（レスポンシブ） */
@media (max-width: 768px) {
    .hs-more-btn {
        max-width: 100%;
        font-size: 1rem;
        padding: 12px 15px;
    }
    .hs-dense-img {
        max-width: 100%; /* モバイル画面では画像を横幅いっぱいにフィット */
    }
}

/* =========================================================
   ⑱ 重要度チェックボックス非活性（disabled）時のグレーアウト表現
========================================================= */
.hs-filter-cb input:disabled {
    cursor: not-allowed;
    opacity: 0.6; /* チェックボックス自体を少し薄くする */
}

/* 選択できないラベルの文字をグレーにして、マウスカーソルを禁止マークにする */
.hs-filter-cb:has(input:disabled) {
    color: #a0aec0 !important; /* 💡文字色を薄いグレーに強制上書き */
    cursor: not-allowed;
    opacity: 0.85;
}