/* --- スマホ向けフッターデザインの強化 --- */
@media (max-width: 768px) {
    /* コンテナの余白調整 */
    .sitemap-card-container {
        padding: 0 15px !important;
        margin-top: 30px !important;
    }

    /* カードを横並びではなく、2列のタイル形式にする */
    .card-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 2列 */
        gap: 12px !important;
    }

    /* 各カードのデザイン調整 */
    .scard {
        width: auto !important; /* 幅を自動調整 */
        padding: 15px 10px !important;
        border-radius: var(--radius) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    }

    /* アイコンを大きくして視認性を上げる */
    .scard i {
        font-size: 1.5rem !important;
        margin-bottom: 8px !important;
    }

    /* カード内のテキストサイズ */
    .scard span {
        font-size: 13px !important;
        font-weight: bold;
    }
}/* --- 1. 共通設定：お気に入りのカラーと形状 --- */
:root {
    --main-blue: #2196f3;
    --bg-blue: #f0f7ff; /* お気に入りの薄い水色 */
    --border-blue: #d0e7ff;
    --main-orange: #e67e22;
    --bg-orange: #fdfaf5; /* お気に入りの薄いオレンジ */
    --border-orange: #fbeedb;
    --radius: 12px; /* お気に入りの角丸設定 */
}

/* --- 2. 全体のレイアウト：中央寄せと読みやすい幅 --- */
#container {
    max-width: 1100px !important;
    margin: 0 auto !important;
}

#content {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

#main {
    max-width: 720px !important; /* 読みやすい幅 */
    width: 100% !important;
    float: none !important;
    margin: 0 auto !important;
    padding: 20px;
}

.entry-content {
    line-height: 1.8;
    letter-spacing: 0.03em;
    font-size: 17px; /* プロっぽく見えるサイズ */
}

/* --- 3. ヘッダー（グローバルナビ）：カプセル型 --- */
#gnav {
    background: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.gnav-inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--bg-blue);
    color: var(--main-blue) !important;
    border: 1px solid var(--border-blue);
    border-radius: 50px; /* カプセル型 */
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
}

.menu a:hover {
    background: var(--main-blue);
    color: #fff !important;
}

/* --- 4. 記事一覧：タイル型カードデザイン --- */
.archive-entries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.archive-entry {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid #eee;
    overflow: hidden;
    transition: 0.3s;
}

.archive-entry:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* --- 5. 見出し（h3）：左線と背景色のアクセント --- */
.entry-content h3 {
    padding: 12px 15px;
    border-left: 6px solid var(--main-blue);
    background: var(--bg-blue);
    color: #333;
    border-radius: 0 4px 4px 0;
    margin: 40px 0 20px;
}

/* --- 6. サイドバー：中央寄せとイラスト風ボタン --- */
#box2 {
    float: none !important;
    margin: 40px auto !important;
    width: 100% !important;
    max-width: 400px !important;
    text-align: center !important;
}

.hatena-module {
    margin-bottom: 40px;
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.hatena-module-title {
    text-align: center !important;
    border-bottom: 2px solid var(--main-blue) !important;
    padding-bottom: 5px !important;
    margin-bottom: 15px !important;
}

.hatena-module-category .hatena-module-body ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 !important;
    list-style: none !important;
}

.hatena-module-category .hatena-module-body li {
    width: 85% !important;
    margin: 8px 0 !important;
}

.hatena-module-category .hatena-module-body li a {
    display: block !important;
    padding: 12px !important;
    background: var(--bg-blue) !important;
    color: var(--main-blue) !important;
    border: 1px solid var(--border-blue) !important;
    border-radius: var(--radius) !important;
    font-weight: bold !important;
    text-decoration: none !important;
    transition: 0.3s !important;
}

.hatena-module-category .hatena-module-body li a::before {
    content: "\f114" !important; /* フォルダアイコン */
    font-family: FontAwesome !important;
    margin-right: 8px !important;
}

.hatena-module-category .hatena-module-body li a:hover {
    background: var(--main-blue) !important;
    color: #fff !important;
    transform: scale(1.03); /* ぷにっと動く演出 */
}

/* --- 7. フッター：サイトマップカード --- */
.sitemap-card-container {
    max-width: 1080px !important;
    margin: 50px auto !important;
    text-align: center !important;
}

.card-wrapper {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.scard {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 160px !important;
    padding: 20px 10px !important;
    border-radius: var(--radius) !important;
    text-decoration: none !important;
    transition: 0.3s !important;
}

.scard-blue { background: var(--bg-blue) !important; color: var(--main-blue) !important; }
.scard-orange { background: var(--bg-orange) !important; color: var(--main-orange) !important; }

.scard:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* --- 8. スマホ表示の最適化 --- */
@media (max-width: 768px) {
    #content { display: block; }
    #main { max-width: 100%; padding: 15px; }
    .scard { width: calc(50% - 10px) !important; }
}

@media (max-width: 768px) {
    /* メニュー全体の余白調整 */
    #gnav {
        padding: 10px 5px !important;
    }

    /* ボタンを横スクロールさせる（画面を突き抜けないようにする） */
    .gnav-inner {
        display: flex !important;
        justify-content: flex-start !important; /* 左詰めに変更 */
        overflow-x: auto !important; /* 横スクロールを許可 */
        white-space: nowrap !important; /* 折り返し禁止 */
        -webkit-overflow-scrolling: touch; /* iPhoneでのスクロールを滑らかに */
        padding: 5px 10px !important;
        gap: 8px !important;
    }

    /* スクロールバーを非表示にする（見た目スッキリ） */
    .gnav-inner::-webkit-scrollbar {
        display: none;
    }

    /* ボタンのサイズ微調整 */
    .menu a {
        padding: 8px 15px !important; /* 上下を少し詰め、左右を確保 */
        font-size: 13px !important; /* 文字を少し小さく */
        flex-shrink: 0 !important; /* ボタンが潰れないように固定 */
    }
}