/* Keep all 17 source images at their original aspect ratios. */
* { box-sizing: border-box; }
html {
  background: #eef2f4;
  scroll-padding-bottom: calc(var(--sticky-space, 0px) + 16px);
}
body {
  margin: 0;
  padding-bottom: var(--sticky-space, 0px);
  font-family: system-ui, -apple-system, "Noto Sans JP", sans-serif;
}
main {
  width: 100%;
  max-width: 521px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 36px #17384914;
}
section, footer, .cta-section {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0;
}
img { display: block; width: 100%; height: auto; border: 0; }
.cta-section { position: relative; }
/* Pixel bounds verified in all 3 original 1042 x 122 PNGs:
   x=138..904, y=10..102 (including the green lower edge).
   The image and section never move or change brightness. */
.cta {
  position: absolute;
  left: 13.243762%;
  top: 8.196721%;
  width: 73.608445%;
  height: 76.229508%;
  border-radius: 5.736636% / 47.311827%;
  overflow: hidden;
  isolation: isolate;
  touch-action: manipulation;
}
.cta::before, .cta::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.cta::before {
  top: -25%;
  bottom: -25%;
  left: -20%;
  width: 12%;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  opacity: 0;
  transform: skewX(-18deg);
}
.cta.is-glossed::before { animation: cta-gloss 780ms ease-out 1; }
.cta::after { inset: 0; transition: background-color 120ms ease; }
@media (hover: hover) {
  .cta:hover::after { background: rgb(255 255 255 / 6%); }
}
.cta:active::after { background: rgb(0 0 0 / 8%); }
.cta:focus-visible, .sticky-cta__button:focus-visible {
  outline: 3px solid #093453;
  outline-offset: 3px;
}
@keyframes cta-gloss {
  0% { left: -20%; opacity: 0; }
  16%, 70% { opacity: .15; }
  100% { left: 110%; opacity: 0; }
}
.skip {
  position: fixed;
  left: 8px;
  top: 8px;
  transform: translateY(-200%);
  z-index: 30;
  padding: 12px;
  color: #fff;
  background: #083754;
}
.skip:focus { transform: translateY(0); }
.sticky-cta[hidden] { display: none; }
.sticky-cta {
  position: fixed;
  z-index: 20;
  inset: auto 0 0;
  padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  box-shadow: 0 -2px 12px rgb(23 56 73 / 10%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(100% + 4px));
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s 200ms;
}
.sticky-cta[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s;
}
.sticky-cta__inner { width: 100%; max-width: 489px; margin: 0 auto; }
.sticky-cta__note {
  margin: 0 0 5px;
  color: #173849;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.sticky-cta__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 20px;
  border-radius: 14px;
  background: #008634;
  color: #fff;
  box-shadow: 0 2px 5px rgb(0 70 28 / 14%);
  text-decoration: none;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  touch-action: manipulation;
  transition: filter 120ms ease;
}
.sticky-cta__arrow { flex-shrink: 0; font-size: 25px; line-height: 1; }
@media (hover: hover) {
  .sticky-cta__button:hover { filter: brightness(1.02); }
}
.sticky-cta__button:active { filter: brightness(.94); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta::before, .cta.is-glossed::before { animation: none; opacity: 0; }
  .cta::after, .sticky-cta, .sticky-cta[data-visible="true"],
  .sticky-cta__button { transition: none; }
  .sticky-cta, .sticky-cta[data-visible="true"] { transform: none; }
}

