商品詳細テンプレート を買うならxxxxx 並び順：オススメ順

<article class="productDetail">
    ここに商品詳細を入れる
</article>
                

<div class="productDetail_section">
    ここに大コンテンツを入れる
</div>
                

<div class="productDetail_section">
    <div class="productDetail_feature splitBox">
        <div class="productDetail_feature_text splitBox_left">
            <p class="productDetail_subTitle">内側からダメージを補修し、一本一本を細い髪へ</p>
            <p class="productDetail_text">
                毛髪補修成分<sup>※1</sup>が内部のダメージホールを埋めるので、内側からよりハリ・コシを与えることができます。
            </p>
            <p class="productDetail_caution">
                ※1 黒大豆(乳酸桿菌／豆乳発酵液)、トウモロコシ(グルタミン酸)、ユズ(ユズ果実エキス)、サトウキビ(ジラウロイルグルタミン酸リシンＮａ)
            </p>
        </div>
        <div class="productDetail_feature_figure splitBox_right">
            <ul class="productDetail_materials">
                <li>
                    <img src="/src/img/product/component-soy.jpg" alt="">
                </li>
                <li>
                    <img src="/src/img/product/component-sugarcane.jpg" alt="">
                </li>
                <li>
                    <img src="/src/img/product/component-yuzu.jpg" alt="">
                </li>
            </ul>
            <p class="productDetail_caution">※画像はイメージです</p>
        </div>
    </div>
</div>
                

<div class="productDetail_section">
    <div class="productDetail_feature">
        <div class="productDetail_feature_text">
            <p class="productDetail_subTitle">内側からダメージを補修し、一本一本を細い髪へ</p>
            <p class="productDetail_text">
                毛髪補修成分<sup>※1</sup>が内部のダメージホールを埋めるので、内側からよりハリ・コシを与えることができます。
            </p>
            <p class="productDetail_caution">
                ※1 黒大豆(乳酸桿菌／豆乳発酵液)、トウモロコシ(グルタミン酸)、ユズ(ユズ果実エキス)、サトウキビ(ジラウロイルグルタミン酸リシンＮａ)
            </p>
        </div>
    </div>
</div>
                

<ul class="productDetail_materials">
    <li>
        <img src="/src/img/product/component-soy.jpg" alt="">
    </li>
    <li>
        <img src="/src/img/product/component-sugarcane.jpg" alt="">
    </li>
    <li>
        <img src="/src/img/product/component-yuzu.jpg" alt="">
    </li>
</ul>
                

<ul class="productDetail_checkList">
    <li>髪のハリ・コシが気になる方</li>
    <li>ボリュームが気になる方</li>
    <li>髪が細くなってきたと感じる方</li>
</ul>
                

<ul class="productDetail_fregrances splitBox">
    <li class="splitBox_left">
        <p class="productDetail_subTitle">シャンプー</p>
        <img src="/src/img/product/frag_peony_orangeBlossom.png" alt="" class="productDetail_fregrances_img">
        <p class="productDetail_text productDetail_fregrances_text">
            華やかでしっとりとした甘さの<br>
            ピオニーとオレンジブロッサムの香り
        </p>
    </li>
    <li class="splitBox_right">
        <p class="productDetail_subTitle">トリートメント</p>
        <img src="/src/img/product/frag_cassis_chamomile.png" alt="" class="productDetail_fregrances_img">
        <p class="productDetail_text productDetail_fregrances_text">
            可憐さの中にもしっかりとした強さの<br>
            カシスとカモミールの香り
        </p>
    </li>
</ul>
                

<div class="splitBox">
    <div class="splitBox_left">
        PCで左側、SPで上に来る要素が入る
    </div>
    <div class="splitBox_right">
        PCで右側、SPで下に来る要素が入る
    </div>
</div>
                

<p class="productDetail_title">
    <span>DETAIL</span>
</p>
                

<p class="productDetail_subTitle">ここにサブタイトルが入ります</p>
                

<p class="productDetail_text">
    これは共通の本文ですこれは共通の本文ですこれは共通の本文ですこれは共通の本文ですこれは共通の本文です
</p>
                

<p class="productDetail_caution">
    ※1 黒大豆(乳酸桿菌／豆乳発酵液)、トウモロコシ(グルタミン酸)、ユズ(ユズ果実エキス)、サトウキビ(ジラウロイルグルタミン酸リシンＮａ)
</p>