@charset "utf-8";
/*===========================================================*/
/*プログレスバー＋数字カウントアップ＋画面が開く*/
/*===========================================================*/
/* Loading背景画面設定　*/
#splash { /*fixedで全面に固定*/
position: fixed; width: 100%; height: 100%; z-index: 99999; text-align: center; color: #fff; }
/* Loading画像中央配置　*/
#splash_text { position: absolute; top: 50%; left: 50%; z-index: 999; transform: translate(-50%, -50%); color: #fff; width: 100%; }
/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg { height: 2px; }
/*割れる画面のアニメーション*/
.loader_cover { width: 100%; height: 50%; background: #D60421; transition: all 0.5s ease; transform: scaleY(1); }
/*上の画面*/
.loader_cover-up { transform-origin: center top; }
/*下の画面*/
.loader_cover-down { position: absolute; bottom: 0; transform-origin: center bottom; }
/*クラス名がついたらY軸方向に0*/
.coveranime { transform: scaleY(0); }
.vegas-overlay { opacity: 0.9; background-position: left top; }
body.vegas-container { overflow: auto; position: static; z-index: -10 }
.box { position: relative; color: #fff; padding: 0px; min-height: 100vh; /* Fallback */  min-height: calc(var(--vh, 1vh) * 100); display:flex;
	justify-content: center;
	align-items: center;
	text-align: center; }
#slider { width: 100%; min-height: 100vh; /* Fallback */  min-height: calc(var(--vh, 1vh) * 100);
position: fixed; }
#box1 {  }
#box2 { background-color: rgba(0, 0, 0, 0.80);}
#box3 { background-color: rgba(0, 0, 0, 0.80); overflow: hidden; }
#box3_bg {
	position: relative;
	width: 100vw;
	min-height: 100vh;

  min-height: calc(var(--vh, 1vh) * 100);
	background: linear-gradient(-20deg, rgba(255,0,4,0.80) 0%, rgba(255,0,4,0.80) 50%, rgba(255,0,0,0.00) 50%, rgba(255,0,0,0.00) 100%);
}
#box4 { background-color: rgba(0, 0, 0, 0.80); }
#box5 { background-color: rgba(0, 0, 0, 0.80); }
#box6 { background-color: rgba(0, 0, 0, 0.80); }
#box7 { background-color: rgba(0, 0, 0, 0.80); }
/*========= ページネーションCSS ===============*/
.pagination { position: fixed; right: 10px; top: 50%; color: #FFF; transform: translateY(-50%); font-size: 1em; z-index: 10; list-style: none; }
.pagination a { display: block; height: 18px; margin-bottom: 0px; color: #FF0004; position: relative; padding: 4px; }
.pagination a.active:after { color: #FFF; -webkit-box-shadow: inset 0 0 0 5px #FF0000; box-shadow: inset 0 0 0 5px #FF0000; }
.pagination a .hover-text { position: absolute; right: 15px; top: 0; opacity: 0; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; padding-right: 15px; }
.pagination a:hover .hover-text { opacity: 0; }
.pagination a:after { -webkit-transition: box-shadow 0.5s ease; transition: box-shadow 0.5s ease; color: #FFF; width: 10px; height: 10px; display: block; border: 2px solid; border-radius: 50%; content: ''; position: absolute; margin: auto; top: 0; right: 3px; bottom: 0; }
/*800px以下は現在地表示のテキストを非表示*/

#result { height:100vh;}
#result img {height: 100%;}
@media screen and (max-width:850px) {
.pagination { display: none; }
}
/*==================================================
ふわっ
===================================*/
/* fadeUp */
.fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; }
@keyframes fadeUpAnime {  from {
 opacity: 0;
 transform: translateX(-200px);
}
to { opacity: 1; transform: translateX(0px); }
}
/*==================================================
ふわっ2
===================================*/
/* fadeUp */
.fadeUp2 { animation-name: fadeUpAnime2; animation-duration: 0.3s; animation-fill-mode: forwards; opacity: 0; }
@keyframes fadeUpAnime2 {  from {
 opacity: 0;
 transform: translateX(200px);
}
to { opacity: 1; transform: translateX(0px); }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger { opacity: 0; }
.delay-time02 { animation-delay: 0.5s; }
.delay-time03 { animation-delay: 0.8s; }
.delay-time03_2 { animation-delay: 1.1s; }
.scrolldown4 { z-index: 3; position: absolute; top: 50%; left: 50%; background-color: rgba(255, 0, 4, 1.00); /*矢印の動き1秒かけて永遠にループ*/
animation: arrowmove 0.6s ease-in-out infinite; text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.80); }
.scrolldown4 img { position: absolute; top: 100%; left: 100%; }
/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove {  0% {
 bottom: 1%;
}
 50% {
 bottom: 3%;
}
 100% {
 bottom: 1%;
}
}
/*Scrollテキストの描写*/
.scrolldown4 span { /*描画位置*/
position: absolute; left: -20px; 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; }
/* 矢印の描写 */
.scrolldown4:before { content: ""; /*描画位置*/
position: absolute; bottom: 20px; right: -15px; /*矢印の形状*/
width: 20px; height: 30px; background: #FFFFFF; transform: skewX(-45deg); }
.scrolldown4:after { content: ""; /*描画位置*/
position: absolute; bottom: 20px; right: 15px; /*矢印の形状*/
width: 20px; height: 30px; background: #FFFFFF; transform: skewX(45deg); }
/* 紙吹雪 */
#particles-js { z-index: -1; /*描画を一番下に*/ width: 100%; height: 100vh; position: fixed; }
/*========= 背景動画設定のCSS ===============*/



#video-area { position: fixed; z-index: -4; top: 0; right: 0; left: 0; bottom: 0; overflow: hidden; }
.movieoverlay { background-image: url(../img/overlays/01.png); background-repeat: repeat; z-index: -3; width: 100%; height: 100vh; top: 0; right: 0; left: 0; bottom: 0; position: fixed; }
.movieoverlay2 { background-image: url(../img/overlays/02.png); background-repeat: repeat; z-index: -3; width: 100%; height: 100vh; top: 0; right: 0; left: 0; bottom: 0; position: fixed; }
#video { /*天地中央配置*/
position: absolute; z-index: -4; top: 50%; left: 50%; transform: translate(-50%, -50%); /*縦横幅指定*/
width: 177.77777778vh; height: 56.25vw; min-height: 100%; min-width: 100%; }

/*========= ページトップのためのCSS ===============*/
/*リンクの形状*/
#page-top a{
	display: flex;
	background: rgba(0,207,42,0.90);
	justify-content:center;
	align-items:center;
	border-radius: 5px;
	width: 120px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:1.2rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background:#FF0004;
}

/*リンクを右下に固定*/
#page-top {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	position: fixed;
	right: 20px;
	padding: 10px;
	z-index: 2;
	/*はじめは非表示*/
	opacity: 0;
	transform: translateY(160px);
}

/*　上に上がる動き　*/

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

/*　下に下がる動き　*/

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