@charset "UTF-8";
/* =====================================================================
   コーポレートサイト 部品(/common/css/site-components.css)
   見出し・ボタン・注釈・会社情報・カテゴリトップのリンクカード・フォームの部品(同意チェック・reCAPTCHA の注記)。
   複数の画面(グローバル人材採用を含む)で使う部品を置く。画面固有のものは page/*.css。
   ===================================================================== */

/* ---------------------------------------------------------------------
   見出し(既存サイトの heading-A 〜 heading-F)
     .heading-page    … ページタイトル(下線付き。heading-A)
     .heading-section … セクション見出し(紺の帯。heading-B)
     .heading-ruled   … 上下罫線の見出し(heading-C)
     .heading-sub     … 小見出し(左罫線。heading-D)
     .heading-dotted  … 点線の下線の小見出し(heading-F)
   --------------------------------------------------------------------- */
.heading-page {
	margin: 3vw 0;
	padding-bottom: .25em;
	border-bottom: 2px solid var(--site-navy);
	font-family: "futura-pt", var(--site-font-ja);
	font-size: 5.5vw;
	font-weight: 400;
	text-shadow: 0 3px 0 rgba(0, 0, 0, .1);
}

/* 中国語は中国語のフォント(--site-font。html:lang(zh)) */
html:lang(zh) .heading-page {
	font-family: "futura-pt", var(--site-font);
}

@media (min-width: 768px) {
	.heading-page {
		font-size: 1.75rem;
	}
}

.heading-section {
	padding: .5em;
	background: var(--site-navy);
	color: #fff;
	font-size: 1.25rem;
}

.heading-ruled {
	padding: 1em .5em;
	border-top: 1px solid var(--site-border);
	border-bottom: 1px solid var(--site-border);
	font-size: 1.125rem;
}

.heading-sub {
	margin: 1em 0;
	padding-left: .5em;
	border-left: 3px solid #a2b2c3;
	font-size: 1.125rem;
}

.heading-dotted {
	padding-bottom: .5em;
	border-bottom: 1px dotted var(--site-border);
	font-size: 1.125rem;
}

/* ---------------------------------------------------------------------
   ボタン(既存サイトの btn-colorA / btn-colorB / btn-colorC)
     .btn-site-primary … 紺の塗り(btn-colorA)
     .btn-site-outline … 白地に紺の枠(btn-colorB)
   寸法は Bootstrap の .btn・.btn-lg・.btn-sm のまま。色だけ Bootstrap のボタンの CSS 変数で指定する。
   --------------------------------------------------------------------- */
.btn {
	--bs-btn-border-radius: 2px;
}

.btn-site-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--site-navy);
	--bs-btn-border-color: var(--site-navy);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--site-blue);
	--bs-btn-hover-border-color: var(--site-blue);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--site-navy);
	--bs-btn-active-border-color: var(--site-navy);
	/* 非活性(同意チェック前の送信ボタン等)はグレー */
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #9aa3b5;
	--bs-btn-disabled-border-color: #9aa3b5;
	--bs-btn-disabled-opacity: 1;
	--bs-btn-focus-shadow-rgb: var(--site-navy-rgb);
}

.btn-site-outline {
	--bs-btn-color: var(--site-navy);
	--bs-btn-bg: #fff;
	--bs-btn-border-color: var(--site-navy);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--site-navy);
	--bs-btn-hover-border-color: var(--site-navy);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--site-navy);
	--bs-btn-active-border-color: var(--site-navy);
	--bs-btn-focus-shadow-rgb: var(--site-navy-rgb);
}

/* 同意前の送信ボタン(aria-disabled)。Bootstrap の :disabled と同じ見た目にし、押せないことを示す */
.btn-site-primary:disabled,
.btn-site-primary[aria-disabled="true"] {
	cursor: not-allowed;
	pointer-events: auto;
}

.btn-wrapper {
	margin: 0;
	padding: 1em 0 2em;
	text-align: center;
}

/* ---------------------------------------------------------------------
   注釈・会社情報(住所・連絡先)
   --------------------------------------------------------------------- */
.notes {
	margin: .3em 0 0 1em;
	font-size: .75rem;
	text-indent: -1em;
}

.notes::before {
	content: "※";
}

