@import url("styles.css");

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);letter-spacing:var(--tracking-normal)}
a{color:var(--text-link)}
a:hover{color:var(--text-link-hover)}

/* 会社サイト（DMC Aizuトップページ）へ戻る帯。ヒーローと同じ地色で上に載せる */
.site-bar{background:var(--surface-header);border-bottom:var(--border-hairline) solid rgba(255,255,255,.22)}
.site-bar__inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-4)}
.site-bar__link{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--tap-min);font:var(--type-label);color:var(--text-inverse);text-decoration:none}
.site-bar__link:hover{color:var(--text-inverse);text-decoration:underline}
.site-bar__link:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.site-bar__arrow{color:var(--navy-100)}
.hero{background:var(--surface-header);color:var(--text-inverse)}
.hero__inner{display:grid;gap:var(--space-6);max-width:var(--container-max);margin:0 auto;padding:var(--space-8) var(--space-4) var(--space-7)}
@media (min-width:900px){.hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,42%);align-items:end;gap:var(--space-7)}}
.hero__media{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--radius-md);overflow:hidden;background:rgba(255,255,255,.08)}
@media (min-width:900px){.hero__media{aspect-ratio:16/11}}
.hero__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 900ms ease}
.hero__slide.is-current{opacity:1}
.hero__caption{position:absolute;inset:auto 0 0 0;margin:0;padding:var(--space-4) var(--space-4) var(--space-3);font:var(--type-caption);color:var(--text-inverse);background:linear-gradient(to top,rgba(13,39,64,.72),rgba(13,39,64,0))}
.hero__dots{position:absolute;inset:auto var(--space-3) var(--space-3) auto;display:flex;gap:6px}
.hero__dot{width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer}
.hero__dot::before{content:"";width:7px;height:7px;border-radius:var(--radius-pill);background:rgba(255,255,255,.42)}
.hero__dot.is-current::before{background:var(--white)}
.hero__dot:focus-visible{outline:none;box-shadow:var(--ring-focus)}
@media (prefers-reduced-motion:reduce){.hero__slide{transition:none}}
.hero__kicker{margin:0 0 var(--space-3);font:var(--type-caption);color:var(--navy-100);letter-spacing:.32em}
.hero__title{margin:0 0 var(--space-3);font:var(--type-page-title);color:var(--text-inverse);letter-spacing:var(--tracking-tight)}
.hero__lead{margin:0;max-width:44em;color:var(--navy-100);text-wrap:pretty}
.hero__stats{display:flex;flex-wrap:wrap;gap:var(--space-6);margin:var(--space-6) 0 0;padding:var(--space-5) 0 0;border-top:var(--border-hairline) solid rgba(255,255,255,.22)}
.hero__stats>div{display:grid;gap:2px}
.hero__stats dt{font:var(--type-caption);color:var(--navy-100);letter-spacing:var(--tracking-wide)}
.hero__stats dd{margin:0;font:var(--type-section-title);color:var(--text-inverse)}
.hero__stats dd span{margin-left:2px;font:var(--type-caption);color:var(--navy-100)}
.page{max-width:var(--container-max);margin:0 auto;padding:var(--space-6) var(--space-4) var(--space-8)}
.page__title{margin:0 0 var(--space-2);font:var(--type-page-title);color:var(--text-strong);letter-spacing:var(--tracking-tight)}
.page__lead{margin:0;color:var(--text-muted);max-width:44em;text-wrap:pretty}

/* 絞り込み */
.filters{margin:0 0 var(--space-5);padding:var(--space-4) var(--space-5);background:var(--surface-card);border:var(--border-hairline) solid var(--line-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.filters__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4);padding-top:var(--space-3);justify-content:flex-end;border-top:var(--border-hairline) solid var(--line-subtle)}
.filters__actions .button{min-height:var(--tap-min);padding:0 var(--space-4)}
/* 事業所は候補数が多く使用頻度も高いため、常時表示のまま最上段に置く */
/* 後続の .conditions{margin:0;padding:0;border:0} に打ち消されないよう、2クラスで指定する */
.conditions.conditions--offices{margin:0 0 var(--space-4);padding:0 0 var(--space-4);border-bottom:var(--border-hairline) solid var(--line-subtle)}

/* エリア・施設の種類・職種は折りたたみ式のアコーディオンとして縦に並べる。初期状態は閉 */
.filters__groups{display:grid;gap:var(--space-2)}
.filters__groups .disclosure{margin-top:0}

