/* ======================================================= */
/* 🛡️【文字切り替え完全保証】!importantなし・自動整形無効化CSS */
/* ======================================================= */

.hidden_box {
    margin: 10px 0;
    padding: 0; 
    text-align: center; /* 親から中身のボタンを中央に寄せる */
}

/* 1. ボタンの見た目（displayを追加して詳細度もアップ） */
.hidden_box label {
    display: inline-block; /* 👑【超重要】これを入れないと min-width や中央寄せが効きません */
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    padding: 10px;
    min-width: 25%;
    background-color: #ffffff; /* 背景を白に固定 */
}

.hidden_box label:hover {
    background: #f5f5f5;
}

/* 2. 初期状態（閉じているとき）の文字 */
.hidden_box label::after {
    content: "を表示";
}

/* 3. チェックボックス本体は画面から完全隠蔽 */
.hidden_box input {
    display: none;
}

/* 4. 初期状態：中身は非表示 */
.hidden_box .hidden_show {
    height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    text-align: left;
    transition: 0.3s ease;
}


/* =======================================================
   🔥【ここから修正】WordPressの自動整形を無効化する最強の pseudo 構文
======================================================= */

/* 👑「箱の中にチェックされたBOXがあるなら、labelの後ろを『を非表示』に変える」
   これなら間にどんなゴミタグが挟まろうが、100%確実に文字が切り替わります！ */
.hidden_box:has(input:checked) label::after {
    content: "を非表示";
}

/* 👑 中身の表示も同じく :has() で確実に連動させる */
.hidden_box:has(input:checked) .hidden_show {
    height: auto;
    opacity: 1;
    padding: 10px 0;
}