/* CSS Document */

#top{
	padding: 0;
	}

#hero{
	display: flex;
	flex-direction: column-reverse;
	padding: 0;
	}
	#hero h1{
		color: #1a1a1a;
		text-align: center;
		}
	#hero li{
		display: flex;
		align-content: center;
		justify-content: center;
		}
	#hero .headline{
		display: flex;
		}
	#hero .thumb{
		padding-top: 50%;
		}
	#hero .logo{
		padding: 0 1em;
		}
	#hero .slick-prev{
		left: 1em;
		}
	#hero .slick-next{
		right: 1em;
		}
	#hero a{
		display: block;
		width: 100%;
		}
	#hero [data-caption]{
		position: relative;
		}
		#hero [data-caption]:before{
			content: attr(data-caption);
			position: absolute;
			top: 1em;
			left: 1em;
			max-width: calc(100% - 10em);
			padding: 0.5em;
			background: rgba(0,0,0,0.5);
			color: #fff;
			z-index: 1;
			}
	#hero [data-icon]{}
		#hero [data-icon]:after{
			content: "";
			position: absolute;
			top: 1em;
			right: 1em;
			width: 15%;
			height: 100%;
			background: url("../images/heroLogo.png") top right no-repeat;
			background-size: 100% auto;
			pointer-events: none;
			z-index: 1;
			}
	#hero [data-icon="black"]{}
		#hero [data-icon="black"]:after{
			background-image: url("../images/heroLogo-black.png");
			}
	#hero [data-icon="white"]{}
		#hero [data-icon="white"]:after{
			background-image: url("../images/heroLogo-white.png");
			}

#picup{
	padding-bottom: 0;
	}
	#picup dl{
		position: relative;
		}
	#picup dt{
		display: none;
		}
	#picup dt+dd{
		order: -1;
		}
	#picup dd{}
		#picup dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			}
	#picup .wrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}

#topics{}
	#topics h2+div{
		margin-top: 0;
		}

#topicsNone{}
	#topicsNone:not(.topicsNone){
		display: none;
		}
		#topicsNone+article{
			display: none;
			}

#about{
	background: #f2f2f2;
	}

#copy{
	padding: 0;
	}
	#copy article+article{
		padding-top: 0;
		}
	#copy header{
		padding: 0;
		}
	#copy section{
		padding: 0;
		padding-top: 2em;
		}
	#copy .wrap{
		display: flex;
		}

#logo{
	padding: 0;
	}
	#logo header,
	#logo section{
		padding-top: 0;
		}
	#logo .wrap{
		display: flex;
		}

#guide{
	position: relative;
	overflow: hidden;
	padding-bottom: 0;
	}
	#guide > svg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		}
	#guide h2{
		color: #1a1a1a;
		fill: #1a1a1a;
		text-align: center;
		}

#banner{}
	#banner dl{
		display: flex;
		flex-wrap: wrap;
		}
		#banner dl:nth-of-type(3){
			padding-top: 2em;
			border-top: 1px solid #000;
			}
			#banner dl:nth-of-type(3) dt{
				display: none;
				}
	#banner dl+dl{
		margin-top: 2em;
		}
	#banner dt{
		width: 100%;
		margin-bottom: 1em;
		}
	#banner dt+dd{
		margin-top: 0;
		}
	#banner dd{
		}
		#banner dd a{
			display: block;
			}
/*		#banner dd a{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			text-align: center;
			}
		#banner dd a:hover{
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			border-color: #223a70;
			}
	#banner dl:nth-child(1){}
		#banner dl:nth-child(1) dd a{
			padding: 1em;
			border: 1px  solid #ccc;
			}
	#banner a:not([href]){
		padding: 0.8em;
		border: 1px  solid #ccc;
		}
	#banner img{
		width: 100%;
		}
*/	#banner .wrap{
		overflow: hidden;
		}
	#banner .thumb{
		background-size: contain;
		object-fit: contain;
		padding-top: 28%;
		}

.subject{
	padding: 0 1em;
	background: #f2ece8;
	border-top: 5px solid #101a63;
	}
	.subject .headline{
		color: #1a1a1a;
		text-align: center;
		}
	.subject+*{
		padding-top: 0;
		}