/* 絞り込みチップ */
.conditions{margin:0;padding:0;border:0}
.conditions__legend{display:block;margin-bottom:var(--space-3);padding:0 0 var(--space-2);font:var(--type-label);color:var(--text-strong);border-bottom:2px solid var(--action-primary)}
/* チップは文字数によらず同じ幅で並べ、行の右端をそろえる */
.conditions__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(9em,1fr));gap:var(--space-2);margin-top:0}
.condition{display:inline-flex;align-items:center;justify-content:center;gap:0;text-align:center;min-height:var(--tap-min);padding:0 var(--space-3);font:var(--type-label);color:var(--text-body);background:var(--surface-sunken);border:var(--border-hairline) solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}
.condition:hover{border-color:var(--action-primary);color:var(--text-link)}
/* 列幅に収まらない名称だけ、はみ出さずに折り返す */
.condition__label{white-space:normal;overflow-wrap:anywhere}
.condition.is-unavailable{color:var(--text-muted);background:var(--surface-sunken);border-color:var(--line-subtle);cursor:not-allowed}
.condition.is-unavailable:hover{color:var(--text-muted);border-color:var(--line-subtle)}
.condition__box{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.condition:has(.condition__box:checked){color:var(--text-inverse);background:var(--action-primary);border-color:var(--action-primary)}
.condition:has(.condition__box:focus-visible){outline:none;box-shadow:var(--ring-focus)}

.button{min-height:var(--tap-min);padding:0 var(--space-5);font:var(--type-label);border-radius:var(--radius-md);border:var(--border-hairline) solid transparent;cursor:pointer;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.button:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.button--primary{background:var(--action-primary);color:var(--text-inverse)}
.button--primary:hover{background:var(--action-primary-hover)}
.button--secondary{background:var(--action-secondary-bg);color:var(--text-body);border-color:var(--line-default)}
.button--secondary:hover{background:var(--surface-sunken)}
.button--accent{background:var(--action-accent);color:var(--text-inverse)}
.button--accent:hover{background:var(--action-accent-hover)}
/* 「まとめて応募」系ボタン等、0件のときはグレーで押せないことを示す */
.button:disabled{background:var(--line-default);color:var(--text-muted);border-color:var(--line-default);cursor:not-allowed}
.button:disabled:hover{background:var(--line-default)}
/* <a> はdisabled属性が効かないため、aria-disabledで同じ見た目にする（例：応募リスト0件時の「応募フォームへ進む」） */
.button[aria-disabled="true"]{background:var(--line-default);color:var(--text-muted);border-color:var(--line-default);cursor:not-allowed;pointer-events:none}
.button[aria-disabled="true"]:hover{background:var(--line-default)}

/* マトリクス */
.matrix-section{margin-top:var(--space-6)}
.matrix-section__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}
.matrix-section__title{margin:0;font:var(--type-section-title);color:var(--text-strong)}
.matrix-section__count{font:var(--type-caption);color:var(--text-muted)}
.matrix-section__tools{display:flex;align-items:center;gap:var(--space-4)}
.matrix-section__cart{min-height:var(--tap-min);padding:0 var(--space-4)}
.matrix-viewport{position:relative}
.matrix-viewport::after{content:"";position:absolute;top:0;bottom:0;right:0;width:56px;pointer-events:none;z-index:4;opacity:0;transition:opacity .18s;background:linear-gradient(270deg,rgba(15,23,42,.16),rgba(15,23,42,0))}
.matrix-viewport.is-scrollable:not(.is-at-end)::after{opacity:1}
.matrix-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:40px;height:40px;display:none;align-items:center;justify-content:center;padding:0;font-size:24px;line-height:1;color:var(--text-strong);background:var(--surface-card);border:var(--border-hairline) solid var(--line-default);border-radius:999px;box-shadow:var(--shadow-card);cursor:pointer}
.matrix-viewport.is-scrollable .matrix-nav{display:flex}
.matrix-nav:hover:not(:disabled){background:var(--surface-accent-soft);border-color:var(--action-primary)}
.matrix-nav:disabled{opacity:.28;cursor:default}
.matrix-nav--prev{left:-14px}
.matrix-nav--next{right:-14px}
.matrix-range{margin-top:var(--space-2);font:var(--type-caption);color:var(--text-muted)}
.matrix-scroller{overflow-x:auto;background:var(--surface-card);border:var(--border-hairline) solid var(--line-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.matrix{border-collapse:separate;border-spacing:0;width:100%;min-width:640px}
.matrix th,.matrix td{border-bottom:var(--border-hairline) solid var(--line-subtle);padding:var(--space-3);text-align:center;white-space:nowrap}
.matrix__area{font:var(--type-label);color:var(--text-inverse);background:var(--surface-header);letter-spacing:var(--tracking-wide)}
.matrix__area+.matrix__area{border-left:var(--border-hairline) solid rgba(255,255,255,.28)}
.matrix__office{font:var(--type-label);color:var(--text-body);background:var(--surface-accent-soft);line-height:1.3}
.matrix th.matrix__corner{position:sticky;left:0;z-index:3;background:var(--surface-header);color:var(--text-inverse);font:var(--type-label);text-align:left;letter-spacing:var(--tracking-wide);box-shadow:var(--shadow-sticky-col)}
.matrix th.matrix__rowhead{position:sticky;left:0;z-index:2;background:var(--surface-card);color:var(--text-strong);font:var(--type-card-title);text-align:left;box-shadow:var(--shadow-sticky-col);overflow-wrap:anywhere;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;font-size:14px;width:10em;min-width:10em;max-width:10em;line-height:1.4}
.matrix tbody tr:nth-child(even) .matrix__rowhead,.matrix tbody tr:nth-child(even) .matrix__cell{background:var(--grey-50)}
.matrix__cell{background:var(--surface-card);min-width:160px;vertical-align:top;text-align:left}
.matrix__cell.is-area-start,.matrix__office.is-area-start{border-left:var(--border-hairline) solid var(--line-default)}
.matrix__none{color:var(--status-closed-fg)}

.job-detail-button{min-width:var(--tap-min);min-height:var(--tap-min);padding:0 var(--space-3);font:var(--type-label);font-size:var(--text-lg);line-height:1;color:var(--status-open-fg);background:var(--status-open-bg);border:var(--border-hairline) solid var(--navy-200);border-radius:var(--radius-md);cursor:pointer;transition:background var(--duration-fast) var(--ease-standard)}
.job-detail-button:hover{background:var(--navy-100)}
.job-detail-button:active{background:var(--navy-200)}
.job-detail-button:focus-visible{outline:none;box-shadow:var(--ring-focus)}

/* セル内：募集中ボタン ＋ 応募チェック（同じ行に複数の求人が入る場合は縦に並ぶ） */
.cell-group{display:flex;flex-direction:column;gap:var(--space-3)}
.cell-stack{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);max-width:100%}
.cell-facility{display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap-min);text-align:left;position:relative}
.cell-pick__multi{flex:none;width:18px;height:18px;padding:0;display:flex;align-items:center;justify-content:center;font:var(--type-caption);font-size:13px;line-height:1;color:var(--text-inverse);background:var(--surface-card);border:1.5px solid var(--line-default);border-radius:3px;cursor:pointer}
.cell-pick__multi[data-state="all"],.cell-pick__multi[data-state="some"]{background:var(--action-primary);border-color:var(--action-primary)}
.cell-pick__multi:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.cell-facility__name{flex:1;min-width:0;padding:var(--space-2);font:var(--type-label);line-height:1.3;color:var(--text-link);text-align:left;background:var(--navy-50);border:var(--border-hairline) solid var(--line-default);border-radius:var(--radius-sm);white-space:normal;overflow-wrap:break-word;word-break:normal;line-break:strict;cursor:pointer}
.cell-facility__name:hover{background:var(--navy-100)}
.cell-facility__name:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.cell-facility__qual{display:block;font:var(--type-caption);color:var(--text-muted)}
.cell-facility__sub{display:block;margin-top:2px;font:var(--type-caption);color:var(--text-muted);line-height:1.3}

