@charset "utf-8";

/* ===================================================================
CSS information
 file name  :  index.css
 style info :  recruit/index.html用
=================================================================== */
#recruit_index{
	color: #333333;
}

#top_sec{
	margin: 0 0 70px;
	
	.header_img{
		margin: 0 0 70px;
	}
	
	.header_img img{
		width: 100%;
		height: auto;
	}
	
	.main_area{
		width: 1000px;
		margin: 0 auto;
	}
	
	h1{
		font-size: 35px;
		font-weight: bold;
		color: #001E3A;
		margin: 0 0 30px;
	}
	
	p{
		font-size: 16px;
		margin: 0 0 10px;
	}
	
	@media screen and (max-width: 768px) {
		.header_img {
			margin: 0 0 40px;
		}

		.main_area {
			width: 90%;
		}

		h1 {
			font-size: 24px;
			margin: 0 0 20px;
		}

		p {
			font-size: 14px;
		}
		
		.main_img img{
			width: 100%;
			height: auto;
		}
	}
}

#intro_sec{
	width: 1000px;
	margin: 0 auto 80px;
	
	h2{
		font-size: 28px;
		font-weight: bold;
		color: #001E3A;
		text-align: center;
		margin: 0 0 40px;
		
		span{
			border-bottom: 2px solid rgba(0,30,58,0.25);
		}
		
		br{
			display: none;
		}
	}
	
	.department_area{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		gap:20px 0;
		
		dl{
			width: 30%;
			height: 223px;
			border: 1px solid #C2A253;
			background-color: #EEECE7;
			padding: 20px 0;
			box-sizing: border-box;
			position: relative;
		}
		
		dt{
			font-size: 20px;
			font-weight: bold;
			color: #001E3A;
			text-align: center;
			margin: 0 0 10px;
		}
		
		dt.center{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 100%;
		}
		
		dd{
			font-size: 16px;
			padding: 0 50px 3px;
		}
		
		dd:before{
			content: '■';
		}
		
	}
		
	
}

@media screen and (max-width: 768px) {
	#intro_sec{
		width: 90%;
		margin: 0 auto 40px;
		
		h2{
			font-size: 24px;
			font-weight: bold;
			color: #001E3A;
			text-align: center;
			margin: 0 0 40px;

			span{
				border-bottom: 2px solid rgba(0,30,58,0.25);
			}

			br{
				display: inline;
			}
		}

		.department_area{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			gap:10px 0;

			dl{
				width: 48%;
				height: inherit;
				border: 1px solid #C2A253;
				background-color: #EEECE7;
				padding: 5px;
				box-sizing: border-box;
				position: relative;
			}

			dt{
				font-size: 14px;
				font-weight: bold;
				color: #001E3A;
				text-align: center;
				margin: 0 0 5px;
			}

			dt.center{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 100%;
			}

			dd{
				font-size: 13px;
				padding: 0 5px 3px;
			}

			dd:before{
				content: '■';
			}

		}
	}
}


#staff_sec{
	width: 1000px;
	margin: 0 auto 80px;
	
	h2{
		font-size: 28px;
		font-weight: bold;
		color: #001E3A;
		text-align: center;
		margin: 0 0 40px;
		
		span{
			border-bottom: 2px solid rgba(0,30,58,0.25);
		}
	}
	
	.main_area{
		.title_box{
			position: relative;
			margin: 0 0 40px;
			
			h3{
				position: absolute;
				top: 50px;
				right: 0;
				width: 529px;
				margin: 0;
				font-size: 26px;
				font-weight: bold;
				color: #001E3A;
				border: solid 1px #C2A253;
				background-color: rgba(238,236,231,0.7);
				padding: 50px 40px;
				box-sizing: border-box;
			}
		}
		
		.info_box{
			margin: 0 0 40px;
			
			h4{
				font-size: 20px;
				font-weight: bold;
				color: #001E3A;
				border-left: 5px solid #C2A253;
				padding: 0 0 0 5px;
				margin: 0 0 20px;
			}
			
			.text{
				display: flex;
				justify-content: space-between;
								
				p{
					width: 670px;
					font-size: 16px;
					line-height: 1.8;
				}
			}
		}
		
		.info_box:nth-child(even){
			.text{
				flex-direction: row-reverse;
			}
		}
	}
	
	.oneday_area{
		h4{
			font-size: 20px;
			font-weight: bold;
			color: #001E3A;
			border-left: 5px solid #C2A253;
			padding: 0 0 0 5px;
			margin: 0 0 20px;
		}
		
		.oneday_box{
			position: relative;
			width: 980px;
			margin: 0 0 50px 20px;
			padding: 25px 40px 25px 115px;
			border: solid 1px #C2A253;
			background-color: rgba(238,236,231,0.7);
						
			.time{
				position: absolute;
				top: 20px;
				left: -20px;
				
				h5{
					font-size: 18px;
					font-weight: bold;
					color: #001E3A;
					
					img{
						vertical-align: middle;
						margin: 0 5px 0 0;
					}
				}
			}
			
			.text{
				h5{
					font-size: 18px;
					font-weight: bold;
					color: #001E3A;
					margin: 0 0 5px;
				}
				
				p{
					font-size: 16px;
					line-height: 1.8;
					margin: 0 0 20px;
				}
				
				p:last-child{
					margin: 0;
				}
				
				.p_img{
					display: flex;
					justify-content: space-between;
					
					p{
						padding: 0 20px 0 0;
					}
				}
				
				p.note{
					font-size: 13px;
				}
			}
		}
		
		.oneday_box:not(:last-child)::after {
			content: "";
			position: absolute;
			bottom: -35px; /* 三角形を下に出す */
			left: 50%;     /* 中央寄せ（必要に応じて調整） */
			transform: translateX(-50%);
			width: 0;
			height: 0;
			border-left: 16px solid transparent;
			border-right: 16px solid transparent;
			border-top: 12px solid #001E3A; /* 背景色と合わせる */
		}
		
	}
}

