以下でご確認いただけますと幸いです…！

◾️記事プレビュー

https://sb-draft-preview.squadbeyond.com/articles/PqX_lRuJXbpdTcZaNbUA/draft?token=a3c036845f2a0cbc851c6a7df91f8ee7

◾️HTML

<script>

var sbScrollRevealEnqueteSelect = sbScrollRevealEnqueteSelect || {};

(function(_) {

const target = ‘.js-scroll-reveal-enquete-select’;

const radioSet = ‘.js-form-radio’;

const setting = {

duration: 600,

};

function getOption(el) {

let option = Object.assign({}, setting);

let dataset = Object.assign({}, el.dataset);

return Object.assign(option, dataset);

}

_.scrollTo = function(end, duration) {

const startTime = Date.now();

const easeOut = (p) => p * (2 – p);

const start = window.pageYOffset;

const range = end – start;

let position = 0;

var move = function() {

const elapsedTime = Date.now() – startTime;

const progress = elapsedTime / duration;

position = start + range * easeOut(progress);

if (progress < 1) {

window.scrollTo(0, position);

requestAnimationFrame(move);

} else {

window.scrollTo(0, end);

return;

}

};

requestAnimationFrame(move);

};

_.scrollEnquete = function(selectors) {

let elList = document.querySelectorAll(selectors);

elList.forEach(function(el) {

let option = getOption(el);

let radioName = [];

let radioList = el.querySelectorAll(‘input[type=”checkbox”]:not([data-ignore]), input[type=”radio”]:not([data-ignore])’);

radioList.forEach((radio) => {

radioName.push(radio.name);

radio.addEventListener(‘change’, (e) => {

let self = e.target;

let list = el.querySelectorAll(radioSet);

let current = self.closest(radioSet);

let currentNo = Array.prototype.indexOf.call(list, current);

let finishBtn = el.querySelector(‘.js-switch-btn’);

let next;

if (list.length > currentNo + 1) {

next = list[currentNo + 1];

} else {

next = finishBtn;

}

let scrollPoint = next.getBoundingClientRect().top + window.pageYOffset;

_.scrollTo(scrollPoint, option.duration);

let btnFlg = true;

let form = el.querySelector(‘form[name=”form-scroll-enquete”]’);

radioName.forEach((name) => {

let radioGroup = form[name];

if (!radioGroup.value) {

btnFlg = false;

}

});

});

});

radioName = new Set(radioName);

});

};

_.revealBtn = function(selectors) {

let elList = document.querySelectorAll(selectors);

elList.forEach(function(el) {

var hiddenClass = ‘is-hidden’;

var completeBtn = el.querySelector(‘.js-send’);

var revealArea = el.querySelector(‘.js-reveal’);

completeBtn.addEventListener(‘click’, function() {

revealArea.classList.toggle(hiddenClass);

});

});

};

_.init = function() {

_.scrollEnquete(target);

_.revealBtn(target);

};

})(sbScrollRevealEnqueteSelect);

</script>

<script>

document.addEventListener(‘DOMContentLoaded’, sbScrollRevealEnqueteWithRevealHiddenCase.init, false);

</script>

<div class=”question-reveal-scroll js-scroll-reveal-enquete-with-reveal”>

<form name=”form-scroll-enquete”>

<div class=”questionArea js-form-radio”>

<div class=”question__numBox”>

<ul class=”numItems”>

<li class=”item current”>01</li>

<li class=”item”>02</li>

<li class=”item”>03</li>

<li class=”item”>04</li>

</ul>

</div>

<h2 class=”title”>

<span class=”mark”>Q1</span>今の体型を変えたいと思いますか？<br>

</h2>

<div class=”questionImg”>

<picture>

<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249985/3e598dff-fb91-422f-9a1d-25973149ca8f.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249985/3e598dff-fb91-422f-9a1d-25973149ca8f.jpg” width=”735″ height=”490″ draggable=”false” class=”lazyload”>

