app/template/user_data/showroom.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' %}
  14. {% block stylesheet %}
  15.     <style>
  16.         .slider-dots {
  17.             display: flex;
  18.             align-items: center;
  19.             justify-content: center;
  20.             margin: 32px 0;
  21.         }
  22.         .slider-dots li {
  23.             list-style-type: none;
  24.             width: 44px;
  25.             height: 22px;
  26.             cursor: pointer;
  27.         }
  28.         .slider-dots li button {
  29.             width: 44px;
  30.             height: 22px;
  31.             border-top-width: 2px;
  32.             border-color: #E2DFD6;
  33.         }
  34.         .slider-dots li.slick-active button {
  35.             border-top-width: 2px;
  36.             border-color: #A88B57;
  37.         }
  38.         @media(max-width: 768px) {
  39.             .slider-dots {
  40.                 margin-top: 20px;
  41.             }
  42.             .slider-dots li {
  43.                 width: 36px;
  44.             }
  45.             .slider-dots li button {
  46.                 width: 36px;
  47.             }
  48.         }
  49.     </style>
  50. {% endblock stylesheet %}
  51. {% block javascript %}
  52.     <script>
  53.         $(document).ready(function () {
  54.             $('.slider').slick({
  55.                 customPaging: function (slider, index) {
  56.                     return $('<button type="button" />').text((''));
  57.                 },
  58.                 dotsClass: 'slider-dots',
  59.                 slide: 'div',
  60.                 infinite: true,
  61.                 autoplay: true,
  62.                 autoplaySpeed: 7000,
  63.                 speed: 1500,
  64.                 slidesToShow: 1,
  65.                 slidesToScroll: 1,
  66.                 dots: true
  67.             });
  68.             var dots = true;
  69.         });
  70.     </script>
  71.     <script>
  72.         $(function () {
  73.             $('a[href^="#"]').click(function () {
  74.                 var adjust = 200;
  75.                 var speed = 400;
  76.                 var href = $(this).attr("href");
  77.                 var target = $(href == "#" || href == "" ? 'html' : href);
  78.                 var position = target.offset().top - adjust;
  79.                 $('body,html').animate({
  80.                     scrollTop: position
  81.                 }, speed, 'swing');
  82.                 return false;
  83.             });
  84.         });
  85.     </script>
  86. {% endblock javascript %}
  87. {% block main %}
  88.     <div class="font-extralight leading-relaxed lg:px-6 flex flex-col pb-[88px] mt-4 items-center md:mt-11 md:pb-10 tracking-widest">
  89.         <div class="flex flex-col mb-[128px] md:mb-10">
  90.             <img src="{{ asset('assets/img/showroom/showroom.webp') }}" alt="祈りの道具屋まなかの店舗" class="mb-20 md:mb-10 w-[880px] h-[531px] md:w-[325px] md:h-[325px]">
  91.             <div class="flex flex-col items-center">
  92.                 <h2 class="flex text-[40px] md:text-xl mb-5 text-center">
  93.                     銀座・横浜元町
  94.                     <br class="hidden md:block">ショールーム
  95.                 </h2>
  96.                 <p class="border-[2px] border-black py-3 w-[150px] md:w-[92px] text-lg  text-center md:text-xs">予約制</p>
  97.             </div>
  98.         </div>
  99.         <div class="flex flex-col items-center gap-y-9">
  100.             <div class="relative">
  101.                 <img src="{{asset('assets/img/corporate/reef.webp')}}" alt="葉" class=" w-[52px] h-[58px] md:w-10 md:h-[41px] absolute left-[-32px] bottom-[-2px] -z-10 md:bottom-[32px] ">
  102.                 <h2 class="text-[28px] md:text-xl text-center leading-loose tracking-[5.6px] ">実物をご覧に
  103.                     <br class="hidden md:block">
  104.                     なりませんか？</h2>
  105.             </div>
  106.             <div class="text-center md:text-sm text-sm leading-7 w-full lg:text-start">
  107.                 <p class="mb-6 leading-relaxed">ショールームでは、オリジナル商品の全ラインナップに加え、
  108.                     <br class="md:hidden">希少素材を使った一点物やショールーム専売品も、手に取ってお選び頂けます。</p>
  109.                 <p>柔らかな陽が降り注ぐ空間で、まなかの世界観を感じて頂けますと幸いです。</p>
  110.             </div>
  111.         </div>
  112.     </div>
  113.     <hr class="border-[#E2DFD6] max-w-[1120px] mx-auto w-full md:w-[100vw] md:mx-[calc(50%-50vw)] md:px-[calc(50%-50vw)]">
  114.     <div class="font-extralight tracking-widest leading-relaxed mx-auto max-w-[1120px] lg:px-6">
  115.         <div
  116.             class="flex flex-col">
  117.             {# ご予約について #}
  118.             <div class="py-[120px] md:py-9 flex flex-col items-center gap-y-16 md:gap-y-8">
  119.                 <div class="flex flex-col items-center justify-center gap-y-9 md:gap-y-5">
  120.                     <h3 class="text-[28px] md:text-xl tracking-[5.6px]">ご予約について</h3>
  121.                     <div class="w-[704px] flex items-center justify-center gap-x-10 md:gap-x-0 bg-manakaBeige py-5 md:py-3 md:w-[100vw] md:mx-[calc(50%-50vw)] md:px-[calc(50%-50vw)]">
  122.                         <div class="flex gap-x-4 md:flex-col items-center justify-center md:gap-y-[2px] md:px-6 md:w-full hover">
  123.                             <a href="#ginza_showroom" class="md:text-xs text-center">銀座ショールーム</a>
  124.                             <i class="fas fa-chevron-down fa-xs"></i>
  125.                         </div>
  126.                         <hr class="w-[1px] h-4 bg-[#E2DFD6]">
  127.                         <div class=" flex gap-x-4 md:flex-col items-center md:gap-y-[2px] md:px-6 md:w-full hover">
  128.                             <a href="#yokohama_showroom" class="md:text-xs ">横浜元町ショールーム</a>
  129.                             <i class="fas fa-chevron-down fa-xs"></i>
  130.                         </div>
  131.                     </div>
  132.                 </div>
  133.                 {# 銀座 #}
  134.                 <div class="flex flex-col gap-y-[112px] md:gap-y-8">
  135.                     <div class="flex-col flex" id="ginza_showroo">
  136.                         <div class="flex gap-x-8 items-center justify-center md:gap-x-3 mb-14 md:mb-5">
  137.                             <hr class="w-8 md:w-4 h-[1px] bg-black border-none">
  138.                             <h3 class="text-[28px] tracking-[5.6px] md:text-lg ">銀座ショールーム</h3>
  139.                             <hr class="w-8 md:w-4 h-[1px] bg-black border-none">
  140.                         </div>
  141.                         <div
  142.                             class="flex flex-col mb-10">
  143.                             {# スライダー #}
  144.                             <div
  145.                                 class="flex flex-col items-center mb-11 md:mb-8">
  146.                                 {# 画像 #}
  147.                                 <div class="slider w-[max(45.83vw,325px)] h-[max(28.64vw,204px)]">
  148.                                     <div class="image w-[max(45.83vw,325px)] h-[max(28.64vw,204px)] ">
  149.                                         <img src="{{asset('assets/img/showroom/showroom_ginza01.webp')}}" alt="銀座ショールーム" class="w-full h-auto top-0 left-0 rounded">
  150.                                     </div>
  151.                                     <div class="image w-[max(45.83vw,325px)] h-[max(28.64vw,204px)]">
  152.                                         <img src="{{asset('assets/img/showroom/showroom_ginza02.webp')}}" alt="銀座ショールーム" class="w-full h-auto top-0 left-0 rounded">
  153.                                     </div>
  154.                                     <div class="image w-[max(45.83vw,325px)] h-[max(28.64vw,204px)]">
  155.                                         <img src="{{asset('assets/img/showroom/showroom_ginza03.webp')}}" alt="銀座ショールーム" class="w-full h-full top-0 left-0 rounded">
  156.                                     </div>
  157.                                     <div class="image w-[max(45.83vw,325px)] h-[max(28.64vw,204px)]">
  158.                                         <img src="{{asset('assets/img/showroom/showroom_ginza04.webp')}}" alt="銀座ショールーム" class="w-full h-full top-0 left-0 rounded">
  159.                                     </div>
  160.                                 </div>
  161.                             </div>
  162.                             <div class="flex flex-col">
  163.                                 <div class="text-center text-sm md:text-start mb-7 md:mb-11">
  164.                                     <p>有楽町線 銀座一丁目駅、浅草線 宝町駅、銀座線京橋駅よりそれぞれ約徒歩5分。</p>
  165.                                     <p>どちらからでもアクセス良好です。</p>
  166.                                 </div>
  167.                                 {# 予約枠 #}
  168.                                 <div class="flex flex-col items-center mb-5 md:mb-3">
  169.                                     <div class="flex gap-x-4 items-center justify-center mb-5 md:mb-3">
  170.                                         <hr class="w-8 md:w-5 h-[1px] bg-black border-none">
  171.                                         <h4 class="text-2xl md:text-lg">予約枠</h4>
  172.                                         <hr class="w-8 md:w-5 h-[1px] bg-black border-none">
  173.                                     </div>
  174.                                     {# 時間帯 #}
  175.                                     <div class="flex gap-x-7 md:gap-x-4">
  176.                                         <p class="py-2 px-3 border border-[#CCCCCC] text-sm text-center w-fit">10:00～</p>
  177.                                         <p class="py-2 px-3 border border-[#CCCCCC] text-sm text-center w-fit">13:30～</p>
  178.                                         <p class="py-2 px-3 border border-[#CCCCCC] text-sm text-center w-fit">16:00～</p>
  179.                                     </div>
  180.                                     <p class="text-[10px] mt-2">※水曜定休日</p>
  181.                                     <p class="text-[10px] mt-2">※当日のご予約はお電話にてお願い申し上げます</p>
  182.                                 </div>
  183.                                 <div
  184.                                     class="flex gap-x-8 lg:flex-col lg:gap-y-2 items-center mx-auto lg:mx-0">
  185.                                     {# フォーム #}
  186.                                     <a href="{{url('showroom_confirm')}}" class="bg-[#2D969B] flex gap-x-4 md:gap-x-3 text-white  h-[62px] w-[425px] lg:w-[90%] md:h-[46px] items-center justify-center rounded hover">
  187.                                         <i class="fas fa-envelope fa-lg" style="color: #ffffff;"></i>
  188.                                         <p>フォームで予約</p>
  189.                                     </a>
  190.                                     {# お電話 #}
  191.                                     <a href="tel:03-5579-5671" class="bg-[#2D969B] flex gap-x-4 text-white  h-[62px] w-[425px] lg:w-[90%] md:h-[46px] items-center justify-center rounded hover">
  192.                                         <div class="md:hidden">
  193.                                             <p class="leading-snug">お電話での予約は下記番号まで</p>
  194.                                             <div class="flex items-center justify-center gap-2">
  195.                                                 <i class="fas fa-phone fa-flip-horizontal fa-lg" style="color: #ffffff;"></i>
  196.                                                 <p class="leading-snug">03-5579-5671</p>
  197.                                             </div>
  198.                                         </div>
  199.                                         <div class="hidden md:flex gap-x-4 md:gap-x-3 items-center">
  200.                                             <i class="fas fa-phone fa-flip-horizontal fa-lg" style="color: #ffffff;"></i>
  201.                                             <p>電話で予約</p>
  202.                                         </div>
  203.                                     </a>
  204.                                 </div>
  206.                             </div>
  207.                         </div>
  208.                         <a href="#ginza_map" class="text-manakaGold text-center underline hover:no-underline md:text-sm hover">詳しいアクセス・MAPはこちら</a>
  209.                     </div>
  210.                     {# 横浜 #}
  211.                     <div id="yokohama_showroom">
  212.                         <div class="flex-col flex gap-y-14 md:gap-y-5">
  213.                             <div class="flex gap-x-8 items-center justify-center md:gap-x-3">
  214.                                 <hr class="w-8 md:w-4 h-[1px] bg-black border-none">
  215.                                 <h3 class="text-[28px] md:text-lg tracking-[5.6px]">横浜元町ショールーム</h3>
  216.                                 <hr class="w-8 md:w-4 h-[1px] bg-black border-none">
  217.                             </div>
  218.                             <div
  219.                                 class="flex flex-col">
  220.                                 {# スライダー #}
  221.                                 <div
  222.                                     class="w-full flex flex-col items-center mb-11 md:mb-8">
  223.                                     {# 画像 #}
  224.                                     <div class="slider w-[max(45.83vw,325px)] h-[max(28.64vw,204px)]">
  225.                                         <div class="slick-slider w-[max(45.83vw,325px)] h-[max(28.64vw,204px)] ">
  226.                                             <img src="{{asset('assets/img/showroom/showroom_ykhm01.webp')}}" alt="" class=" w-full h-auto top-0 left-0">
  227.                                         </div>
  228.                                         <div class="slick-slider w-[max(45.83vw,325px)] h-[max(28.64vw,204px)]">
  229.                                             <img src="{{asset('assets/img/showroom/showroom_ykhm02.webp')}}" alt="" class=" w-full h-auto top-0 left-0">
  230.                                         </div>
  231.                                         <div class="slick-slider w-[max(45.83vw,325px)] h-[max(28.64vw,204px)]">
  232.                                             <img src="{{asset('assets/img/showroom/showroom_ykhm03.webp')}}" alt="" class=" w-full h-full top-0 left-0">
  233.                                         </div>
  234.                                         <div class="slick-slider w-[max(45.83vw,325px)] h-[max(28.64vw,204px)]">
  235.                                             <img src="{{asset('assets/img/showroom/showroom_ykhm04.webp')}}" alt="" class="w-full h-full top-0 left-0">
  236.                                         </div>
  237.                                     </div>
  238.                                 </div>
  239.                                 <div class="flex flex-col">
  240.                                     <div class="text-center text-sm md:text-start md:mb-11 mb-7">
  241.                                         <p>みなとみらい線 元町・中華街駅より徒歩3分。</p>
  242.                                         <p>JR石川町駅より徒歩10分。どちらからでもアクセス良好です。</p>
  243.                                     </div>
  245.                                     {# 予約枠 #}
  246.                                     <div class="flex flex-col items-center mb-5 md:mb-2">
  247.                                         <div class="flex gap-x-4 items-center justify-center mb-5 md:mb-3">
  248.                                             <hr class="w-8 md:w-5 h-[1px] bg-black border-none">
  249.                                             <h4 class="text-2xl md:text-lg">予約枠</h4>
  250.                                             <hr class="w-8 md:w-5 h-[1px] bg-black border-none">
  251.                                         </div>
  252.                                         {# 時間帯 #}
  253.                                         <div class="flex gap-x-7 md:gap-x-4 ">
  254.                                             <p class="py-2 px-3 border border-[#CCCCCC] text-sm text-center w-fit">10:30～</p>
  255.                                             <p class="py-2 px-3 border border-[#CCCCCC] text-sm text-center w-fit">13:30～</p>
  256.                                             <p class="py-2 px-3 border border-[#CCCCCC] text-sm text-center w-fit">16:00～</p>
  257.                                         </div>
  258.                                         <p class="text-[10px] mt-2">月曜・火曜・金曜定休日</p>
  259.                                         <p class="text-[10px] mt-2">※当日のご予約はお電話にてお願い申し上げます</p>
  260.                                     </div>
  261.                                     <div
  262.                                         class="flex gap-x-8 lg:flex-col lg:gap-y-2 items-center mx-auto lg:mx-0">
  263.                                         {# フォーム #}
  264.                                         <a href="{{url('showroom_confirm')}}" class="bg-[#2D969B] flex gap-x-4 md:gap-x-3 text-white  h-[62px] w-[425px] lg:w-[90%] md:h-[46px] items-center justify-center rounded hover">
  265.                                             <i class="fas fa-envelope fa-lg" style="color: #ffffff;"></i>
  266.                                             <p>フォームで予約</p>
  267.                                         </a>
  268.                                         {# お電話 #}
  269.                                         <a href="tel:03-5579-5671" class="bg-[#2D969B] flex flex-col text-white h-[62px] w-[425px] lg:w-[90%] md:h-[46px] items-center justify-center rounded hover">
  270.                                             <div class="md:hidden">
  271.                                                 <p class="leading-snug">お電話での予約は下記番号まで</p>
  272.                                                 <div class="flex items-center justify-center gap-2">
  273.                                                     <i class="fas fa-phone fa-flip-horizontal fa-lg" style="color: #ffffff;"></i>
  274.                                                     <p class="leading-snug">03-5579-5671</p>
  275.                                                 </div>
  276.                                             </div>
  277.                                             <div class="hidden md:flex gap-4 md:gap-x-3 items-center">
  278.                                                 <i class="fas fa-phone fa-flip-horizontal fa-lg" style="color: #ffffff;"></i>
  279.                                                 <p>電話で予約</p>
  280.                                             </div>
  281.                                         </a>
  282.                                     </div>
  284.                                 </div>
  285.                             </div>
  286.                             <a href="#yokohama_map" class="text-manakaGold text-center underline hover:no-underline md:text-sm hover">詳しいアクセス・MAPはこちら</a>
  287.                         </div>
  288.                     </div>
  289.                 </div>
  290.             </div>
  291.             <hr
  292.             class="border-[#E2DFD6] max-w-[1120x] mx-auto w-full md:w-[100vw] md:mx-[calc(50%-50vw)] md:px-[calc(50%-50vw)]">
  293.             {# ショールームだけのおもてなし #}
  294.             <div class="mx-auto max-w-[1120px] py-[120px] md:py-9 flex flex-col items-center gap-y-[90px] md:gap-y-6">
  295.                 <div class="flex flex-col gap-y-9">
  296.                     <h3 class="text-[28px] md:text-xl tracking-[5.6px] md:text-center">ショールームだけの<br class="hidden md:block">おもてなし</h3>
  297.                     <p class="text-sm text-center">専門スタッフがお位牌・お仏壇選びをお手伝いいたします。</p>
  298.                 </div>
  299.                 {# おもてなし1 #}
  300.                 <div class="flex flex-col">
  301.                     <img src="{{asset('assets/img/showroom/showroom_sv01.webp')}}" alt="コーディネートのイメージ" class="w-[max(45.83vw,325px)]">
  302.                     <div class="mt-[-1.66vw] z-10 w-[max(45.83vw,325px)]">
  303.                         <div class="pt-6 pb-3 pl-0 pr-20 bg-white mb-7 md:mb-0 md:pb-7 md:pt-4 md:pr-3 w-fit ">
  304.                             <p class="text-2xl w-fit md:text-base tracking-[4.8px]">実物を見てコーディネート</p>
  305.                         </div>
  306.                         <div class="text-sm md:text-sm md:ml-4">
  307.                             <p class="leading-loose">オリジナル商品の全ラインナップを、実際に手にとって自由にご覧頂けます。
  308.                                 <br>また、専属スタッフがご希望を伺い、おすすめのコーディネートをご提案します。ご自分らしい「祈りのかたち」を見つけるお手伝いをいたします。</p>
  309.                         </div>
  310.                     </div>
  311.                 </div>
  312.                 {# おもてなし2 #}
  313.                 <div class="flex flex-col">
  314.                     <img src="{{asset('assets/img/showroom/showroom_sv02.webp')}}" alt="カウンセリングのイメージ" class="w-[max(45.83vw,325px)]">
  315.                     <div class="mt-[-1.66vw] z-10 w-[max(45.83vw,325px)]">
  316.                         <div class="pt-6 pb-3 pl-0 pr-20 bg-white mb-7 md:mb-0 md:pb-7 md:pt-4 md:pr-3 w-fit ">
  317.                             <p class="text-2xl w-fit md:text-base tracking-[4.8px]">ご供養のお悩み
  318.                                 <br class="md:block hidden">
  319.                                 カウンセリング</p>
  320.                         </div>
  321.                         <div class="text-sm md:text-sm md:ml-4">
  322.                             <p class="leading-loose">お位牌・お仏壇の組み合わせはもちろん、ご供養にまつわるさまざまなお悩みに対し、熟練のスタッフがサポートさせて頂きます。 「こんなことを聞いてもいいのだろうか」と思うような内容も、ぜひお気軽にご相談ください。</p>
  323.                         </div>
  324.                     </div>
  325.                 </div>
  326.                 {# おもてなし3 #}
  327.                 <div class="flex flex-col">
  328.                     <img src="{{asset('assets/img/showroom/showroom_sv03.webp')}}" alt="ショールーム限定商品について" class="w-[max(45.83vw,325px)]">
  329.                     <div class="mt-[-1.66vw] z-10 w-[max(45.83vw,325px)]">
  330.                         <div class="pt-6 pb-3 pl-0 pr-20 bg-white mb-7 md:mb-0 md:pb-7 md:pt-4 md:pr-3 w-fit ">
  331.                             <p class="text-2xl w-fit md:text-base tracking-[4.8px]">ショールーム限定商品</p>
  332.                         </div>
  333.                         <div class="text-sm md:text-sm md:ml-4">
  334.                             <p class="leading-loose">希少性の高い天然石のお位牌や、作家と制作した美しい祈りの道具など、数が少なく、オンラインでは取り扱いが難しい商品もご案内しております。</p>
  335.                         </div>
  336.                     </div>
  337.                 </div>
  338.             </div>
  339.             {# アクセスについて #}
  340.             <hr class="border-[#E2DFD6] max-w-[1120x] mx-auto border w-full md:w-[100vw] md:mx-[calc(50%-50vw)] md:px-[calc(50%-50vw)]">
  341.             <div class="py-[120px] md:py-9 flex flex-col items-center justify-center">
  342.                 <div class="flex flex-col items-center justify-center gap-y-9 md:gap-y-5 mb-[112px] md:mb-8">
  343.                     <h3 class="text-[28px] md:text-xl tracking-[5.6px]">アクセスについて</h3>
  344.                     <div class="w-[704px] flex items-center justify-center gap-x-10 md:gap-x-0 bg-manakaBeige py-5 md:py-3 md:w-[100vw] md:mx-[calc(50%-50vw)] md:px-[calc(50%-50vw)]">
  345.                         <div class="flex gap-x-4 md:flex-col items-center justify-center md:gap-y-[2px] md:px-6 md:w-full hover">
  346.                             <a href="#ginza_map" class="md:text-sm text-center">銀座ショールーム</a>
  347.                             <i class="fas fa-chevron-down fa-xs"></i>
  348.                         </div>
  349.                         <hr class="w-[1px] h-4 bg-[#E2DFD6]">
  350.                         <div class=" flex gap-x-4 md:flex-col items-center md:gap-y-[2px] md:px-6 md:w-full hover">
  351.                             <a href="#yokohama_map" class="md:text-sm">横浜元町ショールーム</a>
  352.                             <i class="fas fa-chevron-down fa-xs"></i>
  353.                         </div>
  354.                     </div>
  355.                 </div>
  356.                 <div
  357.                     class="w-full items-center justify-center flex flex-col gap-y-20 md:gap-y-12">
  358.                     {# 銀座ショールーム #}
  359.                     <div class="w-full flex-col flex items-center justify-center" id="ginza_map">
  360.                         <div class="flex gap-x-8 items-center justify-center md:gap-x-3 mb-11 md:mb-8">
  361.                             <hr class="w-8 md:w-4 h-[1px] bg-black border-none">
  362.                             <h3 class="text-[22px] md:text-lg tracking-[4.5px]">銀座ショールーム</h3>
  363.                             <hr class="w-8 md:w-4 h-[1px] bg-black border-none">
  364.                         </div>
  365.                         <div class="max-w-[880px] w-full">
  366.                             <div class="w-full flex flex-col gap-y-11 mb-16 md:mb-12 md:gap-y-6">
  367.                                 <table class="whitespace-nowrap text-sm md:text-sm pb-4 ml-4 md:ml-0">
  368.                                     <tbody class="w-full align-top">
  369.                                         <tr class="w-full md:flex md:flex-col gap-y-1 pb-4">
  370.                                             <td class="w-[232px] pr-2 pb-5 md:pb-0 md:font-bold">住所</td>
  371.                                             <td class="pb-5 md:pb-0 flex flex-col gap-y-1">
  372.                                                 <p>〒104-0061</p>
  373.                                                 <p>東京都中央区銀座1-15-4 銀座一丁目ビル9F</p>
  374.                                             </td>
  375.                                         </tr>
  376.                                         <tr class="w-full md:flex md:flex-col gap-y-1 pb-4">
  377.                                             <td class="w-[232px] pr-2 pb-5 md:pb-0 md:font-bold">TEL</td>
  378.                                             <td class="pb-5 md:pb-0">03-5579-5671</td>
  379.                                         </tr>
  380.                                         <tr class="w-full md:flex md:flex-col gap-y-1">
  381.                                             <td class="w-[232px] pr-2 pb-5 md:pb-0 md:font-bold">営業時間</td>
  382.                                             <td class="pb-5 md:pb-0">10:00～18:00　※水曜定休日</td>
  383.                                         </tr>
  384.                                     </tbody>
  385.                                 </table>
  386.                                 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.132008135673!2d139.76788477684806!3d35.673751430383106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ba8f8bf3de3%3A0xb01ce858839afa41!2z56WI44KK44Gu6YGT5YW35bGL44G-44Gq44GLIOmKgOW6p-OCt-ODp-ODvOODq-ODvOODoOOAkOS6iOe0hOWItuOAkQ!5e0!3m2!1sja!2sjp!4v1710988516409!5m2!1sja!2sjp" width="100%" height="410" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="md:w-[100vw] md:mx-[calc(50%-50vw)] md:px-[calc(50%-50vw)] md:h-[220px]"></iframe>
  387.                                 <table class="text-sm pb-4 ml-4 md:ml-4">
  388.                                     <tbody class="w-full align-top md:text-sm">
  389.                                         <tr class="md:flex md:flex-col gap-y-1 pb-4 md:pb-8">
  390.                                             <td class="align-top pr-2 pb-6 md:pb-0 md:font-bold ">電車でお越しの方へ</td>
  391.                                             <td class="pb-6 md:pb-0 flex flex-col leading-relaxed">
  392.                                                 <p>有楽町線 銀座一丁目駅 10番出口より徒歩5分</p>
  393.                                                 <p>都営浅草線 宝町駅 A3出口より徒歩4分</p>
  394.                                                 <p>銀座線 京橋駅 2番出口より徒歩5分</p>
  395.                                                 <p>銀座線/日比谷線/丸の内線 銀座駅 A13出口より徒歩9分</p>
  396.                                                 <p>JR山手線・京浜東北線 有楽町駅 京橋口より徒歩9分</p>
  397.                                             </td>
  398.                                         </tr>
  399.                                         <tr class="w-full md:flex md:flex-col gap-y-1 pb-4 md:pb-8">
  400.                                             <td class="align-top w-[246px] pr-2 pb-6 md:pb-0 md:font-bold">お車でお越しの方へ</td>
  401.                                             <td class="pb-6 md:pb-0 flex flex-col gap-y-1 leading-relaxed">
  402.                                                 <p>駐車場をご利用の方には、割引サービスをご用意しております。詳しくは、ご予約の際にスタッフにご確認ください。</p>
  403.                                                 <p>※当店で5,000円以上お買い上げのお客様が対象となります。</p>
  404.                                                 <p>※ショールームがあるビルは駐車場がございません。</p>
  405.                                             </td>
  406.                                         </tr>
  407.                                         <tr class="w-full md:flex md:flex-col gap-y-1">
  408.                                             <td class="w-[238px] pr-2 md:font-bold">ご予約について</td>
  409.                                             <td class="leading-relaxed">下記の予約フォームまたはお電話にてご予約ください。</td>
  410.                                         </tr>
  411.                                     </tbody>
  412.                                 </table>
  413.                             </div>
  414.                             {# 予約枠 #}
  415.                             <div class="flex flex-col items-center mb-5 md:mb-3">
  416.                                 <div class="flex gap-x-4 items-center justify-center mb-5 md:mb-3">
  417.                                     <hr class="w-8 md:w-5 h-[1px] bg-black border-none">
  418.                                     <h4 class="text-2xl md:text-lg">予約枠</h4>
  419.                                     <hr class="w-8 md:w-5 h-[1px] bg-black border-none">
  420.                                 </div>
  421.                                 {# 時間帯 #}
  422.                                 <div class="flex gap-x-7 md:gap-x-4">
  423.                                     <p class="py-2 px-3 border border-[#CCCCCC] text-sm text-center w-fit">10:00～</p>
  424.                                     <p class="py-2 px-3 border border-[#CCCCCC] text-sm text-center w-fit">13:30～</p>
  425.                                     <p class="py-2 px-3 border border-[#CCCCCC] text-sm text-center w-fit">16:00～</p>
  426.                                 </div>
  427.                                 <p class="text-[10px] mt-2">※水曜定休日</p>
  428.                                 <p class="text-[10px] mt-2">※当日のご予約はお電話にてお願い申し上げます</p>
  429.                             </div>
  430.                             <div
  431.                                 class="flex gap-x-8 lg:flex-col lg:gap-y-2 items-center">
  432.                                 {# フォーム #}
  433.                                 <a href="{{url('showroom_confirm')}}" class="bg-[#2D969B] flex gap-x-4 md:gap-x-3 text-white  h-[62px] w-[425px] mx-auto lg:w-[90%] md:h-[46px] items-center justify-center rounded hover">
  434.                                     <i class="fas fa-envelope fa-lg" style="color: #ffffff;"></i>
  435.                                     <p>フォームで予約</p>
  436.                                 </a>
  437.                                 {# お電話 #}
  438.                                 <a href="tel:03-5579-5671" class="bg-[#2D969B] flex flex-col text-white h-[62px] w-[425px] lg:w-[90%] mx-atuo md:h-[46px] items-center justify-center rounded hover">
  439.                                     <div class="md:hidden">
  440.                                         <p class="leading-snug">お電話での予約は下記番号まで</p>
  441.                                         <div class="flex items-center justify-center gap-2">
  442.                                             <i class="fas fa-phone fa-flip-horizontal fa-lg" style="color: #ffffff;"></i>
  443.                                             <p class="leading-snug">03-5579-5671</p>
  444.                                         </div>
  445.                                     </div>
  446.                                     <div class="hidden md:flex items-center gap-x-4 md:gap-x-3">
  447.                                         <i class="fas fa-phone fa-flip-horizontal fa-lg" style="color: #ffffff;"></i>
  448.                                         <p>電話で予約</p>
  449.                                     </div>
  450.                                 </a>
  451.                             </div>
  452.                         </div>
  453.                     </div>
  454.                     {# 横浜元町ショールーム #}
  455.                     <div class="w-full flex-col flex items-center justify-center" id="yokohama_map">
  456.                         <div class="flex gap-x-8 items-center justify-center md:gap-x-3 mb-11 md:mb-5">
  457.                             <hr class="w-8 md:w-4 h-[1px] bg-black border-none">
  458.                             <h3 class="text-[22px] tracking-[4.5px] md:text-lg">横浜元町ショールーム</h3>
  459.                             <hr class="w-8 md:w-4 h-[1px] bg-black border-none">
  460.                         </div>
  461.                         <div class="max-w-[880px] w-full">
  462.                             <div class="w-full flex flex-col gap-y-11 mb-16 md:mb-12 md:gap-y-6">
  463.                                 <table class="whitespace-nowrap text-sm pb-4 md:text-sm ml-4 md:ml-0">
  464.                                     <tbody class="w-full align-top ">
  465.                                         <tr class="w-full md:flex md:flex-col gap-y-1 pb-4">
  466.                                             <td class="w-[232px] pr-2 pb-5 md:pb-0 md:font-bold">住所</td>
  467.                                             <td class="pb-5 md:pb-0 flex flex-col gap-y-1">
  468.                                                 <p>〒231-0861</p>
  469.                                                 <p>神奈川県横浜市中区元町1-13 元町プラザ2F</p>
  470.                                             </td>
  471.                                         </tr>
  472.                                         <tr class="w-full md:flex md:flex-col gap-y-1 pb-4">
  473.                                             <td class="w-[232px] pr-2 pb-5 md:pb-0 md:font-bold">TEL</td>
  474.                                             <td class="pb-5 md:pb-0">03-5579-5671</td>
  475.                                         </tr>
  476.                                         <tr class="w-full md:flex md:flex-col gap-y-1">
  477.                                             <td class="w-[232px] pr-2 pb-5 md:pb-0 md:font-bold">営業時間</td>
  478.                                             <td class="pb-5 md:pb-0">10:30～18:00　※月曜火曜金曜定休日</td>
  479.                                         </tr>
  480.                                     </tbody>
  481.                                 </table>
  482.                                 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3250.5410809811683!2d139.64829367684192!3d35.44139674310987!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60185d21d7a47d43%3A0xa41b21170fe62dc3!2z56WI44KK44Gu6YGT5YW35bGL44G-44Gq44GLIOaoqua1nOOCt-ODp-ODvOODq-ODvOODoA!5e0!3m2!1sja!2sjp!4v1710992183382!5m2!1sja!2sjp" width="100%" height="410" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="md:w-[100vw] md:mx-[calc(50%-50vw)] md:px-[calc(50%-50vw)] md:h-[220px]"></iframe>
  483.                                 <table class="text-sm pb-4 md:text-sm ml-4 md:ml-0">
  484.                                     <tbody>
  485.                                         <tr class="md:flex md:flex-col gap-y-1 pb-4 md:pb-8">
  486.                                             <td class="align-top w-[232px] pr-2 pb-6 md:pb-0 md:font-bold">電車でお越しの方へ</td>
  487.                                             <td class="pb-6 md:pb-0 flex flex-col gap-y-1 leading-relaxed">
  488.                                                 <p>みなとみらい線 元町・中華街駅 5番出口より徒歩3分</p>
  489.                                                 <p>JR京浜東北線/横浜線　石川町駅駅より徒歩10分</p>
  490.                                             </td>
  491.                                         </tr>
  492.                                         <tr class="md:flex md:flex-col gap-y-1 pb-4 md:pb-8">
  493.                                             <td class="align-top w-[232px] pr-2 pb-6 md:pb-0 md:font-bold">お車でお越しの方へ</td>
  494.                                             <td class="pb-6 md:pb-0 flex flex-col gap-y-1 leading-relaxed">
  495.                                                 <p>駐車場をご利用の方は、無料駐車場サービスをご用意しております。詳しくは、ご予約の際にスタッフにご確認ください。</p>
  496.                                                 <p>※当店で5,000円以上お買い上げのお客様が対象となります。</p>
  497.                                             </td>
  498.                                         </tr>
  499.                                         <tr class="md:flex md:flex-col gap-y-1">
  500.                                             <td class="w-[232px] pr-2 md:font-bold">ご予約について</td>
  501.                                             <td class="leading-relaxed">下記の予約フォームまたはお電話にてご予約ください。</td>
  502.                                         </tr>
  503.                                     </tbody>
  504.                                 </table>
  505.                             </div>
  506.                             {# 予約枠 #}
  507.                             <div class="flex flex-col items-center mb-5 md:mb-3">
  508.                                 <div class="flex gap-x-4 items-center justify-center mb-5 md:mb-3">
  509.                                     <hr class="w-8 md:w-5 h-[1px] bg-black border-none">
  510.                                     <h4 class="text-2xl md:text-lg">予約枠</h4>
  511.                                     <hr class="w-8 md:w-5 h-[1px] bg-black border-none">
  512.                                 </div>
  513.                                 {# 時間帯 #}
  514.                                 <div class="flex gap-x-7 md:gap-x-4">
  515.                                     <p class="py-2 px-3 border border-[#CCCCCC] text-sm text-center w-fit">10:30～</p>
  516.                                     <p class="py-2 px-3 border border-[#CCCCCC] text-sm text-center w-fit">13:30～</p>
  517.                                     <p class="py-2 px-3 border border-[#CCCCCC] text-sm text-center w-fit">16:00～</p>
  518.                                 </div>
  519.                                 <p class="text-[10px] mt-2">月曜・火曜・金曜定休日</p>
  520.                                 <p class="text-[10px] mt-2">※当日のご予約はお電話にてお願い申し上げます</p>
  521.                             </div>
  522.                             <div
  523.                                 class="flex gap-x-8 lg:flex-col lg:gap-y-2 items-center">
  524.                                 {# フォーム #}
  525.                                 <a href="{{url('showroom_confirm')}}" class="bg-[#2D969B] flex gap-x-4 md:gap-x-3 text-white  h-[62px] w-[425px] mx-auto lg:w-[90%] md:h-[46px] items-center justify-center rounded hover">
  526.                                     <i class="fas fa-envelope fa-lg" style="color: #ffffff;"></i>
  527.                                     <p>フォームで予約</p>
  528.                                 </a>
  529.                                 {# お電話 #}
  530.                                 <a href="tel:03-5579-5671" class="bg-[#2D969B] flex flex-col text-white h-[62px] w-[425px] lg:w-[90%] mx-atuo md:h-[46px] items-center justify-center rounded hover">
  531.                                     <div class="md:hidden">
  532.                                         <p class="leading-snug">お電話での予約は下記番号まで</p>
  533.                                         <div class="flex items-center justify-center gap-2">
  534.                                             <i class="fas fa-phone fa-flip-horizontal fa-lg" style="color: #ffffff;"></i>
  535.                                             <p class="leading-snug">03-5579-5671</p>
  536.                                         </div>
  537.                                     </div>
  538.                                     <div class="hidden md:flex items-center gap-x-4 md:gap-x-3">
  539.                                         <i class="fas fa-phone fa-flip-horizontal fa-lg" style="color: #ffffff;"></i>
  540.                                         <p>電話で予約</p>
  541.                                     </div>
  542.                                 </a>
  543.                             </div>
  544.                         </div>
  545.                     </div>
  546.                 </div>
  547.             </div>
  548.             {# サポートサービス #}
  549.             <hr class="border-[#E2DFD6] max-w-[1120x] mx-auto w-full md:w-[100vw] md:mx-[calc(50%-50vw)] md:px-[calc(50%-50vw)]">
  550.             <div class="mt-20 flex flex-col w-full items-center md:mt-12">
  551.                 <a href="{{url('user_data',{'route':'about'})}}" class="mb-[72px] md:mb-14 hover">
  552.                     <img src="{{asset('assets/img/showroom/link.webp')}}" alt="祈りの道具屋まなかについてのリンク" class="w-[550px] md:w-[315px]">
  553.                 </a>
  554.                 <div class="flex flex-col gap-y-6 w-full items-center">
  555.                     <h3 class="text-[28px] md:text-lg tracking-[5.6px]">サポートサービス</h3>
  556.                     <div class="flex flex-wrap items-center justify-center text-xl lg:flex-col gap-5 whitespace-nowrap max-w-[1120px] w-full">
  557.                         <a href="{{url('user_data',{'route':'catalog'})}}" class="w-[550px] flex gap-x-10 lg:gap-x-4 bg-white md:w-full items-center shadow-[0_20px_20px_0px_rgba(0,0,0,0.08)] box-border hover">
  558.                             <img src="{{asset('assets/img/showroom/support2.webp')}}" alt="カタログお届けサービスのイメージ" class="w-[90px] h-[98px] md:w-[55px] md:h-[60px]">
  559.                             <p class="text-xl md:text-sm">カタログお届けサービス</p>
  560.                         </a>
  561.                         <a href="{{url('user_data',{'route':'pick_up_altar'})}}" class="w-[550px] flex gap-x-10 lg:gap-x-4 bg-white md:w-full items-center shadow-[0_20px_20px_0px_rgba(0,0,0,0.08)] box-border hover">
  562.                             <img src="{{asset('assets/img/showroom/support3.webp')}}" alt="仏壇引き取りサービスのイメージ" class="w-[90px] h-[98px] md:w-[55px] md:h-[60px]">
  563.                             <p class="text-xl md:text-sm">仏壇引き取りサービス</p>
  564.                         </a>
  565.                         <a href="{{url('user_data',{'route':'photo_services'})}}" class="w-[550px] flex gap-x-10 lg:gap-x-4 bg-white md:w-full items-center shadow-[0_20px_20px_0px_rgba(0,0,0,0.08)] box-border hover">
  566.                             <img src="{{asset('assets/img/showroom/support4.webp')}}" alt="コーディネート撮影サービス" class="w-[90px] h-[98px] md:w-[55px] md:h-[60px]">
  567.                             <p class="text-xl md:text-sm">コーディネート撮影サービス</p>
  568.                         </a>
  569.                     </div>
  570.                 </div>
  571.             </div>
  572.             {% set breadcrumbs = [{'name': '銀座・横浜ショールーム'}] %}
  573.             {% include('Block/breadcrumbs.twig') %}
  574.         </div>
  575.     {% endblock %}