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

.mainVisual .swiper-slide{
	position:relative;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	overflow:hidden;
	width:100%;
	height:768px;
	overflow:hidden;
	}
	.mainVisual .swiper-slide-1{ background-image:url(../../images/mainImg/mainImg01.jpg); }
	.mainVisual .swiper-slide-2{ background-image:url(../../images/mainImg/mainImg02.jpg); }
	.mainVisual .swiper-slide-3{ background-image:url(../../images/mainImg/mainImg03.jpg); }
	.mainVisual .swiper-slide-4{ background-image:url(../../images/mainImg/mainImg04.jpg); }

	.mainVisual .textAnimate-wrapper {
		width:1200px;
		margin-top:300px;
		margin-left:auto;
		margin-right:auto;
		}
		.mainVisual .textAnimate-area {}
		.mainVisual .textAnimate-area p {
			position:relative;
			margin-bottom:10px;
			}
		.mainVisual .textAnimate-area p span {
			display:inline-block;
			font-size: 3em;
			line-height:1;
			font-weight:bold;
			color: transparent;
			position:relative;
			z-index:1;
			padding:10px;
			}
		.mainVisual .swiper-slide-active .textAnimate-area p span {
			-webkit-animation-name: TEXT;
							animation-name: TEXT;
			-webkit-animation-duration: 1s;
							animation-duration: 1s;
			-webkit-animation-fill-mode: both;
							animation-fill-mode: both;
			-webkit-animation-delay:1s;
							animation-delay:1s;
			}
		.mainVisual .textAnimate-area p span:before {
			content:'';
			width: 0;
			height: 100%;
			display: block;
			background: #3985bc;
			position: absolute;
			top: 0;
			left: 0;
			z-index:-1;
			}
		.mainVisual .swiper-slide-active .textAnimate-area p span:before {
			-webkit-animation-name: SCREEN;
							animation-name: SCREEN;
			-webkit-animation-duration: 1s;
							animation-duration: 1s;
			-webkit-animation-fill-mode: both;
							animation-fill-mode: both;
			-webkit-animation-delay:1s;
			animation-delay:1s;
			}
/*
		.mainVisual .swiper-slide-3 .textAnimate-area p span:before,
		.mainVisual .swiper-slide-4 .textAnimate-area p span:before {
			background: #86ab46;
			}
*/
@-webkit-keyframes TEXT {
  0% {
    color: transparent;
  }
  40% {
    color: transparent;
  }
  60% {
    color: transparent;
  }
  100% {
    color: #ffffff;
  }
}
@keyframes TEXT {
  0% {
    color: transparent;
  }
  40% {
    color: transparent;
  }
  60% {
    color: transparent;
  }
  100% {
    color: #ffffff;
  }
}
@-webkit-keyframes SCREEN {
  0% {
    width: 0;
  }
  40% {
    width: 100%;
  }

  60% {
    width: 100%;
  }
  100% {
    width: 100%;
	}
	/*消す時↓
  100% {
    width: 0;
    margin: 0 0 0 100%;
  }
	*/
}
@keyframes SCREEN {
  0% {
    width: 0;
  }
  40% {
    width: 100%;
  }

  60% {
    width: 100%;
  }
  100% {
    width: 100%;
	}
	/*消す時↓
  100% {
    width: 0;
    margin: 0 0 0 100%;
  }
	*/
}



	.mainVisual .swiper-slide-5{}
	.mainVisual .swiper-slide-5 ul{
		display:flex;
		height:100%;
		background-color:#f5f9fe;
		}
		.mainVisual .swiper-slide-5 li{
			position:relative;
			flex-shrink: 0;
			min-width:300px;
			width:25%;
			height:100%;
			background-repeat:no-repeat;
			background-position:center center;
			background-size:cover;
			opacity: 0;
			}
			.mainVisual .swiper-slide-5 li:nth-child(1) { background-image:url(../../images/mainImg/mainImg05-1.jpg);}
			.mainVisual .swiper-slide-5 li:nth-child(2) { background-image:url(../../images/mainImg/mainImg05-2.jpg);}
			.mainVisual .swiper-slide-5 li:nth-child(3) { background-image:url(../../images/mainImg/mainImg05-3.jpg);}
			.mainVisual .swiper-slide-5 li:nth-child(4) { background-image:url(../../images/mainImg/mainImg05-4.jpg);}

			.mainVisual .swiper-slide-active.swiper-slide-5 li{
				-webkit-animation-name: fadeIn;
								animation-name: fadeIn;
				-webkit-animation-duration: 1s;
								animation-duration: 1s;
				-webkit-animation-fill-mode: both;
								animation-fill-mode: both;
				}
			.mainVisual .swiper-slide-active.swiper-slide-5 li:nth-child(1) {-webkit-animation-delay:1s; animation-delay:1s;}
			.mainVisual .swiper-slide-active.swiper-slide-5 li:nth-child(2) {-webkit-animation-delay:2s; animation-delay:2s;}
			.mainVisual .swiper-slide-active.swiper-slide-5 li:nth-child(3) {-webkit-animation-delay:3s; animation-delay:3s;}
			.mainVisual .swiper-slide-active.swiper-slide-5 li:nth-child(4) {-webkit-animation-delay:4s; animation-delay:4s;}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    visibility:hidden;
  }
  to {
    opacity: 1;
    visibility:visible;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    visibility:hidden;
  }
  to {
    opacity: 1;
    visibility:visible;
  }
}
.mainVisual .swiper-slide-5 li a{
	position:absolute;
	left:0;
	bottom:80px;
	width:100%;
	display:block;
	background:rgba(0,0,0,0.7);
	text-align:center;
	color:#fff;
	text-decoration:none;
	padding:30px 10px;
	font-weight:bold;
	}
.mainVisual .swiper-slide-5 li .btn{
	border:#fff solid 1px;
	padding:10px 5px;
	font-size:0.8em;
	line-height:1;
	font-weight:500;
	max-width:180px;
	margin:10px auto 0;		
	}
.mainVisual .swiper-slide-5 li a:hover .btn,
.mainVisual .swiper-slide-5 li a:active .btn{
	background:rgba(255,255,255,0.3);
	}







/* ページネーションの余白 */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px;
}
/* ページネーションのサイズと色 */
.swiper-pagination-bullet {
  background-color: #fff;
	opacity: 0.5;
	box-shadow: 0 0 3px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 3px 0px rgba(0,0,0,0.5);
	-o-box-shadow: 0 0 3px 0px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 3px 0px rgba(0,0,0,0.5);
  height: 8px;
  width: 8px;
}
/* 選択されているページネーション */
.swiper-pagination-bullet-active {
	opacity: 1;
}