@media screen and (max-width: 768px) {
	#staff_sec{
		width: 90%;
		margin: 0 auto 40px;

		h2{
			font-size: 24px;
			font-weight: bold;
			color: #001E3A;
			text-align: center;
			margin: 0 0 40px;

			span{
				border-bottom: 2px solid rgba(0,30,58,0.25);
			}
		}

		.main_area{
			.title_box{
				margin: 0 0 40px;
				padding-bottom: 70px;
				position: relative;
				
				img{
					width: 100%;
					height: auto;
					display: block;
				}

				h3{
					position: absolute;
					top: inherit;
					bottom: -5px;
					right: 0;
					width: 90%;
					margin: 0;
					font-size: 16px;
					font-weight: bold;
					color: #001E3A;
					border: solid 1px #C2A253;
					background-color: rgba(238,236,231,0.7);
					padding: 20px 20px;
					box-sizing: border-box;
				}
			}

			.info_box{
				margin: 0 0 40px;

				h4{
					font-size: 16px;
					font-weight: bold;
					color: #001E3A;
					border-left: 5px solid #C2A253;
					padding: 0 0 0 5px;
					margin: 0 0 20px;
				}

				.text{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					
					img{
						width: 100%;
						height: auto;
						margin: 0 0 10px;
					}

					p{
						width: 100%;
						font-size: 16px;
						line-height: 1.8;
					}
				}
			}

			.info_box:nth-child(even){
				.text{
					flex-direction: row-reverse;
				}
			}
		}

		.oneday_area{
			h4{
				font-size: 16px;
				font-weight: bold;
				color: #001E3A;
				border-left: 5px solid #C2A253;
				padding: 0 0 0 5px;
				margin: 0 0 20px;
			}

			.oneday_box{
				position: relative;
				width: 100%;
				margin: 0 0 55px 10px;
				padding: 10px;
				border: solid 1px #C2A253;
				background-color: rgba(238,236,231,0.7);
				box-sizing: border-box;

				.time{
					position: inherit;
					top: inherit;
					left:-30px;
					margin: 0 0 10px;

					h5{
						font-size: 16px;
						font-weight: bold;
						color: #001E3A;

						img{
							vertical-align: middle;
							margin: 0 5px 0 0;
						}
					}
				}

				.text{
					h5{
						font-size: 16px;
						font-weight: bold;
						color: #001E3A;
						margin: 0 0 5px;
					}

					p{
						font-size: 14px;
						line-height: 1.8;
						margin: 0 0 20px;
					}

					p:last-child{
						margin: 0;
					}

					.p_img{
						display: block;

						p{
							padding: 0 0 0 0;
						}
						
						img{
							width: 100%;
							height: auto;
						}
					}

					p.note{
						font-size: 13px;
					}
				}
			}

			.oneday_box:not(:last-child)::after {
				content: "";
				position: absolute;
				bottom: -35px; /* 三角形を下に出す */
				left: 50%;     /* 中央寄せ（必要に応じて調整） */
				transform: translateX(-50%);
				width: 0;
				height: 0;
				border-left: 16px solid transparent;
				border-right: 16px solid transparent;
				border-top: 12px solid #001E3A; /* 背景色と合わせる */
			}

		}
	}
}

