app/template/default/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% set body_class = 'front_page' %}
  5. {% block stylesheet %}
  6. <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/script/slick.css') }}" media="all" />
  7. <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/script/slick-theme.css') }}" media="all" />
  8. <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/script/magnific-popup.css') }}" media="all" />
  9. <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/style.css') }}" media="all" />
  10. <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/base.css') }}" media="all" />
  11. <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/top.css') }}" media="all" />
  12. <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/add.css') }}" media="all" />
  13. {% endblock %}
  15. {% block javascript %}
  16. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  17. <script src="{{ asset('assets/js/jquery.easing.1.3.js') }}"></script>
  18. <script src="{{ asset('assets/js/jquery.smoothScroll.js') }}"></script>
  19. <script src="{{ asset('assets/js/jquery.magnific-popup.js') }}"></script>
  20. <script src="{{ asset('assets/js/emergence.min.js') }}"></script>
  21. <script src="{{ asset('assets/js/effects.js') }}"></script>
  22. <script src="{{ asset('assets/js/slick.min.js') }}"></script>
  23. <script src="{{ asset('assets/js/jquery.matchHeight.js') }}"></script>
  24. <script>
  25.   $(function(){
  26.     //slick.js
  27.     var slides = $('.slides').on("init", function (event, slick) {
  28.       $(".slides-nav .current").text(slick.currentSlide + 1);
  29.       $(".slides-nav .total").text(slick.slideCount);
  30.     })
  31.     .slick({
  32.       autoplay: true,
  33.       autoplaySpeed: 3000,
  34.       speed: 500,
  35.       arrows: false,
  36.       dots: false,
  37.       fade: true,
  38.       infinite: true,
  39.       slidesToShow: 1,
  40.       slidesToScroll: 1,
  41.       pauseOnHover : false,
  42.       centerMode: false,
  43.       variableWidth: false,
  44.       swipeToSlide: true,
  45.     })
  46.     .on("beforeChange", function (event, slick, currentSlide, nextSlide) {
  47.       $(".slides-nav .current").text(nextSlide + 1);
  48.     });
  49.     ;
  50.     $(".slides-nav").find(".next").click(function(){
  51.       slides.slick("slickNext");
  52.     });
  53.     $(".slides-nav").find(".prev").click(function(){
  54.       slides.slick("slickPrev");
  55.     });
  56.     $(".products-list_common .item-img").matchHeight();
  57.   });
  58. </script>
  59. {% endblock javascript %}
  61. {% block main %}
  62. <div id="mainimg" class="top">
  63.   <ul class="slides">
  64.     {% if TopImages|length > 0 %}
  65.     {% for TopImage in TopImages %}
  66.     <li>
  67.       <!-- PC -->
  68.       <div class="item-bg pc">{% if TopImage.url %}<a href="{{ TopImage.url }}" tabindex="0">{% endif %}<span class="parallax" style="background-image: url({{ asset(TopImage.file_name, 'save_image') }});"></span>{% if TopImage.url %}</a>{% endif %}</div>
  69.       <!-- SP -->
  70.       <div class="item-bg sp">{% if TopImage.url %}<a href="{{ TopImage.url }}" tabindex="0">{% endif %}<img src="{{ asset(TopImage.file_name_mobile, 'save_image') }}" width="1125" height="1020" alt="">{% if TopImage.url %}</a>{% endif %}</div>
  71.     </li>
  72.     {% endfor %}
  73.     {% endif %}
  74.   </ul>
  75.   <div class="slides-nav">
  76.     <div class="item-move">
  77.       <span class="prev"><img src="{{ asset('assets/img/top/arrow-slide.svg') }}" alt="前へ"></span>
  78.       <span class="next"><img src="{{ asset('assets/img/top/arrow-slide.svg') }}" alt="次へ"></span>
  79.     </div>
  80.     <div class="item-number">
  81.       <span class="current">2</span>
  82.       /
  83.       <span class="total">3</span>
  84.     </div>
  85.   </div>
  86. </div>
  87. <main class="top">
  88.   <section id="news">
  89.     <div class="content">
  90.       <h2 class="news-title eg">
  91.         <span>ニュースリリース</span>
  92.         <span>News Release</span>
  93.       </h2>
  94.       <div class="news-block">
  95.         <ul class="news-list-block">
  96.           {% if NewsList1|length > 0 %}
  97.           {% for News1 in NewsList1 %}
  98.           <li class="eg">
  99.             <a href="{{ url('news_detail', {id: News1.id}) }}" class="item-link"></a>
  100.             <p class="item-img"><img src="{% if News1.file_name %}{{ asset(News1.file_name, 'save_image') }}{% else %}{{ asset('assets/img/pict/thumb-news.jpg') }}{% endif %}" width="280" height="200" alt=""></p>
  101.             <div class="item-text">
  102.               <time>{{ News1.publish_date|date('Y.m.d') }}</time>
  103.               {% if getCategoryByNewsId(News1.id)|length > 0 %}{% for Category1 in getCategoryByNewsId(News1.id) %}<a href="{{ url('news_category', {class_name: Category1['class_name']}) }}" class="cat {{ Category1['class_name'] }}">{{ Category1['category_name'] }}</a>{% endfor %}{% endif %}
  104.               <p>{{ News1.title }}</p>
  105.             </div>
  106.           </li>
  107.           {% endfor %}
  108.           {% endif %}
  109.         </ul>
  110.         <ul class="news-list">
  111.           {% if NewsList2|length > 0 %}
  112.           {% for News2 in NewsList2 %}
  113.           <li class="eg">
  114.             <time class="item-date">{{ News2.publish_date|date('Y.m.d') }}</time>
  115.             {% if getCategoryByNewsId(News2.id)|length > 0 %}{% for Category2 in getCategoryByNewsId(News2.id) %}
  116.             <p class="item-cat"><a href="{{ url('news_category', {class_name: Category2['class_name']}) }}" class="cat {{ Category2['class_name'] }}">{{ Category2['category_name'] }}</a></p>
  117.             {% endfor %}{% endif %}
  118.             <p class="item-title"><a href="{{ url('news_detail', {id: News2.id}) }}">{{ News2.title }}</a></p>
  119.           </li>
  120.           {% endfor %}
  121.           {% endif %}
  122.         </ul>
  123.       </div>
  124.       <div class="link-block eg"><a href="{{ url('news') }}" class="link en w200">View more</a></div>
  125.     </div>
  126.   </section>
  127.   <section id="ytb">
  128.     <div class="content">
  129.       <h2 class="heading-lv01 eg" data-emergence="visible">
  130.         <span>Brand Vison</span>
  131.         <span>Viruswasher®︎ プロモーション</span>
  132.       </h2>
  133.       <iframe src="https://www.youtube.com/embed/5tQb2dibGfQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  134.       <p class="text-red">※「Viruswasher®︎」は室内の空気を除菌水フィルターに透過することによりウイルス抑制の機能はありますが、<br>これによりウイルス感染の予防を保証するものではありません。</p>
  135.     </div>
  136.   </section>
  137.   <section id="products">
  138.     <div class="content">
  139.       <h2 class="heading-lv01 eg">
  140.         <span>Products</span>
  141.         <span>製品紹介</span>
  142.       </h2>
  143.       <ul class="products-list_common">
  144.         <li class="eg">
  145.           <a href="https://www.sirius-agent.co.jp/products/list#Viruswasher" class="detail">
  146.             <p class="item-img"><img src="{{ asset('assets/img/top/img-products_01.png') }}" srcset="{{ asset('assets/img/top/img-products_01.png') }} 1x, {{ asset('assets/img/top/img-products_01@2x.png') }} 2x" width="160" height="367" alt=""></p>
  147.             <p class="item-brand"><img src="{{ asset('assets/img/top/logo-brand_01.png') }}" srcset="{{ asset('assets/img/top/logo-brand_01.png') }} 1x, {{ asset('assets/img/top/logo-brand_01@2x.png') }} 2x" width="146" height="30" alt="Virus washer"></p>
  148.             <p class="item-name">次亜塩素酸空気清浄機<br>ウイルスウォッシャー</p>
  149.             <div class="item-text">
  150.               <span class="bg" style="background-image: url({{ asset('assets/img/top/bg-products_01.jpg') }});"></span>
  151.               <p>世界新基準！ウイルス抑制・除菌・脱臭・集塵・加湿の５つの効果を発揮する次亜塩素酸空気清浄機。</p>
  152.               <span class="detail_link">Detail</span>
  153.             </div>
  154.           </a>
  155.         </li>
  156.         <li class="eg">
  157.           <a href="https://www.sirius-agent.co.jp/products/list#Cleaner" class="detail">
  158.             <p class="item-img"><img src="{{ asset('assets/img/top/img-products_02.png') }}" srcset="{{ asset('assets/img/top/img-products_02.png') }} 1x, {{ asset('assets/img/top/img-products_02@2x.png') }} 2x" width="106" height="455" alt=""></p>
  159.             <p class="item-brand"><img src="{{ asset('assets/img/top/logo-brand_02.png') }}" srcset="{{ asset('assets/img/top/logo-brand_02.png') }} 1x, {{ asset('assets/img/top/logo-brand_02@2x.png') }} 2x" width="107" height="29" alt="switle"></p>
  160.             <p class="item-name">スイトル<br>スティック型コードレスクリーナー</p>
  161.             <div class="item-text"> 
  162.               
  163.               <span class="bg" style="background-image: url({{ asset('assets/img/top/bg-products_02.jpg') }});"></span>
  164.               <p>日本の家を掃除するためだけに最適化した、スティック型コードレスクリーナー。</p>
  165.               <span class="detail_link">Detail</span>
  166.               
  167.             </div>
  168.           </a>
  169.         </li>
  170.         <li class="eg">
  171.           <a href="https://www.sirius-agent.co.jp/products/list#CleanerHead" class="detail">
  172.             <p class="item-img"><img src="{{ asset('assets/img/top/img-products_03.png') }}" srcset="{{ asset('assets/img/top/img-products_03.png') }} 1x, {{ asset('assets/img/top/img-products_03@2x.png') }} 2x" width="283" height="202" alt=""></p>
  173.             <p class="item-brand"><img src="{{ asset('assets/img/top/logo-brand_02.png') }}" srcset="{{ asset('assets/img/top/logo-brand_02.png') }} 1x, {{ asset('assets/img/top/logo-brand_02@2x.png') }} 2x" width="107" height="29" alt="switle"></p>
  174.             <p class="item-name">スイトル<br>水洗いクリーナーヘッド</p>
  175.             <div class="item-text">
  176.               <span class="bg" style="background-image: url({{ asset('assets/img/top/bg-products_03.jpg') }});"></span>
  177.               <p>今まであきらめていた汚れもニオイも、水の中に閉じ込めてスイトル！お掃除の新常識。</p>
  178.               <span class="detail_link">Detail</span>
  179.             </div>
  180.           </a>
  181.         </li>
  182.       </ul>
  183.       <div class="link-block eg"><a href="{{ url('product_list') }}" class="link en w200">View more</a></div>
  184.     </div>
  185.   </section>
  186.   <section id="company-support">
  187.     <div class="content">
  188.       <section class="company">
  189.         <h2 class="company-title eg">
  190.           <span>会社情報</span>
  191.           <span>Company</span>
  192.         </h2>
  193.         <ul class="company-list">
  194.           <li class="eg"><a href="{{ url('page_company') }}">
  195.             <p class="item-img"><img src="{{ asset('assets/img/top/pict-company_01.jpg') }}" srcset="{{ asset('assets/img/top/pict-company_01.jpg 1x') }}, {{ asset('assets/img/top/pict-company_01@2x.jpg 2x') }}" width="280" height="280" alt=""></p>
  196.             <div class="item-text">
  197.               <span>Company profile</span>
  198.               <span>会社情報</span>
  199.             </div>
  200.           </a></li>
  201.           <li class="eg"><a href="{{ url('page_concept') }}">
  202.             <p class="item-img"><img src="{{ asset('assets/img/top/pict-company_02.jpg') }}" srcset="{{ asset('assets/img/top/pict-company_02.jpg 1x') }}, {{ asset('assets/img/top/pict-company_02@2x.jpg 2x') }}" width="280" height="280" alt=""></p>
  203.             <div class="item-text">
  204.               <span>Philosophy</span>
  205.               <span>シリウスの理念</span>
  206.             </div>
  207.           </a></li>
  208.           <li class="eg"><a href="{{ url('page_benefits') }}">
  209.             <p class="item-img"><img src="{{ asset('assets/img/top/pict-company_03.jpg') }}" srcset="{{ asset('assets/img/top/pict-company_03.jpg 1x') }}, {{ asset('assets/img/top/pict-company_03@2x.jpg 2x') }}" width="280" height="280" alt=""></p>
  210.             <div class="item-text">
  211.               <span>For shareholders</span>
  212.               <span>株主のみなさまへ</span>
  213.             </div>
  214.           </a></li>
  215.         </ul>
  216.       </section>
  217.       <section class="support">
  218.         <h2 class="heading-lv01 eg">
  219.           <span>Support</span>
  220.           <span>お客様サポート</span>
  221.         </h2>
  222.         <div class="support-block">
  223.           <div>
  224.             <h3 class="support-hd eg">
  225.               <span>Individual</span>
  226.               <span>個人のお客様</span>
  227.             </h3>
  228.             <ul class="support-list">
  229.               <li class="eg"><a href="{{ url('product_list') }}">
  230.                 <span><img src="{{ asset('assets/img/top/icon-support_01_01.svg') }}" alt=""></span>
  231.                 <span>製品情報</span>
  232.               </a></li>
  233.               <li class="eg"><a href="{{ url('page_faq') }}">
  234.                 <span><img src="{{ asset('assets/img/top/icon-support_01_02.svg') }}" alt=""></span>
  235.                 <span>よくある質問</span>
  236.               </a></li>
  237.               <li class="eg"><a href="{{ url('contact') }}">
  238.                 <span><img src="{{ asset('assets/img/top/icon-support_01_03.svg') }}" alt=""></span>
  239.                 <span>お問い合わせ</span>
  240.               </a></li>
  241.             </ul>
  242.           </div>
  243.           <div>
  244.             <h3 class="support-hd eg">
  245.               <span>Legal Entity</span>
  246.               <span>法人のお客様</span>
  247.             </h3>
  248.             <ul class="support-list column-02">
  249.               <li class="eg"><a href="{{ url('product_list') }}">
  250.                 <span><img src="{{ asset('assets/img/top/icon-support_02_01.svg') }}" alt=""></span>
  251.                 <span>製品情報</span>
  252.               </a></li>
  253.               <li class="eg"><a href="{{ url('page_member') }}">
  254.                 <span><img src="{{ asset('assets/img/top/icon-support_02_02.svg') }}" alt=""></span>
  255.                 <span>代理店様<br>専用ページ</span>
  256.               </a></li>
  257.               <li class="eg"><a href="{{ url('supplier') }}">
  258.                 <span><img src="{{ asset('assets/img/top/icon-support_02_03.svg') }}" alt=""></span>
  259.                 <span>代理店<br>お申し込み</span>
  260.               </a></li>
  261.               <li class="eg"><a href="{{ url('page_faq') }}">
  262.                 <span><img src="{{ asset('assets/img/top/icon-support_02_04.svg') }}" alt=""></span>
  263.                 <span>よくある質問</span>
  264.               </a></li>
  265.             </ul>
  266.           </div>
  267.         </div>
  268.       </section>
  269.     </div>
  270.   </section>
  271. </main>
  272. {% endblock %}