@charset "UTF-8";


	
	
/* main
--------------------- */
#main .title .en {
    border-left: solid 3px #E6002D;
}
#main .red {
	color: #E6002D;
}
#main .btn.bg-red {
	background: #E6002D;
}


	
	
/* kv
--------------------- */
#kv {
	padding-top: 100px;
}
	#kv .en {
		font-size: 7.73vw;
		font-weight: 700;
		line-height: 1.0em;
		margin-bottom: 4vw;
	}

	#kv .text {
		margin-bottom: 4vw;
	}
		#kv .text h1 {
			font-size: 2.4285714285714284vw;
			font-weight: 700;
			line-height: 1.1em;
		}
			#kv .text h1 .min {
				font-size: 1.7142857142857144vw;
			}

		#kv .text .read {
			font-size: 1.25vw;
			line-height: 1.8em;
		}

	#kv .pht01 {
		width: 27vw;
		position: absolute;
		top: 19vw;
		left: 50%;
		margin-left: -13.5vw;
		z-index: -1;
	}
	#kv .pht02 {
		width: 18.5vw;
		position: absolute;
		top: 3.2vw;
		right: 2vw;
		z-index: -1;
	}
	#kv .pht03 {
		width: 16.4vw;
		position: absolute;
		top: 38vw;
		left: 0;
	}
	#kv .pht04 {
		width: 25vw;
		position: absolute;
		bottom: 2vw;
		left: 50%;
		margin-left: -25vw;
	}
	#kv .pht05 {
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		 -ms-flex-direction: row-reverse;
			 flex-direction: row-reverse;
		padding-right: 5vw;
	}
		#kv .pht05 img {
			width: 18.571428571428573vw;
		}
@media screen and (max-width: 1024px) {
	#kv {
		padding-top: 80px;
	}
		#kv .en {
			font-size: 7.70vw;
		}
}
@media screen and (max-width: 768px) {
	#kv {
		padding-top: 60px;
	}
		#kv .inner {
			padding: 0;
		}
			#kv .en {
				font-size: 10.7vw;
				font-weight: 700;
				line-height: 1.1em;
				margin-bottom: 52vw;
			}

			#kv .text {
				display: block;
				padding-left: 7vw;
				margin-bottom: 0;
			}
				#kv .text h1 {
					font-size: 7.4vw;
					line-height: 1.1em;
					margin-bottom: 4vw;
				}
					#kv .text h1 .min {
						font-size: 5.1vw;
					}

				#kv .text .read {
					font-size: 3.8vw;
				}

			#kv .pht01 {
				width: 50vw;
				top: 41vw;
				margin-left: -15vw;
			}
			#kv .pht02 {
				width: 25vw;
				top: 0;
				right: 0;
			}
			#kv .pht03 {
				width: 24vw;
				top: 55vw;
			}
			#kv .pht04 {
				width: 45vw;
				bottom: 7vw;
				left: 7vw;
				margin-left: 0;
			}
			#kv .pht05 {
				padding-right: 10vw;
			}
				#kv .pht05 img {
					width: 30vw;
				}
}


	
	
/* base
--------------------- */
#base .map {
	max-width: 1018px;
	margin: -100px auto 0 auto;
	position: relative;
}
	#base .map .plant {
		width: 340px;
		position: absolute;
	}
	#base .map .plant.nakatsugawa {
		top: 175px;
		left: 0;
	}
	#base .map .plant.oyama {
		top: 330px;
		right: 0;
	}
		#base .map .plant h3 {
			font-size: 2.2rem;
			font-weight: 700;
			line-height: 1.3em;
			margin-bottom: 10px;
			padding-bottom: 10px;
			border-bottom: solid 1px #ddd;
		}

		#base .map .plant .read {
			font-size: 1.4rem;
			line-height: 1.8em;
			margin-bottom: 12px;
		}

