* { box-sizing: border-box; }
:root{
  --bg:#f3f5f7;
  --card:#ffffff;
  --ink:#1f2933;
  --muted:#66727f;
  --accent:#d64242;
  --accent-dark:#a92f2f;
  --blue:#1769aa;
  --green:#267358;
  --line:#d9e0e7;
  --soft:#f8fafc;
}
body{
  margin:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
}
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding:12px 22px;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 12px rgba(31,41,51,.05);
}
.brand{ display:flex; gap:12px; align-items:center; min-width:0; }
.brand img{ width:128px; height:32px; object-fit:contain; border-radius:6px; background:#fff; }
.eyebrow{ margin:0; color:var(--muted); font-size:.78rem; }
h1{ margin:0; font-size:1.15rem; letter-spacing:0; }
.header-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
button,.btn,.ghost-btn{
  border:0;
  border-radius:6px;
  padding:10px 14px;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
button:hover,.btn:hover{ background:var(--accent-dark); }
#reset-btn{ background:#5d6874; }
.ghost-btn{
  background:#fff;
  color:var(--blue);
  border:1px solid #b8cde1;
}
main{ max-width:1120px; margin:0 auto; padding:18px; }
.job-hero{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 340px;
  gap:18px;
  align-items:start;
  margin:14px 0 24px;
}
.job-main,.job-side,.panel,.work-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
}
.job-main{ padding:24px; position:relative; }
.job-source{ margin:0 0 8px; color:var(--muted); font-size:.9rem; }
.job-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  padding:4px 10px;
  background:var(--accent);
  color:#fff;
  border-radius:4px;
  font-size:.82rem;
  font-weight:800;
}
.job-status.danger{ background:#5b1a1a; }
.job-main h2{
  margin:12px 0 10px;
  font-size:clamp(1.55rem, 3vw, 2.35rem);
  line-height:1.25;
  letter-spacing:0;
}
.lead{ margin:0 0 18px; color:#3c4855; font-size:1.02rem; }
.salary-line{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px;
  padding:14px 16px;
  margin:18px 0;
  background:#fff7f7;
  border:1px solid #f1caca;
  border-radius:8px;
}
.salary-line span{ color:var(--muted); font-weight:700; }
.salary-line strong{ color:var(--accent); font-size:2rem; line-height:1; }
.salary-line em{ color:#5d6874; font-style:normal; font-weight:700; }
.job-facts{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin:18px 0;
}
.job-facts div{
  padding:12px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:6px;
}
.job-facts span{
  display:block;
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
}
.job-facts strong{ display:block; margin-top:2px; font-size:.95rem; }
.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.job-side{ overflow:hidden; }
.job-side img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#e8edf2; }
.apply-box{ padding:16px; border-top:1px solid var(--line); background:#fff; }
.apply-box strong{ display:block; font-size:1.05rem; }
.apply-box p{ margin:4px 0 12px; color:var(--muted); }
.apply-box button{ width:100%; }
.danger-box{ background:#f6eeee; border-top-color:#c7a4a4; }
.section{ margin:26px 0; }
.section-title{ margin:0 0 12px; font-size:1.35rem; }
.job-card-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.work-card{ overflow:hidden; }
.work-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#e8edf2; }
.work-card div{ padding:14px; }
.mini-label{ margin:0 0 4px; color:var(--blue); font-size:.78rem; font-weight:800; }
.work-card h3{ margin:0 0 6px; font-size:1.04rem; }
.work-card p{ margin:0; color:#3d4854; }
.detail-layout{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(300px, .9fr); gap:18px; align-items:start; }
.detail-layout.single-detail{ grid-template-columns:1fr; }
.panel{ padding:20px; }
.panel h2{ margin:0 0 12px; font-size:1.2rem; border-bottom:2px solid var(--line); padding-bottom:8px; }
.entry-note{ margin:0 0 14px; color:#3f4751; font-size:.96rem; }
.job-table{ margin:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
.job-table div{ display:grid; grid-template-columns:132px 1fr; border-bottom:1px solid var(--line); }
.job-table div:last-child{ border-bottom:0; }
.job-table dt,.job-table dd{ margin:0; padding:12px; }
.job-table dt{ background:#f0f4f8; color:#44515f; font-weight:800; }
.job-table dd{ background:#fff; }
.detail-table div{ grid-template-columns:176px 1fr; }
.detail-table dt{
  display:flex;
  align-items:center;
  min-height:72px;
  background:#f7f7f9;
  color:#3f4751;
  font-size:1rem;
  line-height:1.55;
}
.detail-table dd{
  color:#343b46;
  font-size:1rem;
  line-height:1.85;
}
.detail-table dd p{ margin:0 0 10px; }
.detail-table dd p:last-child{ margin-bottom:0; }
.detail-table ul{ margin:0 0 10px; padding-left:1.2em; }
.detail-table li{ margin:2px 0; }
.notice{ margin-top:14px; background:#fff7f0; border:1px solid #efc8a8; border-radius:8px; padding:14px; }
.point-list{ display:grid; gap:10px; margin-bottom:20px; }
.point-list div{ display:grid; gap:2px; padding:12px; background:var(--soft); border:1px solid var(--line); border-radius:6px; }
.point-list strong{ color:var(--green); }
.point-list span{ color:#3d4854; }
.review{
  cursor:pointer;
  user-select:none;
  padding:14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.review h3{ margin:0 0 6px; font-size:1rem; }
.review p{ margin:0; }
.review.is-hint{ border-color:#9a5b5b; background:#fff6f3; }
.footer{ text-align:center; color:#6a737d; border-top:1px solid var(--line); padding:28px 18px 90px; font-size:.9rem; }
.truth-mode{
  --bg:#e8e9e4;
  --card:#f5f4ee;
  --ink:#261f1c;
  --muted:#665d55;
  --accent:#5b1a1a;
  --accent-dark:#421111;
  --blue:#4e443b;
  --green:#4b584e;
  --line:#c9c6b8;
  --soft:#eeeae1;
}
.truth-mode .job-main,.truth-mode .job-side,.truth-mode .panel,.truth-mode .work-card{ box-shadow:none; }
.truth-record{ font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; background:#eee9de; border-left:4px solid #5b1a1a; padding:12px 14px; margin:10px 0; }
.hidden-click{ cursor:pointer; }
.fixed-cta{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:40;
  width:min(92vw,680px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding:0 8px;
}
.fixed-cta button,.fixed-cta a{ width:100%; padding:15px 18px; font-size:1rem; box-shadow:0 8px 22px rgba(31,41,51,.18); }
.fixed-cta .like-btn{
  background:#fff;
  color:#f01882;
  border:2px solid #f01882;
  box-shadow:0 8px 22px rgba(240,24,130,.12);
}
.fixed-cta .like-btn:hover{ background:#fff5fa; }

.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(210,210,210,.16) 0px, rgba(110,110,110,.22) 1px, rgba(185,185,185,.16) 2px, rgba(90,90,90,.18) 3px),
    linear-gradient(180deg, rgba(120,120,120,.18), rgba(165,165,165,.18));
}
.noise-overlay.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.noise-layer, .noise-flash, .noise-message { position: absolute; }
.noise-layer { inset: -8%; pointer-events: none; z-index: 1; }
.noise-layer-1 {
  background:repeating-linear-gradient(0deg, rgba(240,240,240,.18) 0px, rgba(70,70,70,.24) 1px, rgba(200,200,200,.18) 2px, rgba(90,90,90,.22) 3px, rgba(170,170,170,.14) 4px);
  mix-blend-mode: screen;
}
.noise-layer-2 {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0px, rgba(0,0,0,.08) 2px, rgba(255,255,255,.03) 4px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0px, rgba(0,0,0,.12) 2px, rgba(255,255,255,.06) 4px, rgba(0,0,0,.08) 6px);
  mix-blend-mode: overlay;
}
.noise-layer-3 {
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 14%, rgba(0,0,0,.12) 28%, rgba(255,255,255,.10) 44%, rgba(0,0,0,.10) 62%, rgba(255,255,255,.12) 78%, rgba(255,255,255,0) 100%);
  opacity: .55;
  filter: blur(.4px);
}
.noise-flash {
  inset: 0;
  z-index: 2;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 25%, rgba(255,255,255,0) 52%, rgba(255,255,255,.12) 76%, rgba(255,255,255,0) 100%);
  opacity: 0;
}
.noise-message {
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(88vw, 760px);
  padding: 0 16px;
  text-align: center;
  white-space: nowrap;
  color: #7c0606;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.65;
  pointer-events: none;
  text-shadow:0 0 1px rgba(255,255,255,.45), 0 0 4px rgba(0,0,0,1), 0 0 18px rgba(0,0,0,.95), 0 3px 6px rgba(60,0,0,.95);
}
.noise-message::before, .noise-message::after {
  content: "募集情報が更新されました";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.noise-message::before { color: rgba(255,220,220,.22); transform: translate(2px, 0); mix-blend-mode: screen; }
.noise-message::after { color: rgba(50,0,0,.42); transform: translate(-2px, 1px); }
.noise-overlay.is-active .noise-layer-1 { animation: staticBandA .08s steps(2, end) infinite; }
.noise-overlay.is-active .noise-layer-2 { animation: staticBandB .11s steps(3, end) infinite; }
.noise-overlay.is-active .noise-layer-3 { animation: rollingBand .28s linear infinite; }
.noise-overlay.is-active .noise-flash { animation: flashSweep .32s linear infinite; }
@keyframes staticBandA { 0% {opacity:.95; transform:translateY(-8px) scaleY(1.04);} 50% {opacity:.7; transform:translateY(5px) scaleY(1.01);} 100% {opacity:.92; transform:translateY(-3px) scaleY(1.05);} }
@keyframes staticBandB { 0% {opacity:.65; transform:translateX(-10px);} 50% {opacity:.45; transform:translateX(12px);} 100% {opacity:.7; transform:translateX(-6px);} }
@keyframes rollingBand { 0% {transform:translateY(-24%);} 100% {transform:translateY(24%);} }
@keyframes flashSweep { 0% {opacity:0; transform:translateY(-18%);} 35% {opacity:.42;} 100% {opacity:0; transform:translateY(18%);} }

@media (max-width:860px){
  .site-header{ align-items:flex-start; flex-direction:column; }
  .job-hero,.detail-layout,.job-card-grid{ grid-template-columns:1fr; }
  .job-facts{ grid-template-columns:1fr; }
  .job-table div{ grid-template-columns:128px minmax(0, 1fr); }
  .detail-table div{ grid-template-columns:128px minmax(0, 1fr); }
  .detail-table dt{ font-size:.95rem; padding:12px 10px; align-items:center; }
  .detail-table dd{ font-size:.95rem; padding:12px 12px; }
  .fixed-cta{ gap:10px; bottom:14px; }
  .noise-message { white-space: normal; letter-spacing: .04em; line-height: 1.5; }
}