回答後パターン分けされた結果をプルダウンで表示※要javascript

下記Beyondコード

JS head

<!-- タグ設定のJavaScript headに以下をカットして貼り付けてください。
同一widgetを複数追加する場合、複数回貼付けは不要です。 -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
    var questionCheck = questionCheck || {};
    (function(_) {
        const target = '.js-questionChoiceArea';

        _.aLink = function(el) {
            if (!el.hasClass('is-disabled')) {
                var target = el.next('.js-slide');
                if (target) {
                    target.slideDown();
                }
                target.closest('.js-btnList').find('label').addClass('is-disabled');
            }
        };

        _.qNum = function(el) {
            const parent = el.closest('.js-questionChoiceArea');
            const child = el.closest('.js-qBox');
            const nextClass = '.js-' + el.dataset.question;
            const nextQ = parent.querySelector(nextClass);
            const nextParent = nextQ.closest('.js-qBox');

            child.classList.remove('is-active');
            nextQ.classList.add('is-active');
            nextParent.classList.add('is-active');
        };
    })(questionCheck);
</script>
<!-- JavaScript headここまで -->

HTML

<!-- HTMLここから-->
<div class="questionChoise__area js-questionChoiceArea">
    <div class="center question__box js-qBox js-q01 is-active">
        <span class="title"><b>Question</b></span>
        <div class="question"><span class="number">01</span>→<span class="border">02</span>→<span class="border">03</span>→<span class="border">04</span>→<span class="border">05</span></div>
        <div class="words">ここに文章を追加できます<br>改行してさらに追加が可能</div>
        <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/796772/35242dc7-0391-4478-aaa0-f4b18eb11faf.png" class="lazyload" draggable="false" height="380" width="570">
        <div class="btn_list js-btnList js-ans01_1 is-active">
            <div class="answerBtn__list yesBtn">
                <label for="q01-1-yes" onclick="questionCheck.qNum(this)" data-question="ans02_1">
                    <input type="radio" name="q01" id="q01-1-yes">
                    <span>Yes</span>
                </label>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q01-1-no" onclick="questionCheck.qNum(this)" data-question="ans02_2"><input type="radio" name="q01" id="q01-1-no"><span>No</span></label>
            </div>
        </div>
    </div>
    <div class="center question__box js-qBox js-q02">
        <span class="title"><b>Question</b></span>
        <div class="question"><span class="border">01</span>→<span class="number">02</span>→<span class="border">03</span>→<span class="border">04</span>→<span class="border">05</span></div>
        <div class="words">ここに文章を追加できます<br>改行してさらに追加が可能</div>
        <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/796772/35242dc7-0391-4478-aaa0-f4b18eb11faf.png" class="lazyload" draggable="false" height="380" width="570">
        <div class="btn_list js-btnList js-ans02_1">
            <div class="answerBtn__list yesBtn">
                <label for="q02-1-yes" onclick="questionCheck.qNum(this)" data-question="ans03_1"><input type="radio" name="q02" id="q02-1-yes"><span>Yes</span></label>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q02-1-no" onclick="questionCheck.qNum(this)" data-question="ans03_2"><input type="radio" name="q02" id="q02-1-no"><span>No</span></label>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans02_2">
            <div class="answerBtn__list yesBtn">
                <label for="q02-2-yes" onclick="questionCheck.qNum(this)" data-question="ans03_3"><input type="radio" name="q02" id="q02-2-yes"><span>Yes</span></label>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q02-2-no" onclick="questionCheck.qNum(this)" data-question="ans03_4"><input type="radio" name="q02" id="q02-2-no"><span>No</span></label>
            </div>
        </div>
    </div>
    <div class="center question__box js-qBox js-q03">
        <span class="title"><b>Question</b></span>
        <div class="question"><span class="border">01</span>→<span class="border">02</span>→<span class="number">03</span>→<span class="border">04</span>→<span class="border">05</span></div>
        <div class="words">ここに文章を追加できます<br>改行してさらに追加が可能</div>
        <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/796772/35242dc7-0391-4478-aaa0-f4b18eb11faf.png" class="lazyload" draggable="false" height="380" width="570">
        <div class="btn_list js-btnList js-ans03_1">
            <div class="answerBtn__list yesBtn">
                <label for="q03-1-yes" onclick="questionCheck.qNum(this)" data-question="ans04_1"><input type="radio" name="q03" id="q03-1-yes"><span>Yes</span></label>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q03-1-no" onclick="questionCheck.qNum(this)" data-question="ans04_2"><input type="radio" name="q03" id="q03-1-no"><span>No</span></label>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans03_2">
            <div class="answerBtn__list yesBtn">
                <label for="q03-2-yes" onclick="questionCheck.qNum(this)" data-question="ans04_3"><input type="radio" name="q03" id="q03-2-yes"><span>Yes</span></label>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q03-2-no" onclick="questionCheck.qNum(this)" data-question="ans04_4"><input type="radio" name="q03" id="q03-2-no"><span>No</span></label>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans03_3">
            <div class="answerBtn__list yesBtn">
                <label for="q03-3-yes" onclick="questionCheck.qNum(this)" data-question="ans04_5"><input type="radio" name="q03" id="q03-3-yes"><span>Yes</span></label>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q03-3-no" onclick="questionCheck.qNum(this)" data-question="ans04_6"><input type="radio" name="q03" id="q03-3-no"><span>No</span></label>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans03_4">
            <div class="answerBtn__list yesBtn">
                <label for="q03-4-yes" onclick="questionCheck.qNum(this)" data-question="ans04_7"><input type="radio" name="q03" id="q03-4-yes"><span>Yes</span></label>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q03-4-no" onclick="questionCheck.qNum(this)" data-question="ans04_8"><input type="radio" name="q03" id="q03-4-no"><span>No</span></label>
            </div>
        </div>
    </div>
    <div class="center question__box js-qBox js-q04">
        <span class="title"><b>Question</b></span>
        <div class="question"><span class="border">01</span>→<span class="border">02</span>→<span class="border">03</span>→<span class="number">04</span>→<span class="border">05</span></div>
        <div class="words">ここに文章を追加できます<br>改行してさらに追加が可能</div>
        <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/796772/35242dc7-0391-4478-aaa0-f4b18eb11faf.png" class="lazyload" draggable="false" height="380" width="570">
        <div class="btn_list js-btnList js-ans04_1">
            <div class="answerBtn__list yesBtn">
                <label for="q04-1-yes" onclick="questionCheck.qNum(this)" data-question="ans05_1"><input type="radio" name="q04" id="q04-1-yes"><span>Yes</span></label>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q04-1-no" onclick="questionCheck.qNum(this)" data-question="ans05_2"><input type="radio" name="q04" id="q04-1-no"><span>No</span></label>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans04_2">
            <div class="answerBtn__list yesBtn">
                <label for="q04-2-yes" onclick="questionCheck.qNum(this)" data-question="ans05_3"><input type="radio" name="q04" id="q04-2-yes"><span>Yes</span></label>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q04-2-no" onclick="questionCheck.qNum(this)" data-question="ans05_4"><input type="radio" name="q04" id="q04-2-no"><span>No</span></label>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans04_3">
            <div class="answerBtn__list yesBtn">
                <label for="q04-3-yes" onclick="questionCheck.qNum(this)" data-question="ans05_5"><input type="radio" name="q04" id="q04-3-yes"><span>Yes</span></label>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q04-3-no" onclick="questionCheck.qNum(this)" data-question="ans05_6"><input type="radio" name="q04" id="q04-3-no"><span>No</span></label>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans04_4">
            <div class="answerBtn__list yesBtn">
                <label for="q04-4-yes" onclick="questionCheck.qNum(this)" data-question="ans05_7"><input type="radio" name="q04" id="q04-4-yes"><span>Yes</span></label>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q04-4-no" onclick="questionCheck.qNum(this)" data-question="ans05_8"><input type="radio" name="q04" id="q04-4-no"><span>No</span></label>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans04_5">
            <div class="answerBtn__list yesBtn">
                <label for="q04-5-yes" onclick="questionCheck.qNum(this)" data-question="ans05_9"><input type="radio" name="q04" id="q04-5-yes"><span>Yes</span></label>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q04-5-no" onclick="questionCheck.qNum(this)" data-question="ans05_10"><input type="radio" name="q04" id="q04-5-no"><span>No</span></label>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans04_6">
            <div class="answerBtn__list yesBtn">
                <label for="q04-6-yes" onclick="questionCheck.qNum(this)" data-question="ans05_11"><input type="radio" name="q04" id="q04-6-yes"><span>Yes</span></label>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q04-6-no" onclick="questionCheck.qNum(this)" data-question="ans05_12"><input type="radio" name="q04" id="q04-6-no"><span>No</span></label>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans04_7">
            <div class="answerBtn__list yesBtn">
                <label for="q04-7-yes" onclick="questionCheck.qNum(this)" data-question="ans05_13"><input type="radio" name="q04" id="q04-7-yes"><span>Yes</span></label>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q04-7-no" onclick="questionCheck.qNum(this)" data-question="ans05_14"><input type="radio" name="q04" id="q04-7-no"><span>No</span></label>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans04_8">
            <div class="answerBtn__list yesBtn">
                <label for="q04-8-yes" onclick="questionCheck.qNum(this)" data-question="ans05_15"><input type="radio" name="q04" id="q04-8-yes"><span>Yes</span></label>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q04-8-no" onclick="questionCheck.qNum(this)" data-question="ans05_16"><input type="radio" name="q04" id="q04-8-no"><span>No</span></label>
            </div>
        </div>
    </div>
    <div class="center question__box js-qBox js-q05">
        <span class="title"><b>Question</b></span>
        <div class="question"><span class="border">01</span>→<span class="border">02</span>→<span class="border">03</span>→<span class="border">04</span>→<span class="number">05</span></div>
        <div class="words">ここに文章を追加できます<br>改行してさらに追加が可能</div>
        <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/796772/35242dc7-0391-4478-aaa0-f4b18eb11faf.png" class="lazyload" draggable="false" height="380" width="570">
        <div class="btn_list js-btnList js-ans05_1">
            <div class="answerBtn__list yesBtn">
                <label for="q05-1-yes" onclick="questionCheck.aLink($(this))" data-sb-tracking="true">
                    <input type="radio" name="q05" id="q05-1-yes">
                    <span>Yes</span>
                </label>
                <!-- ↓回答ボタンを押すとスライドで表示される部分ここから↓ -->
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
                <!-- ↑回答ボタンを押すとスライドで表示される部分ここまで↑ -->
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q05-1-no" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-1-no"><span>No</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans05_2">
            <div class="answerBtn__list yesBtn">
                <label for="q05-2-yes" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-2-yes"><span>Yes</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q05-2-no" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-2-no"><span>No</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans05_3">
            <div class="answerBtn__list yesBtn">
                <label for="q05-3-yes" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-3-yes"><span>Yes</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q05-3-no" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-3-no"><span>No</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans05_4">
            <div class="answerBtn__list yesBtn">
                <label for="q05-4-yes" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-4-yes"><span>Yes</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q05-4-no" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-4-no"><span>No</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans05_5">
            <div class="answerBtn__list yesBtn">
                <label for="q05-5-yes" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-5-yes"><span>Yes</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q05-5-no" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-5-no"><span>No</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans05_6">
            <div class="answerBtn__list yesBtn">
                <label for="q05-6-yes" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-6-yes"><span>Yes</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q05-6-no" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-6-no"><span>No</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans05_7">
            <div class="answerBtn__list yesBtn">
                <label for="q05-7-yes" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-7-yes"><span>Yes</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q05-7-no" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-7-no"><span>No</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans05_8">
            <div class="answerBtn__list yesBtn">
                <label for="q05-8-yes" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-8-yes"><span>Yes</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q05-8-no" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-8-no"><span>No</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans05_9">
            <div class="answerBtn__list yesBtn">
                <label for="q05-9-yes" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-9-yes"><span>Yes</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q05-9-no" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-9-no"><span>No</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans05_10">
            <div class="answerBtn__list yesBtn">
                <label for="q05-10-yes" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-10-yes"><span>Yes</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q05-10-no" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-10-no"><span>No</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans05_11">
            <div class="answerBtn__list yesBtn">
                <label for="q05-11-yes" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-11-yes"><span>Yes</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q05-11-no" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-11-no"><span>No</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans05_12">
            <div class="answerBtn__list yesBtn">
                <label for="q05-12-yes" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-12-yes"><span>Yes</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q05-12-no" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-12-no"><span>No</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans05_13">
            <div class="answerBtn__list yesBtn">
                <label for="q05-13-yes" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-13-yes"><span>Yes</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q05-13-no" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-13-no"><span>No</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans05_14">
            <div class="answerBtn__list yesBtn">
                <label for="q05-14-yes" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-14-yes"><span>Yes</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q05-14-no" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-14-no"><span>No</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans05_15">
            <div class="answerBtn__list yesBtn">
                <label for="q05-15-yes" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-15-yes"><span>Yes</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q05-15-no" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-15-no"><span>No</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
        </div>
        <div class="btn_list js-btnList js-ans05_16">
            <div class="answerBtn__list yesBtn">
                <label for="q05-16-yes" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-16-yes"><span>Yes</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
            <div class="answerBtn__list noBtn">
                <label for="q05-16-no" onclick="questionCheck.aLink($(this))" data-sb-tracking="true"><input type="radio" name="q05" id="q05-16-no"><span>No</span></label>
                <div class="js-slide c-slideitem">回答ボタンを押すとスライドで表示される部分</div>
            </div>
        </div>
    </div>
