@charset "utf-8";
/* ============================================================
   採用ページ共通
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Train+One&display=swap');

/* ─────────────────────────
   カラー/font
───────────────────────── */
#recruit {
	--main: var(--rec);
	--link: var(--rec);
	--rec-bg: #EBF1F5;
	--rec-cv: #F5C700;
	--rec-cv-ov: #f1a90f;
	--train-one: "Train One", system-ui;
	/*
	--ta-kobe: "ta-kobe", sans-serif;
	*/
}

.ani-line {
	background-image: linear-gradient(to right, #D4EFF5 0%, #D4EFF5 50%, transparent 50%);
	background-size: 200% 5px;
	font-weight: bold;
}

.anim-title__logo {
	background: url("../img/cmn_logo_f_recruit.svg") no-repeat center / cover;
}

/* ─────────────────────────
   wrapper
───────────────────────── */
#wrapper {
	padding: 165px 0 0 0;
}

@media screen and (max-width: 768px) {
	#wrapper {
		padding: 70px 0 0 0;
	}
}

/* ─────────────────────────
   contents
───────────────────────── */
.contents {}

@media screen and (max-width: 768px) {
	.contents {
		padding: 90px 0 0;
	}
}

/* ─────────────────────────
   header.header_active2
───────────────────────── */
header.header_active2 {
	/*position: static;*/
	/*ページナビ ズレ防止のため*/
	display: none;
}

/* ─────────────────────────
   footer_fixed
───────────────────────── */
@media screen and (max-width: 768px) {
	#footer_fixed.float_btn_group {
		display: none !important;
	}

	#page_top {
		bottom: 10px;
	}
}

/* ─────────────────────────
   breadcrumblist/h1
───────────────────────── */
.breadcrumblist {
	top: 500px;
	z-index: 15;
}

.under-h1 {
	top: 70px;
}

.under-h1 h1 {
	color: #fff;
}

@media screen and (max-width: 768px) {
	.breadcrumblist {
		display: none;
	}

	.under-h1 {
		top: 10px;
	}
}

/* ─────────────────────────
   基本画像制御
───────────────────────── */
#recruit img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ─────────────────────────
   rec-adjustment（アンカー位置オフセット補正）
───────────────────────── */
.rec-adjustment {
	height: 80px;
	margin-top: -80px;
	pointer-events: none;
	display: block;
}

@media screen and (max-width: 768px) {
	.rec-adjustment {
		height: 60px;
		margin-top: -60px;
	}
}

/* ─────────────────────────
   水色：ロゴ＋セクションタイトル
───────────────────────── */
.section-ttl-area {
	display: flex;
	align-items: center;
	/*gap: 0 20px;*/
	margin: 0 0 40px;
}

.section-ttl-area .en {
	font: italic 700 2.6rem/1 var(--en);
	letter-spacing: 0;
	position: relative;
	color: var(--main);
}

/*.section-ttl-area .en::before {
	content: "";
	background: url("../img/cmn_logo_f_recruit.svg") no-repeat center / cover;
	aspect-ratio: 95 / 95; 
	display: inline-block;
	width: 26px;
	height: auto;
}*/
.section-ttl-area .ja {
	color: var(--main);
	font-size: 4rem;
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1.5;
}

/*白*/
.section-ttl-area.wht .en {
	color: #fff;
}

/*.section-ttl-area.wht .en::before {
	background: url("../img/cmn_logo_f_white.svg") no-repeat center / cover;
}*/
.section-ttl-area.wht .ja {
	color: #fff;
}

@media screen and (max-width: 768px) {
	.section-ttl-area {
		flex-wrap: wrap;
		margin: 0 0 25px;
	}

	.section-ttl-area .en {
		font-size: 2.2rem;
		width: 100%;
	}

	/*.section-ttl-area .en::before {
		width: 22px;
	}*/
	.section-ttl-area .ja {
		font-size: 2.8rem;
		width: 100%;
		margin: 3px 0 0;
	}
}

/* ─────────────────────────
   黒字：コンテンツタイトル＆キャッチ
───────────────────────── */
.contents-ttl {
	font-size: 3.8rem;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1.5;
	margin: 0 0 20px;
}