@media screen and (max-width: 1024px) {
	#base .map {
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin: -100px auto 0 auto;
	}
		#base .map .japan {
			width: 100%;
			padding: 0 20%;
			margin-bottom: 40px;
		}
			#base .map .japan .pc {
				display: none;
			}
			#base .map .japan .sp {
				display: block;
			}
	
		#base .map .plant {
			width: 47%;
			position: static;
		}
		#base .map .plant.nakatsugawa {
			margin-right: 6%;
		}
		#base .map .plant.oyama {
			margin-right: 0;
		}
			#base .map .plant h3 {
				font-size: 2.0rem;
			}

			#base .map .plant .read {
				font-size: 1.3rem;
				line-height: 1.7em;
				margin-bottom: 15px;
			}
}
@media screen and (max-width: 768px) {
	#base .map {
		display: block;
		margin: 0 auto 0 auto;
	}
		#base .map .japan {
			width: 100%;
			padding: 0 8%;
		}
	
		#base .map .plant {
			width: 100%;
			position: static;
		}
		#base .map .plant.nakatsugawa {
			margin-right: 0;
			margin-bottom: 40px;
		}
		#base .map .plant.oyama {
			margin-right: 0;
		}
			#base .map .plant h3 {
				font-size: 1.9rem;
			}
}


	
	
/* interview
--------------------- */
#interview {
	width: 100%;
	overflow: hidden;
}
	#interview .swiper-container {
		padding: 10px 0 50px 0;
		position: relative;
	}
		#interview .swiper-container a.linkbox {
			display: block;
		}
			#interview .swiper-container a.linkbox .pht {
				position: relative;
			}
				#interview .swiper-container a.linkbox .pht .label {
					width: 60px;
					height: 30px;
					background: #E6002D;
					font-size: 1.3rem;
					font-weight: 700;
					line-height: 30px;
					text-align: center;
					color: #fff;
					position: absolute;
					bottom: 0;
					left: 0;
				}

			#interview .swiper-container a.linkbox .text {
				padding: 20px 0 0 0;
			}
				#interview .swiper-container a.linkbox .text h3 {
					font-size: 2.6rem;
					font-weight: 600;
					line-height: 1;
					margin-bottom: 12px;
				}
					#interview .swiper-container a.linkbox .text h3 span {
						font-size: 1.3rem;
						font-weight: 500;
						color: #242424;
						line-height: 1;
						padding-left: 10px;
					}

				#interview .swiper-container a.linkbox .text .join {
					font-size: 1.3rem;
					line-height: 1.5em;
					margin-bottom: 15px;
				}

				#interview .swiper-container a.linkbox .text .profile {
					font-size: 1.3rem;
					line-height: 1.7em;
					padding-top: 15px;
					margin-bottom: 12px;
					border-top: dashed 1px #ddd;
				}

		#interview .swiper-container .swiper-pagination {
			bottom: 0;
		}
			#interview .swiper-container .swiper-pagination .swiper-pagination-bullet {
				width: 10px;
				height: 10px;
				background: #EAEAEA;
				border: none;
				opacity: 1;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#interview .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
				background: #242424;
				opacity: 1;
			}
@media screen and (max-width: 1024px) {
	#interview .swiper-container {
		padding: 10px 0 35px 0;
	}
		#interview .swiper-container a.linkbox .text h3 {
			font-size: 2.6rem;
		}

		#interview .swiper-container a.linkbox .text .join {
			font-size: 1.2rem;
		}
}
@media screen and (max-width: 768px) {
	#interview .swiper-container {
		padding: 5px 0 35px 0;
	}
		#interview .swiper-container a.linkbox .text {
			padding: 15px 10px 0 0;
		}
			#interview .swiper-container a.linkbox .text h3 {
				font-size: 2.2rem;
			}

			#interview .swiper-container a.linkbox .text .join {
				font-size: 1.1rem;
				margin-bottom: 10px;
			}

			#interview .swiper-container a.linkbox .text .profile {
				font-size: 1.1rem;
				margin-bottom: 10px;
			}
}


	
	
/* manufacturing
--------------------- */
#manufacturing .list .box {
	width: 48.5%;
	margin-right: 3%;
	margin-top: 3%;
	border: solid 2px #F0F0F0;
	padding: 30px;
	border-radius: 10px;
	position: relative;
}
#manufacturing .list .box:nth-child(2n) {
	margin-right: 0;
}
#manufacturing .list .box:before {
	content: "";
	width: 30px;
	height: 2px;
	background: #E6002D;
	position: absolute;
	top: -2px;
	left: 30px;
}
	#manufacturing .list .box .label {
		display: block;
		width: 100px;
		height: 28px;
		border-radius: 0 10px 0 10px;
		background: #E6002D;
		font-size: 1.2rem;
		font-weight: 700;
		text-align: center;
		line-height: 28px;
		color: #fff;
		position: absolute;
		top: 0;
		right: 0;
	}
