@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

h1{
	position: fixed;
	top: 25%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	color:#fff;
	text-shadow: 0 0 15px #666;
	text-align: center;
	font-size: 2.0rem;
}


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

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

#kv:before{
    /*header の疑似要素に背景画像を指定*/
	content:"";
	position:fixed;
	top:0;
	left:0;
	z-index:0;
	width:100%;
	height: 100vh;
	/*背景画像設定*/
	background:url("../img/img_sp_01.jpg") no-repeat center;
	background-size:cover;
}

/*下の被さるエリアの指定*/
#kvover{
	position: relative;
	z-index:1;
    /*以下はレイアウトのための記述*/
	background-color: #fff;
	text-align: center;
}

@media screen and (min-width: 769px) {
    #kv::before {
        background-image: url("../img/img_01.jpg");
    }
	h1{
		
		top: 50%;
		left: 50%;
		font-size: 3.0rem;
	}
}