.company-address-box {
	padding: 1em;
	border: 1px solid var(--site-border-light);
	font-size: 1rem;
	font-style: normal;
}

.company-name {
	font-weight: 700;
}

/* 横並びは Bootstrap の d-flex flex-wrap(テンプレートで指定)。項目名の幅は --label-width(英語は長いため広げる) */
.company-info {
	--label-width: 5.5em;
}

html:lang(en) .company-info {
	--label-width: 10em;
}

.company-info dt {
	position: relative;
	width: var(--label-width);
	font-weight: 400;
}

.company-info dt::after {
	content: "：";
	position: absolute;
	right: 0;
}

.company-info dd {
	width: calc(100% - var(--label-width));
	padding-left: .5em;
}

/* ---------------------------------------------------------------------
   カテゴリトップのリンクカード(企業情報・グループ紹介)
   --------------------------------------------------------------------- */
.index-card {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 30vh;
	border: 1px solid var(--site-navy);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	text-decoration: none;
}

.index-card:hover,
.index-card:focus {
	color: #fff;
}

.index-card-linktxt {
	display: block;
	width: 100%;
	padding: 1em;
	background: var(--site-navy);
	font-size: .875rem;
	line-height: 1.2;
	text-align: center;
	opacity: .8;
}

.index-card--corporate-outline { background-image: url("/corporate/img/index-card-bg-corporate_01.webp"); }
.index-card--corporate-message { background-image: url("/corporate/img/index-card-bg-corporate_02.webp"); }
.index-card--corporate-organization { background-image: url("/corporate/img/index-card-bg-corporate_03.webp"); }
.index-card--group-companies { background-image: url("/group/img/index-card-bg-group_01.webp"); }
.index-card--group-sites { background-image: url("/group/img/index-card-bg-group_02.webp"); }

@media (min-width: 768px) {
	/* md 以上は正方形(列は Bootstrap の row-cols-md-2 / 3。テンプレートで指定) */
	.index-card {
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.index-card-linktxt {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 50px;
		padding: 0 .5em;
		transition: height .3s ease-in-out;
	}

	.index-card:hover .index-card-linktxt,
	.index-card:focus .index-card-linktxt {
		height: 100%;
	}
}

/* ---------------------------------------------------------------------
   個人情報の取り扱いへの同意チェック(お問い合わせ・グローバル人材採用で共通)
   外枠なし。チェックボックス自体の枠を太くして視認性を確保する。
   --------------------------------------------------------------------- */
.privacy-agree {
	padding: .5rem 0 0;
	text-align: center;
}

.privacy-agree__box {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	max-width: 100%;
	margin: 0;
	padding: .5rem 0;
	text-align: left;
}

.has-error .privacy-agree__check.form-check-input {
	border-color: var(--site-required);
}

.privacy-agree__check.form-check-input {
	flex-shrink: 0;
	float: none;
	width: 1.6em;
	height: 1.6em;
	margin: 0;
	border: 2px solid var(--site-navy);
	border-radius: 3px;
	background-color: #fff;
	cursor: pointer;
	/* ボックス全体に広げたラベルの当たり判定より前面に置く */
	position: relative;
	z-index: 1;
}

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

.privacy-agree__box .form-check-label {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	color: var(--site-text-dark);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

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

/* ラベルの当たり判定をボックス全体に広げる */
.privacy-agree__box .form-check-label::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (max-width: 575.98px) {
	.privacy-agree__box {
		display: flex;
	}

	.privacy-agree__box .form-check-label {
		font-size: .9375rem;
	}
}

/* 同意前の送信ボタンの補足(同意するまで表示) */
.submit-hint {
	margin: .625rem 0 0;
	color: var(--site-text);
	font-size: .75rem;
	text-align: center;
}

.submit-hint[hidden] {
	display: none;
}

/* reCAPTCHA の注記(送信ボタンの下。グローバル人材採用のリリース時と同じ色。#999 では薄く読みにくかった) */
.recaptcha-notice {
	margin-top: .75rem;
	color: var(--site-text);
	font-size: .6875rem;
	text-align: center;
}

/* reCAPTCHA のバッジは非表示にし、上記の文言で代替する(Google の規約で認められている方法) */
.grecaptcha-badge {
	visibility: hidden;
}