@charset "UTF-8";

/****** recruit共通 ******/
/*--------------------------------------------
	セクションタイトル（青字タイトル）
---------------------------------------------*/
.sub_ttl { /* 基本はセクションタイトルで使用 */
	font-size: 5.4rem;
	font-weight: bold;
	color: #0F5CA8;
	line-height: 1.4;

	@media (768px <= width <= 1024px) {
		font-size: 4.5rem;
	}
	@media (width <= 767px) {
		font-size: 3rem;
	}
}

/*--------------------------------------------
	ページ下部 採用エントリーエリア
---------------------------------------------*/
.cmn_entry {
	text-align: center;
	margin-top: 6%;

	@media (width <= 1024px) {
		margin-top: 0;
	}

	.bg_top {
		background: url("/assets/img/recruit/recruit_entry_image01.png") no-repeat top right;
		height: 412px;

		@media (768px <= width <= 1024px) {
			background-size: 100%;
			background-position: top 10vw left 15vw;
			height: 60vw;
		}
		@media (width <= 767px) {
			background-size: 120%;
			background-position: top 10vw left 20vw;
			height: 80vw;
		}
	}

	.bg_btm {
		background: linear-gradient(to bottom right, #fff 0%, #fff 6.9%, #fff84a 31.53%, #47b1ce 100%);
		padding-bottom: 200px;

		@media (768px <= width <= 1024px) {
		}
	}

	.inner {
		/*height: 412px;

		@media (width <= 1024px) {
			height: auto;
			width: 100%;
			aspect-ratio: 16 / 9;
		}*/
	}

	/* タイトル吹き出し */
	.balloon_btm {
		/*top: -17%;
		left: 0;
		right: 0;
		margin: -5% auto 0;*/
		padding: 15px 0 22px;
		margin: -60px auto 0;
		width: 38%;
		min-width: 450px;
		max-width: 600px;
		background-color: #0F5CA8;
		z-index: 2;

		@media (width <= 1024px) {
			min-width: 350px;
			margin: -60px auto 0;
		}
		@media (width <= 767px) {
			width: 50%;
			max-width: 250px;
			min-width: 170px;
			padding: 10px 0 12px;
			margin: -60px auto 0 20px;
		}

		&::before {
			display: none;
		}

		&::after {
			bottom: -72px;
			left: 50%;
			border: 26px solid transparent;
			border-top: 44px solid #0F5CA8;

			@media (width <= 1024px) {
				border: 13px solid transparent;
				border-top: 22px solid #0F5CA8;
				bottom: -37px;
			}
		}

		.entry_ttl { /* 採用エントリー */
			font-size: 5.4rem;
			font-weight: bold;
			color: #FFF;
			line-height: 1.5;

			@media (width <= 1024px) {
				font-size: 3rem;
			}
			@media (width <= 767px) {
				font-size: 2rem;
			}
		}
	}

	/* タイトル下テキストと左右の画像（働く人）部分 */
	.content {
		text-align: center;
		padding-top: 0;
		/*position: absolute;
		top: -47%;
		left: 0;
		right: 0;*/

		.content_image {
			margin-top: -280px;

			@media (width <= 1150px) {
				margin-top: -230px;
			}
			@media (width <= 1024px) {
				margin-top: -180px;
			}
			@media (width <= 767px) {
				margin-top: -150px;
			}
		}

		.cmn_txt {
			font-size: 1.8rem;
			/*position: absolute;
			bottom: -3%;
			left: 0;
			right: 0;
			margin: 0 auto;*/
			margin-top: -40px;
			line-height: 2.2;

			@media (width <= 1150px) {
				margin-top: -30px;
				margin-left: 20px;
			}
			@media (width <= 1024px) {
				margin-top: 0;
			}
			@media (width <= 767px) {
				margin-top: 20px;
				font-size: 1.6rem;
			}
		}
	}

	/* 応募フォームはこちらボタン */
	.entry_btn {
		margin: 100px auto 0;
		display: flex;
		align-items: center;
		background-color: #FFF;
		box-shadow: 0px 0px 10px rgba(15, 92, 168, 0.5);
		max-width: 1600px;

		@media (width <= 1024px) {
			margin: 60px auto 0;
		}
		@media (width <= 767px) {
			flex-direction: column;
		}
		&:hover {
			opacity: 1;
			color: #fff;
			background-color: #105CA8;
		}

		.entry_img {
			width: 50%;
			overflow: hidden;

			@media (width <= 767px) {
				width: 100%;
			}
			img {
				width: 100%;
				height: auto;
				transition: transform .6s ease;
			}
		}
		&:hover .entry_img img {
			transform: scale(1.1);
		}

		.txt_area {
			width: 50%;
			height: 100%;
			@media (width <= 767px) {
				width: 100%;
				padding: 6% 0;
			}
		}

		.txt_svg {
			width: 142px;
			height: 39px;
			margin: 0 auto;
			background: url("/assets/img/recruit/entry_form.svg") no-repeat;

			@media (width <= 1024px) {
			}
		}

		.form_enter {
			font-size: 3.2rem;
			font-weight: bold;
			line-height: 1.5;
			position: relative;

			@media (width <= 1024px) {
				font-size: 2.2rem;
			}

			&::after {
				content: "";
				position: absolute;
				top: 50%;
				bottom: 0;
				right: 4rem;
				display: flex;
				justify-content: center;
				align-items: center;
				transition: right 0.3s;
				width: 20px;
				height: 20px;
				border-top: solid 4px #0F5CA8;
				border-right: solid 4px #0F5CA8;
				transform: translateY(-50%) rotate(45deg);

				@media (width <= 1024px) {
					top: 0;
					width: 13px;
					height: 13px;
					border-top: solid 3px #0F5CA8;
					border-right: solid 3px #0F5CA8;
				}
			}
		}
		&:hover .txt_svg {
			background: url("/assets/img/recruit/entry_form_w.svg") no-repeat;
		}
		&:hover .form_enter::after {
			border-top: solid 4px #fff;
			border-right: solid 4px #fff;
		}
	}

	/* 最下部ボタンエリア */
	.btm_btn {
		margin-top: 7%;

		@media (width <= 1024px) {
			/*margin-top: 20%;*/
			margin-top: 60px;
		}

		h3.pickup_ttl {
			font-size: 2.6rem;
			font-weight: 600;
			text-align: left;
			color: #105CA8;
			position: relative;
			margin-bottom: 3%;

			@media (width <= 1024px) {
				margin-bottom: 6%;
				font-size: 2.3rem;
			}

			&::after {
				position: absolute;
				content: " ";
				background: url("/assets/img/recruit/pickup.svg") no-repeat top right;
				width: 239px;
				height: 84px;
				top: -2.5vh;
				left: 1%;
				z-index: -1;

				@media (width <= 1024px) {
					background-size: contain;
					width: 215px;
					height: 76px;
				}
			}
		}
	}
	.clm3_grid {
		column-gap: 3%;
		align-items: center;

		@media (width <= 1024px) {
			display: block;
		}

		.btn {
			@media (width <= 1024px) {
				margin: 3% 0;
			}			
		}
		
		.grid_item {
			background-color: #0F5CA8;
			color: #FFF;
			font-size: 1.8rem;
			font-weight: bold;
			padding: 6% 0;
			position: relative;

			@media (768px <= width <= 1024px) {
				padding: 3% 0;
			}      
			@media (width <= 1024px) {
				font-size: 1.6rem;
			}
			
			&:not(:last-child) {
				@media (width <= 1024px) {
					margin: 3% 0;
				}
			}

			&::before {
				background: linear-gradient(#47b1ce 0%, #0f5ca8 100%);
			}

			&::after {
				content: "";
				position: absolute;
				top: 50%;
				bottom: 0;
				right: 2rem;
				display: flex;
				justify-content: center;
				align-items: center;
				transition: right 0.3s;
				width: 10px;
				height: 10px;
				border-top: solid 2px #FFF;
				border-right: solid 2px #FFF;
				transform: translateY(-50%) rotate(45deg);
				
			}
		}
	}
}

/****** recruit配下 共通 ******/
.recruit_sub {
	/*--------------------------------------------
		ページタイトル
	---------------------------------------------*/
	.page_title {
		padding: 186px 0 140px;
		height: 460px;
		/* ▼ページタイトル背景・白ロゴの画像設定 */
		background-repeat: no-repeat;
		background-position: right 12vw bottom, center bottom;
		background-size: 608px, cover;

		@media (width <= 1024px) {
			position: relative;
			padding: 0;
			/*padding: 18% 0 0;*/
			height: 340px;
			/* ▼ページタイトル背景・白ロゴの画像設定 */
			background-position: right 15vw bottom, right bottom;
			background-size: 42vw, cover;
		}
		@media (width <= 767px) {
			/*padding: 27% 0 0;*/

			height: 225px;
			/* ▼ページタイトル背景・白ロゴの画像設定 */
			background-size: 40vw, cover;
		}
		
		.cmn_ttl {
			@media (width <= 1024px) {
				position: absolute;
				top: 140px;
			}
			@media (width <= 767px) {
				top: 100px;
			}
			.jp {
				font-size: 5.6rem;
				color: #0F5CA8;

				@media (768px <= width <= 1024px) {
					font-size: 5rem;
				}
				@media (width <= 767px) {
					font-size: 3.2rem;
				}
			}
		}
	}
}

/****** 採用情報 TOP ******/
.recruit {
	/*--------------------------------------------
		ページタイトル
	---------------------------------------------*/
	.page_title.top {
		padding-top: 0;
		margin-bottom: 0;
		background: url("/assets/img/recruit/recruit_title.jpg") no-repeat center bottom;
		background-size: cover;

		@media (width <= 1024px) {
			padding: 0;
			background: url("/assets/img/recruit/recruit_title.jpg") no-repeat left 28% top;
			background-size: 150%;
		}

		.inner {
			/*height: 680px;*/
			height: 72vh;

			@media (width <= 1024px) {
				/*height: 85.5vw;*/
			}
			@media (width <= 767px) {
				height: 55vh;
			}
		}

		.recruit_ttl {
			position: absolute;
			top: 50%;
			left: 60%;
			transform: translateY(-50%);
			text-align: center;

			@media (width <= 1024px) {
				right: 0;
				left: auto;
			}
			@media (width <= 767px) {
				top: 50%;
			}

			.en {
				color: #0F5CA8;
				margin-bottom: 5%;
			}
			.jp {
				color: #222;
			}
		}
	}

	/*--------------------------------------------
		intro
	---------------------------------------------*/
	.intro {
		color: #FFF;
		background: linear-gradient(#ecf8fa 0%, #47b1ce 100%);

		.inner {
			padding-bottom: 7%;
			@media (width <= 767px) {
				padding-bottom: 15%;
			}
		}

		/* 白背景吹き出し */
		.balloon_btm {
			top: 0;
			left: 50%;
			transform: translateY(-50%) translateX(-50%);
			padding: 33px 80px 27px;
			margin: 0 0 2%;
			min-width: 760px;

			@media (width <= 1024px) {
				padding: 5%;
				min-width: auto;
				width: 100%;
			}

			&::before {
				bottom: -65px;
				left: 50%;
				border: 24px solid transparent;
				border-top: 42px solid #FFF;

				@media (width <= 1024px) {
					bottom: -42px;
					border: 15px solid transparent;
					border-top: 28px solid #FFF;
				}
			}

			&::after {
				bottom: -73px;
				left: 50%;
				border: 26px solid transparent;
				border-top: 44px solid #0F5CA8;

				@media (width <= 1024px) {
					bottom: -49px;
					border: 17px solid transparent;
					border-top: 30px solid #0F5CA8;
				}
			}
			
			.txt_svg {
				max-width: 600px;

				@media (768px <= width <= 1024px) {
					width: 60vw;
				}
				@media (width <= 767px) {
					max-width: 100%;
					width: 90vw;
				}
			}
		}

		.content {
			text-align: center;
			padding-top: 0;
			
			.cmn_txt {
				margin-top: 6%;
				font-size: 1.8rem;
				font-weight: bold;

				@media (width <= 1024px) {
					font-size: 1.6rem;
				}
				@media (width <= 767px) {
					margin-top: 15%;
					text-align: left;
				}
			}
		}
		/*  イメージ  */
		.content_top {
			@media (width <= 767px) {
				display: flex;
				align-items: flex-start;
			}
			.image01 {
				position: relative;
				top: -50px;
				margin-right: 4%;
				@media (width <= 1024px) {
					width: 30%;
				}
				@media (width <= 767px) {
					top: -10px;
					margin-right: 0;
					width: 34%;
				}
			}
			.image02 {
				margin-left: 3%;
				@media (width <= 1024px) {
					 width: 60%;
			 }
				@media (width <= 767px) {
					margin-left: 0;
					margin-top: 15%;
					width: 64%;
				}
			}
		}
		.content_btm {
			margin-left: 25%;
			margin-top: -120px;
			@media (width <= 1024px) {
			}
			@media (width <= 767px) {
				margin-left: 0;
				margin-top: -8%;
			}
			.image03 {
				@media (width <= 1024px) {
				}
				@media (width <= 767px) {
					width: 92%;
				}
			}
		}
	}


	/*--------------------------------------------
		about
	---------------------------------------------*/
	.sec01 {
		padding: 12% 0 16%;
		@media (width <= 767px) {
			padding: 20% 0 16%;
		}

		.sub_ttl {
			margin-bottom: 3.5%;
			@media (width <= 767px) {
				margin-bottom: 10%;
			}

			&::before {
				background: url("/assets/img/recruit/recruit_text06.svg") no-repeat;
				background-size: contain;
				content: "";
				display: block;
				width: 854px;
				height: 207px;
				position: absolute;
				top: -12.5%;
				left: 2%;
				z-index: -1;

				@media (768px <= width <= 1024px) {
					top: -3%;
					left: 2%;
					width: 70vw;
				}
				@media (width <= 767px) {
					width: 100%;
					height: auto;
					aspect-ratio: 854 / 207;
					top: -2%;
					left: 0;
				}
			}
		}

		.txt_area {
			top: 0;
			left: 0;
			width: 56%;

			@media (width <= 1024px) {
				width: 100%;
			}
		}

		img { /* 円の図形 */
			position: absolute;
			bottom: -12vw;
			right: 0;
			max-width: 500px;
			width: 36%;

			@media (width <= 1024px) {
				position: static;
				max-width: auto;
				width: 70vw;
				display: block;
				margin: 10% auto 0;
			}
			@media (width <= 767px) {
				width: 60vw;
			}
		}
	}

	/*--------------------------------------------
		採用メッセージ
	---------------------------------------------*/
	.sec02 {
		background: url("/assets/img/recruit/recruit_bg04.jpg") no-repeat bottom left / cover;

		@media (width <= 1024px) {
			background: url("/assets/img/recruit/recruit_bg04.jpg") no-repeat top left 46% / cover;
			padding-bottom: 95vw;
		}
		@media (width <= 767px) {
			padding-bottom: 130vw;
		}

		.inner {
			padding: 5% 0;
			height: 560px;
		}

		.sub_ttl {
			letter-spacing: 0.1em;
			position: absolute;
			top: -19%;

			@media (width <= 1024px) {
				top: -8%;
			}

			.txt_svg {
				max-width: 191px;

				@media (width <= 1024px) {
					max-width: 100%;
					width: 30vw;
				}
				@media (width <= 767px) {
					width: 40vw;
				}
			}
		}

		/* 白背景吹き出し */
		.balloon_btm {
			top: -8vw;
			left: 53.5%;
			padding: 24px 108px 20px;
			max-width: 690px;
			width: 39vw;

			@media (width <= 1024px) {
				top: 15vw;
				left: 50%;
				transform: translateX(-50%);
				padding: 5%;
				width: 100%;
			}
			@media (width <= 767px) {
				margin-top: 5%;
			}

			&::before {
				bottom: -42px;
				left: 50%;
				border: 15px solid transparent;
				border-top: 28px solid #FFF;
			}

			&::after {
				bottom: -49px;
				left: 50%;
				border: 17px solid transparent;
				border-top: 30px solid #0F5CA8;
			}

			.txt_svg {
				max-width: 302px;

				@media (width <= 1024px) {
					max-width: 100%;
					width: 40vw;
				}
				@media (width <= 767px) {
					width: 55vw;
				}
			}
		}

		.img_area {
			position: absolute;
			top: 11vh;
			right: 55%;

			@media (width <= 1024px) {
				position: static;
				width: 100%;
				margin-top: 25vw;
				text-align: center;
			}
			@media (width <= 767px) {
				margin-top: 30%;
			}

			img {
				max-width: 562px;
				width: 100%;
			}

			.name {
				margin-top: 2%;
				font-size: 2rem;
				font-weight: 500;
				text-align: center;
				color: #FFF;

				@media (width <= 1024px) {
					margin: 0 0 5% 0;
				}
				@media (width <= 767px) {
					margin: 3% 0 10% 0;
					font-size: 1.6rem;
					color: #0F5CA8;
					font-weight: 600;
				}
			}
		}

		.txt_area {
			width: 50%;
			padding: 4%;
			background-color: #FFF;
			position: absolute;
			bottom: 0;
			left: 50%;

			@media (width <= 1024px) {
				width: 100%;
				position: static;
				left: 0;
			}
			@media (width <= 767px) {
				padding: 8% 5% 10%;
			}
		}
	}

	/*--------------------------------------------
		募集職種
	---------------------------------------------*/
	.sec03 {
		padding: 7% 0 47%;
		margin-top: 0;
		background: linear-gradient(#0f5ca8 0%, #47b1ce 100%);

		@media (width >= 1920px)  {
			padding: 8% 0 36%;
		}
		@media (width <= 1024px) {
			padding: 7% 0 20vw;
		}

		.recruit_img { /* 3つ並びの画像 */
			display: flex;
			justify-content: center;
			width: 100%;

			@media (width <= 1024px) {
				max-width: 100%;
			}

			img {
				width: calc(100% / 3);
			}
		}

		.inner {
			margin-top: 11%;
			@media (width <= 767px) {
				margin-top: 18%;
			}
		}

		.sub_ttl {
			color: #FFF;
			text-align: center;
			letter-spacing: 0.2em;

			.txt_svg {
				max-width: 389px;

				@media (width <= 1024px) {
					max-width: 100%;
					width: 45vw;
				}
				@media (width <= 767px) {
					width: 65vw;
				}
			}
		}

		.content {
			padding-top: 8%;
			@media (width <= 767px) {
				padding-top: 12%;
			}

			/******* 3職種共通 li *******/
			li.content_bg {
				max-width: 1600px;
				max-height: 447px;

				@media (width <= 1024px) {
					max-width: 100%;
					max-height: none;
					background: none !important;
				}

				/* 職種タイトル〜募集要項はこちらボタンまで */
				.content_top {
					position: relative;
					height: 590px;

					@media (width <= 1024px) {
						height: auto;
					}
				}

				.ts_recruit_type_img { /* tab/spでは背景画像ではなくimgで設置 */
					@media (width >= 1025px)  {
						display: none;
					}
					@media (width <= 1024px) {
						position: relative;
						width: 100%;
						padding-top: 56.25%;
						overflow: hidden;
					}

					img {
						position: absolute;
						top: 0; left: 0;
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: left;
					}
				}

				.service_ttl { /* 職種タイトル */
					left: 1%;
					bottom: 28%;

					@media (width <= 1024px) {
						top: 28vw;
						bottom: auto;
						z-index: 2;
					}
					@media (width <= 767px) {
						top: 10vh;
					}

					.num {
						font-size: 3.6rem;
						padding: 2px 14px;
						margin-left: 0.8em;

						@media (width <= 1024px) {
							font-size: 2.8rem;
							padding: 0.15em 0.5em;
						}
						@media (width <= 767px) {
							font-size: 2.4rem;
							padding: 2px 10px;
						}
					}
					.title {
						font-size: 5.4rem;
						line-height: 1.2;
						text-indent: 0.5em;

						@media (width <= 1024px) {
							font-size: 3.8rem;
						}
						@media (width <= 767px) {
							font-size: 2.8rem;
						}
					}
				}

				/* 業務内容 */
				.content_btm {
					justify-content: space-between;
					align-items: flex-start;
					margin-top: 60px;

					@media (width <= 1024px) {
						display: block;
						margin-top: 7vw;
					}
					@media (width <= 767px) {
						margin-top: 10vw;
					}
				}

				.txt_area {
					width: 42vw;
					background-color: #FFF;
					padding: 3.5% 3.2% 5.5%;
					position: absolute;
					right: 3%;
					bottom: 0;

					@media (width <= 1024px) {
						position: static;
						width: 100%;
						padding: 5%;
					}
					@media (width <= 767px) {
						padding: 8% 5% 10%;
					}
				}

				.btn.type_02 {
					min-width: 500px;
					max-width: 35vw;
					position: absolute;
					left: 0;
					bottom: 0;
					@media (width <= 1200px) {
						min-width: 400px;
					}
					@media (width <= 1024px) {
						min-width: auto;
						max-width: 100%;
						position: relative;
					}

					.check_img {
						display: block;
						content: "";
						width: 96px;
						height: 28px;
						position: absolute;
						top: -18px;
						left: 50%;
						transform: translateX(-50%);
						background: url("/assets/img/check_b.svg") no-repeat;
						background-size: contain;
						transition: background-image 0.3s;
						pointer-events: none;

						@media (768px <= width <= 1024px) {
						/*  top: -26px;
							width: 150px;
							height: 44px;*/
						}
						@media (width <= 767px) {
						/*  top: -20px;
							width: 116px;
							height: 34px;*/
						}
					}
				}

				.balloon_right { /* 「業務内容」吹き出し */
					position: relative;
					display: inline-block;
					padding: 21px 0 26px;
					min-width: 248px;
					max-width: 100%;
					height: 82px;
					border: solid 3px #FFF;
					font-size: 2.6rem;
					font-weight: bold;
					color: #FFF;
					text-align: center;
					
					@media (width <= 1024px) {
						padding: 3% 0;
						height: auto;
						width: 100%;
					}
					@media (width <= 767px) {
						padding: 5% 0 6%;
						font-size: 2rem;
					}

					&::before {
						content: "";
						position: absolute;
						top: 50%;
						right: -23px;
						margin-top: -12px;
						border: 12px solid transparent;
						border-left: 12px solid #247CB6;
						z-index: 2;

						@media (width <= 1024px) {
							top: auto;
							bottom: -25px;
							right: auto;
							left: 50%;
							margin-top: 0;
							transform: translateX(-50%);
							border: 12px solid transparent;
							border-top: 14px solid #1C70B1;
						}
					}
					&::after {
						content: "";
						position: absolute;
						top: 50%;
						right: -30px;
						margin-top: -14px;
						border: 14px solid transparent;
						border-left: 14px solid #FFF;
						z-index: 1;

						@media (width <= 1024px) {
							top: auto;
							bottom: -34px;
							right: auto;
							left: 50%;
							margin-top: 0;
							transform: translateX(-50%);
							border: 16px solid transparent;
							border-top: 18px solid #FFF;
						}
					}
				}

				.work_list { /* 業務リスト */
					width: 100%;
					background-color: #FFF;
					padding: 3.5% 4% 7%;
					margin-left: 5%;
					position: relative;

					@media (width <= 1024px) {
						padding: 10% 8% 14%;
						margin-left: 0;
						margin-top: 20px;
						display: block;
					}
					@media (width <= 767px) {
						padding: 10% 8% 25%;
						margin-top: 30px;
					}

					ul {
						width: 47%;

						@media (width <= 1024px) {
							width: 100%;
						}
					}

					.list01 {
						margin-right: 5%;

						@media (width <= 1024px) {
							margin: 0 0 10% 0;
						}
					}

					h5 { /* 業務青字タイトル */
						font-size: 2rem;
						font-weight: 600;
						color: #0F5CA8;
						margin-bottom: 8%;

						@media (width <= 1024px) {
							margin-bottom: 4%;
						}
					}

					li {
						line-height: 1.6;
						text-indent: -2.2em;
						padding-left: 2.2em;

						&:not(:first-child) {
							margin-top: 2%;
						}

						&::before {
							display: inline-block;
							content: "";
							width: 20px;
							height: 1px;
							background-color: #0F5CA8;
							vertical-align: super;
							margin-right: 5%;

							@media (width <= 1024px) {
								width: 15px;
								margin-right: 0.5em;
							}
						}

						.cmn_txt {
							text-indent: -1em;
							padding-left: 1.2em;
							line-height: 1.5;
							margin-top: 2%;
						}
					}

					.btn.type_02.link_about { /* 〇〇の仕事についてボタン */
						min-width: 500px;
						max-width: 35vw;
						position: absolute;
						left: 0;
						right: 0;
						margin: 0 auto;
						bottom: -10%;
						align-items: center;

						@media (width <= 1024px) {
							min-width: 75vw;
							max-width: auto;
							width: 90%;
							bottom: clamp(-5vw, -3.5vw, -1vw);
						}
						@media (width <= 767px) {
							bottom: clamp(-10vw, -6vw, -8vw);
						}

						/*&::before {
							background: url("/assets/img/check_b.svg") no-repeat center top;
							content: "";
							width: 96px;
							height: 28px;
							top: -18px;
							left: 50%;
							transform: translateX(-50%);
							z-index: 1;

							@media (width <= 1024px) {
								width: 100%;
							}
						}

						&:hover {
							color: #0F5CA8;
						}*/
					}
				}

				/******* 電気工事士（現場管理者） *******/
				&.job01 {
					background-image: url("/assets/img/recruit/recruit_type07.jpg");
					background-size: cover;
				}

				/******* 事務 *******/
				&.job02 {
					background-image: url("/assets/img/recruit/recruit_type08.jpg");
					background-size: cover;
					margin-top: 58%;

					@media (width >= 1536px) {
						margin-top: 49%;
					}
					@media (width <= 1024px) {
						margin-top: clamp(10vw, 20vw, 30vw);
					}
					@media (width <= 767px) {
						margin-top: clamp(20vw, 30vw, 40vw);
					}

					.ts_recruit_type_img {
						@media (width <= 1024px) {
							img {
								object-position: right;
							}
						}
					}

					.service_ttl {
						right: 3.5%;
						left: auto;
						text-align: right;

						@media (width <= 1024px) {
							right: auto;
							left: 0;
							top: 34vw;
							bottom: auto;
							text-align: left;
						}
						@media (width <= 767px) {
							top: 22vw;
						}
					}

					.txt_area {
						left: 3%;
						right: auto;

						@media (width <= 1024px) {
							left: 0;
						}
					}

					.btn.type_02 {
						right: 0;
						left: auto;
					}

					.balloon_right::before {
						border-left: 12px solid #3393C1;

						@media (width <= 1024px) {
							border: 12px solid transparent;
							border-top: 14px solid #2E8CBD;
						}
					}
				}

				/******* 営業 *******/
				&.job03 {
					background-image: url("/assets/img/recruit/recruit_type09.jpg");
					background-size: cover;
					margin-top: 61%;

					@media (width >= 1536px) {
						margin-top: 49%;
					}
					@media (width <= 1024px) {
						margin-top: clamp(10vw, 20vw, 30vw);
					}
					@media (width <= 767px) {
						margin-top: clamp(20vw, 30vw, 40vw);
					}

					.service_ttl {
						right: 3.5%;

						@media (width <= 1024px) {
							top: 33vw;
						}
						@media (width <= 767px) {
							top: 22vw;
						}
					}

					.balloon_right::before {
						border-left: 12px solid #42AACB;

						@media (width <= 1024px) {
							border: 12px solid transparent;
							border-top: 14px solid #44ACCC;
						}
					}

					.work_list {
						padding: 3.5% 4% 5%;

						@media (width <= 1024px) {
							padding: 5%;
						}
					}
				}

			}
		}
	}

	/*--------------------------------------------
		社員インタビュー
	---------------------------------------------*/
	.sec04 {
		padding: 8% 0 12%;
		margin-top: 0;
		background: linear-gradient(to bottom, #FFF 0, #FFF 4.5%, #F2F2F2 4.5%, #F2F2F2 100%);
		position: relative;
		@media (width <= 767px) {
			padding: 18% 0 12%;
		}

		&::after {
			content: "";
			background-color: #FFF;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 12%;
			height: 100%;
			z-index: 1;
		}

		.sub_ttl {
			letter-spacing: 0.2em;
			@media (width <= 767px) {
				margin-bottom: 15%;
			}
			
			.txt_svg {
				max-width: 218px;
			}

			h3 {
				margin: 1.5% 0 6%;
			}
		}

		 /******* 各インタビュー共通設定 *******/
		li {
			justify-content: flex-start;
			align-items: center;

			@media (width <= 1024px) {
				display: block;;
			}
			
			&:not(:last-of-type) {
				margin-bottom: 8%;

				@media (width <= 1024px) {
					margin-bottom: 20%;
				}
			}
			.img_area {
				position: relative;
				
				img {
					/*min-width: 570px;*/
					width: 50vw;

					@media (width <= 1024px) {
						min-width: auto;
						width: 100%;
					}
				}

				&::after {
					position: absolute;
					bottom: -9%;
					left: 0;
					content: "";
					background: url("/assets/img/recruit/interview/interview1_lb.svg") no-repeat;
					width: 398px;
					height: 70px;
					display: block;
					opacity: 0.7;
					z-index: 10;
					font-size: 8rem;
					letter-spacing: 0.12em;
				}
			}

			.txt_area {
				margin-left: 5%;
				width: 45vw;
				@media (width <= 1024px) {
					margin-left: 0;
					width: 100%;
				}

				.catch {
					font-size: 2.6rem;
					font-weight: bold;
					margin-bottom: 5%;
					color: #0F5CA8;
					line-height: 1.8;
					text-align: center;

					@media (width <= 1024px) {
						margin: 8% 0 4%;
						line-height: 1.4;
						text-align: left;
					}
				}
				.cmn_txt {
					margin: 3% 0 6%;

					@media (width <= 1024px) {
						margin: 3% 0 6%;
					}
				}
				.btn.type_01 {
					margin: 0 auto;
					min-width: 500px;
					max-width: 35vw;

					@media (width <= 1024px) {
						min-width: auto;
						max-width: 100%;
						width: 100%;
					}
				}
			}
		}

		li {
			/******* インタビュー2個別設定 *******/
			&:nth-of-type(2) .img_area {
				order: 2;

				&::after {
					background: url("/assets/img/recruit/interview/interview2_lb.svg") no-repeat;
					left: auto;
					right: 0;
				}
			}
			&:nth-of-type(2) .txt_area {
				order: 1;
				margin: 0 5% 0 0;
			}

			/******* インタビュー3個別設定 *******/
			&:nth-of-type(3) .img_area {
				&::after {
					background: url("/assets/img/recruit/interview/interview3_lb.svg") no-repeat;
				}
			}
		}
	}
}