#header{

	background-image:url("../images/style/skyback.jpg");
	background-repeat:no-repeat;
	background-size:100% auto;
	background-position:0 0;
	position:relative;
	
}


#mainImage{
	position:relative;
	height:596px;
	width:100%;
	background-color:#CCC;
/*	background-image:url("../images/index/mainimage000.jpg");
	background-repeat:no-repeat;
	background-position:50% 50%;
*/
}
#mainImage div._v{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

#mainImage #movieBox{
	position:absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
}
/*

#mainImage::before,
#mainImage::after{
	position:relative;
	z-index:0;
	content:"";
	display:block;
	height:298px;
	width:100%;
	background-image:url("../images/index/mainimage0011.jpg");
	background-repeat:repeat-x;
	background-position:center 0;
	position:relative;
	animation: moveback 60s linear 0s infinite normal none running;
}

#mainImage::after{
	background-image:url("../images/index/mainimage0012.jpg");
	animation-direction: reverse;
}
*/

#mainImage h1{
	width:75%;
	position:absolute;
	margin: 258px 10% 25px;
	padding: 0 2.5% 0;
	background:url("../images/style/line01.png") no-repeat center bottom;
	background-size: 100% auto;
	color:#0F479C;
	font-size:6.5em;	
	transform: rotateZ(-3deg);
	z-index:1;
	text-align:center;
}

#mainContents {
	background:none;
}

/*--------------
	コンテンツリンク
------------------*/
#contentsLinks{
	background-color:#0F479C;
	color:#FFF;
	padding:60px 0;
}

#contentsLinks h2{
	font-size:4.2em;
	text-align:center;
}
#contentsLinks h2 span{
	display:block;
	font-size:0.4em;
	text-align:center;
	color:#FFF136;
	padding:0.8em 0;
}

#contentsLinks ul{
	display:flex;
	flex-wrap: nowrap;
	justify-content:space-between;
}

#contentsLinks ul > li{
	display: inline-flex;
	width:30%;
	margin:1.51515%;
	
}

#contentsLinks ul > li a{
	position:relative;
	z-index:0;
	display:block;
	padding:12px;
	background-color:#FFF;
	color:#FFF;
	line:height:0;
}
#contentsLinks ul > li a:hover{
	color:#FFF136;
}
#contentsLinks ul > li a::before,
#contentsLinks ul > li a::after{
	position:absolute;
	z-index:1;
	content:"";
	display:block;
	height:15%;
	width:15%;
	background-color:#FFF136;
	transition: all 0.5s;
}
#contentsLinks ul > li a::before{
	top:0;
	left:0;
}
#contentsLinks ul > li a::after{
	bottom:0;
	right:0;
}
#contentsLinks ul > li a:hover::before{
	left:85%;
}
#contentsLinks ul > li a:hover::after{
	right:85%;
}

#contentsLinks ul > li a span img{
	position:relative;
	z-index:2;
}
#contentsLinks ul > li a > span._b{
	display:block;
	position:relative;

}		

#contentsLinks ul > li a span._b span{
	display:block;
	position:absolute;
	width:100%;
	z-index:10;
	bottom:0;
	background-color:rgba(23,171,205,0.7); ;
	padding:0.8em 0 1em;
	text-align:center;
	font-size:1.6em;
}



/*--------------
	メッセージ
------------------*/
#messageBox{
	background: url("../images/index/bgback.jpg") no-repeat center center;
	background-size:cover;
	background-attachment: fixed;
}
#messageBox ._gl{
	padding:6em 0 8em;
	background: linear-gradient(
		rgba(255,255,255,0.8) 0%,
		rgba(255,255,255,0.6) 50%,
		rgba(255,255,255,0.2) 100%
	);

}
#messageBox h2{
	color:#0F479C;
	font-size:4.2em;
	line-height:1.2;
	text-shadow:0 2px #FFF , 0 -2px #FFF , -2px 0 #FFF ,   2px 0 #FFF;
	text-align:center;
	margin-bottom:1.5em;
}

#messageBox div{
	color:#111;
	font-size:1.2em;
	text-align:center;
	line-height:2;
}

/*--------------
	アニメーション
------------------*/

@keyframes moveback {
	0% {	background-position:689px 0;	}
	100% {	background-position:2067px 0;	}
}

@media screen and (max-width: 1000px){

	

}

@media screen and (max-width: 640px){
	#mainImage h1{
		width:94%;
		margin: 280px 0.5% 25px;
		font-size: 6em;
		padding-bottom:0.25em;
	}
	#messageBox h2{
		font-size:2.4em;
	}
	#contentsLinks ul{
		display:block;
	}
	#contentsLinks ul > li{
		display:block;
		width:80%;
		margin:10px 10% 20px;
		
	}
	#contentsLinks ul > li a span._b span{
		font-size:3.2em;
	}

	
	#contentsLinks h2{		font-size:8em;	}
	#messageBox div { 
		padding: 0 0.5em;
	   	font-size: 1.44em;
		text-align:left;
	}
	

}