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

/*-- loading ------------------------------------------------------------*/
#loader-bg { position: relative; }
#loader-bg.no-done { display: none; }
#loading { position: fixed; width: 100%; height: 100vh; top: 0px; left: 0px; z-index: 888888; overflow: hidden; background: #000; }

.loading_logo { position: absolute; left: 0%; right: 0; top: 50%; transform: translateY(-50%); width: 200px; margin: 0 auto; z-index: 999999; display: none; }
@media screen and (max-width: 767px) { 
	.loading_logo { width: 80px; }
}

/*-- loading-logo ------------------------------------------------------------*/
/*-- loading-logo ------------------------------------------------------------*/
.lwactive .loading_logo { animation:large-anime 10s ease-in forwards; }
@keyframes large-anime {
	0% { 
		opacity: 1; 
	}
	30% { 
		opacity: 0; 
	}
	100% {
		transform:scale(100);
		opacity: 0;
	}
}

/*-- loading-logo ------------------------------------------------------------*/

/* white line */
.loading_logo path#white_x5F_line {
	fill:#fff;
	fill-opacity: 0;
	stroke: #fff; 
	stroke-width: 5px;
	animation: svg-anime 2s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
	-webkit-animation: svg-anime 2s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
}
@keyframes svg-anime {
  0% {
    fill-opacity: 0;
    stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
  }
  100%{
    fill-opacity: 1;
	stroke-dashoffset: 0;
  }
}
@-webkit-keyframes svg-anime {
  0% {
    fill-opacity: 0;
    stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
  }
  100%{
    fill-opacity: 1;
	stroke-dashoffset: 0;
  }
}

/* navy bg */
.loading_logo path#navy_x5F_bg_x5F_right {
	fill: #000;
	stroke: #fff; 
	stroke-width: 5px;
	animation: svg-anime-navy01 2s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
	-webkit-animation: svg-anime-navy01 2s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
}
@keyframes svg-anime-navy01 {
  0% {
    fill: transparent;
    stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
  }
  100%{
    fill: #1F345C;
	stroke-dashoffset: 0;
  }
}
@-webkit-keyframes svg-anime-navy01 {
  0% {
    fill: transparent;
    stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
  }
  100%{
    fill: #1F345C;
	stroke-dashoffset: 0;
  }
}

.loading_logo path#navy_x5F_bg_x5F_left {
	fill: #000;
	stroke: #fff; 
	stroke-width: 5px;
	animation: svg-anime-navy02 2s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
	-webkit-animation: svg-anime-navy02 2s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
}
@keyframes svg-anime-navy02 {
  0% {
    fill: transparent;
    stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
  }
  100%{
    fill: #1F345C;
	stroke-dashoffset: 0;
  }
}
@-webkit-keyframes svg-anime-navy02 {
  0% {
    fill: transparent;
    stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
  }
  100%{
    fill: #1F345C;
	stroke-dashoffset: 0;
  }
}

/* navy triangle */
.loading_logo path#navy_x5F_triangle {
	fill: #000;
	stroke: #fff; 
	stroke-width: 5px;
	animation: svg-anime-navy-tr 2s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
	-webkit-animation: svg-anime-navy-tr 2s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
}
@keyframes svg-anime-navy-tr {
  0% {
    fill: transparent;
    stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
  }
  100%{
    fill: #1F345C;
	stroke-dashoffset: 0;
  }
}
@-webkit-keyframes svg-anime-navy-tr {
  0% {
    fill: transparent;
    stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
  }
  100%{
    fill: #1F345C;
	stroke-dashoffset: 0;
  }
}

/* yellow triangle */
.loading_logo polygon#yellow_x5F_triangle {
	fill: #000;
	stroke: #fff; 
	stroke-width: 3px;
  	animation: svg-anime-yellow-tr 2s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
	-webkit-animation: svg-anime-yellow-tr 2s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
}
@keyframes svg-anime-yellow-tr {
  0% {
    fill: transparent;
    stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
  }
  100%{
    fill: #E8CD03;
	stroke-dashoffset: 0;
  }
}
@-webkit-keyframes svg-anime-yellow-tr {
  0% {
    fill: transparent;
    stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
  }
  100%{
    fill: #E8CD03;
	stroke-dashoffset: 0;
  }
}

