/*
 * L14 ADD-67 新しい採用情報ページの見た目（DESIGN-ADD67.md §3。デザイン PDF 20261008_総合ページ_第2階層_採用情報ページ.pdf）。
 * 読み込み: inc/recruit.php（公開スイッチ on かつ recruit-v2.php を出すときだけ）。style.css には触れない。
 * 規則はすべて main.rc 配下の .rc-* / .rf-*（新しいページの外には効かない）。色は body.page-recruit の --t-main / --t-dark / --t-pale。
 * 🔴 寸法は rem（16px 基準）。html[data-fontsize] の % スケールに追従する。
 * 🔴 事業の色（高齢＝橙・障がい＝青・こども＝桃）は丸と左線だけに使い、文字色には使わない（白地で 3:1 に届かない色があるため）。
 */

main.rc {
	--rc-band: #F2F2F0;        /* 帯の地（デザインの淡い灰） */
	--rc-line: #BFBFBF;
	--rc-muted: #4D4D4D;       /* 補足文（白地 8.45:1、帯の地 7.7:1） */
	--rc-korei: #F5A623;
	--rc-shogai: #3F8FD8;
	--rc-kodomo: #EC739C;
	--rc-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .12);
}

/* ===== 帯・節・見出し ===== */
.rc .rc-band { background: var(--rc-band); }
.rc .rc-section { padding-block: 4rem; }
.rc .l2-container > .rc-section + .l2-section { padding-top: 0; }
/* 🔴 見出しは flex にしない（ルビの <ruby> が 1 語ずつ flex の子になり、語の間に gap が入るため）。斜線は inline-block の疑似要素 */
.rc .rc-heading {
	margin: 0 0 1.5rem; font-size: 1.75rem; line-height: 1.6; text-align: center; color: var(--c-ink);
}
.rc .rc-heading::before, .rc .rc-heading::after {
	content: ""; display: inline-block; width: 1.5rem; height: 2px; background: var(--t-main); vertical-align: 0.35em;
}
.rc .rc-heading::before { margin-right: 1.25rem; transform: rotate(45deg); }
.rc .rc-heading::after { margin-left: 1.25rem; transform: rotate(-45deg); }
.rc .rc-catch { margin: 0 0 1rem; text-align: center; font-size: 1rem; font-weight: 700; color: var(--t-dark); }
.rc .rc-catch--small { font-size: 0.9375rem; }
.rc .rc-intro { max-width: 52rem; margin: 0 auto 2rem; text-align: center; font-size: 0.9375rem; line-height: 2; }
.rc .rc-subheading {
	margin: 3rem 0 1.5rem; text-align: center; font-size: 1.375rem; line-height: 1.6; color: var(--c-ink);
}
.rc .rc-subheading::before { content: "＼"; margin-right: 0.75rem; color: var(--t-main); }
.rc .rc-subheading::after { content: "／"; margin-left: 0.75rem; color: var(--t-main); }
.rc .rc-note { margin: 1rem 0 0; font-size: 0.8125rem; line-height: 1.8; color: var(--rc-muted); }
/* 子ページ（本文 56rem の中央寄せ）の注は本文の幅にそろえる */
.rc .rc-section > .rc-note { max-width: 56rem; margin-inline: auto; }
.rc .rc-section > .rc-note + div.rc-biz { margin-top: 2rem; }
.rc .rc-pending { margin: 1rem 0 2rem; text-align: center; font-size: 0.8125rem; color: var(--rc-muted); }
.rc .rc-actions { margin: 2rem 0 0; text-align: center; }
.rc .rc-actions .btn-l2 { display: inline-flex; }
/* 縦の「・・・」（デザインどおり）。縦書きの中黒は小さく潰れるので、文字は隠して点 3 つを背景で描く（aria-hidden の飾り） */
.rc .rc-more { width: 0.5rem; height: 2.25rem; margin: 1rem auto 0; overflow: hidden; font-size: 0; color: transparent;
	background: radial-gradient(circle, var(--rc-muted) 0.15rem, transparent 0.19rem) center top / 0.5rem 0.75rem repeat-y; }
.rc .rc-photo { display: block; width: 100%; height: auto; border-radius: 0.5rem; }
.rc .rc-photo--lead { max-width: 56rem; margin: 0 auto 2rem; aspect-ratio: 3 / 2; object-fit: cover; }

