/* ==========================================================================
   採用情報（assets/css/recruit/）— Component（c-: アイコン・ボタン・よくある質問）
   - このフォルダの CSS は 採用情報のページ（/recruit/・/recruit/thanks/）だけで読み込む（inc/setup.php）
   - SP は同じファイルの中で @media (max-width: 767px) に書く
   ========================================================================== */

/* ==========================================================================
   アイコン（c-icon-recruit。Figma c-icon/*・Lucide 準拠）
   形は assets/img/recruit/icons/*.svg をマスクにして、色は文字の色（currentColor）
   大きさは --icon-size（初期値 20px）
   ========================================================================== */
.c-icon-recruit {
	--icon-size: 20px;
	display: inline-block;
	flex-shrink: 0;
	width: var(--icon-size);
	height: var(--icon-size);
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.c-icon-recruit--arrow-right { --icon: url("../../img/recruit/icons/arrow-right.svg"); }
.c-icon-recruit--chevron-right { --icon: url("../../img/recruit/icons/chevron-right.svg"); }
.c-icon-recruit--chevron-down { --icon: url("../../img/recruit/icons/chevron-down.svg"); }
.c-icon-recruit--plus { --icon: url("../../img/recruit/icons/plus.svg"); }
.c-icon-recruit--minus { --icon: url("../../img/recruit/icons/minus.svg"); }
.c-icon-recruit--menu { --icon: url("../../img/recruit/icons/menu.svg"); }
.c-icon-recruit--x { --icon: url("../../img/recruit/icons/x.svg"); }
.c-icon-recruit--check { --icon: url("../../img/recruit/icons/check.svg"); }
.c-icon-recruit--calendar { --icon: url("../../img/recruit/icons/calendar.svg"); }
.c-icon-recruit--shield-check { --icon: url("../../img/recruit/icons/shield-check.svg"); }
.c-icon-recruit--users { --icon: url("../../img/recruit/icons/users.svg"); }

/* ==========================================================================
   ボタン（c-button-recruit。Figma 178:8742）
   角は丸めない。初期 = Red（白地の上の主ボタン）
   --white: 赤地の上の主ボタン ／ --ghost: 赤地の上の2つめ（白の枠線）／ --line: 白地の上の2つめ（赤の枠線）
   右の矢印は ::after（フォームの送信ボタンにも同じく付く）
   ========================================================================== */
.c-button-recruit {
	display: inline-flex;
	gap: var(--space-md);
	align-items: center;
	justify-content: space-between;
	width: 280px;
	max-width: 100%;
	min-height: 64px;
	padding: 20px var(--space-lg) 20px var(--space-xl); /* Figma: 上下 20・右 24・左 32 */
	font: var(--text-label-l);
	font-size: 16px; /* Figma: SP でも PC/Label-L（16px） */
	letter-spacing: var(--ls-label-l);
	color: var(--color-text-on-brand);
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	background: var(--color-action-cta);
	border: 0;
	border-radius: 0;
	transition: background-color 0.2s, color 0.2s;
}

.c-button-recruit::after {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("../../img/recruit/icons/arrow-right.svg") center / contain no-repeat;
	mask: url("../../img/recruit/icons/arrow-right.svg") center / contain no-repeat;
}

.c-button-recruit:hover {
	background: var(--color-action-cta-hover);
}

.c-button-recruit:disabled {
	cursor: wait;
	opacity: 0.7;
}

.c-button-recruit--white {
	color: var(--color-action-cta);
	background: var(--color-bg-canvas);
}

.c-button-recruit--white:hover {
	color: var(--color-action-cta-hover);
	background: var(--color-bg-canvas);
}

.c-button-recruit--ghost {
	color: var(--color-text-on-brand);
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--color-text-on-brand); /* 枠線は内側（高さを変えない） */
}

.c-button-recruit--ghost:hover {
	background: color-mix(in srgb, var(--color-text-on-brand) 12%, transparent);
}

.c-button-recruit--line {
	color: var(--color-action-cta);
	background: var(--color-bg-canvas);
	box-shadow: inset 0 0 0 1.5px var(--color-action-cta);
}

.c-button-recruit--line:hover {
	color: var(--color-action-cta-hover);
	background: var(--color-bg-canvas);
	box-shadow: inset 0 0 0 1.5px var(--color-action-cta-hover);
}

/* ==========================================================================
   よくある質問の1件（c-faq-item。Figma 39:161。開閉は common.js）
   ========================================================================== */
/* 上下の余白 28px（Figma の値）は問いのボタンの中に持たせて、押せる高さを広げる（見た目は同じ） */
.c-faq-item {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--color-border-default);
}

.c-faq-item__heading {
	font: inherit;
}

.c-faq-item__q {
	display: flex;
	gap: 20px; /* Figma の値 */
	align-items: center;
	width: 100%;
	padding: 28px 0; /* Figma の値（1件の上下の余白） */
	color: var(--color-text-primary);
	text-align: left;
	background: none;
	border: 0;
}

/* 開いているとき: 問いと答えのあいだは 16px、答えの下に 28px */
.c-faq-item__q[aria-expanded="true"] {
	padding-bottom: var(--space-md);
}

.c-faq-item__mark {
	flex-shrink: 0;
	width: 1ch;
	font: var(--text-en-h3);
	letter-spacing: var(--ls-en-h3);
	color: var(--color-action-cta);
}

.c-faq-item__mark--a {
	color: var(--color-text-tertiary);
}

.c-faq-item__question {
	flex: 1;
	min-width: 0;
	font: var(--text-h5);
	letter-spacing: var(--ls-h5);
}

.c-faq-item__q:hover .c-faq-item__question {
	color: var(--color-action-cta);
}

.c-faq-item__icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background-color: var(--color-action-cta);
	-webkit-mask: url("../../img/recruit/icons/plus.svg") center / contain no-repeat;
	mask: url("../../img/recruit/icons/plus.svg") center / contain no-repeat;
}

.c-faq-item__q[aria-expanded="true"] .c-faq-item__icon {
	-webkit-mask-image: url("../../img/recruit/icons/minus.svg");
	mask-image: url("../../img/recruit/icons/minus.svg");
}

.c-faq-item__a {
	display: flex;
	gap: 20px; /* Figma の値 */
	align-items: flex-start;
	padding-bottom: 28px; /* Figma の値 */
}

.c-faq-item__answer {
	flex: 1;
	min-width: 0;
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
}