var/cache/dev/twig/45/45ea374a2e3ac1b2ec666ab21d5791f3.php line 53

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\SandboxExtension;
  7. use Twig\Markup;
  8. use Twig\Sandbox\SecurityError;
  9. use Twig\Sandbox\SecurityNotAllowedTagError;
  10. use Twig\Sandbox\SecurityNotAllowedFilterError;
  11. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  12. use Twig\Source;
  13. use Twig\Template;
  15. /* index.twig */
  16. class __TwigTemplate_6955dcda6574364541a1206e5adba2ed extends \Eccube\Twig\Template
  17. {
  18.     private $source;
  19.     private $macros = [];
  21.     public function __construct(Environment $env)
  22.     {
  23.         parent::__construct($env);
  25.         $this->source = $this->getSourceContext();
  27.         $this->blocks = [
  28.             'stylesheet' => [$this, 'block_stylesheet'],
  29.             'javascript' => [$this, 'block_javascript'],
  30.             'main' => [$this, 'block_main'],
  31.         ];
  32.     }
  34.     protected function doGetParent(array $context)
  35.     {
  36.         // line 11
  37.         return "default_frame.twig";
  38.     }
  40.     protected function doDisplay(array $context, array $blocks = [])
  41.     {
  42.         $macros = $this->macros;
  43.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  44.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "index.twig"));
  46.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  47.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "index.twig"));
  49.         // line 13
  50.         $context["body_class"] = "front_page";
  51.         // line 11
  52.         $this->parent = $this->loadTemplate("default_frame.twig", "index.twig", 11);
  53.         $this->parent->display($context, array_merge($this->blocks, $blocks));
  54.         
  55.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  57.         
  58.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  60.     }
  62.     // line 15
  63.     public function block_stylesheet($context, array $blocks = [])
  64.     {
  65.         $macros = $this->macros;
  66.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  67.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheet"));
  69.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  70.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheet"));
  72.         // line 16
  73.         echo "        <style>
  74.     
  75.             ";
  76.         // line 19
  77.         echo "            .p-top__main-visual-slide-link.is-1st {
  78.                 background-image:url(";
  79.         // line 20
  80.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/html/user_data/assets/img/fv/1.png"), "html", null, true);
  81.         echo ");
  82.             }
  83.             .p-top__main-visual-slide-link.is-2nd {
  84.                 background-image:url(";
  85.         // line 23
  86.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/html/user_data/assets/img/fv/2.png"), "html", null, true);
  87.         echo ");
  88.             }
  89.             .p-top__main-visual-slide-link.is-3rd {
  90.                 background-image:url(";
  91.         // line 26
  92.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/html/user_data/assets/img/fv/3.png"), "html", null, true);
  93.         echo ");
  94.             }
  95.             @media screen and (max-width: 839px) {
  96.                 .p-top__main-visual-slide-link.is-1st {
  97.                     background-image:url(";
  98.         // line 30
  99.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/html/user_data/assets/img/fv/1.png"), "html", null, true);
  100.         echo ");
  101.                 }
  102.                 .p-top__main-visual-slide-link.is-2nd {
  103.                     background-image:url(";
  104.         // line 33
  105.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/html/user_data/assets/img/fv/2.png"), "html", null, true);
  106.         echo ");
  107.                 }
  108.                 .p-top__main-visual-slide-link.is-3rd {
  109.                     background-image:url(";
  110.         // line 36
  111.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/html/user_data/assets/img/fv/3.png"), "html", null, true);
  112.         echo ");
  113.                 }
  114.             }
  115.     
  116.             ";
  117.         // line 41
  118.         echo "            .b-category:after {
  119.                 background-image:url(";
  120.         // line 42
  121.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/html/user_data/assets/img/top_bg_left.png"), "html", null, true);
  122.         echo ");
  123.             }
  124.             @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  125.                 .b-category:after {
  126.                     background-image:url(";
  127.         // line 46
  128.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/html/user_data/assets/img/top_bg_left.png"), "html", null, true);
  129.         echo ");
  130.                 }
  131.             }
  133.             .b-about {
  134.                 margin-top: 80px;
  135.             }
  137.             .b-about__title {
  138.                 width: 100%;
  139.                 max-width: 1146px;
  140.                 margin-left: auto;
  141.                 margin-right: auto;
  142.                 padding-left: 20px;
  143.                 padding-right: 20px;
  144.                 box-sizing: border-box;
  145.                 font-size: inherit;
  146.                 line-height: inherit;
  147.                 display: -ms-flexbox;
  148.                 display: flex;
  149.                 -ms-flex-direction: column;
  150.                 flex-direction: column;
  151.                 margin-bottom: 40px;
  152.             }
  154.             .b-about__title--main {
  155.                 font-family: \"Josefin Sans\", sans-serif;
  156.                 font-weight: 600;
  157.                 font-size: 49px;
  158.                 letter-spacing: -0.025em;
  159.                 line-height: 1.2;
  160.                 text-indent: -0.05em;
  161.             }
  163.             .b-about__contents {
  164.                 width: 100%;
  165.                 max-width: 1322px;
  166.                 margin-left: auto;
  167.                 margin-right: auto;
  168.                 padding-left: 20px;
  169.                 padding-right: 20px;
  170.                 box-sizing: border-box;
  171.                 overflow: hidden;
  172.             }
  174.             @media screen and (max-width: 1024px) {
  175.                 .b-about__contents {
  176.                     margin: 6px 0 0;
  177.                 }
  179.                 .b-about__contents p{
  180.                     font-size: 0.6875em;
  181.                 }
  182.             }
  184.             @media screen and (max-width: 839px) {
  185.                 .b-about {
  186.                     margin-top: 40px;
  187.                 }
  189.                 .b-about__title {
  190.                     max-width: 692px;
  191.                     margin-bottom: 20px;
  192.                 }
  194.                 .b-about__title--main {
  195.                     font-size: 32.66667px;
  196.                     text-indent: -0.025em;
  197.                 }
  199.                 .b-about__contents {
  200.                     
  201.                 }
  202.             }
  204.             @media screen and (max-width: 479px) {
  205.                 .b-about {
  206.                     margin-top: 40px;
  207.                 }
  209.                 .b-about__title {
  210.                     padding-left: 16px;
  211.                     padding-right: 16px;
  212.                 }
  214.                 .b-about__title--main {
  215.                 }
  217.                 .b-about__contents {
  218.                     
  219.                 }
  220.             }
  221.     
  222.         </style>
  223.     ";
  224.         
  225.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  227.         
  228.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  230.     }
  232.     // line 142
  233.     public function block_javascript($context, array $blocks = [])
  234.     {
  235.         $macros = $this->macros;
  236.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  237.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  239.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  240.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  242.         // line 143
  243.         echo "        <script src=\"https://cdn.jsdelivr.net/npm/swiper@5.3.6/js/swiper.min.js\" integrity=\"sha256-dwAIpWA5jmq1E3AHBeJDH86emZuOEMKZrZxNr9DJAQs=\" crossorigin=\"anonymous\"></script>
  244.         <script>
  245.     
  246.             \$(function(){
  247.                 ";
  248.         // line 148
  249.         echo "                var mainVisualSwiper = new Swiper ('#js-top__main-visual-slide', {
  250.                     effect: \"slide\",
  251.                     loop: true,
  252.                     slidesPerView: 1,
  253.                     pagination: {
  254.                         el: '#js-top__main-visual-pager-contents',
  255.                         clickable: true
  256.                     },
  257.                     navigation: {
  258.                         prevEl: '#js-top__main-visual-slide-navi-prev',
  259.                         nextEl: '#js-top__main-visual-slide-navi-next',
  260.                     }
  261.                 })
  262.     
  263.                 ";
  264.         // line 163
  265.         echo "                var categorySwiper = new Swiper('#js-category__slide', {
  266.                     slidesPerView: 2,
  267.                     spaceBetween: 12,
  268.                     scrollbar: {
  269.                         el: '#js-category__slide-scrollbar',
  270.                         draggable: true
  271.                     },
  272.                     breakpoints: {
  273.                         480: {
  274.                             slidesPerView: 3,
  275.                             spaceBetween: 12
  276.                         },
  277.                         840: {
  278.                             slidesPerView: 4,
  279.                             spaceBetween: 30
  280.                         },
  281.     
  282.                     }
  283.                 });
  284.     
  285.                 ";
  286.         // line 184
  287.         echo "                \$('#js-news__contents').each(function() {
  288.                     var listLength = \$(this).find('.js-news__post').length;
  289.                     if (listLength > 5) {
  290.                         \$(this).find('.js-news__post:gt(4)').each(function() {
  291.                             \$(this).hide();
  292.                         });
  293.                         var dispNum = 5;
  294.                         \$(this).find('#js-news-button').click(function() {
  295.                             dispNum += 5;
  296.                             \$(this).parents('#js-news__contents').find('.js-news__post:lt(' + dispNum + ')').fadeIn();
  297.                             if (dispNum >= listLength) {
  298.                                 \$(this).parents('#js-news__actions').hide();
  299.                             }
  300.                         })
  301.                     }
  302.                 });
  303.                 \$('.js-news__post-heading').on('click', function() {
  304.                     \$newsPost = \$(this).parent('.js-news__post');
  305.                     \$newsDescription = \$newsPost.children('.js-news__post-contents');
  306.                     if (\$newsDescription.css('display') == 'none') {
  307.                         \$newsPost.addClass('is-active');
  308.                         \$newsDescription.slideDown(300);
  309.                     } else {
  310.                         \$newsPost.removeClass('is-active');
  311.                         \$newsDescription.slideUp(300);
  312.                     }
  313.                 });
  314.     
  315.             });
  316.     
  317.             \$(window).on('load',function() {
  318.     
  319.                 ";
  320.         // line 217
  321.         echo "                gridItems();
  322.     
  323.             });
  324.     
  325.             var resizeTimer = null;
  326.             \$(window).on('resize', function() {
  327.                 clearTimeout(resizeTimer);
  328.                 resizeTimer = setTimeout(function() {
  329.     
  330.                     ";
  331.         // line 227
  332.         echo "                    gridItems();
  333.     
  334.                 }, 200);
  335.     
  336.             });
  337.     
  338.             function gridItems(){
  339.                 var items = \$('.js-topic__list-item');
  340.                 items.each(function(index, elem) {
  341.                     gridItem(\$(elem));
  342.                 });
  343.             }
  344.     
  345.             function gridItem(item){
  346.                 var grid,
  347.                     rowHeight,
  348.                     rowGap,
  349.                     rowSpan;
  350.                 grid = \$('#js-topic__list');
  351.                 rowHeight = parseInt(grid.css('grid-auto-rows'));
  352.                 rowGap = parseInt(grid.css('grid-row-gap'));
  353.                 rowSpan = Math.ceil((item.find('.js-topic__item').outerHeight() + rowGap) / (rowHeight + rowGap));
  354.                 if (window.innerWidth > 839) {
  355.                     item.css('grid-row-end', '');
  356.                 } else {
  357.                     item.css('grid-row-end', 'span ' + rowSpan);
  358.                 }
  359.             }
  360.     
  361.         </script>
  362.     ";
  363.         
  364.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  366.         
  367.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  369.     }
  371.     // line 259
  372.     public function block_main($context, array $blocks = [])
  373.     {
  374.         $macros = $this->macros;
  375.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  376.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "main"));
  378.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  379.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "main"));
  381.         // line 260
  382.         echo "        <div class=\"p-top__main-visual\">
  383.             <div class=\"p-top__main-visual-slide\" id=\"js-top__main-visual-slide\">
  384.                 <div class=\"p-top__main-visual-slide-contents swiper-wrapper\">
  385.                     <a class=\"p-top__main-visual-slide-link is-1st swiper-slide\" href=\"";
  386.         // line 263
  387.         echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("homepage");
  388.         echo "\">
  389.                         <span class=\"p-top__main-visual-slide-link-text\">Slide1</span>
  390.                     </a>
  391.                     <a class=\"p-top__main-visual-slide-link is-2nd swiper-slide\" href=\"";
  392.         // line 266
  393.         echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("homepage");
  394.         echo "\">
  395.                         <span class=\"p-top__main-visual-slide-link-text\">Slide2</span>
  396.                     </a>
  397.                     <a class=\"p-top__main-visual-slide-link is-3rd swiper-slide\" href=\"";
  398.         // line 269
  399.         echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("homepage");
  400.         echo "\">
  401.                         <span class=\"p-top__main-visual-slide-link-text\">Slide3</span>
  402.                     </a>
  403.                 </div>
  404.                 <div class=\"p-top__main-visual-slide-navi\">
  405.                     <div class=\"p-top__main-visual-slide-navi-prev\" id=\"js-top__main-visual-slide-navi-prev\"></div>
  406.                     <div class=\"p-top__main-visual-slide-navi-next\" id=\"js-top__main-visual-slide-navi-next\"></div>
  407.                 </div>
  408.             </div>
  409.             <div class=\"p-top__main-visual-pager\">
  410.                 <div class=\"p-top__main-visual-pager-contents\" id=\"js-top__main-visual-pager-contents\"></div>
  411.             </div>
  412.             <div class=\"p-top__main-visual-reading\">
  413.                 <div class=\"p-top__main-visual-reading-contents\">
  414.                     <div class=\"p-top__main-visual-copy\">
  415.                         <p class=\"p-top__main-visual-copy--main\">THE<br>SUPERMARKET<br>TOKYO</p>
  416.                         <p class=\"p-top__main-visual-copy--sub\">Wear the Future,<br>Choose Sustainability</p>
  417.                     </div>
  418.                     <p class=\"p-top__main-visual-description\">未来を纏う、サステナブルな選択</p>
  419.                 </div>
  420.             </div>
  421.             <div class=\"p-top__main-visual-sns\">
  422.                 <ul class=\"p-top__main-visual-sns-list\">
  423.                     <!-- <li class=\"p-top__main-visual-sns-list-item\">
  424.                         <a class=\"p-top__main-visual-sns-link is-twitter\" href=\"#\">Twitter</a>
  425.                     </li> -->
  426.                     <li class=\"p-top__main-visual-sns-list-item\">
  427.                         <a class=\"p-top__main-visual-sns-link is-instagram\" href=\"https://www.instagram.com/the.supermarket.tokyo/\">Instagram</a>
  428.                     </li>
  429.                     <li class=\"p-top__main-visual-sns-list-item\">
  430.                         <a class=\"p-top__main-visual-sns-link is-facebook\" href=\"https://www.facebook.com/tsmt.tokyo/\">Facebook</a>
  431.                     </li>
  432.                 </ul>
  433.             </div>
  434.         </div>
  436.         <section class=\"b-about\">
  437.             <h2 class=\"b-about__title c-animation-fade js-animation-fade is-show\">
  438.                 <span class=\"b-about__title--main\">ABOUT THE SUPERMARKET TOKYO</span>
  439.                 <!-- <span class=\"b-about__title--sub\">Special Category</span> -->
  440.             </h2>
  441.             <div class=\"b-about__contents c-animation-fade js-animation-fade is-show\">
  442.                 <p>
  443.                     サステナブル、持続可能、SDGS、カーボンニュートラル、環境問題と物事を大きく捉えてしまうとその一歩が踏み出せなくなることが多くあります。<br>
  444.                     そこで、“ちょっとだけ何かいいこと！”をコンセプトに2021年クラウドファンディングプロジェクトからスタートしたブランド。
  445.                 </p>
  446.                 <p>
  447.                     [ 見えないけれど、ちょっといいこと ］<br>
  448.                     それは環境に優しいことはもちろん、無駄をなくし時間にゆとりをもたらすことだったり、人、体にも優しい機能としての軽量性や簡単ケアもそれにあたります。<br>
  449.                     加えて、カラーバリエーションのように個性を重視し暮らしを豊かにするデザインにこだわっています。
  450.                 </p>
  451.                 <p>
  452.                     繊維業界では基準に満たず納品出来ない規格外素材が存在しその処分が問題になっています。<br>
  453.                     「ZERO WASTE DESIGN」の考えの元、不要になった規格外素材を有効利用し商品として蘇らせること、それも”ちょっとだけ何かいいこと“のひとつです。
  454.                 </p>
  455.                 <p>
  456.                     「THE SUPERMARKET TOKYO」が現在使用している規格外素材は<br>
  457.                     元々高級車のシートや内装として世界的にも評価の高い日本製合成皮革です。<br>
  458.                     この合成皮革を出来るだけ棄てず有効利用するため、小さく残ったハギレも風呂敷のハンドルや小さなカードケースとして商品化しています。
  459.                 </p>
  460.             </div>
  461.         </section>
  462.     ";
  463.         
  464.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  466.         
  467.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  469.     }
  471.     public function getTemplateName()
  472.     {
  473.         return "index.twig";
  474.     }
  476.     public function isTraitable()
  477.     {
  478.         return false;
  479.     }
  481.     public function getDebugInfo()
  482.     {
  483.         return array (  399 => 269,  393 => 266,  387 => 263,  382 => 260,  372 => 259,  332 => 227,  321 => 217,  287 => 184,  265 => 163,  249 => 148,  243 => 143,  233 => 142,  128 => 46,  121 => 42,  118 => 41,  111 => 36,  105 => 33,  99 => 30,  92 => 26,  86 => 23,  80 => 20,  77 => 19,  73 => 16,  63 => 15,  52 => 11,  50 => 13,  37 => 11,);
  484.     }
  486.     public function getSourceContext()
  487.     {
  488.         return new Source("{#
  489.     This file is part of EC-CUBE
  490.     
  491.     Copyright(c) LOCKON CO.,LTD. All Rights Reserved.
  492.     
  493.     http://www.lockon.co.jp/
  494.     
  495.     For the full copyright and license information, please view the LICENSE
  496.     file that was distributed with this source code.
  497.     #}
  498.     {% extends 'default_frame.twig' %}
  499.     
  500.     {% set body_class = 'front_page' %}
  501.     
  502.     {% block stylesheet %}
  503.         <style>
  504.     
  505.             {# main visual #}
  506.             .p-top__main-visual-slide-link.is-1st {
  507.                 background-image:url({{ asset('/html/user_data/assets/img/fv/1.png') }});
  508.             }
  509.             .p-top__main-visual-slide-link.is-2nd {
  510.                 background-image:url({{ asset('/html/user_data/assets/img/fv/2.png') }});
  511.             }
  512.             .p-top__main-visual-slide-link.is-3rd {
  513.                 background-image:url({{ asset('/html/user_data/assets/img/fv/3.png') }});
  514.             }
  515.             @media screen and (max-width: 839px) {
  516.                 .p-top__main-visual-slide-link.is-1st {
  517.                     background-image:url({{ asset('/html/user_data/assets/img/fv/1.png') }});
  518.                 }
  519.                 .p-top__main-visual-slide-link.is-2nd {
  520.                     background-image:url({{ asset('/html/user_data/assets/img/fv/2.png') }});
  521.                 }
  522.                 .p-top__main-visual-slide-link.is-3rd {
  523.                     background-image:url({{ asset('/html/user_data/assets/img/fv/3.png') }});
  524.                 }
  525.             }
  526.     
  527.             {# category #}
  528.             .b-category:after {
  529.                 background-image:url({{ asset('/html/user_data/assets/img/top_bg_left.png') }});
  530.             }
  531.             @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  532.                 .b-category:after {
  533.                     background-image:url({{ asset('/html/user_data/assets/img/top_bg_left.png') }});
  534.                 }
  535.             }
  537.             .b-about {
  538.                 margin-top: 80px;
  539.             }
  541.             .b-about__title {
  542.                 width: 100%;
  543.                 max-width: 1146px;
  544.                 margin-left: auto;
  545.                 margin-right: auto;
  546.                 padding-left: 20px;
  547.                 padding-right: 20px;
  548.                 box-sizing: border-box;
  549.                 font-size: inherit;
  550.                 line-height: inherit;
  551.                 display: -ms-flexbox;
  552.                 display: flex;
  553.                 -ms-flex-direction: column;
  554.                 flex-direction: column;
  555.                 margin-bottom: 40px;
  556.             }
  558.             .b-about__title--main {
  559.                 font-family: \"Josefin Sans\", sans-serif;
  560.                 font-weight: 600;
  561.                 font-size: 49px;
  562.                 letter-spacing: -0.025em;
  563.                 line-height: 1.2;
  564.                 text-indent: -0.05em;
  565.             }
  567.             .b-about__contents {
  568.                 width: 100%;
  569.                 max-width: 1322px;
  570.                 margin-left: auto;
  571.                 margin-right: auto;
  572.                 padding-left: 20px;
  573.                 padding-right: 20px;
  574.                 box-sizing: border-box;
  575.                 overflow: hidden;
  576.             }
  578.             @media screen and (max-width: 1024px) {
  579.                 .b-about__contents {
  580.                     margin: 6px 0 0;
  581.                 }
  583.                 .b-about__contents p{
  584.                     font-size: 0.6875em;
  585.                 }
  586.             }
  588.             @media screen and (max-width: 839px) {
  589.                 .b-about {
  590.                     margin-top: 40px;
  591.                 }
  593.                 .b-about__title {
  594.                     max-width: 692px;
  595.                     margin-bottom: 20px;
  596.                 }
  598.                 .b-about__title--main {
  599.                     font-size: 32.66667px;
  600.                     text-indent: -0.025em;
  601.                 }
  603.                 .b-about__contents {
  604.                     
  605.                 }
  606.             }
  608.             @media screen and (max-width: 479px) {
  609.                 .b-about {
  610.                     margin-top: 40px;
  611.                 }
  613.                 .b-about__title {
  614.                     padding-left: 16px;
  615.                     padding-right: 16px;
  616.                 }
  618.                 .b-about__title--main {
  619.                 }
  621.                 .b-about__contents {
  622.                     
  623.                 }
  624.             }
  625.     
  626.         </style>
  627.     {% endblock %}
  628.     
  629.     {% block javascript %}
  630.         <script src=\"https://cdn.jsdelivr.net/npm/swiper@5.3.6/js/swiper.min.js\" integrity=\"sha256-dwAIpWA5jmq1E3AHBeJDH86emZuOEMKZrZxNr9DJAQs=\" crossorigin=\"anonymous\"></script>
  631.         <script>
  632.     
  633.             \$(function(){
  634.                 {# main visual #}
  635.                 var mainVisualSwiper = new Swiper ('#js-top__main-visual-slide', {
  636.                     effect: \"slide\",
  637.                     loop: true,
  638.                     slidesPerView: 1,
  639.                     pagination: {
  640.                         el: '#js-top__main-visual-pager-contents',
  641.                         clickable: true
  642.                     },
  643.                     navigation: {
  644.                         prevEl: '#js-top__main-visual-slide-navi-prev',
  645.                         nextEl: '#js-top__main-visual-slide-navi-next',
  646.                     }
  647.                 })
  648.     
  649.                 {# category #}
  650.                 var categorySwiper = new Swiper('#js-category__slide', {
  651.                     slidesPerView: 2,
  652.                     spaceBetween: 12,
  653.                     scrollbar: {
  654.                         el: '#js-category__slide-scrollbar',
  655.                         draggable: true
  656.                     },
  657.                     breakpoints: {
  658.                         480: {
  659.                             slidesPerView: 3,
  660.                             spaceBetween: 12
  661.                         },
  662.                         840: {
  663.                             slidesPerView: 4,
  664.                             spaceBetween: 30
  665.                         },
  666.     
  667.                     }
  668.                 });
  669.     
  670.                 {# news #}
  671.                 \$('#js-news__contents').each(function() {
  672.                     var listLength = \$(this).find('.js-news__post').length;
  673.                     if (listLength > 5) {
  674.                         \$(this).find('.js-news__post:gt(4)').each(function() {
  675.                             \$(this).hide();
  676.                         });
  677.                         var dispNum = 5;
  678.                         \$(this).find('#js-news-button').click(function() {
  679.                             dispNum += 5;
  680.                             \$(this).parents('#js-news__contents').find('.js-news__post:lt(' + dispNum + ')').fadeIn();
  681.                             if (dispNum >= listLength) {
  682.                                 \$(this).parents('#js-news__actions').hide();
  683.                             }
  684.                         })
  685.                     }
  686.                 });
  687.                 \$('.js-news__post-heading').on('click', function() {
  688.                     \$newsPost = \$(this).parent('.js-news__post');
  689.                     \$newsDescription = \$newsPost.children('.js-news__post-contents');
  690.                     if (\$newsDescription.css('display') == 'none') {
  691.                         \$newsPost.addClass('is-active');
  692.                         \$newsDescription.slideDown(300);
  693.                     } else {
  694.                         \$newsPost.removeClass('is-active');
  695.                         \$newsDescription.slideUp(300);
  696.                     }
  697.                 });
  698.     
  699.             });
  700.     
  701.             \$(window).on('load',function() {
  702.     
  703.                 {# topic #}
  704.                 gridItems();
  705.     
  706.             });
  707.     
  708.             var resizeTimer = null;
  709.             \$(window).on('resize', function() {
  710.                 clearTimeout(resizeTimer);
  711.                 resizeTimer = setTimeout(function() {
  712.     
  713.                     {# topic #}
  714.                     gridItems();
  715.     
  716.                 }, 200);
  717.     
  718.             });
  719.     
  720.             function gridItems(){
  721.                 var items = \$('.js-topic__list-item');
  722.                 items.each(function(index, elem) {
  723.                     gridItem(\$(elem));
  724.                 });
  725.             }
  726.     
  727.             function gridItem(item){
  728.                 var grid,
  729.                     rowHeight,
  730.                     rowGap,
  731.                     rowSpan;
  732.                 grid = \$('#js-topic__list');
  733.                 rowHeight = parseInt(grid.css('grid-auto-rows'));
  734.                 rowGap = parseInt(grid.css('grid-row-gap'));
  735.                 rowSpan = Math.ceil((item.find('.js-topic__item').outerHeight() + rowGap) / (rowHeight + rowGap));
  736.                 if (window.innerWidth > 839) {
  737.                     item.css('grid-row-end', '');
  738.                 } else {
  739.                     item.css('grid-row-end', 'span ' + rowSpan);
  740.                 }
  741.             }
  742.     
  743.         </script>
  744.     {% endblock javascript %}
  745.     
  746.     {% block main %}
  747.         <div class=\"p-top__main-visual\">
  748.             <div class=\"p-top__main-visual-slide\" id=\"js-top__main-visual-slide\">
  749.                 <div class=\"p-top__main-visual-slide-contents swiper-wrapper\">
  750.                     <a class=\"p-top__main-visual-slide-link is-1st swiper-slide\" href=\"{{ url('homepage') }}\">
  751.                         <span class=\"p-top__main-visual-slide-link-text\">Slide1</span>
  752.                     </a>
  753.                     <a class=\"p-top__main-visual-slide-link is-2nd swiper-slide\" href=\"{{ url('homepage') }}\">
  754.                         <span class=\"p-top__main-visual-slide-link-text\">Slide2</span>
  755.                     </a>
  756.                     <a class=\"p-top__main-visual-slide-link is-3rd swiper-slide\" href=\"{{ url('homepage') }}\">
  757.                         <span class=\"p-top__main-visual-slide-link-text\">Slide3</span>
  758.                     </a>
  759.                 </div>
  760.                 <div class=\"p-top__main-visual-slide-navi\">
  761.                     <div class=\"p-top__main-visual-slide-navi-prev\" id=\"js-top__main-visual-slide-navi-prev\"></div>
  762.                     <div class=\"p-top__main-visual-slide-navi-next\" id=\"js-top__main-visual-slide-navi-next\"></div>
  763.                 </div>
  764.             </div>
  765.             <div class=\"p-top__main-visual-pager\">
  766.                 <div class=\"p-top__main-visual-pager-contents\" id=\"js-top__main-visual-pager-contents\"></div>
  767.             </div>
  768.             <div class=\"p-top__main-visual-reading\">
  769.                 <div class=\"p-top__main-visual-reading-contents\">
  770.                     <div class=\"p-top__main-visual-copy\">
  771.                         <p class=\"p-top__main-visual-copy--main\">THE<br>SUPERMARKET<br>TOKYO</p>
  772.                         <p class=\"p-top__main-visual-copy--sub\">Wear the Future,<br>Choose Sustainability</p>
  773.                     </div>
  774.                     <p class=\"p-top__main-visual-description\">未来を纏う、サステナブルな選択</p>
  775.                 </div>
  776.             </div>
  777.             <div class=\"p-top__main-visual-sns\">
  778.                 <ul class=\"p-top__main-visual-sns-list\">
  779.                     <!-- <li class=\"p-top__main-visual-sns-list-item\">
  780.                         <a class=\"p-top__main-visual-sns-link is-twitter\" href=\"#\">Twitter</a>
  781.                     </li> -->
  782.                     <li class=\"p-top__main-visual-sns-list-item\">
  783.                         <a class=\"p-top__main-visual-sns-link is-instagram\" href=\"https://www.instagram.com/the.supermarket.tokyo/\">Instagram</a>
  784.                     </li>
  785.                     <li class=\"p-top__main-visual-sns-list-item\">
  786.                         <a class=\"p-top__main-visual-sns-link is-facebook\" href=\"https://www.facebook.com/tsmt.tokyo/\">Facebook</a>
  787.                     </li>
  788.                 </ul>
  789.             </div>
  790.         </div>
  792.         <section class=\"b-about\">
  793.             <h2 class=\"b-about__title c-animation-fade js-animation-fade is-show\">
  794.                 <span class=\"b-about__title--main\">ABOUT THE SUPERMARKET TOKYO</span>
  795.                 <!-- <span class=\"b-about__title--sub\">Special Category</span> -->
  796.             </h2>
  797.             <div class=\"b-about__contents c-animation-fade js-animation-fade is-show\">
  798.                 <p>
  799.                     サステナブル、持続可能、SDGS、カーボンニュートラル、環境問題と物事を大きく捉えてしまうとその一歩が踏み出せなくなることが多くあります。<br>
  800.                     そこで、“ちょっとだけ何かいいこと！”をコンセプトに2021年クラウドファンディングプロジェクトからスタートしたブランド。
  801.                 </p>
  802.                 <p>
  803.                     [ 見えないけれど、ちょっといいこと ］<br>
  804.                     それは環境に優しいことはもちろん、無駄をなくし時間にゆとりをもたらすことだったり、人、体にも優しい機能としての軽量性や簡単ケアもそれにあたります。<br>
  805.                     加えて、カラーバリエーションのように個性を重視し暮らしを豊かにするデザインにこだわっています。
  806.                 </p>
  807.                 <p>
  808.                     繊維業界では基準に満たず納品出来ない規格外素材が存在しその処分が問題になっています。<br>
  809.                     「ZERO WASTE DESIGN」の考えの元、不要になった規格外素材を有効利用し商品として蘇らせること、それも”ちょっとだけ何かいいこと“のひとつです。
  810.                 </p>
  811.                 <p>
  812.                     「THE SUPERMARKET TOKYO」が現在使用している規格外素材は<br>
  813.                     元々高級車のシートや内装として世界的にも評価の高い日本製合成皮革です。<br>
  814.                     この合成皮革を出来るだけ棄てず有効利用するため、小さく残ったハギレも風呂敷のハンドルや小さなカードケースとして商品化しています。
  815.                 </p>
  816.             </div>
  817.         </section>
  818.     {% endblock %}", "index.twig", "/home/rocroc/tsmt-store.com/public_html/app/template/ss4002/index.twig");
  819.     }
  820. }