@charset "UTF-8";
.modal-video {
	background-color: rgba(0, 0, 0, 0.9);
}

	
	
/* fv
--------------------- */
#fv {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	background: rgba(0,0,0,0.2);
	position: relative;
}
#fv:before {
	content: "";
	width: 100%;
	height: 100vh;
	height: 100dvh;
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
}
	#fv #video-area {
		position: fixed;
		z-index: -1;
		top: 0;
		right:0;
		left:0;
		bottom:0;
		overflow: hidden;
	}
		#fv #video-area #video {
			position: absolute;
			z-index: -1;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
			height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
			min-height: 100%;
			min-width: 100%;
		}

	#fv .text {
		width: 100%;
		position:absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		text-shadow: 0 0 15px #666;
		text-align: center;
	}
		#fv .text h2 {
			font-size: 8.0rem;
			font-weight: 500;
			line-height: 1.3em;
			margin-bottom: 20px;
			padding-left: 20px;
		}

		#fv .text .en {
			font-size: 2.0rem;
			font-weight: 600;
			line-height: 1;
		}

	#fv .btn-concept {
		width: 130px;
		position: absolute;
		bottom: 20px;
		right: 370px;
	}
		#fv .btn-concept a:hover {
			opacity: 0.7;
		}

	#fv .btn-at-first {
		width: 330px;
		position: absolute;
		bottom: 20px;
		right: 20px;
	}
		#fv .btn-at-first a:hover {
			opacity: 0.7;
		}
@media screen and (max-width: 1024px) {
	#fv .text h2 {
		font-size: 8.0vw;
		margin-bottom: 2vw;
		padding-left: 2vw;
	}

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

	#fv .btn-concept {
		width: 13vw;
		bottom: 2vw;
		right: 37vw;
	}

	#fv .btn-at-first {
		width: 33vw;
		bottom: 2vw;
		right: 2vw;
	}
}
@media screen and (max-width: 767px) {
	#fv .text h2 {
		font-size: 10.0vw;
		padding-left: 3vw;
	}

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

	#fv .btn-concept {
		width: 20%;
		top: 30vw;
		bottom: auto;
		right: 40%;
	}

	#fv .btn-at-first {
		width: 80%;
		bottom: 20vw;
		right: 10%;
	}
}


	
	
/* message
--------------------- */
#message {
	background: #fff;
}
	#message .m-ttl {
		width: 50%;
		position: relative;
	}
		#message .m-ttl h2 {
			font-size: 8.0rem;
			font-weight: 400;
			line-height: 1.4em;
		}

		#message .m-ttl .en {
			font-size: 2.4rem;
			font-weight: 600;
			line-height: 1;
			position: absolute;
			top: 160px;
			left: 250px;
		}
			#message .m-ttl .en span {
				display: block;
			}
			#message .m-ttl .en span:nth-last-child(1) {
				padding-left: 35px;
			}

	#message .text {
		width: 45%;
		padding-bottom: 120px;
	}
		#message .text .txt {
			margin-bottom: 20px;
		}

	#message .pht {
		width: 35%;
		position: absolute;
		bottom: 0;
		left: 5%;
	}
@media screen and (max-width: 1024px) {
	#message .m-ttl h2 {
		font-size: 8.0vw;
	}

	#message .m-ttl .en {
		font-size: 2.4vw;
		top: 16vw;
		left: 25vw;
	}
		#message .m-ttl .en span:nth-last-child(1) {
			padding-left: 3.5vw;
		}

	#message .text {
		padding-bottom: 10vw;
	}
		#message .text .txt {
			margin-bottom: 2vw;
		}

	#message .pht {
		width: 45%;
		left: 0;
	}
}
@media screen and (max-width: 767px) {
	#message .inner {
		display: block;
	}
		#message .m-ttl {
			width: 100%;
			margin-bottom: 5vw;
		}
			#message .m-ttl h2 {
				font-size: 8.0vw;
				margin-bottom: 2vw;
			}

			#message .m-ttl .en {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 3.4vw;
				position: static;
			}
				#message .m-ttl .en span:nth-last-child(1) {
					padding-left: 1vw;
				}

		#message .text {
			width: 100%;
			padding-bottom: 4vw;
		}
			#message .text .txt {
				margin-bottom: 3vw;
			}

		#message .pht {
			position: static;
			width: 108%;
			margin-left: -8vw;
		}
}


	
	
