/*
 * 下層ページ (第二弾) 用 CSS。common.css の後に読み込む。
 *   サービス一覧 (template-service.php) / 企業情報 (template-value.php) / お問い合わせ (template-contact.php)
 *   ポリシー系 (template-policy.php)
 *
 * Figma: andfactoryHPデザイン_2026
 *   サービス一覧 4603-42099 / 企業情報 4603-42864 / お問い合わせ 5263-74684 / ポリシー系 5466-20840
 *
 * Figma の変数は PC / SP の 2 モードを持つ (例: font-size/36 は PC 36px・SP 26px)。
 * モードで値が変わる変数は下の :root でカスタムプロパティにして、768px 以下で差し替える。
 */

/* ------------------------------------------------------------------
 * Tokens (モードで値が変わる Figma 変数)
 * ---------------------------------------------------------------- */
:root {
	--af-fs-16: 16px;   /* font-size/16 */
	--af-fs-26: 26px;   /* font-size/26 */
	--af-fs-36: 36px;   /* font-size/36 */
	--af-fs-88: 88px;   /* font-size/88 */
	--af-lh-16: 16px;   /* line-height/16 */
	--af-lh-24: 24px;   /* line-height/24 */
	--af-lh-28: 28px;   /* line-height/28 */
	--af-lh-36: 36px;   /* line-height/36 */
	--af-lh-48: 48px;   /* line-height/48 */
	--af-content-gap: 64px;  /* layout/content-gap */
	--af-card-py: 80px;      /* layout/card-padding-y */
	--af-danger: #c8314a;    /* foreground/danger */
}

@media (max-width: 768px) {
	:root {
		--af-fs-16: 14px;
		--af-fs-26: 21px;
		--af-fs-36: 26px;
		--af-fs-88: 64px;
		--af-lh-16: 14px;
		--af-lh-24: 20px;
		--af-lh-28: 24px;
		--af-lh-36: 28px;
		--af-lh-48: 36px;
		--af-content-gap: 40px;
		--af-card-py: 48px;
	}
}

/* ------------------------------------------------------------------
 * Page frame
 * ---------------------------------------------------------------- */