/* 応募リストバー */
.apply-cart{position:fixed;inset:auto 0 0 0;z-index:40;background:var(--surface-header);color:var(--text-inverse);box-shadow:0 -2px 12px rgba(13,39,64,.24)}
.apply-cart__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);max-width:var(--container-max);margin:0 auto;padding:var(--space-3) var(--space-4)}
.apply-cart__count{margin:0;font:var(--type-card-title);color:var(--text-inverse)}
.apply-cart__names{margin:2px 0 0;font:var(--type-caption);color:var(--navy-100);max-width:60ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apply-cart__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
body.has-cart .page{padding-bottom:calc(var(--space-8) + 64px)}

/* まとめて応募ダイアログ */
.apply-dialog{width:min(680px,calc(100vw - 24px));max-height:min(85vh,760px);padding:0;border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-dialog);color:var(--text-body);overflow:auto}
.apply-dialog::backdrop{background:rgba(13,39,64,.45)}
.apply-dialog__inner{padding:var(--space-5)}
.apply-dialog__title{margin:0 0 var(--space-1);font:var(--type-section-title);color:var(--text-strong)}
.apply-dialog__lead{margin:0 0 var(--space-4);color:var(--text-muted);font:var(--type-label)}
.apply-dialog__note{margin:var(--space-4) 0 0;font:var(--type-caption);color:var(--text-muted)}
.apply-dialog__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-5);padding-top:var(--space-4);border-top:var(--border-hairline) solid var(--line-subtle)}
.apply-dialog__actions .button{display:inline-flex;align-items:center;text-decoration:none}
.apply-dialog__actions .button--accent:hover{color:var(--text-inverse)}
.apply-list{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.apply-list__item{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);padding:var(--space-4);background:var(--surface-sunken);border-radius:var(--radius-md)}
.apply-list__office{margin:0;font:var(--type-label);color:var(--text-strong)}
.apply-list__job{margin:0;font:var(--type-label);color:var(--text-body)}
.apply-list__remove{min-height:var(--tap-min);padding:0 var(--space-3);font:var(--type-label);color:var(--text-link);background:var(--white);border:var(--border-hairline) solid var(--line-default);border-radius:var(--radius-sm);cursor:pointer;flex:none}
.apply-list__remove:hover{background:var(--white);color:var(--text-link-hover)}
.apply-empty{margin:var(--space-3) 0 0;color:var(--text-muted);font:var(--type-caption)}

.matrix-empty{padding:var(--space-7) var(--space-4);text-align:center;color:var(--text-muted);background:var(--surface-card);border:var(--border-hairline) solid var(--line-subtle);border-radius:var(--radius-lg)}
.matrix-note{margin:var(--space-3) 0 0;font:var(--type-caption);color:var(--text-muted)}

.apply-list__main{min-width:0}
.apply-list__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2)}
.apply-tags{display:flex;flex-wrap:wrap;gap:6px;margin:var(--space-2) 0 0;padding:0;list-style:none}
.apply-tags__item{padding:2px var(--space-2);font:var(--type-caption);color:var(--text-body);background:var(--surface-accent-soft);border-radius:var(--radius-sm)}
.apply-list__facts{grid-template-columns:6.5em 1fr;gap:2px var(--space-3);margin-top:var(--space-3);font:var(--type-caption)}
.apply-list__actions{display:grid;gap:6px;align-content:start;justify-items:end;flex:none}
.apply-list__detail{min-height:var(--tap-min);padding:0 var(--space-3);font:var(--type-label);color:var(--text-link);background:var(--white);border:var(--border-hairline) solid var(--line-default);border-radius:var(--radius-sm);cursor:pointer}
.apply-list__detail:hover{background:var(--surface-accent-soft)}
.apply-list__detail:focus-visible{outline:none;box-shadow:var(--ring-focus)}