</div>

CSS

 .center {
  text-align: center;
}

 .title {
  color: #b22222;
  font-size: 20px;
}

 .question {
  margin: 10px 0;
  font-weight: bold;
}

 .number {
  display: inline-flex;
  width: 70px;
  height: 70px;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  background-color: #b22222;
  border-radius: 50%;
  padding: 15px;
  color: #fff;
  margin: 0 10px;
  font-size: 20px;
}

 .border {
  display: inline-flex;
  justify-content: center;
  border: 2px solid #cd5c5c;
  border-radius: 50%;
  padding: 15px;
  color: #cd5c5c;
  margin: 0 10px;
  font-size: 20px;
  width: 70px;
  height: 70px;
  align-items: center;
  box-sizing: border-box;
}

@media screen and (max-width: 620px) {
   .number {
    width: 40px;
    height: 40px;
    padding: 5px;
    margin: 0 8px;
  }

   .border {
    padding: 5px;
    margin: 0 8px;
    width: 40px;
    height: 40px;
  }
}

 .words {
  color: #fff;
  background-color: #b22222;
  padding: 20px 0;
  margin: 10px 0;
  max-width: unset;
  font-size: 23px;
}

 img {
  margin: 0 auto;
}

 ul,
 li,
 label,
 span {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  max-height: 99999px;
}

 .btn_list {
  overflow: hidden;
  padding: 4.68% 9.37% 5% 9.37%;
  display: flex;
}

 .btn_list li:first-child,
 .btn_list .answerBtn__list.yesBtn {
  padding-right: 2%;
}

 .btn_list li,
 .btn_list .answerBtn__list {
  width: 50%;
}

 .radio-input,
 .btn_list .answerBtn__list input {
  display: none;
}

 input[type='radio']:checked+.y01,
 input[type='radio']:checked+.n01,
 label:not(.is-disabled) .input_img:hover,
 .btn_list .answerBtn__list label:not(.is-disabled) input[type='radio']:checked+span,
 .btn_list .answerBtn__list label:not(.is-disabled) input[type='radio']+span:hover {
  margin-top: 3px;
  color: #fff;
  background: #f56500;
  border-bottom: 2px solid #b84c00;
}

 .input_img,
 .btn_list .answerBtn__list label input[type='radio']+span {
  display: block;
  width: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 10%;
  border-radius: 8px;
  cursor: pointer;
  font-size: 8vw;
  line-height: 1;
  color: #fff;
  font-weight: bold;
  background: #aaa;
  border-bottom: 5px solid #666;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  transition: all 0.3s;
  box-sizing: border-box;
}

 .btn_list .answerBtn__list label.is-disabled input[type='radio']+span {
  cursor: not-allowed;
}

