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

/* アソートカラー#080059 */

.header {
    width: 100%;
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 9999;
    line-height: 1.5;
    padding: 15px 15px 10px 30px;
}
.header-logo {
    padding:0;
    margin: 0;
}
/********************************************** 
	
トップ動画

********************************************* */
#visual {
	position: relative;
	width: 100%;
	height: 100vh;
 min-height: 500px;
}
.video-box {
    position: absolute;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 500px;
}
.video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.overlay::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(0, 0, 0, .15);
}
.visual-content {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 99;
}
.logo-mark {
	position: absolute;
	top: 50%;
    left: 50%;
     -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 360px;
    height: auto;
    opacity: .2;
}


@media (min-width: 992px) {
	
}
@media (max-width: 991px) {
	
	.header {
	    background: #fff;
	    position: fixed;
	    top: 0;
	    left: 0;
	    height: 50px;
	    z-index: 1000000;
	    padding: 0 10px;
	}
	.header-logo {
		padding: 0;
	}
	.header-logo img.logo-white {
	    display: none !important;
	    width: 160px;
	}
	.header-logo img.logo-fixed {
	    display: block !important;
	    width: 200px;
	}
	.header .header-logo img.logo-white {
		display: inline-block;
	}
	.header .header-logo img.logo-fixed {
		display: none
	}
/********************************************** 
	トップ動画
********************************************* */
	#visual {
		height: 500px;
	}
	.logo-mark {
	    width: 240px;
	}

}

@media (max-width: 767px) {
	/********************************************** 
	トップ動画
********************************************* */
	#visual {
		min-height: auto;
		height: 400px !important;
	}
	#visual h2 img {
		width: 240px;
	}
	.video-box {
	    min-height: auto;
	}
	.logo-mark {
	    width: 180px;
	}


}