/* 事業所詳細ダイアログ */
body.is-dialog-open{overflow:hidden}
.office-dialog{width:min(1080px,calc(100vw - 32px));max-height:min(88vh,880px);padding:0;border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-dialog);color:var(--text-body);overflow:hidden}
.office-dialog[open]{display:flex;flex-direction:column}
.office-dialog::backdrop{background:rgba(13,39,64,.45)}
.office-dialog__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-3) var(--space-4);padding:var(--space-5);border-bottom:var(--border-hairline) solid var(--line-subtle);background:var(--surface-card)}
.office-dialog__headings{flex:1 1 22em;min-width:0}
.office-dialog__title{overflow-wrap:anywhere}
.office-dialog__meta{margin:0 0 var(--space-1);font:var(--type-caption);color:var(--text-muted);letter-spacing:var(--tracking-wide)}
.office-dialog__title{margin:0;font:var(--type-section-title);color:var(--text-strong)}
.office-dialog__title-link{color:inherit;text-decoration:none;border-bottom:var(--border-hairline) dashed var(--line-strong)}
.office-dialog__title-link:hover{color:var(--text-link-hover);border-bottom-color:var(--text-link-hover)}
.office-dialog__title-link:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.office-dialog__title-link::after{content:"↗";display:inline-block;margin-left:0.25em;font-size:0.6em;vertical-align:super;color:var(--text-muted)}
.office-dialog__header-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);flex:0 0 auto;margin-left:auto}
.office-dialog__cart{min-height:var(--tap-min);padding:0 var(--space-4);text-decoration:none}
.office-dialog__close{min-height:var(--tap-min);padding:0 var(--space-4);font:var(--type-label);color:var(--text-body);background:var(--white);border:var(--border-hairline) solid var(--line-default);border-radius:var(--radius-md);cursor:pointer;flex:none}
.office-dialog__close:hover{background:var(--surface-sunken)}
.office-dialog__close:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.office-dialog__body{position:relative;overflow-y:auto;overscroll-behavior:contain;padding:var(--space-5);background:var(--surface-card)}
.office-dialog__body:focus-visible{outline:none}
.office-dialog .office-dialog__body{padding-bottom:80px}
.job-picker-trigger{position:absolute;bottom:12px;right:16px;z-index:2;min-height:44px;box-shadow:0 3px 14px #0003;border-radius:24px}
.job-picker{position:fixed;inset:0;width:min(560px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:min(640px,calc(100dvh - 48px));margin:auto;padding:0;border:0;border-radius:20px;color:var(--text-body);background:var(--surface-card);box-shadow:var(--shadow-dialog);overflow:hidden;box-sizing:border-box}
.job-picker[open]{display:flex;flex-direction:column}
.job-picker::backdrop{background:rgba(13,39,64,.35)}
.job-picker__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-bottom:1px solid var(--line-subtle);flex-shrink:0}
.job-picker__title{margin:0;font:var(--type-section-title)}
.job-picker__list{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 16px max(16px,env(safe-area-inset-bottom))}
.job-picker__group-label{margin:12px 0 2px;font:var(--type-caption);color:var(--text-muted);letter-spacing:var(--tracking-wide)}
.job-picker__group-label:first-child{margin-top:0}
.job-picker__option{display:block;width:100%;min-height:48px;padding:12px 8px;text-align:left;font:inherit;color:var(--text-body);background:transparent;border:0;border-bottom:1px solid var(--line-subtle);cursor:pointer;overflow-wrap:anywhere}
.job-picker__option[aria-current="true"]{background:var(--surface-accent-soft);font-weight:bold}
.job-picker__option:hover{background:var(--surface-sunken)}
.job-picker__option:focus-visible{outline:2px solid var(--action-primary);outline-offset:-2px}

/* ダイアログ内ナビ。本文と一緒にスクロールする（固定しない） */
.office-dialog__nav{margin:0 0 var(--space-5);padding:var(--space-4);background:var(--surface-sunken);border:var(--border-hairline) solid var(--line-subtle);border-radius:var(--radius-md)}
.dialog-nav{display:grid;gap:var(--space-2)}
.dialog-nav__select{flex:1;min-width:0;width:100%;max-width:100%;min-height:44px;padding:8px 12px;font:inherit;font-size:16px;color:var(--text-body);background:var(--white);border:1px solid var(--line-default);border-radius:var(--radius-sm)}
.dialog-nav__select:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.dialog-nav__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.dialog-nav__label{font:var(--type-caption);color:var(--text-muted);letter-spacing:var(--tracking-wide);min-width:6em}
/* 職種チップの操作説明（ナビの先頭） */
.dialog-nav__hint{margin:0;font-size:14px;line-height:1.5;color:var(--text-muted)}
/* 募集職種は、マトリクス表の分類（お客様対応・調理…）ごとに枠で囲む。
   枠の幅は中身（最大8個分）に合わせて縮み、求人が少ない分類は小さく収まる。
   空いた分だけ次の枠を右側に詰めて並べ、大きい枠の右の空白に小さい枠が回り込むようにする。
   タップで該当の職種説明へ移動する。 */
.dialog-nav__job-groups{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-2)}
.dialog-nav__job-group{padding:var(--space-2);background:var(--white);border:var(--border-hairline) solid var(--line-subtle);border-radius:var(--radius-md)}
.dialog-nav__job-group-title{display:flex;align-items:center;gap:var(--space-2);margin:0 0 6px;font:var(--type-caption);font-weight:bold;color:var(--text-muted);letter-spacing:var(--tracking-wide);white-space:nowrap}
.dialog-nav__job-group-title::after{content:"";flex:1;height:0;border-top:var(--border-hairline) solid var(--line-subtle)}
.dialog-nav__job-group-grid{display:flex;flex-wrap:wrap;gap:6px;max-width:calc(8 * 90px + 7 * 6px)}
.dialog-nav__job-group-grid .dialog-nav__chip{flex:0 0 90px;min-height:56px;padding:4px;font-size:11px;line-height:1.3;text-align:center;display:flex;align-items:center;justify-content:center}
/* 事業所ごとの並び順の指定で、意図的に次の行へ改行する位置に挿む幅0の要素 */
.dialog-nav__job-group-break{flex-basis:100%;height:0}
.dialog-nav__chip{min-height:var(--tap-min);padding:0 var(--space-3);font:var(--type-label);color:var(--text-link);background:var(--white);border:var(--border-hairline) solid var(--line-default);border-radius:var(--radius-sm);cursor:pointer;touch-action:manipulation}
.dialog-nav__chip:hover{background:var(--surface-accent-soft)}
.dialog-nav__chip:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.dialog-nav__chip.is-picked{background:var(--amber-100);color:var(--action-accent);border-color:var(--action-accent)}
.dialog-nav__chip.is-current{font-weight:bold;border-width:2px;border-color:var(--text-strong)}
.dialog-nav__chip--section{color:var(--text-body);background:transparent}

