@charset "UTF-8";
/* CSS Document */

.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#fff;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}
.modaal-content-container{
 padding:10px;
}
.video{
	background-image: url(../img/video.webp);
    background-size: cover;
    background-size: 1100px;
		width: 100%;
    background-repeat: no-repeat;
    height: 570px;
    margin: 0 auto;
    background-position: center;

}
#video img{
	max-width: 230px;
	width: 100%;
			position: relative;
			top: 105%;
			left: 0%;
			-ms-transform: translate(-0%,-0%);
			-webkit-transform: translate(-0%,-0%);
			transform: translate(0%,-186%);
			margin: 0;
			padding: 0;
			z-index: 999;
}

#video img:hover{
	width: 180px;
	top: 95%;


}
#video a:hover{
	
	opacity: 1;
}
@media(max-width:1060px){
	.video{
		background-image: url(../img/video.webp);
		background-size: 99vw;
	}
	#video img{
	max-width: 230px;
	width: 100%;
			position: relative;
			top: 105%;
			left: 0%;
			-ms-transform: translate(-0%,-0%);
			-webkit-transform: translate(-0%,-0%);
			transform: translate(0%,-186%);
			margin: 0;
			padding: 0;
			z-index: 999;
}

}
@media(max-width:768px){
	.video{
		background-image: url(../img/video.webp);
			background-size: cover;
			background-size: 102%;
			width: 100%;
			background-repeat: no-repeat;
			height: 415px;
			margin: 43px auto;
			background-position: center;
			position: relative;
			z-index: 8;
			padding: 0 14px;
	}
	#video img{
		max-width: 140px;
		width: 100%;
				position: relative;
				top: 99%;
				left: 0%;
				-ms-transform: translate(-0%,-0%);
				-webkit-transform: translate(-0%,-0%);
				transform: translate(0%,-186%);
				margin: 0;
				padding: 0;
				z-index: 999;
	}
	#video img:hover{
		max-width: 120px;
		width: 100%;
				position: relative;
				top: 92%;
				left: 0%;
				-ms-transform: translate(-0%,-0%);
				-webkit-transform: translate(-0%,-0%);
				transform: translate(0%,-186%);
				margin: 0;
				padding: 0;
				z-index: 999;
	}
}
@media(max-width:500px){
	.video{
		
			max-height: 350px;
		
	}
}
	@media(max-width:380px){
		.video{
			
				height: 200px;
		
		}
		#video img{
			max-width: 105px;
			width: 100%;
					position: relative;
					top: 118%;
					left: 0%;
					-ms-transform: translate(-0%,-0%);
					-webkit-transform: translate(-0%,-0%);
					transform: translate(0%,-186%);
					margin: 0;
					padding: 0;
					z-index: 999;
		}
		#video img:hover{
			max-width: 95px;
			width: 100%;
					position: relative;
					top: 110%;
					left: 0%;
					-ms-transform: translate(-0%,-0%);
					-webkit-transform: translate(-0%,-0%);
					transform: translate(0%,-186%);
					margin: 0;
					padding: 0;
					z-index: 999;
		}
}