<img class="c-eyecatch" alt="アイキャッチ" src="https://img21.shop-pro.jp/PA01488/210/slideshow/slideshow_img_42c224.jpg">

<div class="c-section u-max-width1000">
  <div class="c-heading">
    <div class="c-heading__left">
      <h2 class="c-heading-ttl">naeco demoについて</h2>
    </div>
  </div>

  <div>
    カラーミーショップの<span class="u-bold">テンプレートのデモサイト</span>です（購入できません）。<br />
    営業日カレンダー、新着商品などの<span class="u-bold">テンプレートプラス</span>の機能は実装しておりません（機能の後付け可）。
    <br /><br />
    主な特徴は、
    <ul style="list-style:square;padding-left:16px;">
      <li>変更しやすいように、テキストやサイズなどを一部<span class="u-bold">変数</span>に</li>
      <li><span class="u-bold">人気検索キーワード</span>の表示（手動で登録）</li>
      <li>フリーページで<span class="u-bold">お気に入り商品</span>一覧を表示</li>
      <li>スマホ時にプルダウンを使わず、オプション表を表示（オプション表形式を選択時。<span class="u-bold">正しいオプション価格・在庫数を表示</span>する目的）</li>
    </ul>
  </div>

  <div class="c-section">
    <h3>テンプレートの特徴</h3>
    <div class="c-row">
      <div class="c-col-4">
        <img src="https://img21.shop-pro.jp/PA01488/210/etc/about_demo_01.jpg" alt="SmartyとCSSで変数化" />
        SmartyとCSSで変数化
      </div>
      <div class="c-col-4">
        <img src="https://img21.shop-pro.jp/PA01488/210/etc/about_demo_02.jpg" alt="検索キーワードの表示" />
        検索キーワードの表示
      </div>
      <div class="c-col-4">
        <img src="https://img21.shop-pro.jp/PA01488/210/etc/about_demo_03.jpg" alt="フリーページでお気に入り一覧" />
        フリーページでお気に入り一覧
      </div>
      <div class="c-col-4">
        <img src="https://img21.shop-pro.jp/PA01488/210/etc/about_demo_04.jpg" alt="スマホ時にオプション表を表示" />
        スマホ時にオプション表を表示
      </div>
    </div>
  </div>

  <div class="c-section">
    <h3>使いやすいテンプレート</h3>
    ベーシックなデザインなので、幅広い業種で利用できます。<br />
    作業が苦手な方向けの有償サポートもあります。

    <div class="c-bg-gray">
      <p class="c-bulb">
        <svg role="img" aria-hidden="true"><use xlink:href="#bulb"></use></svg><span class="u-bold">ショップにあった調整を行います</span>
      </p>
      <ul style="list-style:square;margin-left:4px;padding-left:16px;">
        <li>〇〇みたいな機能を追加する</li>
        <li>ご自身のショップにあったレイアウト変更</li>
        <li>フリーページ制作、商品説明のコード制作</li>
      </ul>
    </div>
  </div>
</div>

<!-- CSSはフリーページか共通CSSに書きます -->
<style>
.c-section img {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px;
}
</style>