/* ページ下部：応募の流れ・FAQ・相談窓口 */
.section-title{margin:0 0 var(--space-4);font:var(--type-section-title);color:var(--text-strong)}
.flow-section,.faq-section,.contact-section{margin-top:var(--space-7);padding-top:var(--space-6);border-top:var(--border-hairline) solid var(--line-default)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4);margin:0;padding:0;list-style:none;counter-reset:none}
.steps__item{padding:var(--space-4);background:var(--surface-card);border:var(--border-hairline) solid var(--line-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.steps__num{display:grid;place-items:center;width:28px;height:28px;margin:0 0 var(--space-3);font:var(--type-label);color:var(--text-inverse);background:var(--action-primary);border-radius:var(--radius-pill)}
.steps__title{margin:0 0 var(--space-2);font:var(--type-card-title);color:var(--text-strong)}
.steps__text{margin:0;font:var(--type-caption);color:var(--text-muted);text-wrap:pretty}
.faq{display:grid;gap:var(--space-2)}
.faq__answer{margin:0;text-wrap:pretty}
.contact__lead{margin:0 0 var(--space-4);color:var(--text-muted);text-wrap:pretty}
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4)}
.contact__item{padding:var(--space-4);background:var(--surface-accent-soft);border-radius:var(--radius-md)}
.contact__label{margin:0 0 var(--space-1);font:var(--type-caption);color:var(--text-muted);letter-spacing:var(--tracking-wide)}
.contact__value{margin:0;font:var(--type-card-title);color:var(--text-strong)}
.contact__note{margin:var(--space-2) 0 0;font:var(--type-caption);color:var(--text-muted)}
.contact-section .company-contact__name{margin:var(--space-5) 0 var(--space-2);font:var(--type-card-title);color:var(--text-strong)}
.contact-section .company-contact__lines{margin:0;font:var(--type-body);color:var(--text-body);line-height:1.9}
.contact__placeholder{margin:var(--space-4) 0 0;font:var(--type-caption);color:var(--text-muted)}

.job-photo{margin:var(--space-4) 0 0}
.job-photo__img{display:block;width:100%;max-height:300px;object-fit:cover;border-radius:var(--radius-md);background:var(--surface-sunken)}
.job-photo__caption{margin:var(--space-2) 0 0;font:var(--type-caption);color:var(--text-muted)}

.photo{margin:0}
.photo__img{display:block;width:100%;object-fit:cover;border-radius:var(--radius-md);background:var(--surface-sunken)}
.photo__caption{margin:var(--space-2) 0 0;font:var(--type-caption);color:var(--text-muted)}

/* 写真プレースホルダー */
.photo-placeholder{display:grid;place-items:center;background:var(--surface-sunken);border:var(--border-hairline) dashed var(--line-default);border-radius:var(--radius-md);color:var(--text-muted);font:var(--type-caption);text-align:center;padding:var(--space-2)}
.photo-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--space-3);margin-top:var(--space-4)}
.photo-row:has(.photo:only-child){grid-auto-columns:minmax(0,420px)}

/* 事業所紹介・支配人 */
.office-photos{min-width:0;margin-top:var(--space-4)}
.office-photos__track{display:flex;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--radius-md)}
.office-photos__track::-webkit-scrollbar{display:none}
.office-photos__track:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.office-photos__slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.office-photos__controls{display:flex;justify-content:center;align-items:center;gap:var(--space-3);margin-top:var(--space-3)}
.office-photos__controls .button{min-height:44px;padding:8px 12px}
.office-photos__count{font:var(--type-caption);white-space:nowrap;color:var(--text-muted)}
.office-intro__text{margin:var(--space-4) 0 0;text-wrap:pretty}
.manager{margin-top:var(--space-5);padding:var(--space-4);background:var(--surface-accent-soft);border-radius:var(--radius-md)}
.manager__label{margin:0 0 var(--space-1);font:var(--type-caption);color:var(--text-muted);letter-spacing:var(--tracking-wide)}
.manager__name{margin:0 0 var(--space-2);font:var(--type-label);color:var(--text-body)}
.manager__message{margin:0;text-wrap:pretty;white-space:pre-line}
.manager__message.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.manager__toggle{display:inline-block;margin:6px 0 0;padding:0;font:var(--type-label);color:var(--text-link);background:none;border:0;cursor:pointer}
.manager__toggle:hover{color:var(--text-link-hover)}
.manager__toggle:focus-visible{outline:none;box-shadow:var(--ring-focus)}