/* 見出しから本文までを 1 枚の白いシートにする (Figma: light/2 の影) */
.lower__sheet {
	position: relative;
	z-index: 1;
	background: var(--af-bg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Figma ではフッター (BottomNavi) がシートより手前に重なり、シート下側の影はフッターに隠れる。
 * 同じ z-index で後ろにあるフッターを上に描き、白地で影を覆う (デザイナー指摘 2026-10-07: フッター上部の影) */
.lower ~ .footer {
	position: relative;
	z-index: 1;
	background: var(--af-bg);
}

.lower-section {
	padding: 72px var(--af-gutter);
}

.lower-section__inner {
	max-width: var(--af-content-max);
	margin: 0 auto;
}

/* ------------------------------------------------------------------
 * Page head (Figma: LowerHeader + BreadCrumbs)
 * ---------------------------------------------------------------- */
.page-head {
	padding: 0 var(--af-gutter);
}

.page-head__inner {
	max-width: var(--af-content-max);
	margin: 0 auto;
}

.page-head__title {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 80px 0;
	overflow: hidden;
}

.page-head__ja {
	margin: 0;
	font-size: var(--af-fs-16);
	font-weight: 700;
	line-height: 28px;
	letter-spacing: 0.24em;
	color: var(--af-fg);
}

/* 大きい英字。行の高さ 56px は固定 (Figma: display/lg)。
 * 2 語以上 (Privacy Policy など) は入りきらなければ語の切れ目で折り返す (Figma の SP も 2 行) */
.page-head__en {
	margin: 0;
	font-family: var(--af-font-en);
	font-size: var(--af-fs-88);
	font-weight: 900;
	line-height: 56px;
	letter-spacing: 0.04em;
	color: var(--af-fg);
}

.page-head__initial {
	color: var(--af-fg-accent);
}

/* 事業部ページ・サービス詳細: 英字の代わりに事業色の「Business 0N」と、大きい日本語の名前 (Figma: LowerHeader > Frame 49)。
 * 見出しの枠の高さ 270px の上下中央に置く */
.page-head__title--named {
	justify-content: center;
	gap: 12px;
	min-height: 270px;
	padding: 40px 0;
}

.page-head__eyebrow {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: var(--af-lh-36);
	letter-spacing: 0.24em;
	color: var(--biz-color, var(--af-fg-accent));
}

.page-head__name {
	margin: 0;
	font-size: var(--af-fs-36);
	font-weight: 900;
	line-height: var(--af-lh-48);
	letter-spacing: 0.2em;
	color: var(--af-fg);
}

.breadcrumbs {
	padding: 16px 0;
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 12px;
	font-weight: 700;
	line-height: 12px;
	color: var(--af-fg);
}

/* 区切りは 30° 傾けた 10px の線 (Figma: BreadCrumbs の Vector) */
.breadcrumbs__item + .breadcrumbs__item::before {
	content: "";
	flex: none;
	width: 1px;
	height: 10px;
	background: var(--af-border-sub);
	transform: rotate(30deg);
}

.breadcrumbs__link {
	color: var(--af-fg-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.breadcrumbs__link:hover {
	text-decoration: none;
}

/* ------------------------------------------------------------------
 * Section header (Figma: SectionHeaderSecondary)
 * ---------------------------------------------------------------- */
.lower-heading {
	display: flex;
	align-items: center;
	min-height: 64px;
	margin: 0;
	font-size: var(--af-fs-36);
	font-weight: 900;
	line-height: var(--af-lh-48);
	letter-spacing: 0.2em;
	color: var(--af-fg);
}

.lower-heading__accent {
	color: var(--af-fg-accent);
}

/* ------------------------------------------------------------------
 * Buttons (common.css の .btn に下層ページ用の種類を足す)
 * ---------------------------------------------------------------- */
/* Figma: Button type=tonal。淡い青地に青文字、アイコンは青丸に白矢印 + 30% の縁取り */
.btn--tonal {
	background: var(--af-bg-accent);
	color: var(--af-fg-accent);
}

.btn--tonal .btn__icon {
	background: var(--af-bg-accent-emphasis);
	box-shadow: 0 0 0 3px rgba(0, 123, 187, 0.3);
}

/* リンク先が未確定のボタン。見た目は同じでクリックできない */
.btn.is-pending {
	cursor: default;
}

.btn.is-pending:hover {
	opacity: 1;
}

/* Figma: Button state=disabled */
.btn:disabled,
.btn.is-disabled {
	background: var(--af-bg-inset);
	color: var(--af-fg-light);
	cursor: not-allowed;
	opacity: 1;
}

.btn:disabled .btn__icon,
.btn.is-disabled .btn__icon {
	background: var(--af-border-sub);
	box-shadow: none;
}

/* ------------------------------------------------------------------
 * 年 / 決算期のプルダウン (Figma: assets/PullDownMenuField)。IR の一覧とニュース一覧で共有
 * ---------------------------------------------------------------- */
.ir-year {
	display: flex;
	align-items: center;
	gap: 32px;
}

/* プルダウンと丸いボタンの間の縦線 (Figma: Vector 1、高さ 43px。IR の一覧だけ) */
.ir-controls .ir-year:not(:last-child)::after {
	content: "";
	flex: none;
	width: 1px;
	height: 43px;
	background: var(--af-border-sub);
}

.ir-year__field {
	position: relative;
	width: 168px;
}

.ir-year__select {
	display: block;
	width: 100%;
	height: 48px;
	padding: 0 40px 0 16px;
	border: 1px solid var(--af-border);
	border-radius: 8px;
	background: var(--af-bg);
	font-family: inherit;
	font-size: var(--af-fs-16);
	font-weight: 700;
	line-height: var(--af-lh-16);
	color: var(--af-fg);
	text-align: center;
	text-align-last: center;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.ir-year__select:focus-visible {
	outline: 2px solid var(--af-fg-accent);
	outline-offset: 2px;
}

.ir-year__icon {
	position: absolute;
	top: 50%;
	right: 16px;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	pointer-events: none;
}

.ir-year__submit {
	margin-left: 8px;
}

/* 見た目には出さず、読み上げにだけ使う文字 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
 * サービス一覧 (Figma: サービス一覧 > group)
 * ---------------------------------------------------------------- */
.svc-item {
	display: flex;
	align-items: center;
	gap: var(--af-content-gap);
	padding: var(--af-card-py) 0;
	/* ヘッダーの高さぶんずらして、フッターのサイトマップ (#manga など) から飛んだときに見出しが隠れないようにする */
	scroll-margin-top: 24px;
}

/* 区切り線は高さを取らない (Figma の divider は高さ 0 の線) */
.svc-item + .svc-item {
	box-shadow: inset 0 1px 0 var(--af-border-sub);
}

.svc-item__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.svc-item__no {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: var(--af-lh-36);
	letter-spacing: 0.24em;
	color: var(--biz-color, var(--af-fg-accent));
}

.svc-item__title {
	margin: 12px 0 0;
	font-size: var(--af-fs-36);
	font-weight: 900;
	line-height: var(--af-lh-48);
	letter-spacing: 0.2em;
	color: var(--af-fg);
}

.svc-item__desc {
	margin: 16px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: var(--af-lh-36);
	letter-spacing: 0.24em;
	color: var(--af-fg);
}

/* 画像は 16:9 を保ち、横幅に合わせて高さを決める (Figma の注記) */
.svc-item__image {
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--af-border-sub);
	border-radius: 8px;
	overflow: hidden;
}

.svc-item__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@supports not (aspect-ratio: 1 / 1) {
	.svc-item__image {
		position: relative;
		height: 0;
		padding-top: 28.125%; /* 16:9 の半幅ぶん (2 カラム時) */
	}

	.svc-item__image img {
		position: absolute;
		top: 0;
		left: 0;
	}
}

/* ------------------------------------------------------------------
 * <= 768px: SP
 * ---------------------------------------------------------------- */
@media (max-width: 768px) {
	/* 狭い端末で英字見出し (最長は CONTACT) がはみ出さないよう、幅に合わせて縮める */
	.page-head__en {
		font-size: min(var(--af-fs-88), calc((100vw - 2 * var(--af-gutter)) / 4.9));
	}

	/* 9 文字以上の単語を含む英字 (Disclosure / Governance など。page-head.php で判定)。
	 * 64px で最も長い「Governance」が 371px なので、本文幅の 17% を文字サイズにする (幅 425px 以上では 64px のまま) */
	.page-head__en--long {
		font-size: min(var(--af-fs-88), calc((100vw - 2 * var(--af-gutter)) * 0.17));
	}

	/* 画像を上、テキストを下に積む */
	.svc-item {
		flex-direction: column;
		align-items: stretch;
	}

	.svc-item__image {
		flex: none;
		order: -1;
		width: 100%;
	}

	@supports not (aspect-ratio: 1 / 1) {
		.svc-item__image {
			padding-top: 56.25%;
		}
	}
}

/* ------------------------------------------------------------------
 * 企業情報 (Figma: 企業情報 > company outline / officer introduction)
 * ---------------------------------------------------------------- */
/* セクション内の縦積み: 見出し → 本文 → 写真 (PC 64px / SP 40px) */
.lower-stack {
	display: flex;
	flex-direction: column;
	gap: var(--af-content-gap);
}

.company,
.officers {
	scroll-margin-top: 24px;
}

/* 会社概要の表と地図の間 (PC 64px / SP 16px) */
.company__body {
	display: flex;
	flex-direction: column;
	gap: var(--af-content-gap);
}

/* Figma: TableRow。上罫線のみ、最終行の下には線を引かない */
.company-table {
	margin: 0;
}

.company-table__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	min-height: 77px;
	padding: 16px 8px;
	border-top: 1px solid var(--af-border-sub);
}

.company-table__label {
	flex: none;
	width: 256px;
	font-size: var(--af-fs-16);
	font-weight: 700;
	line-height: var(--af-lh-16);
	color: var(--af-fg-accent);
}

.company-table__value {
	flex: 1 1 0;
	min-width: 200px;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: var(--af-lh-28);
	color: var(--af-fg);
	overflow-wrap: anywhere;
}

/* Google マップ: 高さ 491px 固定 (PC・SP 共通)、角丸 16px で iframe ごと切り抜く (Figma の注記) */
.company__map {
	height: 491px;
	border-radius: 16px;
	overflow: hidden;
	background: #e5e3df;
}

.company__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* 役員カードの一覧と社外取締役の一覧。間に区切り線 (上下 56px) */
.officers__groups {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.officers__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
	gap: 32px 24px;
}

/* 区切り線は高さを取らない (Figma の divider は高さ 0 の線) */
.officers__list--outside {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding-top: 56px;
	box-shadow: inset 0 1px 0 var(--af-border-sub);
}

/* Figma: ProfileCard */
.profile {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.profile__photo {
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--af-bg-inset);
}

.profile__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.profile__name {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.profile__position {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--af-fg-sub);
}

.profile__fullname {
	font-size: var(--af-fs-26);
	font-weight: 700;
	line-height: var(--af-lh-36);
	color: var(--af-fg);
	white-space: nowrap;
}

.profile__en {
	font-size: 11px;
	font-weight: 500;
	line-height: 20px;
	color: var(--af-fg-sub);
}

/* 経歴。名前との間に区切り線 (Figma: divider、上下 16px) */
.profile__careers {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding-top: 16px;
	box-shadow: inset 0 1px 0 var(--af-border-sub);
}

.profile__year,
.profile__event {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: var(--af-lh-28);
}

.profile__year {
	color: var(--af-fg-sub);
}

.profile__event {
	color: var(--af-fg);
}

/* 集合写真 (Figma: aft_2658_all 1、比率 1190:627) */
.officers__photo {
	aspect-ratio: 1190 / 627;
	border-radius: 8px;
	overflow: hidden;
}

.officers__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 960px 以下 (ヘッダーがミニになる幅) は役員カードを 3 列に */
@media (max-width: 960px) {
	.officers__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.company__body {
		gap: 16px;
	}

	.company-table__row {
		min-height: 0;
	}

	.officers__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.officers__list--outside {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* aspect-ratio 非対応ブラウザ向けの保険 */
@supports not (aspect-ratio: 1 / 1) {
	.profile__photo,
	.officers__photo {
		position: relative;
		height: 0;
	}

	.profile__photo {
		padding-top: 100%;
	}

	.officers__photo {
		padding-top: 52.69%;
	}

	.profile__photo img,
	.officers__photo img {
		position: absolute;
		top: 0;
		left: 0;
	}
}

/* ------------------------------------------------------------------
 * お問い合わせ (Figma: お問い合わせ / CONTACT | エラー / CONTACT | 送信済み)
 * ---------------------------------------------------------------- */
.contact__inner,
.contact-sent__inner {
	max-width: 800px;
	margin: 0 auto;
}

.contact__inner {
	display: flex;
	flex-direction: column;
	gap: var(--af-content-gap);
}

/* 案内文 (固定ページ本文から) */
.contact-intro {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.contact-intro__text {
	font-size: var(--af-fs-16);
	font-weight: 500;
	line-height: var(--af-lh-28);
	color: var(--af-fg);
}

.contact-intro__text ul {
	padding: 0;
	list-style: disc;
}

.contact-intro__text li {
	margin-left: 24px;
}

.contact-intro__note {
	font-size: 14px;
	font-weight: 500;
	line-height: var(--af-lh-28);
	color: var(--af-fg-sub);
}

/* CF7 の CSS は読み込まないので、必要なものだけ持つ */
.contact-form .wpcf7 {
	margin: 0;
	padding: 0;
}

.contact-form .screen-reader-response {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
}

/* CF7 の hidden の入力欄をまとめた fieldset (枠と、フォームの gap 1 つ分の余白が出てしまう) */
.contact-form .hidden-fields-container {
	display: none;
}

.contact-form .wpcf7-form-control-wrap {
	position: relative;
	display: block;
}

/* エラーは contact.js がラベルの下に出し直すので、CF7 が項目の後ろに入れるものは隠す */
.js .contact-form .wpcf7-not-valid-tip {
	display: none;
}

.contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	line-height: var(--af-lh-24);
	color: var(--af-danger);
}

/* フォーム全体: 項目 → 同意 → 送信ボタン (PC 64px / SP 40px) */
.contact-form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--af-content-gap);
}

.cf-form {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* Figma: FormGroup。左にラベル (幅 217px)、右に入力欄。狭いと折り返して縦に積む */
.cf-group {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px 32px;
}

.cf-group__head {
	flex: none;
	width: 217px;
	min-width: 188px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cf-group__title {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 28px;
}

.cf-label {
	flex: 1 1 auto;
	font-size: var(--af-fs-16);
	font-weight: 700;
	line-height: var(--af-lh-16);
	color: var(--af-fg);
}

.cf-badge {
	flex: none;
	padding: 4px 12px;
	border-radius: 8px;
	background: var(--af-bg-accent-emphasis);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #fff;
}

/* Figma: assets/ErrorMessage */
.cf-error {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 500;
	line-height: var(--af-lh-24);
	color: var(--af-danger);
}

.cf-error__icon {
	flex: none;
	width: 16px;
	height: 16px;
}

.cf-group__field {
	flex: 1 1 0;
	min-width: 300px;
}

/* Figma: assets/Input */
.cf-group__field input[type="text"],
.cf-group__field input[type="email"],
.cf-group__field input[type="tel"],
.cf-group__field textarea {
	display: block;
	width: 100%;
	margin: 0;
	/* Figma は枠線を内側に描く (高さ 68px = 余白 20 + 行 28 + 20)。枠線 1px ぶん余白を詰める */
	padding: 19px 23px;
	border: 1px solid var(--af-border);
	border-radius: 8px;
	background: var(--af-bg);
	font-family: inherit;
	/* Figma の SP は 14px だが、iPhone は 16px 未満の入力欄にフォーカスすると画面を拡大するため 16px で固定 */
	font-size: 16px;
	font-weight: 500;
	line-height: var(--af-lh-28);
	color: var(--af-fg);
	-webkit-appearance: none;
	appearance: none;
}

.cf-group__field textarea {
	height: 324px;
	resize: vertical;
}


.cf-group__field ::placeholder {
	color: var(--af-fg-light);
	opacity: 1;
}

.cf-group__field input:focus,
.cf-group__field textarea:focus {
	outline: none;
	border-color: var(--af-fg-accent);
	box-shadow: 0 0 0 1px var(--af-fg-accent);
}

/* エラーの入力欄 (Figma: border/danger 2px)。枠が太くなるぶん余白を詰めて大きさを保つ。
 * 上の input[type="..."] より詳細度を上げないと効かない */
.cf-group__field .wpcf7-form-control.wpcf7-not-valid {
	padding: 18px 22px;
	border: 2px solid #e6a0ac;
}

.cf-group__field .wpcf7-form-control.wpcf7-not-valid:focus {
	box-shadow: none;
}

/* Figma: RadioButton */
.cf-group__field .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.cf-group__field .wpcf7-list-item {
	margin: 0;
}

.cf-group__field .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--af-fg);
	cursor: pointer;
}

.cf-group__field input[type="radio"],
.cf-check input[type="checkbox"] {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid var(--af-border);
	background: var(--af-bg);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: box-shadow 0.15s;
}

.cf-group__field input[type="radio"] {
	border-radius: 50%;
}

/* 選択時は青い円の中央に白い点 (Figma: type=selected) */
.cf-group__field input[type="radio"]:checked {
	border: 5px solid var(--af-bg-accent-emphasis);
}

.cf-group__field .wpcf7-list-item label:hover input[type="radio"],
.cf-check:hover input[type="checkbox"] {
	box-shadow: 0 0 0 2px var(--af-bg-accent);
}

.cf-group__field input[type="radio"]:focus-visible,
.cf-check input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--af-bg-accent-emphasis);
}

/* 同意 (Figma: 本文 + CheckBox) */
.cf-consent {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.cf-consent__text {
	font-size: 12px;
	font-weight: 500;
	line-height: var(--af-lh-24);
	text-align: center;
	color: var(--af-fg);
}

.cf-consent__text a {
	color: var(--af-fg-accent);
	text-decoration: none;
}

.cf-consent__text a:hover {
	text-decoration: underline;
}

.cf-check {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--af-fg);
	cursor: pointer;
}

.cf-check .wpcf7-form-control-wrap,
.cf-check .wpcf7-acceptance,
.cf-check .wpcf7-list-item {
	display: flex;
}

.cf-check input[type="checkbox"] {
	border-radius: 4px;
}

.cf-check input[type="checkbox"]:checked {
	border-color: var(--af-bg-accent-emphasis);
	background: var(--af-bg-accent-emphasis) url("../img/icons/check-white.svg") center / 16px 16px no-repeat;
}

/* 送信ボタン + 全体のエラー (Figma: ErrorMessage はボタンの上、間 16px)。
 * エラーが出ていないとき (display: none) に余白が残らないよう、間隔はエラー側の margin で取る */
.cf-submit {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* reCAPTCHA: 右下のバッジは隠し、代わりに送信ボタンの下に Google の規定の文言を出す
 * (文言を表示すればバッジを隠してよい、と Google の reCAPTCHA FAQ にある) */
.grecaptcha-badge {
	visibility: hidden;
}

.cf-recaptcha {
	margin-top: 16px;
	font-size: 12px;
	font-weight: 500;
	line-height: var(--af-lh-24);
	text-align: center;
	color: var(--af-fg-sub);
}

.cf-recaptcha a {
	color: var(--af-fg-accent);
	text-decoration: underline;
}

.cf-submit__action {
	position: relative;
}

.cf-submit__button {
	border: 0;
	cursor: pointer;
}

.cf-submit__icon--off,
.cf-submit__button:disabled .cf-submit__icon--on {
	display: none;
}

.cf-submit__button:disabled .cf-submit__icon--off {
	display: block;
}

/* 全体のメッセージ。CF7 は form の class (init / submitting / invalid / sent ...) で状態を表すので、
 * 何も出していないとき (送信前・送信中) は隠す。アイコンは疑似要素で付ける */
.contact-form .wpcf7-form.init .wpcf7-response-output,
.contact-form .wpcf7-form.resetting .wpcf7-response-output,
.contact-form .wpcf7-form.submitting .wpcf7-response-output {
	display: none;
}

.contact-form .wpcf7-response-output {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: var(--af-lh-24);
	text-align: center;
	color: var(--af-danger);
}

.contact-form .wpcf7-response-output::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	vertical-align: -3px;
	background: url("../img/icons/warning-circle.svg") center / contain no-repeat;
}

.contact-form .wpcf7-form.sent .wpcf7-response-output {
	color: var(--af-fg);
}

.contact-form .wpcf7-form.sent .wpcf7-response-output::before {
	content: none;
}

/* 送信中 (CF7 がボタンの後ろに入れる .wpcf7-spinner) */
.contact-form .wpcf7-spinner {
	display: none;
}

.contact-form .wpcf7-form.submitting .wpcf7-spinner {
	position: absolute;
	top: 50%;
	left: calc(100% + 12px);
	display: block;
	margin-top: -10px;
	width: 20px;
	height: 20px;
	border: 2px solid var(--af-border-sub);
	border-top-color: var(--af-fg-accent);
	border-radius: 50%;
	animation: af-spin 0.8s linear infinite;
}

@keyframes af-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.contact-form .wpcf7-form.submitting .wpcf7-spinner {
		animation-duration: 2.4s;
	}
}

