@charset "UTF-8";
/* CSS Document */


/*-- PCナビメニュー --*/
@media only screen and (max-width: 2000px) {
#gNav ul.nav > li {
text-shadow: 0 0 10px rgb(0, 0, 0, 0.8),0 0 10px rgb(0, 0, 0, 0.8);
}
nav.fixed ul{}
nav.fixed ul li a{
color:#35aacd!important;
text-shadow: none;
}
}
		
/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background:#35aacd;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:315px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}



/* ---------------------------------------------------------------------------------------------

　   header

--------------------------------------------------------------------------------------------- */

header#header{
    position: relative;
    height: auto;
	min-height: 840px;
	} 
	@media only screen and (max-width: 1020px) {
		header#header{
			height: 100%;
			min-height: 900px;
			} 
		}
	@media only screen and (max-width: 900px) {
		}
	@media only screen and (max-width: 767px) {
		header#header{
			min-height: 800px;
			} 
        }
	@media only screen and (max-width: 540px) {
		header#header{
			min-height: 650px;
			} 
        }
	@media only screen and (max-width: 480px) {
		}
	@media only screen and (max-width: 400px) {
		header#header{
			min-height: 550px;
			} 
		}
	@media only screen and (max-width: 360px) {
		header#header{
			min-height: 480px;
			} 
		}
	@media only screen and (max-width: 260px) {
		}


/* ファーストビュー */
.hero{
	background: url("../img/hero_img002.jpg") ;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: cover!important;
    position: absolute;
    top: 0;
    right:0;
    left:0;
    bottom:0;
	z-index: -10;
	}
	@media only screen and (max-width: 1020px) {
		.hero{
			height: 100%;
			background-position: 12% bottom;
			}
		}
	@media only screen and (max-width: 900px) {
		.hero{
			background-position: 10% bottom;
			}
		}
	@media only screen and (max-width: 767px) {
        }
	@media only screen and (max-width: 540px) {
		.hero{
			background-position: 12% bottom;
			}
        }
	@media only screen and (max-width: 480px) {
		}
	@media only screen and (max-width: 360px) {
		}
	@media only screen and (max-width: 260px) {
		}



.hero .catch{
	position: absolute;
	top: 55%;
	right: 0;
	transform: translateY(-55%) translateX(-5%);
	-webkit- transform: translateY(-55%) translateX(-5%);
	color: #fff;
	text-align: right;
	}
.hero .catch .main{
	font-family: "Poppins";
	font-size: 1100%;
	font-style: italic;
	font-weight: bold;
	letter-spacing: 0.3rem;
	line-height: 130%;
	}
.hero .catch .sub{
	position: relative;
	right: 3%;
	font-size: 170%;
	font-weight: bold;
	letter-spacing: 0.3rem;
	}
	@media only screen and (min-width: 1800px) {
		.hero .catch .main{
			text-shadow: 
				0px 0px 10px rgba(5, 170, 205, 1),
				0px 0px 10px rgba(5, 170, 205, 1),
				0px 0px 10px rgba(5, 170, 205, 1);
			}
		}

	@media only screen and (max-width: 1240px) {
		.hero .catch .main{
			font-size: 900%;
			}
		.hero .catch .sub{
			font-size: 160%;
			}
		}
	@media only screen and (max-width: 1080px) {
		.hero .catch .main{
			font-size: 750%;
			}
		.hero .catch .sub{
			font-size: 140%;
			}
		}
	@media only screen and (max-width: 900px) {
		.hero .catch .main{
			font-size: 650%;
			}
		.hero .catch .sub{
			font-size: 125%;
			}
		}
	@media only screen and (max-width: 767px) {
		.hero .catch .main{
			font-size: 550%;
			line-height: 150%;
			}
		.hero .catch .sub{
			font-size: 130%;
			}
        }
	@media only screen and (max-width: 600px) {
		.hero .catch .main{
			font-size: 460%;
			}
        }
	@media only screen and (max-width: 540px) {
		.hero .catch{
			top: 58%;
			transform: translateY(-58%) translateX(-5%);
			-webkit- transform: translateY(-58%) translateX(-5%);
			}
		.hero .catch .main{
			font-size: 380%;
			letter-spacing: 0.2rem;
			}
		.hero .catch .sub{
			font-size: 120%;
			}
        }
	@media only screen and (max-width: 480px) {
		.hero .catch .main{
			font-size: 370%;
			}
		}
	@media only screen and (max-width: 360px) {
		.hero .catch .main{
			font-size: 320%;
			}
		.hero .catch .sub{
			font-size: 110%;
			}
		}
	@media only screen and (max-width: 260px) {
		}
















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

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

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:#eee;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:1px;
	height: 50px;
	background:#eee;
}







/* ---------------------------------------------------------------------------------------------

　   main

--------------------------------------------------------------------------------------------- */
main#main{
	
	background: url("../img/bg_gl.svg") no-repeat bottom left;
	background-size:200%;
	}