</picture>

</div>

<div class=”linkbox btn-two”>

<input id=”q1-1″ type=”radio” name=”q1″ data-show=”q1-1″><label for=”q1-1″>

<div class=”btn”>はい</div>

</label><input id=”q1-2″ type=”radio” name=”q1″ data-show=”q1-2″><label for=”q1-2″>

<div class=”btn”>いいえ</div>

</label>

</div>

</div>

<div class=”questionArea js-form-radio”>

<div class=”question__numBox”>

<ul class=”numItems”>

<li class=”item”>01</li>

<li class=”item current”>02</li>

<li class=”item”>03</li>

<li class=”item”>04</li>

</ul>

</div>

<h2 class=”title”>

<span class=”mark”>Q2</span>一番気になる部位はどこですか？<br>

</h2>

<div class=”questionImg”>

<picture>

<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249994/3c4798f0-dd3e-432b-b067-65ce5340a4e0.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249994/3c4798f0-dd3e-432b-b067-65ce5340a4e0.jpg” width=”735″ height=”490″ draggable=”false” class=”lazyload”>

</picture>

</div>

<div class=”linkbox”>

<input id=”q2-1″ type=”radio” name=”q2″ data-show=”q2-1″><label for=”q2-1″>

<div class=”btn”>お腹周り</div>

</label><input id=”q2-2″ type=”radio” name=”q2″ data-show=”q2-2″><label for=”q2-2″>

<div class=”btn”>二の腕</div>

</label><input id=”q2-3″ type=”radio” name=”q2″ data-show=”q2-3″><label for=”q2-3″>

<div class=”btn”>足、太もも</div>

</label><input id=”q2-4″ type=”radio” name=”q2″ data-show=”q2-4″><label for=”q2-4″>

<div class=”btn”>顔まわり</div>

</label>

</div>

</div>

<div class=”questionArea js-form-radio”>

<div class=”question__numBox”>

<ul class=”numItems”>

<li class=”item”>01</li>

<li class=”item”>02</li>

<li class=”item current”>03</li>

<li class=”item”>04</li>

</ul>

</div>

<h2 class=”title”>

<span class=”mark”>Q3</span>痩せることができたら何がしたいですか？<br>

</h2>

<div class=”questionImg”>

<picture>

<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250021/17141f66-fa6e-48f4-abea-f5f56912e938.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250021/17141f66-fa6e-48f4-abea-f5f56912e938.jpg” width=”735″ height=”490″ draggable=”false” class=”lazyload”>

</picture>

</div>

<div class=”linkbox”>

<input id=”q3-1″ type=”radio” name=”q3″ data-show=”q3-1″><label for=”q3-1″>

<div class=”btn”>着たかった洋服を着て楽しみたい！</div>

</label><input id=”q3-2″ type=”radio” name=”q3″ data-show=”q3-2″><label for=”q3-2″>

<div class=”btn”>罪悪感なく美味しいものを食べたい！</div>

</label><input id=”q3-3″ type=”radio” name=”q3″ data-show=”q3-3″><label for=”q3-3″>

<div class=”btn”>周りの人から褒められたい！</div>

</label><input id=”q3-4″ type=”radio” name=”q3″ data-show=”q3-4″><label for=”q3-4″>

<div class=”btn”>好きな人にアプローチしたい！</div>

</label>

</div>

</div>

<div class=”questionArea js-form-radio”>

<div class=”question__numBox”>

<ul class=”numItems”>

<li class=”item”>01</li>

<li class=”item”>02</li>

<li class=”item”>03</li>

<li class=”item current”>04</li>

</ul>

</div>

<h2 class=”title”>

<span class=”mark”>Q4</span>理想の姿になれる医療痩身に興味はありますか？<br>

</h2>

<div class=”questionImg”>

<picture>

<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250029/9b57400a-2fdb-4e8b-9e21-31765a29572e.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250029/9b57400a-2fdb-4e8b-9e21-31765a29572e.png” width=”735″ height=”490″ draggable=”false” class=”lazyload”>