/* 送信完了 (Figma: CONTACT | 送信済み) */
.contact-sent__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--af-content-gap);
}

.contact-sent__message {
	font-size: var(--af-fs-16);
	font-weight: 500;
	line-height: var(--af-lh-28);
	text-align: center;
	color: var(--af-fg);
}

.contact-sent__button .btn__label {
	font-size: 16px;
	line-height: 16px;
}

@media (max-width: 768px) {
	/* ラベルは横幅いっぱい、必須バッジはラベルのすぐ右 */
	.cf-group__head {
		width: 100%;
	}

	.cf-label {
		flex: none;
	}

	.cf-group__field {
		flex-basis: 100%;
		min-width: 0;
	}
}

/* ------------------------------------------------------------------
 * ポリシー系 (Figma: ポリシー系 > Policy content / Policy section)
 *   プライバシーポリシー / ディスクロージャーポリシー / 免責事項 / コーポレートガバナンス
 *   本文は固定ページの本文を inc/policy.php で組み直したもの
 * ---------------------------------------------------------------- */
.policy__inner {
	display: flex;
	flex-direction: column;
	gap: var(--af-content-gap);
}

.policy__body {
	display: flex;
	flex-direction: column;
	gap: 32px;
	font-size: var(--af-fs-16);
	font-weight: 500;
	line-height: var(--af-lh-28);
	color: var(--af-fg);
	overflow-wrap: anywhere;
}

