/* ── 基本設定 ─────────────────────────────── */
:root {
  --career-ink: #111111;
  --career-red: #dc2626;
  --career-line: #dedede;
  --career-paper: #f6f6f5;
  --career-green: #06C755;
  --career-width: 1040px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 84px; }
body { margin: 0; color: var(--career-ink); background: #fff; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 1.9; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
a { color: inherit; text-underline-offset: 5px; }
a:focus-visible { outline: 3px solid var(--career-red); outline-offset: 5px; }
img { display: block; max-width: 100%; }
.career-container { width: min(var(--career-width), calc(100% - 80px)); margin-inline: auto; }
.career-section { padding-block: 104px; scroll-margin-top: 64px; }
.career-heading { max-width: 940px; margin-bottom: 40px; font-size: clamp(27px, 3.15vw, 40px); line-height: 1.6; letter-spacing: -.035em; font-weight: 900; overflow-wrap: anywhere; }
.career-heading::before { content: ''; display: block; width: 36px; height: 3px; background: var(--career-red); margin-bottom: 26px; }
.career-copy { max-width: 780px; }
.career-copy + .career-copy { margin-top: 24px; }
.career-lead { margin-bottom: 40px; font-size: 18px; font-weight: 700; }
.career-subheading { font-size: 22px; margin-block: 56px 24px; }
.career-note { margin-top: 40px; padding: 32px 36px; border-left: 3px solid var(--career-red); background: var(--career-paper); }
.career-note h3 { font-size: 20px; margin-bottom: 18px; }
/* ── ヘッダーと相談ボタン ─────────────────────── */
.career-header { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--career-line); }
.career-header__inner { max-width: var(--career-width); min-height: 64px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.career-header__logo img { height: 28px; width: auto; }
.career-button { display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 60px; width: min(100%, 360px); padding: 14px 24px; background: var(--career-green); color: #fff; border-radius: 3px; text-decoration: none; font-size: 18px; font-weight: 700; line-height: 1.5; }
.career-button::after { content: ''; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.career-button:hover { background: #05b54d; }
.career-header .career-button { min-height: 40px; width: auto; font-size: 15px; padding: 9px 20px; gap: 16px; }
.career-cta { margin-top: 36px; }
.career-cta p { margin-top: 12px; font-size: 15px; }
.career-mobile-cta { display: none; }
/* ── 01 横川店の限定募集 ──────────────────────── */
.career-hero { position: relative; padding-block: 96px 88px; background: #111; color: #fff; isolation: isolate; }
.career-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.84), rgba(0,0,0,.63)), url('../images/store-yokogawa.webp') center 52% / cover no-repeat; }
.career-hero__label { display: inline-block; padding: 4px 12px; border-left: 3px solid var(--career-red); background: rgba(0,0,0,.4); font-weight: 700; font-size: 17px; margin-bottom: 20px; }
.career-hero .career-heading { font-size: clamp(28px, 3.6vw, 50px); line-height: 1.6; margin-bottom: 22px; max-width: 1040px; }
.career-hero .career-heading::before { display: none; }
.career-hero .career-copy { max-width: 860px; color: #eee; }
.career-hero__details { display: grid; grid-template-columns: 1fr 1fr; max-width: 850px; margin-top: 30px; border-top: 1px solid #666; }
.career-hero__details > div { display: flex; gap: 20px; padding: 12px 0; border-bottom: 1px solid #666; }
.career-hero__details dt { flex: 0 0 4em; font-size: 14px; color: #ccc; padding-top: 2px; }
.career-hero__details dd { font-weight: 700; font-size: 16px; }
.career-hero .career-cta { margin-top: 28px; }
/* ── 02 募集の理由・03 働き方の課題 ───────────────── */
.career-why .career-copy { margin-left: auto; }
.career-pain { color: #fff; background: #111111; }
.career-pain__lines { border-left: 1px solid #4b4b4b; padding-left: 32px; margin-block: 48px; }
.career-pain__lines p { font-size: clamp(23px, 3vw, 34px); line-height: 1.8; font-weight: 700; margin-top: 10px; }
.career-pain__lines p:first-child { font-size: 18px; font-weight: 400; color: #bbb; margin-bottom: 22px; }
/* ── 04 やらないこと・05 成長の仕組み ──────────────── */
.career-promises { list-style: none; counter-reset: promise; padding: 0; margin: 0; border-top: 1px solid var(--career-ink); }
.career-promises__item { counter-increment: promise; display: grid; grid-template-columns: 1fr 1fr; column-gap: 42px; padding: 28px 0 28px 52px; border-bottom: 1px solid var(--career-line); position: relative; align-items: baseline; }
.career-promises__item::before { content: counter(promise, decimal-leading-zero); position: absolute; top: 22px; left: 0; font-family: 'Bebas Neue', sans-serif; font-size: 30px; color: var(--career-red); }
.career-promises__item h3 { font-size: 18px; line-height: 1.8; }
.career-promises__item p { color: #444; }
.career-growth { background: var(--career-paper); }
.career-growth__lines { font-size: 26px; line-height: 2; font-weight: 700; margin-block: 40px; }
.career-support { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; padding: 0; margin: 36px 0 0; list-style: none; }
.career-support li { padding: 16px 0; border-top: 1px solid #ccc; font-weight: 500; }
/* ── 06 続けられる環境・07 応募条件・08 経験 ──────────── */
.career-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-bottom: 40px; }
.career-facts__item { border-top: 2px solid var(--career-ink); padding-top: 26px; }
.career-facts__item h3 { font-size: 24px; margin-bottom: 22px; letter-spacing: -.03em; }
.career-wanted { background: var(--career-paper); }
.career-wanted .career-note { background: #fff; }
.career-list { list-style: none; padding: 0; margin: 0; }
.career-list li { position: relative; padding: 17px 0 17px 28px; border-bottom: 1px solid var(--career-line); }
.career-list li::before { content: ''; position: absolute; top: 29px; left: 1px; width: 11px; height: 6px; border-left: 2px solid var(--career-red); border-bottom: 2px solid var(--career-red); transform: rotate(-45deg); }
/* ── 09 給与と待遇 ──────────────────────────── */
.career-salary { background: var(--career-paper); }
.career-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 48px; margin-bottom: 40px; }
.career-pay > div { border-top: 1px solid var(--career-ink); padding-top: 20px; }
.career-pay dt { font-size: 15px; margin-bottom: 8px; }
.career-pay dd { font-size: 22px; font-weight: 700; }
.career-salary__table { width: 100%; margin-top: 32px; border-collapse: collapse; text-align: center; background: #fff; }
.career-salary__table caption { text-align: left; font-weight: 700; margin-bottom: 16px; font-size: 20px; }
.career-salary__table th { padding: 16px 12px; background: #111; color: #fff; font-weight: 500; }
.career-salary__table td { padding: 23px 12px; border-bottom: 1px solid var(--career-line); }
.career-salary__table td:last-child { font-size: 24px; font-weight: 900; }
.career-salary__note { font-size: 15px; margin-top: 14px; }
.career-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; padding: 0; list-style: none; margin: 0; }
.career-benefits li { border-bottom: 1px solid var(--career-line); padding: 14px 0 14px 18px; position: relative; }
.career-benefits li::before { content: ''; width: 4px; height: 4px; background: var(--career-red); position: absolute; left: 0; top: 28px; }
/* ── 08.5 前職給与の6ヶ月保証 ──────────────────── */
.career-guarantee { color: #fff; background: var(--career-ink); }
.career-guarantee .career-lead { font-size: clamp(21px, 2.5vw, 28px); font-weight: 900; margin-bottom: 12px; }
.career-guarantee__cond { font-size: 14px; color: #bdbdbd; margin-bottom: 40px; }
.career-guarantee .career-list li { border-bottom-color: #3a3a3a; }
.career-guarantee .career-note { background: #1e1e1e; }
/* ── 10 店舗写真・店舗情報 ──────────────────────── */
.career-salon__photos { margin-block: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.career-salon__photos figure:first-child { grid-column: 1 / -1; }
.career-salon__photos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.career-salon__photos figure:first-child img { aspect-ratio: 2.2 / 1; }
.career-salon__photos figcaption { font-size: 15px; color: #555; margin-top: 8px; }
.career-details > div { display: grid; grid-template-columns: 160px 1fr; padding: 20px 0; border-bottom: 1px solid var(--career-line); gap: 24px; }
.career-details dt { font-weight: 700; }
.career-details dd { overflow-wrap: anywhere; }
/* ── 11 選考の流れ・12 質問 ─────────────────────── */
.career-flow { background: var(--career-paper); }
.career-flow__list { list-style: none; margin: 40px 0 0; padding: 0; }
.career-flow__item { display: grid; grid-template-columns: 96px 1fr; gap: 30px; padding-block: 28px; border-top: 1px solid #ccc; }
.career-flow__number { font-family: 'Bebas Neue', sans-serif; font-size: 30px; color: var(--career-red); line-height: 1.4; }
.career-flow__item h3 { font-size: 21px; margin-bottom: 12px; }
.career-flow__item p { max-width: 760px; }
.career-faq__item { padding-block: 28px; border-top: 1px solid var(--career-line); }
.career-faq__item dt, .career-faq__item dd { display: grid; grid-template-columns: 28px 1fr; gap: 16px; }
.career-faq__item dt { font-weight: 700; font-size: 18px; }
.career-faq__item dd { margin-top: 14px; color: #444; }
.career-faq__item span { font-family: 'Bebas Neue', sans-serif; font-size: 26px; line-height: 1.4; }
.career-faq__item dt span { color: var(--career-red); }
/* ── 13 最後の相談案内・フッター ──────────────────── */
.career-last { background: var(--career-paper); border-top: 3px solid var(--career-red); }
.career-last .career-container { max-width: 780px; }
.career-last .career-list { margin-top: 32px; }
.career-footer { padding-block: 40px; border-top: 1px solid var(--career-line); }
.career-footer .career-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.career-footer p { font-size: 14px; font-weight: 700; }
.career-footer a { font-size: 14px; margin-right: 20px; }
.career-footer small { color: #666; }
/* ── 表示時の動き ───────────────────────────── */
.career-reveal { transition: opacity .6s ease, transform .6s ease; transition-delay: var(--delay, 0s); }
.career-reveal--pending { opacity: 0; transform: translateY(18px); }
/* ── スマートフォン ──────────────────────────── */
@media (max-width: 1120px) {
  .career-header__inner { margin-inline: 40px; }
}
@media (max-width: 767px) {
  body { font-size: 15px; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .career-container { width: calc(100% - 48px); }
  .career-section { padding-block: 72px; }
  .career-heading { font-size: 27px; margin-bottom: 28px; line-height: 1.65; }
  .career-heading::before { margin-bottom: 20px; }
  .career-header__inner { margin-inline: 24px; }
  .career-header .career-button { display: none; }
  .career-header__inner { min-height: 56px; }
  .career-hero { padding-block: 32px 36px; }
  .career-hero__label { font-size: 13px; padding-inline: 8px; margin-bottom: 18px; }
  .career-hero .career-heading { font-size: 27px; line-height: 1.6; letter-spacing: -.045em; }
  .career-hero__details { grid-template-columns: 1fr; margin-top: 22px; }
  .career-hero__details > div { padding-block: 9px; gap: 12px; }
  .career-hero__details dt { font-size: 13px; }
  .career-hero__details dd { font-size: 15px; }
  .career-button { font-size: 17px; min-height: 56px; }
  .career-cta p { font-size: 15px; }
  .career-mobile-cta:not([hidden]) { display: block; position: fixed; z-index: 20; inset: auto 0 0; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--career-line); }
  .career-mobile-cta .career-button { width: 100%; min-height: 56px; }
  .career-pain__lines { padding-left: 20px; margin-block: 32px; }
  .career-promises__item { grid-template-columns: 1fr; gap: 10px; padding-left: 40px; padding-block: 24px; }
  .career-promises__item::before { font-size: 26px; }
  .career-promises__item h3 { font-size: 17px; }
  .career-lead { font-size: 17px; margin-bottom: 28px; }
  .career-growth__lines { font-size: 23px; }
  .career-support, .career-facts, .career-pay, .career-benefits { grid-template-columns: 1fr; }
  .career-facts { gap: 32px; }
  .career-facts__item h3 { font-size: 23px; }
  .career-note { padding: 24px 20px; }
  .career-note h3 { font-size: 19px; }
  .career-pay { gap: 20px; }
  .career-pay dd { font-size: 20px; }
  .career-salary__table th { padding: 13px 6px; font-size: 14px; }
  .career-salary__table td { padding: 18px 6px; }
  .career-salary__table td:last-child { font-size: 20px; }
  .career-salon__photos { gap: 18px 14px; }
  .career-salon__photos figure:first-child img { aspect-ratio: 4 / 3; }
  .career-details > div { grid-template-columns: 1fr; gap: 6px; padding-block: 18px; }
  .career-flow__item { grid-template-columns: 60px 1fr; gap: 18px; }
  .career-flow__number { font-size: 25px; }
  .career-flow__item h3 { font-size: 19px; }
  .career-faq__item dt { font-size: 17px; }
  .career-faq__item dt, .career-faq__item dd { gap: 10px; grid-template-columns: 24px 1fr; }
  .career-footer .career-container { display: block; }
  .career-footer p, .career-footer .career-container > div { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .career-reveal--pending { opacity: 1; transform: none; }
}