</picture>

</div>

<a href=”#heading1″>

<div class=”linkbox btn-two”>

<input id=”q4-1″ type=”radio” name=”q4″ data-show=”q4-1″><label for=”q4-1″>

<div class=”btn”>はい</div>

</label><input id=”q4-2″ type=”radio” name=”q4″ data-show=”q4-2″><label for=”q4-2″>

<div class=”btn”>いいえ</div>

</label>

</div>

<div class=”step_arr”>

<span></span><span></span><span></span>

</div>

</a>

</div>

</form>

</div>

◾️CSS

.question-reveal-scroll {

width: 970px;

max-width: 100%;

font-size: 16px;

background-color: #fff;

margin: 0 auto 20px;

padding: 0;

line-height: 1.5;

box-sizing: border-box;

}

.question-reveal-scroll .questionArea {

display: flex;

flex-direction: column;

}

.question-reveal-scroll .question__numBox {

width: 100%;

height: auto;

}

.question-reveal-scroll .question__numBox .numItems {

width: 100%;

list-style: none;

display: flex;

justify-content: center;

align-items: center;

padding-left: 0;

}

.question-reveal-scroll .question__numBox .numItems .item {

font-size: 20px;

color: #fff;

background: #ccc;

width: 60px;

height: 60px;

border-radius: 30px;

display: flex;

justify-content: center;

align-items: center;

margin-right: 2em;

position: relative;

}

.question-reveal-scroll .question__numBox .numItems .item.current {

background: #EAA8BF;

}

.question-reveal-scroll .question__numBox .numItems .item:after {

content: ‘→’;

position: absolute;

top: 50%;

right: -2em;

color: #ccc;

font-size: 14px;

transform: translateY(-50%);

}

.question-reveal-scroll .question__numBox .numItems .item:last-of-type {

margin-right: 0;

}

.question-reveal-scroll .question__numBox .numItems .item:last-of-type:after {

content: none;

}

.question-reveal-scroll .title {

width: calc(100% – 10px);

color: #fff;

background-color: #EAA8BF;

font-size: 20px;

font-weight: 600;

margin: 0 auto 30px;

padding: 15px 5px;

display: flex;

flex-direction: column;

align-items: center;

}

.question-reveal-scroll .title .mark {

font-size: 34px;

margin-right: 15px;

color: #fff;

line-height: 1.1;

}

.question-reveal-scroll .questionImg,

.questionImg img {

width: 100%;

height: auto;

}

.question-reveal-scroll .linkbox {

width: 100%;

margin: 0 auto 40px;

padding: 0 15px;

text-align: left;

box-sizing: border-box;

}

.question-reveal-scroll input {

display: none;

}

.question-reveal-scroll input+label {

cursor: pointer;

border: none;

display: block;

}

.question-reveal-scroll input:not(:first-of-type)+label {

margin-top: 10px;

}

.question-reveal-scroll input+label .btn {

font-size: 14px;

border: 1px solid #ccc;

border-radius: 10px;

padding: 20px 0 20px 50px;

font-weight: bold;

background-color: #eee;

line-height: 1.6;

position: relative;

display: block;

}

.question-reveal-scroll input:checked+label .btn {

background-color: #3498db;

color: #ffffff;

}

.question-reveal-scroll input+label .btn::before {

width: 14px;

height: 14px;

top: 50%;

left: 10px;

margin-top: -8px;

background: #f3f3f3;

border: 1px solid #ccc;

position: absolute;

content: ”;

transition: all 0.2s;

}

.question-reveal-scroll input[type=’radio’]+label .btn::before {

border-radius: 100%;

}

.question-reveal-scroll input+label .btn:focus {

outline: none !important;

}

