@charset "utf-8";

/*******************************
  個別設定
*******************************/

	#mainImage {
		max-width: 1500px;
		margin: 0 auto;
		position: relative;
		color: #fff;
	}
	#mainImage .headline {
		width: 80%;
		margin: -60px 0 0;
		position: absolute;
		top: 50%;
		left: 10%;
		z-index: 10;
		line-height: 1;
	}
	#pageTitle {
		margin: 0 0 20px;
		font-size: 70px;
		font-weight: normal;
	}
	#mainImage .catch {
		font-size: 30px;
	}
	
	#mainImage .slider {
		overflow: hidden;
	}
	#mainImage .slider img {
		transform: scale(1.2);
		transform-origin: right center;
		/*animation: bgAnime 10s infinite linear;*/
		transition: 8s ease;
	}
	#mainImage .flex-active-slide img {
		transform: translateX(10%) scale(1.2);
	}
	
	

	@keyframes bgAnime {
		0% { transform: translateX(-1.5%) }
		50% { transform: translateX(1.5%) }
		100% { transform: translateX(-1.5%) }
	}
	
	#lead {
		padding: 80px 0 90px;
		font-size: 16px;
		text-align: center;
		line-height: 2;
	}
	#lead .title {
		margin: 0 0 45px;
		font-size: 32px;
		line-height: 1;
	}
	#lead .image {
		margin: 45px 0 60px;
	}
	
	#section01 {
		padding: 80px 0 0;
		background: #000 url(../imgs/bg-01.jpg) 50% 100% no-repeat;
		color: #fff;
		font-size: 16px;
		text-align: center;
		line-height: 2;
	}
	#section01 .title {
		margin: 0 0 40px;
		font-weight: normal;
		line-height: 1;
		text-align: center;
	}
	#section01 .title .en {
		display: block;
		font-size: 60px;
	}
	#section01 .title .ja {
		display: block;
		margin: 10px 0 0;
		font-size: 18px;
	}
	#section01 p {
		margin: 0 0 -100px;
		position: relative;
		z-index: +1;
	}
	#section01 .image {
		position: relative;
	}
	#section01 .image li {
		width: 22.6%;
		position: absolute;
	}
	#section01 .image .image01 {
		top: 21.867%;
		left: 38.7%;
	}
	#section01 .image .image02 {
		top: 49.232%;
		left: 26.1%;
	}
	#section01 .image .image03 {
		top: 49.232%;
		left: 51.2%;
	}

	#section02 {
		margin: 0 0 80px;
		padding: 70px 0 0;
	}
	#section02 .title {
		margin: 0 0 95px;
		font-weight: normal;
		line-height: 1;
		text-align: center;
	}
	#section02 .title .en {
		display: block;
		font-size: 48px;
	}
	#section02 .title .ja {
		display: block;
		margin: 10px 0 0;
		font-size: 18px;
	}
	#section02 .inner {
		position: relative;
	}
	#section02 .inner p {
		width: 34%;
		position: absolute;
		top: 0;
		left: 0;
	}
	#section02 .subTitle {
		width: 50%;
		position: absolute;
		top: 0;
		left: 50%;
		font-size: 32px;
		line-height: 1;
	}
	
@media only screen and (max-width:1020px) {
	#section01 {
		background-image: none;
	}
}

@media only screen and (max-width:800px) {
	#mainImage .headline {
		margin: 0;
		left: 20px;
		right: 20px;
		line-height: 1.5;
		transform: translateY(-50%);
	}
	#pageTitle {
		font-size: 36px;
	}
	#mainImage .catch {
		font-size: 24px;
	}
	
	#section01 .title .en {
		font-size: 48px;
	}
	#section01 .title .ja {
		font-size: 18px;
	}
	
	#section02 .inner p {
		width: auto;
		margin: 0 0 40px;
		position: static;
	}
	#section02 .subTitle {
		width: auto;
		margin: 0 0 -32px;
		position: relative;
		top: auto;
		left: auto;
	}
}
@media only screen and (max-width:640px) {
	#header {
		z-index: 9980 !important;
	}
	#section01 p {
		margin: 0;
	}
	
	#copyright {
		border-top: none;
	}
}
@media only screen and (max-width:480px) {
	#pageTitle {
		font-size: 24px;
	}
	#mainImage .catch {
		font-size: 14px;
	}
	
	#lead {
		text-align: left;
	}	
	#lead br {
		display: none;
	}	
	.lead {
		padding: 50px 0;
		font-size: 18px;
	}
	#section01 .title .en,
	#section02 .title .en {
		font-size: 24px;
	}
	#section01 .title .ja,
	#section02 .title .ja {
		font-size: 16px;
	}
	
	#section01 p {
		text-align: left;
	}
	#section01 p br {
		display: none;
	}
	
	#section02 .subTitle {
		margin: 0;
		font-size: 20px;
	}
}

	.scrollView {
		opacity: 0;
		transition: 2s 1s ease;
	}
	.scrollView.visible {
		opacity: 1;
	}
	.fromBelow .move {
		display: block;
		position: relative;
		z-index: +1;
		opacity: 0;
		transform: translateY(50px);
		transition: 2s 2s ease;
	}
	.fromBelow.visible .move {
		opacity: 1;
		transform: translateY(0);
	}
	
	#lead .title {
		opacity: 0;
		transition: 2s 5s ease;
	}
	#lead .p01 {
		opacity: 0;
		transition: 2s 7s ease;
	}
	#lead .image {
		opacity: 0;
		transform: translateY(50px);
		transition: 2s 9s ease;
	}
	#lead .p02 {
		opacity: 0;
		transition: 2s 11s ease;
	}
	
	#lead .visible .title,
	#lead .visible .p01,
	#lead .visible .image,
	#lead .visible .p02 {
		opacity: 1;
		transform: translateY(0);
	}
	
	#section01 .image .bg {
		opacity: 0;
		transition: 1s 5s ease;
	}
	#section01 .image .image01 {
		opacity: 0;
		transform: translate(0, -200px);
		transition: 2s 2s ease;
	}
	#section01 .image .image02 {
		opacity: 0;
		transform: translate(-150px, 150px);
		transition: 2s 2.5s ease;
	}
	#section01 .image .image03 {
		opacity: 0;
		transform: translate(150px, 150px);
		transition: 2s 3s ease;
	}
	#section01 .image.visible .bg {
		opacity: 1;
	}
	#section01 .image.visible .image01,
	#section01 .image.visible .image02,
	#section01 .image.visible .image03 {
		opacity: 1;
		transform: translate(0, 0);
	}