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


	
	
/* fv
--------------------- */
#fv {
	padding: 10px;
}
	#fv #slider {
		width: 100%;
		height: -webkit-calc(100vh - 20px);
		height: calc(100vh - 20px);
		border-radius: 20px;
	}
		#fv #slider .text {
			width: 1000px;
			margin: 0 auto;
			color: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateY(-50%) translateX(-50%);
			-webkit-transform: translateY(-50%) translateX(-50%);
		}
			#fv #slider .text .catch {
				font-size: 6.0rem;
				font-weight: 700;
				line-height: 1.3em;
				margin-bottom: 25px;
			}
			#fv #slider .text .en {
				font-size: 1.8rem;
				line-height: 1;
			}


		#fv #slider .news {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 1000px;
			position: absolute;
			color: #fff;
			bottom: 30px;
			left: 50%;
			margin-left: -500px;
		}
			#fv #slider dl.news dt {
				font-size: 2.0rem;
				line-height: 1;
				margin-right: 40px;
			}

			#fv #slider dl.news dd {
				font-size: 1.4rem;
				line-height: 1;
				margin-top: 3px;
			}
				#fv #slider dl.news dd a {
					text-decoration: underline;
				}
				#fv #slider dl.news dd a:hover {
					text-decoration: none;
				}


	
	
/* message
--------------------- */
#message {
	padding: 100px 0;
}
#message .inner_1000 {
	display: flex;
	justify-content: center;
	align-items: center;
}
	#message .en-txt {
		font-size: 1.8rem;
		color: #C3002F;
		line-height: 1;
		position: absolute;
		top: 15px;
		left: 0;
	}

	#message .text h2 {
		font-size: 4.0rem;
		font-weight: 700;
		line-height: 1.3em;
		margin-bottom: 35px;
	}

	#message .text .txt {
		font-size: 1.8rem;
		font-weight: 700;
		margin-top: 15px;
	}


	
	
/* pickup
--------------------- */
#pickup {
	padding: 0 0 120px 0;
}
	#pickup .en-txt {
		font-size: 1.8rem;
		color: #C3002F;
		line-height: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		position: absolute;
		top: 8px;
		left: -40px;
	}


	#pickup ul.list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}
		#pickup ul.list li {
			overflow: hidden;
			aspect-ratio: 1 / 1;
			border-radius: 30px;
			border: solid 10px #fff
		}
		#pickup ul.list li:nth-child(1) {
			background: url("../img/pickup_pht01.jpg") no-repeat center / cover;
			grid-area: 1 / 1 / 3 / 3;
		}
		#pickup ul.list li:nth-child(2) {
			background: url("../img/pickup_pht02.jpg") no-repeat center / cover;
			grid-area: 1 / 3 / 2 / 4;
		}
		#pickup ul.list li:nth-child(3) {
			grid-area: 2 / 3 / 3 / 4;
		}
		#pickup ul.list li:nth-child(4) {
			grid-area: 3 / 1 / 4 / 2;
		}
		#pickup ul.list li:nth-child(5) {
			background: url("../img/pickup_pht05.jpg") no-repeat center / cover;
			grid-area: 3 / 2 / 4 / 4;
			aspect-ratio: 16 / 8;
		}
			#pickup ul.list li a {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				aspect-ratio: 1 / 1;
				color: #fff;
				text-align: center;
				position: relative;
			}
			#pickup ul.list li a {
				background: rgba(0,0,0,0.4);
			}
			#pickup ul.list li:nth-child(3) a,
			#pickup ul.list li:nth-child(4) a {
				background: #C3002F;
			}
			#pickup ul.list li a:hover {
				background: rgba(0,0,0,0.7);
			}
			#pickup ul.list li:nth-child(3) a:hover,
			#pickup ul.list li:nth-child(4) a:hover {
				background: #A20A2F;
				opacity: 1;
			}
			#pickup ul.list li:nth-child(5) a {
				aspect-ratio: 16 / 8;
			}
			#pickup ul.list li.off a {
				pointer-events: none;
			}
				#pickup ul.list li a .text .head {
					width: 136px;
					height: 30px;
					border-radius: 15px;
					background: #fff;
					font-size: 1.4rem;
					font-weight: 700;
					color: #C3002F;
					line-height: 30px;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translateY(-50%) translateX(-50%);
					-webkit-transform: translateY(-50%) translateX(-50%);
					margin-top: -130px;
				}

				#pickup ul.list li a .text .en-read {
					font-size: 1.2rem;
					line-height: 1;
					margin-bottom: 10px;
				}
				#pickup ul.list li:nth-child(1) a .text .en-read {
					font-size: 1.4rem;
					margin-bottom: 0;
					white-space: nowrap;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translateY(-50%) translateX(-50%);
					-webkit-transform: translateY(-50%) translateX(-50%);
				}

				#pickup ul.list li a .text h2 {
					font-size: 3.0rem;
					line-height: 1.3em;
				}
				#pickup ul.list li:nth-child(1) a .text h2 {
					font-size: 6.0rem;
					line-height: 2.0em;
				}
				#pickup ul.list li.off a .text h2 {
					color: rgba(255,255,255,0.7);
				}

				#pickup ul.list li a .more {
					width: 100%;
					text-align: center;
					position: absolute;
					bottom: 30px;
					left: 0;
				}
					#pickup ul.list li a .more .en {
						display: inline-block;
						font-size: 1.4rem;
						font-weight: 500;
						line-height: 1;
						padding-right: 15px;
						position: relative;
					}
					#pickup ul.list li.off a .more .en {
						padding-right: 0;
					}
					#pickup ul.list li a .more .en:before {
						content: "";
						width: 8px;
						height: 8px;
						border-radius: 50%;
						background: #fff;
						position: absolute;
						top: 3.5px;
						right: 0;
					}
					#pickup ul.list li.off a .more .en:before {
						display: none;
					}


	
	
