/* ============================================
   Page CSS
   固定ページ（page.php）専用スタイル
   ============================================ */

/* 変数定義 */
:root {
    --color-primary: #2563eb;
    --color-text: #262626;
    --color-text-light: rgba(38, 38, 38, 0.7);
    --color-bg: #ffffff;
    --color-bg-light: #f9f9f9;
    --border-color: #e2e8f0;
    --border-radius: 8px;
}

/* 固定ページの基本スタイル */
main.site-main,
main.ite-main {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    background-color: var(--color-bg-light) !important;
    min-height: calc(100vh - 200px) !important;
}

main.site-main .container,
main.ite-main .container {
    max-width: 1080px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
}

/* 記事コンテナ - 確実に表示されるように */
main.site-main article,
main.site-main article[class*="post-"],
main.site-main article.page,
main.ite-main article,
main.ite-main article[class*="post-"],
main.ite-main article.page {
    max-width: 800px !important;
    margin: 0 auto !important;
    background-color: var(--color-bg) !important;
    padding: 48px !important;
    border-radius: var(--border-radius) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

@media (max-width: 768px) {
    main.site-main article,
    main.site-main article[class*="post-"],
    main.site-main article.page,
    main.ite-main article,
    main.ite-main article[class*="post-"],
    main.ite-main article.page {
        padding: 32px 24px !important;
    }
}

/* エントリーヘッダー - 確実に表示されるように */
main.site-main article .entry-header,
main.site-main article[class*="post-"] .entry-header,
main.site-main article.page .entry-header,
main.ite-main article .entry-header,
main.ite-main article[class*="post-"] .entry-header,
main.ite-main article.page .entry-header {
    text-align: center !important;
    margin-bottom: 40px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid var(--border-color) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/* エントリータイトル - 確実に表示されるように */
main.site-main article .entry-title,
main.site-main article[class*="post-"] .entry-title,
main.site-main article.page .entry-title,
main.site-main article h1.entry-title,
main.ite-main article .entry-title,
main.ite-main article[class*="post-"] .entry-title,
main.ite-main article.page .entry-title,
main.ite-main article h1.entry-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: var(--color-text) !important;
    margin: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

@media (max-width: 768px) {
    main.site-main article .entry-title,
    main.site-main article[class*="post-"] .entry-title,
    main.site-main article.page .entry-title,
    main.site-main article h1.entry-title,
    main.ite-main article .entry-title,
    main.ite-main article[class*="post-"] .entry-title,
    main.ite-main article.page .entry-title,
    main.ite-main article h1.entry-title {
        font-size: 24px !important;
    }
}

/* エントリーコンテンツ - 確実に表示されるように */
main.site-main article .entry-content,
main.site-main article[class*="post-"] .entry-content,
main.site-main article.page .entry-content,
main.ite-main article .entry-content,
main.ite-main article[class*="post-"] .entry-content,
main.ite-main article.page .entry-content {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
    line-height: 1.8 !important;
    color: var(--color-text) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

main.site-main article .entry-content p,
main.site-main article[class*="post-"] .entry-content p,
main.site-main article.page .entry-content p,
main.ite-main article .entry-content p,
main.ite-main article[class*="post-"] .entry-content p,
main.ite-main article.page .entry-content p {
    margin-bottom: 16px !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: var(--color-text) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

main.site-main article .entry-content p:last-child,
main.site-main article[class*="post-"] .entry-content p:last-child,
main.site-main article.page .entry-content p:last-child,
main.ite-main article .entry-content p:last-child,
main.ite-main article[class*="post-"] .entry-content p:last-child,
main.ite-main article.page .entry-content p:last-child {
    margin-bottom: 0 !important;
}

main.site-main article .entry-content h2,
main.site-main article[class*="post-"] .entry-content h2,
main.site-main article.page .entry-content h2,
main.ite-main article .entry-content h2,
main.ite-main article[class*="post-"] .entry-content h2,
main.ite-main article.page .entry-content h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-top: 32px !important;
    margin-bottom: 16px !important;
    color: var(--color-text) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

main.site-main article .entry-content h3,
main.site-main article[class*="post-"] .entry-content h3,
main.site-main article.page .entry-content h3,
main.ite-main article .entry-content h3,
main.ite-main article[class*="post-"] .entry-content h3,
main.ite-main article.page .entry-content h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
    color: var(--color-text) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

main.site-main article .entry-content ul,
main.site-main article .entry-content ol,
main.site-main article[class*="post-"] .entry-content ul,
main.site-main article[class*="post-"] .entry-content ol,
main.site-main article.page .entry-content ul,
main.site-main article.page .entry-content ol,
main.ite-main article .entry-content ul,
main.ite-main article .entry-content ol,
main.ite-main article[class*="post-"] .entry-content ul,
main.ite-main article[class*="post-"] .entry-content ol,
main.ite-main article.page .entry-content ul,
main.ite-main article.page .entry-content ol {
    margin-bottom: 16px !important;
    padding-left: 24px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

main.site-main article .entry-content li,
main.site-main article[class*="post-"] .entry-content li,
main.site-main article.page .entry-content li,
main.ite-main article .entry-content li,
main.ite-main article[class*="post-"] .entry-content li,
main.ite-main article.page .entry-content li {
    margin-bottom: 12px !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: var(--color-text) !important;
    display: list-item !important;
    visibility: visible !important;
    opacity: 1 !important;
}

main.site-main article .entry-content a,
main.site-main article[class*="post-"] .entry-content a,
main.site-main article.page .entry-content a,
main.ite-main article .entry-content a,
main.ite-main article[class*="post-"] .entry-content a,
main.ite-main article.page .entry-content a {
    color: #0073aa !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

main.site-main article .entry-content a:hover,
main.site-main article[class*="post-"] .entry-content a:hover,
main.site-main article.page .entry-content a:hover,
main.ite-main article .entry-content a:hover,
main.ite-main article[class*="post-"] .entry-content a:hover,
main.ite-main article.page .entry-content a:hover {
    color: #005177 !important;
    text-decoration: underline !important;
}

@media (max-width: 768px) {
    main.site-main,
    main.ite-main {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    main.site-main article .entry-content p,
    main.site-main article[class*="post-"] .entry-content p,
    main.site-main article.page .entry-content p,
    main.ite-main article .entry-content p,
    main.ite-main article[class*="post-"] .entry-content p,
    main.ite-main article.page .entry-content p {
        font-size: 14px !important;
    }

    main.site-main article .entry-content li,
    main.site-main article[class*="post-"] .entry-content li,
    main.site-main article.page .entry-content li,
    main.ite-main article .entry-content li,
    main.ite-main article[class*="post-"] .entry-content li,
    main.ite-main article.page .entry-content li {
        font-size: 14px !important;
    }
}