@charset "utf-8";

.home {
   	overflow: hidden;
}

.fast-visual{
	height: 100vh;
}

/*キャッチコピー*/

.top-maincatchcopy {
	position: absolute;
	top: 27%;
	left: 52%;
	width: 70%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
    	-ms-transform: translate(-50%, -50%);	
	font-size: 2.5em;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.7em;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	
	text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000;
}

/*========= 光りながら出現させるためのCSS ===============*/

.glowAnime span{opacity: 0;}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime_on 0.5s ease-out forwards; }

@keyframes glow_anime_on{
  0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
  50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
  100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}



@media screen and (max-width:899px){
.top-maincatchcopy {
	font-size: 1.8em;
	}
}

@media screen and (max-width:639px){
.top-maincatchcopy {
	width: 280px;
	font-size: 1.5em;
	top: 220px;
	}
}


/*サブキャッチコピー*/

.top-subcatchcopy{
	position: absolute;
	top: 43%;
	left: 53%;
	width: 70%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	font-size: 1.2em;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.8;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	
	animation-name: textanime;/*keyname*/
	animation-duration:10s;/*最大再生時間*/
	
	text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000;

}

@media screen and (max-width:899px){
.top-subcatchcopy {
	letter-spacing: 0.1em;
	letter-spacing: 0.2em;	
	line-height: 2em;	
	}
}

@media screen and (max-width:639px){
.top-subcatchcopy {
	width: 350px;
	font-size: 0.8em;
	top: 54%;
    letter-spacing: 0.2em;
    line-height: 2em;
	}
}


@keyframes textanime
{
 0%{
  opacity: 0;
 }

 100%{
  opacity: 1;
 }

}


/*Space Flyer　ロゴ*/

