@charset "UTF-8";
/* =====================================================================
   グローバル人材採用 画面別スタイル(/recruit/global/css/recruit-global.css)
   トップ(募集内容・Ｑ＆Ａ)・エントリーフォーム・確認画面・サンクス画面
   共通部分(レイアウト・見出し・ボタン・フォーム等)はコーポレートサイトの /common/css/site*.css を使い、
   このファイルはその後に読み込んで、この機能だけの部品を追加する。
   文字サイズ切替に連動するよう、文字・余白は rem(.625rem = 10px(中))で指定する。
   ===================================================================== */

/* ---------------------------------------------------------------------
   メインビジュアル(背景は <picture> で WebP / JPEG を出し分ける)
   --------------------------------------------------------------------- */
.main_visual--global {
	overflow: hidden;
}

.main_visual__bg,
.main_visual__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.main_visual__img {
	object-fit: cover;
	object-position: center center;
}

/* ---------------------------------------------------------------------
   本文
   --------------------------------------------------------------------- */
.section {
	padding-top: 2.5rem;
}

/* 本文の段落(既存サイトの採用情報の本文と同じ行間) */
.text-body-base {
	margin-bottom: .9375rem;
	line-height: 2em;
}

.text-prewrap {
	word-break: break-word;
}

/* 別タブ・戻るリンク */
.link-ext::after {
	content: "";
	display: inline-block;
	width: .8em;
	height: .8em;
	margin-left: .3em;
	border: 1px solid currentColor;
	box-shadow: 2px -2px 0 -1px #fff, 3px -3px 0 -1px currentColor;
	vertical-align: -.05em;
}

.link-back::before {
	content: "＜ ";
}

/* ページ内リンク(募集内容・エントリーへ) */
.anchor-link-list {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.anchor-link-list a {
	display: block;
	min-width: 10rem;
	padding: .5rem 1.25rem;
	border: 1px solid var(--site-navy);
	border-radius: 2px;
	background: #fff;
	color: var(--site-navy);
	text-align: center;
	text-decoration: none;
	transition: background-color .3s, color .3s;
}

.anchor-link-list a::after {
	content: " ▼";
	font-size: .625rem;
}

.anchor-link-list a:hover,
.anchor-link-list a:focus {
	background: var(--site-navy);
	color: #fff;
}

@media (max-width: 575.98px) {
	.anchor-link-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: .375rem;
	}

	.anchor-link-list a {
		min-width: 0;
		padding: .5rem .25rem;
		font-size: .8125rem;
	}
}

/* 職場イメージ(サムネイル列)。本文を圧迫しないよう高さを固定し、object-fit で切り抜いて表示する */
.top-gallery {
	margin-top: .9375rem;
	margin-bottom: 0;
	padding-left: 0;
	list-style: none;
}

.top-gallery__item {
	display: block;
	overflow: hidden;
	height: 150px;
	border-radius: 4px;
	background: #f2f2f2;
}

.top-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767.98px) {
	.top-gallery__item {
		height: 110px;
	}
}

/* ---------------------------------------------------------------------
   募集内容
   --------------------------------------------------------------------- */
/* 募集要項(コンパクトな2列グリッド。短い項目 .is-half は横に2つ並べる) */
.job-table {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0 0 .5rem;
	border-top: 1px solid var(--site-border-light);
}

.job-table__row {
	display: grid;
	grid-template-columns: 6.5em 1fr;
	border-bottom: 1px solid var(--site-border-light);
}

.job-table dt,
.job-table dd {
	margin: 0;
	padding: .5rem .625rem;
	line-height: 1.6;
}

.job-table dt {
	border-left: 3px solid var(--site-border);
	background: var(--site-bg-light);
	color: var(--site-text-dark);
	font-weight: 600;
}