.policy__body p {
	margin: 0;
}

/* 本文中のリンク (書類一覧など部品のリンクはクラスを持つので対象外) */
.policy__body a:not([class]) {
	color: var(--af-fg-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.policy__body a:not([class]):hover {
	text-decoration: none;
}

/* 小見出し (Figma: Policy subsection。heading/default 26px) */
.policy-sub,
.policy-sub__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.policy-sub__title {
	margin: 0;
	font-size: var(--af-fs-26);
	font-weight: 700;
	line-height: var(--af-lh-36);
	color: var(--af-fg);
}

/* 太字の行とその内容 (Figma: Safety measure / Purpose group) */
.policy-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.policy-head {
	font-weight: 700;
}

/* 字下げ項目 (Figma: Indented item / Bullet list)。記号は本文の文字をそのまま出す */
.policy-items,
.policy-nums {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.policy-items {
	padding-left: 24px;
}

.policy-items--loose,
.policy-nums {
	gap: 16px;
}

.policy-group .policy-items {
	gap: 8px;
}

.policy__body .has-text-align-right {
	text-align: right;
}

.policy__body .has-text-align-center {
	text-align: center;
}

/* 図 (Figma: コーポレートガバナンス体制図。幅 800px で中央) */
.policy-figure {
	display: flex;
	justify-content: center;
}

.policy-figure img {
	display: block;
	width: 800px;
	max-width: 100%;
	height: auto;
	/* 画像の上端・左右に入っている薄い枠線を隠す (Figma も画像を 0.2〜0.3% 広げて同じように切り抜いている) */
	clip-path: inset(0.3% 0.25% 0 0.25%);
}

/* コーポレート・ガバナンス報告書 (Figma: 報告書本文。説明文と一覧の間は 24px) */
.policy__body .policy-docs {
	margin: -8px 0 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------------
 * 準備中のページ (Figma: Coming Soon。お問い合わせの送信完了と同じ組み方)
 * ---------------------------------------------------------------- */
.soon__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--af-content-gap);
	max-width: 800px;
	margin: 0 auto;
}

.soon__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

.soon__title {
	margin: 0;
	font-size: var(--af-fs-36);
	font-weight: 900;
	line-height: var(--af-lh-48);
	letter-spacing: 0.2em;
	color: var(--af-fg-accent);
}

.soon__message {
	margin: 0;
	font-size: var(--af-fs-16);
	font-weight: 500;
	line-height: var(--af-lh-28);
	color: var(--af-fg);
}

.soon__button .btn__label {
	font-size: 16px;
	line-height: 16px;
}

/* ------------------------------------------------------------------
 * 採用情報・新卒採用 (デザインが決まるまでのつなぎ。既存の部品で旧テーマの内容を並べる)
 * ---------------------------------------------------------------- */
.recruit-entry__lead,
.recruit-text {
	margin: 0;
	font-size: var(--af-fs-16);
	font-weight: 500;
	line-height: var(--af-lh-28);
	color: var(--af-fg);
}

.recruit-text p {
	margin: 0;
}

.recruit-text p + p {
	margin-top: 1em;
}

.recruit-text--sm {
	font-size: 14px;
	line-height: 24px;
}

/* 応募・資料への入り口 (IR トップの Top Message と同じ淡い青のパネル。文は左、ボタンは右) */
.recruit-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px 48px;
	padding: 48px 56px;
	border-radius: 16px;
	background: var(--af-bg-accent);
}

.recruit-cta__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.recruit-cta__title {
	margin: 0;
	font-size: var(--af-fs-26);
	font-weight: 700;
	line-height: var(--af-lh-36);
	color: var(--af-fg);
}

.recruit-cta__lead {
	margin: 0;
	font-size: var(--af-fs-16);
	font-weight: 500;
	line-height: var(--af-lh-28);
	color: var(--af-fg);
}

.recruit-cta__button {
	flex: none;
}

/* 代表メッセージ: IR トップの Top Message と同じパネル。文は左、写真は右に高さいっぱい */
.recruit-top {
	display: flex;
	overflow: hidden;
	border-radius: 16px;
	background: var(--af-bg-accent);
}

.recruit-top__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 56px;
}

