日本地域简化地图

<table align="center" border="0" cellpadding="2" cellspacing="1" id="mapUI">
	<tbody>
		<tr class="odd">
			<td colspan="8" rowspan="7" valign="top" style="text-align:left;"><p> <br>
					<span class="skyblue"> ■ </span> 北海道<br>
					<span class="blue"> ■ </span> 東北<br>
					<span class="rightgreen"> ■ </span> 関東<br>
					<span class="momo"> ■ </span> 中部<br>
					<span class="orange"> ■ </span> 近畿<br>
					<span class="purple"> ■ </span> 中国<br>
					<span class="lavender"> ■ </span> 四国<br>
					<span class="ume"> ■ </span> 九州<br>
				</p></td>
			<td colspan="3" rowspan="4" valign="top"></td>
			<td colspan="2" class="bg_skyblue twoRows"><a href="">北海道</a></td>
		</tr>
		<tr class="even">
			<td colspan="2">&nbsp;</td>
		</tr>
		<tr class="odd">
			<td class="bg_blue"><a href="">青森</a></td>
			<td class="bg_blue"><a href="">岩手</a></td>
		</tr>
		<tr class="even">
			<td class="bg_blue" align="center"><a href="">秋田</a></td>
			<td rowspan="2" align="center" class="bg_blue twoRows"><a href="">宮城</a></td>
		</tr>
		<tr class="odd">
			<td colspan="3"></td>
			<td class="bg_blue" align="center"><a href="">山形</a></td>
		</tr>
		<tr class="even">
			<td colspan="3"></td>
			<td class="bg_rightgreen"><a href="">群馬</a></td>
			<td class="bg_blue"><a href="">福島</a></td>
		</tr>
		<tr class="odd">
			<td></td>
			<td class="bg_momo"><a href="">石川</a></td>
			<td></td>
			<td rowspan="2" class="bg_rightgreen twoRows"><a href="">埼玉</a></td>
			<td class="bg_rightgreen"><a href="">栃木</a></td>
		</tr>
		<tr class="even">
			<td colspan="3"></td>
			<td class="bg_purple"><a href="">山口</a></td>
			<td class="bg_purple"><a href="">島根</a></td>
			<td class="bg_purple"><a href="">鳥取</a></td>
			<td rowspan="2" class="bg_orange twoRows"><a href="">兵庫</a></td>
			<td class="bg_orange"><a href="">京都</a></td>
			<td class="bg_orange"><a href="">滋賀</a></td>
			<td class="bg_momo"><a href="">富山</a></td>
			<td class="bg_momo"><a href="">新潟</a></td>
			<td class="bg_rightgreen"><a href="">茨城</a></td>
		</tr>
		<tr class="odd">
			<td></td>
			<td class="bg_ume"><a href="">佐賀</a></td>
			<td rowspan="2" class="bg_ume twoRows"><a href="">福岡</a></td>
			<td></td>
			<td class="bg_purple"><a href="">広島</a></td>
			<td class="bg_purple"><a href="">岡山</a></td>
			<td colspan="2" rowspan="2" class="bg_orange twoRows"><a href="">大阪</a></td>
			<td class="bg_momo"><a href="">福井</a></td>
			<td class="bg_momo"><a href="">長野</a></td>
			<td colspan="2" rowspan="2" class="bg_rightgreen twoRows"><a href="">東京</a></td>
		</tr>
		<tr class="even">
			<td></td>
			<td class="bg_ume"><a href="">長崎</a></td>
			<td colspan="4"></td>
			<td class="bg_momo"><a href="">岐阜</a></td>
			<td class="bg_momo"><a href="">山梨</a></td>
		</tr>
		<tr class="odd">
			<td></td>
			<td class="bg_ume"><a href="">熊本</a></td>
			<td class="bg_ume"><a href="">大分</a></td>
			<td></td>
			<td class="bg_lavender"><a href="">愛媛</a></td>
			<td class="bg_lavender"><a href="">香川</a></td>
			<td></td>
			<td class="bg_orange"><a href="">奈良</a></td>
			<td class="bg_orange"><a href="">三重</a></td>
			<td rowspan="2" class="bg_momo twoRows"><a href="">愛知</a></td>
			<td class="bg_momo"><a href="">静岡</a></td>
			<td rowspan="2" class="bg_rightgreen twoRows"><a href="">神奈川</a></td>
			<td rowspan="2" class="bg_rightgreen twoRows"><a href="">千葉</a></td>
		</tr>
		<tr class="even">
			<td></td>
			<td class="bg_ume"><a href="">鹿児島</a></td>
			<td class="bg_ume"><a href="">宮崎</a></td>
			<td></td>
			<td class="bg_lavender"><a href="">高知</a></td>
			<td class="bg_lavender"><a href="">徳島</a></td>
			<td></td>
			<td class="bg_orange"><a href="">和歌山</a></td>
			<td></td>
			<td></td>
		</tr>
		<tr class="odd">
			<td class="bg_ume"><a href="">沖縄</a></td>
			<td colspan="12"></td>
		</tr>
	</tbody>
</table>
<style type="text/css">
#mapUI{
    width:633px;
	font-size:12px;
	line-height: 18px;
    margin-bottom:10px;
    border-collapse:separate;
}

#mapUI td{
    padding:2px;
    text-align:center;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}

#mapUI td.twoRows{
    height:50px;
}

#mapUI td a{
    width:100%;
    height:22px;
    line-height:22px;
    overflow:hidden;
    color:#fff;
    display:block;
	text-decoration: none;
}

#mapUI td.twoRows a{
    height:50px;
    line-height:50px;
}
#mapUI td a:hover {
    background:#fff;
    color:#333;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
}
.skyblue {
    color:#99c1d6;
}
.blue {
    color:#82a0dd;
}
.rightgreen {
    color:#a2d04b;
}
.momo {
    color:#ec9b9b;
}
.orange {
    color:#fbb855;
}
.purple {
    color:#8a94d2;
}
.lavender {
    color:#c696d5;
}
.ume {
    color:#f46d6d;
}
.red {
    color: #FF6600;
}
.bg_white {
    background-color:#FFFFFF;
}
.bg_skyblue {
    background-color:#99c1d6;
}
.bg_blue {
    background-color:#82a0dd;
}
.bg_rightgreen {
    background-color:#a2d04b;
}
.bg_momo {
    background-color:#ec9b9b;
}
.bg_orange {
    background-color:#fbb855;
}
.bg_purple {
    background-color:#8a94d2;
}
.bg_lavender {
    background-color:#c696d5;
}
.bg_ume {
    background-color:#f46d6d;
}
.red_line {
    border-left:4px solid red;
}
</style>