/* CSS Document */

#wrapper{
	padding-top: 0;
	}

#pagePath{
	display: none;
	}

#pageTop{
	display: none !important;
	}

#main{}
	#main h2{
		color: #1a1a1a;
		fill: #1a1a1a;
		font-weight: bold;
		text-align: center;
		}
		#main h2 i{
			position: relative;
			padding-left: 1.5em;
			}
		#main h2 svg{
			position: absolute;
			top: calc(50% - 0.6em);
			left: 0;
			width: 1.2em;
			height: 1.2em;
			}

#hero{
	padding: 0;
	background: #1a1a1a;
	}
	#hero li{
		position: relative;
		z-index: 1;
		}
	#hero a{
		display: block;
		text-decoration: none;
		}
		#hero a[href="/dc/"]{
			padding: 0;
			background: #fff;
			text-align: center;
			}
			#hero a[href="/dc/"] .wrap{
				padding: 0;
				}
	#hero .wrap{
		display: flex;
		padding: 2em 0;
		color: #fff;
		}
	#hero .heroTitle{
		font-size: 1.6em;
		font-weight: bold;
		line-height: 1.4em;
		text-align: left;
		}
	#hero .heroDetail{}
		#hero .heroDetail dl{
			display: flex;
			background: rgba(0,0,0,0.1);
			border: 1px solid #fff;
			overflow: hidden;
			}
		#hero .heroDetail dt{
			display: flex;
			padding: 1em;
			align-items: center;
			font-weight: bold;
			}
		#hero .heroDetail dt+dd{
			padding: 1em;
			background-position: bottom right;
			background-repeat: no-repeat;
			background-size: auto 100%;
			filter: drop-shadow(20px 20px 20px rgba(0,0,0,0.2));
			}
	#hero .thumb{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		opacity: 0.9;
		z-index: -1;
		}
	#hero .aomori{
		background-image: url("../images/heroMap-aomori.svg");
		}
	#hero .akita{
		background-image: url("../images/heroMap-akita.svg");
		}
	#hero .iwate{
		background-image: url("../images/heroMap-iwate.svg");
		}
	#hero .yamagata{
		background-image: url("../images/heroMap-yamagata.svg");
		}
	#hero .miyagi{
		background-image: url("../images/heroMap-miyagi.svg");
		}
	#hero .niigata{
		background-image: url("../images/heroMap-niigata.svg");
		}
	#hero .fukushima{
		background-image: url("../images/heroMap-fukushima.svg");
		}

#recommend{
	padding: 0;
	border-bottom: 4px solid #223e68;
	}
	#recommend header{
		padding-bottom: 0;
		background: #f2ece8;
		border-bottom: 4px solid #223e68;
		}
	#recommend section{
		padding: 0;
		}
	#recommend h3{
		display: none;
		}
	#recommend h3+div{
		position: relative;
		display: flex;
		flex-flow: wrap;
		justify-content: space-between;
		}
		#recommend h3+div:before,
		#recommend h3+div:after{
			content: "";
			position: absolute;
			}
	#recommend dl{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		}
	#recommend dt{
		position: relative;
		max-width: 100%;
		padding-right: 1.2em;
		color: #4d4d4d;
		fill: #1a1a1a;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		order: 2;
		}
		#recommend dt i{
			position: absolute;
			top: calc(50% - 0.5em);
			right: 0;
			}
	#recommend dt+dd{
		width: 100%;
		margin-bottom: 1em;
		order: 1;
		pointer-events: none;
		}
	#recommend dd{}
		#recommend dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: transparent;
			}
	#recommend .thumb{
		padding-top: 66.66%;
		}

#feature{}
	#feature h2{
		text-align: center;
		}
	#feature dl{
		position: relative;
		}
	#feature 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;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		}
		#feature dt i{
			display: none;
			}
	#feature dt+dd{
		position: relative;
		z-index: -1;
		}
	#feature dd{}
		#feature dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: transparent;
			}
	#feature .thumb{
		padding-top: 66.66%;
		}
	#feature .slide{
		margin: 2em 0;
		}
	#feature .slick-arrow{}
		#feature .slick-arrow svg{
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			}

#guide{
	position: relative;
	overflow: hidden;
	padding-bottom: 0;
	}
	#guide > 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;
		}
	#guide h2{
		text-align: center;
		}