/* 共通セクション */
.office-section{margin-top:var(--space-7);padding-top:var(--space-5);border-top:var(--border-emphasis) solid var(--navy-700);scroll-margin-top:var(--space-3)}
.office-section__kicker{margin:0 0 var(--space-1);font:var(--type-caption);color:var(--text-muted);letter-spacing:var(--tracking-wide)}
.office-section__title{margin:0 0 var(--space-2);font:var(--type-section-title);color:var(--text-strong)}
.office-section__lead{margin:0 0 var(--space-4);color:var(--text-muted);text-wrap:pretty}
.office-section__note{margin:var(--space-3) 0 0;font:var(--type-caption);color:var(--text-muted)}

.facts{display:grid;grid-template-columns:9em 1fr;gap:var(--space-2) var(--space-4);margin:var(--space-3) 0 0}
.facts dt{font:var(--type-label);color:var(--text-muted)}
.facts dd{margin:0;text-wrap:pretty;white-space:pre-line}
@media (min-width:900px){.disclosure__body .facts{grid-template-columns:9em minmax(0,1fr) 9em minmax(0,1fr);column-gap:var(--space-5)}}
.company{display:grid;gap:var(--space-2);margin:var(--space-4) 0 0;padding:var(--space-4);background:var(--surface-sunken);border-radius:var(--radius-md)}
.company__name{margin:0;font:var(--type-card-title);color:var(--text-strong)}
.company__note{margin:0;font:var(--type-caption);color:var(--text-muted);text-wrap:pretty}
.hiring-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3);margin:var(--space-4) 0 0;padding:0;list-style:none}
.hiring-steps__item{padding:var(--space-3);background:var(--surface-accent-soft);border-radius:var(--radius-md)}
.hiring-steps__num{display:grid;place-items:center;width:24px;height:24px;margin:0 0 var(--space-2);font:var(--type-caption);color:var(--text-inverse);background:var(--action-primary);border-radius:var(--radius-pill)}
.hiring-steps__title{margin:0 0 var(--space-1);font:var(--type-label);color:var(--text-strong)}
.hiring-steps__text{margin:0;font:var(--type-caption);color:var(--text-muted);text-wrap:pretty}

.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-2);margin:0;padding:0;list-style:none}
.chips__item{display:flex;flex-direction:column;gap:2px;padding:var(--space-3);background:var(--surface-sunken);border-radius:var(--radius-md)}
.chips__label{font:var(--type-caption);color:var(--text-muted);letter-spacing:var(--tracking-wide)}
.chips__value{font:var(--type-label);color:var(--text-body);line-height:var(--leading-normal);white-space:pre-line}

/* 職種ブロック */
.job-section{margin-top:var(--space-5);padding:var(--space-4);border:var(--border-hairline) solid var(--line-subtle);border-radius:var(--radius-md);scroll-margin-top:var(--space-3)}
.job-section.is-current{border-color:var(--navy-200);background:var(--status-open-bg)}
.job-section__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-3);padding-bottom:var(--space-3);border-bottom:var(--border-hairline) solid var(--line-subtle)}
.job-section__title{margin:0;font:var(--type-section-title);color:var(--text-strong)}
.job-section__role{margin:2px 0 0;font:var(--type-caption);color:var(--text-muted)}
.job-section__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);flex:0 1 auto;min-width:0;max-width:100%}
.job-section__top{display:inline-flex;align-items:center;justify-content:center;flex:0 1 auto;min-width:0;max-width:100%}
.job-section__pick{flex:0 1 auto;min-width:0;max-width:100%}
.job-section__actions .button{white-space:normal;overflow-wrap:anywhere}
.job-section__apply{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.job-section__apply:hover{color:var(--text-inverse)}
.job-section__pick.is-picked{color:var(--text-inverse);background:var(--action-primary);border-color:var(--action-primary)}
.job-section__pick.is-picked:hover{background:var(--action-primary-hover)}

.job-conditions{display:grid;grid-template-columns:5em minmax(0,1fr);column-gap:var(--space-3);margin:var(--space-3) 0 0;font:var(--type-caption);line-height:1.6}
.job-conditions dt,.job-conditions dd{margin:0;padding:var(--space-2) 0;border-bottom:var(--border-hairline) solid var(--line-subtle)}
.job-conditions dt{color:var(--text-muted)}
.job-conditions dd{color:var(--text-strong);white-space:pre-line;overflow-wrap:anywhere}
.keyfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin:var(--space-4) 0 0;padding:0;list-style:none}
.keyfacts__item{display:flex;flex-direction:column;gap:2px;padding:var(--space-3);background:var(--white);border:var(--border-hairline) solid var(--line-subtle);border-radius:var(--radius-md)}
.keyfacts__label{font:var(--type-caption);color:var(--text-muted);letter-spacing:var(--tracking-wide)}
.keyfacts__value{font:var(--type-label);color:var(--text-strong);line-height:var(--leading-normal)}
/* 端数の1枚は行いっぱいに広げ、空白が目立たないようにする */
.keyfacts__item:last-child:nth-child(3n+1){grid-column:span 3}
@media (max-width:900px){.keyfacts{grid-template-columns:repeat(2,minmax(0,1fr))}.keyfacts__item:last-child:nth-child(3n+1){grid-column:auto}.keyfacts__item:last-child:nth-child(2n+1){grid-column:span 2}}
@media (max-width:560px){.keyfacts{grid-template-columns:1fr}.keyfacts__item:last-child:nth-child(2n+1){grid-column:auto}}

.job-part{margin-top:var(--space-5)}
.job-part__title{margin:0 0 var(--space-2);font:var(--type-card-title);color:var(--text-strong)}
.job-part__subtitle{margin:var(--space-4) 0 var(--space-2);font:var(--type-label);color:var(--text-muted)}
.job-part__text{margin:0;text-wrap:pretty}
.job-part__note{margin:var(--space-3) 0 0;font:var(--type-caption);color:var(--text-muted)}