/* person
--------------------- */
#person {
	background: #fff;
	position: relative;
}
#person:before {
	content: "";
	width: 100%;
	height: 50%;
	background: linear-gradient(to right, #4FACFE, #00F2FE);
	position: absolute;
	bottom: 0;
	left: 0;
}
	#person .p-ttl {
		margin-bottom: 50px;
		position: relative;
	}
		#person .p-ttl h2 {
			font-size: 7.0rem;
			font-weight: 500;
			line-height: 1.0em;
		}

		#person .p-ttl .min {
			font-size: 3.0rem;
			font-weight: 400;
			line-height: 1;
			position: absolute;
			bottom: 10px;
			left: 360px;
		}
			#person .p-ttl .min span {
				font-size: 2.4rem;
			}

	#person .list a.linkbox {
		display: block;
		width: 22%;
	}
	#person .list a.linkbox:nth-child(1) {
		margin-top: 90px;
	}
	#person .list a.linkbox:nth-child(2) {
		margin-top: 60px;
	}
	#person .list a.linkbox:nth-child(3) {
		margin-top: 30px;
	}
		#person .list a.linkbox .text {
			padding-top: 20px;
			position: relative;
		}
		#person .list a.linkbox .text:before {
			content: "";
			width: 40px;
			height: 40px;
			background: url("../common/img/btn_arrow_white.svg") no-repeat center / 100%;
			position: absolute;
			top: -20px;
			right: 20px;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		#person .list a.linkbox:hover .text:before {
			right: 10px;
		}
			#person .list a.linkbox .text h3 {
				font-size: 3.4rem;
				font-weight: 600;
				line-height: 1;
				margin-bottom: 10px;
			}

			#person .list a.linkbox .text .job {
				font-size: 1.4rem;
				font-weight: 500;
				line-height: 1.5em;
			}

	#person .btn {
		position: absolute;
		top: 60px;
		right: 0;
	}
@media screen and (max-width: 1024px) {
	#person .p-ttl {
		margin-bottom: 5vw;
	}
		#person .p-ttl h2 {
			font-size: 7.0vw;
		}

		#person .p-ttl .min {
			font-size: 3.0vw;
			bottom: 1vw;
			left: 36vw;
		}
			#person .p-ttl .min span {
				font-size: 2.4vw;
			}

	#person .list a.linkbox:nth-child(1) {
		margin-top: 9vw;
	}
	#person .list a.linkbox:nth-child(2) {
		margin-top: 6vw;
	}
	#person .list a.linkbox:nth-child(3) {
		margin-top: 3vw;
	}
		#person .list a.linkbox .text {
			padding-top: 2vw;
		}
		#person .list a.linkbox .text:before {
			width: 4vw;
			height: 4vw;
			top: -2vw;
			right: 2vw;
		}
		#person .list a.linkbox:hover .text:before {
			right: 1vw;
		}
			#person .list a.linkbox .text h3 {
				font-size: 3.4vw;
				margin-bottom: 1vw;
			}

			#person .list a.linkbox .text .job {
				font-size: 1.4vw;
			}

	#person .btn {
		top: 6vw;
		right: 4vw;
	}
}
@media screen and (max-width: 767px) {
	#person:before {
		height: 70%;
	}
		#person .p-ttl {
			margin-bottom: 7vw;
		}
			#person .p-ttl h2 {
				font-size: 7.6vw;
				line-height: 1.2em;
			}

			#person .p-ttl .min {
				font-size: 4.0vw;
				bottom: 1.7vw;
				left: 40vw;
			}
				#person .p-ttl .min span {
					font-size: 3.6vw;
				}

		#person .list {
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		}
			#person .list a.linkbox {
				width: 47.5%;
				margin-right: 5%;
				margin-bottom: 7vw;
			}
			#person .list a.linkbox:nth-child(1) {
				margin-top: 0;
			}
			#person .list a.linkbox:nth-child(2) {
				margin-top: 0;
				margin-right: 0;
			}
			#person .list a.linkbox:nth-child(3) {
				margin-top: 0;
			}
			#person .list a.linkbox:nth-child(4) {
				margin-right: 0;
			}
				#person .list a.linkbox .text {
					padding-top: 3vw;
				}
				#person .list a.linkbox .text:before {
					width: 6vw;
					height: 6vw;
					top: -3vw;
					right: 3vw;
				}
				#person .list a.linkbox:hover .text:before {
					right: 3vw;
				}
					#person .list a.linkbox .text h3 {
						font-size: 6.0vw;
						margin-bottom: 2vw;
					}

					#person .list a.linkbox .text .job {
						font-size: 3.0vw;
						letter-spacing: 0;
					}

		#person .btn {
			position: static;
			margin: 0 auto;
		}
}


	
	