.contents-catch {
	font-size: 2.2rem;
	font-weight: bold;
	letter-spacing: .02em;
	line-height: 1.8;
	margin: 0 0 15px;
}

@media screen and (max-width: 768px) {
	.contents-ttl {
		font-size: 2.6rem;
		margin: 0 0 15px;
	}

	.contents-catch {
		font-size: 2rem;
		margin: 0 0 10px;
	}
}

/* ─────────────────────────
   txt
───────────────────────── */
.txt {
	font-size: 1.6rem;
	line-height: 2.2;
	letter-spacing: .05em;
}

.txt + .txt {
	margin: 20px 0 0;
}

@media screen and (max-width: 768px) {
	.txt {
		line-height: 2;
	}

	.txt + .txt {
		margin: 15px 0 0;
	}
}

/* ─────────────────────────
   MV
───────────────────────── */
.rec-mv-area {
	width: 100%;
	height: 400px;
	position: relative;
}

.rec-mv-area::before {
	content: "";
	background: url("../img/rec-mv-grad.png")center/cover no-repeat;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.rec-mv-area .ttl-area {
	position: absolute;
	z-index: 2;
	left: 80px;
	bottom: 90px;
}

.rec-mv-area .ttl-area .en {
	font: italic 700 2.2rem/1 var(--en);
	letter-spacing: 0;
	position: relative;
	display: flex;
	align-items: center;
	gap: 0 5px;
	color: #fff;
}

.rec-mv-area .ttl-area .ja {
	color: #fff;
	font-size: 4rem;
	font-weight: bold;
	letter-spacing: .04em;
	line-height: 1.5;
	margin: 5px 0 0;
	padding: 0;
}

.recruit-header__bg {
	position: absolute;
	width: 100%;
	height: 400px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	top: 0;
	z-index: -1;
}

.aboutus .recruit-header__bg {
	background-image: url("../img/recruit-about-mv.jpg");
}

.career .recruit-header__bg {
	background-image: url("../img/recruit-mvtitle-texture.jpg");
}

.machinist .recruit-header__bg {
	background-image: url("../img/recruit-machinist-mv.jpg");
}

.environment .recruit-header__bg {
	background-image: url("../img/subpage-head-company.jpg");
}

.interview .recruit-header__bg {
	background-image: url("../img/recruit-int-mv.jpg");
}

.crosstalk .recruit-header__bg {
	background-image: url("../img/recruit-cross-mv.jpg");
}

@media screen and (max-width: 768px) {
	.rec-mv-area {
		height: 250px;
	}

	.rec-mv-area::before {
		background-size: cover;
		width: 100%;
		height: 100%;
	}

	.rec-mv-area .ttl-area {
		left: 20px;
		bottom: 30px;
	}

	.rec-mv-area .ttl-area .en {
		font-size: 1.8rem;
		gap: 0 5px;
	}

	.rec-mv-area .ttl-area .ja {
		font-size: 2.8rem;
		margin: 0;
	}

	.recruit-header__bg {
		width: 100%;
		height: 100%;
	}


	.aboutus .recruit-header__bg {
		background-image: url("../img/recruit-about-mv-sp.jpg");
	}

	.career .recruit-header__bg {
		background-image: url("../img/recruit-career-mv-sp.jpg");
	}

	.machinist .recruit-header__bg {
		background-image: url("../img/recruit-machinist-mv-sp.jpg");
	}

	.environment .recruit-header__bg {
		background-image: url("../img/recruit-env-mv-sp.jpg");
	}

	.interview .recruit-header__bg {
		background-image: url("../img/recruit-int-mv-sp.jpg");
	}

}

/* ─────────────────────────
   rec-nav-wrap   追従ナビゲーション  PC・SP共通
───────────────────────── */
.rec-cmn .rec-nav-wrap {
	position: relative;
	z-index: 12;
}

.rec-cmn #rec-nav {
	transition: .7s;
	width: fit-content;
	right: 0;
	margin: 0 30px 0 auto;
	min-width: 1060px;
	position: absolute;
	top: -40px;
}

.rec-cmn #rec-nav.rec-nav-fix {
	position: fixed;
	top: 10px;
	z-index: 16;
}