#ranking{
	position: relative;
	overflow: hidden;
	counter-reset: count;
	}
	#ranking:before{
		content: "";
		position: absolute;
		top: -5%;
		left: -5%;
		width: 110%;
		height: 110%;
		background: url("../images/rankingBg.jpg") center center no-repeat;
		background-size: cover;
		filter: blur(0.2em);
		z-index: -1;
		}
	#ranking h2{
		color: #fff;
		fill: #fff;
		}
	#ranking h2+div{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
	#ranking dl{
		position: relative;
		overflow: hidden;
		}
		#ranking dl:before{
			content: "";
			position: absolute;
			top: 0;
			left: -1.5em;
			width: 3em;
			height: 3em;
			background: #000;
			transform: skew(-45deg,0);
			opacity: 0.8;
			}
		#ranking dl:after{
			counter-increment: count;
			content: counter(count);
			position: absolute;
			top: 0.5em;
			left: 0;
			width: 1.5em;
			color: #fff;
			line-height: 1em;
			font-weight: bold;
			font-style: italic;
			text-align: center;
			}
		#ranking dl:nth-of-type(1):before{
			background: #ebb802;
			}
		#ranking dl:nth-of-type(2):before{
			background: #999999;
			}
		#ranking dl:nth-of-type(3):before{
			background: #a64b01;
			}
	#ranking 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;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		}
		#ranking dt i{
			display: none;
			}
	#ranking dt+dd{
		position: relative;
		z-index: -1;
		}
	#ranking dd{}
		#ranking dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: transparent;
			z-index: 1;
			}
	#ranking .wrap{
		position: relative;
		}

#movie{
	background: #1a1a1a;
	}
	#movie h2{
		color: #fff;
		fill: #fff;
		}

#banner{}
	#banner ul{
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		}
	#banner .thumb{
		padding-top: 28%;
		}


/* for all */
@media (max-width: 1199px) {
/*1199px以下*/
#areaguideMap{}
	#areaguideMap li{}
		#areaguideMap li.iwate{
			top: 9em;
			}
		#areaguideMap li.akita{
			top: 9.5em;
			}
		#areaguideMap li.yamagata{
			top: 14em;
			}
		#areaguideMap li.fukushima{
			top: 25.5em;
			}
}
@media (max-width: 991px) {
/*991px以下*/
}


/* for mobile */
@media (max-width: 767px) {
/*767px以下*/
#main{}
	#main h2{
		margin-bottom: 1em;
		font-size: 1.4em;
		}
#hero{}
	#hero a{
		padding: 2em 0;
		}
	#hero .wrap{
		flex-direction: column;
		}
	#hero .heroTitle{
		height: 4.2em;
		}
	#hero .heroDetail{
		width: 100%;
		margin-top: 2em;
		}
		#hero .heroDetail dl{
			height: 25vw;
			}
		#hero .heroDetail dt{
			width: 50%;
			font-size: 1.2em;
			}
		#hero .heroDetail dt+dd{
			width: 50%;
			border-left: 1px solid #fff;
			}
#recommend{}
	#recommend h2+div{}
		#recommend h2+div div{
			display: none;
			}
	#recommend li{
		width: calc(25% - 0.375em);
		}
	#recommend h3+div{
		margin-left: -1em;
		margin-right: -1em;
		}
		#recommend h3+div:before{
			top: 0;
			left: 50%;
			width: 0;
			height: 100%;
			border-left: 1px solid #ccc;
			}
		#recommend h3+div:after{
			top: 33.33%;
			left: 0;
			width: 100%;
			height: 33.33%;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			}
	#recommend dl{
		width: 50%;
		padding: 1em;
		}
#feature{}
	#feature dl{
		margin: 0 0.5em;
		}
#ranking{}
	#ranking dl{
		width: calc(50% - 0.5em);
		}
		#ranking dl:nth-of-type(1){
			width: 100%;
			}
			#ranking dl:nth-of-type(1):before,
			#ranking dl:nth-of-type(1):after{
				font-size: 1.2em;
				}
			#ranking dl:nth-of-type(1) .thumb{
				padding-top: 66.66%;
				}
		#ranking dl:nth-of-type(n+2){
			margin-top: 1em;
			}
		#ranking dl:nth-of-type(8){
			display: none;
			}
