{% block stylesheet %}
<style>
.map-img img {
display: block;
margin-left: auto;
margin-right: auto;
width: 1300px;
}
.map-mix {
position: relative;
}
.serviceMap__li {
width: 30%;
margin-right: 5%;
margin-bottom: 5%;
float: left;
display: block;
}
.serviceMap__ul {
padding: 0;
display: block;
width: 100%;
min-height: 200px;
list-style: none;
}
.region-category {
display: inline-block;
margin: 8px;
}
#searchCategoryModalList ul {
padding: unset;
}
.category-group {
display: inline-block;
width: 100%;
}
.category-rhyme {
display: inline-block;
float: left;
width: 5%;
font-weight: 600;
margin: 8px 0;
font-size: 15px;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
color: #333333;
}
.category-rhyme-content {
display: inline-block;
float: right;
width: 95%;
}
.mix-cate {
padding: 2rem;
}
.category-first {
color: #333333;
text-decoration: underline;
font-size: 15px;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-style: normal;
font-weight: 300;
line-height: 24px;
}
.cate-close {
margin: auto;
border: unset;
background: unset;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-style: normal;
font-weight: 300;
font-size: 15px;
line-height: 24px;
text-align: center;
color: #333333;
}
.pinc {
width: 13px !important;
height: 17px;
margin-top: -3px;
flex: none;
order: 0;
flex-grow: 0;
}
.fx-17 {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-size: 17px;
line-height: 24px;
font-weight: 600;
color: #333333;
}
.modal-dialog,
.modal-content {
height: 320px;
width: 748px;
padding: 48px 48px 24px 48px;
border-radius: unset;
border: unset;
}
.modal-header {
padding: 5px;
height: 35px;
}
.modal-body {
overflow-y: auto;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
color: #333333;
}
.modal-footer {
padding: 5px;
border: unset;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
color: #333333;
}
.modal-header .btn-close-img {
padding: unset;
margin: -11rem -3rem -0rem auto;
color: white;
width: 32px;
height: 32px;
flex: none;
order: 0;
flex-grow: 0;
border: none;
background: none;
}
.color-unset {
color: unset;
}
@media (max-width: 768px) {
.serviceMap__btn {
display: block;
width: 100%;
vertical-align: top;
padding: 6px 2px;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
line-height: 25px;
font-size: 15px;
color: #333333;
cursor: pointer;
}
.serviceMap__btn.-top {
background: #2379E7;
color: #FFFFFF;
border: none;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.serviceMap__li {
width: 90%;
display: block;
background: #8FC0FF;
border-radius: 8px;
margin: 3% 5%;
}
.serviceMap__inner {
background: url(../../../../html/template/default/assets/img/common/map_sp.svg);
background-image: url(../../../../html/template/default/assets/img/common/map_sp.svg);
background-position-x: 50%;
background-position-y: 10%;
background-size: 335.4px;
background-repeat: no-repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
position: relative;
}
.serviceMap__ul {
padding: 0;
display: block;
width: 100%;
min-height: 500px;
list-style: none;
}
.serviceMap__li.-p0 {
margin: 335px 5% 3%;
}
.serviceMap__ul.-mid {
opacity: 1;
display: block;
position: static;
min-height: 50px;
}
.serviceMap__li.-mid {
width: 22.5%;
text-align: center;
margin: 2% 1%;
background: #fff;
border-radius: 4px;
}
.map-title {
text-align: center;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
font-size: 22px;
line-height: 0;
color: #333333;
position: absolute;
left: 0;
right: 0;
top: -25px;
}
.map-line {
border-top: 3px solid #2379E7;
position: absolute;
top: 20px;
width: 40px;
left: 0;
right: 0;
margin: auto;
border-radius: 8px;
}
.mix-cate {
padding: 1rem;
}
.modal-dialog,
.modal-content {
height: 298px;
width: 383px;
padding: 24px 24px 12px 24px;
border-radius: unset;
border: unset;
margin: auto;
}
.modal-header .btn-close-img {
padding: unset;
margin: -8rem -1.5rem -0rem auto;
color: #FFFFFF;
}
.serviceMap__li.-mid:nth-child(1), .serviceMap__li.-mid:nth-child(5) {
margin-left: 2%;
}
.serviceMap__li.-mid:nth-child(4), .serviceMap__li.-mid:nth-child(8) {
margin-right: 2%;
}
.serviceMap__li.-mid:nth-child(5), .serviceMap__li.-mid:nth-child(6), .serviceMap__li.-mid:nth-child(7), .serviceMap__li.-mid:nth-child(8) {
margin-top: 0;
}
.map-invisible {
position: relative;
width: 335.4px;
height: 320px;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 0%);
}
.light-flip {
position: absolute;
}
.light-invisible-0 {
width: 69px;
height: 46px;
right: 2px;
top: 109px;
}
.light-invisible-1 {
width: 56px;
height: 28px;
right: 26px;
top: 206px;
}
.light-invisible-2 {
width: 69px;
height: 46px;
right: 140px;
top: 101px;
}
.light-invisible-3 {
width: 57px;
height: 28px;
right: 108px;
top: 268px;
}
.light-invisible-4 {
width: 57px;
height: 28px;
right: 179px;
top: 268px;
}
.light-invisible-5 {
width: 57px;
height: 28px;
right: 196px;
top: 161px;
}
.light-invisible-6 {
width: 57px;
height: 28px;
right: 249px;
top: 268px;
}
.light-invisible-7 {
width: 69px;
height: 46px;
right: 266px;
top: 145px;
}
}
@media (min-width: 768px) {
#region {
margin-top: 80px;
}
.serviceMap__btn {
display: block;
width: 100%;
vertical-align: top;
}
.serviceMap__li {
width: 30%;
margin-right: 5%;
margin-bottom: 5%;
float: left;
display: block;
}
.serviceMap__inner {
background: url(../../../../html/template/default/assets/img/common/map.svg);
background-image: url(../../../../html/template/default/assets/img/common/map.svg);
background-position-x: 40%;
background-position-y: 0%;
background-size: 80%;
background-repeat: no-repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
position: relative;
}
.serviceMap__ul {
padding: 0;
display: block;
width: 100%;
min-height: 200px;
list-style: none;
}
.serviceMap {
width: 768px;
margin: auto;
}
.serviceMap__ul.-top {
position: static;
background: none;
height: 460px;
margin: 0 auto;
}
.serviceMap__li.-top {
width: 110px;
border-radius: 5px;
float: none;
margin: 0 auto;
padding: 2px 2px 1px;
}
.serviceMap__btn.-top {
display: none;
}
.serviceMap__ul.-mid {
opacity: 1;
display: block;
position: static;
min-height: 50px;
}
.serviceMap__li.-mid {
width: 38.5%;
margin-right: 1%;
}
.serviceMap__li.-mid:nth-of-type(2n) {
margin-right: 0;
}
.serviceMap__btn.-mid {
color: #333333;
font-size: 10px;
padding: 3px 0;
text-align: center;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
line-height: 12px;
height: auto;
cursor: pointer;
}
.serviceMap__li.-p0 {
position: absolute;
bottom: 209px;
right: 70px;
}
.serviceMap__li.-p1 {
position: absolute;
right: 100px;
bottom: 75px;
}
.serviceMap__li.-p2 {
position: absolute;
bottom: 251px;
left: 317px;
}
.serviceMap__li.-p3 {
position: absolute;
right: 435px;
bottom: 30px;
}
.serviceMap__li.-p4 {
position: absolute;
right: 336px;
bottom: 10px;
}
.serviceMap__li.-p5 {
position: absolute;
bottom: 251PX;
left: 218PX;
}
.serviceMap__li.-p6 {
position: absolute;
bottom: 30px;
left: 421px;
}
.serviceMap__li.-p7 {
position: absolute;
bottom: 95px;
left: 60px;
}
.map-title {
text-align: center;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
font-size: 24px;
line-height: 0;
color: #333333;
position: absolute;
left: 0;
right: 0;
top: 20px;
}
.map-line {
border-top: 3px solid #2379E7;
position: absolute;
top: 70px;
width: 40px;
left: 0;
right: 0;
margin: auto;
border-radius: 8px;
}
}
@media (min-width: 1300px) {
.serviceMap__btn {
display: block;
width: 100%;
vertical-align: top;
}
.serviceMap__li {
width: 30%;
margin-right: 5%;
margin-bottom: 5%;
float: left;
display: block;
}
.serviceMap__inner {
background: url(../../../../html/template/default/assets/img/common/map.svg);
background-image: url(../../../../html/template/default/assets/img/common/map.svg);
background-position-x: 40%;
background-position-y: 0%;
background-size: 80%;
background-repeat: no-repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
position: relative;
}
.serviceMap__ul {
padding: 0;
display: block;
width: 100%;
min-height: 200px;
list-style: none;
}
.serviceMap {
width: 1300px;
margin: auto;
}
.serviceMap__ul.-top {
position: static;
background: none;
height: 800px;
margin: 0 auto;
}
.serviceMap__li.-p0 {
position: absolute;
bottom: 376px;
right: 150px;
}
.serviceMap__li.-top {
width: 154px;
border-radius: 5px;
float: none;
margin: 0 auto;
padding: 7px 7px 1px;
}
.serviceMap__btn.-top {
display: none;
}
.serviceMap__ul.-mid {
opacity: 1;
display: block;
position: static;
min-height: 50px;
}
.serviceMap__li.-mid {
width: 47.5%;
margin-right: 3%;
}
.serviceMap__li.-mid:nth-of-type(2n) {
margin-right: 0;
}
.serviceMap__btn.-mid {
color: #333333;
padding: 6px 0;
text-align: center;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
font-size: 15px;
line-height: 21px;
height: auto;
cursor: pointer;
}
.serviceMap__li.-p1 {
position: absolute;
right: 202px;
bottom: 150px;
}
.serviceMap__li.-p2 {
position: absolute;
bottom: 448px;
left: 536px;
}
.serviceMap__li.-p3 {
position: absolute;
right: 435px;
bottom: 80px;
}
.serviceMap__li.-p4 {
position: absolute;
right: 601px;
bottom: 40px;
}
.serviceMap__li.-p5 {
position: absolute;
bottom: 448px;
left: 368px;
}
.serviceMap__li.-p6 {
position: absolute;
bottom: 80px;
left: 378px;
}
.serviceMap__li.-p7 {
position: absolute;
top: auto;
right: auto;
bottom: 183px;
left: 101px;
background: unset;
}
.map-title {
text-align: center;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
font-size: 24px;
line-height: 0;
color: #333333;
position: absolute;
left: 0;
right: 0;
top: 40px;
}
.map-line {
border-top: 3px solid #2379E7;
position: absolute;
top: 90px;
width: 40px;
left: 0;
right: 0;
margin: auto;
border-radius: 8px;
}
}
</style>
{% endblock %}
{% block javascript %}
<script>
$(document).on("click",".serviceMap__btn.-mid",function() {
var region = $(this).data('region');
var name = $(this).data('name');
$('#searchCategoryModalLabel').empty();
$('.pinc').hide();
$('#searchCategoryModalList').empty().html('<div class="text-center">読み込み中...</div>');
$('.cate-close').hide();
$.ajax({
type: 'POST',
dataType: 'html',
data: {
'category_id': region
},
url: '{{ url('search_category') }}',
success: function(data) {
data = JSON.parse(data);
var group_to_values = data.reduce(function (obj, item) {
obj[item.rhyme] = obj[item.rhyme] || [];
obj[item.rhyme].push(item);
return obj;
}, {});
var groups = Object.keys(group_to_values).map(function (key) {
return {rhyme: key, data: group_to_values[key]};
});
groups.sort((a, b) => a.rhyme.localeCompare(b.rhyme));
$('.pinc').show();
$('#searchCategoryModalLabel').html(name);
$html='';
groups.forEach(function(item, value) {
var group_to_values_child = item.data.reduce(function (obj, item_child) {
obj[item_child.rhyme_child] = obj[item_child.rhyme_child] || [];
obj[item_child.rhyme_child].push(item_child);
return obj;
}, {});
var groups_child = Object.keys(group_to_values_child).map(function (key) {
return {rhyme_child: key, item: group_to_values_child[key]};
});
groups_child.sort((a, b) => a.rhyme_child.localeCompare(b.rhyme_child));
$html+='<div class="category-group">';
$html+='<div class="category-rhyme">'+item.rhyme+'</div>';
$html+='<div class="category-rhyme-content">';
$html+='<ul>';
groups_child.forEach(function(cate) {
cate.item.forEach(function(flex) {
$html+='<li class="region-category">';
$html+='<div class="region-category-mix">';
$html+='<a class="ec-secHeading__mix category-first" href="{{ url('product_list') }}?category_id='+flex.id+'">'+flex.name+'</a>';
$html+='</div>';
$html+='</li>';
});
});
$html+='</ul>';
$html+='</div>';
$html+='</div>';
});
$('#searchCategoryModalList').html($html);
$('.cate-close').show();
},
error: function() {
alert('search region failed.');
}
});
});
</script>
{% endblock javascript %}
{% block main %}
<div class="ec-sliderRole" id="region">
<div class="serviceMap j-serviceMap" data-cls="serviceMap">
<div class="serviceMap__inner">
<h2 class="map-title">遺品整理業者を探す</h2>
<div class="map-line"></div>
<ul class="serviceMap__ul -top">
<li class="serviceMap__li -top -p0">
<button class="serviceMap__btn -top" id="region0">
<img class="pinc" src="{{ asset('assets/img/common/pinc.svg') }}" alt="Ocomari">
<p class="mt-1 d-inline-block">北海道・東北</p>
</button>
<ul class="serviceMap__ul -mid">
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="1100" data-name="北海道"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">北海道</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="2200" data-name="青森"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">青森</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="5200" data-name="秋田"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">秋田</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="3200" data-name="岩手"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">岩手</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="6200" data-name="山形"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">山形</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="4100" data-name="宮城"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">宮城</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="7200" data-name="福島"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">福島</a>
</li>
</ul>
</li>
<li class="serviceMap__li -top -p1">
<button class="serviceMap__btn -top" id="region1">
<img class="pinc" src="{{ asset('assets/img/common/pinc.svg') }}" alt="Ocomari">
<p class="mt-1 d-inline-block">関東</p>
</button>
<ul class="serviceMap__ul -mid">
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="13100" data-name="東京"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">東京</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="14100" data-name="神奈川"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">神奈川</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="11100" data-name="埼玉"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">埼玉</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="12100" data-name="千葉"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">千葉</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="8200" data-name="茨城"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">茨城</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="9200" data-name="栃木"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">栃木</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="10200" data-name="群馬"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">群馬</a>
</li>
</ul>
</li>
<li class="serviceMap__li -top -p2">
<button class="serviceMap__btn -top" id="region2">
<img class="pinc" src="{{ asset('assets/img/common/pinc.svg') }}" alt="Ocomari">
<p class="mt-1 d-inline-block">北陸・甲信越</p>
</button>
<ul class="serviceMap__ul -mid">
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="17200" data-name="石川"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">石川</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="16200" data-name="富山"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">富山</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="18200" data-name="福井"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">福井</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="15100" data-name="新潟"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">新潟</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="20200" data-name="長野"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">長野</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="19200" data-name="山梨"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">山梨</a>
</li>
</ul>
</li>
<li class="serviceMap__li -top -p3">
<button class="serviceMap__btn -top" id="region3">
<img class="pinc" src="{{ asset('assets/img/common/pinc.svg') }}" alt="Ocomari">
<p class="mt-1 d-inline-block">東海</p>
</button>
<ul class="serviceMap__ul -mid">
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="23100" data-name="愛知"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">愛知</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="22100" data-name="静岡"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">静岡</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="21200" data-name="岐阜"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">岐阜</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="24200" data-name="三重"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">三重</a>
</li>
</ul>
</li>
<li class="serviceMap__li -top -p4">
<button class="serviceMap__btn -top" id="region4">
<img class="pinc" src="{{ asset('assets/img/common/pinc.svg') }}" alt="Ocomari">
<p class="mt-1 d-inline-block">関西</p>
</button>
<ul class="serviceMap__ul -mid">
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="27100" data-name="大阪"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">大阪</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="28100" data-name="兵庫"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">兵庫</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="26100" data-name="京都"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">京都</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="25200" data-name="滋賀"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">滋賀</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="29200" data-name="奈良"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">奈良</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="30200" data-name="和歌山"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">和歌山</a>
</li>
</ul>
</li>
<li class="serviceMap__li -top -p5">
<button class="serviceMap__btn -top" id="region5">
<img class="pinc" src="{{ asset('assets/img/common/pinc.svg') }}" alt="Ocomari">
<p class="mt-1 d-inline-block">中国</p>
</button>
<ul class="serviceMap__ul -mid">
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="34100" data-name="広島"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">広島</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="33100" data-name="岡山"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">岡山</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="32200" data-name="島根"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">島根</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="31200" data-name="鳥取"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">鳥取</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="35200" data-name="山口"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">山口</a>
</li>
</ul>
</li>
<li class="serviceMap__li -top -p6">
<button class="serviceMap__btn -top" id="region6">
<img class="pinc" src="{{ asset('assets/img/common/pinc.svg') }}" alt="Ocomari">
<p class="mt-1 d-inline-block">四国</p>
</button>
<ul class="serviceMap__ul -mid">
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="38200" data-name="愛媛"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">愛媛</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="37200" data-name="香川"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">香川</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="39200" data-name="高知"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">高知</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="36200" data-name="徳島"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">徳島</a>
</li>
</ul>
</li>
<li class="serviceMap__li -top -p7">
<button class="serviceMap__btn -top" id="region7">
<img class="pinc" src="{{ asset('assets/img/common/pinc.svg') }}" alt="Ocomari">
<p class="mt-1 d-inline-block">九州・沖縄</p>
</button>
<ul class="serviceMap__ul -mid">
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="40100" data-name="福岡"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">福岡</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="43100" data-name="熊本"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">熊本</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="42200" data-name="長崎"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">長崎</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="46200" data-name="鹿児島"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">鹿児島</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="44200" data-name="大分"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">大分</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="45200" data-name="宮崎"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">宮崎</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="41200" data-name="佐賀"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">佐賀</a>
</li>
<li class="serviceMap__li -mid">
<a class="serviceMap__btn -mid" data-region="47200" data-name="沖縄"
data-bs-toggle="modal" data-bs-target="#searchCategoryModal">沖縄</a>
</li>
</ul>
</li>
<div class="map-invisible">
<a class="light-flip light-invisible-0" href="{{ path('homepage') }}#region0"></a>
<a class="light-flip light-invisible-1" href="{{ path('homepage') }}#region1"></a>
<a class="light-flip light-invisible-2" href="{{ path('homepage') }}#region2"></a>
<a class="light-flip light-invisible-3" href="{{ path('homepage') }}#region3"></a>
<a class="light-flip light-invisible-4" href="{{ path('homepage') }}#region4"></a>
<a class="light-flip light-invisible-5" href="{{ path('homepage') }}#region5"></a>
<a class="light-flip light-invisible-6" href="{{ path('homepage') }}#region6"></a>
<a class="light-flip light-invisible-7" href="{{ path('homepage') }}#region7"></a>
</div>
</ul>
</div>
</div>
</div>
<div class="modal" id="searchCategoryModal" tabindex="-1" role="dialog" aria-labelledby="searchCategoryModal"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content mix-cate">
<div class="modal-header px-0">
<img class="pinc" src="{{ asset('assets/img/common/pinc_modal.svg') }}" alt="Ocomari">
<h4 class="modal-title mx-2 fx-17" id="searchCategoryModalLabel"></h4>
<button class="btn-close-img" type="button" data-bs-dismiss="modal" aria-label="Close">
<img src="{{ asset('assets/img/common/close.svg') }}" alt="Ocomari">
</button>
</div>
<div class="modal-body px-0">
<div class="mb-3">
<div id="searchCategoryModalList">
</div>
</div>
</div>
<div class="modal-footer px-0">
<div class="w-100 d-flex">
<button class="cate-close" type="button" data-bs-dismiss="modal" aria-label="Close">閉じる
</button>
</div>
</div>
</div>
</div>
</div>
{% endblock %}