/* ==========================================================
   求人（スタッフ募集）ページ — 店舗テーマ／ブランドトップ共通
   既存のデザイン変数（--ink / --gold-aa / --base など）をそのまま使う。
   どちらのテーマにも同じファイルを置くこと（片方を直したらもう片方にもコピー）。
   ========================================================== */

/* --- ページ見出し --- */
.rc-hero .page-hero__lead { font-size: .92rem; color: #c5c9ce; margin: 0; max-width: 640px; }
.rc-hero__note {
	display: inline-block; margin: 18px 0 0; padding: 6px 14px;
	border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
	font-size: .8rem; letter-spacing: .06em; color: var(--white);
}

/* --- 要点：タグ --- */
.rc-summary { padding-top: 48px; }
.rc-tags { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rc-tags li {
	font-size: .78rem; font-weight: 700; letter-spacing: .06em;
	padding: 6px 14px; border-radius: 999px;
	background: var(--white); border: 1px solid var(--line); color: var(--charcoal);
}

/* --- 要点：ベントー型カード（給与を大きく、他3項目を並べる） --- */
.rc-facts {
	display: grid; gap: 14px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-areas: "pay pay a b" "pay pay c c";
}
.rc-facts > :nth-child(1) { grid-area: pay; }
.rc-facts > :nth-child(2) { grid-area: a; }
.rc-facts > :nth-child(3) { grid-area: b; }
.rc-facts > :nth-child(4) { grid-area: c; }
.rc-fact {
	background: var(--white); border: 1px solid var(--line); border-radius: 14px;
	padding: 22px 22px 20px; min-width: 0;
	display: flex; flex-direction: column; gap: 6px;
}
.rc-fact__label { margin: 0; font-size: .75rem; letter-spacing: .14em; color: var(--gray); font-weight: 700; }
.rc-fact__value { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.6; text-wrap: pretty; }
.rc-fact__value--s { font-size: .98rem; }
.rc-fact__note { margin: auto 0 0; font-size: .8rem; color: var(--gray); line-height: 1.7; }
.rc-fact--pay {
	background: var(--ink); color: var(--white); border-color: var(--ink);
	justify-content: center; padding: 32px 30px;
	background-image: radial-gradient(120% 80% at 100% 0%, rgba(165,128,74,.28), transparent 60%);
}
.rc-fact--pay .rc-fact__label { color: #c9a874; }
.rc-fact--pay .rc-fact__value {
	font-family: var(--font-mincho); font-weight: 500;
	font-size: clamp(1.7rem, 4.2vw, 2.6rem); letter-spacing: .04em; line-height: 1.35;
}
.rc-fact--pay .rc-fact__note { color: #c5c9ce; margin-top: 10px; }

/* --- 応募ボタン --- */
.rc-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.rc-actions--center { margin-top: 26px; }
.rc-actions .btn--large { font-size: 1.05rem; padding: 1.05em 2.6em; }
.rc-actions .btn--ghost-light { border: 1px solid rgba(255,255,255,.75); color: var(--white); background: transparent; }

/* 応募の案内文 */
.rc-apply { margin-top: 30px; }
.rc-apply .rc-actions { margin-top: 0; }
.rc-apply__note { max-width: 640px; margin: 14px auto 0; text-align: center; font-size: .8rem; color: var(--gray); line-height: 1.8; }
.rc-apply--dark .rc-apply__note { color: #c5c9ce; }

/* --- 働く環境 --- */
.rc-lead { max-width: 720px; margin: -20px auto 36px; text-align: center; color: var(--charcoal); text-wrap: pretty; }
.rc-features {
	list-style: none; margin: 0; padding: 0; counter-reset: rcf;
	display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.rc-feature {
	counter-increment: rcf; position: relative;
	background: var(--white); border: 1px solid var(--line); border-radius: 14px;
	padding: 26px 24px 22px;
}
.rc-feature::before {
	content: counter(rcf, decimal-leading-zero);
	font-family: var(--font-serif-en); font-size: 1.5rem; color: var(--gold);
	display: block; line-height: 1; margin-bottom: 12px;
}
.rc-feature h3 { margin: 0 0 8px; font-size: 1.02rem; letter-spacing: .04em; text-wrap: balance; }
.rc-feature p { margin: 0; font-size: .9rem; color: var(--gray); line-height: 1.85; }

/* --- 募集要項 --- */
.rc-req { margin: 0; border-top: 1px solid var(--line); }
.rc-req > div {
	display: grid; grid-template-columns: 9.5em 1fr; gap: 16px;
	padding: 18px 4px; border-bottom: 1px solid var(--line);
}
.rc-req dt { font-weight: 700; font-size: .9rem; color: var(--charcoal); }
.rc-req dd { margin: 0; font-size: .93rem; line-height: 1.85; }
.rc-req dd strong { font-size: 1.05rem; }
.rc-benefits { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.rc-benefits li { font-size: .82rem; padding: 3px 12px; border-radius: 999px; background: var(--tint); }

/* --- キャリアパス／応募の流れ --- */
.rc-two { display: grid; gap: 48px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rc-two .section__en, .rc-two .section__title { text-align: left; }
.rc-steps { list-style: none; margin: 0; padding: 0; counter-reset: rcs; }
.rc-steps li {
	counter-increment: rcs; position: relative;
	padding: 0 0 22px 52px; display: flex; flex-direction: column;
}
.rc-steps li::before {
	content: counter(rcs); position: absolute; left: 0; top: 0;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--white); border: 1px solid var(--ink);
	display: grid; place-items: center;
	font-family: var(--font-serif-en); font-size: 1rem;
}
.rc-steps li:not(:last-child)::after {
	content: ''; position: absolute; left: 17px; top: 36px; bottom: 2px;
	width: 1px; background: var(--line);
}
.rc-steps__name { font-weight: 700; font-size: .98rem; line-height: 34px; }
.rc-steps__desc { font-size: .85rem; color: var(--gray); }
.rc-steps--flow li::before { background: var(--ink); color: var(--white); }
.rc-small { font-size: .82rem; color: var(--gray); margin: 4px 0 0; }

/* --- FAQ（ブランドトップにも同じ見た目で出すため、ここで定義） ---
   ブランドトップの既存 FAQ は「Q.」を絶対配置・開閉アイコンを罫線で描いているため、
   求人ページでは位置・罫線・回転をすべて打ち消してから描き直す */
.rc-faq { display: grid; gap: 12px; }
.rc-faq .faq__item { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 0 22px; }
.rc-faq .faq__item summary {
	cursor: pointer; list-style: none; position: relative;
	padding: 18px 2.2em 18px 0; font-weight: 700; font-size: .95rem; line-height: 1.7;
}
.rc-faq .faq__item summary::-webkit-details-marker { display: none; }
.rc-faq .faq__item summary::before {
	content: 'Q. '; position: static; display: inline;
	color: var(--gray-light); font-family: var(--font-serif-en); font-style: normal;
}
.rc-faq .faq__item summary::after {
	content: '+'; position: absolute; right: 2px; top: 50%; left: auto;
	width: auto; height: auto; border: 0;
	transform: translateY(-50%); transition: none;
	color: var(--gray-light); font-size: 1.25rem; line-height: 1;
}
.rc-faq .faq__item[open] summary::after { content: '−'; transform: translateY(-50%); }
.rc-faq .faq__item p { margin: 0; padding: 0 0 18px; font-size: .9rem; color: var(--gray); line-height: 1.9; }

/* --- 見出しの揃え（ブランドトップの見出しは左寄せが既定のため、求人ページでは中央に統一） --- */
.rc-page .section__en, .rc-page .section__title { text-align: center; }
.rc-page .section__title { margin-bottom: 40px; text-wrap: balance; }
.rc-page .rc-two .section__en, .rc-page .rc-two .section__title { text-align: left; }
.rc-page .rc-two .section__title { margin-bottom: 20px; }
.rc-page .rc-final .section__title { margin-bottom: 14px; }

/* --- 最後の応募エリア --- */
.rc-final { text-align: center; }
.rc-final .section__title { margin-bottom: 14px; }
.rc-final__pay { margin: 0; font-family: var(--font-mincho); font-size: clamp(1.1rem, 2.6vw, 1.4rem); color: #e2c79c; letter-spacing: .06em; }

/* --- 他店舗の募集 --- */
.rc-stores__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.rc-store {
	display: flex; flex-direction: column; gap: 2px; height: 100%;
	padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px;
	background: var(--white); color: var(--ink); text-decoration: none;
	transition: border-color .2s, transform .2s;
}
.rc-store:hover { opacity: 1; border-color: var(--ink); transform: translateY(-2px); }
.rc-store__area { font-size: .72rem; color: var(--gray); letter-spacing: .12em; }
.rc-store__name { font-weight: 700; font-size: .98rem; }
.rc-store__pay { font-size: .85rem; color: var(--gold-aa); font-weight: 700; }
.rc-store__note { font-size: .75rem; color: var(--gray); }

/* --- 募集休止 --- */
.rc-paused { text-align: center; }

/* --- スマホ固定の応募バー --- */
.rc-sticky { display: none; }

@media (max-width: 900px) {
	.rc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "pay pay" "a b" "c c"; }
	.rc-two { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 767px) {
	.rc-summary { padding-top: 32px; }
	.rc-facts { grid-template-columns: 1fr; grid-template-areas: "pay" "a" "b" "c"; }
	.rc-fact--pay { padding: 26px 22px; }
	.rc-req > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 2px; }
	.rc-actions .btn { width: 100%; white-space: normal; }
	.rc-stores__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.rc-store { padding: 14px 14px; }
	.rc-store__name { font-size: .9rem; }
	.rc-sticky {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
		z-index: 50; padding: 10px 10px 10px 18px; border-radius: 999px;
		background: rgba(28,29,32,.92); color: var(--white);
		-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
		box-shadow: 0 8px 24px rgba(0,0,0,.18);
		transform: translateY(140%); transition: transform .3s ease;
	}
	.rc-sticky.is-visible { transform: none; }
	.rc-page { padding-bottom: 84px; }
	.rc-sticky__pay { font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
	.rc-sticky .btn { padding: .7em 1.6em; border-radius: 999px; }
}
@media (prefers-reduced-motion: reduce) {
	.rc-sticky, .rc-store { transition: none; }
}

/* 一覧カードの補足（休日・休止） */
.rc-store__meta { font-size: .75rem; color: var(--gray); line-height: 1.6; }
.rc-store.is-paused { background: var(--tint); }

/* ブランドトップの一覧（地域ごと） */
.rc-regions { display: grid; gap: 30px; }
.rc-region__name { font-size: .95rem; letter-spacing: .12em; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.rc-lead--light { color: #c5c9ce; margin-top: -24px; }
.rc-backlink { text-align: center; margin: 0; padding: 0 0 72px; }