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





	
	
/* fv
--------------------- */
#fv {
	width: 100%;
	background: url("../img/fv_bg.png") no-repeat left center;
	position: relative;
}
#fv:before {
	content: "";
	width: 100%;
	height: 768px;
	background: #F8FCFF;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
	#fv .headtit {
		height: 768px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #1B9FFC;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}
		#fv .headtit .en {
			font-size: 9.0rem;
			letter-spacing: 0.1em;
			line-height: 1;
		}
		#fv .headtit .en:nth-last-child(1) {
			font-size: 6.0rem;
		}

		#fv .headtit h1 {
			font-size: 1.8rem;
			font-weight: 700;
			line-height: 1;
			padding: 20px 0 25px 0;
			background: url("../img/headtit_border.svg") no-repeat right 50px center;
		}


	#fv .swiper-container {
		z-index: auto;
	}
		#fv .swiper-container .swiper-wrapper .swiper-slide {
			clear: both;
			z-index: 1;
		}
			#fv .swiper-container .swiper-wrapper .swiper-slide img {
				padding-top: 140px;
				width: 670px;
				height: auto;
				float: right;
			}

		#fv .swiper-container .swiper-pagination {
			text-align: left;
			bottom: 100px;
			z-index: 11;
		}
			#fv .swiper-container .swiper-pagination .swiper-pagination-bullet {
				width: 8px;
				height: 8px;
				background: #A2D8FD;
				opacity: 1;
				margin: 0 6px;
			}
			#fv .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
				background: #1B9FFC;
				position: relative;
			}
			#fv .swiper-container .swiper-pagination .swiper-pagination-bullet-active:before {
				content: "";
				width: 10px;
				height: 10px;
				border: solid 1px #1B9FFC;
				border-radius: 50%;
				position: absolute;
				top: -2px;
				left: -2px;
			}





	
	
/* qualifiers
--------------------- */
#qualifiers {
	width: 100%;
	padding: 0 0 90px 0;
}
	#qualifiers .box {
		width: 32%;
		margin-right: 2%;
		margin-bottom: 80px;
		padding: 25px 25px 50px 25px;
		border-radius: 0 0 20px 0;
		border: solid 10px #E5F4FF;
		position: relative;
	}
	#qualifiers .box:nth-child(3n) {
		margin-right: 0;
	}
		#qualifiers .box h3 {
			width: 100%;
			font-size: 2.6rem;
			color: #1B9FFC;
			text-align: center;
			position: absolute;
			top: -31px;
			left: 0;
		}


		#qualifiers .box .txt {
			font-size: 1.5rem;
			font-weight: 700;
			line-height: 1.6em;
		}


		#qualifiers .box table {
			width: 100%;
			border-collapse: collapse;
		}
			#qualifiers .box table th {
				width: 45px;
				border-bottom: solid 1px #1B9FFC;
				font-size: 1.3rem;
				text-align: left;
				padding-top: 15px;
				padding-bottom: 3px;
			}
			#qualifiers .box table td {
				width: -webkit-calc(100% - 45px);
				width: calc(100% - 45px);
				border-bottom: solid 1px #ddd;
				font-size: 1.3rem;
				text-align: left;
				padding-top: 15px;
				padding-bottom: 3px;
				padding-left: 10px;
			}


		#qualifiers .box .btn {
			position: absolute;
			bottom: -30px;
			left: 50%;
			margin-left: -110px;
		}





	
	
/* channel
--------------------- */
#channel {
	width: 100%;
	padding: 0 0 150px 0;
}
	#channel .title_channel {
		width: 20%;
		position: relative;
	}
		#channel .title_channel .en_tit {
			font-size: 8.0rem;
			line-height: 1.0em;
			position: absolute;
			top: 100px;
			right: -80px;
			transform: rotate(90deg);
		}

		#channel .title_channel h2 {
			font-size: 1.5rem;
			line-height: 1;
			letter-spacing: 0.15em;
			position: absolute;
			top: 265px;
			right: 0;
			transform: rotate(90deg);
		}

		#channel .title_channel .btn {
			position: absolute;
			bottom: 100px;
			right: -50px;
		}


	#channel .pht {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80%;
		height: 580px;
		border-radius: 0 0 0 50px;
		background: url("../img/channel_pht_02.jpg") no-repeat center / cover;
	}
		#channel .pht a {
			display: block;
			width: 80px;
		}





	
	
