@charset "UTF-8";
/*
Theme Name:  SQLite Minimal Tech Theme
Author:      Your Name
Description: SQLite環境に最適化した、横幅1000pxの超軽量プログラミングブログ用自作テーマ。
Version:     1.2.0
*/

/* ==========================================
   --- 1. 全体の共通基本設定 ---
   ========================================== */
body {
    background-color: #f4f5f7; /* Cocoon風の淡いグレー背景 */
    color: #333333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.7;
}

a {
    color: #2096f3; /* 鮮やかな青 */
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 💡 メインコンテンツの包み枠（最大幅を1000pxに統一） */
.container,
.main-layout-container,
.page-layout-container {
    max-width: 1000px !important;
    margin: 30px auto;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative; /* 💡 ボタンをメニューバー直下に位置指定するための基準点 */
}

.main-content-area, .page-content-area {
    width: 100%;
}

/* ==========================================
   --- 2. ヘッダー ＆ メニューバー（最大幅1000px） ---
   ========================================== */
.site-header {
    background-color: #ffffff; /* ヘッダー全体の白帯 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

.header-container {
    max-width: 1000px !important;
    margin: 0 auto;
    padding: 30px 20px 25px 20px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
}

.site-title {
    margin: 0;
    font-size: 2.2em;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.site-title a {
    color: #333333;
}
.site-title a:hover {
    color: #2096f3;
}
.site-description {
    margin: 8px 0 0 0;
    font-size: 0.85em;
    color: #777777;
}

/* グローバルナビゲーション */
.global-nav {
    background-color: #f8f9fa; /* メニューバーのグレー帯 */
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
}

.nav-container {
    max-width: 1000px !important;
    margin: 0 auto;
    box-sizing: border-box;
}

.global-menu-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.global-menu-ul li a {
    display: block;
    padding: 12px 24px;
    color: #444444;
    font-size: 0.95em;
    font-weight: 600;
}
.global-menu-ul li a:hover {
    color: #2096f3;
    background-color: #ffffff;
}

/* ==========================================
   --- 3. トップページ：記事一覧（カード型） ---
   ========================================== */
.post-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.post-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.list-thumb-left {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 4px;
    background: #e2e8f0;
}
.list-thumb-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}
.list-thumb-left img:hover {
    opacity: 0.8;
}
.no-image-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a0aec0;
    font-size: 0.85em;
    font-weight: bold;
}

.list-content-right {
    flex: 1;
    min-width: 0;
}
.list-content-right h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.25em;
}
.post-excerpt-text p {
    margin: 0;
    font-size: 0.9em;
    color: #555555;
}

/* ==========================================
   --- 4. 記事詳細 ＆ 本文囲み枠（Cocoon風見出し） ---
   ========================================== */
.single-post-wrapper {
    background: #ffffff;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.entry-content h2 {
    padding: 0.6em 0.8em;
    background: #ffffff;
    border-left: 6px solid #2096f3;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    font-size: 1.4em;
    margin-top: 2em;
    margin-bottom: 1em;
}

.entry-content h3 {
    padding: 0.4em 0;
    border-bottom: 2px solid #2096f3;
    font-size: 1.2em;
    margin-top: 1.8em;
    margin-bottom: 0.8em;
}

.single-thumb {
    margin-bottom: 25px;
    border-radius: 4px;
    overflow: hidden;
}
.single-thumb img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
}

.single-body-box {
    background: #ffffff;
    padding: 30px;
    border: 1px solid #e3e7ec;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    margin-bottom: 30px;
}

/* ==========================================
   --- 5. 文字装飾 ＆ メッセージボックス ---
   ========================================== */