@media screen and (min-width: 769px) {
	.rec-cmn .rec-nav-sp-more {
		display: none;
		position: relative;
	}
}

.rec-nav-sp-more .btn-wrap {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 160px;
}

.rec-nav-sp-more .btn {
	width: 22px;
	height: 22px;
	background: var(--main);
	position: relative;
	display: block;
}

.rec-nav-sp-more .btn::before, .rec-nav-sp-more .btn::after {
	background-color: #fff;
	content: "";
	height: 2px;
	position: absolute;
	width: 12px;
	transition: all .3s;
	top: 48%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	display: block;
	left: 5px;
}

.rec-nav-sp-more .btn::before {
	transform: rotate(0deg);
}

.rec-nav-sp-more .btn::after {
	transform: rotate(90deg);
}

.rec-nav-sp-more .txt.open .btn::after {
	transform: rotate(180deg);
}

.rec-cmn .rec-nav {
	background: #23434A;
	display: flex;
	gap: 20px;
	height: 78px;
	justify-content: flex-end;
}

@media screen and (min-width: 769px) {
	.rec-cmn .rec-nav-fix .rec-nav {
		display: flex;
		justify-content: space-between;
	}
}

.rec-cmn .rec-nav-list {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	position: relative;
	height: 100%;
	margin: 0 0 0 auto;
	padding: 0;
}

.rec-cmn .rec-nav-item {
	position: relative;
	height: 100%;
}

.rec-cmn .rec-nav-item::after {
	background: var(--main);
	bottom: 0;
	content: '';
	display: inline-block;
	height: 5px;
	left: 0;
	margin: auto;
	position: absolute;
	-webkit-transition: all 0.3s;
	transition: all 0.4s;
	width: 0;
}

@media screen and (min-width: 769px) {
	.rec-cmn .rec-nav-item:hover::after {
		width: 100%;
	}
}

.rec-cmn .rec-nav-link {
	align-items: center;
	color: #fff !important;
	display: flex;
	font-size: 1.5rem;
	justify-content: center;
	padding: 0 15px;
	height: 100%;
	letter-spacing: .03em;
	line-height: 1.4;
	text-align: center;
}

.rec-cmn .rec-nav-entry {
	position: relative;
	height: 100%;
	margin: 0 0 0 10px;
}

.rec-cmn .rec-nav-entry a {
	align-items: center;
	color: #fff;
	background: var(--rec-cv);
	display: flex;
	height: 100%;
	line-height: 1 !important;
	text-align: center;
	transition: all 0.1s ease;
	padding: 0 0 3px;
	position: relative;
	justify-content: center;
	width: 125px;
	overflow: hidden;
	flex-direction: column;
}

.rec-cmn .rec-nav-entry a::before {
	position: absolute;
	content: "";
	width: 0;
	height: 100%;
	top: 0;
	left: 0;
	background: var(--rec-cv-ov);
	transition: all 0.3s ease;
}

@media screen and (min-width: 769px) {
	.rec-cmn .rec-nav-entry a:hover::before {
		right: 0;
		width: 100%;
	}
}

.rec-cmn .rec-nav-entry span {
	font-size: 1.6rem;
	font-weight: 600;
	padding: 27px 0 0;
	position: relative;
	z-index: 1;
	letter-spacing: .05em;
}

.rec-cmn .rec-nav-entry span::after {
	content: "";
	background: url(../img/recruit-mail-icon.svg)center/contain no-repeat;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	top: 0;
	width: 30px;
	height: 23px;
}

.rec-cmn .rec-nav-home a {
	display: flex;
	padding: 18px 16px 0 16px;
	flex-direction: column;
	position: relative;
	height: 100%;
	justify-content: center;
}

.rec-cmn .rec-nav-home a::after {
	content: "";
	background: #1D3338;
	height: 78px;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 0;
	width: 1px;
}

.rec-cmn .rec-nav-home span {
	color: #fff !important;
	position: relative;
	line-height: 1.4;
	font-size: 1.1rem;
	text-align: center;
}

.rec-cmn .rec-nav-home span::before {
	content: "";
	background: url("../img/rec-nav-home.svg")center/contain no-repeat;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	top: -22px;
	width: 16px;
	height: 18px;
}

