<div class="inner">
    <h2 class="title">お問い合わせフォーム<br>No.4 radioボタンをカスタマイズしよう！</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>性別</span></div>
            <div class="data radio-wrap">
                <label for="man">
                    <input type="radio" id="man" name="gender" checked>
                    <span>男</span>
                </label>
                <label for="woman">
                    <input type="radio" id="woman" name="gender">
                    <span>女</span>
                </label>
            </div>
        </div>
        <div class="row">
            <div class="head"><span>shopify構築者は？</span></div>
            <div class="data">
                <div class="data radio-wrap2">
                    <label for="maitake">
                        <input type="radio" id="maitake" name="kinoko" checked>
                        <span>まいたけ</span>
                    </label>
                    <label for="matitake">
                        <input type="radio" id="matitake" name="kinoko">
                        <span>まちたけ</span>
                    </label>
                    <label for="matutake">
                        <input type="radio" id="matutake" name="kinoko">
                        <span>まつたけ</span>
                    </label>
                </div>
            </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>

//1つ目のラジオボタン
.radio-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;

    label {
        //デフォルトのラジオボタンを消す
        input[type=radio] {
            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: 20px;
                height: 20px;
                border: 1px solid #000;
                border-radius: 50%;
            }
            //チェック
            &::after {
                content: '';
                position: absolute;
                top: calc(50%);
                transform: translateY(-50%);
                left: 2.5px;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background: #000;
                opacity: 0; // とりあえず消す
            }
        }
    
        input[type=radio]:checked + span::after {
            opacity: 1;
        }
        &:hover {
            cursor: pointer;
        }
    }
}

//2つ目のラジオボタン
.radio-wrap2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    label {
        flex: 1;
        //デフォルトのラジオボタンを消す
        input[type=radio] {
            display: none;
        }
    
        //テキスト部分 カスタマイズしたラジオボタン
        span {
            display: inline-block;
            // background: #c5c5c562;
            padding: 20px;
            font-size: 20px;
            position: relative;
            border: 1px solid #000;
            width: 100%;
            text-align: center;
        }
        //被っているborderを片方消す
        &:not(:last-of-type) {
            span {
                border-right: none;
            }
        }
    
        input[type=radio]:checked + span {
            background: #000;
            color: #fff;
        }

        &:hover {
            cursor: pointer;
        }
    }
}