-
お待たせいたしました！
下記コードに入れ替えてください！
【HTML】===============================
<div class=”question-reveal-scroll js-scroll-reveal-enquete-select”>
<form name=”form-scroll-enquete”>
<div class=”questionArea js-form-radio”>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820222/0165ba83-adf8-4335-8acc-93c4fafe1ec9.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820222/0165ba83-adf8-4335-8acc-93c4fafe1ec9.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820222/0165ba83-adf8-4335-8acc-93c4fafe1ec9.jpg” width=”718″ height=”233″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”navi”>
<div class=”navi__numbers”><span class=”current”>01</span><span>02</span><span>03</span></div>
</div>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2324342/d0b257dc-482c-497a-aacd-7688e6a83220.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2324342/d0b257dc-482c-497a-aacd-7688e6a83220.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2324342/d0b257dc-482c-497a-aacd-7688e6a83220.jpg” width=”718″ height=”403″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox”><input id=”q1-1″ type=”checkbox” name=”q1″><label for=”q1-1″>
<div class=”btn”>おでこ</div>
</label><input id=”q1-2″ type=”checkbox” name=”q1″><label for=”q1-2″>
<div class=”btn”>目元</div>
</label><input id=”q1-3″ type=”checkbox” name=”q1″><label for=”q1-3″>
<div class=”btn”>口元</div>
</label><input id=”q1-4″ type=”checkbox” name=”q1″><label for=”q1-4″>
<div class=”btn”>頬</div>
</label><input id=”q1-5″ type=”checkbox” name=”q1″><label for=”q1-5″>
<div class=”btn”>首</div>
</label><input id=”q1-6″ type=”checkbox” name=”q1″><label for=”q1-6″>
<div class=”btn”>その他</div>
</label></div>
</div>
<div class=”questionArea js-form-radio”>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820248/3c2afabb-74e8-4926-8bbc-b77b0d32b474.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820248/3c2afabb-74e8-4926-8bbc-b77b0d32b474.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820248/3c2afabb-74e8-4926-8bbc-b77b0d32b474.jpg” width=”718″ height=”233″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”navi”>
<div class=”navi__numbers”><span>01</span><span class=”current”>02</span><span>03</span></div>
</div>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2336673/db304bf8-0404-45f4-85cd-90cde7ff950f.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2336673/db304bf8-0404-45f4-85cd-90cde7ff950f.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2336673/db304bf8-0404-45f4-85cd-90cde7ff950f.jpg” width=”718″ height=”478″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox”><input id=”q3-1″ type=”radio” name=”q3″><label for=”q3-1″>
<div class=”btn”>はい</div>
</label><input id=”q3-2″ type=”radio” name=”q3″><label for=”q3-2″>
<div class=”btn”>いいえ</div>
</label>
<div style=”text-align: left;”><span style=”font-size: 10px;”><br>※ ナイアシンアミドと7種のコラーゲンを配合した日本初の朝用・夜用「シワ改善」オールインワンシリーズ(2022年8月時点 TPCマーケティングリサーチ調べ)</span></div>
</div>
</div>
<div class=”questionArea js-form-radio”>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820277/16bc5c61-e3bb-4178-a8b0-b0fe38f6194e.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820277/16bc5c61-e3bb-4178-a8b0-b0fe38f6194e.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820277/16bc5c61-e3bb-4178-a8b0-b0fe38f6194e.jpg” width=”718″ height=”160″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”navi”>
<div class=”navi__numbers”><span>01</span><span>02</span><span class=”current”>03</span></div>
</div>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2322748/c4d0b4e0-17f5-478e-96e4-d58ac2999469.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2322748/c4d0b4e0-17f5-478e-96e4-d58ac2999469.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2322748/c4d0b4e0-17f5-478e-96e4-d58ac2999469.jpg” width=”718″ height=”478″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox”><input id=”q6-1″ type=”radio” name=”q6″><label for=”q6-1″>
<div class=”btn”>「朝用」「夜用」それぞれで、朝と夜の肌状態に合わせてしっかり使い分けができる。</div>
</label><input id=”q6-2″ type=”radio” name=”q6″><label for=”q6-2″>
<div class=”btn”>医薬部外品としてシワを改善する効果が認められている有効成分「ナイアシンアミド」が配合されている。</div>
</label><input id=”q6-3″ type=”radio” name=”q6″><label for=”q6-3″>
<div class=”btn”>「朝用オールインワン」でシワだけでなくシミ対策もできる。
<span style=”font-size: 10px;” class=”sb-fs-free”>※1</span>
</div>
</label><input id=”q6-4″ type=”radio” name=”q6″><label for=”q6-4″>
<div class=”btn”>「夜用オールインワン」はパック効果もあり、1つのケアだけでそのまま寝ることができる。</div>
</label><input id=”q6-5″ type=”radio” name=”q6″><label for=”q6-5″>
<div class=”btn”>朝用・夜用オールインワンで5年連続売り上げNo,1である。
<span style=”font-size: 10px;” class=”sb-fs-free”>※2</span>
</div>
</label>
<div style=”text-align: left;”><span style=”font-size: 10px;”><br>※1 紫外線対策をすることで、日やけによるシミを予防するということ
<br>※2 朝用・夜用のオールインワンのブランド別売上ランキング(2017年7月～2022年6月 TPCマーケティングリサーチ調べ)</span></div>
</div>
</div>
<div class=”send-btn js-switch-btn”><button class=”js-send” type=”button”>回答を完了する</button></div>
<div class=”revealarea js-reveal is-hidden”>
<div class=”js-scroll-point”></div>
<div class=”imagelastbox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820047/96233a08-7f4e-41f0-88d0-15b6c652f430.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820047/96233a08-7f4e-41f0-88d0-15b6c652f430.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820047/96233a08-7f4e-41f0-88d0-15b6c652f430.png” width=”538″ height=”358″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”arrowFlow__area”>
<div class=”arrowFlow__inner”>
<div class=”arrowFlow__beforeG”><span class=”arrow”></span><span class=”arrow”></span><span class=”arrow”></span></div>
<div class=”arrowFlow__afterG”><span class=”arrow”></span><span class=”arrow”></span><span class=”arrow”></span></div>
</div>
</div>
<picture><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2736196/cf6e6b63-4d04-46b3-a456-77caa88c23f4.jpg” height=”450″ width=”538″ draggable=”false” style=”margin: 0px auto;” class=”lazyload”></picture>
<div class=”button-box”><a href=”https://www.shizensyokuhin.jp/excludes/dmlite/lp/walim2209-sn/?utm_source=google-CG&utm_medium=reach&utm_campaign=WAL484AT_AR_CG&argument=zXKEm5gk&dmai=SSAD_d1022&sb_tracking=true”>
<div class=”button style button-color-green”><span class=”copy”>お一人様1回限りで</span><span class=”title2″> お得に試してみる </span></div>
</a></div>
<div><strong>さらにさらに！</strong></div>
<div><strong style=”color: rgb(230, 0, 0); background-color: rgb(255, 255, 204);”>はじめての方限定</strong><strong style=”background-color: rgb(255, 255, 204);”>で</strong></div>
<div><strong style=”color: rgb(230, 0, 0); background-color: rgb(255, 255, 204);”>大人かわいいポーチもプレゼント</strong><strong style=”background-color: rgb(255, 255, 204);”>で付いてきます！！</strong></div>
<picture><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2371737/8d5c85ee-6116-4758-b2c1-ca2caae3533a.png” height=”215″ width=”538″ draggable=”false” style=”margin: 0px auto;” class=”lazyload”></picture>
<div><br></div>
<div><strong style=”background-color: rgb(255, 255, 204);”>医薬部外品×シワ改善のスキンケアアイテム</strong><span style=”background-color: rgb(255, 255, 204);”>って</span></div>
<div><strong style=”background-color: rgb(255, 255, 204); color: rgb(230, 0, 0);”>試してみたくても高価なものが多くて中々踏み出せない</strong><strong style=”background-color: rgb(255, 255, 204);”>ですよね…</strong><strong>。</strong></div>
<div><br></div>
<div><strong>「シークのシワ改善オールインワン」</strong>は
</div>
<div><strong style=”color: rgb(230, 0, 0);”>各々1,000円（税込）でお試しできる</strong>のでとってもありがたいです！
</div>
<div><br></div>
<div><strong style=”color: rgb(0, 0, 0); font-size: 17px; background-color: rgb(255, 255, 255);”>しかも、</strong><strong style=”color: rgb(230, 0, 0); font-size: 17px; background-color: rgb(255, 255, 204);”>お試しといってもたっぷり約1ヵ月分！！</strong></div>
<div class=”box”>
<h3 class=”box-title”>お得にお試しできる4大ポイント！</h3>
<ol>
<li>まずは定期購入ではなく<font color=”#e60000″>買い切りで試せる！</font></li>
<li>
<font color=”#e60000″>送料無料</font>＆<font color=”#e60000″>お一人様1回限り！</font>
</li>
<li>
<font color=”#e60000″>たっぷり約1ヵ月分</font>を<font color=”#e60000″>各々1,000円でお試し</font>できる！
</li>
<li><b style=””>
<font color=”#e60000″>はじめての方限定</font>
<font color=”#000000″>で</font>
<font color=”#e60000″>大人かわいいポーチをプレゼント！</font>
</li>
</ol>
</div>
<div><strong style=”color: rgb(230, 0, 0); background-color: rgb(255, 255, 204);”>いつまでこのお得な割引キャンペーンをやっているかも分からない</strong><strong>ので、</strong></div>
<div><strong>少しでも気になっているなら、ぜひ試してみてくださいね♪</strong></div>
<div class=”button-box”><a href=”https://www.shizensyokuhin.jp/excludes/dmlite/lp/walim2209-sn/?utm_source=google-CG&utm_medium=reach&utm_campaign=WAL484AT_AR_CG&argument=zXKEm5gk&dmai=SSAD_d1022&sb_tracking=true”>
<div class=”button style button-color-green”><span class=”copy”>お一人様1回限りで</span><span class=”title2″> お得に試してみる </span></div>
</a></div>
</div>
</form>
</div>
【CSS】===============================
.question-reveal-scroll {
width: 750px;
max-width: 100%;
font-size: 16px;
background-color: #fff;
margin: 0 auto 1rem;
padding: 1rem 0;
line-height: 1.5;
box-sizing: border-box;
}
.question-reveal-scroll .questionArea {
margin-bottom: 30px;
padding-bottom: 30px;
display: flex;
flex-direction: column;
border-bottom: 1px solid #cccccc;
}
.navi {
text-align: center;
margin-bottom: 20px;
order: 1;
}
.navi__numbers {
position: relative;
display: inline-flex;
margin: 10px 0;
font-weight: bold;
}
.navi__numbers::before {
content: ”;
width: calc(100% – 40px);
height: 20px;
background-color: #eeeeee;
position: absolute;
top: calc(50% – 10px);
left: 20px;
}
.navi__numbers .current {
color: #fff;
background-color: #113270;
}
.navi__numbers span {
color: #ffffff;
background-color: #bbbbbb;
font-size: 20px;
border-radius: 50%;
padding: 0;
margin: 0 10px;
width: 70px;
aspect-ratio: 1/1;
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
position: relative;
}
.navi__numbers .current~span {
color: #fff;
background-color: #76B9E8;
}
.question-reveal-scroll .title {
width: 100%;
color: #000000;
background-color: #ffffff;
font-size: 20px;
text-align: left;
margin: 0 auto 1em;
padding: 0;
order: 2;
}
.question-reveal-scroll .imagebox {
text-align: center;
margin: 0 0 20px;
order: 3;
}
.question-reveal-scroll .imagebox img,
.question-reveal-scroll .imagebox video {
display: inline !important;
width: 100%;
/* 追加 */
}
.question-reveal-scroll .imagelastbox img,
.question-reveal-scroll .imagebox video {
display: inline !important;
width: 100%;
/* 追加 */
}
.question-reveal-scroll .linkbox {
box-sizing: border-box;
order: 4;
}
.question-reveal-scroll input {
display: none;
}
.question-reveal-scroll input+label {
border: none;
padding: 6px;
display: block;
}
.question-reveal-scroll input+label .btn {
color: #000000;
background-color: #eeeeee;
width: 100%;
border-radius: 100vh;
padding: 0.5em 1em;
font-weight: bold;
text-align: center;
font-size: 18px;
display: inline-block;
box-sizing: border-box;
cursor: pointer;
}
.question-reveal-scroll input+label .btn:focus {
outline: none !important;
}
.question-reveal-scroll input:checked+label .btn {
background-color: #113270;
color: #ffffff;
}
.question-reveal-scroll ::-moz-focus-inner {
border-color: transparent;
}
.question-reveal-scroll .send-btn {
margin: 16px auto;
}
.question-reveal-scroll .send-btn button {
text-align: center;
border: none;
font-size: 20px;
font-weight: bold;
color: #fff;
margin: 0 auto;
padding: 1em;
background-color: #113270;
border-radius: 4px;
position: relative;
pointer-events: auto;
display: block;
transition: transform .2s;
}
.send-btn button:hover {
transform: scale(1.2);
cursor: pointer;
}
.revealarea {
font-size: 17px;
text-align: left;
margin: 48px auto 0;
padding: 0;
box-sizing: border-box;
}
.is-hidden {
display: none;
}
.next {
display: block;
border: none;
text-align: center;
}
.next input {
display: none;
}
.next .btn {
width: auto;
color: #fff;
font-size: 20px;
font-weight: 700;
background: linear-gradient(to bottom, #9acb3e, #018c48);
border: 1px solid #018c48;
border-radius: 5px;
box-shadow: 0 3px 0 #006666;
text-align: center;
position: relative;
margin: 10px auto 12px;
padding: 10px 20px 8px;
display: inline-block;
text-decoration: none;
box-sizing: border-box;
}
.next .btn:hover {
opacity: 0.7;
top: 2px;
}
/* 追加 */
.arrowFlow__area {
width: 100%;
height: auto;
}
.arrowFlow__inner {
padding-bottom: 200px;
overflow-y: hidden;
position: relative;
}
.arrowFlow__beforeG,
.arrowFlow__afterG {
width: 80%;
max-width: 400px;
height: auto;
margin: 0 auto;
display: flex;
justify-content: space-evenly;
align-items: flex-start;
animation-name: arrowFlow;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
transform: translate(-50%, -300%);
position: absolute;
top: 0;
left: 50%;
}
.arrowFlow__afterG {
animation-delay: 1s;
}
.arrow {
display: inline-block;
vertical-align: middle;
color: #ba0d0d;
line-height: 1;
position: relative;
width: 40px;
height: 60px !important;
background: currentColor;
margin: 0 30px;
}
.arrow:before {
content: “”;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 50px 50px 0 50px;
border-color: #ba0d0d transparent transparent transparent;
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
}
@keyframes arrowFlow {
0% {
transform: translate(-50%, -300%);
}
60% {
transform: translate(-50%, 100%);
}
100% {
transform: translate(-50%, 400%);
}
}
.button-box {
/*外側の余白｜上下余白｜左右余白（auto=センタリング）｜*/
margin: 30px auto;
/*文字の位置*/
text-align: center;
}
.button-box a {
/*文字の飾り*/
text-decoration: none;
}
/*ボタンの設定*/
.button {
position: relative;
display: inline-block;
/*内側の余白｜上下余白｜左右余白｜*/
padding: 12px 27px;
/*角丸*/
border-radius: 5px;
/*影｜水平方向｜垂直方向｜ぼかし具合｜影の拡張｜色｜*/
box-shadow: 0px 5px 14px 1px #858585;
}
/*ボタン内矢印*/
.style:before {
display: block;
content: “”;
position: absolute;
/*矢印の縦位置（上基準）｜高さ半分 - 矢印の高さの半分*/
top: calc(50% – 24px);
/*矢印の横位置（左基準）*/
left: -10px;
/*横幅*/
width: 43px;
/*高さ*/
height: 49px;
/*矢印画像*/
background: transparent url(“https://production.static.squadbeyond.com/uploads/article_photo/photo/358098/da72fbfc-3bee-44a9-84d7-fcbc06f6b753.png”) 0 0 no-repeat;
/*矢印のサイズ｜横幅｜高さ｜*/
background-size: 100% auto;
/*アニメーションの設定｜アニメーション名｜1回のサイクルに要する時間｜*/
animation: arrowleft 1s;
/*アニメーションの設定｜実行回数｜*/
animation-iteration-count: infinite;
}
.style {
/*ボタン左側の余白（矢印分）*/
padding-left: 40px;
/*ボタン右側の余白*/
padding-right: 25px;
}
/*アニメーションの設定*/
@keyframes arrowleft {
/*アニメーション開始時*/
0% {
/*開始位置（左基準）*/
left: -0.7em;
/*透明度（0=透明、1=不透明）*/
opacity: 0;
}
50% {
opacity: 1;
}
/*アニメーション終了時*/
100% {
left: 0;
opacity: 0;
}
}
/*ボタン内テキスト*/
.button span {
display: block;
/*文字の色*/
color: #fff;
/*文字の太さ*/
font-weight: bold;
/*水平方向の字間のスペース*/
letter-spacing: -0.06em;
/*行の折り返し設定（normal=折り返す、nowrap=折り返さない）*/
white-space: nowrap;
/*影｜水平方向｜垂直方向｜ぼかし具合｜色｜*/
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
/*「公式ページを見てみる」の設定*/
.title {
/*文字サイズ*/
font-size: 20px;
}
/*「お得なキャンペーン」の設定*/
.copy {
/*文字サイズ*/
font-size: 16px;
}
.button.button-color-green {
/*グラデーション｜to bottom = 上から下へ｜位置0%の色｜位置49%の色｜位置50%の色｜位置100%の色*/
background: linear-gradient(to bottom, #49ac00 0%, #79c733 49%, #49ac00 50%, #49ac00 100%);
}
/*ボタンの背景グラデーションの設定*/
.button.button-color-green {
background: linear-gradient(to bottom, #49ac00 0%, #79c733 49%, #49ac00 50%, #49ac00 100%);
}
.button.button-color-red {
background: linear-gradient(to bottom, #c30009 0%, #d7333c 49%, #c30009 50%, #c30009 100%);
}
.button.button-color-orange {
background: linear-gradient(to bottom, #ff5e00 0%, #ff8b33 49%, #ff5e00 50%, #ff5e00 100%);
}
.box {
/*ボックスの周りの余白。上下｜左右*/
margin: 1em auto;
/*ボックスの背景色*/
background: #fff9eb;
/*ボックスの角を丸める*/
border-radius: 4px;
/*ボックスの線。線の種類｜線の色｜線の太さ*/
border: solid #fc9db8 1px;
/*ボックスの幅*/
max-width: 100%;
/*ボックスの内側の余白。上｜右｜下｜左*/
padding: 40px 5px 0px 10px;
position: relative;
box-sizing: border-box;
}
.box .box-title {
/*見出しの背景色*/
background: #f5a15f;
/*見出しの文字の色*/
color: #fff;
/*見出しの文字の太さ*/
font-weight: bold;
/*見出し文字のサイズ*/
font-size: 20px;
/*文字の水平方向の配置。左寄せはleft、真ん中はcenter*/
text-align: center;
/*見出し部分の角丸。上｜右｜下｜左*/
border-radius: 4px 4px 0px 0px;
position: absolute;
line-height: 2;
padding: 1px;
letter-spacing: .05em;
left: 0;
top: 0;
width: 100%;
margin: 0;
box-sizing: border-box;
}
.box ol {
padding: 0;
position: relative;
padding-top: 3px;
margin-left: 0;
list-style-type: none;
border: 0;
counter-reset: number;
}
.box ol li {
/*リスト文字の色*/
color: #333;
list-style-type: none;
padding: .5em 0 .5em 3em;
line-height: 1.6;
}
.box li::before {
color: #fff;
background: #ffb36b;
display: inline-block;
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
color: white;
font-size: 15px;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 25px;
content: counter(number);
counter-increment: number;
left: 10px;
margin-left: 0;
}