.rec-cmn .rec-nav-acc {
	background: #1D3338;
	position: absolute;
	top: 75px;
	left: 0;
	right: 0;
	transition: all .5s cubic-bezier(0.19, 1, 0.22, 1);
	transform: translateY(-50px);
	opacity: 0;
	visibility: hidden;
	padding: 15px;
	width: fit-content;
	white-space: nowrap;
}

@media screen and (min-width: 769px) {
	[data-recnav="car"]:hover .rec-nav-acc, [data-recnav="int"]:hover .rec-nav-acc {
		visibility: visible;
		transform: translateY(0);
		opacity: 1;
	}
}

.rec-cmn .rec-nav-acc-link {
	align-items: center;
	border-bottom: #3B585F 1px solid;
	color: #fff;
	display: flex;
	height: 50px;
	padding: 0 10px 6px 22px;
	position: relative;
}

@media screen and (min-width: 769px) {
	.rec-cmn .rec-nav-acc-link:hover {
		background: var(--main);
	}
}

.rec-nav-acc li:last-child .rec-nav-acc-link {
	border-bottom: none;
}

.rec-cmn .rec-nav-acc-link::before {
	content: "\f105";
	color: #fff;
	font: 900 1.1rem / 1 var(--webicon);
	margin: 2px 0 0;
	position: absolute;
	left: 5px;
}

@media screen and (max-width: 768px) {
	.rec-cmn .rec-nav-sp-more {
		align-items: center;
		background: #23434A;
		display: flex;
		width: 100%;
		cursor: pointer;
		height: 50px;
	}

	.rec-cmn #rec-nav {
		width: 100%;
		margin: 0 !important;
		position: absolute;
		min-width: auto;
		top: 0;
	}

	.rec-cmn #rec-nav.rec-nav-fix {
		top: 0;
	}

	/*.rec-cmn .is_active ~ #main #rec-nav {
        top: -100px;
    }*/
	.rec-cmn .rec-nav-sp-entry {
		align-items: center;
		background: var(--rec-cv);
		display: flex;
		font-size: 1.6rem;
		font-weight: bold;
		line-height: 1;
		letter-spacing: .05em;
		height: 100%;
		padding: 5px 20px;
		justify-content: center;
	}

	.rec-cmn .rec-nav-sp-entry span {
		color: #fff;
		padding: 0 0 1px 36px;
		position: relative;
		white-space: nowrap;
	}

	.rec-cmn .rec-nav-sp-entry span::after {
		content: "";
		background: url(../img/recruit-mail-icon.svg)center/contain no-repeat;
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		left: 0;
		width: 30px;
		height: 23px;
	}

	.rec-cmn .rec-nav-sp-entry img {
		height: 95%;
	}

	.rec-cmn .rec-nav-sp-more .txt {
		align-items: center;
		color: #fff;
		display: flex;
		position: relative;
		padding: 0 0 3px 15px;
		width: calc(100% - 80px);
		height: 100%;
		font: 700 1.8rem/1 var(--en);
	}

	.rec-cmn .rec-nav-main {
		width: 100%;
	}

	.rec-cmn .rec-nav .rec-nav-list {
		display: block;
		padding: 10px 15px 20px;
		justify-content: flex-start;
		width: 100%;
	}

	.rec-cmn .rec-nav .rec-nav-item {
		flex-grow: 2;
		height: 50px;
	}

	.rec-cmn [data-recnav="car"], .rec-cmn [data-recnav="int"] {
		height: auto !important;
	}

	.rec-cmn .rec-nav-acc {
		background: #1D3338;
		position: static;
		white-space: normal;
		/*width: 100%;*/
		width: auto;
		padding: 5px 15px 0;
		margin: 5px 0 5px 30px;
		transform: unset;
		opacity: 1;
		visibility: inherit;
	}

	.rec-cmn .rec-nav .rec-nav-entry {
		display: none;
	}

	.rec-cmn .rec-nav .rec-nav-link {
		align-items: center;
		display: flex;
		justify-content: flex-start;
		font-size: 1.6rem;
		padding: 9px 15px 12px 30px;
		position: relative;
		height: 100%;
		white-space: nowrap;
		margin: 0;
	}

	.rec-cmn .rec-nav-link::before {
		content: "\f105";
		font: 900 1.6rem/1 var(--webicon);
		position: absolute;
		top: 43%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		left: 12px;
		width: 11px;
		height: 12px;
		z-index: 2;
		color: var(--main);
	}

	.rec-cmn .rec-nav-main .rec-nav-item::after {
		background: none !important;
	}

	.rec-cmn .rec-nav {
		border-radius: 0;
		display: none;
		height: auto;
		position: relative;
		z-index: 16;
		/*background: #0d262f;*/
		background: #23434A;
		width: 100%;
		padding: 0;
	}

	.rec-cmn .rec-nav-home {
		display: none !important;
	}
}