.title{}
	.title.point{
		position: relative;
		padding-left: 0.6em;
		color: #1a1a1a;
		}
		.title.point:before{
			content: "";
			position: absolute;
			top: 0.1em;
			left: 0;
			width: 5px;
			height: 1em;
			background: #101a63;
			}

.linkBut{}
	.linkBut.download{
		background: #fff;
		}



/* 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以下*/
#pageLink{
	display: none;
	}
#hero{}
	#hero .headline{
		flex-direction: column;
		justify-content: center;
		}
		#hero .headline time{
			margin-top: 0.5em;
			}
	#hero .wrap{
		width: 100%;
		}
.subject{}
	.subject .headline{
		padding: 1em 0;
		}
}


/* for mobile */
@media (max-width: 767px) {
/*767px以下*/
#picup{}
	#picup dl{
		width: calc(50% - 0.5em);
		}
	#picup dl:nth-of-type(n+3){
		margin-top: 1em;
		}
#areaguideMap{
	margin-top: 2em;
	}
	#banner dl:nth-child(3){}
		#banner dl:nth-child(3) img{
			max-height: 5em;
			}
.subject{}
	.subject+*{
		margin-top: 2em;
		}
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#hero{}
	#hero [data-caption]{}
		#hero [data-caption]:before{
			font-size: 0.8em;
			}
#copy{}
	#copy figure{
		order: -1;
		margin-bottom: 1em;
		}
	#copy .wrap{
		flex-direction: column;
		}
#banner{}
	#banner dl:nth-child(1){}
		#banner dl:nth-child(1) dd{
			width: 100%;
			}
		#banner dl:nth-child(1) dd+dd{
			margin-top: 1em;
			}
	#banner dl:nth-child(n+2){}
		#banner dl:nth-child(n+2) dd{
			width: calc(50% - 0.5em);
			}
		#banner dl:nth-child(n+2) dd:nth-of-type(even){
			margin-left: 1em;
			}
		#banner dl:nth-child(n+2) dd:nth-of-type(n+3){
			margin-top: 1em;
			}
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
#copy{}
	#copy article{}
		#copy article:nth-of-type(odd){}
			#copy article:nth-of-type(odd) .wrap{
				flex-direction: row-reverse;
				}
	#copy figure{
		width: 40%;
		}
	#copy .wrap{
		justify-content: space-between;
		}
		#copy .wrap > div{
			width: calc(60% - 1em);
			}
#banner{}
	#banner dl{
		justify-content: center;
		}
	#banner dl:nth-child(1){}
		#banner dl:nth-child(1) dd{
			width: calc(50% - 0.5em);
			}
		#banner dl:nth-child(1) dd:nth-of-type(even){
			margin-left: auto;
			}
		#banner dl:nth-child(1) dd:nth-of-type(n+3){
			margin-top: 1em;
			}
	#banner dl:nth-child(n+2){}
		#banner dl:nth-child(n+2) dd{
			width: calc(33.33% - 0.66em);
			}
		#banner dl:nth-child(n+2) dd:nth-of-type(3n+2){
			margin-left: 1em;
			margin-right: auto;
			}
		#banner dl:nth-child(n+2) dd:nth-of-type(n+4){
			margin-top: 1em;
			}
}


/* for TabletPC */
@media (min-width: 768px) {
/*768px以上*/
#copy{}
	#copy article{}
		#copy article:nth-of-type(odd){}
			#copy article:nth-of-type(odd) .wrap{
				flex-direction: row-reverse;
				}
	#copy .wrap{
		justify-content: space-between;
		}
#banner{}
	#banner dl{
		justify-content: center;
		}
	#banner dl:nth-child(3){
		padding-left: 11%;
		padding-right: 11%;
		}
}
@media (min-width: 768px) and (max-width: 1199px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991px) {
/*768px～991px*/
#picup{}
	#picup dl{
		width: calc(50% - 0.75em);
		}
	#picup dl:nth-of-type(n+3){
		margin-top: 1.5em;
		}