/* ヒーロー（子ページ）の親リンク */
.rc .rc-parent { margin: 0 0 0.25rem; font-size: 0.875rem; }
.rc .rc-parent a { color: var(--t-dark); }

/* ===== カード ===== */
.rc .rc-icon { display: inline-flex; flex: none; width: 1.75rem; height: 1.5rem; color: var(--t-main); }
.rc .rc-icon svg { width: 100%; height: 100%; fill: currentColor; }
.rc .rc-cards { display: grid; gap: 1.5rem; }
.rc .rc-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* L14 ADD-75 C③: 福利厚生の写真を外して 5 枚になったので、奇数枚の最後のカードは 2 列の幅いっぱいに（空きマスを作らない） */
.rc .rc-cards--welfare > .rc-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.rc .rc-card {
	background: #fff; border-radius: 0.5rem; box-shadow: var(--rc-shadow); padding: 1.5rem;
}
.rc .rc-card__title {
	display: flex; align-items: center; gap: 0.625rem; margin: 0 0 1rem;
	font-size: 1.125rem; line-height: 1.5; color: var(--t-dark);
}
.rc .rc-card .rc-photo { margin-bottom: 1rem; aspect-ratio: 3 / 2; object-fit: cover; }
.rc .rc-card__desc { margin: 0; font-size: 0.875rem; line-height: 1.9; }
.rc .rc-card--photo { padding: 0; overflow: hidden; }
.rc .rc-card--photo .rc-photo { margin: 0; height: 100%; aspect-ratio: auto; border-radius: 0; }

/* 数字で見る職員情報 */
.rc .rc-stats { margin-top: 1.5rem; }
.rc .rc-stats__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; margin: 0; }
.rc .rc-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--rc-line); padding-bottom: 0.5rem; }
.rc .rc-stat dt { font-size: 1rem; font-weight: 700; }
.rc .rc-stat dd { margin: 0; color: var(--t-dark); white-space: nowrap; }
.rc .rc-stat__num { font-family: var(--font-num); font-size: 2.75rem; font-weight: 700; line-height: 1; }
.rc .rc-stat__unit { margin-left: 0.25rem; font-size: 1rem; font-weight: 700; }
.rc .rc-stats__note { margin: 0.75rem 0 0; font-size: 0.75rem; color: var(--rc-muted); }

/* ===== 求人情報 ===== */
.rc .rc-kyujin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; align-items: start; }
.rc .rc-kyujin__photo { display: block; margin-bottom: 1rem; }
.rc .rc-kyujin__photo img { aspect-ratio: 3 / 2; object-fit: cover; }
.rc .rc-kyujin__title { margin: 0 0 0.75rem; font-size: 1.125rem; line-height: 1.5; border-bottom: 2px solid var(--t-main); }
.rc .rc-kyujin__title a { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0; color: var(--t-dark); text-decoration: none; }
.rc .rc-kyujin__title a:hover span:not(.rc-icon):not(.rc-chev), .rc .rc-kyujin__title a:focus-visible span:not(.rc-icon):not(.rc-chev) { text-decoration: underline; }
.rc .rc-kyujin__title--career .rc-chev { margin-left: auto; }
.rc .rc-kyujin__lead { margin: 0; font-size: 0.875rem; line-height: 1.9; }

.rc .rc-chev { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--t-dark); }
.rc .rc-chev svg { width: 0.5rem; height: 0.75rem; }
.rc .rc-chev--round { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--t-main); color: #fff; }

.rc .rc-dot { display: inline-block; flex: none; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--rc-biz, var(--t-main)); }
.rc .rc-biz--korei  { --rc-biz: var(--rc-korei); }
.rc .rc-biz--shogai { --rc-biz: var(--rc-shogai); }
.rc .rc-biz--kodomo { --rc-biz: var(--rc-kodomo); }

.rc details.rc-biz { border-bottom: 1px solid var(--rc-line); }
.rc details.rc-biz > summary {
	display: flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding: 0.25rem 0;
	font-size: 1rem; font-weight: 700; cursor: pointer; list-style: none;
}
.rc details.rc-biz > summary::-webkit-details-marker { display: none; }
.rc details.rc-biz > summary::after {
	content: ""; width: 0.5rem; height: 0.5rem; margin-left: 0.25rem;
	border-right: 2px solid var(--t-dark); border-bottom: 2px solid var(--t-dark); transform: rotate(45deg) translateY(-0.125rem);
}
.rc details.rc-biz[open] > summary::after { transform: rotate(-135deg) translateY(-0.125rem); }

