/* search_map */
body:has(#search_map) {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  background-color: #fff;
  color: #000;
}

#search_map {
  display: block;
  position: relative;
  margin: auto;
  max-width: 800px;
}
#search_map::before {
  content: '';
  display: block;
  padding-top: 80%;
}
@media screen and (max-width:640px) {
  #search_map::before {
    padding-top: 100%;
  }
}
#search_map .map_block {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  background-color: #fff;
}
#search_map .map_block > svg {
  width: 100%;
  height: 100%;
}
#search_map #zoomout_btn {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  margin: 10px;
  padding: 0.5em;
  background-color: #fff;
  border-style: outset;
  border-width: thin;
  border-color: #efefef;
  font-size: 14px;
  color: #999;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
#search_map #hokkaido_map.-area + #zoomout_btn, 
#search_map #hokkaido_map.-subprefecture + #zoomout_btn {
  display: block;
}


/* AREA */
/*#search_map .area 				{ opacity: 0.5; }
#search_map .area:hover 	{ opacity: 1; }*/
#search_map #area_douou 	{ fill: #F09000; }
#search_map #area_dounan 	{ fill: #EE8F97; }
#search_map #area_douhoku { fill: #69C2B7; }
#search_map #area_okhotsk { fill: #AF78A5; }
#search_map #area_tokachi { fill: #C8A64F; }
#search_map #area_doutou 	{ fill: #A8CA44; }
#search_map #area_northern_territories { fill:#ccc; }

/* LINE */
#search_map .line {
  fill:none; 
  stroke:#FFFFFF; 
  stroke-linecap:round; 
  stroke-linejoin:round;	
}
#search_map #line_town { 
  stroke-width: 0.5; 
}
#search_map #line_subprefecture { 
  stroke-width: 1; 
}
#search_map #line_prefecture { 
  stroke:#cccccc; 
  stroke-width: 1; 
}

/* TEXT */
#search_map #text #text_town {
  font-size: 4px;
}
#search_map #text #text_subprefecture {
  font-size: 12px;
}
#search_map #text #text_area {
  font-size: 24px;
}

#search_map .subprefecture, 
#search_map .town {
  display: none;
}

#search_map .-area #text_area, 
#search_map .-subprefecture #text_area {
  display: none;
}
#search_map .-area .area, 
#search_map .-subprefecture .area {
  opacity: 1;
}

/* -area */
#search_map .-area .subprefecture {
  display: block;
}
#search_map .-area .line.subprefecture {
  /*fill: rgba(255,255,255,0.5);*/
}
#search_map .-area .line.subprefecture:hover {
  fill: rgba(255,255,255,0);
}

/* -subprefecture */
#search_map .-subprefecture .line.subprefecture {
  fill: none;
}
#search_map .-subprefecture .town {
  display: block;
}


#search_map .modal_area {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  z-index: auto;
  transition: all 0.4s;
}
#search_map #search_map_switch {
  display: none;
}
@media print, (min-width:641px) {
  #search_map .search_map_btn {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 100;
  }
  #search_map .modal_area .search_map_btn.icn {
    bottom: auto;
    left: auto;
    margin: 10px;
    width: 2em;
    height: 2em;
    background-color: rgba(0,0,0,0.5);
    border: solid thin #fff;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
    opacity: 0;
  }
  #search_map .modal_area .search_map_btn.icn:before, 
  #search_map .modal_area .search_map_btn.icn:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFF;
    margin: auto;
    width: 80%;
    height: 3px;
  }
  #search_map .modal_area .search_map_btn.icn:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #search_map .modal_area .search_map_btn.icn:after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #search_map #search_map_switch:checked + .modal_area .search_map_btn.icn {
    opacity: 1;
  }
  #search_map #search_map_switch:checked + .modal_area {
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    z-index: 5000;
  }
  #search_map #search_map_switch:checked + .modal_area .map_block {
    margin: auto;
    width: 90%;
    height: 90%;
    z-index: 110;
  }
}
@media print, (min-width:641px) and (orientation: landscape) {
  #search_map #search_map_switch:checked + .modal_area .map_block {
    width: 90vh;
    height: 90vh;
  }
}
@media print, (min-width:641px) and (orientation: portrait) {
  #search_map #search_map_switch:checked + .modal_area .map_block {
    width: 90vw;
    height: 90vw;
  }
}
@media screen and (max-width:640px) {
  #search_map .search_map_btn {
    display: none;
  }
}