/* special
--------------------- */
#special .special__inner {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    margin: 0 auto;
}
	#special .special__inner .special__area {
		width: 100%;
		height: 100%;
		position: relative;
	}
		#special .special__inner .special__area .special__item {
			width: 100%;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			visibility: hidden;
		}
		#special .special__inner .special__area .special__item.is-active {
			opacity: 1;
			visibility: visible;
		}
			#special .special__inner .special__area .special__content h2 {
				width: 90%;
				margin: 0 auto;
			}

			#special .special__inner .special__area .special__content .column {
				display: flex;
				display: -webkit-flex;
				justify-content: space-between;
				position: relative;
			}
				#special .special__inner .special__area .special__content .column .top-ttl {
					width: 28%;
					padding-right: 2%;
					position: relative;
				}
				#special .special__inner .special__area .special__content .column .top-ttl:before {
					content: "";
					width: 1px;
					height: 50%;
					background: #fff;
					position: absolute;
					bottom: 0;
					left: 0;
				}
					#special .special__inner .special__area .special__content .column .top-ttl .number {
						font-size: 15.0rem;
						line-height: 1;
					}

					#special .special__inner .special__area .special__content .column .top-ttl h3 {
						font-size: 3.0rem;
						font-weight: 500;
						line-height: 1.3em;
						margin-bottom: 15px;
					}

					#special .special__inner .special__area .special__content .column .top-ttl .head {
						font-size: 2.0rem;
						font-weight: 600;
						line-height: 1;
					}

				#special .special__inner .special__area .special__content .column .special__img {
					width: 44%;
				}

				#special .special__inner .special__area .special__content .column .text {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 25%;
					left: 3%;
					position: relative;
				}
					#special .special__inner .special__area .special__content .column .text .btn {
						position: absolute;
						bottom: 0;
						left: 0;
					}

				#special .special__inner .special__area .special__content .column .circle {
					width: 20%;
					position: absolute;
					bottom: -15%;
					left: 17%;
					animation: rotate-anime 30s linear infinite;
				}
				@keyframes rotate-anime {
				  0%  {transform: rotate(0);}
				  100%  {transform: rotate(360deg);}
				}

