@charset "utf-8";

/*========= スクロールをすると下のエリアが上にかぶさるCSS ===============*/

#header{
    /*headerを全画面で見せる*/
	width:100%;
	height: 60vh;
	position: relative;
} 

#header:before{
    /*header の疑似要素に背景画像を指定*/
	content:"";
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height: 60vh;
	/*背景画像設定*/
	background-size:cover;


	background: url(../img/cnt3-bg-img.webp) no-repeat center center;
	background-size: cover;
}

/*下の被さるエリアの指定*/
#over-container{
	position: relative;
	z-index:1;
	background-color: #000927;
}


@media (min-width: 768px){
	#header{
		height: 100vh;
	} 	

	#header:before{
		height: 100vh;
	}

}