#japan-map {
	position: relative;
	width: 777px;
	height: 482px;
	margin: 0 auto;
	background-color: none;
}

#japan-map .area-title {
	font-weight: bold;
	margin: 10px 0;
	color: #333;
	display: none;
}

#japan-map .prefecture {
	position: absolute;
	border: 1px #ffffff solid;
	text-align: center;
	font-size: 14px;
	border-radius: 6px;
	transition: all 0.2s;
	box-sizing: border-box;
}

#japan-map .prefecture-link,
#japan-map .prefecture-name {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #ffffff;
	text-decoration: none;
}

#japan-map .prefecture:hover {
	opacity: 0.5;
	transition: 0.2s;
}

#japan-map div[id^="prefecture-"] {
	position: relative;
	float: left;
	width: 100px;
	margin: 5px;
	text-align: center;
	cursor: pointer;
}

#japan-map div[id^="prefecture-"]:hover,
#japan-map .prefecture-link:hover div[id^="prefecture-"] {
	background-color: #e0e0e0;
	transition: background-color 0.3s;
}

#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;
	/* 縦方向中央揃え（Safari用） */
	justify-content: center;
	/* 横方向中央揃え */
	-webkit-justify-content: center;
	/* 横方向中央揃え（Safari用） */
	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 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;
}

#nigata {
	width: 85px;
	height: 42px;
	left: 185px;
	top: 0;
}

#toyama {
	width: 67px;
	height: 42px;
	left: 118px;
	top: 0;
}

#ishikawa {
	width: 50px;
	height: 57px;
	left: 68px;
	top: 0;
}

#fukui {
	width: 68px;
	height: 42px;
	left: 0px;
	z-index: 2;
	top: 0;
}

#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;
	top: 0;
}

#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;
}

#hyougo {
	width: 51px;
	height: 98px;
	left: 0px;
	top: 0;
}

/* 中国 */

#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;
	top: 0;
}

#okayama {
	width: 50px;
	height: 49px;
	top: 49px;
	left: 101px;
}

#shimane {
	width: 51px;
	height: 49px;
	left: 50px;
	top: 0;
}

#hiroshima {
	width: 51px;
	height: 49px;
	top: 49px;
	left: 50px;
}

#yamaguchi {
	width: 50px;
	height: 98px;
	left: 0px;
	top: 0;
}

/* 四国 */

#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;
	top: 0;
}

#ehime {
	width: 92px;
	height: 42px;
	left: 0px;
	top: 0;
}

#tokushima {
	width: 92px;
	height: 42px;
	right: 0px;
	top: 42px;
}

#kouchi {
	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;
}

#japan-map a {
	color: #fff !important;
	text-decoration: none;
}

/****************************************
	レスポンシブ
****************************************/
@media screen and (max-width: 776px) {
	#japan-map {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	#japan-map p.area-title,
	#japan-map .area-title {
		display: 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);
	}

}

/* レスポンシブ max-776px */



@media screen and (max-width: 500px) {
	#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;
	}

	#japan-map div div.area div {
		display: block;
		border-radius: 0px;
		position: static;
		height: auto;
		font-size: 16px;
		width: 20%;
		padding: 0.5em 0.3em;
	}

	#japan-map .area-title {
		width: 100%;
		display: block;
		text-align: center;
		padding: 0.5em 0;
		background: #f5f5f5;
		margin: 1em 0;
	}
}

/*pc画面の時の幅調整*/
@media screen and (min-width: 768px) {
	#japan-map {
		transform: scale(.8);
		left: calc(0% - 56px);
	}
}

/* 市区町村選択モーダル */
#japan-map-municipalities-modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: 10% auto;
	padding: 25px;
	border: 1px solid #888;
	width: 90%;
	max-width: 600px;
	border-radius: 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	z-index: 2;
}

.close-modal {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
	line-height: 0.8;
	position: absolute;
	right: 15px;
	top: 10px;
}

.close-modal:hover,
.close-modal:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

#municipality-modal-title {
	margin-top: 0;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e5e5e5;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

/* グリッドレイアウト */
.municipality-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}