.question-reveal-scroll input[type=’checkbox’]+label .btn:after {

top: 55%;

left: 13px;

width: 8px;

height: 4px;

margin-top: -8px;

border-left: 2px solid #3498db;

border-bottom: 2px solid #3498db;

transform: rotate(-45deg) scale(0.5);

position: absolute;

transition: all 0.2s;

content: ”;

opacity: 0;

}

.question-reveal-scroll input[type=’radio’]+label .btn:after {

top: 48%;

left: 13px;

width: 10px;

height: 10px;

margin-top: -4px;

background: #3498db;

transform: scale(2);

border-radius: 100%;

opacity: 0;

position: absolute;

content: ”;

transition: all 0.2s;

}

.question-reveal-scroll input[type=’checkbox’]:checked+label .btn:after {

opacity: 1;

transform: rotate(-45deg) scale(1);

}

.question-reveal-scroll input[type=’radio’]:checked+label .btn::after {

opacity: 1;

transform: scale(1);

}

.question-reveal-scroll ::-moz-focus-inner {

border-color: transparent;

}

.question-reveal-scroll .linkbox.btn-two {

text-align: center;

}

.question-reveal-scroll .linkbox.btn-two label {

width: 48%;

padding: 10px;

box-sizing: border-box;

display: inline-block;

}

.question-reveal-scroll .linkbox.btn-two .btn {

font-size: 34px;

color: #fff;

background: #3f3f3f;

padding: 10px;

text-align: center;

border: none;

border-radius: 10px;

box-shadow: 0 10px 0 #000;

transition: all 0.2s;

cursor: pointer;

}

.question-reveal-scroll .linkbox.btn-two input:checked+label .btn {

background: #bc0a1f;

box-shadow: 0 10px 0 #7d1521;

}

.question-reveal-scroll .linkbox.btn-two input+label .btn::before,

.question-reveal-scroll .linkbox.btn-two input+label .btn::after {

content: none;

}

.question-reveal-scroll .questionArea.not-checked .linkbox::after {

content: “回答してください”;

font-size: 14px;

color: #ff0000;

display: block;

text-align: right;

padding: 1em;

}

.revealarea {

font-size: 1.2rem;

text-align: left;

margin: 3rem auto 0;

padding: 0;

box-sizing: border-box;

}

.revealarea img {

max-width: 100%;

height: auto;

}

.is-hidden {

display: none;

}

.hidden-image {

display: none;

margin: 10px 0;

}

.hidden-image img {

margin: 0 auto;

}

.linkbox.btn-two.vertical {

display: grid;

width: 80%;

margin: 10px auto;

}

.linkbox.btn-two.vertical label {

display: block;

width: 100%;

}

@media screen and (min-width: 700px) {

.question-reveal-scroll .questionArea {

margin: 50px auto 80px;

max-width: 970px;

}

.question-reveal-scroll .title {

margin: 0 0 20px;

font-size: 24px;

}

.question-reveal-scroll .title .mark {

font-size: 28px;

}

.question-reveal-scroll input+label .btn {

font-size: 24px;

}

.question-reveal-scroll .linkbox {

margin: 70px auto 20px;

}

.question-reveal-scroll input+label .btn::before {

width: 28px;

height: 28px;

top: 41%;

}

.question-reveal-scroll input[type=’checkbox’]+label .btn::before {

top: 39%;

width: 30px;

height: 30px;

}

.question-reveal-scroll input[type=’checkbox’]+label .btn:after {

top: 51%;

left: 16px;

width: 16px;

height: 8px;

border-left-width: 4px;

border-bottom-width: 4px;

}

.question-reveal-scroll input[type=’radio’]+label .btn:after {

top: 43%;

left: 15px;

width: 20px;

height: 20px;

}

.question-reveal-scroll .linkbox.btn-two .btn {

font-size: 50px;

}

}

.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;

}

@media screen and (min-width:700px) {

.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;

}

}

@keyframes sdb {

0% {

opacity: 0;

}

50% {

opacity: 1;

}

100% {

opacity: 0;

}

}