/*
2025年年金制度改正記事用CSSファイル
目的: レスポンシブデザイン、動的要素、モーダル機能の実装
バージョン: 1.2 - span要素含む見出し表示とモーダル表示の修正版
*/

/* ==========================================================================
   基本設定・リセット
   ========================================================================== */

* {
    box-sizing: border-box;
}

/* WordPressテーマとの互換性を保つためのセレクタ */
.main-content,
.post-content .main-content,
.single-post .main-content,
.entry-content .main-content {
    line-height: 1.8;
    color: #2C3E50;
}

.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   記事ヘッダー
   ========================================================================== */

.article-header {
    background: linear-gradient(135deg, #E6F2FA 0%, #F0F4F8 100%);
    padding: 2rem 0;
    margin-bottom: 2rem;
}

.header-content {
    text-align: center;
}

.article-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 1rem 0;
    color: #2C3E50;
    line-height: 1.3;
}

.article-meta {
    display: flex;
    justify-content: center;
    gap: 2rem;
    font-size: 0.9rem;
    color: #666;
    margin-top: 1rem;
}

/* 目次スタイル - 表示確保 */
#table-of-contents-container {
    background: #F9F9F9;
    border: 2px solid #E6F2FA;
    border-radius: 10px;
    padding: 20px;
    margin: 30px 0;
    position: sticky;
    top: 20px;
    z-index: 100;
    display: block !important;
    visibility: visible !important;
}

/* 目次タイトル */
#table-of-contents-container h3 {
    margin: 0 0 15px 0 !important;
    color: #2E86C1 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.table-of-contents {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block !important;
}

.table-of-contents li {
    margin: 8px 0;
    padding-left: 0;
    display: list-item !important;
}

.table-of-contents a {
    text-decoration: none;
    color: #2E86C1;
    font-weight: 500;
    transition: all 0.3s ease;
    display: block;
    padding: 8px 12px;
    border-radius: 5px;
}

.table-of-contents a:hover {
    background: #E6F2FA;
    color: #1B4F72;
    transform: translateX(5px);
}


/* 画像スタイル */
.clickable-image,
.full-screen-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 20px 0;
}

/* --- 6. 目次スタイル (新しいCSSから) --- */
#table-of-contents-container {
    background: #F9F9F9;
    border: 2px solid #E6F2FA;
    border-radius: 10px;
    padding: 20px;
    margin: 30px 0;
    position: sticky;
    top: 20px;
    z-index: 100;
    display: block !important; /* 目次が表示されない問題を強制的に解決 */
    visibility: visible !important; /* 目次が表示されない問題を強制的に解決 */
}

/* 目次タイトル */
#table-of-contents-container h3 {
    margin: 0 0 15px 0 !important;
    color: #2E86C1 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.table-of-contents {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block !important; /* 目次リストが表示されない問題を強制的に解決 */
}

.table-of-contents li {
    margin: 8px 0;
    padding-left: 0;
    display: list-item !important; /* 目次リストアイテムが表示されない問題を強制的に解決 */
}

.table-of-contents a {
    text-decoration: none;
    color: #2E86C1;
    font-weight: 500;
    transition: all 0.3s ease;
    display: block;
    padding: 8px 12px;
    border-radius: 5px;
}

.table-of-contents a:hover {
    background: #E6F2FA;
    color: #1B4F72;
    transform: translateX(5px);
}