/* CSS Document */

#areaguide{
	padding-top: 0;
	}
	#areaguide header{
		position: relative;
		padding: 0;
		overflow: hidden;
		}
		#areaguide header > svg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			fill: rgba(18,44,64,0.06);
			color: #122c54;
			background: #d3f0f0;
			z-index: -1;
			}

#lead{
	background: #fff;
	filter: drop-shadow(0.2em 0.2em 0.2em rgba(0,0,0,0.1));
	}

#guideContents{}
	#guideContents section{
		width: 100%;
		background: #1a1a1a;
		color: #fff;
		fill: #fff;
		}
	#guideContents dl{
		position: relative;
		margin: 1px 1px 0 0;
		}
	#guideContents dt{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 1em;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
		background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
		color: #fff;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		z-index: 1;
		}
	#guideContents .title{
		order: 1;
		}
	#guideContents .lead{
		order: 2;
		}
	#guideContents .spot{
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		background: #fff;
		order: 4;
		}
	#guideContents .center{
		order: 3;
		}
	#guideContents .thumb{
		padding-top: 66.66%;
		}
	#guideContents .linkBut{
		background: #fff;
		color: #1a1a1a;
		fill: #1a1a1a;
		}
	#guideContents .aomori{
		background: #147fa3;
		}
		#guideContents .aomori a:hover{
			color: #147fa3;
			fill: #147fa3;
			}
	#guideContents .akita{
		background: #d9383a;
		}
		#guideContents .akita a:hover{
			color: #d9383a;
			fill: #d9383a;
			}
	#guideContents .iwate{
		background: #bf8f17;
		}
		#guideContents .iwate a:hover{
			color: #bf8f17;
			fill: #bf8f17;
			}
	#guideContents .yamagata{
		background: #539e2e;
		}
		#guideContents .yamagata a:hover{
			color: #539e2e;
			fill: #539e2e;
			}
	#guideContents .miyagi{
		background: #f08426;}
		#guideContents .miyagi a:hover{
			color: #f08426;
			fill: #f08426;
			}
	#guideContents .niigata{
		background: #829799;
		}
		#guideContents .niigata a:hover{
			color: #829799;
			fill: #829799;
			}
	#guideContents .fukushima{
		background: #e56e80;
		}
		#guideContents .fukushima a:hover{
			color: #e56e80;
			fill: #e56e80;
			}


/* for all */
@media (max-width: 1199px) {
/*1199px以下*/
}
@media (max-width: 991px) {
/*991px以下*/
}


/* for mobile */
@media (max-width: 767px) {
/*767px以下*/
#lead{
	margin: 2em 0;
	padding: 1em;
	}
#guideContents{}
	#guideContents section{
		display: flex;
		flex-direction: column;
		margin-top: 2em;
		padding: 1em;
		padding-bottom: 0;
		}
		#guideContents section > div+div{
			margin-top: 1em;
			}
	#guideContents h3{
		text-align: center;
		}
	#guideContents dl{
		width: calc(50% - 1px);
		}
	#guideContents .spot{
		margin-left: -1em;
		margin-right: calc(-1em - 1px);
		padding-bottom: 1px;
		}
	#guideContents .linkBut{
		width: 15em;
		}
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#areaguideMap{
	margin-top: 6em;
	}
	#areaguideMap .center{
		position: absolute;
		top: -5em;
		left: 0;
		width: 100%;
		margin: 0;
		}
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
#areaguideMap{}
	#areaguideMap .center{
		position: absolute;
		right: 0;
		bottom: 2em;
		}
}


/* for TabletPC */
@media (min-width: 768px) {
/*768px以上*/
#areaguideMap{}
	#areaguideMap .center{
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		}
#guideContents{}
	#guideContents section{
		position: relative;
		display: flex;
		align-items: center;
		}
	#guideContents dl{
		width: calc(25% - 1px);
		}
		#guideContents dl:nth-of-type(n+5){
			margin-top: 1px;
			}
	#guideContents .title{
		position: relative;
		padding-left: 1.5em;
		line-height: 1.4em;
		white-space: nowrap;
		order: 1;
		}
		#guideContents .title i{
			position: absolute;
			top: calc(50% - 0.5em);
			left: 0;
			padding: 0;
			}
		#guideContents .title svg{
			position: static;
			}
	#guideContents .lead{
		width: 100%;
		margin-top: 0;
		border-left: 1px solid rgba(255,255,255,0.2);
		order: 2;
		}
	#guideContents .spot{
		position: absolute;
		left: 0;
		bottom: 0;
		width: calc(100% + 1px);
		order: 4;
		}
	#guideContents .center{
		margin: 0 0 0 auto;
		white-space: nowrap;
		order: 3;
		}
	#guideContents .linkBut{
		display: block;
		}
}
@media (min-width: 768px) and (max-width: 1199px) {
/*768px～1199px*/
#lead{
	margin: 3em 0;
	padding: 1.5em;
	}
#guideContents{}
	#guideContents section{
		margin-top: 3em;
		padding: 1.5em;
		padding-bottom: calc(33.33% + 1.5em);
		}
}
@media (min-width: 768px) and (max-width: 991px) {
/*768px～991px*/
#guideContents{}
	#guideContents .lead{
		margin-left: 1.5em;
		padding: 0 1.5em;
		}
	#guideContents .linkBut{
		width: 12em;
		}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#lead{
	margin: 4em 0;
	padding: 2em;
	}
#guideContents{}
	#guideContents section{
		margin-top: 4em;
		padding: 2em;
		padding-bottom: calc(33.33% + 2em);
		}
	#guideContents .lead{
		margin-left: 2em;
		padding: 0 2em;
		}
	#guideContents .linkBut{
		width: 12em;
		}
}
@media (min-width: 992px) and (max-width: 1199px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
#areaguide{}
	#areaguide header{
		padding-bottom: 0;
		}
}


/* Edge */
@supports (-ms-ime-align:auto) {
}


/* ie */
@media all and (-ms-high-contrast: none) {
}