@charset "utf-8";




/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 9999999;
	text-align:center;
	color:#333;
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#splash-logo img {
	display: block;
	width: 300px;
	margin: auto;
}

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: scaleX(0);
    background-color: #11ced0;/*伸びる背景色の設定*/
	animation-name:PageAnimeAppear;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}

@keyframes PageAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/
#container{
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}






/*gnav
------------------------------*/
header {
	box-sizing: border-box;
	position: sticky;
	top: 0;
	color: #fff;
	font-weight: 500;
	background-color: #b3e7ff;
	width: 100%;
	padding: 5px 0;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;
	z-index: 100;
}

/*ナビゲーション*/
#g-nav ul div {
	width: 100%;
	max-width: 1200px;
	margin: auto;
}
#g-nav ul {
	display: inline-block;
	text-align: center;
	background: #ace1ff;
	background: url(../img/gnav_bg_lt.png), url(../img/gnav_bg_rb.png), url(../img/gnav_bg.png), linear-gradient(90deg, #79ceff 0%, #ace1ff 50%, #79ceff 100%);
	background-repeat: no-repeat, no-repeat, repeat, no-repeat;
	background-position: left top, right bottom, left top, center center;
	background-size: auto 160%, auto 160%, auto, auto;
	width: 100%;
	margin: auto;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;
}

#g-nav li {
	display: inline-block;
}

#g-nav li.size1 {
	width: 9.5%;
}
#g-nav li.size2 {
	width: 13.5%;
}
#g-nav li a {
	display: block;
	position: relative;
	padding-top: 20px;
}
#g-nav li a.non {
	filter: grayscale(80%);
	cursor: default;
}
#g-nav li a:not(.non):hover {
}
#g-nav li a img {
	display: block;
	width: 100%;
	height: auto;
}
#g-nav li a span {
	box-sizing: border-box;
	display: block;
	position: absolute;
	top: 7%;
	/*
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);*/
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	background: #26cdee;
	width: 90%;
	padding: 2px;
	margin: auto 5%;
}
#g-nav .select {
}



#g-nav-sns {
	display: none;
	/*display: inline-block;*/
}
#g-nav img {
	display: block;
	width: 100%;
}



.openbtn {
	display: none;
}






/* ウィンドウ幅が0-767pxの場合に適用するCSS */
@media screen and (max-width:767px){
	header {
		position: relative;
		padding: 0;
		border: none;
		z-index: auto;
	}

/*========= ナビゲーションのためのCSS ===============*/
	
	#g-nav{
		/*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
		position:fixed;
		z-index: -10;
		opacity: 0;/*はじめは透過0*/
		/*ナビの位置と形状*/
		top:0;
		width:100%;
		height: 100vh;/*ナビの高さ*/
		/*動き*/
		transition: all 0.3s;
		
		font-size: 18px;
		background: rgb(121,206,255,0.7);
		background: linear-gradient(0deg, rgba(121,206,255,0.9) 0%, rgba(176,226,255,0.9) 50%, rgba(121,206,255,0.9) 100%);
	}

	/*アクティブクラスがついたら透過なしにして最前面へ*/
	#g-nav.panelactive{
		opacity: 1;
		z-index:999;
	}

	/*ナビゲーションの縦スクロール*/
	#g-nav.panelactive #g-nav-list{
		/*ナビの数が増えた場合縦スクロール*/
		position: fixed;
		z-index: 999; 
		width: 100%;
		height: 100vh;/*表示する高さ*/
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		
		background-image: url("../img/nav/bg_side.png"), url("../img/nav/bg_side.png"), url("../img/gnav_bg.png");
		background-size: 30px auto, 30px auto, 15px;
		background-repeat: repeat-y, repeat-y, repeat;
		background-position: left top, right top, left top;
	}

	/*ナビゲーション*/
	#g-nav ul {
		display: none;
		/*ナビゲーション天地中央揃え*/
		/*position: absolute;
		z-index: 999;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);*/
		
		background: none;
		padding-top: 50px;
		border: none;
	}

	#g-nav.panelactive ul {
		display: block;
	}

	/*リストのレイアウト設定*/

	#g-nav li{
		display: block;
		list-style: none;
		text-align: center; 
		margin: auto;
	}

	#g-nav li.size1 {
		width: 30%;
	}
	#g-nav li.size2 {
		width: 46%;
}

	#g-nav li a {
		text-decoration: none;
		padding:0;
		display: block;
		font-weight: bold;
	}
	#g-nav li a span {
		box-sizing: border-box;
		display: block;
		position: absolute;
		top: 37%;
		left: -4em;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		width: auto;
		padding: 2px 5px;
		margin: auto 5%;
	}

	/*========= ボタンのためのCSS ===============*/
	.openbtn{
		box-sizing: border-box;
		display: block;
		position:fixed;
		z-index: 9999;/*ボタンを最前面に*/
		top:0;
		left: 0;
		cursor: pointer;
		width: 60px;
		height: 49px;
		
		background-image: url(../img/burger_off.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		
	}
	.openbtn:not(.active):hover{
		background-image: url(../img/burger_on.png);
		
	}
	.openbtn.active {
		background-image: url(../img/burger_clause.png);
	}

	/*×に変化*/	
	.openbtn span{
		display: inline-block;
		transition: all .4s;
		position: absolute;
		left: 14px;
		height: 3px;
		border-radius: 2px;
		background-color: #fff;
		width: 45%;
	  }

	.openbtn span:nth-of-type(1) {
		top:15px;	
	}

	.openbtn span:nth-of-type(2) {
		top:23px;
	}

	.openbtn span:nth-of-type(3) {
		top:31px;
	}

	.openbtn.active span:nth-of-type(1) {
		top: 18px;
		left: 18px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
	}

	.openbtn.active span:nth-of-type(2) {
		opacity: 0;
	}

	.openbtn.active span:nth-of-type(3){
		top: 30px;
		left: 18px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
	}
	
	
	
	
	#g-nav-sns {
		display: block;
		text-align: center;
		width: 80%;
		margin: 2em auto auto auto;
	}
	#g-nav-sns .g-nav-sns-mds {
		display: block;
		width: 80%;
		max-width: 555px;
		margin: auto;
	}
	#g-nav-sns a {
		box-sizing: border-box;
		display: inline-block;
		width: 50px;
		padding: 10px;
		margin: 5px;
		border-radius: 10px;
		overflow: hidden;
	}
	#g-nav-sns a img {
		display: block;
		width: 100%;
	}



	
}









/*pagetop
------------------------------*/
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	width: 85px;
	height: 128px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	transition:all 0.3s;
}

#page-top a:hover{
	opacity: 0.7;
}
#page-top a img {
	display: block;
	width: 100%;
}
/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 999;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(150px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(150px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(150px);
  }
}