@charset "UTF-8";


	
	
/* kv
--------------------- */
#fv {
	overflow: hidden;
	padding-top: 80px;
}
	#fv .text {
		width: 60%;
		overflow: hidden;
		position: relative;
	}
		#fv .loopSlider-top {
			width: 100%;
			height: 62px;
			position: absolute;
			top: 18%;
			left: 0;
			z-index: 2;
		}
		#fv .loopSlider-bottom {
			width: 100%;
			height: 62px;
			position: absolute;
			top: 46%;
			left: 0;
			z-index: 2;
		}
			#fv .loopSlider .loopslider_wrap {
				height: 62px;
				display: -webkit-flex;
				display: flex;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}
				#fv .loopSlider .loopslider_wrap ul {
					display: -webkit-flex;
					display: flex;
				}
					#fv .loopSlider .loopslider_wrap ul li {
						width: 214px;
					}

		#fv .text .en {
			display: inline-block;
			font-size: 12.0vw;
			font-weight: 700;
			line-height: 1;
			white-space: nowrap;
			color: transparent;
			-webkit-text-stroke: 1px #ffff;
		}
			#fv .text .en .txt-border {
				display: inline-block;
				color: #fff;
				-webkit-text-stroke: none;
				animation: size 2s ease-in-out infinite;
				-webkit-animation: size 2s ease-in-out infinite;
				-moz-animation: size 2s ease-in-out infinite;
			}
			@keyframes size{
				0% { transform: scale(0.97); }
				50% { transform: scale(1.02); }
				100% { transform: scale(0.97); }
			}

		#fv .text h2 {
			font-size: 4.7vw;
			font-weight: 700;
			line-height: 1;
			margin-top: 3%;
		}

	#fv .swiper-fv {
		width: 45%;
		height: 100%;
		overflow: hidden;
		aspect-ratio: 1 / 1;
	}
		#fv .swiper-fv img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
@media screen and (max-width: 1024px) {
	#fv {
		padding-top: 60px;
	}
		#fv .loopSlider-top {
			height: 47px;
			top: 16%;
		}
		#fv .loopSlider-bottom {
			height: 47px;
			top: 44%;
		}
			#fv .loopSlider .loopslider_wrap {
				height: 47px;
			}
				#fv .loopSlider .loopslider_wrap ul li {
					width: 160px;
				}
}
@media screen and (max-width: 767px) {
	#fv {
		display: block;
	}
		#fv .text {
			width: 100%;
		}
			#fv .loopSlider-top {
				height: 35px;
			}
			#fv .loopSlider-bottom {
				height: 35px;
			}
				#fv .loopSlider .loopslider_wrap ul li {
					width: 120px;
				}

			#fv .text .en {
				font-size: 21vw;
			}

			#fv .text h2 {
				font-size: 8.5vw;
				font-weight: 700;
				line-height: 1;
				margin-top: 4%;
			}

		#fv .swiper-fv {
			width: 100%;
			height: 100%;
			aspect-ratio: 4 / 3;
		}
}


	
	
/* pickup
--------------------- */
#pickup ul.tab {
	width: 100%;
	border-top: solid 1px #5488FF;
	border-bottom: solid 1px #5488FF;
}
	#pickup ul.tab li {
		width: 25%;
		border-right: solid 1px #5488FF;
		position: relative;
	}
	#pickup ul.tab li:nth-last-child(1) {
		border-right: none;
	}
	#pickup ul.tab li:before {
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-color: #ffffff transparent transparent transparent;
		border-width: 12px 15px 0px 15px;
		position: absolute;
		bottom: -12px;
		left: 50%;
		margin-left: -15px;
		opacity: 0;
		transition: 0.3s;
		-webkit-transition: 0.3s;
	}
	#pickup ul.tab li.active:before {
		opacity: 1;
	}
		#pickup ul.tab li a {
			display: flex;
			justify-content: center;
			align-items: center;
			height: auto;
			font-size: 1.5vw;
			font-weight: 700;
			line-height: 1;
			text-align: center;
			padding: 2vw 0;
		}
		#pickup ul.tab li.active a {
			background: #fff;
			color: #004DFF;
		}