/* 時刻の列は既定5.5em。「11:00～14:00」のような長い時刻があるリストだけ、その幅まで広げて全行を揃える */
.flow{display:grid;grid-template-columns:minmax(5.5em,max-content) 1fr;gap:var(--space-1);margin:0;padding:0;list-style:none;border-left:var(--border-emphasis) solid var(--navy-100)}
.flow__step{grid-column:1/-1;display:grid;grid-template-columns:5.5em 1fr;grid-template-columns:subgrid;gap:var(--space-3);padding:var(--space-1) 0 var(--space-1) var(--space-4)}
.flow__time{font:var(--type-label);color:var(--navy-600)}
@supports (grid-template-columns:subgrid){.flow__time{white-space:nowrap}}
.flow__text{text-wrap:pretty}

.disclosure{margin-top:var(--space-3);border:var(--border-hairline) solid var(--line-subtle);border-radius:var(--radius-md);background:var(--white)}
.disclosure__summary{min-height:var(--tap-min);display:flex;align-items:center;padding:0 var(--space-4);font:var(--type-label);color:var(--text-link);cursor:pointer}
.disclosure__summary:hover{background:var(--surface-accent-soft)}
.disclosure[open] .disclosure__summary{border-bottom:var(--border-hairline) solid var(--line-subtle);color:var(--text-strong)}
.disclosure__body{padding:var(--space-2) var(--space-4) var(--space-4)}

.voices{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none}
.voices__item{display:grid;grid-template-columns:64px 1fr;gap:var(--space-4);padding:var(--space-4);background:var(--surface-sunken);border-radius:var(--radius-md)}
.voices__text{margin:0;text-wrap:pretty}
.voices__name{margin:var(--space-2) 0 0;font:var(--type-caption);color:var(--text-muted)}

.dialog-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-7);padding-top:var(--space-5);border-top:var(--border-hairline) solid var(--line-subtle)}
.dialog-footer__text{margin:0;font:var(--type-caption);color:var(--text-muted)}
.dialog-footer__info{min-width:0;flex:1 1 20em}
.dialog-footer__link{margin:var(--space-2) 0 0;font:var(--type-label)}