.rc .rc-joblinks { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.rc .rc-joblinks li { border-top: 1px dashed var(--rc-line); }
.rc .rc-joblinks a {
	display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0.25rem 0 0.25rem 1.5rem;
	color: var(--c-ink); text-decoration: none;
}
.rc .rc-joblinks a:hover, .rc .rc-joblinks a:focus-visible { background: var(--c-l2-navhov); }
.rc .rc-joblinks__name { flex: 1 1 auto; font-weight: 700; color: var(--t-dark); }
.rc .rc-joblinks__go { font-size: 0.75rem; color: var(--rc-muted); }
.rc .rc-joblinks .rc-chev { width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--t-main); color: #fff; }
.rc .rc-joblinks__none { padding: 0.75rem 0 0.75rem 1.5rem; font-size: 0.875rem; color: var(--rc-muted); }

/* 印刷用の書類（準備中） */
.rc .rc-dl { margin-top: 3rem; padding: 1.5rem; border: 1px solid var(--rc-line); border-radius: 0.5rem; }
.rc .rc-dl__title { margin: 0 0 1rem; font-size: 1rem; color: var(--t-dark); }
.rc .rc-dl__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.rc .rc-dl__list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px dashed var(--rc-line); font-size: 0.9375rem; }
.rc .rc-badge {
	flex: none; padding: 0.125rem 0.75rem; border-radius: 999px;
	background: var(--c-l2-tblval); color: var(--rc-muted); font-size: 0.75rem; font-weight: 700;
}

/* ===== 職種の紹介（表。SP は 1 職種 1 カード） ===== */
.rc .rc-jobs { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.875rem; line-height: 1.8; }
.rc .rc-jobs thead th { padding: 0.75rem 1rem; text-align: left; font-size: 0.8125rem; color: var(--rc-muted); border-bottom: 2px solid var(--t-main); }
.rc .rc-jobs tbody th, .rc .rc-jobs td { padding: 1.25rem 1rem; vertical-align: top; border-bottom: 1px solid var(--rc-line); }
.rc .rc-jobs tbody th { width: 22%; text-align: left; font-size: 1rem; color: var(--t-dark); }
/* ADD-81: 「主な資格」の列を外した（2 列。仕事内容が残りの幅） */
.rc .rc-jobs__lic { list-style: none; margin: 0; padding: 0; }
.rc .rc-jobs__lic li { position: relative; padding-left: 1rem; }
.rc .rc-jobs__lic li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--t-main); }

/* ===== 人材育成・研修制度 ===== */
.rc .rc-training { list-style: none; margin: 0 auto; padding: 0; width: fit-content; display: grid; gap: 0.75rem; }
.rc .rc-training li { position: relative; padding-left: 1.5rem; font-size: 1rem; font-weight: 700; color: var(--t-dark); }
.rc .rc-training li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--t-main); }
.rc .rc-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.rc .rc-training + .rc-gallery { margin-top: 2rem; }   /* L14 ADD-76 B: 下の一文が無いときは項目と写真の間を 2rem（説明文と項目の間と同じ） */
.rc .rc-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0.5rem; }

