@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

/* font-family: "Zen Kaku Gothic New", sans-serif; */

/* Common
-----------------------------------*/
:root {
	--main-color: #00BFDE;
}
*{
	box-sizing: border-box;
	vertical-align: middle;
}
html{
	font-size: 62.5%;
	overscroll-behavior: none;
}
body{
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
	line-height: 180%;
	color: #333;
	font-size: 1.4rem;
	overflow-x: hidden;
}
a{
	color: inherit;
	text-decoration: none;
}
img,svg{
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
input,select,textarea,label,button{
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
}
h1,h2,h3,h4,h5,h6{
	line-height: 140%;
}
.pc{display: block;}
.sp{display: none;}


/* Common
-----------------------------------*/
#wrap{
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}
#wrap video{
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#teaser{
	position: absolute;
	z-index: 20;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
/*	background: rgba(0,0,0,0.75);*/
	background: url(../images/common/dots.png) rgba(0,0,0,0.85);
	color: #FFF;
}
#teaser .logo{
	max-width: 140px;
	margin: 0 auto 30px auto;
}
#teaser h1{
	font-size: 2.8rem;
	font-weight: bold;
	font-weight: 500;
}


/* 1024px以下の場合 */
@media screen and (max-width: 1024px) {
	/* Common
	-----------------------------------*/
	.pc{display: none;}
	.sp{display: block;}

	html,body{
		height: 100%;
	}
	#wrap{
		height: 100%;
	}
	#teaser{
		height: 100%;
	}
	#teaser .box{
		width: 100%;
	}
	#teaser .logo{
		margin: 0 auto;
	}
	#teaser h1{
		width: 100%;
		text-align: center;
		position: absolute;
		bottom: 10%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}