.marker-yellow { background: linear-gradient(transparent 60%, #fff27e 60%); font-weight: bold; }
.marker-pink { background: linear-gradient(transparent 60%, #ffc0cb 60%); font-weight: bold; }
.marker-blue { background: linear-gradient(transparent 60%, #b3dbff 60%); font-weight: bold; }

.msg-box { position: relative; padding: 20px; margin: 25px 0; border-radius: 6px; font-size: 0.95em; line-height: 1.6; }
.msg-box p:first-child { margin-top: 0; }
.msg-box p:last-child { margin-bottom: 0; }
.msg-box-info { background-color: #ebf6ff; border-left: 5px solid #2096f3; color: #1a365d; }
.msg-box-warn { background-color: #fff1f0; border-left: 5px solid #ff4d4f; color: #5c0011; }
.msg-box-success { background-color: #f6ffed; border-left: 5px solid #52c41a; color: #135200; }

/* ==========================================
   --- 6. ソースコード表示（右上ラベル・VS Code風） ---
   ========================================== */
.entry-content pre {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 20px;
    margin: 25px 0;
    border-radius: 6px;
    border: 1px solid #333333;
    overflow-x: auto;
    word-break: normal;
    white-space: pre;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, "Noto Sans JP", monospace;
    font-size: 0.9em;
    line-height: 1.6;
    position: relative;
}
.entry-content pre code { font-family: inherit; color: inherit; background: none; padding: 0; }

.entry-content pre[class^="lang-"]::before,
.entry-content pre[class*=" lang-"]::before {
    position: absolute; top: 0; right: 0; background: #333333; color: #aaaaaa;
    padding: 4px 10px; font-size: 0.75em; font-weight: bold; border-radius: 0 5px 0 5px; text-transform: uppercase;
}
.entry-content pre.lang-html::before { content: "HTML"; }
.entry-content pre.lang-css::before { content: "CSS"; }
.entry-content pre.lang-js::before { content: "JavaScript"; }
.entry-content pre.lang-php::before { content: "PHP"; }
.entry-content pre.lang-py::before { content: "Python"; }
.entry-content pre.lang-sql::before { content: "SQL"; }

.ad-banner-space {
    background: #fafafa; border: 1px dashed #ccc; padding: 10px; text-align: center; margin: 20px 0; font-size: 0.8em; color: #999;
}

/* ==========================================
   --- 7. おすすめの関連記事エリア ---
   ========================================== */
.related-posts-area { margin-top: 40px; background: #ffffff; padding: 25px; border-radius: 6px; border: 1px solid #e3e7ec; }
.related-title { font-size: 1.25em; font-weight: 700; margin-top: 0; margin-bottom: 20px; padding-bottom: 8px; border-bottom: 2px solid #2096f3; }
.related-posts-list { display: flex; flex-direction: column; gap: 15px; }
.related-card { display: flex; gap: 15px; align-items: center; padding-bottom: 15px; border-bottom: 1px dashed #e2e8f0; }
.related-card:last-child { border-bottom: none; padding-bottom: 0; }
.related-thumb { flex-shrink: 0; width: 80px; height: 80px; overflow: hidden; border-radius: 4px; background: #e2e8f0; }
.related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.related-content h3 { margin: 0 0 5px 0; font-size: 1em; line-height: 1.4; }
.related-date { font-size: 0.8em; color: #888888; }

/* ==========================================
   --- 8. サイドバーウィジェット共通設定 ---
   ========================================== */
.nav-toggle-checkbox { display: none; }

.widget-box {
    background: #ffffff; padding: 20px; margin-bottom: 20px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.widget-title { font-size: 1.1em; font-weight: 700; margin-top: 0; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #2096f3; }
.widget-box ul { list-style: none; padding: 0; margin: 0; }
.widget-box li { padding: 8px 0; border-bottom: 1px dashed #e0e0e0; font-size: 0.9em; }

/* ==========================================
   --- 9. フッターエリア（最大幅1000px） ---
   ========================================== */
.site-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #e3e7ec;
    color: #555555;
    margin-top: 60px;
    padding: 30px 0 20px 0;
}

.footer-container {
    max-width: 1000px !important;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    box-sizing: border-box;
}

.footer-menu-ul { list-style: none; margin: 0 0 20px 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 20px; }
.footer-menu-ul li a { color: #666666; font-weight: 600; font-size: 0.85em; }
.footer-menu-ul li a:hover { color: #2096f3; }
.footer-copyright { font-size: 0.8em; color: #888888; }
.footer-copyright a { color: #888888; }
.footer-copyright a:hover { color: #2096f3; }
.footer-home-link a:hover { color: #2096f3 !important; text-decoration: underline !important; }

/* ==========================================
   --- 10. レスポンシブ：PC表示（画面幅769px以上） ---
   ========================================== */
@media (min-width: 769px) {
    /* 💡 【バグ修正】固定ページ（.page）とカテゴリーページ（.category）「以外」のみを完全な2カラムにする */
    body:not(.page):not(.category) .main-layout-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }
    
    body:not(.page):not(.category) .main-content-area {
        width: 68% !important;
        margin: 0 !important;
    }
    
    body:not(.page):not(.category) .site-sidebar {
        display: block !important;
        position: static !important;
        width: 29% !important;
        height: auto !important;
        visibility: visible !important;
        background: none !important;
        box-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    
    body:not(.page):not(.category) .sidebar-widgets {
        width: 100% !important;
        max-height: none !important;
        padding: 0 !important;
        overflow-y: visible !important;
        background: none !important;
        box-shadow: none !important;
    }
    
    /* 2カラム表示のときは右上の三本線ボタンを確実に隠す */
    body:not(.page):not(.category) .hamburger-btn {
        display: none !important;
    }
}

/* ==========================================
   --- 11. レスポンシブ：スマホ表示（画面幅768px以下） ---
   ========================================== */
@media (max-width: 768px) {
    .main-layout-container {
        flex-direction: column !important;
    }
    .post-card { padding: 15px; gap: 15px; }
    .list-thumb-left { width: 100px; height: 100px; }
    .list-content-right h3 { font-size: 1.05em; }
    .post-excerpt-text { display: none; }
}

/* ==========================================
   --- 12. 共通：アコーディオンボタン ＆ 引き出しメニュー構造 ---
   ========================================== */

/* 💡 固定ページ（.page）とカテゴリーページ（.category）の時は、PC画面であっても三本線ボタンをメニューバー直下に強制表示 */
.page .hamburger-btn,
.category .hamburger-btn,
@media (max-width: 768px) { .hamburger-btn { display: block !important; } }

.hamburger-btn {
    position: absolute !important;
    top: -5px !important;       /* メニューバー直下に密着 */
    right: 20px !important;     /* 1000pxラインの右端 */
    width: 44px !important;
    height: 44px !important;
    background-color: #f4f5f7 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    z-index: 9999 !important;
}

/* 三本線の描画 */
.hamburger-btn span {
    display: block !important;
    position: absolute !important;
    left: 10px !important;
    width: 24px !important;
    height: 2px !important;
    background-color: #333333 !important;
    border-radius: 1px !important;
    transition: all 0.3s ease !important;
}
.hamburger-btn span:nth-child(1) { top: 14px !important; }
.hamburger-btn span:nth-child(2) { top: 21px !important; }
.hamburger-btn span:nth-child(3) { top: 28px !important; }

/* 変形アニメーション */
.nav-toggle-checkbox:checked ~ .site-header .hamburger-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
.nav-toggle-checkbox:checked ~ .site-header .hamburger-btn span:nth-child(2) { opacity: 0 !important; }
.nav-toggle-checkbox:checked ~ .site-header .hamburger-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

/* 隠しサイドバーの基本構造（固定ページ、カテゴリー、スマホ共通） */
.page .site-sidebar,
.category .site-sidebar,
@media (max-width: 768px) { .site-sidebar { display: block !important; } }

.site-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important; /* 画面右外に隠す */
    width: 100% !important;
    height: 100svh !important; /* 見切れ防止 */
    z-index: 9998 !important;
    transition: all 0.3s ease !important;
    visibility: hidden;
}

/* 引き出すアコーディオンの中身（PC時は幅350px、スマホ時は70%に可変） */
.sidebar-widgets {
    position: relative !important;
    width: 350px !important;
    height: 100% !important;
    max-height: 100svh !important;
    background: #f4f5f7 !important;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1) !important;
    padding: 85px 20px 5px 20px !important; /* 上下5px隙間確保 */
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    margin-left: auto;
}
.sidebar-widgets::after {
    content: "" !important; display: block !important; height: 5px !important; width: 100% !important;
}

@media (max-width: 768px) {
    .sidebar-widgets { width: 70% !important; padding: 80px 20px 120px 20px !important; } /* スマホの下部余白は120px */
    .sidebar-widgets::after { height: 20px !important; }
    .sidebar-close-overlay { width: 30% !important; }
}

/* 閉じるための暗い背景 */
.sidebar-close-overlay {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: calc(100% - 350px) !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.4) !important;
    cursor: pointer !important;
    display: none;
}
.sidebar-content-inner { position: relative !important; width: 100% !important; height: 100% !important; display: flex !important; justify-content: flex-end !important; }

/* ボタンONでアコーディオンを滑り込ませる共通命令 */
.nav-toggle-checkbox:checked ~ .site-sidebar,
.nav-toggle-checkbox:checked ~ .page-layout-container .site-sidebar,
.nav-toggle-checkbox:checked ~ .main-layout-container .site-sidebar {
    right: 0 !important;
    visibility: visible !important;
}
.nav-toggle-checkbox:checked ~ .site-sidebar .sidebar-close-overlay,
.nav-toggle-checkbox:checked ~ .page-layout-container .site-sidebar .sidebar-close-overlay,
.nav-toggle-checkbox:checked ~ .main-layout-container .site-sidebar .sidebar-close-overlay {
    display: block !important;
}

/* ==========================================
   --- 13. 固定ページ用：折りたたみBOX（アコーディオン） ---
   ========================================== */
.page-accordion { background: #ffffff; border: 1px solid #e3e7ec; border-radius: 6px; margin: 15px 0; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.02); transition: all 0.3s ease; }
.page-accordion summary { padding: 15px 20px; font-weight: 700; color: #333333; background-color: #f8f9fa; cursor: pointer; outline: none; position: relative; list-style: none; }
.page-accordion summary::-webkit-details-marker { display: none; }
.page-accordion summary::after { content: "＋"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.1em; color: #2096f3; transition: transform 0.3s ease; }
.page-accordion[open] { border-color: #2096f3; }
.page-accordion[open] summary { background-color: #ebf6ff; color: #2096f3; border-bottom: 1px solid #b3dbff; }
.page-accordion[open] summary::after { content: "－"; }
.accordion-inner-content { padding: 20px; background: #ffffff; font-size: 0.95em; line-height: 1.7; }
.accordion-inner-content p:last-child { margin-bottom: 0; }

/* ==========================================
   --- 16. 【追加】カテゴリーページ専用・MVデザイン ---
   ========================================== */
.category-main-visual {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    padding: 35px 30px; border-radius: 6px; border: 1px solid #e3e7ec; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02); text-align: left;
}
.cat-mv-label { font-size: 0.75em; font-weight: 800; color: #2096f3; letter-spacing: 0.1em; display: block; margin-bottom: 5px; }
.cat-mv-title { margin: 0 0 15px 0; font-size: 1.8em; font-weight: 700; color: #333333; }
.cat-mv-description { font-size: 0.95em; color: #555555; line-height: 1.6; padding-top: 12px; border-top: 1px dashed #e2e8f0; }

/* ==========================================
   --- 14. サイトマップ（HTML）のリスト装飾 ---
   ========================================== */
.sitemap-dynamic-lists ul.sitemap-ul { list-style: none; padding: 0; margin: 0 0 20px 10px; }
.sitemap-dynamic-lists ul.sitemap-ul li { padding: 8px 0; border-bottom: 1px dashed #e0e0e0; font-size: 0.95em; }
.sitemap-dynamic-lists ul.sitemap-ul li a { font-weight: 600; color: #333333; }
.sitemap-dynamic-lists ul.sitemap-ul li a:hover { color: #2096f3; }

/* ==========================================
   --- 15. 【追加】超軽量・SNS共有ボタン（角丸カプセル仕様） ---
   ========================================== */
.sns-share-area { margin: 40px 0 20px 0; padding: 20px; background: #ffffff; border: 1px solid #e3e7ec; border-radius: 6px; text-align: center; }
.share-title { font-size: 0.95em; font-weight: 700; color: #555555; margin-top: 0; margin-bottom: 15px; }
.share-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* 💡 カプセル型の美しい角丸に統一 */
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 0.9em;
    font-weight: 700;
    color: #ffffff !important;
    border: none;
    border-radius: 25px !important; /* 完璧な角丸カプセル */
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s ease;
    min-width: 140px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.share-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.share-icon { margin-right: 8px; font-size: 1.1em; }

/* 各ブランド固有のカラー */
.btn-x { background-color: #000000; }
.btn-threads { background-color: #101010; }
.btn-copy { background-color: #666666; }