/* ─────────────────────────
   rec-nav-sub アンカーリンク spのみ
───────────────────────── */
@media screen and (min-width: 769px) {
	.rec-cmn .rec-nav-sub-wrap {
		display: none !important;
	}
}

/* ─────────────────────────
   rec-nav-sub
───────────────────────── */
@media screen and (max-width: 768px) {
	.rec-cmn .rec-nav-sub-wrap {
		display: none;
	}

	.rec-cmn .rec-nav-sub {
		align-items: center;
		/*background: rgb(29, 51, 60);*/
		background: #1D3338;
		display: none;
		height: auto;
		padding: 0 0 10px;
		justify-content: center;
	}

	.rec-cmn .rec-nav-sub li {
		height: 100%;
	}

	.rec-cmn .rec-nav-sub a {
		align-items: center;
		display: flex;
		color: #fff;
		font-weight: 500;
		font-size: 1.5rem;
		justify-content: center;
		padding: 0 10px;
		margin: 0 20px;
		height: 100%;
	}

	.rec-cmn .rec-nav-sub a::before {
		content: "\f107";
		font: 900 1.5rem / 1 var(--webicon);
		margin: 5px 7px 0 0;
		color: #fff;
		transition: .5s;
	}

	.rec-cmn .rec-nav-sub li {
		margin: 4px 0 5px;
	}

	.rec-cmn .rec-nav-sub li:first-child {
		margin-top: 0;
	}

	.rec-cmn .rec-nav-sub a {
		border-bottom: 1px solid rgb(42, 63, 70);
		justify-content: flex-start;
		padding: 12px 0 18px;
		height: 50px;
	}

	.rec-cmn .rec-nav-sub li:last-child a {
		border-bottom: none;
	}

	/*サブナビゲーションがある時*/
	.rec-cmn.rec-subnav .rec-nav .rec-nav-list {
		display: flex;
		overflow-x: scroll;
		padding: 10px;
		gap: 5px;
	}

	.rec-cmn.rec-subnav .rec-nav-acc {
		display: none;
	}

	.rec-cmn.rec-subnav .rec-nav .rec-nav-link {
		font-size: 1.5rem;
		padding: 9px 10px 12px 25px;
	}
}

/* ─────────────────────────
   イントロ
───────────────────────── */
.intro-area {
	position: relative;
	padding: 130px 0 0;
}

.intro-area::before {
	content: "";
	background: url(../img/recruit-intro-texture.png) no-repeat left top;
	aspect-ratio: 985 / 470;
	display: inline-block;
	width: 985px;
	height: auto;
	position: absolute;
	left: 0;
	top: -120px;
	z-index: -1;
}

.intro-area .contents-catch {
	font-size: 3rem;
	font-weight: 800;
	line-height: 1.6;
	margin: 0 0 30px;
}

.intro-area .txt {}

@media screen and (max-width: 768px) {
	.intro-area {
		padding: 0 20px;
	}

	.intro-area::before {
		width: 600px;
		top: -30px;
	}

	.intro-area .contents-catch {
		font-size: 2.4rem;
		margin: 0 0 20px;
	}

	.intro-area .txt {}
}

/* ─────────────────────────
   共通ボタン
───────────────────────── */
.rec-btn {
	margin: 40px 0 0;
}

.rec-btn a {
	align-items: center;
	background: #fff;
	border: 1px solid var(--main);
	display: flex;
	width: 280px;
	padding: 20px 45px;
	position: relative;
	transition: .3s;
	overflow: hidden;
	height: 70px;
	justify-content: center;
}

