app/template/default/Block/top_business_category.twig line 1

Open in your IDE?
  1. {% block stylesheet %}
  2.     <style>
  4.     {# メニュー例のスライド #}
  6.     .category_name_div {
  7.         display: flex;
  8.         justify-content: space-between; /* 両端寄せ */
  9.         align-items: center; /* 中央揃え（縦方向） */
  10.         line-height: 42px;
  11.         padding-left: 16px;
  12.     }
  14.     .category_name {
  15.         color: #000;
  16.         font-size: 18px;
  17.         font-style: normal;
  18.         font-weight: 700;
  19.         text-align: left; /* 明示的に左寄せ */
  20.         margin-top: 0px;
  21.         margin-bottom: 0px;
  22.     }
  24.     .image-grid .business_icon {
  25.         width: 64px;
  26.         height: 44px;
  27.         opacity: 1;
  28.     }
  30.     .image-grid .business_label {
  31.         font-weight: 700;
  32.         font-size: 16px;
  33.         leading-trim: NONE;
  34.         line-height: 16px;
  35.         letter-spacing: 0%;
  36.         color: #000000;
  37.     }
  39.     .business_frame {
  40.         display: flex;
  41.         align-items: center; /* 中央揃え（垂直方向） */
  42.         text-decoration: none; /* リンクの下線を消す */
  43.         width: 259px;
  44.         height: 72px;
  45.         gap: 10px;
  46.         opacity: 1;
  47.         padding-top: 14px;
  48.         padding-right: 16px;
  49.         padding-bottom: 14px;
  50.         padding-left: 16px;
  51.         border-radius: 8px;
  52.         border-width: 1px;
  53.         column-span: 1;
  54.     }
  55.     </style>
  57. {% endblock %}
  58.  
  59. {% block javascript %}
  60.     <script>
  61.     </script>
  62. {% endblock javascript %}
  64. <section style="margin: 0px; padding-left: 0px; padding-bottom: 80px; padding-top: 80px;">
  65.     {# 業態から探す #}
  66.     <div class="" style="margin-bottom:48px; padding-left: 30px; padding-right: 30px; ">
  67.         <img src="{{ asset('assets/img/top_page/text_3.png', 'user_data') }}" alt="業態から探す" style="width: 450px;">    
  68.     </div>
  69.     <div class="image-grid row" style="">
  70.         <a href="{{ url('product_list', {'category_id': 23}) }}" class="business_frame">
  71.             <img src="{{ asset('assets/img/top_shop_type_banner/category_washoku_1.webp', 'user_data') }}" alt="業態｜和食店">
  72.         </a>
  73.         <a href="{{ url('product_list', {'category_id': 24}) }}" class="business_frame">
  74.             <img src="{{ asset('assets/img/top_shop_type_banner/category_yoshoku_1.webp', 'user_data') }}" alt="業態｜洋食店">
  75.         </a>
  76.         <a href="{{ url('product_list', {'category_id': 7}) }}" class="business_frame">
  77.             <img src="{{ asset('assets/img/top_shop_type_banner/category_izakaya_1.webp', 'user_data') }}" alt="業態｜居酒屋">
  78.         </a>
  79.         <a href="{{ url('product_list', {'category_id': 14}) }}" class="business_frame">
  80.             <img src="{{ asset('assets/img/top_shop_type_banner/category_bar_1.webp', 'user_data') }}" alt="業態｜バル・バー">
  81.         </a>
  82.     </div>
  83.     <div class="image-grid row" style="">
  84.         <a href="{{ url('product_list', {'category_id': 8}) }}" class="business_frame">
  85.             <img src="{{ asset('assets/img/top_shop_type_banner/category_cafe_1.webp', 'user_data') }}" alt="業態｜カフェ">
  86.         </a>
  87.         <a href="{{ url('product_list', {'category_id': 13}) }}" class="business_frame">
  88.             <img src="{{ asset('assets/img/top_shop_type_banner/category_korea_1.webp', 'user_data') }}" alt="業態｜韓国・焼肉">
  89.         </a>
  90.         <a href="{{ url('product_list', {'category_id': 25}) }}" class="business_frame">
  91.             <img src="{{ asset('assets/img/top_shop_type_banner/category_china_1.webp', 'user_data') }}" alt="業態｜中華料理">
  92.         </a>
  93.         <a href="{{ url('product_list', {'category_id': 10}) }}" class="business_frame">
  94.             <img src="{{ asset('assets/img/top_shop_type_banner/category_italian_1.webp', 'user_data') }}" alt="業態｜イタリアン">
  95.         </a>
  96.     </div>
  97.     <div class="image-grid row second_row" style="">
  98.         <a href="{{ url('product_list', {'category_id': 11}) }}" class="business_frame">
  99.             <img src="{{ asset('assets/img/top_shop_type_banner/category_kitchen_1.webp', 'user_data') }}" alt="業態｜キッチンカー">
  100.         </a>
  101.         <a href="{{ url('product_list', {'category_id': 18}) }}" class="business_frame">
  102.             <img src="{{ asset('assets/img/top_shop_type_banner/category_rice_1.webp', 'user_data') }}" alt="業態｜〆・ご飯もの">
  103.         </a>
  104.         <a href="{{ url('product_list', {'category_id': 17}) }}" class="business_frame">
  105.             <img src="{{ asset('assets/img/top_shop_type_banner/category_sweet_1.webp', 'user_data') }}" alt="業態｜スイーツ">
  106.         </a>
  107.         <a href="{{ url('product_list', {'category_id': 26}) }}" class="business_frame">
  108.             <img src="{{ asset('assets/img/top_shop_type_banner/category_drink_1.webp', 'user_data') }}" alt="業態｜ドリンク">
  109.         </a>
  110.     </div>
  111. </section>