@charset "UTF-8";
@charset "UTF-8";

  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video { 
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; 
}
body {
font-family: "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #000000;
background-color: #ffffff;
}
img {
vertical-align: bottom;
} 
a:hover img {
opacity: 0.7;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 60);
filter: alpha(opacity = 60);
transition: all 0.4s;
}
a {
text-decoration: none;
color: #435ea9;
}
a:hover {
text-decoration: none;
color: #0E2D96;
transition: 0.3s all;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
} #japan-map div div.area div {
border: 1px #ffffff solid;
text-align: center;
font-size: 14px;
display: flex;
display: -webkit-flex;
align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; border-radius: 6px;
-webkit-border-radius: 6px;
position: absolute;
box-sizing: border-box;
transition: 0.2s;
}
#japan-map div div.area div:hover {
opacity: 0.5;
transition: 0.2s;
}
#japan-map {
display: block;
width: 777px;
height: 482px;
background-color: none;
margin-left: auto;
margin-right: auto;
position: relative;
}
#japan-map p.area-title {
display: none;
} #hokkaido-touhoku {
width: 136px;
display: block;
height: 265px;
position: absolute;
left: 638px;
}
#hokkaido-touhoku div.area div {
background-color: #7478c2;
color: #ffffff;
}
#hokkaido {	
width: 133px;
height: 70px;
}
#aomori {
width: 93px;
height: 43px;
left: 21px;
top: 96px;
}
#akita {
width: 67px;
height: 42px;
left: 3px;
top: 139px;
}
#iwate {
width: 67px;
height: 42px;
left: 70px;
top: 139px;
}
#yamagata {
width: 67px;
height: 42px;
top: 181px;
left: 3px;
}
#miyagi {
width: 67px;
height: 42px;
top: 181px;
left: 70px;
}
#fukushima {
width: 67px;
height: 42px;
top: 223px;
left: 70px;
} #kantou {
width: 158px;
display: block;
height: 174px;
position: absolute;
top: 265px;
left: 623px;
z-index: 2;
}
#kantou div.area div {
background-color: #31beca;
color: #ffffff;
}
#ibaraki {
width: 52px;
height: 85px;
top: 0px;
left: 100px;
}
#tochigi {
width: 50px;
height: 42px;
top: 0px;
left: 50px;
}
#gunma {
width: 50px;
height: 42px;
top: 0px;
left: 0px;
}
#saitama {
width: 100px;
height: 43px;
top: 42px;
left: 0px;
}
#chiba {
width: 52px;
height: 84px;
top: 85px;
left: 100px;
}
#tokyo {
width: 100px;
height: 42px;
top: 85px;
left: 0px;
}
#kanagawa {
width: 67px;
height: 42px;
top: 127px;
left: 0px;
} #tyubu {
width: 270px;
height: 211px;
position: absolute;
left: 438px;
top: 223px;
}
#tyubu div.area div {
background-color: #4ab969;
color: #ffffff;
}
#niigata {
width: 85px;
height: 42px;
left: 185px;
}
#toyama {
width: 67px;
height: 42px;
left: 118px;
}
#ishikawa {
width: 50px;
height: 57px;
left: 68px;
}
#fukui {
width: 68px;
height: 42px;
left: 0px;
z-index: 2;
}
#nagano {
width: 67px;
height: 85px;
left: 118px;
top: 42px
}
#yamanashi {
width: 67px;
height: 42px;
left: 118px;
top: 127px;
}
#gifu {
width: 50px;
height: 55px;
left: 68px;
top: 57px
}
#shizuoka {
width: 67px;
height: 42px;
left: 118px;
top: 169px;
}
#aichi {
width: 50px;
height: 57px;
top: 112px;
left: 68px;
} #kinki {
width: 186px;
height: 211px;
position: absolute;
left: 320px;
top: 223px;
}
#kinki div.area div {
background-color: #b0b72f;
color: #ffffff;
}
#kyoto {
width: 67px;
height: 84px;
left: 51px;
}
#shiga {
width: 68px;
height: 42px;
top: 42px;
left: 118px;
}
#osaka {
width: 67px;
height: 85px;
top: 84px;
left: 51px;
}
#nara {
width: 34px;
height: 85px;
top: 84px;
left: 118px;
}
#mie {
width: 34px;
height: 85px;
top: 84px;
left: 152px;
}
#wakayama {
width: 113px;
height: 42px;
top: 169px;
left: 61px;
}
#hyogo {
width: 51px;
height: 98px;
left: 0px;
} #tyugoku {
width: 151px;
height: 98px;
position: absolute;
left: 169px;
top: 223px;
}
#tyugoku div.area div {
background-color: #ef9f27;
color: #ffffff;
}
#tottori {
width: 50px;
height: 49px;
left: 101px;
}
#okayama {
width: 50px;
height: 49px;
top: 49px;
left: 101px;
}
#shimane {
width: 51px;
height: 49px;
left: 50px;
}
#hiroshima {
width: 51px;
height: 49px;
top: 49px;
left: 50px;
}
#yamaguchi {
width: 50px;
height: 98px;
left: 0px;
} #shikoku {
width: 184px;
height: 84px;
position: absolute;
left: 169px;
top: 350px;
}
#shikoku div.area div {
background-color: #d08f68;
color: #ffffff;
}
#kagawa {
width: 92px;
height: 42px;
right: 0px;
}
#ehime {
width: 92px;
height: 42px;
left: 0px;
}
#tokushima {
width: 92px;
height: 42px;
right: 0px;
top: 42px;
}
#kochi {
width: 92px;
height: 42px;
left: 0px;
top: 42px;
} #kyusyu {
width: 152px;
height: 247px;
position: absolute;
left: 0px;
top: 235px;
}
#kyusyu div.area div {
background-color: #ff7575;
color: #ffffff;
}
#fukuoka {
width: 50px;
height: 50px;
left: 101px;
top: 0px;
}
#saga {
width: 50px;
height: 50px;
left: 51px;
top: 0px;
}
#nagasaki {
width: 50px;
height: 50px;
left: 1px;
top: 0px;
}
#oita {
width: 50px;
height: 50px;
left: 101px;
top: 50px;
}
#kumamoto {
width: 50px;
height: 100px;
left: 51px;
top: 50px;
}
#miyazaki {
width: 50px;
height: 50px;
left: 101px;
top: 100px;
}
#kagoshima {
width: 68px;
height: 49px;
left: 83px;
top: 150px;
}
#okinawa {
width: 50px;
height: 50px;
left: 1px;
top: 197px;
} @media screen and (max-width: 5000px) {
#japan-map {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-around;
}
#japan-map p.area-title {
display: inline-block;
width: 100%;
font-size: 15px;
text-align: center;
margin-top: 1.5em;
margin-bottom: 1em;
color: #000000;
}
#hokkaido-touhoku, #kantou, #tyubu, #kinki, #tyugoku, #shikoku, #kyusyu {
display: block;
position: static;
margin: 0 1em 0 1em;
}
#japan-map div div.area {
display: block;
position: relative;
}
#hokkaido-touhoku {
height: calc(265px + 4.5em);
}
#kantou {
height: calc(174px + 4.5em);
}
#tyubu {
height: calc(211px + 4.5em);
}
#kinki {
height: calc(211px + 4.5em);
}
#tyugoku {
height: calc(98px + 4.5em);
}
#shikoku {
height: calc(84px + 4.5em);
}
#kyusyu {
height: calc(247px + 4.5em);
}
} @media screen and (max-width: 5000px) {
#japan-map {
display: block;
width: 100%;
height: auto;
}
#hokkaido-touhoku, #kantou, #tyubu, #kinki, #tyugoku, #shikoku, #kyusyu {
display: flex;
flex-wrap: wrap;
width: 100%;
height: auto;
position: static;
margin-left: 0px;
margin-right: 0px;
}
#japan-map div div.area {
font-size: 14px;
display: flex;
flex-wrap: wrap;
width: 100%;
}
#japan-map div div.area a {
height: auto;
width: 25%;
}
#japan-map div div.area div {
display: block;
border-radius: 0px;
position: static;
height: auto;
font-size: 16px;
width: 100%;
padding: 0.5em 0.3em 0.5em 0.3em;
}
}
<>
.geolonia-svg-map .boundary-line
{
stroke: #cccccc;
}