@media (min-width: 768px) {
	.job-table {
		grid-template-columns: 1fr 1fr;
	}

	.job-table__row {
		grid-column: 1 / -1;
		grid-template-columns: 10em 1fr;
	}

	.job-table__row.is-half {
		grid-column: auto;
	}
}

@media (max-width: 767.98px) {
	.job-table dt,
	.job-table dd {
		padding: .4375rem .5rem;
		font-size: .8125rem;
	}
}

@media (min-width: 992px) {
	.job-table__row {
		grid-template-columns: 11em 1fr;
	}
}

/* 勤務先の宿泊施設(タグ状に並べる) */
.facility-list {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	margin: 0 0 .375rem;
	padding: 0;
	list-style: none;
}

.facility-list li {
	padding: .125rem .625rem;
	border: 1px solid var(--site-border);
	border-radius: 2px;
	background: #fff;
	font-size: .8125rem;
}

/* 制度・サポート(見出し+説明の2列) */
.support-list {
	margin: 0;
}

.support-list__item {
	padding: .375rem 0;
	border-bottom: 1px dotted var(--site-border-light);
}

.support-list dt {
	color: var(--site-text-dark);
	font-weight: 600;
}

.support-list dd {
	margin: .125rem 0 0;
	font-size: .8125rem;
	line-height: 1.6;
}

@media (min-width: 576px) {
	.support-list__item {
		display: grid;
		grid-template-columns: 13em 1fr;
		gap: .625rem;
	}

	.support-list dd {
		margin: 0;
	}
}

.section .heading-sub {
	margin: 1.5rem 0 .625rem;
}

/* 福利厚生 */
.benefit-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.benefit-list li {
	position: relative;
	padding: .45em .5em .45em 1.6em;
	border-bottom: 1px dotted var(--site-border-light);
	line-height: 1.6;
}

.benefit-list li::before {
	content: "";
	position: absolute;
	left: .4em;
	top: .95em;
	width: 6px;
	height: 6px;
	background: var(--site-navy);
}

/* ---------------------------------------------------------------------
   Ｑ＆Ａ(Bootstrap のアコーディオン。寸法は Bootstrap のまま、色だけサイトの紺にする)
   --------------------------------------------------------------------- */
.qa-list {
	--bs-accordion-color: var(--site-text-dark);
	--bs-accordion-btn-color: var(--site-text-dark);
	--bs-accordion-active-color: var(--site-navy);
	--bs-accordion-active-bg: #e6ebf5;
	--bs-accordion-btn-focus-border-color: var(--site-navy);
	--bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--site-navy-rgb), .25);
	/* 開いている質問の矢印(Bootstrap 標準の青を紺にしたもの) */
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23031f54'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* 質問が2行になっても「Q1.」・矢印は1行目にそろえる */
.qa-list .accordion-button {
	align-items: flex-start;
	font-weight: 600;
	line-height: 1.5;
}

.qa-list .accordion-body {
	line-height: 1.8;
}

/* 「Q1.」「A.」の印 */
.qa-list__mark {
	flex-shrink: 0;
	min-width: 2.5em;
	color: var(--site-navy);
	font-weight: 700;
}

/* エントリー案内の提出書類 */
.entry-docs {
	margin: 0 0 .625rem;
	padding-left: 1.4em;
	color: var(--site-navy);
	font-weight: 600;
	line-height: 1.9;
}

/* ---------------------------------------------------------------------
   ボタン(大。寸法は Bootstrap の .btn-lg)。最小幅をそろえ、スマートフォンでは横幅いっぱいにする
   --------------------------------------------------------------------- */
.btn-lg {
	min-width: 17.5rem;
	font-weight: 600;
}

@media (max-width: 575.98px) {
	.btn-lg {
		width: 100%;
		min-width: 0;
	}
}

/* ---------------------------------------------------------------------
   エントリー手順
   --------------------------------------------------------------------- */
.entry-steps {
	display: flex;
	justify-content: center;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}