#recruitmentinfo_sec{
	width: 1000px;
	margin: 0 auto 80px;
	
	h2{
		font-size: 28px;
		font-weight: bold;
		color: #001E3A;
		text-align: center;
		margin: 0 0 40px;
		
		span{
			border-bottom: 2px solid rgba(0,30,58,0.25);
		}
	}
	
	.tab_area{
		ul{
			display: flex;
			justify-content: space-between;
			margin: 0 0 30px;
			
			li{
				width: 33.3%;
				text-align: center;
				font-size: 16px;
				font-weight: bold;
				color: #001E3A;
				border-bottom: 5px solid #E8F2FF;
				cursor: pointer;
			}
			
			li:nth-child(2){
				border-bottom: 5px solid #F5F0E9;
			}
			
			li:nth-child(3){
				border-bottom: 5px solid #E2F5E1;
			}
			
			li.active{
				border-bottom: 10px solid #E8F2FF;
			}
			
			li:nth-child(2).active{
				border-bottom: 10px solid #F5F0E9;
			}
			
			li:nth-child(3).active{
				border-bottom: 10px solid #E2F5E1;
			}
			
		}		
	}
	
	.tab_select_area{
		display: none;
	}
	
	.require_area .tab_content {
		display: none;
	}

	.require_area .tab_content.active {
		display: block;
	}
	
	.tab_content{
		p{
			font-size: 16px;
			line-height: 1.8;
			margin: 0 0 30px;
		}
		
		p.end_txt{
			font-size: 16px;
			text-align: center;
			margin: 50px 0 150px;
		}
		
		h3{
			font-size: 18px;
			font-weight: bold;
			color: #001E3A;
			margin: 0 0 20px;
		}
		
		h4{
			font-size: 16px;
			font-weight: bold;
			color: #001E3A;
			margin: 0 0 20px 0px;
		}
		
		table{
			width: 100%;
			margin: 0 0 30px;
			
			th{
				width: 20%;
				font-size: 16px;
				font-weight: 600;
				text-align: left;
				vertical-align: top;
				padding: 20px 10px;
				border-bottom: 2px solid #E8F2FF;
			}
			
			td{
				font-size: 16px;
				text-align: left;
				line-height: 1.8;
				padding: 20px 10px;
				border-bottom: 2px solid #E8F2FF;
				
				a.button{
					position: relative;
					display: inline-block;
					background-color: #001E3A;
					font-size: 16px;
					color: #FFFFFF;
					text-align: center;
					padding: 10px 40px;
					margin: 5px 0;
					
				}
				
				a.button::after {
					border-color: transparent transparent transparent #FFF;
					border-image: none;
					border-style: solid;
					border-width: 5px;
					content: "";
					position: absolute;
					right: 5%;
					top: 50%;
					transform: translateY(-50%);
				}
				
				a.text{
					text-decoration: underline;
					color: #000068;
				}
				
			}
			
			.dept th,
			.dept td{
				background-color: #E8F2FF;
			}
			
			.dept.career th,
			.dept.career td{
				background-color: #F5F0E9;
			}
			
		}
	}
}

@media screen and (max-width: 768px) {
	#recruitmentinfo_sec{
		width: 90%;
		margin: 0 auto 40px;

		h2{
			font-size: 24px;
			font-weight: bold;
			color: #001E3A;
			text-align: center;
			margin: 0 0 20px;

			span{
				border-bottom: 2px solid rgba(0,30,58,0.25);
			}
		}

		.tab_area{
			display: none;
		}
		
		.tab_select_area{
			display: block;
			margin: 0 0 20px;
			
			select{
				width: 100%;
				font-size: 15px;
				color: #001E3A;
				padding: 5px;
				border: 1px solid #C2A253;
				background-color: #FFFFFF;
			}
		}

		.require_area .tab_content {
			display: none;
		}

		.require_area .tab_content.active {
			display: block;
		}

		.tab_content{
			p{
				font-size: 14px;
				line-height: 1.8;
				margin: 0 0 30px;
			}
			
			p.end_txt{
				font-size: 16px;
				text-align: left;
				margin: 50px 0 150px;
			}

			h3{
				font-size: 16px;
				font-weight: bold;
				color: #001E3A;
				margin: 0 0 20px;
			}

			h4{
				font-size: 14px;
				font-weight: bold;
				color: #001E3A;
				margin: 0 0 20px 0px;
			}

			table{
				width: 100%;
				margin: 0 0 30px;

				th{
					display: block;
					width: 95%;
					font-size: 16px;
					font-weight: 600;
					text-align: left;
					vertical-align: top;
					padding: 10px 10px 5px;
					border-bottom: none;
				}

				td{
					display: block;
					width: 95%;
					font-size: 14px;
					text-align: left;
					line-height: 1.8;
					padding: 5px 5px 5px 15px;
					border-bottom: 2px solid #E8F2FF;

					a.button{
						position: relative;
						display: inline-block;
						background-color: #001E3A;
						font-size: 16px;
						color: #FFFFFF;
						text-align: center;
						padding: 10px 40px;
						margin: 5px 0;

					}

					a.button::after {
						border-color: transparent transparent transparent #FFF;
						border-image: none;
						border-style: solid;
						border-width: 5px;
						content: "";
						position: absolute;
						right: 5%;
						top: 50%;
						transform: translateY(-50%);
					}

					a.text{
						text-decoration: underline;
						color: #000068;
					}

				}

				.dept th,
				.dept td{
					background-color: #E8F2FF;
				}

				.dept.career th,
				.dept.career td{
					background-color: #F5F0E9;
				}

			}
		}
	}
}

