@charset "UTF-8";
/* トップページ --------------------------------------------------------------- */



/* トップページのみの指定 --------------------------------------------------------------- */
body {
	width: 100%;
	height: 100vh;
	overflow-y: visible;
	overflow-y: hidden;
	}

	#header {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		}

		#header #headerSCR ul li:last-of-type {
			margin-right: 100px;
			}

		#header #Language a {
			color: #ffffff;
			}
		
		#header #Language.active a {
			color: inherit;
			}

@media(max-width: 990px){
	}

@media(min-width: 1px) and (max-width: 660px){
	}



/* introduce --------------------------------------------------------------- */
#introduce {
	width: 100%;
	height: 100vh;
	cursor: pointer;
	overflow: hidden;
	background-color: #000;
	z-index: 9998;
	position: fixed;
	left: 0;
	top: 0;
	}

	#introduceMOVIE {
		width: 100%;
		height: 100vh;
		opacity: 0.8;
		position: relative;
		}

		#introduceMOVIE video {
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			}

	#introduce p {
		position: absolute;
		transform: translate(-50%,-50%);
		}

	#introduce p:first-of-type {
		width: 180px;
		left: 50%;
		top: 50%;
		}

		#introduce p img {
			width: 100%;
			}

		#introduce p:last-of-type {
			width: 150px;
			position: absolute;
			right: 50px;
			bottom: 50px;
			transform: translate(0,0);
			}
	
	#introduce a {
		display: inline-block;
		color: #ffffff;
		position: absolute;
		right: 60px;
		top: 40px;
		}

@media(max-width: 990px){
		#introduce {
			height: 100dvh;
			}

			#introduceMOVIE {
				height: 100dvh;
				}

			#introduce p:first-of-type {
				width: 160px;
				}

			#introduce p:last-of-type {
				right: auto;
				left: 50%;
				bottom: 35px;
				transform: translate(-50%,0);
				}
			
			#introduce a {
				position: absolute;
				right: 30px;
				top: 20px;
				}
	}

@media(min-width: 1px) and (max-width: 660px){
	}
	
	
	
/* concept --------------------------------------------------------------- */
.concept {
	width: 100%;
	margin: 0 auto 100px auto;
	position: relative;
	text-align: center;
	}

	.concept img {
		width: 100%;
		margin-bottom: 100px;
		}

	.concept p {
		width: 70%;
		font-size: 20px;
		line-height: 1.8;
		margin: 0 auto;
		}

		.concept p span {
			font-size: 24px;
			font-weight: bold;
			line-height: 1.5;
			margin-bottom: 30px;
			}

	#video {
		margin: 0 100px 100px 100px;
		position: relative;
		}

		#video video {
			width: 100%;
			}

@media(max-width: 990px){
	.concept {
		margin: 0 auto 50px auto;
		text-align: left;
		}

		.concept img {
			margin-bottom: 50px;
			}

		.concept p {
			width: 90%;
			font-size: 16px;
			}

			.concept p span {
				font-size: 20px;
				margin: 0 0 20px 0;
				letter-spacing: inherit;
				}
	
		#video {
			width: 100%;
			margin: 0 auto 30px auto;
			}
	}

@media(min-width: 1px) and (max-width: 660px){
	}



/* photo --------------------------------------------------------------- */
#photo {
	width: 100%;
	margin: 0 auto 100px auto;
	position: relative;
	}

	#photo #photoSLICK {
		margin-bottom: 50px;
		position: relative;
		}

		#photo #photoSLICK div {
			overflow: hidden;
			background-color: #fff;
			}

			#photo #photoSLICK div img {
				width: 100%;
				aspect-ratio: 16 / 9;
				object-fit: cover;
				opacity: 0.5;
				transition: all 0.5s ease-out;
				}

			#photo #photoSLICK div.slick-current img {
				opacity: 1;
				}

		#photo a {
			margin: 0 auto;
			padding: 35px 0;
			border: #d9d9d9 solid 1px;
			border-left: 0;
			border-right: 0;
			text-align: center;
			font-size: 22px;
			}

			#photo a span {
				font-size: 18px;
				text-align: center;
				}

			.slick-prev,
			.slick-next {
				width: 70px;
				height: 70px;
				}

			.slick-prev {
				left: 7.5%;
				}

			.slick-next {
				right: 7.5%;
				}

@media(max-width: 990px){
	#photo {
		margin: 0 auto 70px auto;
		}
		
		#photo #photoSLICK {
			margin-bottom: 20px;
			}
	
				#photo #photoSLICK div img {
					aspect-ratio: 1 / 1;
					}

			#photo a {
				width: 90%;
				font-size: inherit;
				padding: 20px 0;
				line-height: 1.5;
				border: #d9d9d9 solid 1px;
				}

				#photo a span {
					font-size: 85%;
					margin-left: 0;
					}
	
				.slick-prev,
				.slick-next {
					width: 45px;
					height: 45px;
					}

				.slick-prev {
					left: 6%;
					}

				.slick-next {
					right: 6%;
					}
	}

@media(min-width: 1px) and (max-width: 660px){
	}



/* list --------------------------------------------------------------- */
#list {
	margin: 0 auto 80px auto;
	}

	#list a {
		margin: 0 auto 40px auto;
		overflow: hidden;
		}

	#list a:last-of-type {
		margin-bottom: 0;
		}

		#list .list .listLEFT {
			float: left;
			width: 50%;
			margin: 0 auto;
			padding: 50px 100px;
			box-sizing: border-box;
			position: relative;
			}			
			
			#list .list .listLEFT h2 {
				font-size: 25px;
				margin-bottom: 50px;
				}

			#list .list .listLEFT p:first-of-type {
				}

			#list .list .listLEFT p:last-of-type {
				width: 160px;
				margin: 0 0 0 auto;
				padding: 0 0 10px 1px;
				background-image: url("../../img/home/arrow.png");
				background-position: right bottom;
				background-repeat: no-repeat;
				background-size: auto 17px;
				position: absolute;
				right: 90px;
				top: auto;
				bottom: 60px;
				}

		#list .list .listRIGHT {
			float: right;
			width: 50%;
			margin: 0 auto;
			}

			#list .list .listRIGHT img {
				width: 100%;
				}
				
@media(max-width: 990px){
	#list {
		margin: 0 auto 40px auto;
		}
	
			#list .list .listLEFT {
				float: none;
				width: 100%;
				margin-bottom: 30px;
				padding: 0 0 0 5%;
				}			

				#list .list .listLEFT h2 {
					font-size: 18px;
					margin-bottom: 25px;
					padding-bottom: 10px;
					border-bottom: #d9d9d9 solid 1px;
					}

				#list .list .listLEFT p:first-of-type {
					}

				#list .list .listLEFT p:last-of-type {
					width: auto;
					font-size: 12px;
					margin: 0 0 0 auto;
					padding: 0;
					background-image: none;
					right: 5%;
					top: 7px;
					bottom: auto;
					}

			#list .list .listRIGHT {
				float: none;
				width: 95%;
				margin-left: 5%;
				}

				#list .list .listRIGHT img {
					width: 100%;
					}
	}

@media(min-width: 1px) and (max-width: 660px){
	}