最後の設問および最終コンテンツがWidgetの仕様に沿っていないために生じております。

Widgetの仕様通り、最後の設問および最終コンテンツも他の設問と同じHTML構成にする事で、ご要望通りの動作となります。

修正の流れとしましては下記になります。

1. 最後の設問に設定されている ページ内リンクの a タグを削除
2. 矢印のHTMLを設問と同じHTML内に設置
3. お好みに応じて、横線を削除してデザインを整える

1. 最後の設問に設定されている ページ内リンクの a タグを削除

[ 修正前 ]

<a href= "#heading1" draggable='false'> ※ここを削除する
  <div class="questionArea js-form-radio">
    <h2 class="title">ボディアーキのどこに魅力を感じますか？</h2>
      ... 省略 ...
　<a/>※ここを削除する

[ 修正後 ]

<div class="questionArea js-form-radio">
  <h2 class="title">ボディアーキのどこに魅力を感じますか？</h2>
  ... 省略 ...
</div>

2. 矢印のHTMLを設問と同じHTML内に設置

現在Widget外に設置されている矢印のWidgetを、設問と同じHTML内に設置します。

CSSもまるっと切り取ってアンケートのCSSの一番下に挿入してください。

なお、コードを移した後は、もともと設置していた矢印のWidgetは削除してください。

<div class="questionArea js-form-radio">
  ... 設問1 ...
</div>
<div class="questionArea js-form-radio">
  ... 設問2 ...
</div>
<div class="questionArea js-form-radio">
  ... 設問3 ...
</div>
<div class="questionArea js-form-radio">
  ... 設問4 ...
</div>
<div class="questionArea js-form-radio"> 　※追加箇所ここから
 <div class="cp_arrows">
    <div class="cp_arrow cp_arrowfirst"></div>
    <div class="cp_arrow cp_arrowsecond"></div>
</div>
  </div>　　※追加箇所ここまで
</form>
</div>　

3. お好みに応じて、横線を削除してデザインを整える

ステップ2までHTMLを編集すると、矢印の下に横線が発生します。

この横線を削除したい場合は、CSS内を以下のように調整してください。

[ 修正前 ]

 .question-reveal-scroll .questionArea {
  margin-bottom: 30px;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #cccccc; ※none　に変更
}

[ 修正後]

 .question-reveal-scroll .questionArea {
  margin-bottom: 30px;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  border-bottom: none; 
}