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

Open in your IDE?
  1. {% block stylesheet %}
  2.     <style>
  3.         .map-img img {
  4.             display: block;
  5.             margin-left: auto;
  6.             margin-right: auto;
  7.             width: 1300px;
  8.         }
  10.         .map-mix {
  11.             position: relative;
  12.         }
  14.         .serviceMap__li {
  15.             width: 30%;
  16.             margin-right: 5%;
  17.             margin-bottom: 5%;
  18.             float: left;
  19.             display: block;
  20.         }
  22.         .serviceMap__ul {
  23.             padding: 0;
  24.             display: block;
  25.             width: 100%;
  26.             min-height: 200px;
  27.             list-style: none;
  28.         }
  30.         .region-category {
  31.             display: inline-block;
  32.             margin: 8px;
  33.         }
  35.         #searchCategoryModalList ul {
  36.             padding: unset;
  37.         }
  39.         .category-group {
  40.             display: inline-block;
  41.             width: 100%;
  42.         }
  44.         .category-rhyme {
  45.             display: inline-block;
  46.             float: left;
  47.             width: 5%;
  48.             font-weight: 600;
  49.             margin: 8px 0;
  50.             font-size: 15px;
  51.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  52.             color: #333333;
  53.         }
  55.         .category-rhyme-content {
  56.             display: inline-block;
  57.             float: right;
  58.             width: 95%;
  59.         }
  61.         .mix-cate {
  62.             padding: 2rem;
  63.         }
  65.         .category-first {
  66.             color: #333333;
  67.             text-decoration: underline;
  68.             font-size: 15px;
  69.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  70.             font-style: normal;
  71.             font-weight: 300;
  72.             line-height: 24px;
  73.         }
  75.         .cate-close {
  76.             margin: auto;
  77.             border: unset;
  78.             background: unset;
  79.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  80.             font-style: normal;
  81.             font-weight: 300;
  82.             font-size: 15px;
  83.             line-height: 24px;
  84.             text-align: center;
  85.             color: #333333;
  86.         }
  88.         .pinc {
  89.             width: 13px !important;
  90.             height: 17px;
  91.             margin-top: -3px;
  92.             flex: none;
  93.             order: 0;
  94.             flex-grow: 0;
  95.         }
  97.         .fx-17 {
  98.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  99.             font-size: 17px;
  100.             line-height: 24px;
  101.             font-weight: 600;
  102.             color: #333333;
  103.         }
  105.         .modal-dialog,
  106.         .modal-content {
  107.             height: 320px;
  108.             width: 748px;
  109.             padding: 48px 48px 24px 48px;
  110.             border-radius: unset;
  111.             border: unset;
  112.         }
  114.         .modal-header {
  115.             padding: 5px;
  116.             height: 35px;
  117.         }
  119.         .modal-body {
  120.             overflow-y: auto;
  121.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  122.             color: #333333;
  123.         }
  125.         .modal-footer {
  126.             padding: 5px;
  127.             border: unset;
  128.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  129.             color: #333333;
  130.         }
  132.         .modal-header .btn-close-img {
  133.             padding: unset;
  134.             margin: -11rem -3rem -0rem auto;
  135.             color: white;
  136.             width: 32px;
  137.             height: 32px;
  138.             flex: none;
  139.             order: 0;
  140.             flex-grow: 0;
  141.             border: none;
  142.             background: none;
  143.         }
  145.         .color-unset {
  146.             color: unset;
  147.         }
  149.         @media (max-width: 768px) {
  151.             .serviceMap__btn {
  152.                 display: block;
  153.                 width: 100%;
  154.                 vertical-align: top;
  155.                 padding: 6px 2px;
  156.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  157.                 font-weight: 600;
  158.                 line-height: 25px;
  159.                 font-size: 15px;
  160.                 color: #333333;
  161.                 cursor: pointer;
  162.             }
  164.             .serviceMap__btn.-top {
  165.                 background: #2379E7;
  166.                 color: #FFFFFF;
  167.                 border: none;
  168.                 border-top-left-radius: 8px;
  169.                 border-top-right-radius: 8px;
  170.             }
  172.             .serviceMap__li {
  173.                 width: 90%;
  174.                 display: block;
  175.                 background: #8FC0FF;
  176.                 border-radius: 8px;
  177.                 margin: 3% 5%;
  178.             }
  180.             .serviceMap__inner {
  181.                 background: url(../../../../html/template/default/assets/img/common/map_sp.svg);
  182.                 background-image: url(../../../../html/template/default/assets/img/common/map_sp.svg);
  183.                 background-position-x: 50%;
  184.                 background-position-y: 10%;
  185.                 background-size: 335.4px;
  186.                 background-repeat: no-repeat;
  187.                 background-attachment: initial;
  188.                 background-origin: initial;
  189.                 background-clip: initial;
  190.                 position: relative;
  191.             }
  193.             .serviceMap__ul {
  194.                 padding: 0;
  195.                 display: block;
  196.                 width: 100%;
  197.                 min-height: 500px;
  198.                 list-style: none;
  199.             }
  201.             .serviceMap__li.-p0 {
  202.                 margin: 335px 5% 3%;
  203.             }
  205.             .serviceMap__ul.-mid {
  206.                 opacity: 1;
  207.                 display: block;
  208.                 position: static;
  209.                 min-height: 50px;
  210.             }
  212.             .serviceMap__li.-mid {
  213.                 width: 22.5%;
  214.                 text-align: center;
  215.                 margin: 2% 1%;
  216.                 background: #fff;
  217.                 border-radius: 4px;
  218.             }
  220.             .map-title {
  221.                 text-align: center;
  222.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  223.                 font-weight: 600;
  224.                 font-size: 22px;
  225.                 line-height: 0;
  226.                 color: #333333;
  227.                 position: absolute;
  228.                 left: 0;
  229.                 right: 0;
  230.                 top: -25px;
  231.             }
  233.             .map-line {
  234.                 border-top: 3px solid #2379E7;
  235.                 position: absolute;
  236.                 top: 20px;
  237.                 width: 40px;
  238.                 left: 0;
  239.                 right: 0;
  240.                 margin: auto;
  241.                 border-radius: 8px;
  242.             }
  244.             .mix-cate {
  245.                 padding: 1rem;
  246.             }
  248.             .modal-dialog,
  249.             .modal-content {
  250.                 height: 298px;
  251.                 width: 383px;
  252.                 padding: 24px 24px 12px 24px;
  253.                 border-radius: unset;
  254.                 border: unset;
  255.                 margin: auto;
  256.             }
  258.             .modal-header .btn-close-img {
  259.                 padding: unset;
  260.                 margin: -8rem -1.5rem -0rem auto;
  261.                 color: #FFFFFF;
  262.             }
  264.             .serviceMap__li.-mid:nth-child(1), .serviceMap__li.-mid:nth-child(5) {
  265.                 margin-left: 2%;
  266.             }
  268.             .serviceMap__li.-mid:nth-child(4), .serviceMap__li.-mid:nth-child(8) {
  269.                 margin-right: 2%;
  270.             }
  272.             .serviceMap__li.-mid:nth-child(5), .serviceMap__li.-mid:nth-child(6), .serviceMap__li.-mid:nth-child(7), .serviceMap__li.-mid:nth-child(8) {
  273.                 margin-top: 0;
  274.             }
  276.             .map-invisible {
  277.                 position: relative;
  278.                 width: 335.4px;
  279.                 height: 320px;
  280.                 left: 50%;
  281.                 margin-right: -50%;
  282.                 transform: translate(-50%, 0%);
  283.             }
  285.             .light-flip {
  286.                 position: absolute;
  287.             }
  289.             .light-invisible-0 {
  290.                 width: 69px;
  291.                 height: 46px;
  292.                 right: 2px;
  293.                 top: 109px;
  294.             }
  296.             .light-invisible-1 {
  297.                 width: 56px;
  298.                 height: 28px;
  299.                 right: 26px;
  300.                 top: 206px;
  301.             }
  303.             .light-invisible-2 {
  304.                 width: 69px;
  305.                 height: 46px;
  306.                 right: 140px;
  307.                 top: 101px;
  308.             }
  310.             .light-invisible-3 {
  311.                 width: 57px;
  312.                 height: 28px;
  313.                 right: 108px;
  314.                 top: 268px;
  315.             }
  317.             .light-invisible-4 {
  318.                 width: 57px;
  319.                 height: 28px;
  320.                 right: 179px;
  321.                 top: 268px;
  322.             }
  324.             .light-invisible-5 {
  325.                 width: 57px;
  326.                 height: 28px;
  327.                 right: 196px;
  328.                 top: 161px;
  329.             }
  331.             .light-invisible-6 {
  332.                 width: 57px;
  333.                 height: 28px;
  334.                 right: 249px;
  335.                 top: 268px;
  336.             }
  338.             .light-invisible-7 {
  339.                 width: 69px;
  340.                 height: 46px;
  341.                 right: 266px;
  342.                 top: 145px;
  343.             }
  344.         }
  346.         @media (min-width: 768px) {
  348.             #region {
  349.                 margin-top: 80px;
  350.             }
  352.             .serviceMap__btn {
  353.                 display: block;
  354.                 width: 100%;
  355.                 vertical-align: top;
  356.             }
  358.             .serviceMap__li {
  359.                 width: 30%;
  360.                 margin-right: 5%;
  361.                 margin-bottom: 5%;
  362.                 float: left;
  363.                 display: block;
  364.             }
  366.             .serviceMap__inner {
  367.                 background: url(../../../../html/template/default/assets/img/common/map.svg);
  368.                 background-image: url(../../../../html/template/default/assets/img/common/map.svg);
  369.                 background-position-x: 40%;
  370.                 background-position-y: 0%;
  371.                 background-size: 80%;
  372.                 background-repeat: no-repeat;
  373.                 background-attachment: initial;
  374.                 background-origin: initial;
  375.                 background-clip: initial;
  376.                 position: relative;
  377.             }
  379.             .serviceMap__ul {
  380.                 padding: 0;
  381.                 display: block;
  382.                 width: 100%;
  383.                 min-height: 200px;
  384.                 list-style: none;
  385.             }
  387.             .serviceMap {
  388.                 width: 768px;
  389.                 margin: auto;
  390.             }
  392.             .serviceMap__ul.-top {
  393.                 position: static;
  394.                 background: none;
  395.                 height: 460px;
  396.                 margin: 0 auto;
  397.             }
  399.             .serviceMap__li.-top {
  400.                 width: 110px;
  401.                 border-radius: 5px;
  402.                 float: none;
  403.                 margin: 0 auto;
  404.                 padding: 2px 2px 1px;
  405.             }
  407.             .serviceMap__btn.-top {
  408.                 display: none;
  409.             }
  411.             .serviceMap__ul.-mid {
  412.                 opacity: 1;
  413.                 display: block;
  414.                 position: static;
  415.                 min-height: 50px;
  416.             }
  418.             .serviceMap__li.-mid {
  419.                 width: 38.5%;
  420.                 margin-right: 1%;
  421.             }
  423.             .serviceMap__li.-mid:nth-of-type(2n) {
  424.                 margin-right: 0;
  425.             }
  427.             .serviceMap__btn.-mid {
  428.                 color: #333333;
  429.                 font-size: 10px;
  430.                 padding: 3px 0;
  431.                 text-align: center;
  432.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  433.                 font-weight: 600;
  434.                 line-height: 12px;
  435.                 height: auto;
  436.                 cursor: pointer;
  437.             }
  439.             .serviceMap__li.-p0 {
  440.                 position: absolute;
  441.                 bottom: 209px;
  442.                 right: 70px;
  443.             }
  445.             .serviceMap__li.-p1 {
  446.                 position: absolute;
  447.                 right: 100px;
  448.                 bottom: 75px;
  449.             }
  451.             .serviceMap__li.-p2 {
  452.                 position: absolute;
  453.                 bottom: 251px;
  454.                 left: 317px;
  455.             }
  457.             .serviceMap__li.-p3 {
  458.                 position: absolute;
  459.                 right: 435px;
  460.                 bottom: 30px;
  461.             }
  463.             .serviceMap__li.-p4 {
  464.                 position: absolute;
  465.                 right: 336px;
  466.                 bottom: 10px;
  467.             }
  469.             .serviceMap__li.-p5 {
  470.                 position: absolute;
  471.                 bottom: 251PX;
  472.                 left: 218PX;
  473.             }
  475.             .serviceMap__li.-p6 {
  476.                 position: absolute;
  477.                 bottom: 30px;
  478.                 left: 421px;
  479.             }
  481.             .serviceMap__li.-p7 {
  482.                 position: absolute;
  483.                 bottom: 95px;
  484.                 left: 60px;
  485.             }
  487.             .map-title {
  488.                 text-align: center;
  489.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  490.                 font-weight: 600;
  491.                 font-size: 24px;
  492.                 line-height: 0;
  493.                 color: #333333;
  494.                 position: absolute;
  495.                 left: 0;
  496.                 right: 0;
  497.                 top: 20px;
  498.             }
  500.             .map-line {
  501.                 border-top: 3px solid #2379E7;
  502.                 position: absolute;
  503.                 top: 70px;
  504.                 width: 40px;
  505.                 left: 0;
  506.                 right: 0;
  507.                 margin: auto;
  508.                 border-radius: 8px;
  509.             }
  510.         }
  512.         @media (min-width: 1300px) {
  514.             .serviceMap__btn {
  515.                 display: block;
  516.                 width: 100%;
  517.                 vertical-align: top;
  518.             }
  520.             .serviceMap__li {
  521.                 width: 30%;
  522.                 margin-right: 5%;
  523.                 margin-bottom: 5%;
  524.                 float: left;
  525.                 display: block;
  526.             }
  528.             .serviceMap__inner {
  529.                 background: url(../../../../html/template/default/assets/img/common/map.svg);
  530.                 background-image: url(../../../../html/template/default/assets/img/common/map.svg);
  531.                 background-position-x: 40%;
  532.                 background-position-y: 0%;
  533.                 background-size: 80%;
  534.                 background-repeat: no-repeat;
  535.                 background-attachment: initial;
  536.                 background-origin: initial;
  537.                 background-clip: initial;
  538.                 position: relative;
  539.             }
  541.             .serviceMap__ul {
  542.                 padding: 0;
  543.                 display: block;
  544.                 width: 100%;
  545.                 min-height: 200px;
  546.                 list-style: none;
  547.             }
  549.             .serviceMap {
  550.                 width: 1300px;
  551.                 margin: auto;
  552.             }
  554.             .serviceMap__ul.-top {
  555.                 position: static;
  556.                 background: none;
  557.                 height: 800px;
  558.                 margin: 0 auto;
  559.             }
  561.             .serviceMap__li.-p0 {
  562.                 position: absolute;
  563.                 bottom: 376px;
  564.                 right: 150px;
  565.             }
  567.             .serviceMap__li.-top {
  568.                 width: 154px;
  569.                 border-radius: 5px;
  570.                 float: none;
  571.                 margin: 0 auto;
  572.                 padding: 7px 7px 1px;
  573.             }
  575.             .serviceMap__btn.-top {
  576.                 display: none;
  577.             }
  579.             .serviceMap__ul.-mid {
  580.                 opacity: 1;
  581.                 display: block;
  582.                 position: static;
  583.                 min-height: 50px;
  584.             }
  586.             .serviceMap__li.-mid {
  587.                 width: 47.5%;
  588.                 margin-right: 3%;
  589.             }
  591.             .serviceMap__li.-mid:nth-of-type(2n) {
  592.                 margin-right: 0;
  593.             }
  595.             .serviceMap__btn.-mid {
  596.                 color: #333333;
  597.                 padding: 6px 0;
  598.                 text-align: center;
  599.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  600.                 font-weight: 600;
  601.                 font-size: 15px;
  602.                 line-height: 21px;
  603.                 height: auto;
  604.                 cursor: pointer;
  605.             }
  607.             .serviceMap__li.-p1 {
  608.                 position: absolute;
  609.                 right: 202px;
  610.                 bottom: 150px;
  611.             }
  613.             .serviceMap__li.-p2 {
  614.                 position: absolute;
  615.                 bottom: 448px;
  616.                 left: 536px;
  617.             }
  619.             .serviceMap__li.-p3 {
  620.                 position: absolute;
  621.                 right: 435px;
  622.                 bottom: 80px;
  623.             }
  625.             .serviceMap__li.-p4 {
  626.                 position: absolute;
  627.                 right: 601px;
  628.                 bottom: 40px;
  629.             }
  631.             .serviceMap__li.-p5 {
  632.                 position: absolute;
  633.                 bottom: 448px;
  634.                 left: 368px;
  635.             }
  637.             .serviceMap__li.-p6 {
  638.                 position: absolute;
  639.                 bottom: 80px;
  640.                 left: 378px;
  641.             }
  643.             .serviceMap__li.-p7 {
  644.                 position: absolute;
  645.                 top: auto;
  646.                 right: auto;
  647.                 bottom: 183px;
  648.                 left: 101px;
  649.                 background: unset;
  650.             }
  652.             .map-title {
  653.                 text-align: center;
  654.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  655.                 font-weight: 600;
  656.                 font-size: 24px;
  657.                 line-height: 0;
  658.                 color: #333333;
  659.                 position: absolute;
  660.                 left: 0;
  661.                 right: 0;
  662.                 top: 40px;
  663.             }
  665.             .map-line {
  666.                 border-top: 3px solid #2379E7;
  667.                 position: absolute;
  668.                 top: 90px;
  669.                 width: 40px;
  670.                 left: 0;
  671.                 right: 0;
  672.                 margin: auto;
  673.                 border-radius: 8px;
  674.             }
  675.         }
  676.     </style>
  677. {% endblock %}
  679. {% block javascript %}
  680. <script>
  681.     $(document).on("click",".serviceMap__btn.-mid",function() {
  682.     var region = $(this).data('region');
  683.     var name = $(this).data('name');
  684.     $('#searchCategoryModalLabel').empty();
  685.     $('.pinc').hide();
  686.     $('#searchCategoryModalList').empty().html('<div class="text-center">読み込み中...</div>');
  687.     $('.cate-close').hide();
  688.     $.ajax({
  689.     type: 'POST',
  690.     dataType: 'html',
  691.     data: {
  692.     'category_id': region
  693. },
  694.     url: '{{ url('search_category') }}',
  695.         success: function(data) {
  696.             data = JSON.parse(data);
  697.             var group_to_values = data.reduce(function (obj, item) {
  698.                 obj[item.rhyme] = obj[item.rhyme] || [];
  699.                 obj[item.rhyme].push(item);
  700.                 return obj;
  701.             }, {});
  702.             var groups = Object.keys(group_to_values).map(function (key) {
  703.                 return {rhyme: key, data: group_to_values[key]};
  704.             });
  705.             groups.sort((a, b) => a.rhyme.localeCompare(b.rhyme));
  706.             $('.pinc').show();
  707.             $('#searchCategoryModalLabel').html(name);
  708.             $html='';
  709.             groups.forEach(function(item, value) {
  710.                 var group_to_values_child = item.data.reduce(function (obj, item_child) {
  711.                     obj[item_child.rhyme_child] = obj[item_child.rhyme_child] || [];
  712.                     obj[item_child.rhyme_child].push(item_child);
  713.                     return obj;
  714.                 }, {});
  715.                 var groups_child = Object.keys(group_to_values_child).map(function (key) {
  716.                     return {rhyme_child: key, item: group_to_values_child[key]};
  717.                 });
  718.                 groups_child.sort((a, b) => a.rhyme_child.localeCompare(b.rhyme_child));
  719.                 $html+='<div class="category-group">';
  720.                 $html+='<div class="category-rhyme">'+item.rhyme+'</div>';
  721.                 $html+='<div class="category-rhyme-content">';
  722.                 $html+='<ul>';
  723.                 groups_child.forEach(function(cate) {
  724.                     cate.item.forEach(function(flex) {
  725.                         $html+='<li class="region-category">';
  726.                         $html+='<div class="region-category-mix">';
  727.                         $html+='<a class="ec-secHeading__mix category-first" href="{{ url('product_list') }}?category_id='+flex.id+'">'+flex.name+'</a>';
  728.                         $html+='</div>';
  729.                         $html+='</li>';
  730.                     });
  731.                 });
  732.                 $html+='</ul>';
  733.                 $html+='</div>';
  734.                 $html+='</div>';
  735.             });
  736.             $('#searchCategoryModalList').html($html);
  737.             $('.cate-close').show();
  738.         },
  739.         error: function() {
  740.             alert('search region failed.');
  741.         }
  742.     });
  743. });
  744. </script>
  745. {% endblock javascript %}
  747. {% block main %}
  748.     <div class="ec-sliderRole" id="region">
  749.         <div class="serviceMap j-serviceMap" data-cls="serviceMap">
  750.             <div class="serviceMap__inner">
  751.                 <h2 class="map-title">遺品整理業者を探す</h2>
  752.                 <div class="map-line"></div>
  753.                 <ul class="serviceMap__ul -top">
  754.                     <li class="serviceMap__li -top -p0">
  755.                         <button class="serviceMap__btn -top" id="region0">
  756.                             <img class="pinc" src="{{ asset('assets/img/common/pinc.svg') }}" alt="Ocomari">
  757.                             <p class="mt-1 d-inline-block">北海道・東北</p>
  758.                         </button>
  759.                         <ul class="serviceMap__ul -mid">
  760.                             <li class="serviceMap__li -mid">
  761.                                 <a class="serviceMap__btn -mid" data-region="1100" data-name="北海道"
  762.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">北海道</a>
  763.                             </li>
  764.                             <li class="serviceMap__li -mid">
  765.                                 <a class="serviceMap__btn -mid" data-region="2200" data-name="青森"
  766.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">青森</a>
  767.                             </li>
  768.                             <li class="serviceMap__li -mid">
  769.                                 <a class="serviceMap__btn -mid" data-region="5200" data-name="秋田"
  770.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">秋田</a>
  771.                             </li>
  772.                             <li class="serviceMap__li -mid">
  773.                                 <a class="serviceMap__btn -mid" data-region="3200" data-name="岩手"
  774.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">岩手</a>
  775.                             </li>
  776.                             <li class="serviceMap__li -mid">
  777.                                 <a class="serviceMap__btn -mid" data-region="6200" data-name="山形"
  778.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">山形</a>
  779.                             </li>
  780.                             <li class="serviceMap__li -mid">
  781.                                 <a class="serviceMap__btn -mid" data-region="4100" data-name="宮城"
  782.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">宮城</a>
  783.                             </li>
  784.                             <li class="serviceMap__li -mid">
  785.                                 <a class="serviceMap__btn -mid" data-region="7200" data-name="福島"
  786.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">福島</a>
  787.                             </li>
  788.                         </ul>
  789.                     </li>
  790.                     <li class="serviceMap__li -top -p1">
  791.                         <button class="serviceMap__btn -top" id="region1">
  792.                             <img class="pinc" src="{{ asset('assets/img/common/pinc.svg') }}" alt="Ocomari">
  793.                             <p class="mt-1 d-inline-block">関東</p>
  794.                         </button>
  795.                         <ul class="serviceMap__ul -mid">
  796.                             <li class="serviceMap__li -mid">
  797.                                 <a class="serviceMap__btn -mid" data-region="13100" data-name="東京"
  798.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">東京</a>
  799.                             </li>
  800.                             <li class="serviceMap__li -mid">
  801.                                 <a class="serviceMap__btn -mid" data-region="14100" data-name="神奈川"
  802.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">神奈川</a>
  803.                             </li>
  804.                             <li class="serviceMap__li -mid">
  805.                                 <a class="serviceMap__btn -mid" data-region="11100" data-name="埼玉"
  806.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">埼玉</a>
  807.                             </li>
  808.                             <li class="serviceMap__li -mid">
  809.                                 <a class="serviceMap__btn -mid" data-region="12100" data-name="千葉"
  810.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">千葉</a>
  811.                             </li>
  812.                             <li class="serviceMap__li -mid">
  813.                                 <a class="serviceMap__btn -mid" data-region="8200" data-name="茨城"
  814.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">茨城</a>
  815.                             </li>
  816.                             <li class="serviceMap__li -mid">
  817.                                 <a class="serviceMap__btn -mid" data-region="9200" data-name="栃木"
  818.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">栃木</a>
  819.                             </li>
  820.                             <li class="serviceMap__li -mid">
  821.                                 <a class="serviceMap__btn -mid" data-region="10200" data-name="群馬"
  822.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">群馬</a>
  823.                             </li>
  824.                         </ul>
  825.                     </li>
  826.                     <li class="serviceMap__li -top -p2">
  827.                         <button class="serviceMap__btn -top" id="region2">
  828.                             <img class="pinc" src="{{ asset('assets/img/common/pinc.svg') }}" alt="Ocomari">
  829.                             <p class="mt-1 d-inline-block">北陸・甲信越</p>
  830.                         </button>
  831.                         <ul class="serviceMap__ul -mid">
  832.                             <li class="serviceMap__li -mid">
  833.                                 <a class="serviceMap__btn -mid" data-region="17200" data-name="石川"
  834.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">石川</a>
  835.                             </li>
  836.                             <li class="serviceMap__li -mid">
  837.                                 <a class="serviceMap__btn -mid" data-region="16200" data-name="富山"
  838.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">富山</a>
  839.                             </li>
  840.                             <li class="serviceMap__li -mid">
  841.                                 <a class="serviceMap__btn -mid" data-region="18200" data-name="福井"
  842.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">福井</a>
  843.                             </li>
  844.                             <li class="serviceMap__li -mid">
  845.                                 <a class="serviceMap__btn -mid" data-region="15100" data-name="新潟"
  846.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">新潟</a>
  847.                             </li>
  848.                             <li class="serviceMap__li -mid">
  849.                                 <a class="serviceMap__btn -mid" data-region="20200" data-name="長野"
  850.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">長野</a>
  851.                             </li>
  852.                             <li class="serviceMap__li -mid">
  853.                                 <a class="serviceMap__btn -mid" data-region="19200" data-name="山梨"
  854.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">山梨</a>
  855.                             </li>
  856.                         </ul>
  857.                     </li>
  858.                     <li class="serviceMap__li -top -p3">
  859.                         <button class="serviceMap__btn -top" id="region3">
  860.                             <img class="pinc" src="{{ asset('assets/img/common/pinc.svg') }}" alt="Ocomari">
  861.                             <p class="mt-1 d-inline-block">東海</p>
  862.                         </button>
  863.                         <ul class="serviceMap__ul -mid">
  864.                             <li class="serviceMap__li -mid">
  865.                                 <a class="serviceMap__btn -mid" data-region="23100" data-name="愛知"
  866.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">愛知</a>
  867.                             </li>
  868.                             <li class="serviceMap__li -mid">
  869.                                 <a class="serviceMap__btn -mid" data-region="22100" data-name="静岡"
  870.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">静岡</a>
  871.                             </li>
  872.                             <li class="serviceMap__li -mid">
  873.                                 <a class="serviceMap__btn -mid" data-region="21200" data-name="岐阜"
  874.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">岐阜</a>
  875.                             </li>
  876.                             <li class="serviceMap__li -mid">
  877.                                 <a class="serviceMap__btn -mid" data-region="24200" data-name="三重"
  878.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">三重</a>
  879.                             </li>
  880.                         </ul>
  881.                     </li>
  882.                     <li class="serviceMap__li -top -p4">
  883.                         <button class="serviceMap__btn -top" id="region4">
  884.                             <img class="pinc" src="{{ asset('assets/img/common/pinc.svg') }}" alt="Ocomari">
  885.                             <p class="mt-1 d-inline-block">関西</p>
  886.                         </button>
  887.                         <ul class="serviceMap__ul -mid">
  888.                             <li class="serviceMap__li -mid">
  889.                                 <a class="serviceMap__btn -mid" data-region="27100" data-name="大阪"
  890.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">大阪</a>
  891.                             </li>
  892.                             <li class="serviceMap__li -mid">
  893.                                 <a class="serviceMap__btn -mid" data-region="28100" data-name="兵庫"
  894.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">兵庫</a>
  895.                             </li>
  896.                             <li class="serviceMap__li -mid">
  897.                                 <a class="serviceMap__btn -mid" data-region="26100" data-name="京都"
  898.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">京都</a>
  899.                             </li>
  900.                             <li class="serviceMap__li -mid">
  901.                                 <a class="serviceMap__btn -mid" data-region="25200" data-name="滋賀"
  902.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">滋賀</a>
  903.                             </li>
  904.                             <li class="serviceMap__li -mid">
  905.                                 <a class="serviceMap__btn -mid" data-region="29200" data-name="奈良"
  906.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">奈良</a>
  907.                             </li>
  908.                             <li class="serviceMap__li -mid">
  909.                                 <a class="serviceMap__btn -mid" data-region="30200" data-name="和歌山"
  910.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">和歌山</a>
  911.                             </li>
  912.                         </ul>
  913.                     </li>
  914.                     <li class="serviceMap__li -top -p5">
  915.                         <button class="serviceMap__btn -top" id="region5">
  916.                             <img class="pinc" src="{{ asset('assets/img/common/pinc.svg') }}" alt="Ocomari">
  917.                             <p class="mt-1 d-inline-block">中国</p>
  918.                         </button>
  919.                         <ul class="serviceMap__ul -mid">
  920.                             <li class="serviceMap__li -mid">
  921.                                 <a class="serviceMap__btn -mid" data-region="34100" data-name="広島"
  922.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">広島</a>
  923.                             </li>
  924.                             <li class="serviceMap__li -mid">
  925.                                 <a class="serviceMap__btn -mid" data-region="33100" data-name="岡山"
  926.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">岡山</a>
  927.                             </li>
  928.                             <li class="serviceMap__li -mid">
  929.                                 <a class="serviceMap__btn -mid" data-region="32200" data-name="島根"
  930.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">島根</a>
  931.                             </li>
  932.                             <li class="serviceMap__li -mid">
  933.                                 <a class="serviceMap__btn -mid" data-region="31200" data-name="鳥取"
  934.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">鳥取</a>
  935.                             </li>
  936.                             <li class="serviceMap__li -mid">
  937.                                 <a class="serviceMap__btn -mid" data-region="35200" data-name="山口"
  938.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">山口</a>
  939.                             </li>
  940.                         </ul>
  941.                     </li>
  942.                     <li class="serviceMap__li -top -p6">
  943.                         <button class="serviceMap__btn -top" id="region6">
  944.                             <img class="pinc" src="{{ asset('assets/img/common/pinc.svg') }}" alt="Ocomari">
  945.                             <p class="mt-1 d-inline-block">四国</p>
  946.                         </button>
  947.                         <ul class="serviceMap__ul -mid">
  948.                             <li class="serviceMap__li -mid">
  949.                                 <a class="serviceMap__btn -mid" data-region="38200" data-name="愛媛"
  950.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">愛媛</a>
  951.                             </li>
  952.                             <li class="serviceMap__li -mid">
  953.                                 <a class="serviceMap__btn -mid" data-region="37200" data-name="香川"
  954.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">香川</a>
  955.                             </li>
  956.                             <li class="serviceMap__li -mid">
  957.                                 <a class="serviceMap__btn -mid" data-region="39200" data-name="高知"
  958.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">高知</a>
  959.                             </li>
  960.                             <li class="serviceMap__li -mid">
  961.                                 <a class="serviceMap__btn -mid" data-region="36200" data-name="徳島"
  962.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">徳島</a>
  963.                             </li>
  964.                         </ul>
  965.                     </li>
  966.                     <li class="serviceMap__li -top -p7">
  967.                         <button class="serviceMap__btn -top" id="region7">
  968.                             <img class="pinc" src="{{ asset('assets/img/common/pinc.svg') }}" alt="Ocomari">
  969.                             <p class="mt-1 d-inline-block">九州・沖縄</p>
  970.                         </button>
  971.                         <ul class="serviceMap__ul -mid">
  972.                             <li class="serviceMap__li -mid">
  973.                                 <a class="serviceMap__btn -mid" data-region="40100" data-name="福岡"
  974.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">福岡</a>
  975.                             </li>
  976.                             <li class="serviceMap__li -mid">
  977.                                 <a class="serviceMap__btn -mid" data-region="43100" data-name="熊本"
  978.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">熊本</a>
  979.                             </li>
  980.                             <li class="serviceMap__li -mid">
  981.                                 <a class="serviceMap__btn -mid" data-region="42200" data-name="長崎"
  982.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">長崎</a>
  983.                             </li>
  984.                             <li class="serviceMap__li -mid">
  985.                                 <a class="serviceMap__btn -mid" data-region="46200" data-name="鹿児島"
  986.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">鹿児島</a>
  987.                             </li>
  988.                             <li class="serviceMap__li -mid">
  989.                                 <a class="serviceMap__btn -mid" data-region="44200" data-name="大分"
  990.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">大分</a>
  991.                             </li>
  992.                             <li class="serviceMap__li -mid">
  993.                                 <a class="serviceMap__btn -mid" data-region="45200" data-name="宮崎"
  994.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">宮崎</a>
  995.                             </li>
  996.                             <li class="serviceMap__li -mid">
  997.                                 <a class="serviceMap__btn -mid" data-region="41200" data-name="佐賀"
  998.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">佐賀</a>
  999.                             </li>
  1000.                             <li class="serviceMap__li -mid">
  1001.                                 <a class="serviceMap__btn -mid" data-region="47200" data-name="沖縄"
  1002.                                    data-bs-toggle="modal" data-bs-target="#searchCategoryModal">沖縄</a>
  1003.                             </li>
  1004.                         </ul>
  1005.                     </li>
  1006.                     <div class="map-invisible">
  1007.                         <a class="light-flip light-invisible-0" href="{{ path('homepage') }}#region0"></a>
  1008.                         <a class="light-flip light-invisible-1" href="{{ path('homepage') }}#region1"></a>
  1009.                         <a class="light-flip light-invisible-2" href="{{ path('homepage') }}#region2"></a>
  1010.                         <a class="light-flip light-invisible-3" href="{{ path('homepage') }}#region3"></a>
  1011.                         <a class="light-flip light-invisible-4" href="{{ path('homepage') }}#region4"></a>
  1012.                         <a class="light-flip light-invisible-5" href="{{ path('homepage') }}#region5"></a>
  1013.                         <a class="light-flip light-invisible-6" href="{{ path('homepage') }}#region6"></a>
  1014.                         <a class="light-flip light-invisible-7" href="{{ path('homepage') }}#region7"></a>
  1015.                     </div>
  1016.                 </ul>
  1017.             </div>
  1018.         </div>
  1019.     </div>
  1020.     <div class="modal" id="searchCategoryModal" tabindex="-1" role="dialog" aria-labelledby="searchCategoryModal"
  1021.          aria-hidden="true">
  1022.         <div class="modal-dialog modal-dialog-centered modal-lg">
  1023.             <div class="modal-content mix-cate">
  1024.                 <div class="modal-header px-0">
  1025.                     <img class="pinc" src="{{ asset('assets/img/common/pinc_modal.svg') }}" alt="Ocomari">
  1026.                     <h4 class="modal-title mx-2 fx-17" id="searchCategoryModalLabel"></h4>
  1027.                     <button class="btn-close-img" type="button" data-bs-dismiss="modal" aria-label="Close">
  1028.                         <img src="{{ asset('assets/img/common/close.svg') }}" alt="Ocomari">
  1029.                     </button>
  1030.                 </div>
  1031.                 <div class="modal-body px-0">
  1032.                     <div class="mb-3">
  1033.                         <div id="searchCategoryModalList">
  1034.                         </div>
  1035.                     </div>
  1036.                 </div>
  1037.                 <div class="modal-footer px-0">
  1038.                     <div class="w-100 d-flex">
  1039.                         <button class="cate-close" type="button" data-bs-dismiss="modal" aria-label="Close">閉じる
  1040.                         </button>
  1041.                     </div>
  1042.                 </div>
  1043.             </div>
  1044.         </div>
  1045.     </div>
  1046. {% endblock %}