@charset "UTF-8";

/*** common setting ***/
html {
	font-size: 16px;
}
body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
	font-family: urw-din, 'Roboto', Futura, Helvetica Neue, Helvetica, Arial, source-han-sans-japanese, sans-serif;
	font-weight: 400;
}
/** teaser **/

#comming img{
	width: 100%;
	margin: auto;
}

/** logo **/
#logo {
	height: 100vh;
	width: 100%;
	position: absolute;
	top: -5%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#logo a{
	margin: auto;
	width: 16%;
	transition: all 0.3s ease 0s;
}
#logo a:hover{
    opacity: 0.85;
}


/** video **/
#video {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: -5%;
    z-index: -1;
}
#video video {
    background-size: cover;
    display: block;
    height: 100vh;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}



/** footer **/
#footer {
	text-align: center;
	margin-top: 10%; 
	margin-bottom: 10%;
	position: absolute;
    bottom: 5%;
    width: 100%;
    margin: auto;
}

small {
	font-family:  urw-din, 'Roboto', Futura, Helvetica Neue, Helvetica, Arial, source-han-sans-japanese, sans-serif;
	color: #5E5E5E;
}

@media screen and (max-width:639px) {
	#comming img{
		height: 550px;
		margin: auto;
		object-fit: cover;
	}
	/** video **/
	#video {
		height: 550px;
		width: 100%;
		top: -10%;
	}
	#video video {
	    width: 140%;
		left: -20%;
}
	/** logo **/
	#logo {
	top: -10%;
	}
	#logo a{
		width: 35%;
	}
}