@charset "utf-8";
/* CSS Document */
body {
	text-align: center;
}
div {
	width: 100%;
	padding: 0;
	color: #4d719e;
}

.logobox {
	position: fixed;
	padding: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.logobox img {
	max-width: 400px;
}
@media screen and (max-width: 768px){
	.logobox img {
		width: 80%;
	}
}
.btm {
	position: fixed;
	padding: 30px 0;
	bottom: 0;
	color: #fff;
}
.btm p {
	font-size: small;
}

/*========= 背景動画用 =========*/
#intro-wrap {
    width:100%;
    height: 100vh;
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video-box {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100vh; /* スマホでも全画面（左右は見えない） */
	/*width:100%; /* 横幅は100%で固定 */
	/*height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
	/*padding-top: 56.25%; /* 高さを指定(16:9) */
}
@media all and (min-width: 768px) and (max-width: 1280px) {
	.video-box {
		position: relative;
		overflow: hidden;
		/*width: 100%;
		height: 100vh; /* スマホでも全画面（左右は見えない） */
		width:100%; /* 横幅は100%で固定 */
		height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
		padding-top: 56.25%; /* 高さを指定(16:9) */
	}
}
@media screen and (max-width: 767px){
	.video-box {
		position: relative;
		overflow: hidden;
		/*width: 100%;
		height: 100vh; /* スマホでも全画面（左右は見えない） */
		width:100%; /* 横幅は100%で固定 */
		height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
		padding-top: 56.25%; /* 高さを指定(16:9) */
	}
}
#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}
@media all and (min-width: 768px) and (max-width: 1280px) {
	.hero{
		max-height: 56.25vw;/*縦長時下部空白を詰める*/
	}
}
@media screen and (max-width: 767px){
	.hero{
		max-height: 56.25vw;/*縦長時下部空白を詰める*/
	}
}