@charset "utf-8";

html {
 overflow-y: scroll;
}

/*========= スクロールダウンのためのCSS ===============*/

/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	bottom:10px;
    /*全体の高さ*/
	height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}

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

h1{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  color:#eee;
  text-shadow: 0 0 15px #666;
	text-align: center;
}

#header{
	width:100%;
	height: 100vh;
	position: relative;
}

#header:before{
	content: '';
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height: 100vh;
	/*背景画像設定*/
	background:url("../slide_img/slide1.PNG") no-repeat center;
	background-size: cover;
}

#container{
	position: relative;
	z-index:1;
	background:#eee;
	padding:600px 0;
	text-align: center;
}

.scrollnav {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
		z-index: 10;
}
#homenav{
	font-size: 10px;
	text-decoration: none;
}
#topnav {
    display: block;
    background-color: #ccc;
    text-align: center;
    color: #222;
    font-size: 10px;
    text-decoration: none;
    padding: 5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
#topnav:hover {
    display: block;
    background-color: #b2d1fb;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 15;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  /* width: 200px;
  height: 200px;*/
  /*
  margin-top: -100px;
  margin-left: -100px;
  */
  text-align: center;
  color: #fff;
  z-index: 20;
}

@media screen and (max-width:768px){

    #header,
    #header:before{
	height: 90vh;
    }

}