/* スマホでも表を維持する。職種列と見出しを詰めて、募集の〇が画面内に入るようにする */
@media (max-width:640px){
  /* TOPの紺の背景（ヒーロー）は、タイトルの文字サイズ・余白・写真の縦横比が
     PCと共通のままで、スマホでは縦に長くなりすぎる。全体的に詰める。 */
  .hero__inner{padding:var(--space-5) var(--space-3);gap:var(--space-4)}
  .hero__kicker{margin-bottom:var(--space-2)}
  .hero__title{font-size:22px;margin-bottom:var(--space-2)}
  .hero__lead{font-size:var(--text-sm)}
  .hero__media{aspect-ratio:16/9}
  .hero__stats{gap:var(--space-4);margin-top:var(--space-4);padding-top:var(--space-3)}
  /* ダイアログ上部（事業所名＋まとめて応募／閉じる）は本文と別にスクロールせず
     常に固定表示されるが、PCと同じ大きさのままだとスマホでは幅を取りすぎて
     窮屈になる。文字・ボタンを小さくして、固定表示でも邪魔になりにくくする。 */
  .office-dialog__header{padding:var(--space-3);gap:var(--space-2)}
  .office-dialog__title{font-size:16px}
  .office-dialog__meta{font-size:11px}
  .office-dialog__cart,.office-dialog__close{min-height:34px;padding:0 var(--space-3);font-size:12px}
  .office-dialog__body{padding:var(--space-4)}
  /* ダイアログ本文（募集職種のブロックなど）も、PCと同じ文字サイズ・余白のままだと
     スマホでは大きく感じるため、全体的に文字を小さく・幅を詰める。 */
  .office-section__title{font-size:18px}
  .office-section__kicker{font-size:11px}
  .job-section{padding:var(--space-3);margin-top:var(--space-4)}
  .job-section__title{font-size:17px}
  .job-section__role{font-size:11px}
  .job-section__actions .button{min-height:36px;padding:0 var(--space-3);font-size:12px}
  .facts{grid-template-columns:6.5em 1fr;font-size:13px}
  .job-conditions{grid-template-columns:4.5em minmax(0,1fr);font-size:12px}
  .keyfacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .keyfacts__item{padding:var(--space-2)}
  .keyfacts__label{font-size:10px}
  .keyfacts__value{font-size:12px}
  .chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chips__item{padding:var(--space-2)}
  .chips__label{font-size:10px}
  .chips__value{font-size:12px}
  .hiring-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hiring-steps__item{padding:var(--space-2)}
  .hiring-steps__title{font-size:12px}
  .hiring-steps__text{font-size:11px}
  .manager{padding:var(--space-3)}
  .manager__name{font-size:13px}
  .company{padding:var(--space-3)}
  /* text-wrap:pretty は行同士の見た目のバランスを取るため、狭い画面の日本語文章では
     各行が右端まで届かず、テキストブロック全体が中央寄り・右に余白が偏って見える
     ことがある。スマホでは通常の折り返しに戻し、行を右端まで使うようにする。 */
  .hero__lead,.page__lead,.steps__text,.faq__answer,.contact__lead,.office-intro__text,
  .manager__message,.office-section__lead,.facts dd,.company__note,.hiring-steps__text,
  .job-part__text,.flow__text,.voices__text{text-wrap:wrap}
  /* 職種枠＋事業所の情報チップの背景グレーの箱は、紹介文まで辿り着くスクロール量を
     増やす主因なので、余白・行間を詰めて全体の高さを縮める。 */
  .office-dialog__nav{padding:var(--space-2);margin-bottom:var(--space-3)}
  .dialog-nav{gap:6px}
  .dialog-nav__row{gap:6px}
  /* 「事業所の情報」ラベルが単独で1行を占有しないようにする（元は min-width:100%） */
  .dialog-nav__label{min-width:0}
  .dialog-nav__chip--section{min-height:32px;padding:0 6px;font-size:10px}
  .manager{grid-template-columns:1fr}
  .photo-row{grid-auto-flow:row;grid-auto-columns:auto}
  /* 事業所紹介の写真は、読み込み中もその高さぶんグレーで表示されるため、
     スマホでは縦に並ぶと合計の高さが大きくなりすぎる。低くして圧迫感を減らす。 */
  .office-intro .photo-row{gap:var(--space-2)}
  .office-intro .photo__img,.office-intro .photo-placeholder{height:130px!important}
  .facts{grid-template-columns:1fr;gap:2px 0}
  .facts dd{margin-bottom:var(--space-3)}
  .flow__step{grid-template-columns:1fr;gap:0}
  .voices__item{grid-template-columns:1fr}
  .apply-cart__names{display:none}
  .apply-cart__actions{width:100%}
  .apply-cart__actions .button{flex:1 1 auto}
  .page{padding:var(--space-5) var(--space-3) var(--space-7)}
  .page__title{font-size:var(--text-2xl)}
  .filters{padding:var(--space-4)}
  .filters__actions .button{flex:1 1 auto}
  /* 事業所チップは19件あり縦に長くなるので、文字と余白を詰めて1行に多く収める。 */
  .conditions--offices .conditions__list{grid-template-columns:repeat(auto-fill,minmax(7em,1fr))}
  .conditions--offices .condition{min-height:34px;padding:0 8px;font-size:11px}
  /* 募集一覧の見出しまわりの余白、および事業所が多いと縦に長くなる表本体を
     スマホ向けに詰める（文字を小さく・列幅を狭く・行の上下の余白を減らす）。 */
  .matrix-section{margin-top:var(--space-3)}
  .matrix-section__head{margin-bottom:var(--space-2)}
  .matrix-section__title{font-size:19px}
  .matrix-section__tools{flex-wrap:wrap}
  .matrix{min-width:0}
  .matrix th,.matrix td{padding:4px 5px}
  .matrix th.matrix__corner,.matrix th.matrix__rowhead{width:7.6em;min-width:7.6em;max-width:7.6em;font-size:11px;line-height:1.25;white-space:normal;overflow-wrap:anywhere;word-break:keep-all;padding:4px 6px}
  .matrix__corner>*,.matrix__rowhead>*{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:keep-all}
  .matrix__area{font-size:9px;letter-spacing:0;padding:4px;white-space:normal;line-height:1.15}
  .matrix__office{font-size:9px;line-height:1.15;white-space:normal;overflow-wrap:anywhere;padding:4px}
  .matrix__cell{min-width:148px}
  .cell-facility__name{font-size:12px;line-height:1.25;padding:4px 6px}
  .cell-facility{gap:4px;min-height:30px}
  .job-detail-button{width:28px;height:28px;min-width:28px;min-height:28px;font-size:13px}
  .matrix-nav{width:34px;height:34px;font-size:20px}
  .matrix-nav--prev{left:-6px}
  .matrix-nav--next{right:-6px}
  .job-section__actions{width:100%}
  .job-section__actions>*{flex:1 1 0;padding-left:var(--space-3);padding-right:var(--space-3)}
  /* 「応募・選考・採否について」の①番号は、スマホでは見出しと改行させず
     同じ行に並べる（PC版のカード積み上げレイアウトはそのまま）。 */
  .steps__item{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--space-3);row-gap:var(--space-2)}
  .steps__num{margin:0}
  .steps__title{margin:0}
  .steps__text{flex-basis:100%;margin:0}
  /* 職種枠は狭い画面でも全幅にはしない。求人1件だけの枠は中身の幅（チップ1個分）に
     縮め、複数の小さな枠が同じ行の余白に並んで詰まるようにする（PC版と同じ考え方）。
     求人数が多い枠だけ画面幅いっぱいまで広がり、中のチップがその枠の中で折り返す。 */
  .dialog-nav__job-group{max-width:100%;padding:6px}
  .dialog-nav__job-group-title{font-size:10px;margin-bottom:4px}
  .dialog-nav__hint{font-size:10px;line-height:1.4}
  .dialog-nav__job-groups{gap:6px}
  .dialog-nav__job-group-grid{max-width:100%;gap:4px}
  /* 固定幅70pxだと「バスドライバー」「圧雪・ゲレンデ整備」のような長いラベルが
     単語の途中（「バスドライバ」＋「ー」など）で折り返されて崩れる。
     幅は中身に合わせ、1行で収まるようにする（入りきらない分は枠内で次の行へ）。 */
  .dialog-nav__job-group-grid .dialog-nav__chip{flex:0 1 auto;min-width:56px;min-height:32px;padding:4px 8px;font-size:10px;white-space:nowrap}
}

.facts__links{display:flex;flex-direction:column;gap:8px}
.facts__link{display:flex;flex-direction:column;gap:1px}
.facts__link-label{color:var(--text-muted);font-size:.9em}

/* 勤務地に添える地図アプリへの外部リンク */
.map-link{font:var(--type-caption);color:var(--text-link);white-space:nowrap}
.map-link:hover{color:var(--text-link-hover)}