#banner{}
	#banner h3{
		font-size: 1.2em;
		}
	#banner ul{
		margin-top: 1em;
		justify-content: space-between;
		}
	#banner li{
		width: calc(50% - 0.5em);
		}
		#banner li:nth-child(n+3){
			margin-top: 1em;
			}
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#hero{}
	#hero li{}
		#hero li:first-child{
			padding-top: 15vw;
			}
	#hero .heroDetail{
		height: 25vw;
		}
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
#hero{}
	#hero li{}
		#hero li:first-child{
			padding-top: 8vw;
			}
}


/* for TabletPC */
@media (min-width: 768px) {
/*768px以上*/
#hero{}
	#hero li:nth-child(odd){}
		#hero li:nth-child(odd) .heroTitle{
			padding-right: 1em;
			}
	#hero li:nth-child(even){}
		#hero li:nth-child(even) .wrap{
			flex-direction: row-reverse;
			}
		#hero li:nth-child(even) .heroTitle{
			padding-left: 1em;
			text-align: right;
			}
	#hero .wrap{
		align-items: center;
		justify-content: space-between;
		}
	#hero .heroDetail{
		margin-top: 0;
		}
		#hero .heroDetail dl{
			flex-direction: column;
			width: 20em;
			}
		#hero .heroDetail dt{
			flex-wrap: wrap;
			}
		#hero .heroDetail dt+dd{
			border-top: 1px solid #fff;
			}
#recommend{}
	#recommend h2+div{
		display: flex;
		justify-content: space-between;
		align-items: center;
		}
		#recommend h2+div > div{
			font-size: 1.1875em;
			}
	#recommend h3+div{}
		#recommend h3+div:before{
			left: calc(33.33% - 0.665em);
			width: calc(33.33% + 1.33em);
			height: 100%;
			border-left: 1px solid #ccc;
			border-right: 1px solid #ccc;
			overflow: hidden;
			}
		#recommend h3+div:after{
			top: 50%;
			left: 0;
			width: 100%;
			border-top: 1px solid #ccc;
			}
	#recommend dl{
		width: calc(33.33% - 2.66em);
		padding: 2em 0;
		}
		#recommend dl:nth-of-type(3n+2){
			margin: 0 auto;
			}
#feature{
	overflow: hidden;
	}
#banner{}
	#banner h3{
		font-size: 1.25em;
		}
	#banner ul{
		margin-top: 2em;
		}
}
@media (min-width: 768px) and (max-width: 1199px) {
/*768px～1199px*/
#main{}
	#main h2{
		margin-bottom: 1em;
		font-size: 2.25em;
		}
#ranking{}
	#ranking dl{
		width: calc(33.33% - 0.66em);
		}
		#ranking dl:nth-of-type(n+3){
			margin-top: 1em;
			}
		#ranking dl:nth-of-type(1){
			width: calc(66.66% - 0.33em);
			}
			#ranking dl:nth-of-type(1) .thumb{
				padding-top: calc(50% - 0.66em);
				}
}
@media (min-width: 768px) and (max-width: 991px) {
/*768px～991px*/
#hero{}
	#hero li{}
		#hero li:first-child{
			padding-top: 5em;
			}
	#hero a{
		padding: 3em 0;
		}
	#hero .heroTitle{
		font-size: 2.5em;
		}
	#hero .heroDetail{}
		#hero .heroDetail dt{
			height: 6.67em;
			padding: 0.667em;
			font-size: 1.5em;
			}
		#hero .heroDetail dt+dd{
			height: 10em;
			padding: 1em;
			}
#recommend{}
	#recommend li{
		width: 8em;
		}
	#recommend li+li{
		margin-left: 0.5em;
		}
#feature{}
	#feature dl{
		margin: 0 0.75em;
		}
#ranking{}
	#ranking dl{}
		#ranking dl:before,
		#ranking dl:after{
			font-size: 1.14285em;
			}
#banner{}
	#banner li{
		width: calc(33.33% - 0.67em);
		}
		#banner li:nth-child(3n+2){
			margin: 0 1em;
			}
		#banner li:nth-child(n+4){
			margin-top: 1em;
			}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
