@charset "utf-8";

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

#top-img{
	position: fixed;/*背景を固定するためfixedをかける*/
	z-index:-10;/*#container,#footerよりも下に配置するために数値を小さくする*/
    top: 0;/*topの位置がJSで変化*/
	/*以下画面で背景画像を表示させるための指定*/
    width: 100%;
	height:100vh;

	transform-origin:center;/*変化する基点を中心からに設定*/
}

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

#top h1{
	color: #fff;
	font-size: 3rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	/*天地中央に配置*/
	position: relative;
    z-index: 1;/*#top-imgよりも手前に配置*/
	margin:40vh 0 0 0;
}



#myVideo video { width:auto; margin:0 auto 0 auto; }
@media screen and (min-width: 840px) {
	#myVideo video { width:100%;}
	#top h1 {margin:35vh 0 0 0; }
}

#myVideo {
    display: block;            /* ブラウザによってはデフォルトのインライン要素を上書き */
    margin: 0 auto;            /* 水平方向に中央揃え */
	width: 100vw;     		    /* ビューポートの横幅全体を使用 */
    height: 100vh;              /* ビューポートの縦幅全体を使用 */
	object-fit: cover;		 /* 動画のアスペクト比を維持しながら動画の中央部分を表示 */
}
@media (min-width: 1080px) {    /* PC用のスタイル */
	#myVideo {
        height:110vh;
    }
}
@media (min-width: 1600px) {    /* PC用大画面のスタイル */
	#myVideo {
        height:130vh; 
    }
}