<div class="inner">
    <h2 class="title">お問い合わせフォーム<br>No.3 checkboxをカスタマイズしよう！</h2>
    <form action="" class="form">
        <div class="row">
            <div class="head"><span class="must">氏名</span></div>
            <div class="data"><input type="text" placeholder="ヤマダ タロウ"></div>
        </div>
        <div class="row">
            <div class="head"><span class="must">メールアドレス</span></div>
            <div class="data"><input type="email" placeholder="info@example.com"></div>
        </div>
        <div class="row">
            <div class="head"><span class="must">ご依頼内容<br>(複数選択可)</span></div>
            <div class="data checkbox-wrap">
                <label for="lp">
                    <input type="checkbox" id="lp">
                    <span>LP</span>
                </label>
                <label for="corporate">
                    <input type="checkbox" id="corporate">
                    <span>コーポレートサイト</span>
                </label>
                <label for="wp">
                    <input type="checkbox" id="wp">
                    <span>WordPress構築</span>
                </label>
                <label for="modify">
                    <input type="checkbox" id="modify">
                    <span>修正</span>
                </label>
                <label for="other">
                    <input type="checkbox" id="other">
                    <span>その他</span>
                </label>
            </div>
        </div>
        <div class="row ai-start">
            <div class="head"><span class="must">お問い合わせ内容</span></div>
            <div class="data"><textarea placeholder="こちらに具体的にご入力ください"></textarea></div>
        </div>
    </form>
</div>

//======================
// 今回のテーマ
//======================
.checkbox-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.checkbox-wrap label {

    //デフォルトのチェックボックスを消す
    input[type=checkbox] {
        display: none;
    }

    //テキスト部分 カスタマイズしたチェックボックス
    span {
        display: inline-block;
        // background: #c5c5c562;
        padding-left: 30px;
        font-size: 20px;
        position: relative;
        //枠組み
        &::before {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            width: 15px;
            height: 15px;
            border: 1px solid #000;
        }
        //チェック
        &::after {
            content: '';
            position: absolute;
            top: calc(50% - 1px);
            transform: translateY(-50%) rotate(45deg);
            left: 5px;
            width: 6px;
            height: 12px;
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
            opacity: 0; // とりあえず消す
        }
    }

    input[type=checkbox]:checked + span::after {
        opacity: 1;
    }

    &:hover {
        cursor: pointer;
    }
}