.entry-steps__item {
	position: relative;
	flex: 1 1 0;
	max-width: 13.75rem;
	color: #999;
	font-size: .875rem;
	font-weight: 600;
	text-align: center;
}

.entry-steps__item + .entry-steps__item::before {
	content: "";
	position: absolute;
	top: 1.0625rem;
	right: 50%;
	width: 100%;
	height: 2px;
	background: var(--site-border);
}

.entry-steps__num {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin: 0 auto .375rem;
	border-radius: 50%;
	background: var(--site-border);
	color: #fff;
	font-family: var(--site-font-en);
	font-size: 1rem;
}

.entry-steps__text {
	display: block;
}

.entry-steps__item.is-current,
.entry-steps__item.is-done {
	color: var(--site-navy);
}

.entry-steps__item.is-current .entry-steps__num,
.entry-steps__item.is-done .entry-steps__num,
.entry-steps__item.is-done + .entry-steps__item::before,
.entry-steps__item.is-current::before {
	background: var(--site-navy);
}

@media (max-width: 767.98px) {
	.entry-steps__item {
		font-size: .75rem;
	}

	.entry-steps__num {
		width: 1.875rem;
		height: 1.875rem;
		font-size: .875rem;
	}

	.entry-steps__item + .entry-steps__item::before {
		top: .875rem;
	}
}

/* ---------------------------------------------------------------------
   エントリーフォーム
   --------------------------------------------------------------------- */
.form-section {
	margin: 0 0 2rem;
}

/* セクション見出し(既存サイトの heading-B) */
.form-section__title {
	float: none;
	width: 100%;
	margin: 1.25rem 0 0;
	padding: .5em;
	background: var(--site-navy);
	color: #fff;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.3;
}

