/* アクセシビリティエリアの基本スタイル */
.accessibility-tools {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: flex-end;
    font-size: 12px;
}
.acc-translate-group {
    display: flex;
    align-items: center;
    gap: 5px; /* ここでお好みの数値に調整してね */
}
.acc-group { display: flex; align-items: center; gap: 5px; }
.btn-acc {
    cursor: pointer;
    padding: 2px 8px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    transition: all 0.2s;
}
.btn-acc:hover { background: #f0f0f0; }

.acc-group .btn-acc[data-acc-color="blue"],
.acc-nav-group .btn-acc[data-acc-color="blue"] { background-color: #0033ff; color: #fff; }
.acc-group .btn-acc[data-acc-color="yellow"],
.acc-nav-group .btn-acc[data-acc-color="yellow"] { background-color: #ffff00; color: #000; }
.acc-group .btn-acc[data-acc-color="black"],
.acc-nav-group .btn-acc[data-acc-color="black"] { background-color: #000; color: #68e0ff; border-color: #000; }
.acc-group .btn-acc[data-acc-color="black"]:hover { background-color: #333; color: #68e0ff; opacity: 0.8; }




/* --- 変化の定義 --- */

/* 文字サイズ拡大 */
body.is-text-large {
    font-size: 1.8em
}

/* --- 配色切り替えの定義 --- */

/* 青モード：背景青、文字白 */
body.is-acc-blue {
    background-color: #0033ff !important;
    color: #ffffff !important;
}
body.is-acc-blue #header, body.is-acc-blue footer { background: #0022aa; border-color: #fff; }
body.is-acc-blue a { color: #ffff00 !important; } /* リンクは目立つ黄色 */

/* 黄モード：背景黄、文字黒 */
body.is-acc-yellow {
    background-color: #ffff00 !important;
    color: #000000 !important;
}
body.is-acc-yellow #header, body.is-acc-yellow footer { background: #eeee00; border-color: #000; }
body.is-acc-yellow a { color: #0000ff !important; text-decoration: underline; }

/* 黒モード：背景黒、文字黄（または白） */
body.is-acc-black {
    background-color: #000000 !important;
    color: #ffff00 !important; /* 黒背景に黄色は最強の視認性よ */
}
body.is-acc-black #header, body.is-acc-black footer { background: #222; border-color: #ffff00; }
body.is-acc-black a { color: #ffffff !important; text-decoration: underline; }

/* 共通：配色モード時は画像を少し透過させると眩しさが抑えられるわ */
body.is-acc-blue img, body.is-acc-yellow img, body.is-acc-black img {
    opacity: 0.8;
}

body.is-acc-blue .feature-wrap > .wp-block-column,body.is-acc-yellow .feature-wrap > .wp-block-column,body.is-acc-black .feature-wrap > .wp-block-column{ background:none; }


/* スマホでは隠す設定（ナビゲーション内に入れるため） */
@media screen and (max-width: 991px) {
    .header-utility-right { display: none; }
}