@charset "utf-8";
/* [ファーストビュー]
--------------------------------------------------------------------------*/
#main-top {
	position: relative;
	display: block;
	background-size: cover;
	height: 100vh;
}
.main-wrap {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
}
.main-visual {
	position: absolute;
	width: 100%;
	max-width: 1200px;
	padding: 18% 0 70px 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.main-visual .txt-box {
	width: 40%;
}
.main-visual .txt-box .catchcopy {
	z-index: 10;
	color: #fff;
}
.main-visual .txt-box .catchcopy h2 {
	margin-bottom: 40px;
}
.main-visual .txt-box .catchcopy .txt {
	font-size: 16px;
	line-height: 140%;
	margin-bottom: 30px;
}
/*テキストスライドイン*/
.slide-in {
  overflow: hidden;
    display: inline-block;
}
.slide-in_inner {
  display: inline-block;

}
.leftAnime {
    opacity: 0;
}
.slideAnimeLeftRight {
  animation-name:slideTextX100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideTextX100 {
  from {
  transform: translateX(-100%); 
        opacity: 0;
  }
  to {
  transform: translateX(0);
    opacity: 1;
  }
}
.slideAnimeRightLeft {
  animation-name:slideTextX-100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideTextX-100 {
  from {
  transform: translateX(100%);
    opacity: 0;
  }

  to {
  transform: translateX(0);
    opacity: 1;
  }
}
/* 背景画像　*/
.box {
  position   : relative;
  max-width  : 100%;
  height     : 100vh;
  margin     : auto;
  overflow   : hidden;
}
/* --- 背景の指定 ------------------------------------------- */
.box .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 32s infinite;   /* 4画像 × 各8s = 32s */
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.box .src1 {
  background-image : url(../images/layouts/main-bg-1.png);   /* 背景の画像を指定 */
  background-size: cover;
}
.box .src2 {
  background-image : url(../images/layouts/main-bg-2.png);   /* 背景の画像を指定 */
  animation-delay  : 8s;
  background-size: cover;
}
.box .src3 {
 background-image : url(../images/layouts/main-bg-3.png);   /* 背景の画像を指定 */
  animation-delay  : 16s;
  background-size: cover;
}
.box .src4 {
  background-image : url(../images/layouts/main-bg-4.png);   /* 背景の画像を指定 */
  animation-delay  : 24s;
  background-size: cover;
}

@keyframes bgAnime {
   0% { opacity: 0; transform: scale(1.3, 1.3); }
   1% { opacity: 1; transform: scale(1.3, 1.3); }
   5% { opacity: 1; transform: scale(1.3, 1.3); }
  21% { opacity: 1; transform: scale(1.0, 1.0); }
  25% { opacity: 1; transform: scale(1.0, 1.0); }
  26% { opacity: 0; }
 100% { opacity: 0; }
}

/* [00.MEDIA QUERIES,PRINT]
--------------------------------------------------------------------------*/
@-ms-viewport {
width: device-width;
}
@viewport {
width: device-width;
}
@media (max-width: 840px) {
	#main-top {
		height: 720px;
	}
	.box {
		height: 720px;
	}
	.box .src1 {
	  	background-image : url(../images/layouts/main-bg-sp-1.png);
	}
	.box .src2 {
	  	background-image : url(../images/layouts/main-bg-sp-2.png);
	  	animation-delay  : 8s;
	}
	.box .src3 {
	 	background-image : url(../images/layouts/main-bg-sp-3.png);
	  	animation-delay  : 16s;
	}
	.box .src4 {
	  	background-image : url(../images/layouts/main-bg-sp-4.png);
	  	animation-delay  : 24s;
	}
	.main-visual {
		width: 80%;
		padding: 260px 0 0 0;
		box-sizing: border-box;
	}
	.main-visual .txt-box {
		width: 100%;
	}
	.main-visual .txt-box .catchcopy h2 {
		font-size: 32px;
	}	
}
/* [width:1480-5200]
--------------------------------------------------------------------------*/
@media screen and (-webkit-min-device-pixel-ratio:2) and (min-width:1480px) and ( max-width:5200px){
	#main-top {
		height: 100vh;
	}
	.box {
		height: 100vh;
	}
	.main-visual {
		padding: 25% 0 70px 0;
	}
	.main-visual .txt-box {
		width: 50%;
	}
	.main-visual .txt-box .catchcopy {
		z-index: 10;
		color: #fff;
	}
}
/* Retina-specific styles. */
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
}
@media print {
}