/* legend 内の h2(見出しの構造を伝えるため。見た目は legend のまま) */
.form-section__heading {
	margin: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* 入力欄の行(横並び・列幅は Bootstrap の row g-0 と col-md-4 col-lg-3 / col-md-8 col-lg-9。テンプレートで指定)。
   ここでは罫線・背景・余白だけを指定する。必須・任意のバッジは Bootstrap の badge */
.form-row-site {
	border-bottom: 1px solid var(--site-border-light);
}

.form-row-site__label {
	padding: 1rem;
	border-left: 3px solid var(--site-border);
	background: var(--site-bg-light);
	color: var(--site-text-dark);
	font-weight: 600;
}

.form-row-site__label label {
	margin: 0;
}

.form-row-site__body {
	padding: .875rem 1rem;
}

@media (max-width: 767.98px) {
	.form-row-site__label {
		padding: .625rem .75rem;
	}

	.form-row-site__body {
		padding: .625rem .75rem 1rem;
	}
}

/* 選択した試験に関係しない設問は非表示(entry.js。.row の display: flex より優先する) */
.form-row-site[hidden] {
	display: none !important;
}

/* 応募フォームの説明 */
.entry-lead {
	margin-bottom: 1.25rem;
	padding: .875rem 1.125rem;
	border-left: 3px solid var(--site-navy);
	background: var(--site-bg-light);
	line-height: 1.8;
}

.input-w-md {
	max-width: 22.5rem;
}

.form-control::placeholder {
	color: #aaa;
}

.text-uppercase::placeholder {
	text-transform: none;
}

/* ラジオ・チェックボックスは枠を濃くして視認性を上げる */
.form-check-input {
	border: 2px solid #8a8a8a;
}

.form-check-input:checked {
	background-color: var(--site-navy);
	border-color: var(--site-navy);
}

.has-error .form-check-label {
	color: var(--site-required);
}

/* アップロード済みファイル */
.uploaded-file {
	margin-bottom: .625rem;
	padding: .625rem .875rem;
	border: 1px dashed var(--site-blue-muted);
	border-radius: 2px;
	background: #f0f5fc;
}

.uploaded-file__badge {
	display: inline-block;
	margin-right: .5rem;
	padding: 0 .5rem;
	border-radius: 2px;
	background: var(--site-blue-muted);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
}

.uploaded-file__name {
	word-break: break-all;
}

.file-preview {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: .625rem;
}

.file-preview[hidden],
.file-preview__img[hidden] {
	display: none;
}

.file-preview__img {
	max-width: 160px;
	max-height: 120px;
	border: 1px solid var(--site-border-light);
	background: #fff;
	object-fit: contain;
}

.file-preview__name {
	font-size: .8125rem;
	word-break: break-all;
}

/* 個人情報の取扱いの文章(枠・背景・余白は Bootstrap の border bg-body-tertiary p-3 small。テンプレートで指定) */
.privacy-box {
	line-height: 1.8;
}

/* 同意チェック(.privacy-agree)・同意前の補足(.submit-hint)・非活性のボタンは site-components.css(お問い合わせと共通)。
   ボタンの並びは Bootstrap の d-flex gap-3(テンプレートで指定) */

/* ---------------------------------------------------------------------
   確認画面
   --------------------------------------------------------------------- */
.confirm-section {
	margin-bottom: 1.75rem;
}

.table-info {
	width: 100%;
	border-collapse: collapse;
}

.table-info th,
.table-info td {
	padding: .875rem 1rem;
	border-bottom: 1px solid var(--site-border-light);
	text-align: left;
	vertical-align: top;
}

.table-info th {
	width: 30%;
	border-left: 3px solid var(--site-border);
	background: var(--site-bg-light);
	color: var(--site-text-dark);
	font-weight: 600;
}

@media (max-width: 767.98px) {
	.table-info,
	.table-info tbody,
	.table-info tr,
	.table-info th,
	.table-info td {
		display: block;
		width: 100%;
	}

	.table-info th {
		padding: .5rem .75rem;
	}

	.table-info td {
		padding: .625rem .75rem 1rem;
	}
}

.confirm-thumb img {
	max-width: min(220px, 100%);
	max-height: 160px;
	border: 1px solid var(--site-border-light);
	background: #fff;
	object-fit: contain;
}

.confirm-file-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 4.25rem;
	border: 2px solid var(--site-required);
	border-radius: 2px;
	color: var(--site-required);
	font-weight: 800;
}

/* 確認画面の複数選択の表示 */
.confirm-list {
	margin: 0;
	padding-left: 1.2em;
}

/* 「送信する」「戻る」の並び(スマートフォンは「送信する」を上)は Bootstrap の flex-column-reverse flex-sm-row(テンプレートで指定) */

/* ---------------------------------------------------------------------
   サンクス画面
   --------------------------------------------------------------------- */
.thanks {
	max-width: 50rem;
	margin: 0 auto;
}

.thanks__heading {
	margin: 1.5rem 0 1.25rem;
	color: var(--site-navy);
	font-size: 1.375rem;
	font-weight: 600;
	text-align: center;
}

.thanks__text {
	margin-bottom: 1.5rem;
	line-height: 2em;
}

.thanks__entry-no {
	max-width: 26.25rem;
	margin: 0 auto 1.5rem;
	padding: 1.25rem;
	border: 2px solid var(--site-navy);
	border-radius: 2px;
	text-align: center;
}

.thanks__entry-no-label {
	margin: 0;
	color: var(--site-navy);
	font-weight: 600;
}

.thanks__entry-no-value {
	margin: .25rem 0 .5rem;
	color: var(--site-navy);
	font-family: var(--site-font-en);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .06em;
}

.thanks__notice {
	padding: 1rem 1.125rem;
	background: var(--site-bg-light);
	font-size: .8125rem;
	line-height: 1.8;
}

@media (max-width: 767.98px) {
	.thanks__heading {
		font-size: 1.125rem;
	}

	.thanks__entry-no-value {
		font-size: 1.25rem;
	}
}