/* gallery
--------------------- */
#gallery {
	padding: 0 0 10px 0;
}
	#gallery .loopSlider {
		height: 240px;
		overflow: hidden;
		position: relative;
	}
		#gallery .loopSlider .loopslider_wrap {
			height: 240px;
			display: -webkit-flex;
			display: flex;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
			#gallery .loopSlider .loopslider_wrap ul {
				display: -webkit-flex;
				display: flex;
			}
				#gallery .loopSlider .loopslider_wrap ul li {
					width: 400px;
					margin: 0 5px;
					border-radius: 10px;
					overflow: hidden;
				}








/* 1200px */
@media screen and (max-width: 1200px) {


	
	
/* fv
--------------------- */
#fv #slider .text {
	width: 86%;
}


#fv #slider .news {
	width: 86%;
	left: 7%;
	margin-left: 0;
}


	
	
/* message
--------------------- */
#message .en-txt {
	left: 10px;
}


	
	
/* pickup
--------------------- */
#pickup .en-txt {
	left: 1%;
}








}





/* 1024px */
@media screen and (max-width: 1024px) {


	
	
/* fv
--------------------- */
#fv #slider .text .catch {
	font-size: 5.0rem;
}
#fv #slider .text .en {
	font-size: 1.6rem;
}


#fv #slider dl.news dt {
	font-size: 1.8rem;
	margin-right: 30px;
}

#fv #slider dl.news dd {
	font-size: 1.3rem;
}


	
	
/* message
--------------------- */
#message {
	padding: 80px 0;
}
	#message .en-txt {
		font-size: 1.6rem;
	}

	#message .text h2 {
		font-size: 3.4rem;
		margin-bottom: 30px;
	}

	#message .text .txt {
		margin-top: 15px;
	}


	
	
/* pickup
--------------------- */
#pickup {
	padding: 0 0 100px 0;
}
	#pickup .en-txt {
		font-size: 1.6rem;
	}


	#pickup ul.list li a .text .head {
		width: 120px;
		height: 26px;
		border-radius: 13px;
		font-size: 1.2rem;
		line-height: 26px;
		margin-top: -105px;
	}

	#pickup ul.list li a .text .en-read {
		font-size: 1.0rem;
	}
	#pickup ul.list li:nth-child(1) a .text .en-read {
		font-size: 1.2rem;
	}

	#pickup ul.list li a .text h2 {
		font-size: 2.2rem;
		line-height: 1.2em;
	}
	#pickup ul.list li:nth-child(1) a .text h2 {
		font-size: 5.0rem;
	}

	#pickup ul.list li a .more {
		bottom: 20px;
	}
		#pickup ul.list li a .more .en {
			font-size: 1.2rem;
		}
		#pickup ul.list li a .more .en:before {
			top: 2.5px;
		}


	
	