/* topics
--------------------- */
#topics {
	width: 100%;
}
	#topics .box {
		width: 23.5%;
		margin-right: 2%;
		margin-bottom: 50px;
	}
	#topics .box:nth-child(4n) {
		margin-right: 0;
	}
		#topics .box a {
			display: block;
		}
			#topics .box a .pht {
				overflow: hidden;
				border-radius: 0 0 20px 0;
			}
				#topics .box a .pht img {
					-moz-transition: -moz-transform 0.2s linear;
					-webkit-transition: -webkit-transform 0.2s linear;
					-o-transition: -o-transform 0.2s linear;
					-ms-transition: -ms-transform 0.2s linear;
					transition: transform 0.2s linear;
				}
				#topics .box a:hover .pht img {
					-webkit-transform: scale(1.05);
					-moz-transform: scale(1.05);
					-o-transform: scale(1.05);
					-ms-transform: scale(1.05);
					transform: scale(1.05);
				}

			#topics .box a time {
				display: block;
				font-size: 1.2rem;
				line-height: 1;
				color: #1B9FFC;
				padding-top: 15px;
			}

			#topics .box a h3 {
				font-size: 1.5rem;
				line-height: 1.4em;
				padding-top: 10px;
			}







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





	
	
/* fv
--------------------- */
#fv .inner {
	padding: 0;
}
	#fv .headtit {
		left: 5%;
	}


	#fv .swiper-container .swiper-pagination {
		left: 5%;
	}
	
	
	
	
	
	
}









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





	
	
/* fv
--------------------- */
#fv:before {
	content: "";
	width: 100%;
	height: 500px;
	background: #F8FCFF;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
	#fv .headtit {
		height: 500px;
	}
		#fv .headtit .en {
			font-size: 5.0rem;
		}
		#fv .headtit .en:nth-last-child(1) {
			font-size: 3.2rem;
		}

		#fv .headtit h1 {
			font-size: 1.5rem;
			padding: 15px 0 20px 0;
			background: none;
		}


			#fv .swiper-container .swiper-wrapper .swiper-slide img {
				padding-top: 80px;
				width: 470px;
				height: auto;
				float: right;
			}





	
	
/* qualifiers
--------------------- */
#qualifiers .box {
	width: 48.5%;
	margin-right: 3%;
	margin-bottom: 80px;
}
#qualifiers .box:nth-child(2n) {
	margin-right: 0;
}
#qualifiers .box:nth-child(3) {
	margin-right: 3%;
}



}






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





	
	
/* fv
--------------------- */
#fv {
	background: url("../img/fv_bg.png") no-repeat left center;
}
#fv:before {
	content: "";
	width: 100%;
	height: 85%;
	background: #F8FCFF;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
	#fv .headtit {
		padding-top: 100px;
		height: auto;
		display: block;
		position: static;
		text-align: center;
	}

		#fv .headtit h1 {
			text-align: center;
		}


	#fv .swiper-container {
		z-index: auto;
		padding-bottom: 40px;
	}
		#fv .swiper-container .swiper-wrapper .swiper-slide {
			padding: 0 5%;
		}
			#fv .swiper-container .swiper-wrapper .swiper-slide img {
				padding-top: 0;
				width: 100%;
				float: none;
			}

		#fv .swiper-container .swiper-pagination {
			text-align: center;
			bottom: 0;
			left: 0;
		}





	
	
/* qualifiers
--------------------- */
#qualifiers {
	padding: 0 0 30px 0;
}
	#qualifiers .box {
		width: 100%;
		margin-right: 0 !important;
		margin-bottom: 60px;
	}
		#qualifiers .box h3 {
			font-size: 2.4rem;
			top: -30px;
		}


		#qualifiers .box .txt {
			font-size: 1.4rem;
			line-height: 1.6em;
		}


		#qualifiers .box table {
			width: 100%;
			border-collapse: collapse;
		}
			#qualifiers .box table th {
				font-size: 1.2rem;
			}
			#qualifiers .box table td {
				font-size: 1.2rem;
			}


		#qualifiers .box .btn {
			margin-left: -35%;
		}





	
	
/* channel
--------------------- */
#channel {
	padding: 0 0 65px 0;
}
	#channel .title_channel {
		width: 90px;
	}
		#channel .title_channel .en_tit {
			font-size: 4.0rem;
			top: 53px;
			right: auto;
			left: -50px;
		}

		#channel .title_channel h2 {
			font-size: 1.0rem;
			letter-spacing: 0.06em;
			top: 140px;
			right: -7px;
		}


	#channel .pht {
		width: -webkit-calc(100% - 90px);
		width: calc(100% - 90px);
		height: 220px;
		border-radius: 0 0 0 40px;
	}
		#channel .pht a {
			width: 60px;
		}
	

	#channel .btn {
		margin-top: 30px;
	}





	
	
/* topics
--------------------- */
#topics .box {
	width: 48%;
	margin-right: 4%;
	margin-bottom: 30px;
}
#topics .box:nth-child(2n) {
	margin-right: 0;
}
	#topics .box a time {
		font-size: 1.0rem;
	}

	#topics .box a h3 {
		font-size: 1.4rem;
	}







}