/* gold */
.loading_logo path#cicle_x5F_bg_x5F_gold {
	fill: #000;
	stroke: #fff; 
	stroke-width: 8px;
	animation: svg-anime-gold 2s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
	-webkit-animation: svg-anime-gold 2s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
}

@keyframes svg-anime-gold {
  0% {
    fill-opacity: 0;
    stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
	stroke-width: 8px;
  }
  100%{
    fill-opacity: 1;
	stroke-dashoffset: 0;
	stroke-width: 0px;	
  }
}

@-webkit-keyframes svg-anime-gold {
  0% {
    fill-opacity: 0;
    stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
	stroke-width: 8px;
  }
  100%{
    fill-opacity: 1;
	stroke-dashoffset: 0;
	stroke-width: 0px;	
  }
}

/*-- loading-logo ------------------------------------------------------------*/

.loading_text.active { 
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 200px; height: auto; z-index: 9999; text-align: center;
	animation: infadeIN 4s forwards ease-out;
	font-family:'Roboto Condensed', sans-serif; font-weight:bold; color: #fff; margin: 0 auto; 
}
@media screen and (max-width: 1200px) { 
	.loading_text.active  { width: 80%; margin: 0 auto; }
}

@media screen and (max-width: 767px) { 
	.loading_text.active { font-size: 20px; }
}
@media screen and (min-width: 768px) and (max-width: 1024px) { 
	.loading_text.active { font-size: 24px; }
}
@media screen and (min-width: 1025px) and (max-width: 1119px) { 
	.loading_text.active { font-size: 27px; }
}
@media screen and (min-width: 1200px) { 
	.loading_text.active { font-size: 30px; }
}
/*.loading_text.active path {
    fill: #fff;
}*/

@keyframes infadeIN {
	0% {
		transform: translate(-50%,-50%) scale(20,20);
		opacity: 0;
	}
	100%{
		transform: translate(-50%,-50%) scale(1,1);
		opacity: 1;
	}
}
@-webkit-keyframes infadeIN {
	0% {
		transform: translate(-50%,-50%) scale(20,20);
		opacity: 0;
	}
	100%{
		transform: translate(-50%,-50%) scale(1,1);
		opacity: 1;
	}
}

.loading_text.active.jump span {
	/*width: 200px; text-align: center; margin: 0 auto;*/ 
	animation: jumpAnimation 0.3s ease-in;
	-webkit-animation: jumpAnimation 0.3s ease-in-out;
	display: inline-block;
}
@keyframes jumpAnimation {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}
.loading_text.active span:nth-child(1) {
	animation-delay: 0.25s; /* 0.1秒ずつ遅延して表示 */
}
.loading_text.active span:nth-child(2) {
    animation-delay: 0.3s; /* 0.1秒ずつ遅延して表示 */
}
.loading_text.active span:nth-child(3) {
    animation-delay: 0.35s; /* 0.1秒ずつ遅延して表示 */
}
.loading_text.active span:nth-child(4) {
    animation-delay: 0.4s; /* 0.1秒ずつ遅延して表示 */
}
.loading_text.active span:nth-child(5) {
    animation-delay: 0.45s; /* 0.1秒ずつ遅延して表示 */
}
.loading_text.active span:nth-child(6) {
    animation-delay: 0.5s; /* 0.1秒ずつ遅延して表示 */
}
.loading_text.active span:nth-child(7) {
    animation-delay: 0.55s; /* 0.1秒ずつ遅延して表示 */
}
.loading_text.active span:nth-child(8) {
    animation-delay: 0.6s; /* 0.1秒ずつ遅延して表示 */
}
.loading_text.active span:nth-child(9) {
    animation-delay: 0.65s; /* 0.1秒ずつ遅延して表示 */
}
.loading_text.active span:nth-child(10) {
    animation-delay: 0.7s; /* 0.1秒ずつ遅延して表示 */
}
.loading_text.active span:nth-child(11) {
    animation-delay: 0.75s; /* 0.1秒ずつ遅延して表示 */
}