/* gallery
--------------------- */
#gallery .loopSlider {
	height: 180px;
}
	#gallery .loopSlider .loopslider_wrap {
		height: 180px;
	}
		#gallery .loopSlider .loopslider_wrap ul li {
			width: 300px;
		}










}





/* max 768px */
@media screen and (max-width: 768px) {


	
	
/* fv
--------------------- */
#fv {
	padding: 6px;
}
	#fv #slider {
		height: -webkit-calc(100vh - 12px);
		height: calc(100vh - 12px);
		height: -webkit-calc(100dvh - 12px);
		height: calc(100dvh - 12px);
		border-radius: 15px;
	}
		#fv #slider .text .catch {
			font-size: 3.4rem;
			margin-bottom: 18px;
		}
		#fv #slider .text .en {
			font-size: 1.5rem;
		}


		#fv #slider dl.news {
			display: block;
		}
			#fv #slider dl.news dt {
				font-size: 2.0rem;
				margin-right: 0;
				margin-bottom: 10px;
			}

			#fv #slider dl.news dd {
				font-size: 1.2rem;
				letter-spacing: 0;
			}


	
	
/* message
--------------------- */
#message {
	padding: 60px 0;
}
#message .inner_1000 {
	display: block;
}
	#message .en-txt {
		font-size: 1.6rem;
		position: static;
		margin-bottom: 15px;
	}

	#message .text h2 {
		font-size: 3.0rem;
		margin-bottom: 25px;
	}

	#message .text .txt {
		font-size: 1.6rem;
		margin-top: 12px;
	}


	
	
/* pickup
--------------------- */
#pickup {
	padding: 0 0 80px 0;
}
	#pickup ul.list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(5, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}
		#pickup ul.list li {
			border-radius: 15px;
			border: solid 5px #fff;
		}
		#pickup ul.list li:nth-child(1) {
			grid-area: 1 / 1 / 3 / 3;
		}
		#pickup ul.list li:nth-child(2) {
			grid-area: 3 / 1 / 4 / 2;
		}
		#pickup ul.list li:nth-child(3) {
			grid-area: 3 / 2 / 4 / 3;
		}
		#pickup ul.list li:nth-child(4) {
			grid-area: 4 / 1 / 5 / 3;
			aspect-ratio: 16 / 8;
		}
		#pickup ul.list li:nth-child(5) {
			grid-area: 5 / 1 / 6 / 3;
			aspect-ratio: 16 / 8;
		}
			#pickup ul.list li:nth-child(4) a,
			#pickup ul.list li:nth-child(5) a {
				aspect-ratio: 16 / 8;
			}
				#pickup ul.list li:nth-child(2) a .text,
				#pickup ul.list li:nth-child(3) a .text,
				#pickup ul.list li:nth-child(4) a .text {
					margin-top: -15px;
				}
					#pickup ul.list li a .text .head {
						margin-top: -82px;
					}

					#pickup ul.list li a .text .en-read {
						letter-spacing: 0;
					}
					#pickup ul.list li:nth-child(1) a .text .en-read {
						font-size: 1.0rem;
					}

					#pickup ul.list li a .text h2 {
						font-size: 1.8rem;
						line-height: 1.3em;
					}
					#pickup ul.list li:nth-child(1) a .text h2 {
						font-size: 3.4rem;
						line-height: 2.0em;
					}

					#pickup ul.list li a .more {
						bottom: 15px;
					}


	
	
/* gallery
--------------------- */
#gallery .loopSlider {
	height: 120px;
}
	#gallery .loopSlider .loopslider_wrap {
		height: 120px;
	}
		#gallery .loopSlider .loopslider_wrap ul li {
			width: 200px;
		}










}