.recruit-top__photo {
	flex: none;
	width: min(460px, 40%);
	background: var(--af-bg-inset);
}

.recruit-top__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 45% center;
}

.profile--wide .profile__photo {
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	background: var(--af-bg-inset);
}

/* 部門長のメッセージ・社員インタビュー (企業情報の ProfileCard を横長の写真で 2 列) */
.recruit-members {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.recruit-members__link {
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: inherit;
	text-decoration: none;
}

.recruit-members__link:hover {
	opacity: 0.8;
}

/* オフィス風景: 1 枚目を大きく、残りを 2 × 2 */
.recruit-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.recruit-gallery__item {
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	background: var(--af-bg-inset);
}

.recruit-gallery__item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.recruit-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 福利厚生: 4 列のカード */
.recruit-benefits {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.recruit-benefit {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.recruit-benefit__photo {
	aspect-ratio: 16 / 9;
	margin-bottom: 4px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--af-bg-inset);
}

.recruit-benefit__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recruit-benefit__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	color: var(--af-fg-accent);
}

/* 新卒採用の募集職種: 写真・受付停止の注記・職種のボタン */
.recruit-type {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
}

.recruit-type__photo {
	width: 100%;
	max-width: 800px;
	border-radius: 8px;
	overflow: hidden;
}

.recruit-type__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.recruit-type__note {
	margin: 0;
	font-size: var(--af-fs-16);
	font-weight: 700;
	line-height: var(--af-lh-28);
	color: var(--af-fg-sub);
}

.recruit-type__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 受付停止中の職種 (押せないので、ボタンではなく名前だけのタグ) */
.recruit-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 20px;
	border: 1px solid var(--af-border-sub);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
	color: var(--af-fg-sub);
	background: #fff;
}

@media (max-width: 960px) {
	.recruit-benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.recruit-members {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.recruit-top {
		flex-direction: column-reverse;
	}

	.recruit-top__body {
		gap: 24px;
		padding: 32px 24px;
	}

	.recruit-top__photo {
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	.recruit-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.recruit-benefits {
		gap: 32px 16px;
	}

	.recruit-benefit__title {
		font-size: 16px;
		line-height: 24px;
	}

	.recruit-type__links {
		gap: 8px;
	}

	.recruit-cta {
		flex-direction: column;
		align-items: stretch;
		padding: 32px 24px;
	}

	.recruit-cta__button {
		align-self: center;
	}
}