#copy{}
	#copy figure{
		width: 40%;
		}
	#copy .wrap{}
		#copy .wrap > div{
			width: calc(60% - 1.5em);
			}
#banner{}
	#banner dl:nth-child(1){}
		#banner dl:nth-child(1) dd{
			width: calc(50% - 0.5em);
			}
		#banner dl:nth-child(1) dd:nth-of-type(even){
			margin-left: auto;
			}
		#banner dl:nth-child(1) dd:nth-of-type(n+3){
			margin-top: 1em;
			}
	#banner dl:nth-child(n+2){}
		#banner dl:nth-child(n+2) dd{
			width: calc(33.33% - 0.67em);
			margin-left: 1em;
			}
		#banner dl:nth-child(n+2) dd:nth-of-type(3n+1){
			margin-left: 0;
			}
		#banner dl:nth-child(n+2) dd:nth-of-type(n+4){
			margin-top: 1em;
			}
.subject{}
	.subject+*{
		margin-top: 3em;
		}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
body{}
	body:not(.scrollTop) #header,
	body:not(.scrollTop) #globalMenu{
		opacity: 0;
		pointer-events: none;
		}
		body:not(.scrollTop) #header a,
		body:not(.scrollTop) #globalMenu a{
			pointer-events: none;
			}
	body:not(.scrollTop) #nav{
		top: 0;
		height: 100vh;
		}
#header,
#globalMenu{
	transition: opacity 0.2s ease-out;
	}
#pageLink{
	position: -webkit-sticky;
	position: sticky;
	top: -1em;
	padding-top: 2em;
	padding-bottom: 0;
	z-index: 99;
	}
	#pageLink ul{
		display: flex;
		list-style: none;
		}
	#pageLink li{
		display: flex;
		width: 50%;
		}
	#pageLink li+li{
		margin-left: 0.5em;
		}
	#pageLink a{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 4em;
		padding: 0.8em 0.5em;
		background: #223a70;
		border-radius: 5px;
		color: #fff;
		line-height: 1.4em;
		text-align: center;
		text-decoration: none;
		overflow: hidden;
		}
		#pageLink a:not([href]){
			position: relative;
			background: #000;
			}
			#pageLink a:not([href]):before{
				content: "Comming soon";
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				background: rgba(34,58,112,0);
				color: rgba(255,255,255,0.5);
				font-size: 0.6em;
				font-weight: bold;
				letter-spacing: 0.2em;
				white-space: nowrap;
				}
	#pageLink i,
	#pageLink span{
		display: none;
		}
#hero{}
	#hero .headline{
		justify-content: center;
		align-items: center;
		}
		#hero .headline time{
			margin-left: 1em;
			}
	#hero .thumb{
		padding-top: 45%;
		}
#picup{}
	#picup dl{
		width: calc(50% - 1em);
		}
	#picup dl:nth-of-type(n+3){
		margin-top: 2em;
		}
#copy{}
	#copy figure{
		width: 45%;
		}
	#copy .wrap{}
		#copy .wrap > div{
			width: calc(55% - 2em);
			}
#banner{}
	#banner dl:nth-child(1){}
		#banner dl:nth-child(1) dd{
			width: 35%;
			}
		#banner dl:nth-child(1) dd:nth-of-type(even){
			margin-left: 2em;
			}
		#banner dl:nth-child(1) dd:nth-of-type(n+3){
			margin-top: 2em;
			}
	#banner dl:nth-child(n+2){}
		#banner dl:nth-child(n+2) dd{
			width: calc(33.33% - 1.34em);
			margin-left: 2em;
			}
		#banner dl:nth-child(n+2) dd:nth-of-type(3n+1){
			margin-left: 0;
			}
		#banner dl:nth-child(n+2) dd:nth-of-type(n+4){
			margin-top: 2em;
			}
.subject{}
	.subject .headline{
		padding: 1.5em 0;
		font-size: 2em;
		}
	.subject+*{
		margin-top: 4em;
		}
}
@media (min-width: 992px) and (max-width: 1199px) {
/*992px～1199px*/
#pageLink{}
	#pageLink li{
		font-size: 0.8em;
		}
}
@media (min-width: 1200px) {
/*1200px以上*/
}


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


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