@media screen and (max-width: 1024px) {
	#special h2.sp {
		display: block;
		width: 35vw;
		margin: 0 auto 2vw auto;
	}

	#special .special__inner {
		width: 100%;
		height: auto;
		display: block;
	}
		#special .special__inner .special__area {
			height: auto;
		}
			#special .special__inner .special__area .special__item {
				position: static;
				padding-top: 0;
				height: auto;
				opacity: 1;
				visibility: visible;
			}
			#special .special__inner .special__area .special__item.off {
				position: relative;
			}
			#special .special__inner .special__area .special__item:nth-child(1) {
				margin-bottom: 7vw;
			}
				#special .special__inner .special__area .special__content h2.pc {
					display: none;
				}

				#special .special__inner .special__area .special__content .column .top-ttl:before {
					content: "";
					height: 30%;
				}
					#special .special__inner .special__area .special__content .column .top-ttl .number {
						font-size: 15.0vw;
					}

					#special .special__inner .special__area .special__content .column .top-ttl h3 {
						font-size: 3.0vw;
						margin-bottom: 1.5vw;
					}
						#special .special__inner .special__area .special__content .column .top-ttl h3 br {
							display: block;
						}

					#special .special__inner .special__area .special__content .column .top-ttl .head {
						font-size: 2.0vw;
					}

				#special .special__inner .special__area .special__content .column .special__img {
					width: 44%;
				}

				#special .special__inner .special__area .special__content .column .circle {
					width: 17%;
					bottom: -10%;
					left: 20%;
				}
}
@media screen and (max-width: 767px) {
	#special h2.sp {
		width: 60vw;
		margin: 0 auto 0 auto;
	}

	#special .special__inner {
		width: 100%;
		height: auto;
		display: block;
	}
		#special .special__inner .special__area {
			height: auto;
		}
			#special .special__inner .special__area .special__item {
				position: static;
				padding-top: 0;
				height: auto;
				opacity: 1;
				visibility: visible;
			}
			#special .special__inner .special__area .special__item.off {
				position: relative;
			}
			#special .special__inner .special__area .special__item:nth-child(1) {
				margin-bottom: 13vw;
			}
				#special .special__inner .special__area .special__content h2.pc {
					display: none;
				}

				#special .special__inner .special__area .special__content .column {
					display: block;
				}
					#special .special__inner .special__area .special__content .column .top-ttl {
						width: 100%;
						padding: 0;
						margin-bottom: 5vw;
					}
					#special .special__inner .special__area .special__content .column .top-ttl:before {
						display: none;
					}
						#special .special__inner .special__area .special__content .column .top-ttl .number {
							font-size: 15.0vw;
							position: absolute;
							top: 0;
							right: 0;
						}

						#special .special__inner .special__area .special__content .column .top-ttl h3 {
							font-size: 5.0vw;
							margin-bottom: 1.5vw;
						}
							#special .special__inner .special__area .special__content .column .top-ttl h3 br {
								display: none;
							}

						#special .special__inner .special__area .special__content .column .top-ttl .head {
							font-size: 4.0vw;
						}

					#special .special__inner .special__area .special__content .column .special__img {
						width: 100%;
						margin-bottom: 4vw;
					}

					#special .special__inner .special__area .special__content .column .text {
						display: block;
						width: 100%;
						padding: 0;
						left: 0;
					}
						#special .special__inner .special__area .special__content .column .text .btn {
							position: static;
							margin-top: 4vw;
						}

					#special .special__inner .special__area .special__content .column .circle {
						width: 30%;
						top: -3.5%;
						bottom: auto;
						left: auto;
						right: -6.5%;
					}
}


	
	
/* workstyle
--------------------- */
#workstyle {
	position: relative;
}
	#workstyle h2 {
		width: 100%;
		font-size: 14.4rem;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.2em;
		text-align: center;
		position: absolute;
		top: 150px;
		left: 0;
		z-index: 2;
	}

	#workstyle .box {
		width: 33.3333333%;
		height: 700px;
		position: relative;
	}
	#workstyle .box:nth-child(2) {
		background: url("../img/workstyle_pht01.webp") no-repeat center / cover;
	}
	#workstyle .box:nth-child(3) {
		background: url("../img/workstyle_pht02.webp") no-repeat center / cover;
	}
	#workstyle .box:nth-child(4) {
		background: url("../img/workstyle_pht03.webp") no-repeat center / cover;
	}
	#workstyle .box:nth-child(5) {
		background: url("../img/workstyle_pht04.webp") no-repeat center / cover;
	}
		#workstyle .box .text {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
		}
			#workstyle .box .text h3 {
				font-size: 2.6rem;
				font-weight: 500;
				line-height: 1.3em;
				margin-bottom: 10px;
				padding-left: 8%;
			}

			#workstyle .box .text .head {
				font-size: 1.8rem;
				font-weight: 600;
				line-height: 1;
				margin-bottom: 30px;
				padding-left: 8%;
			}
