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' %}
  15. {% block javascript %}
  16.     <script>
  17.         const slideInContents = {{ [
  18.             "oihai",
  19.             "butuguset",
  20.             "set",
  21.             "temoto_kuyou",
  22.             "products",
  23.             "support",
  24.             "about",
  25.             "showroom",
  26.             "special",
  27.             "news"
  28.         ]|json_encode|raw }};
  29.         function toggleIcons(section) {
  30.                 if ($(window).width() <= 768) {
  31.                     $(section.details).hide();
  32.                     $(section.addIcon).show();
  33.                     $(section.removeIcon).hide();
  34.                 } else {
  35.                     $(section.details).show();
  36.                     $(section.addIcon).hide();
  37.                     $(section.removeIcon).hide();
  38.                 }
  39.             }
  40.         if($(window).width() <= 768) {
  41.             $('.hover').removeClass('hover');
  42.         } else {
  43.             $('.hover').addClass('hover');
  44.         };
  45.         $(window).on('scroll', function () {
  46.             for (let i = 0; i < slideInContents.length; i++) {
  47.                 var value = slideInContents[i];
  48.                 var winH = $(window).height();
  49.                 var objH = $ (`.${value}`).outerHeight();
  50.                 var objTop = $ (`.${value}`).offset().top;
  51.                 var scroll;
  52.                 scroll = $(window).scrollTop();
  53.                 if (scroll >= objTop - winH) {
  54.                     $ (`.${value}`).addClass('animate-slideIn will-change-transform');
  55.                 }
  56.             }
  57.         });
  58.     </script>
  59. {% endblock javascript %}
  61. {% block stylesheet %}
  62.     <style>
  63.         @media screen and (min-width: 2000px) {
  64.             .products{
  65.                 width: 1650px;
  66.                 margin: 0px auto;
  67.             }
  68.             .about,
  69.             .showroom,
  70.             .support,
  71.             .special,
  72.             .news {
  73.                 width: 1650px;
  74.                 margin: 172px auto 0px;
  75.             }
  76.         }
  77.     </style>
  78. {% endblock %}
  80. {% set product_lists = [
  81.         [
  82.             2,
  83.             {
  84.                 'class': 'obutudan',
  85.                 'image': 'assets/img/top/obutudan.webp',
  86.                 'spimage':'assets/img/top/obutudan-sp.webp',
  87.                 'title': 'お仏壇・ステージ',
  88.                 'subtitle': 'あなたの想いを、置ける場所',
  89.             },
  90.         ],
  91.         [
  92.             1,
  93.             {
  94.                 'class': 'oihai',
  95.                 'image': 'assets/img/top/ihai.webp',
  96.                 'spimage':'assets/img/top/ihai-sp.webp',
  97.                 'title': 'お位牌',
  98.                 'subtitle': '想いそのものを、かたちに',
  99.             },
  101.         ],
  102.         [
  103.             3,
  104.             {
  105.                 'class': 'butuguset',
  106.                 'image': 'assets/img/top/butuguset.webp',
  107.                 'spimage':'assets/img/top/butuguset-sp.webp',
  108.                 'title': '仏具・日用品',
  109.                 'subtitle': 'あなたの想いに、らしさを加える',
  110.             },
  111.         ],
  112.         [
  113.             4,
  114.             {
  115.                 'class': 'set',
  116.                 'image': 'assets/img/top/sonota.webp',
  117.                 'spimage':'assets/img/top/sonota-sp.webp',
  118.                 'title': '仏壇・仏具セット',
  119.                 'subtitle': 'おすすめ、人気のコーディネート',
  120.             },
  122.         ],
  124.         [
  125.             21,
  126.             {
  127.                 'class': 'temoto_kuyou',
  128.                 'image': 'assets/img/top/temotokuyou.webp',
  129.                 'spimage':'assets/img/top/temotokuyou-sp.webp',
  130.                 'title': '手元供養',
  131.                 'subtitle': 'お仏壇のない、小さなご供養',
  132.             },
  133.         ]
  134.     ]
  135. %}
  137. {% block main %}
  138.     <div class="flex flex-col items-center justify-center w-full mv">
  139.         <img src="{{asset('assets/img/top/FV_img_PC.webp')}}" alt="" class="w-full h-auto md:hidden">
  140.         <img src="{{asset('assets/img/top/FV_img.webp')}}" alt="" class="w-full h-auto hidden md:block">
  141.         <div class=" mt-[188px] mb-[148px] md:mt-[64px] md:mb-[76px] flex items-center justify-center mx-auto">
  142.             <img src="{{asset('assets/img/top/pc-phrase.svg')}}" alt="想いと暮らす" class="md:hidden">
  143.             <img src="{{asset('assets/img/top/sp-phrase.svg')}}" alt="想いと暮らす" class="hidden md:block">
  144.         </div>
  146.     </div>
  147.     {# 商品 #}
  148.     <div class="products flex flex-col relative w-full justify-center lg:overflow-hidden opacity-0">
  149.         <div class="ml-[11.4vw] md:ml-2 flex gap-x-[30px] items-center mb-11 md:mb-6 md:gap-x-[10px]">
  150.             <hr class="w-[60px] h-[2px] border-black md:w-5">
  151.             <h3 class="text-[40px] whitespace-nowrap md:text-[22px] font-extralight tracking-[8px]">まなかの商品</h3>
  152.         </div>
  153.         <div class="flex pl-10 md:pl-2 w-full">
  154.             <p class="text-sm md:text-[8px] leading-5 md:leading-3 tracking-[3px] [writing-mode:vertical-rl]">PRODUCTS</p>
  155.             <div class="max-w-[1120px] w-[calc(100%-20px)] md:w-full mx-auto items-center flex flex-col justify-center gap-y-[128px] md:gap-y-16 md:mx-0">
  156.                 {% for key,products in product_lists %}
  157.                     {% set productsLength = Products[products[0]]|length %}
  158.                     {{ include('product_list.twig',
  159.                     {
  160.                         'id' : products[0],
  161.                         'class': products[1].class,
  162.                         'image': products[1].image,
  163.                         'spimage': products[1].spimage,
  164.                         'subtitle': products[1].subtitle,
  165.                         'title': products[1].title,
  166.                         'count': productsLength,
  167.                         'productImages': ProductImages,
  168.                     })
  169.                     }}
  170.                 {% endfor %}
  171.             </div>
  172.         </div>
  173.     </div>
  174.     {# about #}
  175.     <div class="about flex relative w-full mt-[172px] md:mt-16 md:mt-[120px] pl-10 md:pl-2">
  176.         <p class="text-sm md:text-[8px] leading-5 tracking-[3px] [writing-mode:vertical-rl]">CONCEPT</p>
  177.         <div class="w-full flex justify-end md:justify-start max-w-[1514px] ml-auto">
  178.             <div class="flex justify-between w-full sm:justify-end">
  179.                 <div class="flex lg:gap-y-5 gap-y-[132px] md:gap-y-[60px] pl-6 mr-20 md:mr-0">
  180.                     <div class="flex lg:flex-col lg:gap-y-[28px] md:items-end h-fit">
  181.                         <div class="flex flex-col relative h-fit">
  182.                             <img src="{{ asset('assets/img/top/reef-about.webp') }}" alt="" class="w-[96px] h-[70px] top-[-30px] left-[52px] absolute lg:hidden">
  183.                             <img src="{{ asset('assets/img/top/about.webp') }}" alt="" class="w-[max(22.9vw,440px)] max-w-[440px] h-auto lg:w-[max(50vw,188px)] md:hidden rounded">
  184.                             <img src="{{ asset('assets/img/top/about_sp.webp') }}" alt="" class="w-[max(22.9vw,440px)] max-w-[440px] h-auto lg:w-[max(50vw,188px)] hidden md:block rounded">
  185.                             <img src="{{ asset('assets/img/top/sp-lotus.svg') }}" alt="" class="absolute lg:left-[-12px] z-10 lg:top-[-16px] lg:w-[24vw] h-auto lg:block hidden">
  186.                             <img src="{{ asset('assets/img/top/pc-lotus.svg') }}" alt="" class="w-[max(13.5vw,260px)] max-w-[260px] absolute -bottom-[max(2.2vw,44px)] left-[365px] lg:hidden">
  187.                         </div>
  188.                         <div class="hidden lg:flex items-start justify-center md:justify-end gap-x-[28px] lg:w-[50vw] font-extralight">
  189.                             <div class="flex gap-x-3 ">
  190.                                 <p class="text-lg md:text-xs [writing-mode:vertical-rl] tracking-[3px]">
  191.                                     祈りの道具を提案します。</p>
  192.                                 <p class="text-lg md:text-xs [writing-mode:vertical-rl] tracking-[3px]">これからを生きるための</p>
  193.                                 <p class="text-lg md:text-xs [writing-mode:vertical-rl] tracking-[3px]">大切な人がいた、すべての人に。</p>
  194.                                 <p class="text-lg md:text-xs [writing-mode:vertical-rl] tracking-[3px]">誰かを想い、偲び続ける時間に。</p>
  195.                             </div>
  196.                             <div class="flex gap-x-w font-extralight relative mt-2">
  197.                                 <img src="{{ asset('assets/img/top/reef-about.webp') }}" alt="" class="w-[9.6vw] absolute -bottom-[8vw] -right-[12vw]">
  198.                                 <p class="[writing-mode:vertical-rl] md:text-lg text-[28px] tracking-widest">一緒に歩む</p>
  199.                                 <p class="[writing-mode:vertical-rl] md:text-lg text-[28px] tracking-widest">あなたの毎日を</p>
  200.                             </div>
  201.                         </div>
  202.                     </div>
  203.                 </div>
  204.                 <div class="flex flex-col items-end">
  205.                     <div class="flex gap-x-[max(4.16vw,77px)] xxl:gap-x-7 mt-5 md:mt-0">
  206.                         <div class="flex gap-x-[1vw] lg:hidden">
  207.                             <p class="text-lg [writing-mode:vertical-rl] tracking-[6px]">
  208.                                 祈りの道具を提案します。</p>
  209.                             <p class="text-lg [writing-mode:vertical-rl] tracking-[6px]">これからを生きるための</p>
  210.                             <p class="text-lg [writing-mode:vertical-rl] tracking-[6px]">大切な人がいた、すべての人に。</p>
  211.                             <p class="text-lg [writing-mode:vertical-rl] tracking-[6px]">誰かを想い、偲び続ける時間に。</p>
  212.                         </div>
  213.                         <div class="flex gap-x-8 lg:hidden font-extralight">
  214.                             <p class="text-[28px] [writing-mode:vertical-rl] tracking-[6px] font-extralight">一緒に歩む</p>
  215.                             <p class="text-[28px] [writing-mode:vertical-rl] tracking-[6px] font-extralight">あなたの毎日を</p>
  216.                         </div>
  217.                         <h3 class="text-[36px] [writing-mode:vertical-rl] md:text-xl tracking-[8px] md:tracking-[4px] font-extralight mr-[max(8.8vw,52px)] md:ml-7">祈りの道具屋　まなかとは</h3>
  218.                     </div>
  219.                     <a href="{{url("help_about")}}" class="mr-[max(8.8vw,44px)] lg:hidden mt-12 w-[262px] h-16 bg-manakaBeige gap-x-5 flex items-center justify-center border-b-[1px] border-manakaBlack hover cursor-pointer">
  220.                         <p class="text-[22px] md:text-sm">詳細</p>
  221.                         <img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印">
  222.                     </a>
  223.                 </div>
  224.             </div>
  225.         </div>
  226.         <a href="{{url("help_about")}}" class="hidden absolute bottom-0 mr-4 right-0 lg:flex w-[262px] md:w-[156px] h-16 md:h-[44px] mb-[-44px] bg-manakaBeige gap-x-5 md:gap-x-3 items-center justify-center border-b-[1px] border-manakaBlack hover cursor-pointer">
  227.             <p class="text-[22px] md:text-sm">詳細</p>
  228.             <img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印">
  229.         </a>
  230.     </div>
  231.     {# ショールームのご案内 #}
  232.     <div class="showroom flex relative w-full mt-[172px] md:mt-[120px] pl-10 md:pl-2 justify-between">
  233.         <p class="text-sm md:text-[8px] leading-5 tracking-[3px] [writing-mode:vertical-rl]">SHOWROOM</p>
  234.         <div class="w-full">
  235.             <div class="w-full flex justify-end md:justify-start">
  236.                 <div class="flex ml-auto justify-between w-full max-w-[1514px] pl-6 md:pl-3">
  237.                     <div class="flex">
  238.                         <div class="max-w-[780px] flex flex-col lg:w-[66.6vw]">
  239.                             <img src="{{ asset('assets/img/top/showroom-info.webp') }}" alt="" class="w-full lg:w-[66.6vw] mb-11 md:mb-6">
  240.                             <div class="flex flex-col gap-y-2 items-center ">
  241.                                 <h3 class="text-[30px] md:text-lg text-center tracking-widest font-extralight leading-relaxed mb-8 md:mb-4">
  242.                                     専門スタッフが
  243.                                     <br>
  244.                                     お位牌・お仏壇選びを
  245.                                     <br class="hidden md:block"/>
  246.                                     お手伝い</h3>
  247.                             </div>
  248.                             <p class="md:text-xs tracking-[2px] leading-7 md:leading-[18px] mb-8 md:mb-4">銀座・横浜元町ショールームでは、お仏壇・お位牌・仏具の全ラインナップに加え、希少素材を使った一点物も取りそろえ、手に取ってお選び頂けます。</p>
  249.                             <p class="md:text-xs tracking-[2px] leading-7 md:leading-[18px]">柔らかい日が注ぐ空間で、まなかの世界観を感じて頂けますと幸いです。</p>
  250.                         </div>
  251.                     </div>
  252.                     <h3 class="text-[36px] h-fit [writing-mode:vertical-rl] md:text-xl tracking-[8px] md:tracking-[4px] font-extralight pr-[max(8.8vw,44px)] mt-[72px] md:mt-0">
  253.                         銀座・横浜ショールームのご案内
  254.                     </h3>
  255.                 </div>
  256.             </div>
  257.             <a href="{{url("user_data",{route:"showroom"})}}" class="mr-[max(8.8vw,44px)] -mt-16 flex ml-auto lg:mr-4 md:w-[156px] md:h-[44px] w-[262px] h-16 bg-[#EFEEE8] xl:mt-6 gap-x-5 md:gap-x-3 items-center justify-center border-b-[1px] border-manakaBlack bottom-0 hover cursor-pointer">
  258.                 <p class="text-[22px] md:text-sm tracking-widest">詳細</p>
  259.                 <img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印">
  260.             </a>
  261.         </div>
  262.     </div>
  263.     {# サポートサービス #}
  264.     <div class="support relative xl:px-[8vw] xl:w-full xl:mx-0 flex items-center justify-center mt-[128px] md:mt-16 w-full">
  265.         <div class="gap-10 xl:gap-y-8 flex flex-col items-center justify-center xl:pt-8 xl:pb-16 p-20 bg-[#F7F6F2] xl:px-5 max-w-[1120px]">
  266.             <h3 class="text-center text-[36px] md:text-xl tracking-[14px] md:tracking-widest font-extralight">商品選びサポートサービス</h3>
  267.             <div class="text-center flex flex-col md:text-xs text-xl gap-y-3">
  268.                 <p class="leading-relaxed">お客様と故人様の関係にふさわしい<br class="hidden md:block">祈りのかたちを見つけていただくために、<br>
  269.                     いくつかのサポートサービスをご用意しました。</p>
  270.             </div>
  271.             <div class="gap-12 flex flex-wrap p-6 lg:p-0 w-full lg:gap-4 md:flex md:flex-col items-center justify-center">
  272.                 <a href="{{url("user_data",{route:"catalog"})}}">
  273.                     <img src="{{ asset('assets/img/top/catalog-service.webp') }}" alt="" class="w-[min(22.5vw,432px)] lg:w-[73.3vw] h-full hover cursor-pointer">
  274.                 </a>
  275.                 <a href="{{url("user_data",{route:"photo_services"})}}">
  276.                     <img src="{{ asset('assets/img/top/coordinate-service.webp') }}" alt="" class="w-[min(22.5vw,432px)] lg:w-[73.3vw] h-full hover cursor-pointer">
  277.                 </a>
  278.                 <a href="{{url("user_data",{route:"pick_up_altar"})}}">
  279.                     <img src="{{ asset('assets/img/top/takuover-service.webp') }}" alt="" class="w-[min(22.5vw,432px)] lg:w-[73.3vw] h-full hover cursor-pointer">
  280.                 </a>
  281.             </div>
  282.         </div>
  283.         <a href="{{url("user_data",{route:"service"})}}" class="lg:bottom-[-5.33vw] md:w-[156px] md:h-[44px] w-[262px] h-16 bg-[#EFEEE8] gap-x-5 md:gap-x-3 flex items-center justify-center border-b-[1px] border-manakaBlack absolute bottom-[-27px] right-[8.85vw] lg:right-4 hover cursor-pointer">
  284.             <p class="text-[22px] md:text-sm hover tracking-widest">詳細</p>
  285.             <img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印">
  286.         </a>
  287.     </div>
  288.     {# 関連特集 #}
  289.     <div class="special flex relative w-full justify-start mt-[128px] md:mt-[88px] pl-10 md:pl-2">
  290.         <p class="text-sm md:text-[8px] leading-5 tracking-[3px] [writing-mode:vertical-rl]">SPECIAL</p>
  291.         <div class="w-full">
  292.             <div class="w-full flex justify-end md:justify-start">
  293.                 <div class="flex lg:gap-y-5 gap-y-[132px] ml-auto justify-between md:gap-y-[60px] w-full max-w-[1548px] pl-6 md:pl-2">
  294.                     <ul
  295.                         class="grid grid-cols-2 grid-rows-2 gap-10 lg:gap-[14px] h-[max(83.46vw,313pxpx)]">
  296.                         {% for newPost in newPosts %}
  297.                             <li class="w-[max(19vw,370px)] max-w-[370px] drop-shadow-[0_10px_10px_rgba(0,0,0,0.08)] shadow-black even:mt-[40px] md:even:mt-[16px] lg:w-[29.9vw] hover cursor-pointer">
  298.                                 <a href="{{ path('special_post', {id: newPost.ID}) }}">
  299.                                     <img src={{newPost.mainimage[0]}} alt="関連特集" class="w-full md:h-[68px] h-[max(12.5vw,240px)] object-cover">
  300.                                     <div class="h-[5.72vw] flex flex-col gap-y-2  bg-white justify-between items-end py-[max(0.93vw,10px)] px-[max(1.56vw,10px)] lg:h-[min(17vw,80px)]">
  301.                                         <p class="text-[0.94vw] w-full lg:text-[min(2.4vw,16px)] leading-relaxed lg:w-[calc(29.9vw - 10px)] truncate">{{newPost.post_title}}</p>
  302.                                         <img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印" class="w-[1.14vw] xl:w-[2.93vw] ">
  303.                                     </div>
  304.                                 </a>
  305.                             </li>
  306.                         {% endfor %}
  307.                     </ul>
  308.                     <div class="flex-col flex xl:mt-[0px] mt-[72px] gap-y-[0.8vw] md:gap-y-5 items-center pr-[max(8.8vw,44px)]">
  309.                         <h3 class="text-[36px] [writing-mode:vertical-rl] md:text-xl tracking-[8px] md:tracking-[4px] font-extralight">関連特集</h3>
  310.                         <div class="flex gap-y-[10px] flex-col items-center">
  311.                             <hr class="w-[1px] h-8 bg-manakaBlack border-none md:h-4">
  312.                             <p class="text-[28px] [writing-mode:vertical-rl] md:text-sm tracking-[10px] md:tracking-[3px] font-extralight">祈りに親しむ</p>
  313.                             <hr class="w-[1px] h-8 bg-manakaBlack border-none md:h-4">
  314.                         </div>
  315.                     </div>
  316.                 </div>
  317.                 <a href="{{url("special_posts")}}" class="lg:bottom-[-12vw] xl:hidden md:w-[156px] md:h-[44px] w-[262px] h-16 bg-[#EFEEE8] gap-x-5 md:gap-x-3 flex items-center justify-center border-b-[1px] border-manakaBlack absolute bottom-[-4vw] right-[8.85vw] lg:right-0 hover cursor-pointer">
  318.                     <p class="text-[22px] tracking-widest">一覧</p>
  319.                     <img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印">
  320.                 </a>
  321.             </div>
  322.             <a href="{{url("special_posts")}}" class="hidden xl:flex ml-auto lg:mr-4 md:w-[156px] md:h-[44px] w-[262px] h-16 bg-[#EFEEE8] xl:mt-6 gap-x-5 md:gap-x-3 items-center justify-center border-b-[1px] border-manakaBlack bottom-0 hover cursor-pointer">
  323.                 <p class="text-[22px] md:text-sm tracking-widest">一覧</p>
  324.                 <img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印">
  325.             </a>
  326.         </div>
  327.     </div>
  328.     {# お知らせ #}
  329.     <div class="news flex relative w-full mt-[166px] md:mt-16 pl-10 lg:pr-0 md:pl-2">
  330.         <p class="text-sm md:text-[8px] leading-5 tracking-[3px] [writing-mode:vertical-rl]">NEWS</p>
  331.         <div class="w-full">
  332.             <div class="w-full flex max-w-[1538px] ml-auto h-[364px] md:h-[208px] lg:pr-[max(8.8vw,44px)]">
  333.                 <div class="pl-6 md:pl-3 w-full flex lg:flex-col items-end justify-between gap-x-12">
  334.                     <div class="flex flex-col w-full max-w-[766px] lg:pr-4 md:min-w-[248px] items-start h-full">
  335.                         <div class="border-b border-[#EFEFEF]">
  336.                             {% for index, postList in PostLists %}
  337.                                 {% if index < 3 %}
  338.                                     {{ include('top_news.twig', {'dataKey': postList.dataKey,'date': postList.publicDate, 'title': postList.title }) }}
  339.                                 {% endif %}
  340.                             {% endfor %}
  341.                         </div>
  342.                     </div>
  343.                     <a href="{{url("user_data",{route:"reading"})}}" class="lg:hidden -mr-[57px] lg:mr-4 lg:md:w-[156px] md:h-[44px] w-[262px] h-16 bg-[#EFEEE8] xl:mt-6 gap-x-5 flex items-center justify-center border-b-[1px] border-manakaBlack bottom-0 hover cursor-pointer">
  344.                         <p class="text-[22px] md:text-base tracking-widest">一覧</p>
  345.                         <img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印">
  346.                     </a>
  347.                 </div>
  348.                 <h3 class="text-[36px] h-fit [writing-mode:vertical-rl] md:text-xl tracking-[8px] md:tracking-[4px] font-extralight xl:mt-[0px] mt-[72px] pr-[8.8vw] xxl:pr-0">お知らせ</h3>
  349.             </div>
  350.             <a href="{{url("user_data",{route:"reading"})}}" class="hidden lg:flex -mr-[57px] lg:ml-auto lg:mr-4 md:w-[156px] md:h-[44px] w-[262px] h-16 bg-[#EFEEE8] xl:mt-6 gap-x-5 md:gap-x-3 items-center justify-center border-b-[1px] border-manakaBlack bottom-0 hover cursor-pointer">
  351.                 <p class="text-[22px] md:text-sm tracking-widest">一覧</p>
  352.                 <img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印">
  353.             </a>
  354.         </div>
  355.     </div>
  356.     {% set breadcrumbs = [] %}
  357.     {{ include('Block/breadcrumbs.twig') }}
  358. {% endblock %}