@charset "UTF-8";

/* ==========================================
   1. 基本設定 & CSS変数 (Base & Variables)
   ========================================== */
:root {
    /* カラー定義 */
    --bg-color: #fdf9f2;
    /* 生成り（和紙の風合い） */
    --primary-color: #874831;
    /* セピア */
    --primary-color-half: #916454;
    --text-color: #555555;
    /* 墨色 */
    --accent-color: #d4a017;
    /* 山吹色 */
    --bottan-color: #cf979b;
    /* ボタン背景色 */
    --bottan2-color: #009bc6;
    /* 「続きを読む」ボタン等 */
    --white-color: #fffffe;
    /* ホワイト */
    --date-color: #db4f2e;
    /* NEWバッジ・日付 */
    --menu_border-color: #9fa0a0;
    /* メニューボーダー */
    --cat-play: #1e8135;
    /*  カテゴリーカラー*/
    --cat-life: #630453;
    /*  カテゴリーカラー*/
    --cat-learn: #271281;
    /*  カテゴリーカラー*/
    --cat-opini: #ad8e27;
    /*  カテゴリーカラー*/
    --new-15: #ff3b30;
    /*  カテゴリーカラー*/
    --new-30: #fcbbb8;
    /*  カテゴリーカラー*/


}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    line-height: 1.7;
    color: #333333;
    background-color: var(--bg-color);
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

small {
    line-height: 3.0;
}


/* ==========================================
   2. 共通レイアウト & 枠組み (Layout)
   ========================================== */
.container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 20px 0px 20px;
}


/* ==========================================
   3. ヘッダー (Header)
   ========================================== */
.site-header {
    width: 100%;
    background-color: var(--primary-color);
    border-bottom: 4px solid var(--accent-color);
}

.header-inner {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--primary-color);
}

.header-inner-s {
    width: 80%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--primary-color);
}

.header-large .site-logo img,
.header-single .site-logo img {
    max-width: 100%;
}


/* ==========================================
   4. ナビゲーション (Navigation - PC表示)
   ========================================== */

nav:not(.pagination-nav) {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background-color: var(--bg-color);
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

nav:not(.pagination-nav).is-sticky {
    border-bottom: 2px solid var(--accent-color);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.main-nav {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 32px;
    gap: 5px;
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    padding: 10px;
}

.main-nav-button {
    font-family: sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.9;
    color: var(--white-color);
    text-align: center;
    text-decoration: none;
    background-color: var(--bottan-color);
    transition: background-color 0.1s ease-out 200ms;
    padding-top: 2px;
}

.main-nav-button:hover {
    text-decoration: none;
    background-color: var(--primary-color);
}

.hamburger-btn {
    display: none;
}


/* ==========================================
   5. コンテンツ固有パーツ (Components)
   ========================================== */
.category {
    width: 100%;
    max-width: 300px;
    margin: 25px auto 20px auto;
    text-align: center;
}


/* ==========================================
   6. フッター (Footer)
   ========================================== */
.footer {
    width: 100%;
    background-color: var(--primary-color);
    border-top: 2px solid var(--accent-color);
}

.site-footer {
    display: grid;
    grid-template-columns: 400px 400px;
    align-items: flex-end;
    max-width: 700px;
    margin: 0 auto;
    padding: 5px 20px;
    font-family: sans-serif;
    color: #ffffff;
    text-decoration: none;
}

.site-footer-jim,
.site-footer-info {
    width: 400px;
    margin: 0 auto;
    line-height: 1.2;
    color: var(--bg-color);
}

.site-footer-info-jimu {
    font-size: 0.5rem;
    padding-top: 5px;
}

.site-footer-info-name {
    font-size: 0.9rem;
}

.site-footer-info-address {
    font-size: 0.5rem;
}


/* ==========================================
   7. 記事一覧ページ (index.php) スタイル
   ========================================== */
.article-list {
    display: flex;
    flex-direction: column;
}

.article-card {
    padding: 5px;
}

.more-link {
    margin-top: 5px;
    margin-left: 150px;
    font-size: 0.8rem;
    color: var(--menu_border-color);
    text-align: left;
}

.more-link a {
    display: inline-block;
    padding: 1px 6px;
    color: var(--bottan2-color);
    border-radius: 2px;
}

.news-list {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 10px 10px 0 10px;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Visual Sans", "Noto Sans JP", sans-serif;
}

.news-list:first-child {
    border-top: 1px dashed #d1c7bd;
}

.news-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.news-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    width: 140px;
    margin-bottom: 0;
}

.news-date {
    padding-left: 5px;
    padding-right: 10px;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--text-color);
}