#form_sec{
	width:1000px;
	margin:45px auto 50px;

	h2{
		font-size:33px;
		text-align:center;
		margin:0 0 30px;
	}

	p.h2_txt{
		font-size:16px;
		text-align:center;
		margin:0 0 20px;
	}

	p.h2_txt span{
		color:#CC1C24;
	}

	.form_box table{
		width:920px;
		margin:0 auto;
		border-top:1px solid #D3CEC9;
		border-right:1px solid #D3CEC9;
	}

	.form_box table th{
		border-bottom:1px solid #D3CEC9;
		border-left:1px solid #D3CEC9;
		background:#EEECE7;
		padding:20px;
		font-size:14px;
		text-align:left;
		width:205px;
	}

	.form_box table th span{
		float:right;
		display:inline-block;
		background:#B12E04;
		color:#FFF;
		font-size:14px;
		font-weight:normal;
		padding:0 5px;
		border-radius:3px;
	}
	
	.form_box table th em{
		font-style: normal;
	}

	.form_box table td{
		border-bottom:1px solid #D3CEC9;
		border-left:1px solid #D3CEC9;
		padding:20px;
		font-size:14px;
	}

	.form_box table td span.name{
		display:inline-block;
		width:50px;
		text-align:right;
		padding:0 10px 0 0;
	}


	.form_box table td input{
		padding:5px;
		font-size:14px;
	}

	.form_box table td input.box_125{
		width:125px;
	}

	.form_box table td input.box_256{
		width:256px;
	}

	.form_box table td input.box_80{
		width:80px;
	}
	
	.form_box table td .input.radio label{
		padding: 0 10px 0 0;
	}

	.form_box table td .destination{
		margin:0 0 15px;
	}

	.form_box table td select{
		padding:5px;
		font-size:14px;
	}

	.form_box table td textarea{
		padding:5px;
		font-size:14px;
		width:600px;
	}

	.form_box table td .error-message{
		color:#FF0004;
	}

	.form_box .gs_seal{
		float:left;
		padding:20px 0 0 40px;
	}


	.form_box .button_box{
		text-align:center;
		margin:30px 80px 30px 40px;
	}

	.form_box .button_box input[type="submit"]{
		font-size:18px;
		color:#FFF;
		text-align:center;
		background:#001e3a;
		border-radius:3px;
		border:none;
		padding:10px 60px;
		position:relative;
	}


	.form_box .button_box input[type="submit"]:hover{
		opacity:0.7;
	}

	/***** form_contact_done *****/
	#form_contact_done{
	}

	#form_contact_done #message_area{
		width:1000px;
		margin:45px auto 200px;
		padding:30px 0 50px;
		box-shadow:2px 2px 3px #4F4D4D;
		border:#4F4D4D;
		text-align:center;
	}

	#form_contact_done #message_area .logo{
		margin:0 0 30px;
	}

	#form_contact_done #message_area h2{
		font-size:24px;
		font-weight:bold;
		margin:0 0 20px;
	}

	#form_contact_done #message_area p.h2_txt{
		font-size:18px;
		color:#CC1C24;
		margin:0 0 30px;
	}

	#form_contact_done #message_area p.to_back a{
		display:inline-block;
		background:#001e3a;
		color:#FFF;
		font-size:18px;
		padding:7px 25px;
		border-radius:3px;
		position:relative;
	}

	#form_contact_done #message_area p.to_back a:after{
		-moz-border-bottom-colors: none;
		-moz-border-left-colors: none;
		-moz-border-right-colors: none;
		-moz-border-top-colors: none;
		border-color:transparent transparent transparent #FFF;
		border-image: none;
		border-style: solid;
		border-width: 5px;
		content: "";
		position: absolute;
		right: 3%;
		top:50%;
		margin-top:-5px;
	}

	#form_contact_done #message_area p.to_back a:hover{
		opacity:0.7;
	}
	
}