/* User-supplied job description. Scope all additions to this section. */
@font-face { font-family: "Yuubi LP"; src: url("assets/requirements-regular.woff2?v=work-v10") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Yuubi LP"; src: url("assets/requirements-bold.woff2?v=work-v10") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
.requirements { font-family: "Yuubi LP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; background: #fff; color: #121212; line-height: 1.75; font-size: 1rem; }
.requirements__list { margin: 0; padding: 0 16px 20px; }
.requirements__row { padding: 15px 0 17px; border-top: 1px solid #c4dee7; }
.requirements__row:first-child { border-top: 3px solid #0788b5; }
.requirements dt { display: table; margin: 0 0 9px; padding: 3px 10px; border-left: 3px solid #0788b5; background: #ecf6fa; color: #075975; font-size: .9375rem; font-weight: 700; line-height: 1.55; }
.requirements dd { margin: 0; overflow-wrap: anywhere; line-break: strict; }
.requirements dd p { margin: 0; }
.requirements dd p + p { margin-top: 6px; }
.requirements dd .requirements__note { font-size: .875rem; line-height: 1.75; color: #374952; }
.requirements dd p + .requirements__note { margin-top: 9px; }

/* All seven main section headings share the same typography and number badge. */
.section-heading { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 10px 16px 10px 0; color: #121212; background: #fff; font-family: "Yuubi LP", "Yu Gothic", sans-serif; line-height: 1.35; }
.section-heading__number { display: flex; align-items: center; justify-content: center; flex: 0 0 54px; height: 40px; padding-right: 9px; background: #fff23f; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); font-size: 25px; font-weight: 700; line-height: 1; }
.section-heading h2 { margin: 0; min-width: 0; font-family: inherit; font-size: clamp(1.375rem, 5vw, 1.625rem); font-weight: 700; line-height: 1.35; letter-spacing: 0; overflow-wrap: anywhere; }
.section-heading__note, .section-heading__eyebrow { margin: 0; padding: 0 17px 10px; color: #121212; font-family: "Yuubi LP", "Yu Gothic", sans-serif; font-size: .875rem; font-weight: 400; line-height: 1.6; }
.section-heading__eyebrow { color: #076d90; font-size: .75rem; font-weight: 700; letter-spacing: .06em; }

/* Consultation-first revision: supplied photos and original lower CTA art stay intact. */
.hero { position: relative; }
.hero-hiring { position: absolute; inset: 0 0 auto auto; width: 32.6%; height: 8.87%; background: #fff23f; font-family: "Yuubi LP", "Yu Gothic", sans-serif; }
.hero-hiring__badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(100% - 20px); min-height: 59px; margin: 7px 12px 0 8px; padding: 5px 3px 7px; color: #fff; background: #075975; border: 2px solid #fff; box-shadow: 3px 3px 0 #b8a711; transform: rotate(-3deg); line-height: 1.4; }
.hero-hiring__badge span { font-size: .875rem; font-weight: 700; letter-spacing: .12em; }
.hero-hiring__badge strong { color: #fff23f; font-size: clamp(.9375rem, 3.8vw, 1.1875rem); font-weight: 700; }
.cta-section { padding-top: 9px; }
.cta-art { position: relative; }
.cta-reassurance { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px 0; margin: 0 10px 4px; color: #173849; font-family: "Yuubi LP", "Yu Gothic", sans-serif; font-size: .875rem; font-weight: 700; line-height: 1.6; }
.cta-reassurance span { display: inline-block; padding: 0 7px; }
.cta-reassurance span + span { border-left: 1px solid #17384955; }
.cta-section--hero { background: #fff23f; padding: 3px 16px 20px; }
.cta--consult { position: relative; inset: auto; display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; max-width: 405px; min-height: 56px; height: auto; margin: 9px auto 0; padding: 12px 24px; border-radius: 999px; color: #fff; background: #008634; box-shadow: 0 4px 0 #006629, 0 7px 12px #00662920; font-family: "Yuubi LP", "Yu Gothic", sans-serif; font-size: clamp(1.25rem, 4.7vw, 1.375rem); font-weight: 700; text-decoration: none; line-height: 1.5; }
.cta__arrow { flex: 0 0 auto; font-size: 29px; line-height: 1; }
.proof { padding: 19px 16px 18px; color: #075975; background: linear-gradient(150deg, #ecf6fa, #fff); border-bottom: 1px solid #c4dee7; font-family: "Yuubi LP", "Yu Gothic", sans-serif; line-height: 1.4; }
.proof__message { width: fit-content; margin: 0 auto 15px; padding: 0 9px 3px; background: linear-gradient(transparent 62%, #fff23f 62%); color: #173849; font-size: clamp(1.125rem, 4.5vw, 1.375rem); font-weight: 700; letter-spacing: .035em; text-align: center; }
.proof__message span { white-space: nowrap; }
.proof__stats { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.proof__stat { text-align: center; }
.proof__stat + .proof__stat { border-left: 1px solid #9bc9d9; }
.proof__stat dt { font-size: .875rem; font-weight: 700; letter-spacing: .04em; }
.proof__stat dd { display: flex; align-items: baseline; justify-content: center; gap: 5px; margin: 2px 0 0; }
.proof__stat strong { font-family: "Yuubi LP", sans-serif; font-size: clamp(3rem, 12.5vw, 3.625rem); font-weight: 700; line-height: 1.15; letter-spacing: -.04em; color: #0088ad; }
.proof__stat dd span { color: #173849; font-size: 1.125rem; font-weight: 700; }
.sticky-cta .cta-reassurance { margin: 0 0 7px; }
.sticky-cta__note { font-family: "Yuubi LP", "Yu Gothic", sans-serif; }
@media (max-width: 360px) { .hero-hiring__badge { margin-left: 3px; margin-right: 8px; width: calc(100% - 11px); } .cta-reassurance span { padding: 0 5px; } }

/* Keep the consultation label readable in every interaction state. */
@media (hover: hover) { .cta--consult:hover::after { background: rgb(0 0 0 / 4%); } }
.cta--consult::before { top: 0; bottom: auto; height: 16%; }

/* 2026-09-18: user-approved display crop; photo source files stay unchanged. */
.proof__photos { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; margin-top: 20px; }
.proof__photos figure { margin: 0; background: #fff; border-bottom: 3px solid #fff23f; box-shadow: 0 3px 10px #07597512; }
.proof__photos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 90%; }
.proof__photos figure:nth-child(2) img { object-position: 50% 92%; }
.proof__photos figcaption { padding: 9px 4px; color: #173849; font-size: .875rem; font-weight: 700; line-height: 1.5; text-align: center; }
/* Replace only the salary cell visually; the image alternative carries the updated full information. */
.jobs-art { position: relative; container-type: inline-size; }
.jobs-salary { position: absolute; left: 41.1%; top: 3.5%; width: 33.8%; height: 22.5%; display: flex; align-items: baseline; justify-content: flex-start; gap: .4cqw; padding: 0 0 0 2.1cqw; color: #121212; background: #fff; font-family: "Yuubi LP", "Yu Gothic", sans-serif; font-size: 3cqw; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.jobs-salary strong { color: #0788b5; font-size: 5.7cqw; line-height: 1.15; letter-spacing: -.06em; }
@supports not (font-size: 1cqw) { .jobs-salary { font-size: clamp(10px, 3vw, 15.63px); gap: 3px; padding-top: 2px; } .jobs-salary strong { font-size: clamp(18px, 5.7vw, 29.7px); } }

/* All three salary cells share one type scale and weight. */
.jobs-salary--industrial { top: 31.5%; }
.jobs-salary--general { top: 60.3%; }

/* User-supplied photos retain the established 4:3 display frames. */
.proof__photos img, .proof__photos figure:nth-child(2) img { object-position: 50% 50%; }
.voice-preserved { aspect-ratio: 1042 / 338; overflow: hidden; }
.voice-preserved img { width:100%; height:auto; }
.voice-replacement { display:grid; grid-template-columns:24.23% minmax(0,1fr); gap:3.28%; padding:2.3% 3.26% 5.75%; font-family:"Yuubi LP", "Yu Gothic", sans-serif; }
.voice-replacement__photo { width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.voice-replacement__role { margin:0 0 9px; color:#426777; font-size:clamp(11px,2.3vw,12px); line-height:1.3; }
.voice-replacement h3 { margin:0 0 8px; padding:3px 5px; background:#fff23f; color:#111; font-size:clamp(16px,3.65vw,19px); font-weight:700; line-height:1.45; }
.voice-replacement__quote { margin:0; color:#111; font-size:clamp(11px,2.6vw,13.5px); line-height:1.6; }

.work-photos { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1%; padding: .77% 3.26% .96%; }
.work-photos figure { margin:0; background:#183f55; }
.work-photos img { width:100%; height:auto; aspect-ratio:241 / 116; object-fit:cover; object-position:center; }
.work-photos figcaption { padding:5px 8px; color:#fff; font-family:"Yuubi LP", "Yu Gothic", sans-serif; font-size:clamp(9px,2.3vw,12px); font-weight:700; line-height:1.3; }
.proof__photos figcaption { min-height:4.3em; display:flex; align-items:center; justify-content:center; padding:8px; }