/*
 * あんしん警備保障 - ブログページ用追加CSS（最終形態・強制上書き版）
 * （Arkheデフォルトの構造に対して、色やフォントを強制的にサイトテイストへ合わせる）
 */

/* =========================================================
   1. ベース＆フォント統一
   ========================================================= */
body.blog,
body.archive,
body.single-post,
body.home {
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif !important;
    background-color: #F8FAFC !important;
    color: #111827 !important;
    -webkit-font-smoothing: antialiased !important;
    padding-top: 100px !important;
    /* 固定ヘッダーに隠れないための全体の余白追加 */
}

/* =========================================================
   2. アーカイブ（ブログ一覧）と記事カード
   ========================================================= */
.p-archive__title,
.c-pageTitle__main {
    color: #0F766E !important;
    font-weight: 800 !important;
    font-size: 1.8rem !important;
    position: relative !important;
    padding-bottom: 0.8rem !important;
    margin-bottom: 2rem !important;
    text-align: left !important;
}

.p-archive__title::after,
.c-pageTitle__main::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 60px !important;
    height: 4px !important;
    background-color: #FF6B6B !important;
    border-radius: 2px !important;
}

.c-entries__item {
    background-color: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border: none !important;
    margin-bottom: 1.5rem !important;
}

.c-entries__item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.c-entries__title {
    font-weight: 800 !important;
    color: #0B1F3B !important;
    font-size: 1.2rem !important;
    margin-bottom: 0.5rem !important;
}

.c-entries__item:hover .c-entries__title {
    color: #0F766E !important;
}

.c-catData__item {
    background-color: #0F766E !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
}

/* =========================================================
   3. 記事の詳細ページ（シングル）の見出し・本文調整
   ========================================================= */
.p-entry__body,
.post_content {
    color: #111827 !important;
    line-height: 1.8 !important;
}

.p-entry__body h2,
.post_content h2 {
    background-color: #F0FDFA !important;
    /* 薄いTeal */
    border-left: 6px solid #0F766E !important;
    padding: 1.25rem 1.5rem !important;
    font-weight: 800 !important;
    color: #0F766E !important;
    border-radius: 0 8px 8px 0 !important;
    margin-top: 3.5rem !important;
    margin-bottom: 1.5rem !important;
    font-size: 1.5rem !important;
}

.p-entry__body h3,
.post_content h3 {
    border-bottom: 2px solid #0F766E !important;
    padding-bottom: 0.5rem !important;
    font-weight: 800 !important;
    color: #0B1F3B !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1.2rem !important;
    font-size: 1.3rem !important;
}

body.blog .l-main a,
body.archive .l-main a,
body.single-post .l-main a,
body.home .l-main a {
    color: #0F766E !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

body.blog .l-main a:hover,
body.archive .l-main a:hover,
body.single-post .l-main a:hover,
body.home .l-main a:hover {
    color: #FF6B6B !important;
}

/* =========================================================
   4. サイドバー・ウィジェット（右カラム）
   ========================================================= */
.l-sidebar .c-widget {
    background: #FFFFFF !important;
    padding: 1.5rem !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    margin-bottom: 2rem !important;
}

.l-sidebar .c-widget__title {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #0F766E !important;
    border-bottom: 2px solid #0F766E !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1.25rem !important;
}

/* =========================================================
   5. ブログ・投稿ページのメインコンテナ幅制限
   （Tailwindに上書きされないよう強度を高める）
   ========================================================= */

/* ブログ一覧（.blog）、アーカイブ（.archive）、単一記事（.single-post）のメインラッパー */
body.blog .l-content,
body.archive .l-content,
body.single-post .l-content,
body.blog .c-container,
body.archive .c-container,
body.single-post .c-container {
    max-width: 1000px !important;
    /* ※サイドバーとあわせて適切な幅に調整（元サイトに合わせて1000〜1200px） */
    margin: 0 auto !important;
    padding: 0 5% !important;
    /* 左右に少し余白 */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* メイン（左エリア）側の最大幅調整とFlex調整（もしArkheのカラム設定が生きている場合） */
@media (min-width: 960px) {

    /* 1カラム構成に強制変更（サイドバー非表示） */
    body.blog .l-main,
    body.archive .l-main,
    body.single-post .l-main {
        width: 100% !important;
    }

    body.blog .l-sidebar,
    body.archive .l-sidebar,
    body.single-post .l-sidebar {
        display: none !important;
    }
}