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 'default_frame.twig' %}
  13. {% set body_class = 'front_page topWrap' %}
  15. {% block stylesheet %}
  16.         <link rel="preload" href="/html/user_data/assets/img/top/mv_sp01.png" as="image">
  17.     <style>
  18.         .slick-slider {
  19.             margin-bottom: 30px;
  20.         }
  22.         .slick-dots {
  23.             position: absolute;
  24.             bottom: -45px;
  25.             display: block;
  26.             width: 100%;
  27.             padding: 0;
  28.             list-style: none;
  29.             text-align: center;
  30.         }
  32.         .slick-dots li {
  33.             position: relative;
  34.             display: inline-block;
  35.             width: 20px;
  36.             height: 20px;
  37.             margin: 0 5px;
  38.             padding: 0;
  40.             cursor: pointer;
  41.         }
  43.         .slick-dots li button {
  44.             font-size: 0;
  45.             line-height: 0;
  46.             display: block;
  47.             width: 20px;
  48.             height: 20px;
  49.             padding: 5px;
  50.             cursor: pointer;
  51.             color: transparent;
  52.             border: 0;
  53.             outline: none;
  54.             background: transparent;
  55.         }
  57.         .slick-dots li button:hover,
  58.         .slick-dots li button:focus {
  59.             outline: none;
  60.         }
  62.         .slick-dots li button:hover:before,
  63.         .slick-dots li button:focus:before {
  64.             opacity: 1;
  65.         }
  67.         .slick-dots li button:before {
  68.             content: " ";
  69.             line-height: 20px;
  70.             position: absolute;
  71.             top: 0;
  72.             left: 0;
  73.             width: 12px;
  74.             height: 12px;
  75.             text-align: center;
  76.             opacity: .25;
  77.             background-color: black;
  78.             border-radius: 50%;
  80.         }
  82.         .slick-dots li.slick-active button:before {
  83.             opacity: .75;
  84.             background-color: black;
  85.         }
  87.         .slick-dots li button.thumbnail img {
  88.             width: 0;
  89.             height: 0;
  90.         }
  91.         .topWrap .ec-layoutRole__contents {
  92.             max-width: unset;
  93.         }
  95.     </style>
  97. {% endblock %}
  99. {% block javascript %}
  100.     <script>
  101.         $(function () {
  102. $('.main_visual').slick({dots: true, arrows: false, autoplay: true, speed: 300});
  103. });
  104.     </script>
  105. {% endblock javascript %}
  107. {% block main %}
  109.     <section class="topWrap-mv">
  110.         <img src="/html/user_data/assets/img/top/mv_pc01.png?202207" class="pc" alt="離れて暮らす親・家族とつながる">
  111.         <img src="/html/user_data/assets/img/top/mv_sp01.png?2022" class="sp" alt="離れて暮らす親・家族とつながる">
  112.     </section>
  113.     <section class="topWrap-read">
  114.         <div class="bgTxt">Internet of Things</div>
  115.         <div class="inner">
  116.             <div class="ttlArea01">
  117.                 <img src="/html/user_data/assets/img/top/title_deco01.png" alt="" class="ttlIco01">
  118.                 <h2 class="ttl01">見守る × 繫がる × 寄り添う</h2>
  119.             </div>
  120.             <p class="centerTxt">IoTを使った、介護の初期症状に役立つ商品やサポートサービスをご提供。<br class="pc">「離れて暮らす親の状態が心配」「もしかしたら認知症かもしれない」<br class="pc">そんな不安に寄り添い、それぞれのご状況にぴったりなサービスをご提案させていただきます。</p>
  121.         </div>
  122.     </section>
  123.     <section class="topWrap-safety">
  124.         <div class="innerWide">
  125.             <div class="ttlArea02">
  126.                 <h2 class="ttl02">見守り・安否確認</h2>
  127.                 <span class="subTxt01">CONFIRMING</span>
  128.             </div>
  129.             <ul class="listType01">
  130.                 <li class="card01">
  131.                     <a href="{{ url('product_list',{'category_id':'23'}) }}">
  132.                         <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/img_safety01.png" class="pc lazy" alt="健康状態を確認したい">
  133.                         <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/img_safety01_sp.png" class="sp lazy" alt="健康状態を確認したい">
  134.                     </a>
  135.                 </li>
  136.                 <li class="card01">
  137.                     <a href="{{ url('product_list',{'category_id':'24'}) }}">
  138.                         <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/img_safety07.png" class="pc lazy" alt="健康状態を確認したい">
  139.                         <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/img_safety07_sp.png" class="sp lazy" alt="健康状態を確認したい">
  140.                     </a>
  141.                 </li>
  142.                 <li class="card01">
  143.                     <a href="{{ url('product_list',{'category_id':'25'}) }}">
  144.                         <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/img_safety02.png" class="pc lazy" alt="部屋の温度確認･調節をしたい">
  145.                         <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/img_safety02_sp.png" class="sp lazy" alt="部屋の温度確認･調節をしたい">
  146.                     </a>
  147.                 </li>
  148.                 <li class="card01">
  149.                     <a href="{{ url('product_list',{'category_id':'26'}) }}">
  150.                         <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/img_safety03.png" class="pc lazy" alt="普段どおりの生活ができているか確認したい">
  151.                         <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/img_safety03_sp.png" class="sp lazy" alt="普段どおりの生活ができているか確認したい">
  152.                     </a>
  153.                 </li>
  154.                 <li class="card01">
  155.                     <a href="{{ url('product_list',{'category_id':'27'}) }}">
  156.                         <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/img_safety04.png" class="pc lazy" alt="遠くから部屋の様子を確認したい">
  157.                         <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/img_safety04_sp.png" class="sp lazy" alt="遠くから部屋の様子を確認したい">
  158.                     </a>
  159.                 </li>
  160.                 <li class="card01">
  161.                     <a href="{{ url('product_list',{'category_id':'28'}) }}">
  162.                         <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/img_safety05.png" class="pc lazy" alt="もしものことがあったら知らせてほしい">
  163.                         <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/img_safety05_sp.png" class="sp lazy" alt="もしものことがあったら知らせてほしい">
  164.                     </a>
  165.                 </li>
  166.             </ul>
  167.             <a href="{{ url('product_list',{'category_id':'22'}) }}" class="btn01"><img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/btn_safety01.png" class="lazy" alt="安否確認・見守りの商品をすべて見る"></a>
  168.         </div>
  169.     </section>
  170.     <section class="topWrap-dementia">
  171.         <div class="innerWide">
  172.             <div class="ttlArea02">
  173.                 <h2 class="ttl02">認知症かも…親が心配</h2>
  174.                 <span class="subTxt01">DEMENTIA</span>
  175.             </div>
  176.             <ul class="listType01">
  177.                 <li class="card01">
  178.                     <a href="{{ url('product_list',{'category_id':'20'}) }}">
  179.                         <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/img_dementia01.png" class="pc lazy" alt="徘徊･迷子の発見･予防をしたい">
  180.                         <img src="/html/user_data/dummy.jpg" class="sp lazy" data-src="/html/user_data/assets/img/top/img_dementia01_sp.png" class="lazy" alt="徘徊･迷子の発見･予防をしたい">
  181.                     </a>
  182.                 </li>
  183.                 <li class="card01">
  184.                     <a href="{{ url('product_list',{'category_id':'21'}) }}">
  185.                         <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/img_dementia02.png" class="pc lazy" alt="薬の飲み忘れ･飲み間違いをなくしたい">
  186.                         <img src="/html/user_data/dummy.jpg" class="sp lazy" data-src="/html/user_data/assets/img/top/img_dementia02_sp.png" class="lazy" alt="薬の飲み忘れ･飲み間違いをなくしたい">
  187.                     </a>
  188.                 </li>
  189.             </ul>
  190.             <a href="{{ url('product_list',{'category_id':'7'}) }}" class="btn01"><img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/btn_dementia01.png" class="lazy" alt="認知症向けの商品をすべて見る"></a>
  191.         </div>
  192.     </section>
  193.     <div class="btnArea01">
  194.         <a href="{{ url('product_list') }}" class="btn01"><img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/btn_all01.png" class="lazy" alt="すべての商品・サービス一覧へ"></a>
  195.     </div>
  196.     <div class="para01"></div>
  197.     <section class="topWrap-column">
  198.         <div class="decoCircle"></div>
  199.         <div class="inner">
  200.             <div class="ttlArea01">
  201.                 <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/title_deco03.png?2022" alt="" class="ttlIco01 type01 lazy">
  202.                 <h2 class="ttl01">離れて暮らす親の<br>見守り・介護・生活支援の<br class="sp">情報メディア</h2>
  203.             </div>
  204.         </div>
  205.         <div>
  206.             <div class="ttlArea03">
  207.                 <h2 class="ttl02">新着記事<img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/ico_search01.png" class="lazy" alt="虫眼鏡"></h2>
  208.             </div>
  210.             <ul class="sliderType01">
  211.                 {% for Post in Posts %}
  212.                     <li class="card02">
  213.                         <a href="/column/{{ Post.ID }}">
  214.                             {% if Post.thumbnail is defined%}
  215.                                 <img src="/html/user_data/dummy.jpg" data-src="{{ Post.thumbnail }}" alt="" class="postImg lazy">
  216.                             {% endif %}
  217.                             <div class="textBox01">
  218.                                 <h2 class="ttl02">{{ Post.post_title }}</h2>
  219.                                 <ul class="tagList02">
  220.                                     {% for Term in Post.terms %}
  221.                                         <li>{{ Term.name }}</li>
  222.                                     {% endfor %}
  223.                                 </ul>
  224.                                 <span class="date">{{ Post.post_date|date('Y.m.d') }}</span>
  225.                             </div>
  226.                         </a>
  227.                     </li>
  228.                 {% endfor %}
  229.             </ul>
  230.         </div>
  231.         <div class="inner">
  232.             <div class="ttlArea03">
  233.                 <h2 class="ttl02">記事を探す<img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/ico_search01.png" class="lazy" alt="虫眼鏡"></h2>
  234.             </div>
  235.             <div class="scrollWrap01">
  236.                 <ul class="tagList01">
  237.                     {% for Term in Terms %}
  238.                         <li class="tag01">
  239.                             <a href="/column/category/{{ Term.slug }}">{{ Term.name }}</a>
  240.                         </li>
  241.                     {% endfor %}
  242.                 </ul>
  243.             </div>
  244.             <div class="ttlArea03">
  245.                 <h2 class="ttl02">特集記事<img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/ico_search01.png" class="lazy" alt="虫眼鏡"></h2>
  246.             </div>
  247.             <ul class="postList01">
  248.                 {% for Post in SpecialPosts %}
  249.                     <li class="card01">
  250.                         <a href="/column/{{ Post.ID }}/">
  251.                             {% if Post.thumbnail is defined%}
  252.                                 <img src="/html/user_data/dummy.jpg" data-src="{{ Post.thumbnail }}" alt="" class="postImg lazy">
  253.                             {% endif %}
  254.                             <div class="txtArea">
  255.                                 <h3 class="postTtl01">{{ Post.post_title }}</h3>
  256.                                 <div class="infoBox">
  257.                                     <span class="date">{{ Post.post_date| date('Y.m.d') }}</span>
  258.                                     <ul class="tagList02">
  259.                                         {% for Term in Post.terms %}
  260.                                             <li>{{ Term.name }}</li>
  261.                                         {% endfor %}
  262.                                     </ul>
  263.                                 </div>
  264.                                 <p>{{ Post.post_content|striptags |slice(0,30) }}...</p>
  265.                             </div>
  266.                         </a>
  267.                     </li>
  268.                 {% endfor %}
  269.             </ul>
  270.             <div class="btnArea02">
  271.                 <div class="decoTxt01">CHECK IT</div>
  272.                 <a href="/column" class="btn01"><img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/btn_mimasapo01.png" alt="ミマサポmedia" class="pc lazy"><img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/btn_mimasapo01_sp.png" alt="ミマサポmedia" class="sp lazy"></a>
  273.             </div>
  274.         </div>
  275.     </section>
  276.     <section class="topWrap-about">
  277.         <div class="innerWide">
  278.             <div class="ttlArea01">
  279.                 <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/title_deco01.png" alt="" class="ttlIco01">
  280.                 <h2 class="ttl01">運営会社<br class="sp">「やさしい手」について</h2>
  281.             </div>
  282.             <div class="container">
  283.                 <div class="txtBox">
  284.                     <h3 class="ttl02">「住み慣れた家で、最期まで生きる」<br>全国380カ所で在宅介護サービスを<br>提供しています。</h3>
  285.                     <p>介護に関するあらゆる悩みに対応いたします。ご高齢の皆様がご自宅で暮らす上での不安やお困りごと、その一つひとつを安心にかえるために、皆様の立場になって生活のご支援をしてまいります。「住み慣れた家で、最期まで生きる」その想いを、私たちが実現します。</p>
  286.                     <a href="/guide" class="btn01"><img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/btn_about01.png" class="pc lazy" alt="初めての方へ"><img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/btn_about01_sp.png" class="sp lazy" alt="初めての方へ"></a>
  287.                 </div>
  288.                 <div class="imgBox01">
  289.                     <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/img_about01.png" alt="" class="pc lazy">
  290.                     <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/img_about02.png" alt="" class="pc lazy">
  291.                     <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/img_about01_sp.png" alt="" class="sp lazy">
  292.                 </div>
  293.             </div>
  294.         </div>
  295.     </section>
  296.     <section class="topWrap-news">
  297.         <div class="inner">
  298.             <div class="ttlArea01">
  299.                 <img src="/html/user_data/dummy.jpg" data-src="/html/user_data/assets/img/top/title_deco01.png" alt="" class="ttlIco01 lazy">
  300.                 <h2 class="ttl01">お知らせ</h2>
  301.             </div>
  302.             <div class="scrollWrap02">
  303.                 <ul class="listType02">
  304.                     {% set NewsList = repository('Eccube\\Entity\\News').getList() %}
  305.                     {% for News in NewsList %}
  306.                         <li>
  307.                             <span class="date">{{ News.publish_date|date_day }}</span>
  308.                             <ul class="tagList03">
  309.                                 <li class="tag03">お知らせ</li>
  310.                             </ul>
  311.                             <dl class="dlType01">
  312.                                 <dt>
  313.                                     {{ News.title }}
  314.                                     {% if News.url %}
  315.                                     <a href="{{ News.url }}" class="linkType01" {% if News.link_method == '1' %}target="_blank"{% endif %}>
  316.                                         詳しくはこちら
  317.                                     </a>
  318.                                     {% endif %}
  319.                                 </dt>
  320.                                 <dd>
  321.                                     {{ News.description|raw|nl2br}}
  322.                                 </dd>
  323.                             </dl>
  324.                         </li>
  325.                     {% endfor %}
  326.                 </ul>
  327.             </div>
  328.         </div>
  329.     </section>
  330. {% endblock %}