app/template/biotop/Block/top_category.twig line 1

Open in your IDE?
  1. <section class="top_inner">
  2.     <section id="top_category">
  3.         <div class="wrap">
  4.             <div class="common_ttl_box">
  5.                 <p class="en_ttl f_cent">Category</p>
  6.                 <h2 class="ttl">ビオトープの商品カテゴリー</h2>
  7.                 <p class="ttl_comment">大阪難波・心斎橋・北新地の花屋biotop(ビオトープ)では<br>豊富な種類からあなたがイメージしているものにぴったりなお花を見つけることができます。</p>
  8.             </div>
  9.             <div class="category_box pc">
  10.                 <ul>
  11.                     <li>
  12.                         <a href="/products/list?category_id=23" class="link" style="background-image: url(/html/user_data/assets/img/common/top_category_flowerstand.jpg);">
  13.                             <span class="mask"></span>
  14.                             <div class="text_box">
  15.                                 <p class="comment">お祝いの空間を華やかに飾る</p>
  16.                                 <h3 class="theme">フラワースタンド</h3>
  17.                             </div>
  18.                         </a>
  19.                     </li>
  20.                     <li>
  21.                         <a href="/products/list?category_id=24" class="link" style="background-image: url(/html/user_data/assets/img/common/top_category_balloonstand.jpg);">
  22.                             <span class="mask"></span>
  23.                             <div class="text_box">
  24.                                 <p class="comment">離れたところからでも目立つ！</p>
  25.                                 <h3 class="theme">バルーンスタンド</h3>
  26.                             </div>
  27.                         </a>
  28.                     </li>
  29.                     <li>
  30.                         <a href="/products/list?category_id=20" class="link" style="background-image: url(/html/user_data/assets/img/common/top_category_kotyouran.jpg);">
  31.                             <span class="mask"></span>
  32.                             <div class="text_box">
  33.                                 <p class="comment">一級品のみご提供</p>
  34.                                 <h3 class="theme">胡蝶蘭</h3>
  35.                             </div>
  36.                         </a>
  37.                     </li>
  38.                     <li>
  39.                         <a href="/products/list?category_id=19" class="link" style="background-image: url(/html/user_data/assets/img/common/top_category_kanyou.jpg);">
  40.                             <span class="mask"></span>
  41.                             <div class="text_box">
  42.                                 <p class="comment">オフィスやお部屋に癒しを</p>
  43.                                 <h3 class="theme">観葉植物</h3>
  44.                             </div>
  45.                         </a>
  46.                     </li>
  47.                     <li>
  48.                         <a href="/products/list?category_id=25" class="link" style="background-image: url(/html/user_data/assets/img/common/top_category_flowerarange.jpg);">
  49.                             <span class="mask"></span>
  50.                             <div class="text_box">
  51.                                 <p class="comment">あなただけの「世界に一つのお花」</p>
  52.                                 <h3 class="theme">フラワーアレンジメント</h3>
  53.                             </div>
  54.                         </a>
  55.                     </li>
  56.                     <li>
  57.                         <a href="/products/list?category_id=26" class="link" style="background-image: url(/html/user_data/assets/img/common/top_category_nuigurumi.jpg);">
  58.                             <span class="mask"></span>
  59.                             <div class="text_box">
  60.                                 <p class="comment">いつものアレンジに遊び心を！</p>
  61.                                 <h3 class="theme">バルーン&ぬいぐるみ<br>アレンジメント</h3>
  62.                             </div>
  63.                         </a>
  64.                     </li>
  65.                     <li>
  66.                         <a href="/products/list?category_id=28" class="link" style="background-image: url(/html/user_data/assets/img/common/top_category_bouquet.jpg);">
  67.                             <span class="mask"></span>
  68.                             <div class="text_box">
  69.                                 <p class="comment">ご用途に合わせてお花を束ねます</p>
  70.                                 <h3 class="theme">花束(フラワーブーケ)</h3>
  71.                             </div>
  72.                         </a>
  73.                     </li>
  74.                     <li>
  75.                         <a href="/products/list?category_id=27" class="link" style="background-image: url(/html/user_data/assets/img/common/top_category_balloonnuigurumi.jpg);">
  76.                             <span class="mask"></span>
  77.                             <div class="text_box">
  78.                                 <p class="comment">いつもの花束に遊び心を！</p>
  79.                                 <h3 class="theme">バルーン&ぬいぐるみ花束</h3>
  80.                             </div>
  81.                         </a>
  82.                     </li>
  83.                     <li>
  84.                         <a href="/products/list?category_id=58" class="link" style="background-image: url(/html/user_data/assets/img/common/top_category_memorial.jpg);">
  85.                             <span class="mask"></span>
  86.                             <div class="text_box">
  87.                                 <p class="comment">心に響く花々、感謝と共に</p>
  88.                                 <h3 class="theme">メモリアルフラワー</h3>
  89.                             </div>
  90.                         </a>
  91.                     </li>
  92.                     <li>
  93.                         <a href="/products/list?category_id=30" class="link" style="background-image: url(/html/user_data/assets/img/common/top_category_rose.jpg);">
  94.                             <span class="mask"></span>
  95.                             <div class="text_box">
  96.                                 <p class="comment">愛と美を象徴する</p>
  97.                                 <h3 class="theme">バラ</h3>
  98.                             </div>
  99.                         </a>
  100.                     </li>
  101.                     <li>
  102.                         <a href="/user_data/surprise" class="link" style="background-image: url(/html/user_data/assets/img/common/top_category_surprise.jpg);">
  103.                             <span class="mask"></span>
  104.                             <div class="text_box">
  105.                                 <p class="comment">誕生日や記念日に相手はビックリ！</p>
  106.                                 <h3 class="theme">サプライズ装飾・ホテル装飾</h3>
  107.                             </div>
  108.                         </a>
  109.                     </li>
  110.                     <li>
  111.                         <a href="/products/list?category_id=18" class="link" style="background-image: url(/html/user_data/assets/img/common/top_category_balloonsoushoku.jpg);">
  112.                             <span class="mask"></span>
  113.                             <div class="text_box">
  114.                                 <p class="comment">店内・エントランス等を華やかに！</p>
  115.                                 <h3 class="theme">バルーン装飾</h3>
  116.                             </div>
  117.                         </a>
  118.                     </li>
  119.                     <li>
  120.                         <a href="/products/list?category_id=17" class="link" style="background-image: url(/html/user_data/assets/img/common/top_category_tower.jpg);">
  121.                             <span class="mask"></span>
  122.                             <div class="text_box">
  123.                                 <p class="comment">レストランやBARで素敵な演出！</p>
  124.                                 <h3 class="theme">シャンパンタワー</h3>
  125.                             </div>
  126.                         </a>
  127.                     </li>
  128.                     <li>
  129.                         <a href="/products/list?category_id=15" class="link" style="background-image: url(/html/user_data/assets/img/common/top_category_arch.jpg);">
  130.                             <span class="mask"></span>
  131.                             <div class="text_box">
  132.                                 <p class="comment">入り口を豪華に飾り付け！</p>
  133.                                 <h3 class="theme">アーチ</h3>
  134.                             </div>
  135.                         </a>
  136.                     </li>
  137.                     <li>
  138.                         <a href="/products/list?category_id=14" class="link" style="background-image: url(/html/user_data/assets/img/common/top_category_blizzard.jpg);">
  139.                             <span class="mask"></span>
  140.                             <div class="text_box">
  141.                                 <p class="comment">枯れにくい生花！長く飾れます！</p>
  142.                                 <h3 class="theme">プリザーブドフラワー</h3>
  143.                             </div>
  144.                         </a>
  145.                     </li>
  146.                     <li>
  147.                         <a href="/products/list?category_id=37" class="link" style="background-image: url(/html/user_data/assets/img/common/top_category_box.jpg);">
  148.                             <span class="mask"></span>
  149.                             <div class="text_box">
  150.                                 <p class="comment">贈り物や記念日に最適</p>
  151.                                 <h3 class="theme">ボックスフラワー</h3>
  152.                             </div>
  153.                         </a>
  154.                     </li>
  155.                     <li>
  156.                         <a href="/products/list?category_id=32" class="link" style="background-image: url(/html/user_data/assets/img/common/rose_bear.png);">
  157.                             <span class="mask"></span>
  158.                             <div class="text_box">
  159.                                 <p class="comment">届いてすぐにお飾りいただけます！</p>
  160.                                 <h3 class="theme">ローズベアー</h3>
  161.                             </div>
  162.                         </a>
  163.                     </li>
  164.                 </ul>
  165.             </div>
  166.             <div class="category_sp_box js_category_slider_sp sp">
  167.                 <ul>
  168.                     <li>
  169.                         <a href="/products/list?category_id=23" class="link">
  170.                             <div class="img">
  171.                                 <img src="/html/user_data/assets/img/common/top_category_flowerstand.jpg" alt="">
  172.                             </div>
  173.                             <div class="text_box">
  174.                                 <p class="comment">お祝いの空間を華やかに飾る</p>
  175.                                 <h3 class="theme">フラワースタンド</h3>
  176.                             </div>
  177.                         </a>
  178.                     </li>
  179.                     <li>
  180.                         <a href="/products/list?category_id=24" class="link">
  181.                             <div class="img">
  182.                                 <img src="/html/user_data/assets/img/common/top_category_balloonstand.jpg" alt="">
  183.                             </div>
  184.                             <div class="text_box">
  185.                                 <p class="comment">離れたところからでも目立つ！</p>
  186.                                 <h3 class="theme">バルーンスタンド</h3>
  187.                             </div>
  188.                         </a>
  189.                     </li>
  190.                     <li>
  191.                         <a href="/products/list?category_id=20" class="link">
  192.                             <div class="img">
  193.                                 <img src="/html/user_data/assets/img/common/top_category_kotyouran.jpg" alt="">
  194.                             </div>
  195.                             <div class="text_box">
  196.                                 <p class="comment">一級品のみご提供</p>
  197.                                 <h3 class="theme">胡蝶蘭</h3>
  198.                             </div>
  199.                         </a>
  200.                     </li>
  201.                     <li>
  202.                         <a href="/products/list?category_id=19" class="link">
  203.                             <div class="img">
  204.                                 <img src="/html/user_data/assets/img/common/top_category_kanyou.jpg" alt="">
  205.                             </div>
  206.                             <div class="text_box">
  207.                                 <p class="comment">オフィスやお部屋に癒しを</p>
  208.                                 <h3 class="theme">観葉植物</h3>
  209.                             </div>
  210.                         </a>
  211.                     </li>
  212.                     <li>
  213.                         <a href="/products/list?category_id=25" class="link">
  214.                             <div class="img">
  215.                                 <img src="/html/user_data/assets/img/common/top_category_flowerarange.jpg" alt="">
  216.                             </div>
  217.                             <div class="text_box">
  218.                                 <p class="comment">あなただけの「世界に一つのお花」</p>
  219.                                 <h3 class="theme">フラワーアレンジメント</h3>
  220.                             </div>
  221.                         </a>
  222.                     </li>
  223.                     <li>
  224.                         <a href="/products/list?category_id=26" class="link">
  225.                             <div class="img">
  226.                                 <img src="/html/user_data/assets/img/common/top_category_nuigurumi.jpg" alt="">
  227.                             </div>
  228.                             <div class="text_box">
  229.                                 <p class="comment">いつものアレンジに遊び心を！</p>
  230.                                 <h3 class="theme">バルーン&ぬいぐるみ<br>アレンジメント</h3>
  231.                             </div>
  232.                         </a>
  233.                     </li>
  234.                     <li>
  235.                         <a href="/products/list?category_id=28" class="link">
  236.                             <div class="img">
  237.                                 <img src="/html/user_data/assets/img/common/top_category_bouquet.jpg" alt="">
  238.                             </div>
  239.                             <div class="text_box">
  240.                                 <p class="comment">ご用途に合わせてお花を束ねます</p>
  241.                                 <h3 class="theme">花束(フラワーブーケ)</h3>
  242.                             </div>
  243.                         </a>
  244.                     </li>
  245.                     <li>
  246.                         <a href="/products/list?category_id=27" class="link">
  247.                             <div class="img">
  248.                                 <img src="/html/user_data/assets/img/common/top_category_balloonnuigurumi.jpg" alt="">
  249.                             </div>
  250.                             <div class="text_box">
  251.                                 <p class="comment">いつもの花束に遊び心を！</p>
  252.                                 <h3 class="theme">バルーン&ぬいぐるみ花束</h3>
  253.                             </div>
  254.                         </a>
  255.                     </li>
  256.                     <li>
  257.                         <a href="/products/list?category_id=58" class="link">
  258.                             <div class="img">
  259.                                 <img src="/html/user_data/assets/img/common/top_category_memorial.jpg" alt="">
  260.                             </div>
  261.                             <div class="text_box">
  262.                                 <p class="comment">心に響く花々、感謝と共に</p>
  263.                                 <h3 class="theme">メモリアルフラワー</h3>
  264.                             </div>
  265.                         </a>
  266.                     </li>
  267.                     <li>
  268.                         <a href="/products/list?category_id=30" class="link">
  269.                             <div class="img">
  270.                                 <img src="/html/user_data/assets/img/common/top_category_rose.jpg" alt="">
  271.                             </div>
  272.                             <div class="text_box">
  273.                                 <p class="comment">愛と美を象徴する</p>
  274.                                 <h3 class="theme">バラ</h3>
  275.                             </div>
  276.                         </a>
  277.                     </li>
  278.                     <li>
  279.                         <a href="/user_data/surprise" class="link">
  280.                             <div class="img">
  281.                                 <img src="/html/user_data/assets/img/common/top_category_surprise.jpg" alt="">
  282.                             </div>
  283.                             <div class="text_box">
  284.                                 <p class="comment">誕生日や記念日に相手はビックリ！</p>
  285.                                 <h3 class="theme">サプライズ装飾<br>・ホテル装飾</h3>
  286.                             </div>
  287.                         </a>
  288.                     </li>
  289.                     <li>
  290.                         <a href="/products/list?category_id=18" class="link">
  291.                             <div class="img">
  292.                                 <img src="/html/user_data/assets/img/common/top_category_balloonsoushoku.jpg" alt="">
  293.                             </div>
  294.                             <div class="text_box">
  295.                                 <p class="comment">店内・エントランス等を華やかに！</p>
  296.                                 <h3 class="theme">バルーン装飾</h3>
  297.                             </div>
  298.                         </a>
  299.                     </li>
  300.                     <li>
  301.                         <a href="/products/list?category_id=17" class="link">
  302.                             <div class="img">
  303.                                 <img src="/html/user_data/assets/img/common/top_category_tower.jpg" alt="">
  304.                             </div>
  305.                             <div class="text_box">
  306.                                 <p class="comment">レストランやBARで素敵な演出！</p>
  307.                                 <h3 class="theme">シャンパンタワー</h3>
  308.                             </div>
  309.                         </a>
  310.                     </li>
  311.                     <li>
  312.                         <a href="/products/list?category_id=15" class="link">
  313.                             <div class="img">
  314.                                 <img src="/html/user_data/assets/img/common/top_category_arch.jpg" alt="">
  315.                             </div>
  316.                             <div class="text_box">
  317.                                 <p class="comment">入り口を豪華に飾り付け！</p>
  318.                                 <h3 class="theme">アーチ</h3>
  319.                             </div>
  320.                         </a>
  321.                     </li>
  322.                     <li>
  323.                         <a href="/products/list?category_id=14" class="link">
  324.                             <div class="img">
  325.                                 <img src="/html/user_data/assets/img/common/top_category_blizzard.jpg" alt="">
  326.                             </div>
  327.                             <div class="text_box">
  328.                                 <p class="comment">枯れにくい生花！長く飾れます！</p>
  329.                                 <h3 class="theme">プリザーブドフラワー</h3>
  330.                             </div>
  331.                         </a>
  332.                     </li>
  333.                     <li>
  334.                         <a href="/products/list?category_id=37" class="link">
  335.                             <div class="img">
  336.                                 <img src="/html/user_data/assets/img/common/top_category_box.jpg" alt="">
  337.                             </div>
  338.                             <div class="text_box">
  339.                                 <p class="comment">贈り物や記念日に最適</p>
  340.                                 <h3 class="theme">ボックスフラワー</h3>
  341.                             </div>
  342.                         </a>
  343.                     </li>
  344.                     <li>
  345.                         <a href="/products/list?category_id=32" class="link">
  346.                             <div class="img">
  347.                                 <img src="/html/user_data/assets/img/common/rose_bear.png" alt="">
  348.                             </div>
  349.                             <div class="text_box">
  350.                                 <p class="comment">届いてすぐにお飾りいただけます！</p>
  351.                                 <h3 class="theme">ローズベアー</h3>
  352.                             </div>
  353.                         </a>
  354.                     </li>
  355.                 </ul>
  356.             </div>
  357.             <!-- <div class="top_banner_sec">
  358.                 <a href="/user_data/visit" target="_blank" class="img">
  359.                     <img class="pc" src="/html/user_data/assets/img/common/biotop_banner_pc.png" alt="WEBでカンタン 来店予約">
  360.                     <img class="sp" src="/html/user_data/assets/img/common/biotop_banner_sp.png" alt="WEBでカンタン 来店予約">
  361.                 </a>
  362.             </div> -->
  363.         </div>
  364.     </section>
  365. </section>