@media (min-width: 620px) {

   .input_img,
   .btn_list .answerBtn__list label input[type='radio']+span {
    font-size: 50px;
  }
}

 .btn_list li:last-child {
  padding-left: 2%;
}

 .step_arr {
  position: relative;
  padding-top: 22vw;
  margin-top: -4vw;
}

 .step_arr span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 10vw;
  height: 10vw;
  margin-left: -5vw;
  border-left: 1px solid #333;
  border-bottom: 1px solid #333;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  opacity: 0;
  box-sizing: border-box;
}

 .step_arr span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

 .step_arr span:nth-of-type(2) {
  top: 4vw;
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
}

 .step_arr span:nth-of-type(3) {
  top: 8vw;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

@-webkit-keyframes sdb {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes sdb {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@media (min-width: 620px) {
   .step_arr {
    position: relative;
    padding-top: 136px;
    margin-top: -25px;
  }

   .step_arr span {
    width: 62px;
    height: 62px;
    margin-left: -31px;
  }

   .step_arr span:nth-of-type(2) {
    top: 24.8px;
  }

   .step_arr span:nth-of-type(3) {
    top: 49.6px;
  }
}

 .question__box {
  display: none;
}

 .btn_list {
  display: none;
}

 .is-active {
  display: block;
}

 .btn_list.is-active {
  display: flex;
}

 .c-slideitem {
  font-size: 20px;
  color: #333;
  margin-top: 10px;
  padding: 10px;
  background: #95d5e7;
  text-align: left;
  width: 204%;
  display: none;
  box-sizing: border-box;
  max-width: unset;
}

 .btn_list .answerBtn__list:nth-child(odd) .c-slideitem {
  background: #ffa500;
}

 .btn_list .answerBtn__list:nth-child(even) .c-slideitem {
  background: #ffc0cb;
  right: 50%;
  transform: translateX(-50%);
}