html,div,body,article{
	margin: 0;
}
/* ----- 背景用の動画ファイル ----- */
#bg-video{
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: 100%;
	height: auto;
	z-index: -100;
	background: url(poster.jpg) no-repeat;
	background-size: cover;
	/* filter: grayscale(60%) brightness(60%); */
	/* filter: grayscale(60%); */
	/* filter: brightness(60%); */
}
/* ----- 背景の上に表示させたいコンテンツ ----- */
.header-title{
	position: relative; /*必ず必要*/
	top: 20%;
	z-index: 2; /*必ず必要*/
	width: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align:center;
	margin: auto;
}
.header-title p{
	font-size: 2em;
	/* background: #fff; */
	padding: 80px;
}
/* ----- グラデーションオーバーレイ ----- */
.wrap{
	height: 100vh;
	background: linear-gradient(-45deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));
	/* background: linear-gradient(-45deg, rgba(105, 105, 105, 0.4), rgba(105, 105, 105, 0.6)); */
	/* background: linear-gradient(-45deg, rgba(4, 114, 124, 0.4), rgba(17, 66, 99, 0.6)); */
	/* background: linear-gradient(-45deg, rgba(245,245,245,1), rgba(245,245,245,1)); */
}

.video-text {
	font-family: Poppins;
	font-weight: 300;
	color: white;
	text-transform: uppercase;
	letter-spacing: 6px;
	word-spacing: 6px;
}
@media screen and (max-width:480px) {
	/*　画面サイズが480pxからはここを読み込む　*/
	.video-text {
		font-size: 5px;
		line-height: 0.6;
	}
}
@media screen and (min-width:480px) and ( max-width:1024px) {
	/*　画面サイズが768pxから1024pxまではここを読み込む　*/
	.video-text {
		font-size: 7px;
		line-height: 0.8;
	}
}
@media screen and (min-width:1024px) {
	/*　画面サイズが1024pxからはここを読み込む　*/
	.video-text {
		font-size: 10px;
		line-height: 1.2;
	}
}


.vf {
  /* filter: opacity(90%); */
}

#wrap-filter{
	position: fixed;
	right: 0;
	bottom: 0;
  min-width: 100%;
	min-height: 100%;
  width: auto;
	height: auto;
	z-index: 1;
	background-size: cover;
	background: linear-gradient(-45deg, rgba(4, 114, 124, 0.4), rgba(17, 66, 99, 0.6));
	/* background: linear-gradient(-45deg, rgba(245,245,245,1), rgba(245,245,245,1)); */
}

.movie_center{
	text-align:center;
}


#sampleVideo {
  position: fixed;
	/* right: 0; */
	left: 0;
	bottom: 0;
  min-width: 100%;
	min-height: 100%;
	width: auto;
	height: 100%;
	z-index: -10;
  /* background: url(image/sampleposter.jpg) no-repeat;
  background-size: cover; */
}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* $('#aaa').css({'color':'white','font-size':'30px'}); */
#aaa {
	color:white;
	font-size:30px;
}
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 450px) {
		.pc { display: none !important; }
		.sp { display: block !important; }
		video {
				position: absolute;
				height: 100%;
				left: 0;
				transform: translateX(-29%);
		}
		#aaa {
			color:white;
			font-size:12px;
			/* letter-spacing: -0.05em */
		}
}

/* スクロール用矢印 */
	.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.cp_arrows {
		position: relative;
		display: flex;
		height: 300px;
		margin: 2em auto;
		justify-content: center;
		align-items: center;
	}
	.cp_arrows .cp_arrow {
		position: absolute;
		top: calc(50% - 25px);
		left: 50%;
		width: 40px;
		height: 40px;
	}
	.cp_arrows .cp_arrow::before,
	.cp_arrows .cp_arrow::after {
		position: absolute;
		display: block;
		width: 3px;
		height: 30px;
		content: '';
		-webkit-transition: all 0.3s ease-in-out;
		        transition: all 0.3s ease-in-out;
		-webkit-transform: translate(-50%, -50%) rotateZ(-60deg);
		        transform: translate(-50%, -50%) rotateZ(-60deg);
		transform-origin: bottom right;
		border-radius: 10px;
		background: white;
	}
	.cp_arrows .cp_arrow::after {
		-webkit-transform: translate(-50%, -50%) rotateZ(60deg);
		        transform: translate(-50%, -50%) rotateZ(60deg);
		-webkit-transform-origin: bottom left;
		        transform-origin: bottom left;
	}
	.cp_arrows .cp_bounce {
		-webkit-animation: arrow-move09 2s infinite ease-in-out;
		        animation: arrow-move09 2s infinite ease-in-out;
	}
	@-webkit-keyframes arrow-move09 {
		0%, 20%, 50%, 80%, 100% {
			-webkit-transform: translateY(0);
			        transform: translateY(0);
		}
		48% {
			-webkit-transform: translateY(-20px);
			        transform: translateY(-20px);
		}
		60% {
			-webkit-transform: translateY(-15px);
			        transform: translateY(-15px);
		}
	}
	@keyframes arrow-move09 {
		0%, 20%, 50%, 80%, 100% {
			-webkit-transform: translateY(0);
			        transform: translateY(0);
		}
		48% {
			-webkit-transform: translateY(-20px);
			        transform: translateY(-20px);
		}
		60% {
			-webkit-transform: translateY(-15px);
			        transform: translateY(-15px);
		}
	}