.municipality-item {
	width: 48%;
	padding: 10px 15px;
	margin-bottom: 8px;
	border: 1px solid #f0f0f0;
	border-radius: 4px;
	transition: background-color 0.2s;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.municipality-item:hover {
	background-color: #f9f9f9;
}

.municipality-link {
	display: block;
	width: 100%;
	color: #333 !important;
	text-decoration: none !important;
	font-size: 0.9em !important;
}

.municipality-link:hover {
	text-decoration: underline;
}

.municipality-name {
	color: #666;
	font-size: 0.9em;
	width: 100%;
	display: block;
}

.prefecture-link-item {
	width: 100%;
	background-color: #f5f5f5;
	font-weight: bold;
	text-align: center;
	margin-bottom: 15px;
}

.prefecture-link-item .municipality-link {
	font-size: 1em;
}

/* モーダル内の市区町村リスト - 2列表示を強制 */
#japan-map-municipalities-modal .modal-content #municipality-list .municipality-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: space-between !important;
	width: 100% !important;
}

#japan-map-municipalities-modal .modal-content #municipality-list .municipality-grid .municipality-item {
	display: flex !important;
	width: 48% !important;
	padding: 10px 15px !important;
	margin-bottom: 8px !important;
	border: 1px solid #f0f0f0 !important;
	border-radius: 4px !important;
	transition: background-color 0.2s !important;
	box-sizing: border-box !important;
	align-items: center !important;
}

#japan-map-municipalities-modal .modal-content #municipality-list .municipality-grid .municipality-item:hover {
	background-color: #f9f9f9 !important;
}

#japan-map-municipalities-modal .modal-content #municipality-list .municipality-grid .municipality-item a.municipality-link {
	display: block !important;
	width: 100% !important;
	color: #333 !important;
	text-decoration: none !important;
	font-size: 0.8em !important;
	font-weight: bold;
}

#japan-map-municipalities-modal .modal-content #municipality-list .municipality-grid .municipality-item a.municipality-link:hover {
	text-decoration: underline !important;
}

#japan-map-municipalities-modal .modal-content #municipality-list .municipality-grid .municipality-item span.municipality-name {
	display: block !important;
	width: 100% !important;
	color: #666 !important;
	font-size: 0.9em !important;
}

#japan-map-municipalities-modal .modal-content #municipality-list .municipality-grid .prefecture-link-item {
	width: 100% !important;
	background-color: #f5f5f5 !important;
	font-weight: bold !important;
	text-align: center !important;
	margin-bottom: 15px !important;
}

#japan-map-municipalities-modal .modal-content #municipality-list .municipality-grid .prefecture-link-item .municipality-link {
	font-size: 1em !important;
}

/* レスポンシブ調整 */
@media screen and (max-width: 600px) {
	.modal-content {
		width: 90%;
		margin: 15% auto;
		padding: 10px;
	}

	.municipality-item {
		width: 48%;
		/* スマホ表示でも2列にする */
		margin-bottom: 5px;
		padding: 8px 10px;
	}

	.municipality-link {
		font-size: 0.8em;
	}
}

/* 市区町村ショートコード用スタイル */
.japan-map-municipalities-main-title {
	font-size: 1.1em;
	margin: 30px 0 20px;
	padding-bottom: 1px;
	border-bottom: 1px solid #45b4e7;
	font-weight: bold;
}

.japan-map-municipalities-container .japan-map-prefecture-title {
	font-size: 1.25em;
	margin: 20px 0 15px;
	padding-left: 10px;
	border-left: 4px solid #0073aa;
}

ul.japan-map-municipalities-list.grid-3cols {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 15px !important;
	margin: 0 0 30px 0 !important;
}

ul.japan-map-municipalities-list.grid-3cols li {
	transition: all 0.2s ease !important;
	margin: 0 !important;
}

ul.japan-map-municipalities-list.grid-3cols li a {
	text-decoration: none !important;
	color: #333 !important;
	border-bottom: dashed 1px #777;
	font-size: .9em;
}

ul.japan-map-municipalities-list.grid-3cols li a::after {
	content: none !important;
}

ul.japan-map-municipalities-list.grid-3cols li:hover {
	background-color: #e5f1f8 !important;
	transform: translateY(-2px);
}

ul.japan-map-municipalities-list.grid-3cols li a:hover {
	text-decoration: underline !important;
}

/* レスポンシブ対応 - タブレット及びスマートフォン（2列） */
@media screen and (max-width: 768px) {
	ul.japan-map-municipalities-list.grid-3cols {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}