@media screen and (max-width: 1024px) {
	#manufacturing .list .box {
		padding: 25px;
	}
	#manufacturing .list .box:before {
		left: 25px;
	}
		#manufacturing .list .box .label {
			width: 85px;
			height: 26px;
			font-size: 1.1rem;
			line-height: 26px;
		}
}
@media screen and (max-width: 768px) {
	#manufacturing .list {
		display: block;
	}
		#manufacturing .list .box {
			width: 100%;
			padding: 35px 25px 25px 25px;
			margin-top: 30px;
			margin-right: 0;
		}
			#manufacturing .list .box .label {
				width: 80px;
				height: 24px;
				font-size: 1.0rem;
				line-height: 24px;
			}
}


	
	
/* benefit
--------------------- */
#benefit .text .txt {
	margin-bottom: 40px;
}
@media screen and (max-width: 1024px) {
	#benefit .text .txt {
		margin-bottom: 30px;
	}
}
@media screen and (max-width: 768px) {
	#benefit .text .txt {
		margin-bottom: 15px;
	}
}


	
	
/* career-step
--------------------- */
#career-step .case {
	margin-top: 30px;
	background: #FFFAFB;
}
	#career-step .case .introduction {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		padding: 40px 150px 40px 70px;
	}
	#career-step .case .introduction:before {
		content: "";
		width: 40px;
		height: 40px;
		background: url("../img/icon_open.svg") no-repeat center / 100%;
		position: absolute;
		top: 50%;
		right: 70px;
		margin-top: -20px;
		transition: 0.3s;
		-webkit-transition: 0.3s;
	}
	#career-step .case .introduction.active:before {
		transform:rotate(540deg);
	}
		#career-step .case .introduction .icon {
			width: 130px;
		}

		#career-step .case .introduction .text {
			width: -webkit-calc(100% - 130px);
			width: calc(100% - 130px);
			padding-left: 30px;
		}
			#career-step .case .introduction .text .head {
				font-size: 1.6rem;
				font-weight: 700;
				line-height: 1;
				text-decoration: underline;
				margin-bottom: 15px;
			}

			#career-step .case .introduction .text h3 {
				font-size: 2.4rem;
				font-weight: 700;
				line-height: 1.3em;
			}
				#career-step .case .introduction .text h3 span {
					font-size: 1.8rem;
				}

	#career-step .case .detail {
		display: none;
		padding: 0 70px 40px 70px;
	}
		#career-step .case .detail dl {
			margin-bottom: 20px;
		}
		#career-step .case .detail dl:nth-last-child(1) {
			margin-bottom: 0;
		}
			#career-step .case .detail dl dt {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 140px;
				background: #fff;
				border-radius: 10px;
				font-size: 1.6rem;
				font-weight: 700;
				line-height: 1;
				text-align: center;
			}
			#career-step .case .detail dl dd {
				width: -webkit-calc(100% - 140px);
				width: calc(100% - 140px);
				padding-left: 20px;
			}
				#career-step .case .detail dl dd h4 {
					font-size: 1.8rem;
					font-weight: 700;
					line-height: 1.3em;
					margin-bottom: 5px;
				}
