#map .message {
	color: #d68615;
	margin-bottom: 10px;
}

#map .area__list {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: auto;
}


@media screen and (min-width: 768px) {
	#map {
		padding: 1ex 1em;
		background: #eef0f0;
	}
	
	#map .content {
		position: relative;
		margin: 0 auto;
		padding: 30px 0;
		width: 580px;
	}
	
	#map .content__image {
		display: block;
		margin: 50px auto;
		padding-right: 80px;
	}
	
	
	#map .area {
		position: absolute;
		width: 64px;
		border-radius: 6px;
		border: 1px solid #ccc;
		overflow: hidden;
		box-shadow: 1px 1px 5px rgba(0,0,0,.1);
	}
	#map .area.wide {
		width: 128px;	
	}
	
	#map #area_hokkaido {
		top: 40px;
		left: 400px;
	}
	#map #area_tohoku {
		top: 150px;
		left: 520px;
	}
	#map #area_kanto {
		top: 180px;
		left: 450px;
	}
	#map #area_chubu {
		top: 0;
		left: 280px;
	}
	#map #area_tokai {
		top: 360px;
		left: 280px;
	}
	#map #area_kansai {
		top: 40px;
		left: 210px;
	}
	#map #area_chugoku {
		top: 70px;
		left: 140px;
	}
	#map #area_shikoku {
		top: 360px;
		left: 140px;
	}
	#map #area_kyushu {
		top: 120px;
		left: 10px;
	}
	#map #area_okinawa {
		top: 370px;
		left: 25px;
	}
	
	#map .area__toggle_button {
		display: none;
	}

	#map .area__list {
		font-size: 14px;
		background: #fff;
	}

	#map .area__item {
		float: left;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
		width: 100%;
		text-align: center;
	}
	#map .wide .area__item {
		width: 50%;
	}
	#map .wide .area__item:nth-child(2n) {
		border-left: 1px solid #eee;
	}
	#map .area__item:last-child,
	#map .wide .area__item:nth-last-child(2) {
		border-bottom: 0;
	}
	
	#map .area__item a {
		text-decoration: none;
	}	
}


@media screen and (max-width: 768px) {
	#map {
		padding: 1ex 1em;
		background: #ebf0f0;
	}
	
	#map .message {
		text-align: center;
	}

	#map .content__image {
		display: none;
	}
	
	#map .area {
		position: relative;
		display: inline-block;
		width: 32%;
		margin-bottom: 10px;
	}
	

	#map .area__toggle_button {
		position: relative;
		display: block;
		padding: 15px 10px;
		font-size: 16px;
		border-radius: 6px;
		background: #26a;
		color: #fff;
		box-shadow: 1px 1px 5px rgba(0,0,0,.1);
		transition: .5s background ease, .5s border-radius ease;
	}
	#map .area__toggle_button.is-active {
		background: #0a3344;
		border-radius: 6px 6px 0 0;
	}

	#map .area__toggle_button .icon {
		position: absolute;
		top: 50%;
		right: 10px;
		width: 25px;
		height: 25px;
		margin-top: -13px;
		border-radius: 13px;
		background: #fff;
   	}

	#map .area__toggle_button .icon:before,
   	#map .area__toggle_button .icon:after {
	    content: "";
	    position: absolute;
	    top: 11px;
		left: 5px;
    	width: 16px;
   	    height: 4px;
	    background: #26a;
		transition: .5s background ease, .5s transform ease;
	}

	#map .area__toggle_button.is-active .icon:before,
	#map .area__toggle_button.is-active .icon:after {
		background: #0a3344;
	}

	#map .area__toggle_button .icon:before {
	    transform: rotate(90deg);
   	}

	#map .area__toggle_button.is-active .icon:before {
	    transform: rotate(0);
	}


	#map .area__list {
		position: absolute;
		border-left: 1px solid #eee;
		border-right: 1px solid #eee;
		height: 0;
		width: 100%;
		font-size: 16px;
		border-radius: 0 0 6px 6px;
		background: rgba(255,255,255,.95);
		box-shadow: 1px 1px 5px rgba(0,0,0,.1);
		z-index: 1;
		overflow: hidden;
		transition: .5s height ease;
	}

	#map .area__item {
		border-bottom: 1px solid #eee;
		width: 100%;
		text-align: center;
	}
	
	#map .area__item a {
		display: block;
		padding: 1ex 0;
		text-decoration: none;
	}
}