@charset "UTF-8";
img {
  pointer-events: none;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-touch-callout:none;
	-moz-user-select:none;
	touch-callout:none;
	user-select:none;
}

/****************************************
header
*****************************************/
.site-header{
	background: rgba(255,255,255,0.8);
	padding: 15px;
	position: fixed;
	top: 0;
	transition: .5s;
	width: 100%;
	z-index: 999;
}

.site-header.hide{
	transform: translateY(-100%);
}

.site-logo__img{
	height: auto;
	width: 50%;
}
.gnav__menu__item{
	margin-left: 15px;
}

.gnav__menu__item__link{
	color: #333;
	font-size: 20px;
	font-weight: 700;
	top: 50%;
	position: relative;
}

/****************************************
footer
*****************************************/
.site-footer{
	background: #333;
	color: #fff;
	padding: 10px 0;
	bottom: -185px;
	position: relative;
}
/****************************************
contents
*****************************************/
.hero{
	margin-bottom: 120px;
	max-height: 600px;
	overflow: hidden;
}

.hero__img{
	height: auto;
	width: 100%;
}

.sec{
	background-color:rgba(255,255,255,0.75);
	position:relative;
	top:250px;
	margin-bottom: 200px;
}

.page-title{
	text-align: center;
}

.page-title__title{
	top: 100px;
	color: #333;
	font-size: 48px;
	font-weight: 700;
	line-height: 2;
	margin-bottom: 40px;
}

.img-container{
	overflow: hidden;
	position: relative;
}

.img-container__img{
	display: block;
	opacity: 0;
	position: relative;
	transition:all .5s .3s ease;
	z-index: 0;
}

.img-container:before{
	background: #333;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transform: translateX(-100%);
	transition:all .8s 0s ease;
	width: 100%;
	z-index: 1;
}

.text-container{
	padding:0 50px;
}

.text-container__title{
	color: #000;
	display: inline-block;
	font-size: 60px;
	font-weight: 700;
	overflow: hidden;
	position: relative;
	z-index: 0;
}

.text-container__title:before{
	background: #333;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transform: translateX(-100%);
	transition:all .8s .3s ease;
	width: 100%;
	z-index: 1;
}

.text-container__title__inner{
	display: inline-block;
	opacity: 0;
	transition: all .8s .5s ease;
}

.text-container__text{
	color: #000;
	left: -50px;
	opacity: 0;
	position: relative;
	transition: all .5s .5s ease;
	font-size: 20px;
}

.animation-box:nth-child(odd){
	background: #eee;
}

.animation-box{
	padding: 120px;
	transition:.5s;
}

.animation-box.active{
	background: #666;
	color: #fff;
}
/*アニメーションするプロパティを設定します*/
.img-container.active img{
	opacity: 1;
}

.img-container.active iframe{
	opacity: 1;
}

.img-container.active:before{
	transform: translateX(100%);
}

.text-container.active .text-container__title:before{
	transform: translateX(100%);
}

.text-container.active .text-container__title__inner{
	opacity: 1;
}

.text-container.active .text-container__text{
	left: 0;
	opacity: 1;
	font-size: 20px;
}
/*
@media screen and (min-width: 1020px){

.video-wrap {
	z-index: -100;
	height: 100vh;
  position: fixed;
	background-color: rgba( 0, 0, 0, .5 );
}

video {
	width:100vw;
  display: block;
  margin: 0 0 0 auto;
}
}

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

.video-wrap {
	z-index: -100;
	height: 100vh;
  position: fixed;
	background-color: rgba( 0, 0, 0, .5 );

}

video {
	height:100vh;
  display: block;
  margin: 0 0 0 auto;
}
}
*/
@media screen and (min-width: 1920px){
	@media screen and (min-height: 1080px){
		.video-wrap {
			z-index: -100;
			height: 100vh;
			width: 100vw;
  		position: fixed;
			background-color: rgba( 0, 0, 0, .5 );
			}

		video {
			height: 100vh;
  		display: block;
  		margin: 0 0 0 auto;
			}
		}
		@media screen and (max-height: 1080px){
			.video-wrap {
				z-index: -100;
				height: 100vh;
	  		position: fixed;
				background-color: rgba( 0, 0, 0, .5 );
				}

			video {
				width:100vw;
	  		display: block;
	  		margin: 0 0 0 auto;
				}
			}

}
@media screen and (max-width: 1400px) and (max-height: 820px){
		.video-wrap {
			z-index: -100;
			height: 100vh;
			position: fixed;
			background-color: rgba( 0, 0, 0, .5 );
			}

		video {
			left:-30vw;
			top:-30vh;
			position:absolute;
			display: block;
			margin: 0 0 0 auto;
			}
		}

		@media screen and (max-width: 1400px) and (min-height: 820px) and (max-height: 1080px){
				.video-wrap {
					z-index: -100;
					height: 100vh;
					position: fixed;
					background-color: rgba( 0, 0, 0, .5 );
					}

				video {
					left:-30vw;
					position:absolute;
					display: block;
					margin: 0 0 0 auto;
					}
				}


@media screen and (min-width: 1400px) and (max-width: 1920px) and (max-height: 1080px){
			.video-wrap {
				z-index: -100;
				height: 100vh;
				position: fixed;
				background-color: rgba( 0, 0, 0, .5 );
				}

			video {
				display: block;
				margin: 0 0 0 auto;
				}
			}

			@media screen and (max-width: 1200px) and (min-height: 1080px){
					.video-wrap {
						z-index: -100;
						height: 100vh;
			  		position: fixed;
						background-color: rgba( 0, 0, 0, .5 );
						}

					video {
						position:relative;
						height: 100vh;
			  		display: block;
			  		margin: 0 0 0 auto;
						left:-55vw;
						}
					}

					@media screen and (min-width: 1200px) and (max-width: 1550px) and (min-height: 1080px){
							.video-wrap {
								z-index: -100;
								height: 100vh;
					  		position: fixed;
								background-color: rgba( 0, 0, 0, .5 );
								}

							video {
								position:relative;
								height: 100vh;
					  		display: block;
					  		margin: 0 0 0 auto;
								left:-30vw;
								}
							}

							@media screen and (min-width: 1550px) and (max-width: 1920px) and (min-height: 1080px){
									.video-wrap {
										z-index: -100;
										height: 100vh;
							  		position: fixed;
										background-color: rgba( 0, 0, 0, .5 );
										}

									video {
										position:relative;
										height: 100vh;
							  		display: block;
							  		margin: 0 0 0 auto;
										}
									}



.bg {
		position: relative;
		top:800px;
		background: rgba(255,255,255,0.4);
}

.titled{
	width: 100%;
	height: 100vh;
}

.titled p{
	position:relative;
	top:33%;
	margin:auto;
	text-align: center;
	color: #000;
	font-size: calc(100vw*1/20);
	line-height: 1.5;
	font-family: serif;
	text-shadow:1.5px 1.5px 0 #FFF, -1.5px -1.5px 0 #FFF,
						-1.5px 1.5px 0 #FFF, 1.5px -1.5px 0 #FFF,
						0px 1.5px 0 #FFF,  0 -1.5px 0 #FFF,
						-1.5px 0 0 #FFF, 1.5px 0 0 #FFF;

}

.overlay_bg{
	height:100vh;
	width:100vw;
	z-index:-10;
	position:fixed;
	background-image: url("../images/overlays/02.png");
}

.text-text{
	text-align: center;
	font-size: 20px;
}

.ue{
	width:100vw;
	float: left;
	display: flex;
}

.shita{
	width:100vw;
	float: left;
	display: flex;
}