@media screen and (max-width: 1024px) {
	#workstyle h2 {
		width: 100%;
		font-size: 12.4vw;
		top: 15vw;
	}

	#workstyle .box {
		height: 70vw;
	}
		#workstyle .box .text h3 {
			font-size: 2.2vw;
			margin-bottom: 1vw;
			padding-left: 8%;
		}

		#workstyle .box .text .head {
			font-size: 1.8vw;
			margin-bottom: 3vw;
			padding-left: 8%;
		}
}
@media screen and (max-width: 767px) {
	#workstyle h2 {
		width: 100%;
		font-size: 12.4vw;
		top: 10vw;
	}

	#workstyle .box {
		width: 100%;
		height: 70vw;
	}
		#workstyle .box .text h3 {
			font-size: 4.8vw;
			font-weight: 700;
			margin-bottom: 3vw;
			padding-left: 8%;
		}

		#workstyle .box .text .head {
			font-size: 3.2vw;
			margin-bottom: 5vw;
			padding-left: 8%;
		}
}


	
	
/* recruitment
--------------------- */
#recruitment {
	background: #fff;
}
	#recruitment .r-ttl {
		margin-bottom: 50px;
		position: relative;
	}
		#recruitment .r-ttl h2 {
			font-size: 7.0rem;
			font-weight: 500;
			line-height: 1.0em;
		}

		#recruitment .r-ttl .min {
			font-size: 3.0rem;
			font-weight: 400;
			line-height: 1;
		}
			#recruitment .r-ttl .min span {
				font-size: 2.4rem;
			}

	#recruitment .list a.linkbox {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-top: solid 1px #ddd;
		padding: 70px 50px;
		position: relative;
	}
	#recruitment .list a.linkbox:nth-last-child(1) {
		border-bottom: solid 1px #ddd;
	}
		#recruitment .list a.linkbox .head {
			width: 150px;
			font-size: 1.2rem;
			font-weight: 600;
			line-height: 1;
		}

		#recruitment .list a.linkbox h3 {
			font-size: 2.4rem;
			font-weight: 500;
			line-height: 1;
		}

		#recruitment .list a.linkbox .more {
			font-size: 1.6rem;
			font-weight: 600;
			line-height: 20px;
			background: url("../common/img/icon_arrow_gr.svg") no-repeat right center / 20px;
			padding-right: 30px;
			position: absolute;
			top: 50%;
			right: 50px;
			margin-top: -10px;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		#recruitment .list a.linkbox:hover .more {
			right: 40px;
		}

		#recruitment .list a.linkbox .pht {
			width: 240px;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.3s ease;
			z-index: 2;
		}
@media screen and (max-width: 1024px) {
	#recruitment .r-ttl {
		margin-bottom: 5vw;
	}
		#recruitment .r-ttl h2 {
			font-size: 7.0vw;
		}

		#recruitment .r-ttl .min {
			font-size: 3.0vw;
		}
			#recruitment .r-ttl .min span {
				font-size: 2.4vw;
			}

	#recruitment .list a.linkbox {
		padding: 7vw 5vw;
	}
		#recruitment .list a.linkbox .head {
			width: 15vw;
			font-size: 1.2vw;
		}

		#recruitment .list a.linkbox h3 {
			font-size: 2.4vw;
		}

		#recruitment .list a.linkbox .more {
			font-size: 1.6vw;
			line-height: 2vw;
			background: url("../common/img/icon_arrow_gr.svg") no-repeat right center / 2vw;
			padding-right: 3vw;
			margin-top: -1vw;
		}
		#recruitment .list a.linkbox:hover .more {
			right: 3vw;
		}
}
@media screen and (max-width: 767px) {
	#recruitment .r-ttl {
		margin-bottom: 7vw;
	}
		#recruitment .r-ttl h2 {
			font-size: 7.0vw;
			margin-bottom: 2vw;
		}

	#recruitment .list a.linkbox {
		display: block;
	}
		#recruitment .list a.linkbox .head {
			width: auto;
			font-size: 3.2vw;
			margin-bottom: 2vw;
		}

		#recruitment .list a.linkbox h3 {
			font-size: 4.2vw;
		}

		#recruitment .list a.linkbox .more {
			font-size: 3.0vw;
			line-height: 4vw;
			background: url("../common/img/icon_arrow_gr.svg") no-repeat right center / 4vw;
			padding-right: 6vw;
			margin-top: -2vw;
		}
		#recruitment .list a.linkbox:hover .more {
			right: 4vw;
		}

		#recruitment .list a.linkbox .pht {
			display: none;
		}
}