app/template/ss4002/index.twig line 1

Open in your IDE?
  1. {#
  2.     This file is part of EC-CUBE
  3.     
  4.     Copyright(c) LOCKON CO.,LTD. All Rights Reserved.
  5.     
  6.     http://www.lockon.co.jp/
  7.     
  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' %}
  12.     
  13.     {% set body_class = 'front_page' %}
  14.     
  15.     {% block stylesheet %}
  16.         <style>
  17.     
  18.             {# main visual #}
  19.             .p-top__main-visual-slide-link.is-1st {
  20.                 background-image:url({{ asset('/html/user_data/assets/img/fv/1.png') }});
  21.             }
  22.             .p-top__main-visual-slide-link.is-2nd {
  23.                 background-image:url({{ asset('/html/user_data/assets/img/fv/2.png') }});
  24.             }
  25.             .p-top__main-visual-slide-link.is-3rd {
  26.                 background-image:url({{ asset('/html/user_data/assets/img/fv/3.png') }});
  27.             }
  28.             @media screen and (max-width: 839px) {
  29.                 .p-top__main-visual-slide-link.is-1st {
  30.                     background-image:url({{ asset('/html/user_data/assets/img/fv/1.png') }});
  31.                 }
  32.                 .p-top__main-visual-slide-link.is-2nd {
  33.                     background-image:url({{ asset('/html/user_data/assets/img/fv/2.png') }});
  34.                 }
  35.                 .p-top__main-visual-slide-link.is-3rd {
  36.                     background-image:url({{ asset('/html/user_data/assets/img/fv/3.png') }});
  37.                 }
  38.             }
  39.     
  40.             {# category #}
  41.             .b-category:after {
  42.                 background-image:url({{ asset('/html/user_data/assets/img/top_bg_left.png') }});
  43.             }
  44.             @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  45.                 .b-category:after {
  46.                     background-image:url({{ asset('/html/user_data/assets/img/top_bg_left.png') }});
  47.                 }
  48.             }
  50.             .b-about {
  51.                 margin-top: 80px;
  52.             }
  54.             .b-about__title {
  55.                 width: 100%;
  56.                 max-width: 1146px;
  57.                 margin-left: auto;
  58.                 margin-right: auto;
  59.                 padding-left: 20px;
  60.                 padding-right: 20px;
  61.                 box-sizing: border-box;
  62.                 font-size: inherit;
  63.                 line-height: inherit;
  64.                 display: -ms-flexbox;
  65.                 display: flex;
  66.                 -ms-flex-direction: column;
  67.                 flex-direction: column;
  68.                 margin-bottom: 40px;
  69.             }
  71.             .b-about__title--main {
  72.                 font-family: "Josefin Sans", sans-serif;
  73.                 font-weight: 600;
  74.                 font-size: 49px;
  75.                 letter-spacing: -0.025em;
  76.                 line-height: 1.2;
  77.                 text-indent: -0.05em;
  78.             }
  80.             .b-about__contents {
  81.                 width: 100%;
  82.                 max-width: 1322px;
  83.                 margin-left: auto;
  84.                 margin-right: auto;
  85.                 padding-left: 20px;
  86.                 padding-right: 20px;
  87.                 box-sizing: border-box;
  88.                 overflow: hidden;
  89.             }
  91.             @media screen and (max-width: 1024px) {
  92.                 .b-about__contents {
  93.                     margin: 6px 0 0;
  94.                 }
  96.                 .b-about__contents p{
  97.                     font-size: 0.6875em;
  98.                 }
  99.             }
  101.             @media screen and (max-width: 839px) {
  102.                 .b-about {
  103.                     margin-top: 40px;
  104.                 }
  106.                 .b-about__title {
  107.                     max-width: 692px;
  108.                     margin-bottom: 20px;
  109.                 }
  111.                 .b-about__title--main {
  112.                     font-size: 32.66667px;
  113.                     text-indent: -0.025em;
  114.                 }
  116.                 .b-about__contents {
  117.                     
  118.                 }
  119.             }
  121.             @media screen and (max-width: 479px) {
  122.                 .b-about {
  123.                     margin-top: 40px;
  124.                 }
  126.                 .b-about__title {
  127.                     padding-left: 16px;
  128.                     padding-right: 16px;
  129.                 }
  131.                 .b-about__title--main {
  132.                 }
  134.                 .b-about__contents {
  135.                     
  136.                 }
  137.             }
  138.     
  139.         </style>
  140.     {% endblock %}
  141.     
  142.     {% block javascript %}
  143.         <script src="https://cdn.jsdelivr.net/npm/swiper@5.3.6/js/swiper.min.js" integrity="sha256-dwAIpWA5jmq1E3AHBeJDH86emZuOEMKZrZxNr9DJAQs=" crossorigin="anonymous"></script>
  144.         <script>
  145.     
  146.             $(function(){
  147.                 {# main visual #}
  148.                 var mainVisualSwiper = new Swiper ('#js-top__main-visual-slide', {
  149.                     effect: "slide",
  150.                     loop: true,
  151.                     slidesPerView: 1,
  152.                     pagination: {
  153.                         el: '#js-top__main-visual-pager-contents',
  154.                         clickable: true
  155.                     },
  156.                     navigation: {
  157.                         prevEl: '#js-top__main-visual-slide-navi-prev',
  158.                         nextEl: '#js-top__main-visual-slide-navi-next',
  159.                     }
  160.                 })
  161.     
  162.                 {# category #}
  163.                 var categorySwiper = new Swiper('#js-category__slide', {
  164.                     slidesPerView: 2,
  165.                     spaceBetween: 12,
  166.                     scrollbar: {
  167.                         el: '#js-category__slide-scrollbar',
  168.                         draggable: true
  169.                     },
  170.                     breakpoints: {
  171.                         480: {
  172.                             slidesPerView: 3,
  173.                             spaceBetween: 12
  174.                         },
  175.                         840: {
  176.                             slidesPerView: 4,
  177.                             spaceBetween: 30
  178.                         },
  179.     
  180.                     }
  181.                 });
  182.     
  183.                 {# news #}
  184.                 $('#js-news__contents').each(function() {
  185.                     var listLength = $(this).find('.js-news__post').length;
  186.                     if (listLength > 5) {
  187.                         $(this).find('.js-news__post:gt(4)').each(function() {
  188.                             $(this).hide();
  189.                         });
  190.                         var dispNum = 5;
  191.                         $(this).find('#js-news-button').click(function() {
  192.                             dispNum += 5;
  193.                             $(this).parents('#js-news__contents').find('.js-news__post:lt(' + dispNum + ')').fadeIn();
  194.                             if (dispNum >= listLength) {
  195.                                 $(this).parents('#js-news__actions').hide();
  196.                             }
  197.                         })
  198.                     }
  199.                 });
  200.                 $('.js-news__post-heading').on('click', function() {
  201.                     $newsPost = $(this).parent('.js-news__post');
  202.                     $newsDescription = $newsPost.children('.js-news__post-contents');
  203.                     if ($newsDescription.css('display') == 'none') {
  204.                         $newsPost.addClass('is-active');
  205.                         $newsDescription.slideDown(300);
  206.                     } else {
  207.                         $newsPost.removeClass('is-active');
  208.                         $newsDescription.slideUp(300);
  209.                     }
  210.                 });
  211.     
  212.             });
  213.     
  214.             $(window).on('load',function() {
  215.     
  216.                 {# topic #}
  217.                 gridItems();
  218.     
  219.             });
  220.     
  221.             var resizeTimer = null;
  222.             $(window).on('resize', function() {
  223.                 clearTimeout(resizeTimer);
  224.                 resizeTimer = setTimeout(function() {
  225.     
  226.                     {# topic #}
  227.                     gridItems();
  228.     
  229.                 }, 200);
  230.     
  231.             });
  232.     
  233.             function gridItems(){
  234.                 var items = $('.js-topic__list-item');
  235.                 items.each(function(index, elem) {
  236.                     gridItem($(elem));
  237.                 });
  238.             }
  239.     
  240.             function gridItem(item){
  241.                 var grid,
  242.                     rowHeight,
  243.                     rowGap,
  244.                     rowSpan;
  245.                 grid = $('#js-topic__list');
  246.                 rowHeight = parseInt(grid.css('grid-auto-rows'));
  247.                 rowGap = parseInt(grid.css('grid-row-gap'));
  248.                 rowSpan = Math.ceil((item.find('.js-topic__item').outerHeight() + rowGap) / (rowHeight + rowGap));
  249.                 if (window.innerWidth > 839) {
  250.                     item.css('grid-row-end', '');
  251.                 } else {
  252.                     item.css('grid-row-end', 'span ' + rowSpan);
  253.                 }
  254.             }
  255.     
  256.         </script>
  257.     {% endblock javascript %}
  258.     
  259.     {% block main %}
  260.         <div class="p-top__main-visual">
  261.             <div class="p-top__main-visual-slide" id="js-top__main-visual-slide">
  262.                 <div class="p-top__main-visual-slide-contents swiper-wrapper">
  263.                     <a class="p-top__main-visual-slide-link is-1st swiper-slide" href="{{ url('homepage') }}">
  264.                         <span class="p-top__main-visual-slide-link-text">Slide1</span>
  265.                     </a>
  266.                     <a class="p-top__main-visual-slide-link is-2nd swiper-slide" href="{{ url('homepage') }}">
  267.                         <span class="p-top__main-visual-slide-link-text">Slide2</span>
  268.                     </a>
  269.                     <a class="p-top__main-visual-slide-link is-3rd swiper-slide" href="{{ url('homepage') }}">
  270.                         <span class="p-top__main-visual-slide-link-text">Slide3</span>
  271.                     </a>
  272.                 </div>
  273.                 <div class="p-top__main-visual-slide-navi">
  274.                     <div class="p-top__main-visual-slide-navi-prev" id="js-top__main-visual-slide-navi-prev"></div>
  275.                     <div class="p-top__main-visual-slide-navi-next" id="js-top__main-visual-slide-navi-next"></div>
  276.                 </div>
  277.             </div>
  278.             <div class="p-top__main-visual-pager">
  279.                 <div class="p-top__main-visual-pager-contents" id="js-top__main-visual-pager-contents"></div>
  280.             </div>
  281.             <div class="p-top__main-visual-reading">
  282.                 <div class="p-top__main-visual-reading-contents">
  283.                     <div class="p-top__main-visual-copy">
  284.                         <p class="p-top__main-visual-copy--main">THE<br>SUPERMARKET<br>TOKYO</p>
  285.                         <p class="p-top__main-visual-copy--sub">Wear the Future,<br>Choose Sustainability</p>
  286.                     </div>
  287.                     <p class="p-top__main-visual-description">未来を纏う、サステナブルな選択</p>
  288.                 </div>
  289.             </div>
  290.             <div class="p-top__main-visual-sns">
  291.                 <ul class="p-top__main-visual-sns-list">
  292.                     <!-- <li class="p-top__main-visual-sns-list-item">
  293.                         <a class="p-top__main-visual-sns-link is-twitter" href="#">Twitter</a>
  294.                     </li> -->
  295.                     <li class="p-top__main-visual-sns-list-item">
  296.                         <a class="p-top__main-visual-sns-link is-instagram" href="https://www.instagram.com/the.supermarket.tokyo/">Instagram</a>
  297.                     </li>
  298.                     <li class="p-top__main-visual-sns-list-item">
  299.                         <a class="p-top__main-visual-sns-link is-facebook" href="https://www.facebook.com/tsmt.tokyo/">Facebook</a>
  300.                     </li>
  301.                 </ul>
  302.             </div>
  303.         </div>
  305.         <section class="b-about">
  306.             <h2 class="b-about__title c-animation-fade js-animation-fade is-show">
  307.                 <span class="b-about__title--main">ABOUT THE SUPERMARKET TOKYO</span>
  308.                 <!-- <span class="b-about__title--sub">Special Category</span> -->
  309.             </h2>
  310.             <div class="b-about__contents c-animation-fade js-animation-fade is-show">
  311.                 <p>
  312.                     サステナブル、持続可能、SDGS、カーボンニュートラル、環境問題と物事を大きく捉えてしまうとその一歩が踏み出せなくなることが多くあります。<br>
  313.                     そこで、“ちょっとだけ何かいいこと！”をコンセプトに2021年クラウドファンディングプロジェクトからスタートしたブランド。
  314.                 </p>
  315.                 <p>
  316.                     [ 見えないけれど、ちょっといいこと ］<br>
  317.                     それは環境に優しいことはもちろん、無駄をなくし時間にゆとりをもたらすことだったり、人、体にも優しい機能としての軽量性や簡単ケアもそれにあたります。<br>
  318.                     加えて、カラーバリエーションのように個性を重視し暮らしを豊かにするデザインにこだわっています。
  319.                 </p>
  320.                 <p>
  321.                     繊維業界では基準に満たず納品出来ない規格外素材が存在しその処分が問題になっています。<br>
  322.                     「ZERO WASTE DESIGN」の考えの元、不要になった規格外素材を有効利用し商品として蘇らせること、それも”ちょっとだけ何かいいこと“のひとつです。
  323.                 </p>
  324.                 <p>
  325.                     「THE SUPERMARKET TOKYO」が現在使用している規格外素材は<br>
  326.                     元々高級車のシートや内装として世界的にも評価の高い日本製合成皮革です。<br>
  327.                     この合成皮革を出来るだけ棄てず有効利用するため、小さく残ったハギレも風呂敷のハンドルや小さなカードケースとして商品化しています。
  328.                 </p>
  329.             </div>
  330.         </section>
  331.     {% endblock %}