条件分岐フォーム

<div class="d04-03-04-wrap">
          <p class="d04-03-04-q">説明会への参加を希望しますか?</p>
          <div class="d04-03-04-choice">
            <label><input type="radio" name="d04-03-04-r" value="yes"> はい</label>
            <label><input type="radio" name="d04-03-04-r" value="no"> いいえ</label>
          </div>
          <div class="d04-03-04-extra">
            <label class="d04-03-04-elabel">希望日</label>
            <input type="text" class="d04-03-04-einput" placeholder="例: 7月10日">
          </div>
        </div>

.d04-03-04-wrap{width:min(280px,100%)}
        .d04-03-04-q{margin:0 0 12px;font-size:14px;color:#333;font-weight:700}
        .d04-03-04-choice{display:flex;gap:18px;font-size:14px;color:#444}
        .d04-03-04-choice label{display:flex;align-items:center;gap:6px;cursor:pointer}
        .d04-03-04-extra{
          margin-top:14px;max-height:0;opacity:0;overflow:hidden;
          transition:max-height .35s ease,opacity .3s,margin-top .35s;
        }
        .d04-03-04-extra.is-show{max-height:100px;opacity:1}
        .d04-03-04-elabel{display:block;margin:0 0 6px;font-size:12px;color:#8a93a3}
        .d04-03-04-einput{
          width:100%;box-sizing:border-box;padding:10px 12px;font-size:14px;
          border:2px solid #d5d9e0;border-radius:8px;outline:none;background:#fff;
        }
        .d04-03-04-einput:focus{border-color:#4a6cf7}

(function(){
        var wrap=document.querySelector('.d04-03-04-wrap');
        if(!wrap)return;
        var radios=wrap.querySelectorAll('input[name="d04-03-04-r"]');
        var extra=wrap.querySelector('.d04-03-04-extra');
        radios.forEach(function(r){
          r.addEventListener('change',function(){
            extra.classList.toggle('is-show',r.value==='yes'&&r.checked);
          });
        });
      })();