.scrollTop{}
	.scrollTop #header{
		background: transparent;
		}
	.scrollTop #siteName{}
		.scrollTop #siteName a{
			/*fill: #fff;*/
			}
	.scrollTop #navButton{
		display: none;
		}
	.scrollTop #nav{
		background: none;
		}
	.scrollTop #globalMenu{}
		.scrollTop #globalMenu ul{
			padding-right: 9em;
			}
		.scrollTop #globalMenu a{
			font-size: 0.875em;
			}
		.scrollTop #globalMenu a{
			/*color: #fff;*/
			}
	.scrollTop #extraMenu{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		}
		.scrollTop #extraMenu ul,
		.scrollTop #extraMenu dl{
			width: 9em;
			}
		.scrollTop #extraMenu i{
			font-size: 1em;
			}
		.scrollTop #extraMenu li{}
			.scrollTop #extraMenu li a{
				padding: 0.5em;
				padding-right: 1em;
				background: #1a1a1a;
				}
		.scrollTop #extraMenu .wrap{
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			}
	.scrollTop #selectLanguage{
		margin-top: 0.5em;
		border-radius: 1em;
		}
		.scrollTop #selectLanguage dt{
			padding: 0.5em;
			padding-right: 1em;
			}
		.scrollTop #selectLanguage a{
			padding: 0.5em;
			}
	body.scrollTop{}
		body.scrollTop #announceLink+#wrapper #extraMenu{
			top: 4em;
			}
#header{
	transition: background 0.2s ease-out;
	}
#siteName{}
	#siteName svg{
		transition: all 0.2s ease-out;
		}
#globalMenu{}
	#globalMenu ul{
		transition: padding 0.2s ease-out;
		}
#extraMenu{
	transition: opacity 0.2s ease-out;
	}
#hero{}
	#hero a{
		padding: 4em 0;
		}
		#hero a[href="/dc/"]{}
			#hero a[href="/dc/"]:before{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,1));
				}
		#hero a[href="/dc/"] img{
			width: 100%;
			height: auto;
			}
	#hero .heroTitle{
		font-size: 2.75em;
		}
	#hero .heroDetail{}
		#hero .heroDetail dt{
			height: 6em;
			padding: 0.6em;
			font-size: 1.75em;
			}
		#hero .heroDetail dt+dd{
			height: 8.887em;
			padding: 0.887em;
			font-size: 1.125em;
			}
#recommend{}
	#recommend li+li{
		margin-left: 1em;
		}
#feature{}
	#feature dl{
		margin: 0 1em;
		}
#ranking{}
	#ranking dl{
		width: calc(33.33% - 1em);
		}
		#ranking dl:before,
		#ranking dl:after{
			font-size: 1.5625em;
			}
		#ranking dl:nth-of-type(n+3){
			margin-top: 1.5em;
			}
		#ranking dl:nth-of-type(1){
			width: calc(66.66% - 0.5em);
			}
			#ranking dl:nth-of-type(1) .thumb{
				padding-top: calc(50% - 1em);
				}
#banner{}
	#banner li{
		width: calc(25% - 0.75em);
		margin-left: 1em;
		}
		#banner li:nth-child(4n+1){
			margin-left: 0;
			}
		#banner li:nth-child(n+5){
			margin-top: 1em;
			}
}
@media (min-width: 992px) and (max-width: 1199px) {
/*992px～1199px*/
.scrollTop{}
	.scrollTop #siteName{}
		.scrollTop #siteName svg{
			font-size: 5em;
			}
	.scrollTop #globalMenu{}
		.scrollTop #globalMenu ul{
			padding-left: 10em;
			}
		.scrollTop #globalMenu li+li{
			margin-left: 1em;
			}
#hero{}
	#hero li{}
		#hero li:first-child{
			padding-top: 6em;
			}
	#hero a{}
		#hero a[href="/dc/"]{}
			#hero a[href="/dc/"]:before{
				height: 6em;
				}
#recommend{}
	#recommend li{
		width: 10em;
		}
}
@media (min-width: 1200px) {
/*1200px以上*/
.scrollTop{}
	.scrollTop #siteName{}
		.scrollTop #siteName svg{
			font-size: 7em;
			}
	.scrollTop #globalMenu{}
		.scrollTop #globalMenu ul{
			padding-left: 14em;
			}
#main{}
	#main h2{
		margin-bottom: 1em;
		font-size: 2.75em;
		}
#hero{}
	#hero li{}
		#hero li:first-child{
			padding-top: 8em;
			}
	#hero a{}
		#hero a[href="/dc/"]{}
			#hero a[href="/dc/"]:before{
				height: 8em;
				}
#recommend{}
	#recommend li{
		width: 12em;
		}
}


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


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