.top-logo {
	position: absolute;
	top: 8%;
	left: 52%;
	width: 30%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

@media screen and (max-width:899px){
.top-logo {
	width: 70%;
	}
}

@media screen and (max-width:499px){
.top-logo {
	width: 90%;
    top: 120px;
	}
}


/*背景MOVIE*/

.top-spacevideo{
  width: 100vw;
  height: 100vh;
	position: absolute;	
  overflow: hidden;
  z-index: -1;
}

.top-spacevideo video{
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
	position: fixed;		
	bottom: 0;
}

@media screen and (max-width:600px){
.top-spacevideo video {
	width: auto;
	height: 100%;
	}
}



/*SFキャラクター*/

.chara {
	position: absolute;
	bottom: 0;
	right: 20px;
	opacity: 0;
	animation-duration: 15s;/* アニメーション時間 */
	animation-delay : 10s;/* 変化開始の時間 */
	animation-timing-function: step-start;
	animation-name: chara;
	animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
	animation-fill-mode: backwards; /*これで値を保持*/
}

@keyframes chara {
  0% {
	opacity: 0;/* 透明 */
	transform: translateY(100px);/* X軸方向に50px */
  }
  100% {
	opacity: 1;/* 不透明 */
	transform: translateY(0);
  }

}

@media screen and (max-width:600px){
.top-chara img {
	width: 75%;
	}
.chara {
	position: absolute;
	right: -70px;
	bottom: -130px;
	}
}

/*SFキャラクター 吹き出し*/

.chara-onething {
	position: absolute;
	bottom: 600px;
	right: 300px;
	width: 330px;
	line-height: 1.5;
	background-color: #0273e9;
	opacity: 0.9;
	border-radius: 30px;
	padding: 10px;
	font-weight: bold;
	opacity: 0;
	border: 2px solid #0273e9;
	animation-duration: 15s;/* アニメーション時間 */
	animation-delay : 10s;/* 変化開始の時間 */
	animation-timing-function: step-start;
	animation-name: chara;
	animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
	animation-fill-mode: backwards; /*これで値を保持*/
}

.chara-onething::after {
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	left: 305px;
	bottom: -16px;
	border-right: 22px solid #0273e9;
	border-top: 22px solid transparent;
	border-bottom: 22px solid transparent;
	transform: rotate( 120deg);
}

@keyframes chara-onething {
  0% {
	opacity: 0;/* 透明 */
	transform: translateY(100px);/* X軸方向に50px */
  }
  100% {
	opacity: 1;/* 不透明 */
	transform: translateY(0);
  }
}

@media screen and (max-width:600px){
.chara-onething {
	position: absolute;
	padding: 20px 10px;
	width: 220px;
	font-size: 0.8rem;
	right: 118px;
	bottom: 380px;
	border: 2px solid #0273e9;
	}
.chara-onething::after {
	left: 72%;
	top: 80%;
}

}


/*運航情報・新着情報（アコーディオンボックス）*/

.info-box{
	position: relative;
}

.info1{
	top: 20%;
}
.info2{
	top: 23%;
}

.info-box label{
	width: 50px;
	height: 180px;
	font-size: 18px; /* ラベルの文字サイズ */
	font-weight: bold;
	text-align: center;
	background: ; /* ラベルの背景色 */
	position: relative;
	display: block;
	padding: 15px;
	color: #ffffff;
	opacity: 0.9;
}

@media screen and (max-width:499px){
.info-box label {
	width: 25px;
	font-size: 15px;
	padding: 5px;

	}
}

.info-box label:hover{
	color: #888;
	background: white;
	box-shadow: 0 0 10px white, 0 0 40px white, 0 0 80px white;
	transition-delay: 0s;
	animation : infinite;
	font-weight: bold;
}

.info-box input{
	display: none;
}

.info-box label:after{
	color: #ffffff;
	font-family: "Font Awesome 5 Free";	
	content:"\f054"; /* ラベルのアイコン */
	position: absolute;
	bottom: 10px;
	right: 15px;
	margin-top: -14px;
	font-size: 1.5em;
}

@media screen and (max-width:499px){
.info-box label:after {
	right: 6px;
	}
}

.info-box input:checked ~ label::after {
	content:"\f053"; /* ラベルをクリックした後のアイコン */
	color: #888;	
}

.info-box div{
	height: 0px;
	overflow: hidden;
	opacity: 0;
	transition: 0.15s; /* 開閉スピードの設定 */
}

.info-box input:checked ~ div{
	height: 180px;
	padding: 18px; /* 開いた部分の枠内の余白 */
	background: #000000; /* 開いた部分の背景色 */
	opacity: 0.9;
	top: 0;
	overflow: auto;
	scroll-snap-type: y mandatory;
}

.info-box i{
	padding-bottom: 10px ;
}

.info-box input:checked ~ label {
	color: #888;
	background: white;
	box-shadow: 0 0 10px white, 0 0 40px white, 0 0 80px white;
	transition-delay: 0s;
	animation : infinite;
	font-weight: bold;
}

.info-box-under{
	position: absolute;
	bottom: 20px;
	left:50px;
	font-size: 15px; /* 開いた部分の文字サイズ */
	color: #ffffff; /* 開いた部分の文字色 */
	width: 90%;
	box-shadow:2px 2px 0 rgba(0,0,0,.5);
}

@media screen and (max-width:499px){
.info-box-under {
	left: 25px;
	}
}

.info-box-under dl{
	text-align: left;
	overflow: hidden;
	line-height: 1.3rem;	
	border-bottom: 1px dotted #eee;
}

.info-box-under dt{
	float: left;
	width: 8em;
	border-top: 1px dotted #eee;
	padding-left: 10px;
	padding-top: 2px;
}

.info-menu {
	display: inline-block;
	width: 100px;
	text-align: center;
	border: 1px solid #ffffff;
	font-size: 0.8em;
	margin: 2px;
	opacity: 0.9;

}

.info-data{
	display: inline-block;
	padding-top: 3px;
}
.info-box-under dd{
	margin-left: 8em;
	border-top: 1px dotted #eee;
	padding:5px 5px;	
}

.info-box-more {
	display: inline-block;	
	margin-top: 15px;
	padding: 3px 10px;
	border: 1px solid #696969;
	background-color: black;
}

.info-box-more:hover {
	background: white;
	box-shadow: 0 0 10px white, 0 0 40px white, 0 0 80px white;
	transition-delay: 0s;
	animation : infinite;
	font-weight: bold;
	color: #888!important;	
}