#pickup .area {
	display: none;
	opacity: 0;
	padding: 5vw 7%;
	overflow: hidden;
}
#pickup .area.is-active {
	display: block;/*表示*/
    animation-name: displayAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
	#pickup .area h2 {
		font-size: 1.9vw;
		margin-bottom: 2.5vw;
	}

	#pickup .area .swiper-container {
		padding: 0;
		position: relative;
	}
		#pickup .area .swiper-container a.linkbox.grey {
			pointer-events: none;
			opacity: 0.3;
		}
		#pickup .area .swiper-container a.linkbox {
			display: block;
		}
			#pickup .area .swiper-container a.linkbox .pht {
				position: relative;
			}
				#pickup .area .swiper-container a.linkbox .pht .label {
					display: inline-block;
					background: #004DFF;
					font-size: 1.1vw;
					font-weight: 700;
					line-height: 1;
					padding: 0.5vw 0.6vw 0.2vw 0.6vw;
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 2;
				}

			#pickup .area .swiper-container a.linkbox h3 {
				margin-top: 1vw;
				font-size: 1.3vw;
				font-weight: 700;
				line-height: 1.4em;
				padding-left: 1.9vw;
				background: url("../common/img/icon_arrow_yellow.svg") no-repeat left top 0.2vw / 1.3vw;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#pickup .area .swiper-container a.linkbox:hover h3 {
				padding-left: 1.7vw;
				color: #FF0;
			}

		#pickup .area .swiper-container .swiper-button-prev {
			width: 4.5%;
			height: auto;
			aspect-ratio: 1 / 1;
			background: url("../common/img/btn_prev.svg") no-repeat center / 100%;
			border-radius: 50%;
			top: -34%;
			left: auto;
			right: 5.5%;
			margin: 0;
		}
		#pickup .area .swiper-container .swiper-button-prev:after {
			display: none;
		}

		#pickup .area .swiper-container .swiper-button-next {
			width: 4.5%;
			height: auto;
			aspect-ratio: 1 / 1;
			background: url("../common/img/btn_next.svg") no-repeat center / 100%;
			border-radius: 50%;
			top: -34%;
			right: 0;
			margin: 0;
		}
		#pickup .area .swiper-container .swiper-button-next:after {
			display: none;
		}
@media screen and (max-width: 1024px) {
		#pickup ul.tab li:before {
			border-width: 10px 12px 0px 12px;
			bottom: -10px;
			margin-left: -12px;
		}
			#pickup ul.tab li a {
				font-size: 1.8vw;
				padding: 2.5vw 0;
			}

	#pickup .area {
		padding: 5vw 7%;
	}
		#pickup .area h2 {
			font-size: 2.2vw;
			margin-bottom: 2.5vw;
		}

		#pickup .area .swiper-container a.linkbox .pht .label {
			font-size: 1.5vw;
			padding: 0.8vw 0.6vw 0.3vw 0.6vw;
		}

		#pickup .area .swiper-container a.linkbox h3 {
			margin-top: 1.5vw;
			font-size: 1.8vw;
			padding-left: 2.4vw;
			background: url("../common/img/icon_arrow_yellow.svg") no-repeat left top 0.35vw / 1.8vw;
		}
		#pickup .area .swiper-container a.linkbox:hover h3 {
			padding-left: 2.0vw;
		}

	#pickup .area .swiper-container .swiper-button-prev {
		width: 5%;
		top: -26%;
		right: 6%;
	}
	#pickup .area .swiper-container .swiper-button-prev:after {
		display: none;
	}

	#pickup .area .swiper-container .swiper-button-next {
		width: 5%;
		top: -26%;
	}
}
@media screen and (max-width: 767px) {
		#pickup ul.tab {
			border-bottom: none;
		}
		#pickup ul.tab li {
			width: 50%;
			border-bottom: solid 1px #5488FF;
		}
		#pickup ul.tab li:before {
			display: none;
		}
			#pickup ul.tab li a {
				font-size: 3.8vw;
				padding: 4vw 0;
			}

	#pickup .area {
		padding: 10vw 7%;
	}
		#pickup .area h2 {
			font-size: 6.0vw;
			margin-bottom: 3.5vw;
		}

		#pickup .area .swiper-container a.linkbox .pht .label {
			font-size: 3.2vw;
			padding: 1vw 1.5vw 0.6vw 1.5vw;
		}

		#pickup .area .swiper-container a.linkbox h3 {
			margin-top: 1.5vw;
			font-size: 3.8vw;
			padding-left: 5.4vw;
			background: url("../common/img/icon_arrow_yellow.svg") no-repeat left top 0.8vw / 4vw;
		}
		#pickup .area .swiper-container a.linkbox:hover h3 {
			padding-left: 5.4vw;
			color: #fff;
		}

	#pickup .area .swiper-container .swiper-button-prev {
		width: 10%;
		top: -30%;
		right: 12%;
	}

	#pickup .area .swiper-container .swiper-button-next {
		width: 10%;
		top: -30%;
	}
}