TEST 4のコーディングです。min-widthでレスポンシブルを作成！参考にできます
HTMLのヘッダーまでの部分
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<!--レシポンシブ対応する為の記述 -->
<meta
name="viewport"
content="width=device-width,
initial-scale=1"
/>
<!--電話番号の自動リンクを無効にする -->
<meta name="format-detection" content="telephone=no" />
<title>デモLPサイト（美容系）</title>
<meta
name="description"
content="30年以上の研究から生まれた3つの薬用成分を配合した美容クリームでシミ・そばかすを徹底的に防ぎ、輝く肌へと導きます。リピート率90%を誇る実力で、あなたの肌悩みにアプローチ。乾燥による小じわ対策にも。今すぐお試しください。"
/>
<link
href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap"
rel="stylesheet"
/>
<!--notoserifjpフォント-->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap"
rel="stylesheet"
/>
<!--cssの読み込み-->
<link rel="stylesheet" href="CSS/normalize-lp-beauty.css" />
<link rel="stylesheet" href="CSS/lp_beauty_header.css" />
<link rel="stylesheet" href="CSS/lp_beauty.css" />
<link rel="stylesheet" href="CSS/lp_beauty_footer.css" />
<link rel="stylesheet" href="CSS/lightbox.css" />
<link
rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<!-- fontawesomeの読み込み -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
/>
<!--スクロールできますの読み込み-->
<link
rel="stylesheet"
href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css"
/>
</head>
<body>
<!-- バナー -->
<div id="popup-banner" class="popup-banner">
<button class="popup-close" aria-label="閉じる">×</button>
<a href="#">
<img src="img/beauty_lp/banner_demo.png" alt="バナー" />
</a>
</div>
<!-- モーダルバナー -->
<div id="modal-banner" class="modal-banner">
<div class="modal-overlay"></div>
<div class="modal-content">
<button class="modal-close" aria-label="閉じる">×</button>
<a href="#">
<img src="img/beauty_lp/banner_demo2.png" alt="バナー" />
</a>
</div>
</div>
<header class="header">
<div class="header_inner">
<div class="cart_user_login u-mb-30">
<div class="cart_wrap pc-only">
<a href="#">
<img src="img/beauty_lp/cart.png" alt="カートロゴ" />
</a>
</div>
<div class="user_login_wrap pc-only">
<a href="#"
><img
src="img/beauty_lp/user_login.png"
alt="ユーザーログインロゴ"
/></a>
</div>
</div>
<div class="cart_user_login_sp">
<div class="cart_wrap_sp sp-only">
<a href="#"
><img src="img/beauty_lp/cart.png" alt="カートロゴ"
/></a>
</div>
</div>
<div class="bland_logo">
<a href="#"
><img src="img/beauty_lp/logo.svg" alt="ブランドロゴ"
/></a>
</div>
<div class="openbtn">
<span></span>
<span></span>
<span></span>
</div>
<nav id="g-nav">
<div id="g-nav-list">
<!--ナビの数が増えた場合縦スクロールするためのdiv※不要なら削除-->
<ul>
<li><a href="#">HOME</a></li>
<div class="section s_01">
<div class="accordion_one">
<div class="accordion_header">
商品一覧
<div class="i_box"><i class="one_i"></i></div>
</div>
<div class="accordion_inner">
<div class="box_one">
<p><a href="#">化粧品</a></p>
<p><a href="#">乳液</a></p>
<p><a href="#">UVケア</a></p>
<p><a href="#">美容液</a></p>
<p><a href="#">クリーム</a></p>
</div>
</div>
</div>
</div>
<li><a href="#">DEMOメンバークラブ</a></li>
<li><a href="#">オンライン肌測定</a></li>
<div class="sns-wrapper">
<div class="x-logo">
<a href="#" target="blank">
<img src="img/beauty_lp/x.png" alt="エックスロゴ" />
</a>
</div>
<div class="insta-logo">
<a href="#" target="blank">
<img src="img/beauty_lp/insta.png" alt="インスタロゴ" />
</a>
</div>
</div>
</ul>
</div>
</nav>
</div>
</header>htmlのmv部分まで
<main>
<section id="mv_pc" class="mv">
<picture class="fv_picture">
<source
srcset="img/beauty_lp/FV_4800.png"
media="(min-width: 1280px)"
type="image/png"
/>
<source
srcset="img/beauty_lp/FV_tablet.png"
media="(min-width: 768px)"
type="image/png"
/>
<source
srcset="img/beauty_lp/FV_sp.png"
media="(max-width: 767px)"
type="image/png"
/>
<img src="../img/beauty_lp/FV_tablet.png" alt="”代替テキスト”" />
</picture>
<div class="text_wrap">
<h1>3つの薬用成分が<br />肌になじみ、深く届く</h1>
<p class="text_mid">シミを気にせず、「確かな」輝く肌へ</p>
<p class="text_sma">メラニンの生成を抑え、シミ・そばかすを防ぐ</p>
<h2 class="product_name">
薬用美白クリーム<br class="sp-only" />「DEMO・SKINCARE」
</h2>
</div>
</section>htmlのrepeat
<section id="repeat" class="repeat">
<div class="repeat_wrapper">
<picture class="repeat_picture">
<source
srcset="img/beauty_lp/repeat_img.png"
media="(min-width: 1030px)"
type="image/png"
/>
<source
srcset="img/beauty_lp/repeat_img.png"
media="(min-width: 768px)"
type="image/png"
/>
<source
srcset="img/beauty_lp/repeat_img_sp.png"
media="(max-width: 767px)"
type="image/png"
/>
<img
src="../img/beauty_lp/repeat_img.png.png"
alt="”代替テキスト”"
/>
</picture>
<p>
DEMOクリームを「ぜひリピートしたい・リピートしたい」と回答<br />（DEMOクリームをご購入者1,483名にアンケート
広告配信：2023.12〜2025.1）
</p>
</div>
</section>HTMLのcta_1
<section id="cta" class="cta_1">
<div class="cta_1_wrapper">
<div class="cta_container">
<div class="product_img">
<img src="img/beauty_lp/demo_product 2.png" alt="商品写真" />
</div>
<div class="cart_wrapper">
<div class="cta1_cart_1">
<p class="p_name">美容美白クリーム</p>
<h2>DEMO・SKINCARE</h2>
<p class="p_data">（医薬部外品）薬用美白美容液 100g</p>
<p class="p_cost">
<span>通常購入</span>3,000円<span>（税込）</span>
</p>
<a href=""><button class="button-56">カートに入れる</button></a>
</div>
<div class="cta1_cart_2">
<p class="p_name">美容美白クリーム</p>
<h2>DEMO・SKINCARE</h2>
<p class="p_data">（医薬部外品）薬用美白美容液 100g</p>
<p class="p_cost">
<span><span class="red">定期</span>購入</span>2,500円<span
>（税込）</span
>
</p>
<a href=""><button class="button-56">カートに入れる</button></a>
</div>
</div>
</div>
</div>
</section>HTMLのmechanism
<section id="mechanism" class="mechanism">
<div class="mecha_wrapper">
<h3 class="text-box">
<span class="title_text">増え続けるシミとは？</span
><span class="arrow"></span>
</h3>
<h2>シミが増え続けるメカニズム</h2>
<ul>
<li>① 紫外線を浴びて活性酵素が発生</li>
<li>② メラニンが過剰に生成される</li>
<li>③ メラニンが溜まり続ける</li>
<li>④ メラニンが表面に出現する</li>
</ul>
</div>
</section>HTMLのclip_art
<section id="clip_art" class="clip_art">
<div class="clip_art_wrapper">
<div class="ttl_wrapper_clip">
<img src="img/beauty_lp/cheack.png" alt="シミの図" />
<h2>紫外線からシミが作られるまでの図</h2>
</div>
<a
href="img/beauty_lp/clip_art_1.png"
data-lightbox="image-1"
data-title="シミが作られるまでの図"
data-alt="Alt text"
><img src="img/beauty_lp/clip_art_1.png" alt="シミの図"
/></a>
<p>＊クリックしたら画像が拡大</p>
</div>
</section>HTMLのprotect_skin
<section id="protect" class="protect_skin">
<div class="pr_skin_contents">
<div class="pr_skin_wrapper">
<div class="pr_text">
<div class="text_1 mobile-only">紫外線ダメージから、</div>
<div class="text_2 mobile-only">
<span class="dots">肌を</span>
守りたい
</div>
<div class="text_3 tablet-only">
紫外線ダメージから、<span class="dots">肌を</span>守りたい
</div>
</div>
<div class="user_unstable_wrapper">
<div class="user_voice">
<ul>
<li>
<p>
紫外線は一年中降り注いでいるので、どんなに気をつけていても新しいシミが増えていないか不安になる
</p>
<img
src="img/beauty_lp/text_arrow_pc.png"
alt="テキストの矢印"
/>
</li>
<li>
<p>
昔できてしまったシミや、今あるシミに対して、スキンケアで本当に薄くなるのか、効果的な方法がわからない
</p>
<img
src="img/beauty_lp/text_arrow_pc.png"
alt="テキストの矢印"
/>
</li>
<li>
<p>
シミがあると、「老けて見えるのではないか」「疲れて見えるのではないか」と、他人の目が気になって自信が持てない
</p>
<img
src="img/beauty_lp/text_arrow_pc.png"
alt="テキストの矢印"
/>
</li>
</ul>
</div>
<div class="pr_image">
<picture class="repeat_picture">
<source
srcset="img/beauty_lp/pr_skin_image.png"
media="(min-width: 768px)"
type="image/png"
/>
<source
srcset="img/beauty_lp/pr_skin_image_sp.png"
media="(max-width: 767px)"
type="image/png"
/>
<img
src="../img/beauty_lp/pr_skin_image.png"
alt="”代替テキスト”"
/>
</picture>
</div>
</div>
</div>
</div>
</section>HTMLのcta_6
<section class="cta_6">
<div class="cta_6_wrapper">
<div class="ttl_wrapper">
<h2>紫外線から肌を守りたいあなたに</h2>
<p>
シミを気にせず、「きらめく」つや肌へ。<br />メラニンの生成を抑え、シミ・そばかすを防ぐ。
</p>
<img
class="text_neta"
src="img/beauty_lp/kumo_neta1.png"
alt="テキスト雲"
/>
</div>
<div class="cta_container">
<div class="product_img">
<img src="img/beauty_lp/product_cta.png" alt="商品写真" />
</div>
<div class="cart_wrapper">
<div class="cta1_cart_1">
<p class="p_name">美容美白クリーム</p>
<h2>DEMO・SKINCARE</h2>
<p class="p_data">（医薬部外品）薬用美白美容液 100g</p>
<p class="p_cost">
<span>通常購入</span>3,000円<span>（税込）</span>
</p>
<a href=""><button class="button-56">カートに入れる</button></a>
</div>
<div class="cta1_cart_2">
<p class="p_name">美容美白クリーム</p>
<h2>DEMO・SKINCARE</h2>
<p class="p_data">（医薬部外品）薬用美白美容液 100g</p>
<p class="p_cost">
<span><span class="red">定期</span>購入</span>2,500円<span
>（税込）</span
>
</p>
<a href=""><button class="button-56">カートに入れる</button></a>
</div>
<a href="#">
<img src="img/beauty_lp/points_ec.png" alt="EC特典" />
</a>
</div>
</div>
</div>
<img class="triangle" src="img/beauty_lp/trianle.png" alt="三角形" />
</section>HTMLのresarch_30
<section class="resarch_30">
<picture class="resarch_picture">
<source
srcset="img/beauty_lp/30_pc.png"
media="(min-width: 1280px)"
type="image/png"
/>
<source
srcset="img/beauty_lp/30_tablet.png"
media="(min-width: 768px)"
type="image/png"
/>
<source
srcset="img/beauty_lp/30_sp.png"
media="(max-width: 767px)"
type="image/png"
/>
<img src="../img/beauty_lp/30_pc.png" alt="”代替テキスト”" />
</picture>
<div class="resarch_wrapper">
<h3 class="text-box">
<span class="title_text">30年以上の研究結果・3つの有効成分配合</span
><span class="arrow"></span>
</h3>
<img src="img/beauty_lp/image_30.png" alt="30年の研究結果の画像" />
<p>＊画像はイメージです</p>
</div>
</section>HTMLのexplain_30
<section class="explain_30">
<div class="ex_wrapper">
<div class="three_points">
<ul>
<li>
<h3>美白有効成分<br />m - トラネキサム酸 *</h3>
<p>
メラノサイトの活性化を効果的に抑制し、ラニンの生成を抑えます。
</p>
</li>
<li>
<h3>美白有効成分<br />m4MSK *</h3>
<p>
メラニン色素の過剰生成を効果的に抑制し、シミ・そばかすを防ぎます。
</p>
</li>
<li>
<h3>薬用有効成分<br />純粋レチノール **</h3>
<p>うるおって、透明感のある、すこやかな肌へ整えます。</p>
</li>
</ul>
</div>
<div class="ex_wrapper_img_text">
<a
href="img/beauty_lp/3_image.png"
data-lightbox="image-2"
data-title="成分の図"
data-alt="Alt text"
><img src="img/beauty_lp/3_image.png" alt="成分の図"
/></a>
<p>＊クリックしたら画像が拡大</p>
<img class="triangle_img" src="img/beauty_lp/tr.png" alt="三角" />
<h3>
30年以上もの歳月を掛けてこれら<br />３つの有効成分の研究を重ね<br /><span
class="under"
>安定配合させることに成功</span
>しました
</h3>
</div>
</div>
</section>HTMLのprotect_woman_img
<section class="protect_woman_img">
<div class="pr_w_wrapper">
<img src="img/beauty_lp/woman.png" alt="女性の画像" />
<h2>紫外線から肌を守り、<br class="sp-only" />理想の肌へ</h2>
</div>
</section>HTMLのcta_3
<section class="cta_3">
<div class="cta_3_wrapper">
<div class="ttl_wrapper">
<h2>紫外線から肌を守りたいあなたに</h2>
<p>
シミを気にせず、「きらめく」つや肌へ。<br />メラニンの生成を抑え、シミ・そばかすを防ぐ。
</p>
</div>
<div class="cta_container">
<div class="product_img">
<img src="img/beauty_lp/demo_product 2.png" alt="商品写真" />
</div>
<div class="cart_wrapper">
<div class="cta1_cart_1">
<p class="p_name">美容美白クリーム</p>
<h2>DEMO・SKINCARE</h2>
<p class="p_data">（医薬部外品）薬用美白美容液 100g</p>
<p class="p_cost">
<span>通常購入</span>3,000円<span>（税込）</span>
</p>
<a href=""><button class="button-56">カートに入れる</button></a>
</div>
<div class="cta1_cart_2">
<p class="p_name">美容美白クリーム</p>
<h2>DEMO・SKINCARE</h2>
<p class="p_data">（医薬部外品）薬用美白美容液 100g</p>
<p class="p_cost">
<span><span class="red">定期</span>購入</span>2,500円<span
>（税込）</span
>
</p>
<a href=""><button class="button-56">カートに入れる</button></a>
</div>
<a href="#">
<img src="img/beauty_lp/points_ec.png" alt="EC特典" />
</a>
</div>
</div>
</div>
</section>HTMLのhow_to_use
<section class="how_to_use">
<div class="use_container">
<div class="use_text">
<h2>ご使用方法</h2>
<p>
朝と夜、美容液の後、パール1コ分を手のひらにとり、<br
class="tablet-only"
/>気になる部分を中心に、顔全体にやさしくなじませます。
</p>
</div>
<a
href="img/beauty_lp/how_to_use.png"
data-lightbox="image-3"
data-title="使用方法"
data-alt="Alt text"
><img src="img/beauty_lp/how_to_use.png" alt="使用方法の図"
/></a>
<p>＊クリックしたら画像が拡大</p>
</div>
</section>HTMLのuser_voice
<section class="user_voice">
<div class="voice_contents">
<h2>お客様の声</h2>
<!-- Slider全体のコンテナ -->
<!-- スライダーのコンテナ -->
<div class="swiper">
<p class="scroll_hint">
横にスクロール<span class="anime_arrow"></span>
</p>
<!-- 必要に応じたwrapper -->
<div class="swiper-wrapper">
<!-- スライド -->
<div class="swiper-slide">
<div class="voice_card">
<div class="v_prof">
<img src="img/beauty_lp/vp_1.png" alt="ユーザー" />
<div class="v_p_text">
<h2>
長年悩んでいた、シミ・ソバカスが軽減されてるように感じています。
</h2>
<p>岩瀬様（40代女性）</p>
</div>
</div>
<div class="v_answer">
<p>
長年悩んでいたシミとソバカスに、このクリームを試してみました。
<span class="pink">3つの有効成分が配合されている</span
>と聞いていたので期待していましたが、
使い始めてすぐにその<span class="pink"
>効果を実感しました。</span
>特に驚いたのは、その価格です。
他社の製品と比べてもかなりお手頃なのに、使用感はとても滑らかで肌にすっと浸透していくのがわかります。
まだ完全に消えたわけではありませんが、<span class="pink"
>以前よりも確実にシミやソバカスが薄くなっている気がします。</span
>
この価格でこの品質は、本当に素晴らしいです。
</p>
</div>
<div class="v_ttl">
<p>DEMOクリームをご検討中の人へのメッセージ</p>
</div>
<div class="v_ms">
<p>
シミとソバカス、気になりますよね。私もそうでした。でも、このクリームを使い始めてから、
鏡を見るのが本当に楽しくなりました！一番の魅力は、3つの有効成分が入っているのに、
価格がとても手頃なこと。正直、こんなに安くて大丈夫？って最初は疑ったんですが、
使ってみてびっくり。肌に塗ると、スーッと滑らかに浸透してベタつかなくオススメです。
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="voice_card">
<div class="v_prof">
<img src="img/beauty_lp/vp_2.png" alt="ユーザー" />
<div class="v_p_text">
<h2>
諦めかけていましたが、良いクリームに出会えました！！
</h2>
<p>近藤様（40代女性）</p>
</div>
</div>
<div class="v_answer">
<p>
正直、今まで色々なシミ対策クリームを使ってきましたが、どれもあまり<span
class="pink"
>効果を感じられず諦めかけていました。</span
>
でも、このクリームは違いました！まず、<span class="pink"
>塗った瞬間の肌触りがとても良いです。</span
>
ベタつかずに肌に吸い込まれるように馴染むので、朝のメイク前でも使いやすいのが嬉しいポイント。
<span class="pink"
>数週間使い続けていると、鏡を見るたびにシミが目立たなくなっていることに気づきました。</span
>
しかも、他社の製品に比べて価格が安いので、無理なく続けられるのも魅力だと思います。
</p>
</div>
<div class="v_ttl">
<p>DEMOクリームをご検討中の人へのメッセージ</p>
</div>
<div class="v_ms">
<p>
シミ対策のクリームってたくさんあって、どれを選んだら良いか悩みますよね。
私も以前は、『どうせ効果ないだろうな…』と諦めかけていました。
でも、このクリームは違いました！まず、肌への馴染みが抜群なんです。
つけた瞬間からしっとりするのに、嫌なベタつきは一切ありません。
そして、何より驚いたのは、価格が他社に比べて断然安いのに、ぜひ、試してみてくださいね。
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="voice_card">
<div class="v_prof">
<img src="img/beauty_lp/vp_3.png" alt="ユーザー" />
<div class="v_p_text">
<h2>
諦めかけていましたが、良いクリームに出会えました！！
</h2>
<p>鈴木様（40代女性）</p>
</div>
</div>
<div class="v_answer">
<p>
シミが増えてきて、どうにかしたいと思っていた時にこのクリームを見つけました。
決め手は、3つの有効成分配合という点と、<span class="pink"
>価格の安さでした。</span
>実際に使ってみると、想像以上に使い心地が良くて感動！
<span class="pink"
>クリームは伸びが良く、肌にしっかり浸透している感じがします。</span
>使い始めて1ヶ月ほどですが、明らかにシミやソバカスが軽減しているように感じています。
<span class="pink"
>肌のトーンも明るくなったような気がして、最近はメイクのノリも良くなったように感じます。</span
>これからも使い続けたいと思います。。
</p>
</div>
<div class="v_ttl">
<p>DEMOクリームをご検討中の人へのメッセージ</p>
</div>
<div class="v_ms">
<p>
シミやソバカスで悩んでいる皆さん、こんにちは！私も長年の悩みでしたが、このクリームのおかげで自信を持てるようになりました。
私がこのクリームを選んだ理由は、3つの有効成分が配合されていることと、そのお手頃な価格でした。
</p>
</div>
</div>
</div>
</div>
</div>
<!-- 必要に応じてページネーション -->
<div class="swiper-pagination"></div>
<!-- 必要に応じてナビボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</section>HTMLのquetion
<section class="quetion">
<div class="qa_contents">
<h2>よくある質問</h2>
<div class="qa_wrapper">
<ul class="accordion-area">
<li>
<!--li ~ /li までが一つのアコーディオン-->
<section>
<h3 class="title">
<span>Q</span>どのようなシミやソバカスに効果がありますか？
</h3>
<div class="box">
<p>
<span>A</span
>このクリームは、日焼けによるシミや、年齢とともに気になるソバカスに効果が期待できます。3つの有効成分がメラニンの生成を抑え、シミ・ソバカスの原因にアプローチします。
</p>
</div>
</section>
</li>
<li>
<!--li ~ /li までが一つのアコーディオン-->
<section>
<h3 class="title"><span>Q</span> 敏感肌でも使えますか？</h3>
<div class="box">
<p>
<span>A</span
>このクリームは、日焼けによるシミや、年齢とともに気になるソバカスに効果が期待できます。3つの有効成分がメラニンの生成を抑え、シミ・ソバカスの原因にアプローチします。
</p>
</div>
</section>
</li>
<li>
<!--li ~ /li までが一つのアコーディオン-->
<section>
<h3 class="title">
<span>Q</span> どのくらいで効果を実感できますか？
</h3>
<div class="box">
<p>
<span>A</span
>このクリームは、日焼けによるシミや、年齢とともに気になるソバカスに効果が期待できます。3つの有効成分がメラニンの生成を抑え、シミ・ソバカスの原因にアプローチします。
</p>
</div>
</section>
</li>
<li>
<!--li ~ /li までが一つのアコーディオン-->
<section>
<h3 class="title">
<span>Q</span>1日に何回、どのタイミングで使えばいいですか？
</h3>
<div class="box">
<p>
<span>A</span
>このクリームは、日焼けによるシミや、年齢とともに気になるソバカスに効果が期待できます。3つの有効成分がメラニンの生成を抑え、シミ・ソバカスの原因にアプローチします。
</p>
</div>
</section>
</li>
<li>
<!--li ~ /li までが一つのアコーディオン-->
<section>
<h3 class="title">
<span>Q</span
>他のスキンケアアイテムと一緒に使っても大丈夫ですか？
</h3>
<div class="box">
<p>
<span>A</span
>このクリームは、日焼けによるシミや、年齢とともに気になるソバカスに効果が期待できます。3つの有効成分がメラニンの生成を抑え、シミ・ソバカスの原因にアプローチします。
</p>
</div>
</section>
</li>
<li>
<!--li ~ /li までが一つのアコーディオン-->
<section>
<h3 class="title">
<span>Q</span>クリームのテクスチャーはどんな感じですか？
</h3>
<div class="box">
<p>
<span>A</span
>このクリームは、日焼けによるシミや、年齢とともに気になるソバカスに効果が期待できます。3つの有効成分がメラニンの生成を抑え、シミ・ソバカスの原因にアプローチします。
</p>
</div>
</section>
</li>
</ul>
</div>
</div>
</section>HTMLのsurport
<section class="surport">
<div class="sp_contents">
<div class="text_wrapper">
<h3 class="text-box">
<span class="title_text">商品サポート</span
><span class="arrow"></span>
</h3>
</div>
<div class="sp_points">
<ul>
<li><p>平日の9時から17時までの電話サポート有</p></li>
<li><p>チャットボイスでのお問合せも可能</p></li>
<li><p>メールでの商品問合せも有り</p></li>
<li><p>1カ月で効果が感じられなかった場合の返金サポート有</p></li>
</ul>
</div>
</div>
</section>HTMLのcta_4
<section class="cta_4">
<div class="cta_4_wrapper">
<div class="ttl_wrapper">
<h2>
シミを気にせず、<br class="sp-only" />「きらめく」つや肌へ。
</h2>
</div>
<div class="cta_container">
<div class="product_img">
<img src="img/beauty_lp/demo_product 2.png" alt="商品写真" />
</div>
<div class="cart_wrapper">
<div class="cta1_cart_1">
<p class="p_name">美容美白クリーム</p>
<h2>DEMO・SKINCARE</h2>
<p class="p_data">（医薬部外品）薬用美白美容液 100g</p>
<p class="p_cost">
<span>通常購入</span>3,000円<span>（税込）</span>
</p>
<a href=""><button class="button-56">カートに入れる</button></a>
</div>
<div class="cta1_cart_2">
<p class="p_name">美容美白クリーム</p>
<h2>DEMO・SKINCARE</h2>
<p class="p_data">（医薬部外品）薬用美白美容液 100g</p>
<p class="p_cost">
<span><span class="red">定期</span>購入</span>2,500円<span
>（税込）</span
>
</p>
<a href=""><button class="button-56">カートに入れる</button></a>
</div>
<a href="#">
<img src="img/beauty_lp/points_ec.png" alt="EC特典" />
</a>
</div>
</div>
</div>
<img
class="cta4_top"
src="img/beauty_lp/cta4_bk_top.png"
alt="壁画装飾"
/>
<img
class="cta4_bt"
src="img/beauty_lp/cta4_bk_bt.png"
alt="壁画装飾"
/>
</section>HTMLのproduct_pt
<section class="product_pt">
<div class="pt_wrapper">
<div class="ttl_wrapper">
<div class="text_bubble">
<p>使いたくなる訳とは？</p>
<img
class="tr_bubble"
src="img/beauty_lp/tr_text_mt.png"
alt="吹き出しの三角"
/>
</div>
<h2>デモクリームの特徴</h2>
</div>
<div class="pt_container">
<div class="pt_1">
<div class="pt1_text">
<div class="pt1_ttl">
<p>01</p>
<h3>30年以上かけた実験での、3つの有効成分を配合</h3>
</div>
<p class="explain_pt1">
シミやソバカスの原因に多角的にアプローチする3種類の有効成分を贅沢に配合しています。
これにより、メラニンの生成を抑え、気になる部分にしっかりと働きかけます。
</p>
</div>
<img class="pt1_img" src="img/beauty_lp/f_1.png" alt="特徴画像" />
</div>
<div class="pt_2">
<div class="pt2_text">
<div class="pt2_ttl">
<p>02</p>
<h3>なめらかで浸透しやすい使用感</h3>
</div>
<p class="explain_pt2">
ベタつきがなく、肌にすっと馴染むなめらかなテクスチャーが特徴です。角質層までしっかり浸透し、肌の内側から潤いと成分を届けます。メイク前にも使いやすいと好評です。
</p>
</div>
<img class="pt2_img" src="img/beauty_lp/f_2.png" alt="特徴画像" />
</div>
<div class="pt_3">
<div class="pt3_text">
<div class="pt3_ttl">
<p>03</p>
<h3>シミ・ソバカス軽減への期待</h3>
</div>
<p class="explain_pt3">
継続して使用することで、シミやソバカスが目立ちにくくなったという声が多数寄せられています。
肌のトーンアップや透明感アップも期待できます。
</p>
</div>
<img class="pt3_img" src="img/beauty_lp/f_3.png" alt="特徴画像" />
</div>
<div class="pt_4">
<div class="pt4_text">
<div class="pt4_ttl">
<p>04</p>
<h3>シミ・ソバカス軽減への期待</h3>
</div>
<p class="explain_pt4">
継続して使用することで、シミやソバカスが目立ちにくくなったという声が多数寄せられています。
肌のトーンアップや透明感アップも期待できます。
</p>
</div>
<img class="pt4_img" src="img/beauty_lp/f_4.png" alt="特徴画像" />
</div>
<div class="pt_5">
<div class="pt5_text">
<div class="pt5_ttl">
<p>05</p>
<h3>シミ・ソバカス軽減への期待</h3>
</div>
<p class="explain_pt5">
継続して使用することで、シミやソバカスが目立ちにくくなったという声が多数寄せられています。
肌のトーンアップや透明感アップも期待できます。
</p>
</div>
<img class="pt5_img" src="img/beauty_lp/f_5.png" alt="特徴画像" />
</div>
</div>
</div>
</section>HTMLのdifferentiation
<section class="differentiation">
<div class="df_wrapper">
<div class="ttl_wrapper">
<div class="text_bubble">
<p>差別化ポイント</p>
<img
class="tr_bubble"
src="img/beauty_lp/tr_text_mt.png"
alt="吹き出しの三角"
/>
</div>
<h2>デモクリームはここが違う！</h2>
</div>
<div class="ttl_sub">
<div class="sub_text">
<h3>DEMOクリームは他製品と比べて</h3>
<p>
<span class="big_text">3つの成分配合</span>と<span
class="big_text"
>コスパが良い</span
>のが<span class="big_text">決め手！</span>
</p>
</div>
<img class="star_1" src="img/beauty_lp/star.png" alt="星の画像" />
<img class="star_2" src="img/beauty_lp/star.png" alt="星の画像" />
</div>
<div class="df_table_contents js-scroll">
<div class="pt1_table">
<div class="pt1_a">
<p>非表示</p>
</div>
<div class="pt1_b">
<p>注目成分</p>
</div>
<div class="pt1_c">
<p>肌水分量</p>
</div>
<div class="pt1_d">
<p>価格</p>
</div>
<div class="pt1_e">
<p>サポート</p>
</div>
</div>
<div class="pt2_table">
<div class="pt2_a">
<img
class="com_logo"
src="img/beauty_lp/com_logo.png"
alt="ブランドの画像"
/>
</div>
<div class="pt2_b">
<p>3つの有効成分配合</p>
</div>
<div class="pt2_c">
<p>検証では肌水分量が<br />約84%増</p>
</div>
<div class="pt2_d">
<p>通常購入で3000円<br />定期購入で2500円</p>
</div>
<div class="pt2_e">
<p>1カ月でご満足がいか無い場合は返金保証</p>
</div>
</div>
<div class="pt3_table">
<div class="pt3_a">
<p>A社製品</p>
</div>
<div class="pt3_b">
<p>水溶性<br />プラセンタエキス</p>
</div>
<div class="pt3_c">
<p>検証で64%</p>
</div>
<div class="pt3_d">
<p>通常購入で5500円 <br />定期購入で4500円</p>
</div>
<div class="pt3_e">
<p>1カ月でご満足がいか無い場合は返金保証</p>
</div>
</div>
<div class="pt4_table">
<div class="pt4_a">
<p>B社製品</p>
</div>
<div class="pt4_b">
<p>トラネキサム酸</p>
</div>
<div class="pt4_c">
<p>検証で60%</p>
</div>
<div class="pt4_d">
<p>通常購入で5000円 <br />定期購入で4500円</p>
</div>
<div class="pt4_e">
<p>返金サポートは無し</p>
</div>
</div>
<div class="pt5_table">
<div class="pt5_a">
<p>C社製品</p>
</div>
<div class="pt5_b">
<p>トラネキサム酸<br />グリチルリチン酸2Kで肌荒れを予防</p>
</div>
<div class="pt5_c">
<p>検証で50%</p>
</div>
<div class="pt5_d">
<p>通常購入で6500円 <br />定期購入で6000円</p>
</div>
<div class="pt5_e">
<p>1カ月でご満足がいか無い場合は返金保証</p>
</div>
</div>
</div>
</div>
</section>HTMLのdeveloper
<section class="developer">
<div class="dv_wrapper">
<div class="ttl_wrapper">
<div class="text_bubble">
<p>開発チームからの一言</p>
<img
class="tr_bubble"
src="img/beauty_lp/tr_text_mt.png"
alt="吹き出しの三角"
/>
</div>
<h2>30年の実験結果による成分を皆様へ</h2>
</div>
<div class="dv_contents">
<div class="dv_img_ct">
<img
class="dv_face"
src="img/beauty_lp/developer.png"
alt="開発者"
/>
<div class="dv_name">
<p>DEMOクリーム開発所長</p>
<h3>川村絵里</h3>
</div>
</div>
<div class="dv_text">
<p>
長年にわたり、私たちは「年齢とともに増えるシミ・そばかす」という、多くの方が抱える肌悩みに真摯に向き合ってきました。30年以上の歳月をかけ、肌のメカニズムを深く探求し続けた研究成果が、このクリームには凝縮されています。
特にこだわったのは、3つの薬用有効成分の組み合わせと配合量です。シミ・そばかす対策の鍵となるトラネキサム酸は、当社の他の製品と比較して2倍以上という高濃度で配合し、肌の奥深く、角質層までしっかりと届くよう設計しました。また、健やかな肌へ導くために欠かせない天然のビタミンCには、品質にこだわり国産のものを厳選しています。
使い心地にも妥協はありません。有効成分が肌にすばやく溶け込むよう、なめらかなテクスチャーを追求しました。毎日心地よくお使いいただくことで、年齢を重ねた肌に自信を取り戻していただきたい。
「もうシミ・そばかすは仕方ない」と諦めていた方にこそ、このクリームを試していただきたいと心から願っています。90%のリピート率という数字は、製品への確かな手応えの証だと自負しております。長年の研究と技術の粋を集めたこのクリームが、あなたの肌に明るい未来をもたらすことを願っています。
</p>
</div>
</div>
</div>
<img class="dv_neta_1" src="img/beauty_lp/neta_1.png" alt="ネタ1" />
<img class="dv_neta_2" src="img/beauty_lp/neta_2.png" alt="ネタ2" />
</section>HTMLのcta_5
<section id="area-2" class="cta_5">
<div class="cta_5_wrapper">
<div class="ttl_wrapper">
<h2>紫外線から肌を守りたいあなたに</h2>
<p>
シミを気にせず、「きらめく」つや肌へ。<br />メラニンの生成を抑え、シミ・そばかすを防ぐ。
</p>
</div>
<div class="cta_container">
<div class="product_img">
<img src="img/beauty_lp/product_cta.png" alt="商品写真" />
</div>
<div class="cart_wrapper">
<div class="cta1_cart_1">
<p class="p_name">美容美白クリーム</p>
<h2>DEMO・SKINCARE</h2>
<p class="p_data">（医薬部外品）薬用美白美容液 100g</p>
<p class="p_cost">
<span>通常購入</span>3,000円<span>（税込）</span>
</p>
<a href=""><button class="button-56">カートに入れる</button></a>
</div>
<div class="cta1_cart_2">
<p class="p_name">美容美白クリーム</p>
<h2>DEMO・SKINCARE</h2>
<p class="p_data">（医薬部外品）薬用美白美容液 100g</p>
<p class="p_cost">
<span><span class="red">定期</span>購入</span>2,500円<span
>（税込）</span
>
</p>
<a href=""><button class="button-56">カートに入れる</button></a>
</div>
<a href="#">
<img src="img/beauty_lp/points_ec.png" alt="EC特典" />
</a>
</div>
</div>
</div>
</section>HTMLのbanner
<section class="banner">
<div class="bn_wrapper">
<div class="bn_contents">
<ul>
<li>
<a href="#"
><img
class="dv_neta_1"
src="img/beauty_lp/bn2.png"
alt="バナー1"
/></a>
</li>
<li>
<a href="#"
><img
class="dv_neta_1"
src="img/beauty_lp/bn3.png"
alt="バナー1"
/></a>
</li>
<li>
<a href="#"
><img
class="dv_neta_1"
src="img/beauty_lp/bn4.png"
alt="バナー1"
/></a>
</li>
</ul>
</div>
</div>
<img class="dv_netabg_1" src="img/beauty_lp/neta_bn.png" alt="ネタ1" />
<img class="dv_netabg_2" src="img/beauty_lp/neta_bn2.png" alt="ネタ2" />
</section>HTMLのtest-clinic
<section class="test-clinic">
<div class="clinic-section">
<div class="clinic-info">
<div class="clinic-title">
<h2>DEMO Clinic</h2>
<p>美容皮膚科「ルサンネクリニック」</p>
</div>
<div class="sub-title">
<p>
VISIAを用いた肌診断から始まる、<br />
あなたに最適なスキンケアをご提案します
</p>
</div>
<div class="explain-text">
<p>
オーダーメイド治療を通いやすい価格で。<br />
ドクターズコスメの専門家があなたの肌をサポートします。
</p>
</div>
<ul class="clinic-advantages">
<li>
<a href="#">
<p>VISIA肌診断</p>
</a>
</li>
<li>
<a href="#">
<p>オーダーメイド治療</p>
</a>
</li>
<li>
<a href="#">
<p>料金表</p>
</a>
</li>
</ul>
<!-- クリニックページへのボタン -->
<div class="clinic-page-btn-wrapper">
<a href="#" class="clinic-btn-pc">クリニック詳細ページへ</a>
</div>
</div>
<div class="clinic-list">
<ul class="clinic-pic-wrapper">
<li>
<a href="#">
<img src="img/beauty_lp/test.pic.png" alt="クリニック1" />
<div class="clinic-place">
<p>DEMOクリニック</p>
<span>東京都銀座5丁目</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="img/beauty_lp/test.pic2.png" alt="クリニック2" />
<div class="clinic-place">
<p>DEMOクリニック恵比寿</p>
<span>東京都恵比寿4丁目</span>
</div>
</a>
</li>
</ul>
</div>
<!-- クリニックページへのボタン -->
<div class="clinic-page-btn-wrapper-sp">
<a href="#" class="clinic-btn-sp">クリニック詳細ページへ</a>
</div>
</div>
</section>
HTMLのtelとmainの終わり
<section class="tel">
<div class="tel_wrapper">
<p>デモクリームの商品についてお問合せはコチラから</p>
<div class="tel_link">
<p>
デモクリーム <span class="t_1">お客様相談窓口</span
><span class="t_2"
><img src="img/beauty_lp/tel_icon.png" alt="フリーダイヤル"
/></span>
</p>
<p class="tel_number">
<a href="tel:01234567890">0000-000-000</a
><span>(10:00 ～ 17:00 / 土・日・祝日除く)</span>
</p>
</div>
</div>
</section>
</main>HTMLのfooterとhtmlの終わり
<footer id="footer">
<div class="footer_inner">
<div class="ft_container">
<div class="ft_logo">
<a href="#">
<img
class="dv_netabg_1"
src="img/beauty_lp/ft_logo.png"
alt="ネタ1"
/>
<div class="ft_text">
<p>美容LPのデモサイト</p>
<h2>DEMOクリーム</h2>
</div>
</a>
</div>
<div class="ft_other">
<ul>
<li><a href="#">販売会社情報</a></li>
<li><a href="#">オンラインストア</a></li>
<li><a href="#">店舗販売一覧</a></li>
<li><a href="#">お客様サポート</a></li>
<li><a href="#">プライバシーポリシー</a></li>
</ul>
<div class="logo_img">
<a class="ft_logo_x" href="#"
><img src="img/beauty_lp/x.png" alt="xロゴ"
/></a>
<a class="ft_logo_insta" href="#"
><img src="img/beauty_lp/insta.png" alt="インスタロゴ"
/></a>
</div>
</div>
<div class="logo_img_tablet">
<a class="ft_logo_x" href="#"
><img src="img/beauty_lp/x.png" alt="xロゴ"
/></a>
<a class="ft_logo_insta" href="#"
><img src="img/beauty_lp/insta.png" alt="インスタロゴ"
/></a>
</div>
</div>
</div>
<p class="js-scroll-down scroll-top scrollview">
<a href="#area-2">Scroll</a>
</p>
<p class="js-pagetop scroll-top stop-element"><a href="#">Page Top</a></p>
</footer>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
<script src="js/lp_beauty.js"></script>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<script src="js/lp_beauty_slider.js"></script>
<script src="js/lp_beauty_top.js"></script>
<script src="js/lp_beauty_banner.js"></script>
<!--lightbox2の読み込み-->
<script src="js/lightbox.js"></script>
<script>
lightbox.option({
fadeDuration: 700,
imageFadeDuration: 1800,
resizeDuration: 300,
disableScrolling: false,
wrapAround: true,
});
</script>
<!--スクロールできますの読み込み-->
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>
<script>
//スクロールできますの設定
new ScrollHint(".js-scroll", {
i18n: {
scrollable: "横スクロール",
},
});
</script>
</body>
</html>サイトは
こちらから