/*.in-load-text.erace {
	animation: infadeOut 1.0s forwards cubic-bezier(.18,.06,.23,1);	
}
@keyframes infadeOut {
	0% {
		transform: translate(-50%,-50%) scale(1,1);
	}
	100%{
		transform: translate(-50%,-50%) scale(0,0);
	}
}
@-webkit-keyframes infadeOut {
	0% {
		transform: translate(-50%,-50%) scale(1,1);
	}
	100%{
		transform: translate(-50%,-50%) scale(0,0);
	}
}*/

#loader-bg.denone #loading { 
	animation: fadeout-anim 1.0s cubic-bezier(0.9,0.2,1,1) forwards; 
	animation-delay: 1s;
}
@keyframes fadeout-anim {
	0% {
		opacity: 1;
		height: 100%;
	}
	50%{
		opacity: 1;
		height: 60%;
	}
	90%{
		opacity: 1;
		height: 60%;
	}
	100% {
		height: 0%;
		display: none;
	}
}
@-webkit-keyframes fadeout-anim {
	0% {
		opacity: 1;
		height: 100%;
	}
	50%{
		opacity: 1;
		height: 60%;
	}
	90%{
		opacity: 1;
		height: 60%;
	}
	100% {
		height: 0%;
		display: none;
	}
}

#loader-bg.denone .loading_text { 
	animation: fadeout-anim-logo 1.0s linear forwards; 
	animation-delay: 1s;
}
@keyframes fadeout-anim-logo {
	0% {
		opacity: 1;
	}
	50%{
		opacity: 1;
		transform: translate(center,-5000px);
	}
	80%{
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
@-webkit-keyframes fadeout-anim-logo {
	0% {
		opacity: 1;
	}
	50%{
		opacity: 1;
		transform: translate(center,-5000px);
	}
	80%{
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

.cover { display: none; }
.cover h2 { opacity: 0; }
.lineSlide .cover {
	display: block;
	width: 100%;
	position: relative;
	overflow: hidden;/*はみ出た色要素を隠す*/
}
/*出てくるテキスト*/
.lineSlide .cover h2 {
	font-weight: bold;
	overflow: hidden;
	opacity: 0;
	animation-name:innerText;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	animation-delay: 2s;
}
@keyframes innerText{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.lineSlide .bgLine::before{
	animation-name:Line;
	animation-duration:1s;
	animation-fill-mode:forwards;
	animation-timing-function: ease-in-out;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;/*伸びる背景色*/
	opacity: 0;
}
@keyframes Line{
	0% {
		opacity: 1;
		transform-origin:-200%;/*変形の中心を左に指定*/
		transform:scaleX(0);/*要素の拡大縮小（0）で非表示*/
	}
	40% {
		transform-origin:left;
		transform:scaleX(1);/*左から元のサイズに*/
	}
	60% {
		transform-origin:right;
	}
	100% {
		transform-origin:200%;/*変形の中心を右に指定*/
		transform:scaleX(0);/*要素の拡大縮小（0）で非表示*/
	}
}

.cover02 { display: none; }
.lineSlide .cover02 { display: block; }
.lineSlide .cover02 h3 {
	font-weight: bold;
	animation-name:innerText02;
	animation-duration:0.5s;
	animation-delay: 1s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes innerText02{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}
.lineSlide .bgLine02::before {
	animation-name:Line02;
	animation-duration:1s;
	animation-fill-mode:forwards;
	animation-timing-function: ease-in-out;
	content: "";
	position: absolute;
	width: 100%;
	height: 50%;
	background-color: #fff;/*伸びる背景色*/
	opacity: 0;
}
@keyframes Line02{
	0% {
		opacity: 1.0;
		transform-origin:-200%;/*変形の中心を左に指定*/
		transform:scaleX(0);/*要素の拡大縮小（0）で非表示*/
	}
	40% {
		transform-origin:left;
		transform:scaleX(1);/*左から元のサイズに*/
	}
	60% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;/*変形の中心を右に指定*/
		transform:scaleX(0);/*要素の拡大縮小（0）で非表示*/
	}
}