/* ===== 新卒採用・事業別 ===== */
.rc .rc-bizcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.rc .rc-bizcard { background: #fff; border-radius: 0.5rem; box-shadow: var(--rc-shadow); padding: 1rem; border-top: 0.25rem solid var(--rc-biz); }
.rc .rc-bizcard .rc-photo { aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 0.75rem; }
.rc .rc-bizcard__title { margin: 0 0 0.5rem; font-size: 1.125rem; }
.rc .rc-bizcard__title a { display: flex; align-items: center; gap: 0.5rem; color: var(--c-ink); }
.rc .rc-bizcard .rc-joblinks a { padding-left: 0.5rem; }
.rc div.rc-biz { max-width: 56rem; margin: 0 auto 2rem; }
.rc .rc-biz__title { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 0.75rem; padding-bottom: 0.5rem; font-size: 1.25rem; border-bottom: 2px solid var(--rc-biz, var(--t-main)); }
.rc div.rc-biz .draft-dl { margin-top: 0.5rem; }

/* ===== 募集要項 ===== */
.rc .rc-spec-page { max-width: 56rem; margin-inline: auto; }
.rc .rc-spec-page__biz { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; font-weight: 700; }
.rc .rc-spec-page__title { margin: 2rem 0 1rem; padding-left: 0.75rem; border-left: 0.3125rem solid var(--t-main); font-size: 1.375rem; }
.rc .rc-spec { display: grid; grid-template-columns: 10rem minmax(0, 1fr); margin: 0; border-top: 1px solid var(--rc-line); }
.rc .rc-spec dt, .rc .rc-spec dd { margin: 0; padding: 1rem; border-bottom: 1px solid var(--rc-line); font-size: 0.9375rem; line-height: 1.8; }
.rc .rc-spec dt { font-weight: 700; background: var(--t-pale); color: var(--t-dark); }
.rc .rc-spec dd { overflow-wrap: anywhere; }
.rc .rc-spec dd p { margin: 0; }
.rc .rc-spec dd p + p { margin-top: 0.5rem; }
.rc .rc-spec .rc-spec__h { font-weight: 700; }
.rc .rc-spec .rc-spec__h:not(:first-child) { margin-top: 0.75rem; }
.rc .rc-lines { list-style: none; margin: 0; padding: 0; }
.rc .rc-lines--sub { padding-left: 1em; }
.rc .rc-back { margin: 1.5rem 0 0; text-align: center; font-size: 0.9375rem; }
.rc .rc-back a { color: var(--t-dark); }

/* ===== 応募・エントリーフォーム ===== */
.rc .rf-form, .rc #form .draft-form { margin-inline: auto; }
.rc #form > .rc-intro { max-width: 45rem; text-align: left; }
.rc .cf-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rc .rf-birth { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.rc .draft-form .rf-birth select { width: auto; min-width: 5.5rem; }
.rc .rf-exp[hidden] { display: none; }

/* ===== SP ===== */
@media (max-width: 767px) {
	.rc .rc-section { padding-block: 2.5rem; }
	.rc .rc-heading { font-size: 1.25rem; }
	.rc .rc-heading::before, .rc .rc-heading::after { width: 1rem; }
	.rc .rc-heading::before { margin-right: 0.5rem; }
	.rc .rc-heading::after { margin-left: 0.5rem; }
	.rc .rc-subheading { font-size: 1.0625rem; margin-top: 2rem; }
	.rc .rc-intro { text-align: left; font-size: 0.875rem; }
	.rc .rc-cards--2, .rc .rc-kyujin, .rc .rc-bizcards, .rc .rc-stats__list { grid-template-columns: 1fr; }
	.rc .rc-kyujin { gap: 2rem; }
	.rc .rc-stat__num { font-size: 2.25rem; }
	.rc .rc-card { padding: 1.25rem; }
	.rc .rc-joblinks__go { display: none; }

	.rc .rc-jobs, .rc .rc-jobs tbody, .rc .rc-jobs tr, .rc .rc-jobs th, .rc .rc-jobs td { display: block; width: auto; }
	.rc .rc-jobs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.rc .rc-jobs tr { margin-bottom: 1rem; border: 1px solid var(--rc-line); border-radius: 0.5rem; overflow: hidden; }
	.rc .rc-jobs tbody th { width: auto; padding: 0.75rem 1rem; background: var(--t-pale); border-bottom: 0; }
	.rc .rc-jobs td { padding: 0.75rem 1rem; border-bottom: 0; }
	.rc .rc-jobs td::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 700; color: var(--rc-muted); }

	.rc .rc-gallery {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%;
		overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem;
	}
	.rc .rc-gallery img { scroll-snap-align: start; }

	.rc .rc-spec { grid-template-columns: 1fr; }
	.rc .rc-spec dt { padding: 0.5rem 0.75rem; border-bottom: 0; }
	.rc .rc-spec dd { padding: 0.75rem; }
	.rc .rc-spec-page__title { font-size: 1.125rem; }
	.rc .rc-dl__list li { font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
	.rc .rc-gallery { scroll-behavior: auto; }
}