/* ---- wp-custom-css (1 variant, 420 pages) ---- */
/* =========================================================
   コレクシア ― お問い合わせフォーム用 追加 CSS（最終版）
   □：薄グレー #DADADA / チェック時：緑 #63B576 ＋ 白い✔
   ========================================================= */

/* 1. リスト体裁をリセットし、縦に並べる ------------------------ */
.inquiry-topic ul{
    list-style:none;
    margin:0;
    padding:0;
}
.inquiry-topic .wpcf7-list-item{
    display:block;
    margin:0 0 .5em 0;        /* 項目間の余白 */
}

/* 2. ネイティブ checkbox を隠し、行全体をクリック領域に -------- */
.inquiry-topic .wpcf7-list-item input[type="checkbox"]{
    position:absolute;
    opacity:0;                /* 視覚的に非表示（読み上げは残る） */
    width:0;
    height:0;
    pointer-events:none;
}

/* 3. ラベルを横並び、クリック可能に ---------------------------- */
.inquiry-topic .wpcf7-list-item label{
    display:inline-flex;
    align-items:center;
    cursor:pointer;
}

/* 4. テキスト span に左余白を取り、上に □／✔ を重ねる ---------- */
.inquiry-topic .wpcf7-list-item .wpcf7-list-item-label{
    position:relative;
    padding-left:26px;        /* 18px □ + 8px 余白 */
}

/* 5. 未チェック時の □（薄グレー 1px） --------------------------- */
.inquiry-topic .wpcf7-list-item .wpcf7-list-item-label::before{
    content:'';
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:18px;
    border:1px solid #DADADA;
    border-radius:2px;
    background:#FFFFFF;
    box-sizing:border-box;
}

/* 6. チェック時：背景と枠線を緑に ------------------------------- */
.inquiry-topic .wpcf7-list-item input[type="checkbox"]:checked
        + .wpcf7-list-item-label::before{
    background:#63B576;
    border-color:#63B576;
}

/* 7. チェックマーク（白）を中央に描画 --------------------------- */
.inquiry-topic .wpcf7-list-item input[type="checkbox"]:checked
        + .wpcf7-list-item-label::after{
    content:'';
    position:absolute;
    /* □ 幅 18px の中央 = 9px */
    left:9px;
    top:50%;
    width:6px;                /* ✔ の幅 */
    height:11px;              /* ✔ の高さ */
    border:solid #FFFFFF;
    border-width:0 2px 2px 0;
    transform:translate(-50%,-50%) rotate(45deg);
    pointer-events:none;
    display:block;            /* 擬似要素を確実に描画 */
}

/* 8. テーマ／プラグインが追加する余計な ○ を打ち消す ----------- */
/* （黒い ● が残る場合はコメントアウトを外す） */
/*
.inquiry-topic .wpcf7-list-item-label::before,
.inquiry-topic .wpcf7-list-item-label::after{
    font-size:0 !important;
}
*/

/* ========================================================= */