.news-category {
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: bold;
    color: #ffffff;
    border-radius: 3px;
}

.cat-play {
    background-color: var(--cat-play);
}

.cat-life {
    background-color: var(--cat-life);
}

.cat-learn {
    background-color: var(--cat-learn);
}

.cat-opini {
    background-color: var(--cat-opini);
}


/* .badge-7 {
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 400;
    color: #ffffff;
    vertical-align: 2px;
    background-color: #ff3b30;
    border-radius: 3px;
    margin-top: 10px;
    margin-left: 10px;
} */

.badge-15 {
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 400;
    color: #ffffff;
    vertical-align: 2px;
    background-color: var(--new-15);
    border-radius: 3px;
    margin-top: 10px;
    margin-left: 10px;
}

.badge-30 {
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 400;
    color: #ffffff;
    vertical-align: 2px;
    background-color: var(--new-30);
    border-radius: 3px;
    margin-top: 10px;
    margin-left: 10px;
}

.news-title {
    width: 100%;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Visual Sans", "Noto Sans JP", sans-serif;
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--text-color);
}

.news-title a {
    font-weight: bold;
    color: #2b1f1d;
    text-decoration: none;
}

.news-author {
    font-size: 0.9rem;
    font-weight: bold;
    color: #555555;
}

.article-short-layout {
    width: 570px;
    margin: 0 0 0 140px;
    font-family: serif;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #666666;
}


/* ==========================================
   8. 記事詳細ページ (article.php) スタイル
   ========================================== */
.article-detail h1,
.article-detail h2 {
    padding-bottom: 8px;
    margin-bottom: 15px;
    border-bottom: 2px solid #333333;
}

.article-detail p {
    margin-bottom: 1.5em;
}

.back-link {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 0.8rem;
    color: var(--bottan2-color);
}

.summary-text,
.article-1 {
    padding-bottom: 10px;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;
    font-size: 1.0rem;
    font-weight: bold;
    line-height: 1.6;
    color: var(--text-color);
    text-align: justify;
    text-indent: 1em;
}

.article__text--bold {
    font-family: sans-serif;
    font-weight: bold;
}

.image-card {
    max-width: 400px;
    margin: 10px auto;
    padding: 12px;
}

.image-card img {
    display: block;
    width: 100%;
    height: auto;
}

.image-caption {
    margin-top: 10px;
    font-family: sans-serif;
    font-size: 0.8rem;
    font-weight: lighter;
    line-height: 1.4;
    color: var(--text-color);
    text-align: justify;
}

.inyou {
    font-family: sans-serif;
    font-size: 0.6rem;
    font-weight: 400;
    text-align: right;
}

.article__text--sanko {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    font-family: sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
}

.article__text--sankoutxt {
    padding-left: 1em;
    text-indent: -1em;
}

/* 広い余白用のクラス */
p.wide-space {
    margin-bottom: 0em;
}

p.indent {
    /* margin-left: 30px; */
    padding-left: 1em;
    text-indent: 0em;
}

/* CSS */
.indent-list {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1em;
    /* 全体を1文字下げる */
    text-indent: -1em;
    /* 1行目だけ1文字左に戻す */
}


/* ==========================================
   9. 画像回り込み (Float Utility)
   ========================================== */
.float_img {
    display: block;
    float: right !important;
    width: 50% !important;
    margin-left: 10px !important;
    box-sizing: border-box;
}

.float_img--30 {
    display: block;
    float: right;
    width: 30%;
    margin-left: 20px;
    box-sizing: border-box;
}

.float_img--yr60 {
    display: block;
    float: right;
    width: 60%;
    padding-bottom: 5px;
    margin-left: 5px;
}

.float_img--yr30 {
    display: block;
    float: right;
    width: 30%;
    margin-left: 20px;
    box-sizing: border-box;
}

.float_img--yl60 {
    display: block;
    float: left;
    width: 60%;
    padding-bottom: 10px;
    margin-right: 20px;
}

.float_text {
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    text-align: justify;
}


/* ==========================================
   10. ライター一覧 & 汎用テーブル (Writer & Table)
   ========================================== */
.writer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 5px;
    width: 600px;
    padding-left: 12px;
    padding-right: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
}

.item1 {
    width: 140px;
    padding: 5px;
    font-size: 1.0rem;
    line-height: 1.5;
    color: var(--text-color);
    text-align: center;
    border: 1px solid rgb(221, 172, 144);
    border-radius: 4px;
}

.item1:hover {
    color: var(--bg-color);
    text-decoration: none;
    background-color: rgb(221, 172, 144);
}

