:root { --pink:#c30765; --pink-strong:#a60055; --pink-soft:#f8e7f0; --focus:#087d91; --ink:#211e27; --muted:#766d7c; --line:#ddd3df; --surface:#fff; --wash:#faf6fa; --application-font-ui:"Noto Sans JP","Noto Sans SC","Microsoft YaHei UI","Microsoft YaHei","Yu Gothic UI","Hiragino Sans","Meiryo",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f7f4ef; font-family:var(--application-font-ui) !important; font-synthesis:none; line-height:1.55; }
.public-shell,.public-header,.public-main,.field,.field-help,.slot-builder,.availability-row,.timeline-legend,.timeline-day,.status-row,.public-footer { font-family:var(--application-font-ui) !important; }
.field > span,.consent span { letter-spacing:normal; line-height:1.55; }
.public-shell { max-width:980px; margin:0 auto; padding:0 24px 32px; }
.public-header { display:flex; align-items:center; justify-content:space-between; padding:26px 4px 22px; border-bottom:1px solid var(--line); }
/* Logo: ✦ mark + two-line wordmark, the same as the employee / management app header. */
.brand-mark { display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-size:14px; font-weight:700; letter-spacing:.1em; line-height:1.1; }.brand-mark .brand-star { color:var(--pink); font-size:22px; font-weight:400; line-height:1; }.brand-mark .brand-star .ssj-icon { display:block; }.brand-mark strong,.brand-mark small { display:block; }.brand-mark small { margin-top:4px; color:var(--muted); font-size:12px; font-weight:400; letter-spacing:.2em; }.header-caption { color:var(--muted); font-size:.9rem; }
.public-main { display:grid; gap:18px; padding-top:24px; }.form-card,.status-card { background:var(--surface); border:1px solid var(--line); border-radius:8px; }.intro-card { padding:8px 4px 4px; }
h1 { margin:0; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.3; letter-spacing:.02em; }.intro-copy { margin:14px 0 12px; max-width:760px; color:var(--muted); }.reusable-note { position:relative; margin:0 0 20px; padding:9px 12px 9px 30px; border:1px solid var(--line); border-left:4px solid #087d91; border-radius:4px; background:#eef7f8; color:var(--muted); font-size:14px; }.reusable-note::before { content:""; position:absolute; left:12px; top:1.05em; width:8px; height:8px; background:#087d91; }
.flow-meta { display:flex; flex-wrap:wrap; gap:12px 34px; margin:0; }.flow-meta div { display:flex; gap:10px; align-items:baseline; }.flow-meta dt { color:var(--muted); font-size:14px; }.flow-meta dd { margin:0; font-weight:700; }
.form-card,.status-card { padding:28px 36px 32px; }.form-section-heading { display:flex; align-items:center; gap:10px; margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid var(--line); }.form-section-heading h2 { margin:0; font-size:1.18rem; }
.field { display:grid; gap:7px; margin:0 0 17px; font-weight:700; }.field b,.consent b { color:var(--pink); }input,select,textarea { width:100%; border:1px solid #cfc3d1; border-radius:8px; background:#fff; color:var(--ink); padding:12px 13px; font-family:var(--application-font-ui) !important; font-size:16px; line-height:1.55; letter-spacing:normal; font-weight:500; outline:none; }input:focus-visible,select:focus-visible,textarea:focus-visible,.button:focus-visible,a:focus-visible,button:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
input:focus-visible,select:focus-visible,textarea:focus-visible { border-color:var(--focus); }textarea { resize:vertical; }
input[type="file"] { padding:8px 10px; line-height:1.55; }
input[type="file"]::file-selector-button { margin-right:12px; padding:8px 12px; border:1px solid #9a8f9d; border-radius:8px; background:#f7f4f7; color:var(--ink); font-family:var(--application-font-ui) !important; font-size:16px; line-height:1.45; font-weight:500; letter-spacing:normal; cursor:pointer; }
.file-picker { display:flex; align-items:center; gap:12px; min-height:58px; padding:8px 10px; border:1px solid #cfc3d1; border-radius:8px; background:#fff; }
.file-picker-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:7px 13px; border:1px solid #9a8f9d; border-radius:8px; background:#f7f4f7; color:var(--ink); font-family:var(--application-font-ui) !important; font-size:16px; line-height:1.45; font-weight:500; letter-spacing:normal; cursor:pointer; white-space:nowrap; }
.file-picker-button:focus-visible,.file-picker:has(input:focus-visible) .file-picker-button { outline:3px solid var(--focus); outline-offset:2px; }
.file-picker-name { min-width:0; overflow:hidden; font-weight:400; color:var(--ink); font-family:var(--application-font-ui) !important; font-size:16px; line-height:1.55; text-overflow:ellipsis; white-space:nowrap; }
.file-picker input[type="file"] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
button,.button { font-family:var(--application-font-ui) !important; letter-spacing:normal; }
.availability-heading { margin-top:26px; }.field-help { margin:-8px 0 16px; color:var(--muted); font-size:.9rem; }.field .field-help { margin:0; font-weight:400; }.field-help .required-emphasis { color:#b42354; font-weight:900; }.slot-builder { display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:10px; align-items:end; padding:16px; border:0; border-radius:0; background:none; padding:0 0 4px; }.slot-builder .field { margin:0; }.slot-builder input,.slot-builder select { height:44px; padding-top:0; padding-bottom:0; }.slot-builder .add-slot { min-height:44px; }
.button { min-height:44px; border-radius:8px; padding:10px 17px; font:inherit; font-weight:900; cursor:pointer; }.button:disabled { opacity:.55; cursor:not-allowed; }.button-primary { border:1px solid var(--pink); background:var(--pink); color:#fff; }.button-primary:hover:not(:disabled) { border-color:var(--pink-strong); background:var(--pink-strong); }.button-secondary { border:1px solid #cbbccc; background:#fff; color:var(--ink); }.button-secondary:hover:not(:disabled) { background:var(--pink-soft); }.add-slot { white-space:nowrap; }
.availability-rows { display:grid; gap:8px; margin:13px 0 20px; }.availability-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; }.availability-row .slot-icon { color:var(--pink); font-size:1.1rem; }.availability-row span:nth-child(2) { flex:1; font-weight:700; }.availability-row button { border:0; background:transparent; color:var(--pink); font:inherit; cursor:pointer; }.empty-slots { margin:0; padding:16px; color:var(--muted); text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:8px; }
.timeline-legend { display:flex; gap:18px; align-items:center; margin:8px 0 10px; color:var(--muted); font-size:14px; }.timeline-legend span::before { content:""; display:inline-block; width:12px; height:12px; margin-right:6px; border-radius:3px; vertical-align:-1px; }.legend-available::before { background:#2a9d8f; }.legend-scheduled::before { background:var(--pink); }.availability-timeline { display:grid; gap:10px; margin:0 0 18px; padding:14px; border:1px solid var(--line); border-radius:8px; background:#fff; overflow-x:auto; }.timeline-day { min-width:620px; }.timeline-day header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; color:var(--muted); font-size:14px; }.timeline-day header strong { color:var(--ink); font-size:.9rem; }.timeline-track { position:relative; height:48px; border-radius:8px; background:repeating-linear-gradient(90deg,#f6f1f5 0,#f6f1f5 calc(4.166% - 1px),#ddd3df calc(4.166% - 1px),#ddd3df 4.166%); overflow:hidden; }.timeline-block { position:absolute; top:7px; min-width:12px; height:34px; border-radius:7px; color:#fff; overflow:hidden; }.timeline-block.available { background:#2a9d8f; }.timeline-block.scheduled { top:11px; height:26px; background:var(--pink); z-index:2; }.timeline-block span { display:block; padding:6px 8px; white-space:nowrap; font-size:14px; line-height:1.2; font-weight:900; }
.field-message,.form-message { min-height:1.5em; margin:5px 0 12px; color:var(--muted); }.field-message.error,.form-message.error,.form-message.warning { color:#b42354; }.form-message.success { color:#14745c; }.consent { display:flex; align-items:center; gap:10px; min-height:44px; margin:18px 0 20px; font-weight:600; }.consent input { flex:0 0 auto; width:24px; height:24px; accent-color:var(--pink); }.consent .privacy-link { display:inline-block; padding-block:10px; }.submit-button { min-width:160px; }.status-card { padding-bottom:24px; }.status-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }.status-row:last-child { border-bottom:0; }.status-row div { display:flex; gap:16px; align-items:baseline; }.status-row span { color:var(--muted); }.status-row b { color:var(--pink); }.public-footer { padding:22px 4px 0; color:var(--muted); font-size:14px; text-align:center; }
@media (max-width:700px) { .public-shell { padding:0 12px 24px; }.public-header { padding:20px 2px 16px; align-items:flex-start; gap:12px; flex-direction:column; }.form-card,.status-card { padding:22px 18px 24px; border-radius:8px; }.slot-builder { grid-template-columns:1fr 1fr; }.slot-builder .field:first-child { grid-column:1 / -1; }.add-slot { width:100%; grid-column:1 / -1; }.status-row { align-items:flex-start; flex-direction:column; } }

/* Let the cards shrink to the phone width (2026-09-18): as grid items they
   defaulted to min-width:auto and took the 620px availability timeline's
   width, so candidates had to scroll the whole form sideways on a phone.
   The timeline keeps its own horizontal scroll. */
.public-main { grid-template-columns: minmax(0, 1fr); }
.intro-card, .form-card, .status-card { min-width: 0; }
[hidden] { display:none !important; }
.availability-rows:empty { margin:0; }
/* Same for the fields themselves: the photo picker's file name is nowrap, so
   an auto grid column grew to its full length. */
.field { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.file-picker { min-width: 0; }
/* Privacy notice page and link (2026-09-18) */
.privacy-link { color: var(--pink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.privacy-date { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.privacy-card { display: grid; gap: 28px; }
.privacy-section { display: grid; gap: 10px; min-width: 0; }
.privacy-section p { margin: 0; line-height: 1.8; }
.privacy-list { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; line-height: 1.8; }
.privacy-table { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; line-height: 1.7; }
.privacy-table dt { color: var(--muted); font-weight: 700; }
.privacy-table dd { margin: 0; overflow-wrap: anywhere; }
.privacy-table a { color: var(--pink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.privacy-table dd:has(> a), .privacy-table dt:has(+ dd > a) { display: flex; align-items: center; min-height: 44px; }
@media (max-width: 560px) { .privacy-table { grid-template-columns: minmax(0, 1fr); } .privacy-table dd { margin-bottom: 6px; } .privacy-table dt:has(+ dd > a) { min-height: 0; } }
.retired-card h1 { font-size:1.4rem; }
.retired-card .intro-copy { margin:12px 0 0; color:var(--ink); }