@media screen and (max-width: 768px) {
	#form_sec{
		width:90%;
		margin:45px auto 50px;

		h2{
			font-size:20px;
			text-align:center;
			margin:0 0 30px;
		}

		p.h2_txt{
			font-size:14px;
			text-align:left;
			margin:0 0 20px;
		}

		p.h2_txt span{
			color:#CC1C24;
		}

		.form_box table{
			width:100%;
			margin:0 auto;
			border-top:1px solid #D3CEC9;
			border-right:1px solid #D3CEC9;
		}

		.form_box table th{
			display: block;
			border-bottom:1px solid #D3CEC9;
			border-left:1px solid #D3CEC9;
			background:#EEECE7;
			padding:10px;
			font-size:14px;
			text-align:left;
			width:inherit;
		}

		.form_box table th span{
			float:right;
			display:inline-block;
			background:#B12E04;
			color:#FFF;
			font-size:14px;
			font-weight:normal;
			padding:0 5px;
			border-radius:3px;
		}


		.form_box table td{
			display: block;
			border-bottom:1px solid #D3CEC9;
			border-left:1px solid #D3CEC9;
			padding:10px;
			font-size:14px;
		}

		.form_box table td span.name{
			display:inline-block;
			width:inherit;
			text-align:left;
			padding:0;
			width: 50px;
		}
		
		.form_box table td span.tel{
			display:inline-block;
			width:inherit;
			text-align:left;
			padding:0;
		}


		.form_box table td input{
			padding:5px;
			font-size:14px;
		}

		.form_box table td input.box_125{
			width:90%;
		}

		.form_box table td input.box_256{
			width:90%;
		}
		
		.form_box table td input.box_512{
			width:90%;
		}

		.form_box table td input.box_80{
			width:20%;
		}
		
		.form_box table td input.p-postal-code{
			width:50%;
		}
		

		.form_box table td .input.radio label{
			padding: 0 10px 0 0;
		}

		.form_box table td .destination{
			margin:0 0 15px;
		}

		.form_box table td select{
			padding:5px;
			font-size:14px;
		}

		.form_box table td textarea{
			padding:5px;
			font-size:14px;
			width:90%;
		}

		.form_box table td .error-message{
			color:#FF0004;
		}

		.form_box .gs_seal{
			float:left;
			padding:20px 0 0 40px;
		}


		.form_box .button_box{
			text-align:center;
			margin:30px 80px 30px 40px;
		}

		.form_box .button_box input[type="submit"]{
			font-size:18px;
			color:#FFF;
			text-align:center;
			background:#001e3a;
			border-radius:3px;
			border:none;
			padding:10px 60px;
			position:relative;
		}


		.form_box .button_box input[type="submit"]:hover{
			opacity:0.7;
		}

		/***** form_contact_done *****/
		#form_contact_done{
		}

		#form_contact_done #message_area{
			width:1000px;
			margin:45px auto 200px;
			padding:30px 0 50px;
			box-shadow:2px 2px 3px #4F4D4D;
			border:#4F4D4D;
			text-align:center;
		}

		#form_contact_done #message_area .logo{
			margin:0 0 30px;
		}

		#form_contact_done #message_area h2{
			font-size:24px;
			font-weight:bold;
			margin:0 0 20px;
		}

		#form_contact_done #message_area p.h2_txt{
			font-size:18px;
			color:#CC1C24;
			margin:0 0 30px;
		}

		#form_contact_done #message_area p.to_back a{
			display:inline-block;
			background:#001e3a;
			color:#FFF;
			font-size:18px;
			padding:7px 25px;
			border-radius:3px;
			position:relative;
		}

		#form_contact_done #message_area p.to_back a:after{
			-moz-border-bottom-colors: none;
			-moz-border-left-colors: none;
			-moz-border-right-colors: none;
			-moz-border-top-colors: none;
			border-color:transparent transparent transparent #FFF;
			border-image: none;
			border-style: solid;
			border-width: 5px;
			content: "";
			position: absolute;
			right: 3%;
			top:50%;
			margin-top:-5px;
		}

		#form_contact_done #message_area p.to_back a:hover{
			opacity:0.7;
		}
		

	}
	
	#breadcrumb_area{
		display: none;
	}
}