app/template/default/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'top_frame.twig' %}
  13. {% set body_class = 'front_page' %}
  15. {% block stylesheet %}
  16.     {#<style>#}
  17.     {#    .slick-slider {#}
  18.     {#        margin-bottom: 30px;#}
  19.     {#    }#}
  21.     {#    .slick-dots {#}
  22.     {#        position: absolute;#}
  23.     {#        bottom: -45px;#}
  24.     {#        display: block;#}
  25.     {#        width: 100%;#}
  26.     {#        padding: 0;#}
  27.     {#        list-style: none;#}
  28.     {#        text-align: center;#}
  29.     {#    }#}
  31.     {#    .slick-dots li {#}
  32.     {#        position: relative;#}
  33.     {#        display: inline-block;#}
  34.     {#        width: 20px;#}
  35.     {#        height: 20px;#}
  36.     {#        margin: 0 5px;#}
  37.     {#        padding: 0;#}
  39.     {#        cursor: pointer;#}
  40.     {#    }#}
  42.     {#    .slick-dots li button {#}
  43.     {#        font-size: 0;#}
  44.     {#        line-height: 0;#}
  45.     {#        display: block;#}
  46.     {#        width: 20px;#}
  47.     {#        height: 20px;#}
  48.     {#        padding: 5px;#}
  49.     {#        cursor: pointer;#}
  50.     {#        color: transparent;#}
  51.     {#        border: 0;#}
  52.     {#        outline: none;#}
  53.     {#        background: transparent;#}
  54.     {#    }#}
  56.     {#    .slick-dots li button:hover,#}
  57.     {#    .slick-dots li button:focus {#}
  58.     {#        outline: none;#}
  59.     {#    }#}
  61.     {#    .slick-dots li button:hover:before,#}
  62.     {#    .slick-dots li button:focus:before {#}
  63.     {#        opacity: 1;#}
  64.     {#    }#}
  66.     {#    .slick-dots li button:before {#}
  67.     {#        content: " ";#}
  68.     {#        line-height: 20px;#}
  69.     {#        position: absolute;#}
  70.     {#        top: 0;#}
  71.     {#        left: 0;#}
  72.     {#        width: 12px;#}
  73.     {#        height: 12px;#}
  74.     {#        text-align: center;#}
  75.     {#        opacity: .25;#}
  76.     {#        background-color: black;#}
  77.     {#        border-radius: 50%;#}
  79.     {#    }#}
  81.     {#    .slick-dots li.slick-active button:before {#}
  82.     {#        opacity: .75;#}
  83.     {#        background-color: black;#}
  84.     {#    }#}
  86.     {#    .slick-dots li button.thumbnail img {#}
  87.     {#        width: 0;#}
  88.     {#        height: 0;#}
  89.     {#    }#}
  90.     {#</style>#}
  91. {% endblock %}
  93. {% block javascript %}
  94.     {#<script>#}
  95.     {#    $(function() {#}
  96.     {#        $('.main_visual').slick({#}
  97.     {#            dots: true,#}
  98.     {#            arrows: false,#}
  99.     {#            autoplay: true,#}
  100.     {#            speed: 300#}
  101.     {#        });#}
  102.     {#    });#}
  103.     {#</script>#}
  104. {% endblock javascript %}
  106. {% block main %}
  107.             <!-- topPage-->
  108.         <div class="bnr-line">
  109.           <a href="https://liff.line.me/2001059428-MqJqm0OA/landing?follow=%40326nxfjy&lp=hQMpL4&liff_id=2001059428-MqJqm0OA">
  110.             <picture>
  111.               <source srcset="/html/user_data/assets/img/top/bnr_line_sp.png" media="(max-width: true)">
  112.               <img src="/html/user_data/assets/img/top/bnr_line.png" alt="LINEお友達追加">
  113.             </picture>
  114.             <!--img(src="/assets/images/home/bnr_line@2x.png" alt="")-->
  115.           </a>
  116.         </div>
  117. <style>
  118.     @media screen and (max-width: 768px) {
  119.         .kv__slider-pagination .swiper-pagination-bullet {
  120.             background-color: #efefef;
  121.         }
  122.     }
  123. </style>
  124.         <div class="kv">
  125.           <div class="kv__slider js-kv-slider swiper">
  126.             <div class="swiper-wrapper">
  127.               <div class="kv__slider-item swiper-slide">
  128.                 <div class="slide">
  129.                   <div class="slide-media img-cover"><a href="/products/detail/80">
  130.                       <picture>
  131.                         <source srcset="/html/user_data/assets/img/top/img_kv_01-sp.png" media="(max-width: 1024px)">
  132.                         <img src="/html/user_data/assets/img/top/img_kv_01-pc.png" role="presentation" alt="">
  133.                       </picture></a></div>
  134.                 </div>
  135.               </div>
  136.               <div class="kv__slider-item swiper-slide">
  137.                 <div class="slide">
  138.                   <div class="slide-media img-cover"><a href="/products/detail/97">
  139.                       <picture>
  140.                         <source srcset="/html/user_data/assets/img/top/img_kv_02-sp.png" media="(max-width: 1024px)">
  141.                         <img src="/html/user_data/assets/img/top/img_kv_02-pc.png" role="presentation" alt="">
  142.                       </picture></a></div>
  143.                 </div>
  144.               </div>
  145.               <div class="kv__slider-item swiper-slide">
  146.                 <div class="slide">
  147.                   <div class="slide-media img-cover"><a href="/products/detail/10">
  148.                       <picture>
  149.                         <source srcset="/html/user_data/assets/img/top/img_kv_03-sp.png" media="(max-width: 1024px)">
  150.                         <img src="/html/user_data/assets/img/top/img_kv_03-pc.png" role="presentation" alt="">
  151.                       </picture></a></div>
  152.                 </div>
  153.               </div>
  154.               <div class="kv__slider-item swiper-slide">
  155.                 <div class="slide">
  156.                   <div class="slide-media img-cover"><a href="/products/detail/82">
  157.                       <picture>
  158.                         <source srcset="/html/user_data/assets/img/top/img_kv_04-sp.png" media="(max-width: 1024px)">
  159.                         <img src="/html/user_data/assets/img/top/img_kv_04-pc.png" role="presentation" alt="">
  160.                       </picture></a></div>
  161.                 </div>
  162.               </div>
  163.             </div>
  164.             <div class="kv__slider-ctrl">
  165.               <div class="kv__slider-ctrl--prev swiper-button-prev"></div>
  166.               <div class="kv__slider-ctrl--next swiper-button-next"></div>
  167.             </div>
  168.             <div class="kv__slider-pagination swiper-pagination"></div>
  169.           </div>
  170.         </div>
  171.         <div class="news">
  172.           <div class="news__container">
  173.             <h2 class="news__ttl">
  174.               <span>News</span>
  175.               新着情報
  176.             </h2>
  177.             {{ TabaCMSWidget('list',{type_data_key:'news'})|raw }}
  178.           </div>
  179.         </div>
  180.         <div class="campaign">
  181.           <div class="campaign__container">
  182.             <h2 class="campaign__ttl">
  183.               <span>New Topic</span>
  184.               ニュートピック
  185.             </h2>
  186.             <div class="js-campaign-slider swiper">
  187.               <div class="campaign__list swiper-wrapper">
  188.                 <div class="campaign__item swiper-slide">
  189.                   <a href="https://liff.line.me/2001059428-MqJqm0OA/landing?follow=%40326nxfjy&lp=hQMpL4&liff_id=2001059428-MqJqm0OA">
  190.                     <picture>
  191.                       <source srcset="/html/user_data/assets/img/top/bnr_campaign-01-1_sp.png" media="(max-width: 1024px)" />
  192.                       <img src="/html/user_data/assets/img/top/bnr_campaign-01-1.png" role="presentation" alt="" />
  193.                     </picture>
  194.                   </a>
  195.                 </div>
  196.                 {#<div class="campaign__item swiper-slide">#}
  197.                 {#  <a href="https://onlineshop.gmc.kumamoto.jp/products/detail/18">#}
  198.                 {#    <picture>#}
  199.                 {#      <source srcset="/assets/images/home/bnr_campaign-02_sp.png" media="(max-width: 1024px)" />#}
  200.                 {#      <source srcset="/assets/images/home/bnr_campaign-02@2x.png 2x" />#}
  201.                 {#      <img src="/assets/images/home/bnr_campaign-02.png" role="presentation" alt="" />#}
  202.                 {#    </picture>#}
  203.                 {#  </a>#}
  204.                 {#</div>#}
  205.                 <div class="campaign__item swiper-slide">
  206.                   <a href="https://ed.online-sinryou.com/equipment.html">
  207.                     <picture>
  208.                       <source srcset="/assets/images/home/bnr_campaign-03_sp.png" media="(max-width: 1024px)" />
  209.                       <source srcset="/assets/images/home/bnr_campaign-03@2x.png 2x" />
  210.                       <img src="/assets/images/home/bnr_campaign-03.png" role="presentation" alt="" />
  211.                     </picture>
  212.                   </a>
  213.                 </div>
  214.               </div>
  215.             </div>
  216.           </div>
  217.         </div>
  218.         <div id="pickup" class="pickup">
  219.           <div class="pickup__container">
  220.             <h2 class="pickup__ttl">
  221.               <span>Pick Up</span>
  222.               特集
  223.             </h2>
  224.             <div class="js-pickup-slider swiper">
  225.               <div class="pickup__list swiper-wrapper">
  226.                 <div class="pickup__item swiper-slide">
  227.                   <a href="https://onlineshop.gmc.kumamoto.jp/products/detail/8">
  228.                     <div class="pickup__item-img">
  229.                       <img src="/html/user_data/solpro1.jpg" alt="" />
  230.                     </div>
  231.                     <div class="pickup__item-category">Pick Up</div>
  232.                     <div class="pickup__item-ttl">ソルプロ プリュス ホワイト</div>
  233.                     <div class="pickup__item-txt">未来のあなたを笑顔に”3つのケア習慣”雨や曇りでも紫外線ケア。実は、雨や曇りでも紫外線を浴びせています。シーンに合わせた紫外線ケアをしましょう。</div>
  234.                   </a>
  235.                 </div>
  236.                 <div class="pickup__item swiper-slide">
  237.                   <a href="https://onlineshop.gmc.kumamoto.jp/products/detail/10">
  238.                     <div class="pickup__item-img">
  239.                       <img src="/assets/images/home/img_pickup-02@2x.jpg" alt="" />
  240.                     </div>
  241.                     <div class="pickup__item-category">Pick Up</div>
  242.                     <div class="pickup__item-ttl">リボ・カプセル ビタミンC</div>
  243.                     <div class="pickup__item-txt">「リポ・カプセルビタミンC」は、ビタミンCをリポソームカプセルに内包させることにより、体内利用効率を最大限に高めることを目的とした経口サプリメントです。</div>
  244.                   </a>
  245.                 </div>
  246.                 <div class="pickup__item swiper-slide">
  247.                   <a href="https://onlineshop.gmc.kumamoto.jp/products/detail/115">
  248.                     <div class="pickup__item-img">
  249.                       <img src="/html/user_data/5-ALA25.jpg" alt="" />
  250.                     </div>
  251.                     <div class="pickup__item-category">Pick Up</div>
  252.                     <div class="pickup__item-ttl">アラプラス 5-ALA25</div>
  253.                     <div class="pickup__item-txt">1粒に5-ALA25mg（高麗人参約200本分）が配合されています。もっと輝きたいあなたのエイジングケアを応援するエナジーサプリメントです。</div>
  254.                   </a>
  255.                 </div>
  256.                 <div class="pickup__item swiper-slide">
  257.                   <a href="https://onlineshop.gmc.kumamoto.jp/products/detail/14">
  258.                     <div class="pickup__item-img">
  259.                       <img src="/assets/images/home/img_pickup-04@2x.jpg" alt="" />
  260.                     </div>
  261.                     <div class="pickup__item-category">Pick Up</div>
  262.                     <div class="pickup__item-ttl">WiQo保湿ナリシングクリーム</div>
  263.                     <div class="pickup__item-txt">ご自身の基礎化粧品をご使用した最後に保湿クリームとしてご使用いただくか、WiQoフェイスフルイドを30分ほど置いた後、洗い流さずそのままWiQo保湿ナリシングクリームを塗布します.</div>
  264.                   </a>
  265.                 </div>
  266.                 <div class="pickup__item swiper-slide">
  267.                   <a href="https://onlineshop.gmc.kumamoto.jp/products/detail/27">
  268.                     <div class="pickup__item-img">
  269.                       <img src="/assets/images/home/img_pickup-05@2x.jpg" alt="" />
  270.                     </div>
  271.                     <div class="pickup__item-category">Pick Up</div>
  272.                     <div class="pickup__item-ttl">セルニュープラス デオドラントクリーム</div>
  273.                     <div class="pickup__item-txt">●有効成分クロルヒドロキシAI配合。汗をおさえて気になるにおいを防ぎます。●皮脂吸収パウダー配合で、さらさら感が長続きします。</div>
  274.                   </a>
  275.                 </div>
  276.               </div>
  277.               <div class="pickup__list-ctrl">
  278.                 <div class="pickup__list-ctrl--prev swiper-button-prev"></div>
  279.                 <div class="pickup__list-ctrl--next swiper-button-next"></div>
  280.               </div>
  281.             </div>
  282.           </div>
  283.         </div>
  284.         <div class="bg_wrapper">
  285.           <div class="category">
  286.             <div class="category__container">
  287.               <h2 class="category__ttl">
  288.                 <span>Category</span>
  289.                 お悩み別カテゴリー
  290.               </h2>
  291.               <div class="category__wrapper">
  292.                 <div class="category__list category__list--woman">
  293.                   <h3 class="category__list-ttl">
  294.                     <span>女性のお悩みに</span>
  295.                   </h3>
  296.                   <div class="category__list-container">
  297.                     <div class="category__list-item">
  298.                       <a href="/products/list?category_id=15">
  299.                         <div class="category__list-item-img">
  300.                           <img src="/assets/images/home/img_category-01@2x.png" alt="" />
  301.                         </div>
  302.                         <div class="category__list-item-ttl">アンチエイジング</div>
  303.                       </a>
  304.                     </div>
  305.                     <div class="category__list-item">
  306.                       <a href="/products/list?category_id=18">
  307.                         <div class="category__list-item-img">
  308.                           <img src="/assets/images/home/img_category-02@2x.png" alt="" />
  309.                         </div>
  310.                         <div class="category__list-item-ttl">しわ・ハリ</div>
  311.                       </a>
  312.                     </div>
  313.                     <div class="category__list-item">
  314.                       <a href="/products/list?category_id=17">
  315.                         <div class="category__list-item-img">
  316.                           <img src="/assets/images/home/img_category-03@2x.png" alt="" />
  317.                         </div>
  318.                         <div class="category__list-item-ttl">美白</div>
  319.                       </a>
  320.                     </div>
  321.                     <div class="category__list-item">
  322.                       <a href="/products/list?category_id=19">
  323.                         <div class="category__list-item-img">
  324.                           <img src="/assets/images/home/img_category-04@2x.png" alt="" />
  325.                         </div>
  326.                         <div class="category__list-item-ttl">メイクアップ</div>
  327.                       </a>
  328.                     </div>
  329.                     <div class="category__list-item">
  330.                       <a href="/products/list?category_id=20">
  331.                         <div class="category__list-item-img">
  332.                           <img src="/assets/images/home/img_category-05@2x.png" alt="" />
  333.                         </div>
  334.                         <div class="category__list-item-ttl">紫外線対策</div>
  335.                       </a>
  336.                     </div>
  337.                     <div class="category__list-item">
  338.                       <a href="/products/list?category_id=16">
  339.                         <div class="category__list-item-img">
  340.                           <img src="/assets/images/home/img_category-06@2x.png" alt="" />
  341.                         </div>
  342.                         <div class="category__list-item-ttl">乾燥対策</div>
  343.                       </a>
  344.                     </div>
  345.                   </div>
  346.                 </div>
  347.                 <div class="category__list category__list--man">
  348.                   <h3 class="category__list-ttl">
  349.                     <span>男性のお悩みに</span>
  350.                   </h3>
  351.                   <div class="category__list-container">
  352.                     <div class="category__list-item">
  353.                       <a href="/products/list?category_id=30">
  354.                         <div class="category__list-item-img">
  355.                           <img src="/assets/images/home/img_category-07@2x.png" alt="" />
  356.                         </div>
  357.                         <div class="category__list-item-ttl">薄毛のお悩み</div>
  358.                       </a>
  359.                     </div>
  360.                     <div class="category__list-item">
  361.                       <a href="/products/list?category_id=31">
  362.                         <div class="category__list-item-img">
  363.                           <img src="/assets/images/home/img_category-08@2x.png" alt="" />
  364.                         </div>
  365.                         <div class="category__list-item-ttl">ED治療</div>
  366.                       </a>
  367.                     </div>
  368.                   </div>
  369.                 </div>
  370.               </div>
  371.             </div>
  372.             <div class="category__more">
  373.               <div class="category__more-container">
  374.                 <ul class="category__more-list" id="more-category">
  375.                   <li>
  376.                     <a href="/products/list?category_id=15">アンチエンジング</a>
  377.                   </li>
  378.                   <li>
  379.                     <a href="/products/list?category_id=18">しわ・ハリ</a>
  380.                   </li>
  381.                   <li>
  382.                     <a href="/products/list?category_id=17">美白</a>
  383.                   </li>
  384.                   <li>
  385.                     <a href="/products/list?category_id=19">メイクアップ</a>
  386.                   </li>
  387.                   <li>
  388.                     <a href="/products/list?category_id=20">紫外線対策</a>
  389.                   </li>
  390.                   <li>
  391.                     <a href="/products/list?category_id=16">乾燥対策</a>
  392.                   </li>
  393.                   <li>
  394.                     <a href="/products/list?category_id=21">腸内環境</a>
  395.                   </li>
  396.                   <li>
  397.                     <a href="/products/list?category_id=13">ダイエット</a>
  398.                   </li>
  399.                   <li>
  400.                     <a href="/products/list?category_id=14">睡眠サポート</a>
  401.                   </li>
  402.                   <li>
  403.                     <a href="/products/list?category_id=24">毛穴</a>
  404.                   </li>
  405.                   <li>
  406.                     <a href="/products/list?category_id=22">発毛</a>
  407.                   </li>
  408.                   <li>
  409.                     <a href="/products/list?category_id=25">ニキビ</a>
  410.                   </li>
  411.                   <li>
  412.                     <a href="/products/list?category_id=30">薄毛対策</a>
  413.                   </li>
  414.                   <li>
  415.                     <a href="/products/list?category_id=31">ED治療</a>
  416.                   </li>
  417.                 </ul>
  418.                 <div class="category__more-btn">
  419.                   <button data-acc-target=".category__more ul">もっとみる</button>
  420.                 </div>
  421.               </div>
  422.             </div>
  423.           </div>
  424.           <div class="ranking">
  425.             <div class="ranking__container">
  426.               <h2 class="ranking__ttl">
  427.                 <span>Ranking</span>
  428.                 ランキング
  429.               </h2>
  430.               <div class="js-ranking-slider swiper">
  431.                 <div class="ranking__list swiper-wrapper">
  432.                   <div class="ranking__item swiper-slide">
  433.                     <a href="/products/detail/4">
  434.                       <div class="ranking__item-img">
  435.                         <img src="/html/upload/save_image/0605154909_647d8565c5bf9.jpg" alt="" />
  436.                       </div>
  437.                       <div class="ranking__item-rank">1</div>
  438.                       <div class="ranking__item-ttl">Ogshi サプリメント</div>
  439.                       <div class="ranking__item-txt">日本人女性の頭皮環境・毛髪を研究して誕生したサプリメント。ogshi サプリメントOgshiサプリメントは日本人女性のための毛髪サプリメントです。育毛剤などの外側からのケアを行なっていても、毛根が栄養不足に陥っていると効果があまり見込めません。そこで、薄毛の日本人女性に不足しがちで、発毛・養毛をサポートする15種類の栄養素を手軽に摂取できるような栄養補助食品を開発しました。</div>
  440.                     </a>
  441.                   </div>
  442.                   <div class="ranking__item swiper-slide">
  443.                     <a href="/products/detail/72">
  444.                       <div class="ranking__item-img">
  445.                         <img src="/html/user_data/1019112345_6713183122daf.jpg" alt="" />
  446.                       </div>
  447.                       <div class="ranking__item-rank">2</div>
  448.                       <div class="ranking__item-ttl">QUADAYS（キュアデイズ）</div>
  449.                       <div class="ranking__item-txt">【こんなお悩みの方に】時間がたつとニオイがする、体質的にわきが、子供のニオイが気になる、手軽にニオイケアがしたい、他人よりニオイがきつい、汗ジミが気になる</div>
  450.                     </a>
  451.                   </div>
  452.                   <div class="ranking__item swiper-slide">
  453.                     <a href="/products/detail/71">
  454.                       <div class="ranking__item-img">
  455.                         <img src="/html/user_data/1019112321_67131819bd35f.jpg" alt="" />
  456.                       </div>
  457.                       <div class="ranking__item-rank">3</div>
  458.                       <div class="ranking__item-ttl">センシル美容液 C’ensil VC-30</div>
  459.                       <div class="ranking__item-txt">【米国特許取得！次世代型ピュアビタミンC美容液】Censil（センシル） VC-30 美容液Censil（センシル） VC-30はその圧倒的な高速浸透機能を有するATDS（Amphiphilic Transepidermal Delivery System*1):両親媒性浸透システム）により、従来製品では実現できなかった30％という驚異の高濃度ピュアビタミンC（純粋L-アスコルビン酸）を配合させるこに成功したビタ ミンC美容液です。</div>
  460.                     </a>
  461.                   </div>
  462.                   <div class="ranking__item swiper-slide">
  463.                     <a href="/products/detail/66">
  464.                       <div class="ranking__item-img">
  465.                         <img src="/html/user_data/1121165330_673ee6fa36cad.jpg" alt="" />
  466.                       </div>
  467.                       <div class="ranking__item-rank">4</div>
  468.                       <div class="ranking__item-ttl">HQコンシーラー</div>
  469.                       <div class="ranking__item-txt">HQコンシーラー ハイドロキノン4%配合。シミを隠しながら持続的に修復。使いやすいスティックタイプ</div>
  470.                     </a>
  471.                   </div>
  472.                   <div class="ranking__item swiper-slide">
  473.                     <a href="/products/detail/65">
  474.                       <div class="ranking__item-img">
  475.                         <img src="/html/user_data/1121173232_673ef020e8ded.jpg" alt="" />
  476.                       </div>
  477.                       <div class="ranking__item-rank">5</div>
  478.                       <div class="ranking__item-ttl">アスタリズム スキンケアベース美容液</div>
  479.                       <div class="ranking__item-txt">お肌が不健康な状態だと、悩みを抱えやすくなるだけではなく、長引く原因にもなります。アスタリズムは、お肌の調子を整え、健康に導くエッセンス。年齢、性別、肌質、悩みの種類を問わず、どなたでもお使いいただけます。アスタリズムをもっとも受け入れやすい洗顔後のお肌にぜひ、お使いください。</div>
  480.                     </a>
  481.                   </div>
  482.                 </div>
  483.                 <div class="ranking__list-ctrl">
  484.                   <div class="ranking__list-ctrl--prev swiper-button-prev"></div>
  485.                   <div class="ranking__list-ctrl--next swiper-button-next"></div>
  486.                 </div>
  487.               </div>
  488.               <div class="ranking__btn">
  489.                 <a href="/products/list">商品一覧はこちら</a>
  490.               </div>
  491.             </div>
  492.           </div>
  493.         </div>
  494.         <div class="products">
  495.           <div class="products__container">
  496.             <h2 class="products__ttl"><span>Products・Brands</span>取り扱い製品・ブランド</h2>
  497.             <div class="products__list">
  498.               <div class="products__item"><a href="/products/list?category_id=39">
  499.                   <div class="products__item-img"><img src="/assets/images/home/img_products-01@2x.jpg" alt=""></div>
  500.                   <div class="products__item-ttl">WiQo</div></a></div>
  501.               <div class="products__item"><a href="/products/list?category_id=35">
  502.                   <div class="products__item-img"><img src="/assets/images/home/img_products-02@2x.jpg" alt=""></div>
  503.                   <div class="products__item-ttl">M DEAR</div></a></div>
  504.               <div class="products__item"><a href="/products/list?category_id=37">
  505.                   <div class="products__item-img"><img src="/assets/images/home/img_products-03@2x.jpg" alt=""></div>
  506.                   <div class="products__item-ttl">Ogshi</div></a></div>
  507.               <div class="products__item"><a href="/products/list?category_id=43">
  508.                   <div class="products__item-img"><img src="/assets/images/home/img_products-04@2x.jpg" alt=""></div>
  509.                   <div class="products__item-ttl">セルニュープラス</div></a></div>
  510.               <div class="products__item"><a href="/products/list?category_id=47">
  511.                   <div class="products__item-img"><img src="/assets/images/home/img_products-05@2x.jpg" alt=""></div>
  512.                   <div class="products__item-ttl">プラスリストア</div></a></div>
  513.               <div class="products__item"><a href="/products/list?category_id=33">
  514.                   <div class="products__item-img"><img src="/assets/images/home/img_products-06@2x.jpg" alt=""></div>
  515.                   <div class="products__item-ttl">Beautiful
  516.                     <wbr>Skin
  517.                   </div></a></div>
  518.               <div class="products__item"><a href="/products/list?category_id=44">
  519.                   <div class="products__item-img"><img src="/assets/images/home/img_products-07@2x.jpg" alt=""></div>
  520.                   <div class="products__item-ttl">センシル</div></a></div>
  521.               <div class="products__item"><a href="/products/list?category_id=45">
  522.                   <div class="products__item-img"><img src="/assets/images/home/img_products-08@2x.jpg" alt=""></div>
  523.                   <div class="products__item-ttl">ソルプロ</div></a></div>
  524.               <div class="products__item"><a href="/products/list?category_id=40">
  525.                   <div class="products__item-img"><img src="/assets/images/home/img_products-09@2x.jpg" alt=""></div>
  526.                   <div class="products__item-ttl">アスタリール</div></a></div>
  527.               <div class="products__item"><a href="/products/list?category_id=42">
  528.                   <div class="products__item-img"><img src="/assets/images/home/img_products-10@2x.jpg" alt=""></div>
  529.                   <div class="products__item-ttl">サンソリット</div></a></div>
  530.               <div class="products__item"><a href="/products/list?category_id=49">
  531.                   <div class="products__item-img"><img src="/assets/images/home/img_products-11@2x.jpg" alt=""></div>
  532.                   <div class="products__item-ttl">マグバーム</div></a></div>
  533.               <div class="products__item"><a href="/products/list?category_id=48">
  534.                   <div class="products__item-img"><img src="/assets/images/home/img_products-12@2x.jpg" alt=""></div>
  535.                   <div class="products__item-ttl">ペロバーム</div></a></div>
  536.             </div>
  537.             <div class="products__btn"><a href="/products/list">商品一覧はこちら</a></div>
  538.           </div>
  539.         </div>
  540.         <!--
  541.         <div class="onlineshop">
  542.           <div class="onlineshop__container">
  543.             <div class="onlineshop__ribbon">
  544.               <picture>
  545.                 <source srcset="/assets/images/home/txt_onlineshop-ribbon_sp.svg" media="(max-width: 1024px)" />
  546.                 <img src="/assets/images/home/txt_onlineshop-ribbon.svg" alt="オンライン購入限定 割引特典あり" />
  547.               </picture>
  548.             </div>
  549.             <div class="onlineshop__wrapper">
  550.               <h2 class="onlineshop__ttl">オンラインショップ限定</h2>
  551.               <p class="onlineshop__txt">来院型治療を割引価格でお受けいただけます。</p>
  552.               <div class="onlineshop__btn">
  553.                 <a href="/products/list?category_id=52">来院型治療はこちら</a>
  554.               </div>
  555.             </div>
  556.           </div>
  557.         </div>
  558.         -->
  559.         <style>
  560.             .onlineshop__container {
  561.                 padding: 0;
  562.             }
  563.             
  564.             @media screen and (max-width: 768px) {
  565.                 .onlineshop__container {
  566.                     padding: 0;
  567.                 }
  568.             }
  569.             
  570.             .onlineshop__container::before {
  571.                 content: none;
  572.             }
  573.             
  574.             .onlineshop__container::after {
  575.             content: none;
  576.             }
  577.             
  578.             .onlineshop__wrapper {
  579.                 padding: 0;
  580.                 border: none;
  581.             }
  583.             @media screen and (max-width: 768px) {
  584.                 .onlineshop__wrapper {
  585.                     padding: 0;
  586.                 }
  587.             }
  589.         </style>
  590.         <div class="onlineshop">
  591.           <div class="onlineshop__container">
  592.             <div class="onlineshop__ribbon">
  593.             <!--
  594.               <picture>
  595.                 <source srcset="/assets/images/home/txt_onlineshop-ribbon_sp.svg" media="(max-width: 1024px)" />
  596.                 <img src="/assets/images/home/txt_onlineshop-ribbon.svg" alt="オンライン購入限定 割引特典あり" />
  597.               </picture>
  598.             -->
  599.                 <img src="/assets/images/home/txt_onlineshop-ribbon.svg" alt="オンライン購入限定 割引特典あり" />
  600.             </div>
  601.             <div class="onlineshop__wrapper">
  602.               <picture>
  603.                 <source srcset="/html/user_data/assets/img/top/bnr_onlineshop-sp.png" media="(max-width: 1024px)" />
  604.                 <img src="/html/user_data/assets/img/top/bnr_onlineshop-pc.png" alt="オンラインショップ限定 来院型治療を割引価格で近日発表予定" />
  605.               </picture>
  606.             </div>
  607.           </div>
  608.         </div>
  609.         {% set Products = CustomizeNewProduct() %}
  610. {% if Products|length > 0 %}
  611.  
  612. <div class="item">
  613.   <div class="item__container">
  614.     <h2 class="item__ttl">
  615.       <span>Item</span>
  616.       商品一覧
  617.     </h2>
  618.     <div class="item__list">
  619.       {% for Product in Products %}
  620.       <div class="item__item">
  621.         <a href="{{ url('product_detail', {'id': Product.id}) }}">
  622.           <div class="item__item-img">
  623.             <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="" />
  624.           </div>
  625.           {% for ProductTag in Product.ProductTag %}
  626.             {% if ProductTag.Tag.id == 6  %}
  627.             <div class="item__item-category">{{ ProductTag.Tag.name }}</div>
  628.             {% endif %}
  629.           {% endfor %}
  630.           <div class="item__item-ttl">{{ Product.name }}</div>
  631.           <div class="item__item-txt">{{ Product.description_detail | slice(0, 200)}}</div>
  632.         </a>
  633.       </div>
  634.       {% endfor %}
  635.     </div>
  636.     <div class="item__btn">
  637.       <a href="/products/list">商品一覧はこちら</a>
  638.     </div>
  639.   </div>
  640. </div>
  641. {% endif %}
  642.         <div class="faq">
  643.           <div class="faq__container">
  644.             <h2 class="faq__ttl">
  645.               <span>Q＆A</span>
  646.               よくあるご質問
  647.             </h2>
  648.             <dl class="faq__list">
  649.               <dt class="faq__item faq__item--q" data-acc-target="#faq-1" data-acc-open="true">
  650.                 <div class="faq__item-ttl">開封・使用したものでも返品できますか？</div>
  651.               </dt>
  652.               <dd class="faq__item faq__item--a" id="faq-1">
  653.                 <div class="faq__item-ttl">商品の性質上、お客様の都合による返品は原則的にお断りしています。</div>
  654.                 <div class="faq__item-txt">
  655.                   <p>商品の破損や誤送の場合に限り可能です。（未使用品のみ承ります）
  656.                      商品使用後の返品やお客様ご都合の理由（お肌に合わない等）、または輸送中の箱の破損・商品の傷などの理由で返品をお受けすることはできません。予めご了承ください。<br/>
  657.                     
  658.                      〇返品期限<br/>
  659.                      商品到着後3日以内にメールでご連絡をお願いいたします。（gmc-on-lineshop@gmc.kumamoto.jp）
  660.                      メールもしくはお電話にてお返事させていただきます。<br/>
  661.                      ご連絡をいただいてから1週間以内に返送をお願いいたします。<br/>
  662.                      この期間を過ぎた場合、返品交換はお受けできなくなりますので、あらかじめご了承ください。また、ご連絡無しに商品を返送いただいてもご対応できませんのでご注意ください。<br/>
  664.                      〇返品送料<br/>
  665.                      不良品に該当する返品送料は当方で負担いたします。</p>
  666.                 </div>
  667.               </dd>
  668.               <dt class="faq__item faq__item--q" data-acc-target="#faq-2">
  669.                 <div class="faq__item-ttl">会員登録なしで購入できますか？</div>
  670.               </dt>
  671.               <dd class="faq__item faq__item--a" id="faq-2">
  672.                 <div class="faq__item-ttl">会員登録を必須としております。</div>
  673.                 <div class="faq__item-txt">
  674.                   <p>原則として、会員登録を必須とさせていただきます。こちらは各商品によって、別途ご連絡を差し上げる場合があるからとなります。お手数ですが、会員登録後のご購入をよろしくお願いいたします。</p>
  675.                 </div>
  676.               </dd>
  677.               <dt class="faq__item faq__item--q" data-acc-target="#faq-3">
  678.                 <div class="faq__item-ttl">商品注文後に追加できますか？</div>
  679.               </dt>
  680.               <dd class="faq__item faq__item--a" id="faq-3">
  681.                 <div class="faq__item-ttl">発送前であれば、他の商品を同梱発送することは可能です。</div>
  682.                 <div class="faq__item-txt">
  683.                   <p>ただし、決済処理の変更ができないため、送料の変更はいたし兼ねますのでご了承ください。</p>
  684.                 </div>
  685.               </dd>
  686.               <dt class="faq__item faq__item--q" data-acc-target="#faq-4">
  687.                 <div class="faq__item-ttl">納期はどのくらいですか？</div>
  688.               </dt>
  689.               <dd class="faq__item faq__item--a" id="faq-4">
  690.                 <div class="faq__item-ttl">商品ご注文後、入金確認が取れ次第、１～5日以内（休業日除く）に発送いたします。</div>
  691.                 <div class="faq__item-txt">
  692.                   <p>お届けまでお時間をいただく場合には別途ご連絡させていただきます。</p>
  693.                 </div>
  694.               </dd>
  695.               <dt class="faq__item faq__item--q" data-acc-target="#faq-5">
  696.                 <div class="faq__item-ttl">送料はかかりますか？</div>
  697.               </dt>
  698.               <dd class="faq__item faq__item--a" id="faq-5">
  699.                 <div class="faq__item-ttl">地域や荷物の重さ等により異なった送料がかかります。</div>
  700.                 <div class="faq__item-txt">
  701.                   <p>また、クール便対象商品に関しましては、別途クール便の料金が加算されますのでご了承ください。</p>
  702.                 </div>
  703.               </dd>
  704.               <dt class="faq__item faq__item--q" data-acc-target="#faq-6">
  705.                 <div class="faq__item-ttl">自宅以外の住所へ発送するにはどうしたらいいですか？</div>
  706.               </dt>
  707.               <dd class="faq__item faq__item--a" id="faq-6">
  708.                 <div class="faq__item-ttl">ご注文時に「お届け先」へ別途ご登録ください。</div>
  709.                 <div class="faq__item-txt">
  710.                   <p>ご注文時の配送先間違いなどにご注意ください。</p>
  711.                 </div>
  712.               </dd>
  713.               <dt class="faq__item faq__item--q" data-acc-target="#faq-8">
  714.                 <div class="faq__item-ttl">メール便で送ってもらえますか？</div>
  715.               </dt>
  716.               <dd class="faq__item faq__item--a" id="faq-8">
  717.                 <div class="faq__item-ttl">メール便の対応は行っておりません。</div>
  718.                 <div class="faq__item-txt">
  719.                   <p></p>
  720.                 </div>
  721.               </dd>
  722.               <dt class="faq__item faq__item--q" data-acc-target="#faq-9">
  723.                 <div class="faq__item-ttl">診察が必要な商品はありますか？</div>
  724.               </dt>
  725.               <dd class="faq__item faq__item--a" id="faq-9">
  726.                 <div class="faq__item-ttl">処方箋として診察を受けないと発送できない商品もございます。</div>
  727.                 <div class="faq__item-txt">
  728.                   <p>診察対象の商品は注文確認時に送信されるメール内に当院へのLINE追加がございますので、そちらからご登録いただき診察をお願いいたします。</p>
  729.                 </div>
  730.               </dd>
  731.               <dt class="faq__item faq__item--q" data-acc-target="#faq-10">
  732.                 <div class="faq__item-ttl">メールアドレス・パスワードの変更は？</div>
  733.               </dt>
  734.               <dd class="faq__item faq__item--a" id="faq-10">
  735.                 <div class="faq__item-ttl">マイページの会員情報編集にて変更可能です。</div>
  736.                 <div class="faq__item-txt">
  737.                   <p>＜メールアドレスの変更＞<br>
  738.                     マイページの会員情報編集にて変更可能です。<br>
  739.                     ＜パスワードの変更＞<br>
  740.                     ログイン時に「ログイン情報をお忘れですか？」というリンクがございます。そこから、ご登録済のメールアドレスを入力して送信していただくと、パスワードの再設定メールが送信されます。</p>
  741.                 </div>
  742.               </dd>    
  743.             </dl>
  744.             <div class="faq__btn">
  745.               <a href="#">一覧はこちら</a>
  746.             </div>
  747.           </div>
  748.         </div>
  749.         <div class="about">
  750.           <div class="about__container">
  751.             <div class="about__wrapper">
  752.               <h2 class="about__ttl">
  753.                 グレースメディカルラウンジは
  754.                 <br />
  755.                 熊本市東区佐土原のクリニックが運営
  756.                 <wbr />
  757.                 する美容ラウンジです
  758.               </h2>
  759.               <p class="about__txt">グレースメディカルオンラインショップはクリニックが運営しており、幅広い肌のお悩みや、体質改善のサポートを致します。熊本初上陸の最新機器を用いたフェイシャルや脱毛をはじめ、日々の体調や体質を管理する美容点滴、栄養解析を行う効果的なサプリメント外来、お一人おひとりのお悩みにお応えできるドクターズコスメなどのご提供を行っております。</p>
  760.               <div class="about__btn">
  761.                 <a href="https://gmc.kumamoto.jp/lounge/lounge">クリニックについて</a>
  762.               </div>
  763.             </div>
  764.           </div>
  765.         </div>
  766.         <!-- /topPage-->
  767.         
  768. {% endblock %}