@media screen and (min-width: 769px) {
	.rec-btn a::before {
		content: "";
		width: 0;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		background: var(--main);
		transition: width cubic-bezier(0.23, 1, 0.32, 1) .7s;
		z-index: 1;
	}
}

.rec-btn a::after {
	content: "\f105";
	color: #fff;
	font: 900 1.1rem/1 var(--webicon);
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 15px;
	z-index: 2;
	width: 20px;
	height: 20px;
	background: var(--main);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .6s;
}

.rec-btn span {
	color: var(--main);
	font-size: 1.7rem;
	font-weight: 600;
	position: relative;
	transition: .3s;
	letter-spacing: .05em;
	z-index: 2;
}

@media screen and (min-width: 769px) {
	.rec-btn a:hover:before {
		background: var(--main);
		left: 0;
		width: 100%;
	}

	.rec-btn a:hover::after {
		color: var(--main);
		background: #fff;
	}

	.rec-btn a:hover span {
		color: #fff;
	}
}

@media screen and (max-width: 768px) {
	.rec-btn {
		margin: 25px 0 0;
	}

	.rec-btn a {
		padding: 20px 15px;
		min-width: unset;
		height: 60px;
		width: 100%;
	}

	.rec-btn span {
		font-size: 1.6rem;
		font-weight: .03em;
	}
}

/* ─────────────────────────
   社員インタビュー一覧
───────────────────────── */
.rec-interview-list {
	display: flex;
	gap: 50px;
}

.rec-interview-list .rec-interview-item {
	width: calc((100% - 100px) / 3);
}

.rec-interview-list .rec-interview-item a {
	display: block;
}

.rec-interview-list .rec-interview-img {
	width: 100%;
	height: 350px;
	overflow: hidden;
	position: relative;
}

.rec-interview-list .rec-interview-img img {
	object-position: center top;
	transition: transform .7s cubic-bezier(.33, 1, .68, 1);
	width: 100%;
}

.rec-interview-list .rec-interview-body {
	margin: 20px 0 0;
}

.rec-interview-list .rec-interview-caption {
	font-size: 2rem;
	font-weight: bold;
	letter-spacing: .03em;
	line-height: 1.6;
	color: var(--cmnblack);
	transition: .3s;
}

.rec-interview-list .rec-interview-name {
	color: var(--sub);
	font-size: 1.4rem;
	letter-spacing: .02em;
	margin: 8px 0 0;
	text-align: right;
	font-weight: 500;
}

@media screen and (min-width: 769px) {
	.rec-interview-list .rec-interview-item a:hover .rec-interview-img img {
		transform: scale(1.06);
	}

	.rec-interview-list .rec-interview-item a:hover .rec-interview-caption {
		color: var(--main);
	}
}

