@charset "utf-8";


#header{
    position: relative;/*背景を設定するdivの基点とするためrelativeをかける*/
    width: 100%;
	height:100vh;
    overflow: hidden;/*はみ出しているところを隠す*/
}

#header-img{
    position: fixed;/*背景を固定するためfixedをかける*/
	z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
    top: 0;/*topの位置がJSで変化*/
	/*以下画面で背景画像を表示させるための指定*/
    width: 100%;
	height:100vh;
	background: no-repeat top center;/*背景画像の設定※オリジナルの画像に設定してください*/
	background-size:cover;
	transform-origin:center;/*変化する基点を中心からに設定*/
}

#container{
    padding: 30px 0 0 0;
}

@media(max-width: 770px){
    #container{
        padding: 10px;
    }
}

#container,
#footer{
	position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
	z-index: 2/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
}

/*ロゴを中央に配置*/
#header h1{
	position: fixed;
	top: 5%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;/*#header-imgよりも手前に配置*/
}