@media screen and (max-width: 1024px) {
	#career-step .case {
		margin-top: 25px;
	}
		#career-step .case .introduction {
			padding: 35px 110px 35px 50px;
		}
		#career-step .case .introduction:before {
			width: 30px;
			height: 30px;
			right: 50px;
			margin-top: -15px;
		}
			#career-step .case .introduction .icon {
				width: 120px;
			}

			#career-step .case .introduction .text {
				width: -webkit-calc(100% - 120px);
				width: calc(100% - 120px);
				padding-left: 30px;
			}
				#career-step .case .introduction .text .head {
					font-size: 1.4rem;
					margin-bottom: 12px;
				}

				#career-step .case .introduction .text h3 {
					font-size: 2.1rem;
				}
					#career-step .case .introduction .text h3 span {
						font-size: 1.5rem;
					}

		#career-step .case .detail {
			padding: 0 50px 35px 50px;
		}
			#career-step .case .detail dl dt {
				width: 130px;
				font-size: 1.4rem;
			}
			#career-step .case .detail dl dd {
				width: -webkit-calc(100% - 130px);
				width: calc(100% - 130px);
			}
				#career-step .case .detail dl dd h4 {
					font-size: 1.6rem;
				}
}
@media screen and (max-width: 768px) {
	#career-step .case {
		margin-top: 25px;
	}
		#career-step .case .introduction {
			display: block;
			padding: 15px 25px 25px 25px;
		}
		#career-step .case .introduction:before {
			width: 30px;
			height: 30px;
			top: 15px;
			right: 15px;
			margin-top: 0;
		}
			#career-step .case .introduction .icon {
				width: 30%;
				margin: 0 auto;
			}

			#career-step .case .introduction .text {
				width: 100%;
				padding-left: 0;
			}
				#career-step .case .introduction .text .head {
					font-size: 1.4rem;
					margin-bottom: 12px;
				}

				#career-step .case .introduction .text h3 {
					font-size: 1.7rem;
					line-height: 1.2em;
				}
					#career-step .case .introduction .text h3 span {
						font-size: 1.2rem;
					}

		#career-step .case .detail {
			padding: 0 25px 25px 25px;
		}
			#career-step .case .detail dl{
				display: block;
			}
				#career-step .case .detail dl dt {
					width: 100%;
					font-size: 1.4rem;
					padding: 10px;
					margin-bottom: 10px;
				}
				#career-step .case .detail dl dd {
					width: 100%;
					padding: 0;
				}
					#career-step .case .detail dl dd h4 {
						font-size: 1.4rem;
					}
}


	
	
/* faq
--------------------- */
#faq .box {
	background: #FFFAFB;
	border-radius: 5px;
	margin-bottom: 20px;
}
#faq .box:nth-last-child(1) {
	margin-bottom: 0;
}
	#faq .box h2 {
		padding: 25px 80px 20px 75px;
		font-size: 2.2rem;
		font-weight: 700;
		line-height: 1.3em;
		position: relative;
		cursor: pointer;
	}
	#faq .box h2:before {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 100%;
		content: "Q";
		font-size: 2.4rem;
		color: #E6002D;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 1.3em;
		position: absolute;
		top: 0;
		left: 30px;
	}
	#faq .box h2:after {
		content: "";
		width: 20px;
		height: 20px;
		background: url("../img/icon_plus.svg") no-repeat center / 100%;
		position: absolute;
		top: 50%;
		right: 30px;
		margin-top: -10px;
		transition: 0.3s;
		-webkit-transition: 0.3s;
	}
	#faq .box h2.active:after {
		transform:rotate(135deg);
	}

	#faq .box .text {
		display: none;
		padding: 0 30px 20px 75px;
		position: relative;
	}
	#faq .box .text:before {
		content: "A";
		font-size: 2.4rem;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 1.3em;
		position: absolute;
		top: 2px;
		left: 30px;
	}
		#faq .box .text  a {
			text-decoration: underline;
		}
		#faq .box .text  a:hover {
			text-decoration: none;
		}
@media screen and (max-width: 1024px) {
	#faq .box h2 {
		padding: 20px 80px 20px 65px;
		font-size: 2.0rem;
	}
	#faq .box h2:before {
		font-size: 2.2rem;
		left: 25px;
	}
	#faq .box h2:after {
		right: 25px;
	}

	#faq .box .text {
		padding: 0 30px 20px 65px;
	}
	#faq .box .text:before {
		font-size: 2.2rem;
		left: 25px;
	}
}
@media screen and (max-width: 768px) {
	#faq .box {
		margin-bottom: 15px;
	}
		#faq .box h2 {
			padding: 17px 60px 15px 50px;
			font-size: 1.6rem;
		}
		#faq .box h2:before {
			font-size: 2.0rem;
			left: 20px;
		}
		#faq .box h2:after {
			right: 20px;
		}

		#faq .box .text {
			padding: 0 20px 20px 50px;
		}
		#faq .box .text:before {
			font-size: 2.0rem;
			left: 20px;
		}
}