/* ===================================================
 * 1. パソコン環境（画面幅 992px 以上）の設定
 * サイドバーが横にあるため「縦並び」にする
 * =================================================== */
@media (min-width: 992px) {
    .wp-block-buttons.sidebar-responsive-menu {
        flex-direction: column !important; /* 強制的に縦一列 */
        align-items: center !important;     /* 中央揃え */
        gap: 12px !important;              /* ボタン同士の縦の隙間 */
    }
    .wp-block-buttons.sidebar-responsive-menu .wp-block-button {
        width: 100%;                       /* ボタンの横幅を揃える場合 */
        max-width: 180px;                  /* ボタンが広がりすぎない枠（お好みで調整） */
    }
}

/* ===================================================
 * 2. iPad・iPhone環境（画面幅 991px 以下）の設定
 * サイドバーの横幅が広くなるため「横並び（折り返しOK）」にする
 * =================================================== */
@media (max-width: 991px) {
    .wp-block-buttons.sidebar-responsive-menu {
        flex-direction: row !important;    /* 横並びにする */
        flex-wrap: wrap !important;        /* 画面幅に収まらない場合は折り返しを許可 */
        justify-content: center !important; /* 中央寄せ */
        gap: 10px !important;              /* ボタン同士の横・縦の隙間 */
    }
    .wp-block-buttons.sidebar-responsive-menu .wp-block-button {
        width: auto !important;            /* 文字数に合わせた自動幅にする */
    }
}

/* ===================================================
 * 3. 特定の固定ページ（NDFF 2026）全体のダークモード化
 * =================================================== */

/* ===================================================
 * 3. 特定の固定ページ（ID: 154 / 331）全体のダークモード化
 * =================================================== */

/* 1. ページ全体の背景を黒、文字を白（または薄いグレー）にする */
body.page-id-154,
body.page-id-331 {
    background-color: #0A0D1A !important; /* カスタムHTMLの--inkに合わせる */
    color: #F0EDE8 !important;            /* カスタムHTMLの--creamに合わせる */
}

/* 2. メインコンテンツエリアやサイドバー、コンテナの背景を透明・または黒にする */
body.page-id-154 #page, body.page-id-331 #page,
body.page-id-154 #content, body.page-id-331 #content,
body.page-id-154 #primary, body.page-id-331 #primary,
body.page-id-154 #main, body.page-id-331 #main,
body.page-id-154 .site-content, body.page-id-331 .site-content,
body.page-id-154 .site-main, body.page-id-331 .site-main,
body.page-id-154 #sidebar, body.page-id-331 #sidebar,
body.page-id-154 .widget-area, body.page-id-331 .widget-area,
body.page-id-154 header, body.page-id-331 header,
body.page-id-154 footer, body.page-id-331 footer,
body.page-id-154 .site-header, body.page-id-331 .site-header,
body.page-id-154 .site-footer, body.page-id-331 .site-footer {
    background-color: #0A0D1A !important;
    background: #0A0D1A !important;
    color: #F0EDE8 !important;
    border-color: rgba(240, 237, 232, 0.1) !important; /* 枠線がある場合、目立たない薄い色に */
}

/* 3. 各種テキスト（リンク、見出し、サイドバー内テキスト）の色調整 */
body.page-id-154 a, body.page-id-331 a,
body.page-id-154 h1, body.page-id-331 h1,
body.page-id-154 h2, body.page-id-331 h2,
body.page-id-154 h3, body.page-id-331 h3,
body.page-id-154 h4, body.page-id-331 h4,
body.page-id-154 .widget-title, body.page-id-331 .widget-title,
body.page-id-154 .sidebar, body.page-id-331 .sidebar {
    color: #F0EDE8 !important;
}

/* リンクのホバー（マウスを乗せた時）の色をテラコッタ（オレンジ）に変更 */
body.page-id-154 a:hover,
body.page-id-331 a:hover {
    color: #C4673A !important;
}

/* 特定の固定ページ内の、すべての画像を反転させる場合 */
body.page-id-154 img,
body.page-id-331 img {
    filter: invert(1);
}