デザインが全てラジオボタンのアンケート

下記Beyondコード

JS head

なし

HTML

<div class="radiocheck__area">
<div class="checkItem__box">
<div class="qNum__box">
<p class="qNum">Q1</p>
        </div>
<div class="head__box">
<p class="head">質問<sup>※</sup>が入ります。質問が入ります。</p>
        </div>

        
<div class="check__box">
            <input type="radio" name="q1" id="q1-1"><label for="q1-1">回答1-1</label><input type="radio" name="q1" id="q1-2"><label for="q1-2">回答1-2</label>
        </div>        
<p class="attention">※注意書きが入ります</p></div>

<div class="checkItem__box">
<div class="qNum__box">
<p class="qNum">Q2</p></div>
<div class="head__box"><p class="head">質問が入ります。（複数選択可）</p></div>
<div class="check__box">
<input type="checkbox" name="q2" id="q2-1"><label for="q2-1">回答2-1</label>
<input type="checkbox" name="q2" id="q2-2"><label for="q2-2">回答2-2</label>
        </div>

    </div>


    
<div class="resultItem__box">
        <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" height="380" width="570" draggable="false">
    </div>


    
<div class="fingerBtn__area">
        <a href="ooooo" class="btn" draggable="false"><span class="_small">テキストが</span><br>
入ります
            <span class="fingerImg">
                <img src="https://d24894ewhzyuok.cloudfront.net/uploads/article_photo/photo/1150211/33b233d6-e386-4a1a-a710-c36f66893446.png" alt="指" draggable="false" height="46" width="50">
            </span></a>
    </div>
</div>

CSS

 .radiocheck__area {
  width: 100%;
  height: auto;
}

 .checkItem__box {
  width: 100%;
  padding: 20px 0;
}

 .checkItem__box+.checkItem__box {
  border-top: 1px solid #D45D87;
}

 .qNum {
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  width: 150px;
  height: auto;
  padding: 5px 0;
  margin: 0;
  border-radius: 5px;
  background: #D45D87;
  position: relative;
}

 .qNum:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #d45d87 transparent transparent transparent;
  position: absolute;
  bottom: -13px;
  left: 45%;
  transform: translateY(-45%);
}

 .head__box .head {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 0;
}

@media screen and (max-width:600px) {
   .head__box .head {
    font-size: 20px;
  }
}

 .head__box .head sup {
  font-size: 16px;
}

 .check__box {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

 .check__box input {
  display: none;
}

 .check__box label {
  position: relative;
  font-size: 16px;
  color: #333;
  margin-top: 10px;
  padding-left: 25px;
}

 .check__box input[type="radio"]+label:before,
 .check__box input[type="checkbox"]+label:before {
  content: '';
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  background: #eee;
  border-radius: 8px;
  position: absolute;
  top: 3px;
  left: 0;
}

 .check__box input[type="radio"]:checked+label:after,
 .check__box input[type="checkbox"]:checked+label:after {
  content: '';
  width: 12px;
  height: 12px;
  background: #d45d87;
  border-radius: 6px;
  position: absolute;
  top: 6px;
  left: 3px;
}

 .attention {
  margin: 30px 0 0;
  font-size: 12px;
  color: #666;
}

 .attention+.attention {
  margin-top: 5px;
}

 .resultItem__box {
  margin-top: 30px;
}

 .resultItem__box img {
  width: 100%;
  height: auto;
}

 .fingerBtn__area {
  width: 100%;
  height: auto;
  margin-top: 30px;
}

 .btn {
  width: 80%;
  max-width: 500px;
  height: auto;
  margin: 0 auto;
  padding: 8px 0;
  background: #d45d87;
  color: #fff;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  display: block;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 3px 1px #BF1E56;
  line-height: 1.3;
  transition: opacity 0.2s;
  opacity: 1;
}

 .btn:hover {
  opacity: 0.8;
}

 .btn .fingerImg {
  position: absolute;
  bottom: -30px;
  right: -5px;
  width: 50px;
  height: auto;
}

 .fingerImg img {
  width: 100%;
  height: auto;
}