.item2 {
    width: 140px;
    padding: 5px;
    line-height: 1.5;
    color: var(--text-color);
    text-align: center;
}

.writer-name-list {
    margin-left: auto;
    margin-right: auto;
    font-family: sans-serif;
    font-size: 1.4rem;
    color: var(--text-color);
    text-decoration: none;
}

table {
    width: 100%;
    max-width: 300px;
    color: var(--text-color);
}

table tr {
    text-align: left;
}

table td {
    padding-left: 5px;
}


/* ==========================================
   11. ページネーション (Pagination)
   ========================================== */
.pagination-nav {
    margin: 20px 0;
    text-align: center;
}

.pagination {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pagination .page-item {
    margin: 0;
}

.pagination a,
.pagination span.page-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: 0.9rem;
    color: #333333;
    text-decoration: none;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.pagination a:hover {
    color: #1a5276;
    background-color: #f0f4f8;
    border-color: #1a5276;
}

.pagination .page-item.active .page-number {
    font-weight: bold;
    color: #ffffff;
    background-color: #1a5276;
    border-color: #1a5276;
}

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

/* PC表示（画面幅769px以上）ではロゴ画像を一切表示しない */
.nav-logo {
    display: none !important;
}

/* ==========================================
   12. スマホ表示レスポンシブ (max-width: 768px)
   ========================================== */
@media screen and (max-width: 768px) {

    /* 1. 全体スクロール & 枠幅の保護 */
    html,
    body {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    section,
    header,
    footer,
    article,
    table {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    table,
    pre {
        display: block !important;
        overflow-x: auto !important;
    }

    .container {
        padding: 0px 5px 0px 5px;
        /* padding-left: 5px; */
        /* padding-right: 5px; */
    }

    /* 2. ヘッダー・タイトル・ナビゲーション */
    .site-title,
    .logo {
        width: 100%;
        margin: 0;
        font-size: 1.3rem;
        text-align: center;
    }

    .site-nav ul,
    .header-nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        width: 130px;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .site-nav a,
    .header-nav a {
        padding: 3px;
        font-size: 0.9rem;
    }

    /* =============================================
       1. サブページのヘッダー非表示指定（スマホのみ）
       ============================================= */
    body.is-sub-page .site-header {
        display: none !important;
    }


    /* =============================================
       2. ナビゲーションバー基本スタイル
       ============================================= */
    /* ナビゲーションバー全体 */
    nav:not(.pagination-nav) {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 9999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 50px !important;
        padding: 0 15px 0 0px !important;
        box-sizing: border-box !important;
    }

    /* ---------------------------------------------
       ロゴエリア（残りのスペースで縦いっぱいに配置）
       --------------------------------------------- */
    .nav-logo {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 50px !important;
        /* ナビバーと同じ高さに広げる */
        margin-right: 15px !important;
        /* ★三本線（右側）から15px離す */
        overflow: hidden !important;
        /* ★重要：ロゴエリアからはみ出した部分を隠す */
        position: relative !important;
    }

    /* aタグおよびpictureタグを中央に固定 */
    .nav-logo a,
    .nav-logo picture {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 50px !important;
        width: 80% !important;
    }

    /* ---------------------------------------------
       ロゴ画像本体（★真ん中を中心に左右均等にはみ出させる）
       --------------------------------------------- */
    .nav-logo img {
        height: 48px !important;
        width: auto !important;
        max-width: none !important;
        /* 幅の制限を解除 */
        display: block !important;

        /* ↓ 画像自身を強制的に完全中央寄せにする設定 */
        margin: 0 auto !important;
        object-fit: cover !important;
        object-position: center !important;
        flex-shrink: 0 !important;
        /* 潰れ防止 */
    }

    /* =============================================
       3. ページ別のロゴ表示切り替え
       ============================================= */
    /* 【サブページ】：最初からナビロゴを表示 */
    body.is-sub-page .nav-logo {
        display: flex !important;
        align-items: center !important;
    }

    /* 【トップページ】：通常時はナビロゴを非表示（空白） */
    body.is-top-page .nav-logo {
        display: none !important;
    }

    /* トップページのスクロール時、またはサブページ表示時 */
    body.is-top-page nav:not(.pagination-nav).is-sticky .nav-logo,
    body.is-sub-page .nav-logo {
        display: flex !important;
    }

    /* 【トップページ】：スクロール固定時（.is-sticky）のみナビロゴを表示 */
    /* body.is-top-page nav:not(.pagination-nav).is-sticky .nav-logo { */
    /* display: flex !important; */
    /* align-items: center !important; */
    /* } */


    /* =============================================
       4. ハンバーガーボタンの位置固定
       ============================================= */

    /* ハンバーガーボタン */
    .hamburger-btn {
        z-index: 100002 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 30px !important;
        height: 22px !important;
        padding: 0 !important;
        /* margin: 0 !important; */
        /* margin: 10px 15px 10px 0px !important; */
        cursor: pointer !important;
        /* background: transparent !important; */
        background: var(--bg-color) !important;
        border: none !important;
        /* margin-left: auto !important; */
        /* margin-right: 0 !important; */
        margin-left: auto !important;
        /* 自動余白を解除 */
        flex-shrink: 0 !important;
        /* 画面幅が狭くなっても潰れないように保護 */
    }

    .hamburger-bar {
        display: block !important;
        width: 100% !important;
        height: 2px !important;
        background-color: #1a5276 !important;
        border-radius: 2px !important;
        transition: transform 0.3s ease, opacity 0.3s ease !important;
    }

    .hamburger-btn.is-active .hamburger-bar:nth-child(1) {
        transform: translateY(9.5px) rotate(45deg) !important;
    }

    .hamburger-btn.is-active .hamburger-bar:nth-child(2) {
        opacity: 0 !important;
    }

    .hamburger-btn.is-active .hamburger-bar:nth-child(3) {
        transform: translateY(-9.5px) rotate(-45deg) !important;
    }

    /* 通常時：メニュー本体非表示 */
    .main-nav {
        display: none !important;
    }

    /* メニュー開閉（is-open状態：ヘッダー直下ポップアップ） */
    .main-nav.is-open {
        position: fixed !important;
        top: 50px !important;
        /* ナビバーの高さの下に配置 */
        right: 10px !important;
        /* 右端から少し浮かせる */
        left: auto !important;
        z-index: 100001 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 240px !important;
        /* コンパクトな固定幅 */
        height: auto !important;
        /* 高さを中身に合わせる（全画面にしない） */
        max-height: 80vh !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        overflow-y: auto !important;
        background-color: var(--bg-color) !important;
        border-radius: 8px !important;
        /* 角丸にする */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
        /* 浮き出る影 */
        box-sizing: border-box !important;
    }

    .main-nav-button {
        display: block !important;
        padding: 5px 10px !important;
        font-size: 0.9rem !important;
        font-weight: bold !important;
        color: var(--white-color) !important;
        text-align: center !important;
        text-decoration: none !important;
        border-bottom: 2px solid #eeeeee !important;
    }

    /* 3. 記事・リストレイアウト */
    .article-card {
        padding: 5px;
        margin-bottom: 5px;
    }

    .news-item {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .news-meta {
        display: inline-block;
        align-items: center;
        gap: 5px;
        width: 100%;
        margin-bottom: 0;
    }

    .card-meta,
    .entry-meta {
        gap: 6px 8px;
        font-size: 0.8rem;
    }

    .news-category,
    .card-category {
        margin-top: 10px;
        padding: 2px 6px;
        font-size: 0.7rem !important;
        vertical-align: 2px;

    }

    /* .badge-7 {
        padding: 2px 6px;
        font-size: 11px;
        font-weight: 400;
        color: #ffffff;
        vertical-align: 2px;
        background-color: #ff3b30;
        border-radius: 3px;
        margin-top: 10px;
        margin-left: 10px;
    } */

    .badge-15 {
        padding: 2px 6px;
        font-size: 11px;
        font-weight: 400;
        color: #ffffff;
        vertical-align: 2px;
        background-color: var(--new-15);
        border-radius: 3px;
        margin-top: 10px;
        margin-left: 10px;
    }

    .badge-30 {
        padding: 2px 6px;
        font-size: 11px;
        font-weight: 400;
        color: #ffffff;
        vertical-align: 2px;
        background-color: var(--new-30);
        border-radius: 3px;
        margin-top: 10px;
        margin-left: 10px;
    }

    .category {
        width: 60%;
        /* margin-top: 10px; */
        /* margin-bottom: 5px; */
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center;
        /* padding: 0px 6px 0px 6px; */
    }

    .news-title,
    .card-title,
    .entry-title {
        margin: 4px 0 0 0;
        font-size: 1.2rem;
        line-height: 1.4;
    }

    .news-summary p,
    .card-summary p,
    .entry-summary p {
        font-size: 0.88rem;
        line-height: 1.5;
    }

    .article-short-layout {
        width: 100% !important;
        margin: 0;
        font-family: serif;
        font-size: 0.95rem;
        line-height: 1.3;
        color: #666666;
    }

    .article-detail {
        padding-bottom: 8px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 15px;
    }

    .article-1 {
        padding-bottom: 10px;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .more-link {
        margin-top: 10px;
        margin-left: 5px;
        font-size: 0.85rem;
        color: var(--menu_border-color);
        text-align: left;
    }

    .more-link a {
        display: inline-block;
        padding: 1px 6px;
        color: var(--bottan2-color);
        border-radius: 2px;
    }

    /* 4. 画像 & 回り込み解除 */
    .float_img,
    .float_img--30 {
        display: block !important;
        float: none !important;
        margin: auto !important;
        width: 100% !important;
        height: auto !important;
        /* box-sizing: border-box; */
    }

    .float_img--yr60 {
        display: block !important;
        float: none !important;
        margin: auto !important;
        width: 100% !important;
        height: auto !important;
    }


    .image-card {
        max-width: 400px;
        padding: 0px 12px;
        margin: 10px auto;
    }

    .image-card img {
        display: block;
        width: 100%;
        height: auto;
    }

    .image-caption {
        margin-top: 10px;
        font-family: sans-serif;
        font-size: 0.8rem;
        font-weight: lighter;
        line-height: 1.4;
        color: var(--text-color);
        text-align: justify;
    }

    /* 5. フッター (スマホ用) */
    .site-footer {
        display: flex;
        flex-direction: column;
        padding: 20px 20px 5px 20px;
        font-family: sans-serif;
        text-align: left;
        text-decoration: none;
    }

    .site-footer-jim,
    .site-footer-info {
        padding-bottom: 10px;
        line-height: 1.2;
        color: var(--bg-color);
    }

    .site-footer-info-jimu {
        padding-top: 5px;
        font-size: 0.5rem;
    }

    .site-footer-info-name {
        font-size: 0.9rem;
    }

    .site-footer-info-address {
        font-size: 0.5rem;
    }

    /* 6. ライター一覧 & ページネーション (スマホ用) */
    .writer-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 5px;
        width: 90%;
        padding-left: 6px;
        padding-right: 6px;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        text-decoration: none;
    }

    .item1,
    .item2 {
        width: 100%;
        padding: 5px;
        font-size: 0.9rem;
        line-height: 1.5;
        color: var(--text-color);
        text-align: center;
    }

    .item1 {
        border: 1px solid rgb(221, 172, 144);
        border-radius: 4px;
    }

    .item1:hover {
        color: var(--bg-color);
        background-color: rgb(221, 172, 144);
    }

    .pagination a,
    .pagination span.page-number {
        min-width: 28px;
        height: 28px;
        padding: 0 8px;
        font-size: 0.8rem;
    }


    /* ハンバーガーボタン自体は背景を透明にしてナビの背景色に合わせる */
    .hamburger-btn {
        background: transparent !important;
    }

    /* トップページの三本線を「白」にする */
    body.is-top-page .hamburger-bar {
        background-color: var(--text-color) !important;
    }

    /* サブページの三本線を「暗い色」にする */
    body.is-sub-page .hamburger-bar {
        background-color: var(--bg-color) !important;
    }

    /* ---------------------------------------------
       1. トップページ：スクロール前（通常時）の背景色
       --------------------------------------------- */
    body.is-top-page nav:not(.pagination-nav) {
        background-color: var(--bg-color) !important;
        /* ★スクロール前の色（例: 濃紺） */
        transition: background-color 0.3s ease;
        /* 色変化をなめらかにする場合 */
    }

    /* ---------------------------------------------
       2. トップページ：スクロール後（.is-sticky時）の背景色
       --------------------------------------------- */
    body.is-top-page nav:not(.pagination-nav).is-sticky {
        background-color: var(--primary-color) !important;
        /* ★スクロール後の色（例: 白） */
    }

    /* ---------------------------------------------
       3. サブページ：常に同じ背景色（必要な場合）
       --------------------------------------------- */
    body.is-sub-page nav:not(.pagination-nav) {
        background-color: var(--primary-color) !important;
        /* ★サブページの色 */
        border-bottom: 2px solid var(--accent-color);
    }

    /* トップページ：スクロール前は三本線を「白」 */
    body.is-top-page .hamburger-bar {
        background-color: var(--text-color) !important;
        transition: background-color 0.3s ease;
    }

    /* トップページ：スクロール後（.is-sticky）は三本線を「黒/濃い色」 */
    body.is-top-page nav:not(.pagination-nav).is-sticky .hamburger-bar {
        background-color: var(--bg-color) !important;
    }

}