@media screen and (max-width: 768px) {
	.rec-interview-list {
		display: block;
	}

	.rec-interview-list .rec-interview-item {
		width: 100%;
		margin: 0 0 20px;
	}

	.rec-interview-list .rec-interview-item a {
		position: relative;
		display: flex;
		gap: 20px;
	}

	.rec-interview-list .rec-interview-item a::after {
		content: "\f105";
		color: #fff;
		font: 900 1.1rem/1 var(--webicon);
		position: absolute;
		bottom: 0;
		right: 0;
		width: 16px;
		height: 16px;
		background: var(--main);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.rec-interview-list .rec-interview-img {
		width: 120px;
		height: 120px;
	}

	.rec-interview-list .rec-interview-img img {
		height: 100%;
	}

	.rec-interview-list .rec-interview-body {
		margin: 0;
		width: calc(100% - 140px);
	}

	.rec-interview-list .rec-interview-caption {
		font-size: 1.7rem;
		line-height: 1.5;
	}

	.rec-interview-list .rec-interview-name {
		font-size: 1.2rem;
		margin: 5px 0 0;
		text-align: left;
	}
}

/* ─────────────────────────
   ページナビ
───────────────────────── */
.lead-outline-list {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 30px;
	/*flex-direction: column;*/
}

.lead-outline-list li {
	min-width: 240px;
}

.lead-outline-list a {
	align-items: center;
	border-bottom: 1px solid var(--sub);
	color: var(--cmnblack);
	display: flex;
	font-size: 1.8rem;
	font-weight: 600;
	padding: 13px 10px 13px 30px;
	position: relative;
	height: 50px;
	letter-spacing: 0;
	transition: color .3s;
	width: 100%;
}

.lead-outline-list a::before {
	content: "\f063";
	font: 900 1.4rem/1 var(--webicon);
	color: var(--main);
	position: absolute;
	left: 3px;
	top: 50%;
	transform: translateY(-50%);
	transition: top .3s;
}

@media screen and (min-width: 769px) {
	.lead-outline-list a:hover {
		color: var(--main);
		border-bottom: 1px solid var(--main);
	}

	.lead-outline-list a:hover::before {
		top: 60%;
	}
}

@media screen and (max-width: 768px) {
	.lead-outline-list {
		/*flex-direction: row;*/
		flex-wrap: wrap;
		gap: 5px 15px;
		margin: 20px 0 0;
	}

	.lead-outline-list li {
		min-width: inherit;
		width: calc((100% - 15px) / 2);
	}

	.lead-outline-list a {
		padding: 10px 0 10px 24px;
		font-size: 1.6rem;
		line-height: 1.3;
		height: auto;
		border-bottom: 1px solid var(--sub);
	}
}

/* ─────────────────────────
   下層：最下部導線
───────────────────────── */
.rec-au-foot-area {
	padding: 90px 0 0;
}

.rec-au-foot-list {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.rec-au-foot-item {
	width: calc((100% - 60px) / 3);
}

.rec-au-foot-item a {
	display: block;
	color: var(--cmnblack);
	border: 1px solid var(--main);
	transition: border-color .3s;
	padding: 20px;
	position: relative;
}

.rec-au-foot-item a::after {
	content: "\f105";
	font: 900 1.4rem/1 var(--webicon);
	position: absolute;
	bottom: 25px;
	right: 20px;
	z-index: 2;
	width: 20px;
	height: 20px;
	color: #fff;
	background: var(--main);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .3s;
}

@media screen and (min-width: 769px) {
	.rec-au-foot-item a:hover {
		border-color: var(--main);
	}

	.rec-au-foot-item a:hover .rec-au-foot-img img {
		transform: scale(1.06);
	}

	.rec-au-foot-item a:hover .rec-au-foot-ja {
		color: var(--main);
	}
}

.rec-au-foot-img {
	width: 100%;
	height: 200px;
	overflow: hidden;
}

.rec-au-foot-img img {
	transition: transform .7s cubic-bezier(.33, 1, .68, 1);
}

.rec-au-foot-body {
	padding: 15px 0 0;
}

.rec-au-foot-ja {
	font-size: 2.2rem;
	font-weight: bold;
	letter-spacing: .03em;
	line-height: 1.5;
	transition: .3s;
}

@media screen and (max-width: 768px) {
	.rec-au-foot-area {
		padding: 50px 20px 0;
	}

	.rec-au-foot-list {
		gap: 15px;
	}

	.rec-au-foot-item {
		width: 100%;
	}

	.rec-au-foot-item a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
	}

	.rec-au-foot-item a::after {
		/*
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        */
		bottom: 5px;
		right: 5px;
		width: 20px;
		height: 20px;
		font-size: 1.1rem;
	}

	.rec-au-foot-img {
		width: 130px;
		height: 80px;
	}

	.rec-au-foot-body {
		padding: 0;
		width: calc(100% - 145px);
	}

	.rec-au-foot-ja {
		font-size: 1.8rem;
	}
}

/* ─────────────────────────
   エントリー CTA
───────────────────────── */
.rec-entry-area {
	background: #63c4d9;
	margin: 110px 0 0;
	position: relative;
	width: 100%;
	height: 370px;
	color: #fff;
	display: flex;
	align-items: center;
}

.cmn-rec-slide {
	position: absolute;
	left: 0;
	top: 0;
	opacity: .15;
	width: 100%;
	height: 100%;
}

.rec-entry-area .inner {
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	gap: 0 100px;
	position: relative;
	z-index: 2;
}

.rec-entry-area .txt-area {}

.rec-entry-area .en {
	font: italic 700 5rem/1 var(--en);
	letter-spacing: 0;
	margin: 0 0 30px;
}

.rec-entry-area .txt-img {}

.rec-entry-area .rec-entry-btn {
	position: relative;
}

.rec-entry-area .rec-entry-btn a {
	align-items: center;
	color: #fff;
	background: var(--rec-cv);
	display: flex;
	line-height: 1 !important;
	text-align: center;
	transition: all 0.1s ease;
	position: relative;
	justify-content: center;
	width: 350px;
	height: 110px;
	overflow: hidden;
}

.rec-entry-area .rec-entry-btn a::before {
	position: absolute;
	content: "";
	width: 0;
	height: 100%;
	top: 0;
	left: 0;
	background: var(--rec-cv-ov);
	transition: all 0.3s ease;
}

@media screen and (min-width: 769px) {
	.rec-entry-area .rec-entry-btn a:hover::before {
		right: 0;
		width: 100%;
	}
}

.rec-entry-area .rec-entry-btn span {
	font-size: 2.5rem;
	font-weight: 600;
	position: relative;
	z-index: 1;
	letter-spacing: .05em;
	display: flex;
	gap: 10px;
}

.rec-entry-area .rec-entry-btn span::before {
	content: "";
	background: url("../img/recruit-mail-icon.svg") no-repeat center / contain;
	aspect-ratio: 30 / 23;
	display: inline-block;
	width: 38px;
	height: auto;
}

@media screen and (max-width: 768px) {
	.rec-entry-area {
		margin: 60px 0 0;
		padding: 40px 20px 50px;
		height: 100%;
		display: block;
	}

	.rec-entry-area .inner {
		display: block;
	}

	.rec-entry-area .txt-area {
		margin: 0 0 30px;
	}

	.rec-entry-area .en {
		margin: 0 0 25px;
		font-size: 3.6rem;
	}

	.rec-entry-area .txt-img {
		width: 100%;
		max-width: 480px;
		object-fit: contain;
	}

	.rec-entry-area .rec-entry-btn {}

	.rec-entry-area .rec-entry-btn a {
		width: 100%;
		height: auto;
		padding: 30px 10px;
	}

	.rec-entry-area .rec-entry-btn span {
		font-size: 2.2rem;
		gap: 8px;
	}

	.rec-entry-area .rec-entry-btn span::before {
		width: 30px;
	}
}

/* -----------------------------------------------------------
    SP用：もっと見るコンテンツ（テキスト隠し）
-------------------------------------------------------------- */
.grad-btn {
	display: none;
}

.grad-trigger {
	display: none; /*チェックボックスは常に非表示*/
}

@media screen and (max-width: 768px) {
	.grad-btn {
		display: block;
		text-align: center;
		width: 140px;
		border-radius: 50px;
		margin: auto;
		padding: 12px 10px;
		cursor: pointer;
		position: absolute;
		right: 0;
		bottom: -10px;
		left: 0;
		z-index: 3;
		color: var(--sub);
		background: #fff;
		border: 1px solid var(--sub);
		font-family: var(--en);
		font-size: 1.4rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
	}

	.grad-btn::after {
		content: "\f107";
		color: var(--sub);
		font: 900 1.2rem/1 var(--webicon);
		display: inline-block;
		margin: 0 0 0 5px;
		/*position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		right: 15px;*/
		transition: .3s;
	}

	.grad-trigger:checked + .grad-btn {
		display: none; /*チェックされていたら、grad-btnを非表示にする*/
	}

	.grad-trigger:checked ~ .more_contents {
		height: auto; /*チェックされていたら、高さを戻す*/
	}

	.grad-trigger:checked ~ .more_contents::before {
		display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
	}

	.more_contents_block {
		position: relative;
	}

	.more_contents {
		position: relative;
		overflow: hidden;
		height: 70px; /*隠した状態の高さ*/
	}

	.more_contents::before {
		content: "";
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 90px; /*グラデーションで隠す高さ*/
		z-index: 2;
		background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
		background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
	}

	/*more無しタイプ*/
	.more_contents.no-btn {
		height: auto;
	}

	.more_contents.no-btn::before {
		display: none;
	}
}