@charset "UTF-8";
/* Rezon corporate site — v1
   Layout: white ground, one blue, hairlines. Photos of real members carry the page; text stays short.
   Tokens follow the Rezon design guide (logo blue #0050E8). Single light theme by design. */
:root {
  --rz-blue: #0050E8;
  --rz-blue-dark: #003FBF;
  --rz-blue-light: #9DB8F5;
  --rz-blue-pale: #EEF3FE;
  --rz-tint: #F3F6FE;
  --rz-cta-sub: #D6E2FF;
  --ink: #111111;
  --ink-soft: #3B4350;
  --gray: #5A6270;
  --neutral: #DDE2EA;
  --hair: #E5E8EE;
  --border: #8B95A5;
  --bg: #FFFFFF;
  --font-ja: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-num: 'Manrope', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ja);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--rz-blue); text-decoration: none; }
a:hover { color: var(--rz-blue-dark); }
:focus-visible { outline: 3px solid var(--rz-blue); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.3; text-wrap: balance; letter-spacing: 0.005em; }
p { margin: 0; }
button { font-family: inherit; }

/* wide monitors: scale the whole page instead of leaving a small column in the middle */
@media (min-width: 1560px) { html { zoom: 1.1; --zoom: 1.1; } }
@media (min-width: 1760px) { html { zoom: 1.2; --zoom: 1.2; } }
@media (min-width: 2000px) { html { zoom: 1.3; --zoom: 1.3; } }
@media (min-width: 2400px) { html { zoom: 1.45; --zoom: 1.45; } }
@media (min-width: 2800px) { html { zoom: 1.6; --zoom: 1.6; } }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: max(32px, env(safe-area-inset-left, 0px));
  padding-right: max(32px, env(safe-area-inset-right, 0px));
}
@media (max-width: 760px) {
  .wrap { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
}
.band { padding-block: 96px; }
.band--tint { background: var(--rz-tint); }
.band--blue { background: var(--rz-blue); color: #FFFFFF; }
@media (max-width: 760px) { .band { padding-block: 64px; } }

/* type */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.015em; }
.h1 { font-size: clamp(30px, 4vw, 50px); line-height: 1.25; letter-spacing: -0.01em; }
.h2 { font-size: clamp(26px, 3.1vw, 36px); line-height: 1.35; }
.h3 { font-size: 18px; }
.lead { font-size: 16px; line-height: 1.9; color: var(--ink-soft); max-width: 34em; }
.cap { font-size: 13px; line-height: 1.7; color: var(--gray); }
.eyebrow {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; line-height: 1.5;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--rz-blue);
}
.eyebrow::before { content: ''; width: 10px; height: 11px; background: var(--rz-blue); flex: none; margin-top: 4px; -webkit-mask: var(--z-mask) center / contain no-repeat; mask: var(--z-mask) center / contain no-repeat; }
.band--blue .eyebrow { color: #FFFFFF; }
.band--blue .eyebrow::before { background: #FFFFFF; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 8px;
  font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer; max-width: 100%; text-align: center;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn--p { background: var(--rz-blue); color: #FFFFFF; }
.btn--p:hover { background: var(--rz-blue-dark); color: #FFFFFF; }
.btn--s { background: #FFFFFF; color: var(--ink); border-color: var(--border); }
.btn--s:hover { border-color: var(--ink); color: var(--ink); }
.btn--w { background: #FFFFFF; color: var(--rz-blue); }
.btn--w:hover { background: var(--rz-blue-pale); color: var(--rz-blue-dark); }
.btn--o { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.btn--o:hover { background: rgba(255,255,255,.12); color: #FFFFFF; }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 14px; }
.btn--block { width: 100%; }
.link { font-size: 14px; font-weight: 700; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
.link:hover { text-decoration-thickness: 2px; }

/* header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255,255,255,.96); border-bottom: 1px solid var(--hair);
  backdrop-filter: saturate(140%) blur(6px);
}
.site-header__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img { height: 22px; width: auto; }
.brand__sub { font-size: 13px; font-weight: 500; color: var(--gray); padding-left: 12px; border-left: 1px solid var(--hair); }
.site-nav { display: flex; gap: 26px; align-items: center; }
.site-nav a { color: var(--ink); font-size: 14px; font-weight: 500; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--rz-blue); }
.site-nav .nav-n { font-family: var(--font-num); font-size: 12px; font-weight: 700; color: var(--rz-blue); margin-left: 5px; }
.site-nav .btn--p, .site-nav .btn--p:hover { color: #FFFFFF; }
.nav-toggle {
  display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  align-items: center; justify-content: center; margin-right: -10px; color: var(--ink);
}
.nav-toggle .ic-x { display: none; }
.nav-toggle[aria-expanded="true"] .ic-bars { display: none; }
.nav-toggle[aria-expanded="true"] .ic-x { display: block; }
/* desktop: a group renders as its title link; on the recruit page the page's own sections are the row.
   phone: the CTA first, then four or five big rows; a row's sub-links are short chips, not a second list. */
.site-nav .nav-group { display: contents; }
.site-nav .nav-sub, .site-nav .nav-foot, .site-nav .nav-m, .site-nav .nav-t--label { display: none; }
.site-nav .nav-page .nav-sub { display: contents; }
@media (min-width: 1001px) { .site-nav .btn { display: none; } .site-nav .nav-page .nav-sub a.nav-m { display: none; } }
@media (max-width: 1180px) { .site-nav { gap: 18px; } }
@media (max-width: 1000px) {
  .site-header__in { height: 60px; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #FFFFFF; border-bottom: 1px solid var(--hair);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px var(--gutter-r) 18px var(--gutter-l);
    max-height: calc(100vh - 60px - env(safe-area-inset-top, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .site-nav.is-open { display: flex; }
  .site-nav .btn { order: -1; margin: 10px 0 8px; min-height: 50px; font-size: 15px; }
  .site-nav .nav-group, .site-nav .nav-page { display: block; border-bottom: 1px solid var(--hair); }
  .site-nav .nav-m { display: block; }
  .site-nav .nav-t { display: flex; align-items: center; padding: 15px 2px; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.4; }
  .site-nav a.nav-t::after { content: '›'; font-family: var(--font-num); font-size: 22px; line-height: 1; color: var(--gray); margin-left: auto; padding-left: 12px; }
  .site-nav .nav-t--label { display: flex; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--gray); padding: 14px 2px 6px; }
  .site-nav .nav-group:has(.nav-sub) .nav-t { padding-bottom: 6px; }
  .site-nav .nav-sub { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 16px; }
  .site-nav .nav-sub a, .site-nav .nav-sub a.nav-m { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink-soft); background: #FFFFFF; line-height: 1.2; }
  .site-nav .nav-sub a:hover { border-color: var(--rz-blue); color: var(--rz-blue); }
  .site-nav .nav-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 14px 2px 2px; }
  .site-nav .nav-foot a { font-size: 13px; font-weight: 500; color: var(--gray); }
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
}

/* hero (visual) */
.hero-media { position: relative; height: 640px; overflow: hidden; background: var(--rz-tint); }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.hero-media img { animation: zoom 1.6s var(--ease) both; }
.hero-panel {
  position: relative; margin-top: -220px; width: min(600px, 100%);
  background: #FFFFFF; border: 1px solid var(--hair); border-radius: 12px;
  padding: 36px 36px 32px; animation: rise .6s var(--ease) .35s both;
}
.hero-panel .h1 { font-size: clamp(28px, 3vw, 38px); white-space: nowrap; }
.br-sp { display: none; }
.br-pc { display: none; }
@media (min-width: 761px) { .br-pc { display: inline; } }
@media (max-width: 480px) { .hero-panel .h1 { white-space: normal; } .br-sp { display: inline; } }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
@media (max-width: 760px) {
  .hero-media { height: 300px; }
  .hero-media img { object-position: center 30%; }
  .hero-panel { margin-top: 0; width: auto; padding: 24px 0 0; border: 0; border-radius: 0; }
}

/* hero (text) */
.hero-text { padding-block: 88px 64px; }
.hero-text .grid2 { align-items: center; }
@media (max-width: 760px) { .hero-text { padding-block: 40px; } }

/* grids */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.grid2 > *, .grid3 > *, .grid4 > * { min-width: 0; }
@media (max-width: 1000px) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
  .grid2 { gap: 32px; }
}

/* numbers */
.stat { display: flex; flex-direction: column; gap: 6px; padding: 28px 0; border-top: 2px solid var(--rz-blue); }
.stat__value { font-size: clamp(44px, 5vw, 64px); font-weight: 700; line-height: 1; color: var(--rz-blue); }
.stat__value small { font-size: .42em; margin-left: 4px; font-weight: 700; }
.stat__label { font-size: 15px; font-weight: 700; }
@media (max-width: 760px) {
  .stat { padding: 18px 0; gap: 4px; }
  .stat__value { font-size: 40px; }
  .grid3 > .stat + .stat { border-top-width: 1px; border-top-color: var(--hair); }
}

/* scroll reveal: content is visible without JS; with JS, blocks below the fold rise in once */
.js .reveal:not(.in) { opacity: 0; }
.js .reveal.in { animation: rise .65s var(--ease-out) backwards; }
.js .reveal.d1 { animation-delay: .07s; } .js .reveal.d2 { animation-delay: .14s; } .js .reveal.d3 { animation-delay: .21s; }
.js .reveal.d4 { animation-delay: .28s; } .js .reveal.d5 { animation-delay: .35s; } .js .reveal.d6 { animation-delay: .42s; }

/* path cards: a line that says what is behind the door */
.pathcard__desc { font-size: 13px; color: var(--gray); margin-top: 4px; }

/* breakdown bar */
.bar { display: flex; gap: 2px; height: 56px; border-radius: 8px; overflow: hidden; background: #FFFFFF; }
.bar__seg { transform-origin: left center; transition: transform .9s var(--ease); }
.bar__seg--you { background: var(--rz-blue); }
.bar__seg--ins { background: var(--rz-blue-light); transition-delay: .5s; }
.bar__seg--co { background: var(--neutral); transition-delay: .8s; }
.js .bar:not(.is-in) .bar__seg { transform: scaleX(0); }
.legend { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; font-size: 15px; }
.legend__row { display: flex; justify-content: space-between; gap: 12px; }
.legend__key { display: flex; gap: 10px; align-items: center; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.dot--you { background: var(--rz-blue); }
.dot--ins { background: var(--rz-blue-light); }
.dot--co { background: var(--neutral); }

/* photos */
.frame { position: relative; overflow: hidden; border-radius: 12px; background: var(--rz-tint); max-width: 100%; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--45 { aspect-ratio: 4 / 5; }
.frame--1610 { aspect-ratio: 16 / 10; }
.frame--83 { aspect-ratio: 8 / 3; }
.frame--32 { aspect-ratio: 3 / 2; }
.faces { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.faces .frame { transition: transform .4s var(--ease); }
.faces a:hover .frame { transform: translateY(-4px); }
@media (max-width: 1000px) { .faces { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .faces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* cards */
.card { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 12px; padding: 24px; }
.card--tight { padding: 20px; }
.pathcard {
  display: flex; flex-direction: column; color: var(--ink);
  border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: #FFFFFF;
  transition: border-color .3s var(--ease);
}
.pathcard:hover { border-color: var(--rz-blue); color: var(--ink); }
.pathcard .frame { border-radius: 0; }
.pathcard img { transition: transform .6s var(--ease); }
.pathcard:hover img { transform: scale(1.02); }
.pathcard__foot { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; }
.pathcard__title { font-size: 20px; font-weight: 700; }
.pathcard__arrow { font-size: 20px; color: var(--rz-blue); transition: transform .3s var(--ease); }
.pathcard:hover .pathcard__arrow { transform: translateX(6px); }
.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--rz-blue-pale); color: var(--rz-blue); }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.promise { display: flex; gap: 16px; align-items: flex-start; }
.promise__n { flex: none; font-size: 13px; font-weight: 800; color: var(--rz-blue); padding-top: 5px; }
.promise p { font-size: 14px; line-height: 1.8; color: var(--ink-soft); margin-top: 6px; }

/* lists */
.newslist { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--hair); }
.newslist li { border-bottom: 1px solid var(--hair); }
.newslist a { display: flex; gap: 20px; align-items: center; padding: 18px 0; color: var(--ink); font-size: 15px; }
.newslist a:hover { color: var(--rz-blue); }
.newslist .tag { flex: none; }
.steps { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.steps li { display: flex; gap: 12px; align-items: flex-start; }
.steps__n {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--rz-blue); color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.steps__t { font-size: 15px; font-weight: 700; }
.steps__d { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

/* simulator */
.sim { padding: 32px; }
.sim__value { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.sim__value .num { font-size: 48px; font-weight: 700; line-height: 1; }
.sim__label { display: block; font-size: 13px; font-weight: 700; color: var(--gray); }
input[type="range"] { width: 100%; accent-color: var(--rz-blue); margin-top: 12px; }
.sim__scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--gray); }
.sim__out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sim__tile { padding: 20px; border-radius: 12px; background: var(--rz-tint); }
.sim__tile .num { font-size: 36px; font-weight: 700; line-height: 1.1; }
.sim__tile .num small { font-size: 14px; margin-left: 2px; font-weight: 700; }
@media (max-width: 760px) { .sim { padding: 20px; } .sim__value .num { font-size: 40px; } .sim__tile .num { font-size: 30px; } }

/* faq */
.faq { border-bottom: 1px solid var(--hair); }
.faq details { border-top: 1px solid var(--hair); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 0; font-size: 16px; font-weight: 700;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-num); font-size: 22px; color: var(--rz-blue); flex: none; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 0 0 20px; font-size: 14px; line-height: 1.9; color: var(--ink-soft); max-width: 48em; }

/* forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  min-height: 48px; border: 1.5px solid var(--border); border-radius: 8px; padding: 10px 14px;
  font-size: 16px; font-family: inherit; color: var(--ink); background: #FFFFFF; width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--rz-blue-light); outline-offset: 0; border-color: var(--rz-blue); }
.field .err { font-size: 12px; color: #B42318; display: none; }
.field.is-invalid .err { display: block; }
.field.is-invalid input, .field.is-invalid select { border-color: #B42318; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form__divider { display: flex; align-items: center; gap: 12px; }
.form__divider::before, .form__divider::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.form-done { display: none; }
.form.is-done .form__fields { display: none !important; }
.form.is-done .form-done { display: block; }

/* footer */
.site-footer { padding: 48px 0 36px; border-top: 1px solid var(--hair); }
.site-footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.site-footer__links { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; padding-top: 4px; }
.site-footer__links a { color: var(--gray); }
.site-footer__links a:hover { color: var(--rz-blue); }
.site-footer__bottom { margin-top: 28px; }
.company-dl { margin: 0; display: grid; grid-template-columns: 120px 1fr; row-gap: 8px; column-gap: 16px; font-size: 14px; }
.company-dl dt { color: var(--gray); }
.company-dl dd { margin: 0; }
@media (max-width: 480px) { .company-dl { grid-template-columns: 1fr; row-gap: 2px; } .company-dl dd { margin-bottom: 10px; } }

/* mobile sticky CTA */
.sticky-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: #FFFFFF; border-top: 1px solid var(--hair);
  padding: 10px var(--gutter-r) calc(12px + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
  gap: 10px;
}
.sticky-cta .btn { flex: 1; font-size: 13px; padding: 0 10px; white-space: nowrap; min-width: 0; }
.sticky-cta .btn--p { flex: 1.5; }
@media (max-width: 350px) { .sticky-cta .btn { font-size: 12px; padding: 0 8px; } }
@media (max-width: 880px) {
  .sticky-cta { display: flex; }
  body.has-sticky { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* misc */
.hairline { border-top: 1px solid var(--hair); }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; } .mt-28 { margin-top: 28px; } .mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; } .mt-56 { margin-top: 56px; }
.row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-only:focus, .sr-only:focus-visible { position: fixed; top: 8px; left: 8px; z-index: 200; width: auto; height: auto; clip: auto; padding: 10px 14px; background: #FFFFFF; color: var(--rz-blue); border: 2px solid var(--rz-blue); border-radius: 8px; font-weight: 700; }
.table-wrap { overflow-x: auto; }

/* ---------- v2: the layer that makes people want in ----------
   Ink band for the manifesto and founder, a model case for "you in two years",
   a fit list, a timeline. Same tokens: white, ink, one blue. */
.band--ink { background: var(--ink); color: #FFFFFF; }
.band--ink .eyebrow { color: #FFFFFF; }
.band--ink .eyebrow::before { background: var(--rz-blue-light); }
.band--ink .cap { color: #AAB0BA; }
.band--ink .link { color: var(--rz-blue-light); }
.band--ink .link:hover { color: #FFFFFF; }
.band--ink .btn--w { background: #FFFFFF; color: var(--ink); }
.band--ink .btn--w:hover { background: var(--rz-blue-light); color: var(--ink); }
.manifesto { display: flex; flex-direction: column; gap: 6px; max-width: 1000px; }
.manifesto p { font-size: clamp(26px, 3.6vw, 46px); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
.manifesto .hl { color: var(--rz-blue-light); }
.manifesto .muted { color: #AAB0BA; }
.vision { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16); font-size: 14px; line-height: 1.9; color: #C9CED6; max-width: 40em; }
.vision strong { color: #FFFFFF; }
.founder { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center; margin-top: 64px; padding-top: 56px; border-top: 1px solid rgba(255,255,255,.16); }
.founder__quote { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.5; }
.founder__msg { margin-top: 20px; font-size: 15px; line-height: 2.05; color: #C9CED6; max-width: 38em; }
.founder__sig { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.founder__name { font-size: 18px; font-weight: 700; }
.founder__role { font-size: 13px; color: #AAB0BA; }
.draft { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 3px 9px; border: 1px solid currentColor; border-radius: 999px; color: #AAB0BA; vertical-align: middle; }
.ph {
  display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 4 / 5; border-radius: 12px; border: 1px dashed rgba(255,255,255,.4);
  color: #AAB0BA; font-size: 13px; line-height: 1.7; padding: 20px;
}
@media (max-width: 760px) {
  .founder { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; padding-top: 40px; }
  .founder .ph { max-width: 220px; }
}

/* comparison line inside the simulator: what the same 単価 pays elsewhere */
.cmp { padding: 16px 18px 14px; border: 1px dashed var(--border); border-radius: 8px; background: #FFFFFF; }
.cmp input[type="range"] { margin-top: 6px; }
.cmp__line { font-size: 15px; margin-top: 8px; }
.cmp__line .num { color: var(--rz-blue); }
.cmp__hr { border: 0; border-top: 1px solid var(--hair); margin: 18px 0 14px; }

/* momentum: company numbers on the ink band */
.momentum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.16); }
.momentum__v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: clamp(34px, 3.6vw, 48px); font-weight: 700; line-height: 1; color: #FFFFFF; letter-spacing: -0.02em; }
.momentum__v small { font-size: .42em; margin-left: 4px; }
.momentum__l { font-size: 14px; font-weight: 700; margin-top: 10px; }
.momentum .cap { margin-top: 4px; }
@media (max-width: 760px) { .momentum { grid-template-columns: 1fr; gap: 20px; } }

/* AI & tools */
.ticks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ticks li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.7; color: var(--ink); }
.ticks li::before { content: ''; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--rz-blue); box-sizing: border-box; }
.card .draft, .ticks .draft { color: var(--gray); }
.term {
  margin: 0; padding: 20px 22px; border-radius: 12px; background: var(--ink); color: #E6E9EF;
  font: 500 13.5px/1.9 'SF Mono', Menlo, Consolas, 'Noto Sans Mono', monospace; white-space: pre-wrap; word-break: break-word;
}
.term__p { color: var(--rz-blue-light); font-weight: 700; }
.term__o { color: #AAB0BA; }
.term__ok { color: #FFFFFF; font-weight: 700; }
@media (max-width: 760px) { .term { font-size: 12.5px; padding: 16px; } }

/* founder block on the ink band */
.hot-quote { font-size: clamp(26px, 4.6vw, 64px); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; max-width: 18em; word-break: keep-all; }
.hot-quote .nw { white-space: nowrap; display: inline-block; }
@media (max-width: 360px) { .hot-quote { font-size: 24px; } }
.hot-sig { margin-top: 20px; font-size: 15px; color: #AAB0BA; }
.hot-sig strong { color: #FFFFFF; font-size: 17px; margin-right: 10px; }
.hot-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.hot-portrait { margin: 0; width: clamp(120px, 15vw, 196px); aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: #1C2230; }
.hot-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 880px) { .hot-head { grid-template-columns: 1fr; gap: 18px; } .hot-portrait { width: 120px; } }
.hot-body { margin-top: 48px; max-width: 40em; }
.hot-body p { font-size: clamp(16px, 1.5vw, 19px); line-height: 2; color: #E6E9EF; }
@media (max-width: 880px) { .hot-body { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; } }

/* question/answer table */
.qa { width: 100%; border-collapse: collapse; font-size: 15px; }
.qa th { text-align: left; font-size: 13px; color: var(--gray); font-weight: 700; padding: 10px 14px; background: var(--rz-tint); }
.qa td { padding: 14px; border-bottom: 1px solid var(--hair); vertical-align: top; line-height: 1.7; }
.qa td:first-child { font-weight: 700; }
.qa td:last-child { color: var(--ink-soft); }
@media (max-width: 600px) { .qa th:first-child { width: auto !important; } .qa td { padding: 12px 10px; font-size: 14px; } }

.spec td:first-child, .spec th[scope="row"] { width: 22%; color: var(--gray); font-weight: 700; background: transparent; font-size: 14px; padding: 14px; border-bottom: 1px solid var(--hair); vertical-align: top; line-height: 1.7; }
.qa .draft { margin-left: 6px; }

/* bento: numbers laid out as tiles, white ground, hairline borders */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.bento > * { grid-column: span 2; min-width: 0; }
.bento > .tile--lg { grid-column: span 3; }
.bento > .tile--xl { grid-column: span 4; }
.bento > .tile--full { grid-column: 1 / -1; }
.tile { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.tile__k { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--gray); display: flex; align-items: center; gap: 8px; }
.tile__v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; line-height: 1.1; color: var(--rz-blue); white-space: nowrap; letter-spacing: -0.01em; }
.tile__v small { font-size: max(12px, .45em); margin-left: 4px; font-weight: 600; }
.tile__v--ink { color: var(--ink); }
.tile__d { font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.tile--formula .formula { font-family: var(--font-num); font-size: clamp(15px, 1.6vw, 20px); color: var(--ink); line-height: 1.6; }
.tile--formula .formula b { color: var(--rz-blue); font-weight: 600; }
.bento .card { border-radius: 12px; }
.band--tint .tile, .band--tint .bento .card { background: #FFFFFF; }
.hot-hero .tile { background: #FFFFFF; border-color: var(--hair); }
.hot-hero .tile--full:first-child { background: var(--rz-tint); }
.hot-hero .tile__v { font-size: clamp(22px, 2.1vw, 30px); }
.hot-hero .tile { padding: 16px 18px; }
.hot-hero .tile__k { font-size: 11px; }
.hot-hero .tile__d { font-size: 12px; }
.hot-hero .hot-moment { border-top: 0; }
@media (max-width: 880px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bento > * { grid-column: span 1; }
  .bento > .tile--lg, .bento > .tile--xl, .bento > .tile--full { grid-column: 1 / -1; }
  .tile { padding: 16px; }
}

/* experience chips under the slider */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 700 13px/1 var(--font-ja); min-height: 40px; padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--border); background: #FFFFFF; color: var(--ink); cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.chip:hover { border-color: var(--rz-blue); }
.chip.is-on { background: var(--rz-blue); border-color: var(--rz-blue); color: #FFFFFF; }
.chip--radio { display: inline-flex; align-items: center; gap: 6px; }
.field .chip--radio input[type="radio"], .chip--radio input[type="radio"] { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; border: 0; accent-color: var(--rz-blue); flex: none; }
.chip--radio { white-space: nowrap; font-weight: 700; font-size: 13px; }
.chip--radio:has(input:checked) { border-color: var(--rz-blue); background: var(--rz-blue-pale); color: var(--rz-blue); }

/* model case: three numbers that move */
.path3 { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; gap: 12px; align-items: stretch; margin-top: 32px; }
.step-tile { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 4px; }
.step-tile--now { border-color: var(--rz-blue); }
.step-tile__when { font-size: 13px; font-weight: 700; color: var(--gray); letter-spacing: .04em; }
.step-tile__price { font-size: 14px; color: var(--ink-soft); margin-top: 6px; }
.step-tile__price .num { font-size: 20px; font-weight: 700; color: var(--ink); }
.step-tile__pay { margin-top: 12px; display: flex; align-items: baseline; gap: 4px; }
.step-tile__pay .num { font-size: clamp(36px, 3.4vw, 46px); font-weight: 700; line-height: 1; color: var(--rz-blue); }
.step-tile__pay small { font-size: 14px; font-weight: 700; color: var(--rz-blue); }
.step-tile__year { font-size: 13px; color: var(--gray); margin-top: 6px; }
.path3__arrow { display: flex; align-items: center; justify-content: center; color: var(--rz-blue); }
@media (max-width: 760px) {
  .path3 { grid-template-columns: 1fr; gap: 8px; }
  .path3__arrow { transform: rotate(90deg); height: 32px; }
}
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.ways > div { padding: 20px 0 0; border-top: 1px solid var(--border); }
.ways h3 { font-size: 16px; }
.ways p { font-size: 14px; line-height: 1.8; color: var(--ink-soft); margin-top: 6px; }
@media (max-width: 760px) { .ways { grid-template-columns: 1fr; } }

/* fit: who thrives here, who may not */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.fit > div { padding: 28px; border-radius: 12px; border: 1px solid var(--hair); background: #FFFFFF; }
.fit h3 { font-size: 18px; }
.fit ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fit li { position: relative; padding-left: 22px; font-size: 16px; font-weight: 500; line-height: 1.7; }
.fit li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--rz-blue); }
.fit--no li::before { background: #FFFFFF; border: 1.5px solid var(--border); width: 6px; height: 6px; }
.fit--no li { color: var(--ink-soft); }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; gap: 12px; } .fit > div { padding: 22px; } }

/* perks: short facts about how work feels */
.perks { display: flex; flex-wrap: wrap; gap: 10px; }
.perk { display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 14px; border: 1px solid var(--hair); border-radius: 999px; background: #FFFFFF; font-size: 14px; font-weight: 700; }
.perk .num { color: var(--rz-blue); font-size: 16px; }

/* timeline */
.tl { list-style: none; margin: 36px 0 0; padding: 0 0 0 28px; border-left: 2px solid var(--hair); }
.tl li { position: relative; padding-bottom: 32px; }
.tl li:last-child { padding-bottom: 0; }
.tl li::before { content: ''; position: absolute; left: -35px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--rz-blue); border: 2px solid #FFFFFF; }
.tl li.tl--next::before { background: #FFFFFF; border: 2px solid var(--rz-blue); }
.tl__when { font-family: var(--font-num); font-weight: 700; font-size: 13px; letter-spacing: .06em; color: var(--rz-blue); }
.tl__t { font-size: 18px; font-weight: 700; margin-top: 2px; }
.tl__d { font-size: 14px; line-height: 1.8; color: var(--ink-soft); margin-top: 4px; max-width: 40em; }

/* hero drift: the picture breathes like a video would */
.hero-media img { animation: zoom 1.6s var(--ease) both, drift 30s ease-in-out 1.6s infinite alternate; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes zoom { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-media img, .hero-panel { animation: none !important; }
  .bar__seg, .faces .frame, .pathcard img, .pathcard__arrow, .btn, .js .reveal { transition: none !important; }
  .js .bar:not(.is-in) .bar__seg { transform: none; }
  .js .reveal:not(.in) { opacity: 1; }
  .js .reveal.in { animation: none !important; }
  .hero-in > *, .hero-in .l, .js .stagger.in > *, .site-nav.is-open { animation: none !important; }
  .js .stagger:not(.in) > * { opacity: 1; }
}

/* how a project gets decided */
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.step4 { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--hair); border-radius: 12px; background: #FFFFFF; }
.step4__n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--rz-blue); color: #FFFFFF; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.step4 b { font-size: 15px; }
.step4 p { font-size: 13px; color: var(--ink-soft); line-height: 1.7; margin-top: 4px; }
@media (max-width: 880px) { .steps4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .steps4 { grid-template-columns: 1fr; } }


/* ---- v4: leaner components ---- */
.case { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 12px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.case .tags .tag { font-size: 12px; padding: 3px 9px; }
.case__t { font-size: 16px; line-height: 1.55; font-weight: 700; }
.case__pay { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; font-size: 14px; color: var(--ink-soft); }
.case__pay .num { font-size: 26px; line-height: 1; color: var(--rz-blue); }
.case__pay small { font-size: 12px; font-weight: 700; color: var(--rz-blue); margin-right: 4px; }
.case__arrow { color: var(--gray); margin: 0 4px; }
.case__line { font-size: 13px; line-height: 1.7; color: var(--gray); }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: flow; border-top: 1px solid var(--hair); }
.flow li { counter-increment: flow; padding: 18px 20px 18px 0; display: flex; flex-direction: column; gap: 4px; position: relative; min-width: 0; }
.flow li::before { content: counter(flow, decimal-leading-zero); font-family: var(--font-num); font-weight: 800; font-size: 12px; letter-spacing: .06em; color: var(--rz-blue); }
.flow li b { font-size: 15px; }
.flow li span { font-size: 13px; line-height: 1.7; color: var(--gray); }
@media (max-width: 760px) { .flow { grid-template-columns: 1fr 1fr; } }
.kv { margin: 0; border-top: 1px solid var(--hair); }
.kv__row { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hair); margin: 0; }
.kv__row dt { font-weight: 700; font-size: 15px; }
.kv__row dd { margin: 0; font-size: 15px; line-height: 1.8; color: var(--ink-soft); min-width: 0; }
@media (max-width: 480px) { .kv__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; } }
.more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--rz-blue); padding: 6px 0; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: '+'; font-family: var(--font-num); font-size: 18px; line-height: 1; }
.more[open] > summary::after { content: '−'; }
.more > summary:hover { color: var(--rz-blue-dark); }
.faq summary { font-size: 16px; }
.band--tint .case, .band--tint .card { background: #FFFFFF; }


/* ---- narrow phones / large text (≤ 420px CSS width): no cramped multi-column, no broken units ---- */
h1, h2, h3, .h1, .h2, .h3, .stat__label, .hot-fact__l, .case__t, .kv__row dt, .steps__t, .flow li b, .tile__k { word-break: keep-all; overflow-wrap: anywhere; }
.stat__value, .tile__v, .hot-fact__v, .step-tile__pay, .step-tile__price, .case__pay .num, .legend__row strong, .sim__value, .sim__tile .num, .cmp__line strong { white-space: nowrap; }
.step-tile__pay { flex-wrap: wrap; }
.step-tile__pay small, .tile__v small, .stat__value small, .hot-fact__v small, .case__pay small { white-space: nowrap; }
.case__pay { row-gap: 4px; }
.case__pay .case__g { white-space: nowrap; display: inline-flex; align-items: baseline; gap: 2px; }
@media (max-width: 760px) {
  .bento > .step-tile { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "when pay" "price pay" "year pay"; align-items: center; column-gap: 16px; padding: 16px 18px; }
  .step-tile__when { grid-area: when; }
  .step-tile__price { grid-area: price; margin-top: 2px; }
  .step-tile__pay { grid-area: pay; margin-top: 0; justify-self: end; }
  .step-tile__pay .num { font-size: 30px; }
  .step-tile__year { grid-area: year; margin-top: 2px; }
}
@media (max-width: 480px) {
  .flow { grid-template-columns: 1fr; }
  .flow li { padding: 12px 0; border-bottom: 1px solid var(--hair); }
  .sim__out { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sim__tile { padding: 14px; }
  .sim__tile .num { font-size: 28px; }
  .grid3 > .stat { padding: 14px 0; }
  .stat__value { font-size: 36px; }
  .faq summary { font-size: 15px; padding: 16px 0; }
  .qa td, .spec th[scope="row"], .spec td:first-child { padding: 12px 10px; font-size: 14px; }
  .spec td:first-child, .spec th[scope="row"] { width: 30%; }
  .case { padding: 18px 16px 16px; }
  .hero-actions .btn { width: 100%; }
}

.grid2--work { grid-template-columns: 1fr 1.4fr; align-items: start; }
.grid2--faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.grid2--faq > .faq-more { grid-column: 2; }
/* 1023px以下は1列に。faq-more を2列目に置いたままだと、見えない2列目ができて見出しが縦に潰れる */
@media (max-width: 1023px) { .grid2--faq { grid-template-columns: minmax(0, 1fr); gap: 24px; } .grid2--faq > .faq-more { grid-column: 1; } }
.table-wrap > table.qa:not(.spec) { min-width: 560px; }
@media (max-width: 900px) {
  .grid2--work, .grid2--faq { grid-template-columns: 1fr; }
  .grid2--work .frame { aspect-ratio: 3 / 2; max-width: 100% !important; }
}

@media (max-width: 480px) {
  .bento { grid-template-columns: 1fr; }
  .bento > *, .bento > .tile--lg, .bento > .tile--xl { grid-column: 1 / -1; }
  .tile .btn { width: 100%; }
}

@media (max-width: 480px) {
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto !important; }
  .spec tr { padding: 12px 0; border-bottom: 1px solid var(--hair); }
  .spec th[scope="row"], .spec td:first-child { border-bottom: 0; padding: 0 0 4px !important; font-size: 13px; }
  .spec td { border-bottom: 0; padding: 0 !important; }
  .spec td:last-child { padding: 0 !important; }
}


/* ---- motion: small, fast, reversible ---- */
a.card, .case, .pathcard { transition: transform .25s var(--ease), border-color .25s var(--ease); }
a.card:hover, .case:hover { transform: translateY(-2px); border-color: var(--border); }
.bar__seg { transition: transform .9s var(--ease), flex-grow .35s var(--ease); }
@keyframes fade-up { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.faq details[open] > p { animation: fade-up .28s var(--ease); }
.more[open] > :not(summary) { animation: fade-up .28s var(--ease); }
.btn { transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .15s var(--ease); }
.btn:active { transform: translateY(1px); }
.step-tile, .tile, .stat { transition: border-color .25s var(--ease); }
@media (prefers-reduced-motion: reduce) { a.card, .case, .pathcard, .btn, .bar__seg { transition: none !important; } .faq details[open] > p, .more[open] > :not(summary) { animation: none !important; } }


/* ============================================================
   v5 — motion & infographics.
   Rules: a movement either explains a number, confirms an action,
   or shortens the way to the CTA. It runs once, under a second,
   and every piece honours prefers-reduced-motion.
   ============================================================ */

/* page to page: a short cross-fade so the site reads as one place (Chromium; others simply jump) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .16s ease-out both; }
::view-transition-new(root) { animation: vt-in .24s ease-out both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@keyframes rise-fade { from { opacity: 0; } to { opacity: 1; } }

/* hero entrance: the lines arrive in reading order, 80ms apart. Pure CSS, so it also runs without JS. */
.hero-in > * { animation: rise .7s var(--ease-out) both; }
.hero-in > :nth-child(1) { animation-delay: .04s; }
.hero-in > :nth-child(2) { animation-delay: .12s; }
.hero-in > :nth-child(3) { animation-delay: .22s; }
.hero-in > :nth-child(4) { animation-delay: .32s; }
.hero-in > :nth-child(5) { animation-delay: .42s; }
.hero-in > :nth-child(6) { animation-delay: .5s; }
.hero-in > .has-lines { animation: none; }
.hero-in .l { display: inline-block; animation: rise .7s var(--ease-out) both; animation-delay: .1s; }
.hero-in .l:nth-of-type(2) { animation-delay: .2s; }
.hero-in .l:nth-of-type(3) { animation-delay: .3s; }

/* stagger: children of a .stagger block come in one after another once the block is on screen */
.js .stagger:not(.in) > * { opacity: 0; }
.js .stagger.in > * { animation: rise .6s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.js .stagger--fade.in > * { animation-name: rise-fade; }

/* the sticky header steps aside while you read down on a phone, and comes back on the first scroll up */
.site-header { transition: transform .32s var(--ease-out); }
@media (max-width: 1000px) { .js.hdr-hide .site-header { transform: translateY(-100%); } }
.site-nav.is-open { animation: nav-in .22s var(--ease-out); }
@keyframes nav-in { from { opacity: 0; transform: translateY(-6px); } }

/* in-page section nav for the long recruit page: the current section is underlined, the underline slides */
.subnav { position: sticky; top: calc(72px + env(safe-area-inset-top, 0px)); z-index: 45; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--hair); backdrop-filter: saturate(140%) blur(6px); transition: top .32s var(--ease-out); }
.subnav__in { position: relative; display: flex; align-items: center; gap: 2px; height: 46px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.subnav__in::-webkit-scrollbar { display: none; }
.subnav a { flex: none; display: inline-flex; align-items: center; height: 100%; padding: 0 12px; font-size: 13px; font-weight: 700; color: var(--gray); white-space: nowrap; transition: color .2s var(--ease); }
.subnav a:hover, .subnav a.is-active { color: var(--rz-blue); }
.subnav a.subnav__cta { margin-left: auto; color: var(--rz-blue); }
.subnav__ind { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--rz-blue); transition: transform .35s var(--ease-out), width .35s var(--ease-out); }

@media (max-width: 1000px) {
  .subnav { top: calc(60px + env(safe-area-inset-top, 0px)); }
  .js.hdr-hide .subnav { top: env(safe-area-inset-top, 0px); }
  .subnav__in { height: 44px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .subnav a { padding: 0 10px; }
  .subnav a.subnav__cta { display: none; }
  .has-subnav [id] { scroll-margin-top: 118px; }
}
/* desktop header links on the recruit page: the one for the section you are in is underlined */
.site-nav a[href^="#"] { position: relative; }
.site-nav a[href^="#"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--rz-blue); transform: scaleX(0); transform-origin: left center; transition: transform .3s var(--ease-out); }
@media (min-width: 1001px) { .site-nav a.is-active::after { transform: none; } }
#offer .spec td:first-child { width: 30%; }

/* mobile sticky bar: hidden (and out of the Tab order) while the same button or the form is on screen; on articles, until half is read */
.js .sticky-cta { transform: translateY(110%); visibility: hidden; transition: transform .35s var(--ease-out), visibility 0s linear .35s; }
.js .cta-on .sticky-cta { transform: none; visibility: visible; transition: transform .35s var(--ease-out), visibility 0s; }
.form-carry { background: var(--rz-blue-tint, #F3F6FE); }
.article h2 + .faq details:first-child { border-top: 0; }
.article .faq { margin-bottom: 8px; }
.field--check:has(input:focus-visible) { outline: 3px solid var(--rz-blue-light); outline-offset: 2px; border-radius: 6px; }

/* slider: a filled track and a round thumb you can actually grab (the fill is a hard edge, not a gradient) */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 28px; background: transparent; cursor: pointer; margin-top: 12px; }
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--rz-blue) 0 var(--p, 50%), var(--hair) var(--p, 50%) 100%); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #FFFFFF; border: 2.5px solid var(--rz-blue); box-shadow: 0 0 0 0 rgba(0,80,232,.14); transition: transform .15s var(--ease-out), box-shadow .2s var(--ease-out); }
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.06); }
input[type="range"]:active::-webkit-slider-thumb, input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(0,80,232,.14); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--hair); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--rz-blue); }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #FFFFFF; border: 2.5px solid var(--rz-blue); box-sizing: border-box; }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 8px rgba(0,80,232,.14); }

/* numbers that change under your finger glide to the new value (JS tween); nothing else needed here */
.sim__tile .num, .legend__row strong, .tile__v { transition: color .2s var(--ease); }

/* the short blue rule above each hero stat draws itself in as the number counts */
.stat { position: relative; }
.stat::before { content: ''; position: absolute; left: 0; top: 0; width: 40px; height: 2px; background: var(--rz-blue); transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--ease-out) .25s; }
.js .stat.in::before { transform: none; }

/* <details> open and close with height (Chromium 131+; elsewhere they still open instantly) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content, .more::details-content { block-size: 0; overflow: clip; transition: block-size .32s var(--ease-out), content-visibility .32s allow-discrete; }
  .faq details[open]::details-content, .more[open]::details-content { block-size: auto; }
}
.faq summary::after, .more > summary::after { transition: transform .25s var(--ease-out); }
.faq details[open] summary::after, .more[open] > summary::after { transform: rotate(180deg); }

/* mini breakdown bar on each 案件例 card: the same symbol as the simulator, 6px tall */
.bar--mini { height: 6px; border-radius: 3px; background: var(--rz-tint); margin-top: 2px; }
.bar--mini .bar__seg--ins { transition-delay: .35s; }
.bar--mini .bar__seg--co { transition-delay: .55s; }

/* 給与の決まり方: a thin line runs across the three steps in order, and each number counts in turn */
.step-tile { position: relative; overflow: hidden; }
.step-tile::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--rz-blue); transform: scaleX(0); transform-origin: left center; transition: transform .7s var(--ease-out); }
.js .step-tile.in::before { transform: none; }
.js .step-tile.d1.in::before { transition-delay: .6s; }
.js .step-tile.d2.in::before { transition-delay: 1.2s; }

/* salary bands in the 目安表: where each experience band sits on the 40〜110万円 scale */
.qa--yrs th:first-child, .qa--yrs td:first-child { white-space: nowrap; }
.rng { display: block; position: relative; height: 4px; border-radius: 2px; background: var(--rz-tint); margin-top: 8px; min-width: 110px; }
.rng i { position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--w); border-radius: 2px; background: var(--rz-blue); transform: scaleX(0); transform-origin: left center; transition: transform .7s var(--ease-out) calc(var(--i, 0) * 110ms + .25s); }
.js .in .rng i { transform: none; }

/* before → after bars (入社した人の年収の変化): grey is the old job, blue is Rezon; both grow from the left */
.delta { display: grid; gap: 8px; margin-top: 12px; }
.delta__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12px; color: var(--gray); }
.delta__row b.num { color: var(--gray); font-size: 14px; font-weight: 600; white-space: nowrap; }
.delta__row b.num small { font-size: 12px; margin-left: 1px; }
.delta__bar { display: block; height: 10px; border-radius: 5px; background: var(--neutral); transform: scaleX(var(--w, 1)); transform-origin: left center; transition: transform .9s var(--ease-out) .25s; }
.delta__row--now { color: var(--ink); font-weight: 700; }
.delta__row--now .delta__bar { background: var(--rz-blue); transition-delay: .55s; }
.delta__row--now b.num { color: var(--rz-blue); font-size: 22px; font-weight: 700; }
.delta__row--now b.num small { font-size: 12px; }
.js .reveal:not(.in) .delta__bar { transform: scaleX(0); }

/* Rezon vs いまの会社 inside the simulator: two bars that move with both sliders */
.vs { display: grid; gap: 8px; margin: 12px 0 4px; }
.vs__row { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; color: var(--gray); }
.vs__k b { font-weight: 700; }
.vs__row b.num { color: var(--ink); font-size: 15px; white-space: nowrap; }
.vs__bar { display: block; height: 12px; border-radius: 6px; background: var(--neutral); transform: scaleX(var(--w, 1)); transform-origin: left center; transition: transform .35s var(--ease-out); }
.vs__row--rz .vs__k { color: var(--ink); }
.vs__row--rz .vs__bar { background: var(--rz-blue); }
.vs__row--rz b.num { color: var(--rz-blue); }

/* rings: a share of something, drawn as an arc. The caption always says a share of what. */
.rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ring { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; }
.ring__wrap { position: relative; width: 88px; height: 88px; }
.ring__svg { width: 100%; height: 100%; display: block; }
.ring__t { fill: none; stroke: var(--rz-tint); stroke-width: 5; }
.ring__v { fill: none; stroke: var(--rz-blue); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 125.66; stroke-dashoffset: 125.66; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.2s var(--ease-out) .2s; }
.js .in .ring__v { stroke-dashoffset: calc(125.66 * (1 - var(--v, 0))); }
.ring__n { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 30px; font-family: var(--font-num); font-weight: 700; font-size: 20px; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.ring__n small { font-size: 12px; margin-left: 2px; font-family: var(--font-ja); font-weight: 700; }
.ring__k { font-size: 13px; font-weight: 700; margin-top: 6px; }
.ring__d { font-size: 12px; line-height: 1.5; color: var(--gray); }
@media (max-width: 420px) { .ring__wrap { width: 76px; height: 76px; } .ring__n { font-size: 17px; padding-top: 26px; } }

/* 条件提示書 sample: rows fall into place, the line you came for is tinted */
.spec tr.is-key td { background: var(--rz-blue-pale); font-weight: 700; color: var(--ink); }
.spec tr.is-key td:first-child { color: var(--rz-blue); }

/* forms: a drawn check when the request is in; a short shake on a missed field */
.ok { width: 56px; height: 56px; display: block; margin-bottom: 14px; }
.ok circle { fill: none; stroke: var(--rz-blue); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; }
.ok path { fill: none; stroke: var(--rz-blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; }
.form.is-done .ok circle { animation: draw .6s var(--ease-out) .1s forwards; }
.form.is-done .ok path { animation: draw .4s var(--ease-out) .55s forwards; }
.form.is-done .form-done { animation: rise .5s var(--ease-out) both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.field.is-invalid { animation: shake .3s var(--ease-out); }
@keyframes shake { 0%, 100% { transform: none; } 30% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }
.field input:focus + .err, .field label { transition: color .2s var(--ease); }
.field:focus-within label { color: var(--rz-blue); }

/* steps to the interview: the numbered dots light up in order (stagger handles the rows) */
.steps__n { transition: transform .3s var(--ease-out); }
.steps li:hover .steps__n { transform: scale(1.08); }

/* CTA buttons: the arrow is the only thing that moves */
.btn .arr { display: none; }

/* reduced motion: everything lands in its final state at once */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .hero-in > *, .hero-in .l, .js .stagger.in > *, .site-nav.is-open, .form.is-done .form-done, .field.is-invalid { animation: none !important; }
  .js .stagger:not(.in) > * { opacity: 1; }
  .site-header, .subnav, .subnav__ind, .js .sticky-cta, input[type="range"]::-webkit-slider-thumb, .stat::before, .step-tile::before, .rng i, .delta__bar, .vs__bar, .ring__v, .faq summary::after, .more > summary::after, .steps__n { transition: none !important; }
  .stat::before, .step-tile::before, .rng i { transform: none !important; }
  .js .reveal:not(.in) .delta__bar { transform: scaleX(var(--w, 1)); }
  .ring__v { stroke-dashoffset: calc(125.66 * (1 - var(--v, 0))) !important; }
  .ok circle, .ok path { stroke-dashoffset: 0; animation: none !important; }
  .js.hdr-hide .site-header { transform: none; }
}

/* milestones under the headcount dots: the line draws left to right and each point pops in turn */
.mile { list-style: none; margin: 28px 0 0; padding: 24px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; position: relative; }
.mile::before, .mile::after { content: ''; position: absolute; left: 7px; right: 7px; top: 6px; height: 2px; background: var(--hair); }
.mile::after { background: var(--rz-blue); transform: scaleX(0); transform-origin: left center; transition: transform 1.5s var(--ease-out) .3s; }
.js .in .mile::after { transform: none; }
.mile li { position: relative; min-width: 0; font-size: 12px; line-height: 1.5; color: var(--gray); padding-right: 4px; }
.mile li::before { content: ''; position: absolute; z-index: 1; left: 0; top: -24px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--rz-blue); box-sizing: border-box; transform: scale(0); transition: transform .4s var(--ease-out) calc(var(--i, 0) * .32s + .25s); }
.mile li:last-child::before { background: var(--rz-blue); }
.js .in .mile li::before { transform: none; }
.mile time { display: block; font-family: var(--font-num); font-weight: 700; font-size: 13px; color: var(--ink); letter-spacing: -0.01em; }
.mile b { display: block; font-weight: 500; margin-top: 2px; word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .mile { grid-template-columns: 1fr; gap: 14px; padding: 0 0 0 28px; margin-top: 22px; }
  .mile::before, .mile::after { left: 6px; right: auto; top: 4px; bottom: 4px; width: 2px; height: auto; }
  .mile::after { transform: scaleY(0); transform-origin: center top; }
  .mile li::before { left: -28px; top: 3px; }
}
@media (prefers-reduced-motion: reduce) { .mile::after, .mile li::before { transition: none !important; transform: none !important; } }

/* v6 launch: form send error, honeypot */
.form-send-err { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: #B42318; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* v7 human pass: letter, history, plain fact table, photo captions */
.letter { margin-top: 40px; max-width: 40em; }
.letter p { margin: 0 0 1.1em; font-size: clamp(16px, 1.45vw, 18px); line-height: 2.1; color: #E6E9EF; }
.letter .letter__sig { margin: 32px 0 0; font-size: 13px; line-height: 1.6; color: #AAB0BA; }
.letter__sig strong { display: block; margin-top: 4px; font-size: 19px; font-weight: 700; color: #FFFFFF; letter-spacing: .04em; }
.numbers2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; margin-top: 48px; }
.numbers2__h { margin: 0; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font-size: 15px; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.numbers2__h span { font-size: 12px; font-weight: 400; color: var(--gray); }
.hist { margin: 0; display: grid; grid-template-columns: 7.2em minmax(0, 1fr); }
.hist dt, .hist dd { margin: 0; padding: 15px 0; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.7; }
.hist dt { color: var(--gray); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.facts { margin: 0; }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--hair); }
.facts dt { font-size: 15px; }
.facts dd { margin: 0; text-align: right; font-size: 14px; }
.facts b.num { font-size: 26px; color: var(--rz-blue); margin: 0 2px 0 4px; }
.facts small { display: block; font-size: 12px; color: var(--gray); margin-top: 2px; }
@media (max-width: 880px) { .numbers2 { grid-template-columns: 1fr; gap: 40px; margin-top: 36px; } }
@media (max-width: 420px) { .hist { grid-template-columns: 6.4em minmax(0, 1fr); } .hist dt, .hist dd { font-size: 14px; } }
.photo-cap { margin: 8px 0 0; font-size: 12px; color: var(--gray); }
.ai-home { align-items: center; }
.ai-home__photo { margin: 0; }
.client__dl { max-width: 34em; }
.keep { display: inline-block; }

/* v8 PC: the same header on every page */
@media (min-width: 1001px) {
  .brand__sub { display: none; }
  .site-nav > .nav-group > a.nav-t { position: relative; }
  .site-nav > .nav-group > a.nav-t[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--rz-blue); }
  .subnav__in { justify-content: center; gap: 4px; }
  .subnav a { padding: 0 14px; }
  .subnav a.subnav__cta { display: none; }
  .has-subnav [id] { scroll-margin-top: 132px; }
}

/* ===================== v9: REZONのZを部品にする / 数字は見て分かる形に =====================
   Z = ロゴのZ（上の横棒＋45度の斜線＋ドット）。形は変えず、青か白で使う。
   1) 見出しの頭のマーク  2) 写真の左上を45度で切る（Zの斜線と同じ角度）  3) 青い帯の大きな透かし
   数字は「メーター」（同じ青の濃淡、左が直角・右端4px丸）で、割合を一目で見せる */
:root { --z-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 88'%3E%3Cpath d='M0 0H82V18.5L12.5 87.5L0 75V73.5L55 18.5H0Z'/%3E%3Ccircle cx='68.5' cy='74.5' r='12.5'/%3E%3C/svg%3E"); --meter-track: #E3EAFB; }
.zm { display: inline-block; width: .62em; height: .66em; background: var(--rz-blue); -webkit-mask: var(--z-mask) center / contain no-repeat; mask: var(--z-mask) center / contain no-repeat; }

/* 1) section headings */
main .band .h2::before { content: ''; display: inline-block; width: .56em; height: .6em; margin-right: .34em; vertical-align: -.02em; background: var(--rz-blue); -webkit-mask: var(--z-mask) center / contain no-repeat; mask: var(--z-mask) center / contain no-repeat; transform-origin: 50% 50%; }
main .band--blue .h2::before { background: #FFFFFF; }
.js main .h2:not(.z-in)::before { opacity: 0; }
.js main .h2.z-in::before { animation: zroll 1.05s both; }

/* 2) photos: top-left corner cut at the Z's 45 degrees */
.frame--z { border-radius: 0; --zc: clamp(22px, 3.2vw, 40px); clip-path: polygon(var(--zc) 0, 100% 0, 100% 100%, 0 100%, 0 var(--zc)); }

/* 3) blue bands: the Z as a large watermark */
.band--blue { position: relative; overflow: hidden; isolation: isolate; }
.band--blue::after { content: ''; position: absolute; z-index: -1; right: -2vw; bottom: -18%; width: clamp(220px, 30vw, 420px); aspect-ratio: 82 / 88; background: #FFFFFF; opacity: .1; -webkit-mask: var(--z-mask) center / contain no-repeat; mask: var(--z-mask) center / contain no-repeat; pointer-events: none; }

/* meters: one ratio against a whole */
.meter { display: flex; gap: 2px; height: 10px; border-radius: 3px; background: var(--meter-track); overflow: hidden; }
.meter > i { flex: none; width: calc(var(--v) * 100%); background: var(--rz-blue); border-radius: 0 4px 4px 0; transform-origin: left center; transition: transform 1.1s var(--ease-out); }
.meter > i.co { flex: 1; width: auto; background: var(--neutral); border-radius: 0; transition-delay: .5s; }
.meter--split { background: #FFFFFF; }
.meter--sm { height: 6px; }
.js .meter:not(.is-in) > i { transform: scaleX(0); }

/* top page: facts strip gets a meter / a two-column growth mark */
.cover__fact .meter { margin-top: 28px; }
.mini-cols { display: flex; align-items: flex-end; gap: 6px; height: 26px; margin-top: 8px; }
.mini-cols i { width: 12px; height: calc(var(--h) * 100%); min-height: 2px; background: var(--rz-blue-light); border-radius: 3px 3px 0 0; transform-origin: bottom; transition: transform 1s var(--ease-out) .2s; }
.mini-cols i:last-child { background: var(--rz-blue); }
.mini-cols span { font-size: 11px; color: var(--gray); align-self: center; margin-left: 2px; }
.js .mini-cols:not(.is-in) i { transform: scaleY(0); }

/* top page: growth chart + conditions */
.numbers3 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; margin-top: 40px; }
.panel { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 12px; padding: 28px; min-width: 0; }
.panel__h { margin: 0; font-size: 15px; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.panel__h span { font-size: 12px; font-weight: 400; color: var(--gray); }
.gchart { margin: 20px 0 0; }
.gchart__plot { position: relative; height: 250px; border-bottom: 1px solid var(--border); }
.gchart__col { position: absolute; bottom: 0; left: calc(var(--x) * (100% - 64px) + 32px); width: 40px; margin-left: -20px; height: calc(var(--h) * 80%); min-height: 3px; background: var(--rz-blue-light); border-radius: 4px 4px 0 0; transform-origin: bottom; transition: transform 1.2s var(--ease-out) .15s; }
.gchart__col--now { background: var(--rz-blue); }
.gchart__col b { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px); font-family: var(--font-num); font-size: 15px; font-weight: 700; white-space: nowrap; color: var(--ink); }
.gchart__col--now b { font-size: 26px; }
.gchart__col--now b small { font-size: 13px; margin-left: 2px; }
.js .gchart:not(.is-in) .gchart__col { transform: scaleY(0); }
.gchart__ms { position: relative; height: 0; }
.gchart__ms i { position: absolute; top: -5px; left: calc(var(--x) * (100% - 64px) + 32px); width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--rz-blue); }
.gchart__axis { position: relative; height: 22px; margin-top: 8px; font-family: var(--font-num); font-size: 12px; color: var(--gray); }
.gchart__axis span { position: absolute; left: calc(var(--x) * (100% - 64px) + 32px); transform: translateX(-50%); white-space: nowrap; }
.mslist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.mslist li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.mslist li::before { content: ''; grid-row: span 2; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; border: 2px solid var(--rz-blue); }
.mslist time { font-family: var(--font-num); font-size: 12px; color: var(--gray); }
.conds { display: grid; gap: 18px; margin-top: 18px; }
.cond__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.cond__head > span { font-size: 15px; font-weight: 700; }
.cond__head b { font-family: var(--font-num); font-size: 28px; font-weight: 700; color: var(--rz-blue); line-height: 1; }
.cond__head b small { font-size: 14px; margin-left: 2px; }
.cond__head b .pre { font-size: 13px; color: var(--ink-soft); font-weight: 600; margin-right: 4px; }
.cond p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--gray); }
.cond__legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--gray); margin-top: 6px; }
@media (max-width: 880px) { .numbers3 { grid-template-columns: 1fr; } .panel { padding: 22px 18px; } .gchart__plot { height: 170px; } }

/* recruit: "働き方" as tiles */
.work { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 28px; }
.work__photo { aspect-ratio: 4 / 5; }
.wtiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wtile { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wtile__k { font-size: 13px; font-weight: 700; color: var(--gray); }
.wtile__v { font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--rz-blue); word-break: keep-all; overflow-wrap: anywhere; }
.wtile__v .num { font-size: 30px; }
.wtile__v small { font-size: 14px; margin-left: 2px; color: var(--rz-blue); }
.wtile__v small.pre { margin: 0 4px 0 0; color: var(--ink-soft); }
.wtile .meter { margin: 2px 0 2px; }
.wtile__d { font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
@media (max-width: 1000px) { .work { grid-template-columns: 1fr; } .work__photo { aspect-ratio: 3 / 2; } }
@media (max-width: 520px) { .wtiles { gap: 8px; } .wtile { padding: 14px; } .wtile__v { font-size: 19px; } .wtile__v .num { font-size: 24px; } }

/* recruit hero stats: a meter under each number */
.stat .meter { margin-top: 12px; max-width: 220px; }

@media (prefers-reduced-motion: reduce) {
  .js .meter:not(.is-in) > i, .js .mini-cols:not(.is-in) i, .js .gchart:not(.is-in) .gchart__col { transform: none; }
  .js main .h2:not(.z-in)::before { opacity: 1; }
  .js main .h2.z-in::before, .js .band--blue.z-in::after, .hero-in .eyebrow::before { animation: none !important; }
  .js .band--blue:not(.z-in)::after { transform: none; }
  .js .zride:not(.rolled) .zride__z { visibility: visible; }
  .meter > i, .mini-cols i, .gchart__col, main .band .h2::before { transition: none !important; }
}

main .band--blue .h2::before { display: none; }
@media (min-width: 1001px) { .work__photo { position: sticky; top: 140px; } }
/* guide figures */
.figbar { margin: 18px 0 0; }
.flowbars { margin: 18px 0 0; display: grid; gap: 10px; }
.flowbars__row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 5.5em; gap: 12px; align-items: center; font-size: 14px; }
.flowbars__row b { font-family: var(--font-num); text-align: right; }
.flowbars .meter { height: 18px; }
.flowbars .meter--muted > i { background: var(--rz-blue-light); }
.flowbars__note { margin-top: 4px; }
@media (max-width: 520px) { .flowbars__row { grid-template-columns: 1fr 5em; } .flowbars__row .meter { grid-column: 1 / -1; grid-row: 2; } }

/* ===== v10: Zが横に転がって止まる =====
   その場で回すのではなく、左から転がってきて（進んだ距離のぶんだけ回り）、少しだけ揺れ戻って止まる。
   回転角 ≒ 進む距離 ÷ 半径。見出しのマークは約2.5em進んで約1.3回転。 */
@keyframes zroll {
  0%   { transform: translateX(-2.4em) rotate(-450deg); opacity: 0; animation-timing-function: cubic-bezier(.22, .8, .3, 1); }
  10%  { opacity: 1; }
  80%  { transform: translateX(.08em) rotate(12deg); animation-timing-function: ease-in-out; }
  100% { transform: translateX(0) rotate(0); opacity: 1; }
}
/* hero: the small mark in the eyebrow rolls in on load */
.hero-in .eyebrow::before { transform-origin: 50% 50%; animation: zroll 1s .25s both; }
/* blue bands: the big Z rolls in across the band when it comes into view */
.band--blue::after { transform-origin: 50% 50%; }
.js .band--blue:not(.z-in)::after { transform: translateX(-75vw) rotate(-300deg); }
.js .band--blue.z-in::after { animation: zroll-big 1.7s both; }
@keyframes zroll-big {
  0%   { transform: translateX(-75vw) rotate(-300deg); animation-timing-function: cubic-bezier(.2, .75, .25, 1); }
  82%  { transform: translateX(1.2vw) rotate(5deg); animation-timing-function: ease-in-out; }
  100% { transform: translateX(0) rotate(0); }
}
/* the key bar (83%): a Z rolls along the bar and stops at the value */
.zride { position: relative; margin-top: 28px; }
.zride .meter { margin-top: 0 !important; }
.zride__z { position: absolute; bottom: calc(100% + 3px); left: calc(var(--zv) * 100%); width: 13px; height: 14px; margin-left: -6.5px; background: var(--rz-blue); -webkit-mask: var(--z-mask) center / contain no-repeat; mask: var(--z-mask) center / contain no-repeat; transform-origin: 50% 50%; }
.js .zride:not(.rolled) .zride__z { visibility: hidden; }
.zride .meter > i { transition: none !important; }
.js .zride:not(.rolled) .meter > i { transform: scaleX(0); }
.stat .zride { max-width: 220px; margin-top: 30px; }
@media (prefers-reduced-motion: reduce) {
  .hero-in .eyebrow::before, .js main .h2.z-in::before, .js .band--blue.z-in::after { animation: none !important; }
  .js .band--blue:not(.z-in)::after { transform: none; }
  .js main .h2:not(.z-in)::before { opacity: 1; }
  .js .zride:not(.rolled) .zride__z { visibility: visible; }
}

/* v11: tabs (経歴別の声) and the article list */
.vtabs__list { display: flex; flex-wrap: wrap; gap: 8px; }
.vtabs__list [role="tab"] { appearance: none; border: 1.5px solid var(--border); background: #FFFFFF; color: var(--ink); border-radius: 999px; min-height: 42px; padding: 6px 16px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.vtabs__list [role="tab"] .num { font-size: 12px; color: var(--gray); }
.vtabs__list [role="tab"]:hover { border-color: var(--rz-blue); }
.vtabs__list [role="tab"][aria-selected="true"] { background: var(--rz-blue); border-color: var(--rz-blue); color: #FFFFFF; }
.vtabs__list [role="tab"][aria-selected="true"] .num { color: #D6E2FF; }
.vtabs__list [role="tab"]:focus-visible { outline: 3px solid var(--rz-blue-light); outline-offset: 2px; }
.vtabs__panel { margin-top: 20px; }
.js .vtabs__panel:not([hidden]) { animation: tabin .35s var(--ease-out) both; }
@keyframes tabin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vcard { display: flex; flex-direction: column; }
.vcard__more { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 700; color: var(--rz-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
.glist { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.gcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px 18px; align-items: center; padding: 20px 22px; border: 1px solid var(--hair); border-radius: 12px; background: #FFFFFF; color: var(--ink); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.gcard:hover { border-color: var(--rz-blue); transform: translateY(-1px); }
.gcard__n { font-size: 22px; color: var(--rz-blue); }
.gcard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gcard__t { font-size: 16px; line-height: 1.6; }
.gcard__d { font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.gcard__tag { font-size: 12px; font-weight: 700; color: var(--rz-blue); background: var(--rz-blue-pale); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.gcard__go { color: var(--rz-blue); font-weight: 700; }
@media (max-width: 620px) { .gcard { grid-template-columns: auto minmax(0, 1fr); } .gcard__tag { grid-column: 2; justify-self: start; } .gcard__go { display: none; } }
@media (prefers-reduced-motion: reduce) { .js .vtabs__panel:not([hidden]) { animation: none; } }
.article .glist { padding-left: 0; }

/* ---- V67 ---- */
/* buttons never leave one character on its own line */
.btn { word-break: keep-all; overflow-wrap: anywhere; }
.nw { white-space: nowrap; }
/* a lighter way in, under the main buttons */
.hero-alt { margin-top: 10px; font-size: 14px; color: var(--ink-soft); word-break: auto-phrase; }
.hero-alt a { font-weight: 700; text-decoration: underline; text-underline-offset: .28em; }
.stat__sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--gray); }
@media (max-width: 760px) {
  .stats3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; }
  .stats3 .stat { padding: 14px 8px 0 0 !important; }
  .stats3 .stat + .stat { padding-left: 10px !important; border-left: 1px solid var(--hair) !important; }
  .stats3 .stat__value { font-size: 26px !important; }
  .stats3 .stat__value small { font-size: 12px !important; }
  .stats3 .stat__label { font-size: 11px !important; line-height: 1.5; margin-top: 6px; }
  .stats3 .meter, .stats3 .zride { display: none; }
  .stats3 .stat__sub { font-size: 10px; }
}
/* 案件例: the spread of running contracts, then two cases per price band */
.dist { margin: 0; padding: 20px 22px; border: 1px solid var(--hair); border-radius: 12px; background: #FFFFFF; }
.dist__h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 14px; font-weight: 700; }
.dist__h span { font-size: 13px; font-weight: 500; color: var(--gray); }
.dist__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.dist__list li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 3.5em; align-items: center; gap: 12px; font-size: 13px; }
.dist__k { color: var(--ink-soft); white-space: nowrap; }
.dist__bar { height: 12px; background: var(--rz-tint); border-radius: 2px; overflow: hidden; }
.dist__bar i { display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--rz-blue); border-radius: 2px; }
.dist__n { text-align: right; font-size: 15px; }
.dist__n small { font-size: 11px; margin-left: 1px; font-weight: 700; }
.cgroup__h { font-size: 17px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cgroup__h span { font-size: 13px; font-weight: 500; color: var(--gray); }
.cgroup__grid { margin-top: 12px; gap: 16px; }
@media (max-width: 760px) { .cgroup__grid { grid-template-columns: 1fr !important; } }
/* 経験年数と単価の目安: one card per row on phones instead of a table cut off at the right */
@media (max-width: 600px) {
  .table-wrap > table.qa--yrs { min-width: 0; }
  .qa--yrs thead { display: none; }
  .qa--yrs, .qa--yrs tbody { display: block; width: 100%; }
  .qa--yrs tr { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
  .qa--yrs td { display: block; padding: 0 !important; border: 0 !important; font-size: 14px; }
  .qa--yrs td:first-child { grid-row: 1 / span 3; font-size: 15px; white-space: nowrap; }
  .qa--yrs td:nth-child(2)::before { content: '月単価 '; font-size: 12px; color: var(--gray); font-weight: 500; }
  .qa--yrs td:nth-child(3)::before { content: '額面月給 '; font-size: 12px; color: var(--gray); font-weight: 500; }
  .qa--yrs td:nth-child(3) { color: var(--ink); }
  .qa--yrs td:nth-child(4) { grid-column: 2; font-size: 13px; color: var(--gray) !important; }
  .qa--yrs .rng { max-width: 220px; }
  /* 条件提示書サンプル: text no longer touches the frame */
  #offer .spec tr { padding-left: 20px; padding-right: 20px; }
}
.anchor-alias { display: block; height: 0; scroll-margin-top: 120px; }
/* a button label that may wrap: one flex item, so it breaks only where <wbr> allows */
.btn__l { text-align: center; }
/* >>> mascot：マスコット（青いZ）v2。絵を体・右腕・右足・左足・目の5層に分けて重ね、CSSで動かす。画像は img/mascot/、軸の数値は mascot/layers2/rig.json。add_mascot.py が書く */
.rz { position: relative; aspect-ratio: 3 / 4; user-select: none; pointer-events: none; container-type: inline-size; }
.rz img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rz-shadow { position: absolute; left: 8%; width: 84%; height: 3.2%; bottom: 1%; border-radius: 50%; background: rgba(17, 17, 17, .14); filter: blur(2px); }
.rz-fig { position: absolute; inset: 0; transform-origin: 50% 97%; }
.rz-leg { transform-origin: 37.32% 82.11%; } .rz-leg--r { transform-origin: 59.32% 82.25%; }
.rz-armw { position: absolute; inset: 0; transform-origin: 67.63% 46.65%; transition: transform .45s var(--ease-out); }
.rz-eyes { position: absolute; inset: 0; transform: translate(var(--ex, 0%), var(--ey, 0%)); transition: transform .35s var(--ease-out); }
.rz img.rz-eye { inset: auto; height: auto; transform-origin: 50% 50%; transition: transform .35s; }
.rz img.rz-eye--l { left: 32.78%; top: 8.7%; width: 8.12%; }
.rz img.rz-eye--r { left: 58.47%; top: 9.44%; width: 7.93%; }
.js .rz-fig { animation: rzIdle 3.4s ease-in-out infinite; }
.js .rz-armw { animation: rzSway 3.4s ease-in-out infinite; }
.rz.blink .rz-eye { animation: rzBlink .18s ease-in-out 1; }
.rz.is-wave .rz-armw { animation: rzWave .55s ease-in-out 3; }
.rz.is-jump .rz-fig { animation: rzJump .9s cubic-bezier(.3, .6, .3, 1) 1; }
.rz.is-jump .rz-shadow { animation: rzShadow .9s cubic-bezier(.3, .6, .3, 1) 1; }
.rz.is-look .rz-eyes { animation: rzLook 2.6s ease-in-out 1; }
.rz.is-look .rz-fig { animation: rzTilt 2.6s ease-in-out 1; }
.rz.is-nod .rz-fig { animation: rzNod .8s ease-in-out 1; }
.rz.is-shake .rz-fig { animation: rzShake .7s ease-in-out 1; }
.rz.is-bow .rz-fig { animation: rzBow 1.6s ease-in-out 1; }
.rz.is-cheer .rz-fig { animation: rzCheer 1.5s cubic-bezier(.3, .6, .3, 1) 1; }
.rz.is-cheer .rz-armw { animation: rzWave .22s ease-in-out 7; }
.rz.is-cheer .rz-shadow { animation: rzShadow .75s cubic-bezier(.3, .6, .3, 1) 2; }
.rz.is-walk .rz-fig, .rz.is-run .rz-fig { animation: rzWalkBody var(--step, .5s) ease-in-out infinite; }
.rz.is-walk .rz-leg--l, .rz.is-run .rz-leg--l { animation: rzStepA var(--step, .5s) ease-in-out infinite; }
.rz.is-walk .rz-leg--r, .rz.is-run .rz-leg--r { animation: rzStepB var(--step, .5s) ease-in-out infinite; }
.rz.is-walk .rz-armw, .rz.is-run .rz-armw { animation: rzSwing var(--step, .5s) ease-in-out infinite; }
.rz.is-run { --step: .3s; } .rz.is-run .rz-fig { animation-name: rzRunBody; }
.rz.is-point .rz-armw, .rz.is-hold .rz-armw, .rz.is-think .rz-armw { animation: none; }
.rz.is-point .rz-armw { transform: rotate(var(--arm, -30deg)); }
.rz.is-hold .rz-armw { transform: rotate(-72deg); }
.rz.is-think .rz-armw { transform: rotate(-58deg); }
.rz.is-think .rz-eyes { transform: translate(-1.1%, -.5%); }
.rz.is-sleep .rz-eye { transform: scaleY(.1); }
.rz.is-sleep .rz-fig { animation: rzSleep 3.2s ease-in-out infinite; }
.rz.is-sleep .rz-armw { animation: none; transform: rotate(8deg); }
.rz.is-dance .rz-fig { animation: rzDance 1.1s ease-in-out infinite; }
.rz.is-dance .rz-armw { animation: rzPump .55s ease-in-out infinite; }
.rz.is-dance .rz-leg--l { animation: rzKickA 1.1s ease-in-out infinite; } .rz.is-dance .rz-leg--r { animation: rzKickB 1.1s ease-in-out infinite; }
@keyframes rzIdle { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-.6%) scaleY(1.012); } }
@keyframes rzSway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg); } }
@keyframes rzBlink { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.08); } }
@keyframes rzWave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-27deg); } }
@keyframes rzJump { 0% { transform: translateY(0) scale(1, 1); } 14% { transform: translateY(1%) scale(1.05, .94); } 48% { transform: translateY(-9%) scale(.97, 1.04); } 78% { transform: translateY(0) scale(1.04, .96); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes rzShadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 48% { transform: scaleX(.7); opacity: .5; } }
@keyframes rzLook { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1.4%, .2%); } 60% { transform: translate(1.4%, .2%); } 85% { transform: translate(0, -.4%); } }
@keyframes rzTilt { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 60% { transform: rotate(3deg); } }
@keyframes rzNod { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(1.6%) rotate(1.5deg); } 55% { transform: translateY(-.4%) rotate(0); } 80% { transform: translateY(1.2%) rotate(1deg); } }
@keyframes rzShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 45% { transform: rotate(4deg); } 70% { transform: rotate(-2.5deg); } }
@keyframes rzBow { 0%, 100% { transform: perspective(520px) rotateX(0) translateY(0); } 30%, 62% { transform: perspective(520px) rotateX(-34deg) translateY(3%); } }
@keyframes rzCheer { 0% { transform: translateY(0); } 12% { transform: translateY(1.5%) scale(1.05, .94); } 32% { transform: translateY(-13%) scale(.97, 1.05) rotate(-4deg); } 50% { transform: translateY(0) scale(1.04, .96); } 66% { transform: translateY(-10%) rotate(4deg); } 82% { transform: translateY(0) scale(1.03, .97); } 100% { transform: translateY(0); } }
@keyframes rzStepA { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } }
@keyframes rzStepB { 0%, 100% { transform: rotate(15deg); } 50% { transform: rotate(-15deg); } }
@keyframes rzWalkBody { 0%, 50%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-2.4%) rotate(-1.5deg); } 75% { transform: translateY(-2.4%) rotate(1.5deg); } }
@keyframes rzRunBody { 0%, 50%, 100% { transform: translateY(0) rotate(-5deg); } 25% { transform: translateY(-5%) rotate(-7deg); } 75% { transform: translateY(-5%) rotate(-4deg); } }
@keyframes rzSwing { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(16deg); } }
@keyframes rzSleep { 0%, 100% { transform: rotate(3deg) scaleY(.985); } 50% { transform: rotate(5.5deg) scaleY(1); } }
@keyframes rzDance { 0%, 100% { transform: rotate(-6deg) translateY(0); } 25% { transform: rotate(0) translateY(-4%); } 50% { transform: rotate(6deg) translateY(0); } 75% { transform: rotate(0) translateY(-4%); } }
@keyframes rzPump { 0%, 100% { transform: rotate(-72deg); } 50% { transform: rotate(-40deg); } }
@keyframes rzKickA { 0%, 50%, 100% { transform: rotate(0); } 25% { transform: rotate(-24deg); } }
@keyframes rzKickB { 0%, 50%, 100% { transform: rotate(0); } 75% { transform: rotate(24deg); } }
@keyframes rzWobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes rzZ { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(70%, -130%) scale(1.25); opacity: 0; } }
/* 吹き出し（1行・事実だけ）と看板（文字はHTML。腕が-72度で上がるので板は+72度戻して水平に） */
.rz-say { position: absolute; left: 100%; top: -2%; margin-left: 10px; white-space: nowrap; background: #FFFFFF; color: var(--ink); border: 1px solid var(--hair); border-radius: 8px; padding: 6px 10px; font-size: 12px; line-height: 1.5; font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s var(--ease-out); pointer-events: none; z-index: 2; }
.rz-say::before { content: ""; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px; background: #FFFFFF; border-left: 1px solid var(--hair); border-bottom: 1px solid var(--hair); transform: rotate(45deg); }
.rz-say.on { opacity: 1; transform: translateY(0); }
.rz.say-left .rz-say { left: auto; right: 100%; margin-left: 0; margin-right: 10px; }
.rz.say-left .rz-say::before { left: auto; right: -6px; border-left: 0; border-bottom: 0; border-right: 1px solid var(--hair); border-top: 1px solid var(--hair); }
.rz-sign { position: absolute; left: 94.71%; top: 54.89%; width: max-content; min-width: 60cqw; transform: translate(-50%, -100%) rotate(72deg); transform-origin: 50% 100%; display: none; }
.rz.is-hold .rz-sign { display: block; }
.rz-sign__board { display: block; background: #FFFFFF; border: 2px solid var(--rz-blue); color: var(--rz-blue); border-radius: 6px; padding: 3cqw 6cqw; font: 800 13cqw/1.25 Manrope, "Noto Sans JP", sans-serif; text-align: center; white-space: nowrap; transform-origin: 50% 100%; animation: rzWobble 2.6s ease-in-out infinite; }
.rz-sign__stick { display: block; width: 3cqw; height: 34cqw; margin: 0 auto; background: var(--gray); border-radius: 2px; }
.rz-zzz { position: absolute; left: 66%; top: -2%; width: 34%; height: 30%; pointer-events: none; }
.rz-zzz b { position: absolute; left: 0; bottom: 0; font: 800 15cqw/1 Manrope, sans-serif; color: var(--rz-blue); opacity: 0; animation: rzZ 2.2s ease-out forwards; }
.rz-dot { position: absolute; left: 50%; top: 12%; width: 6cqw; height: 6cqw; border-radius: 50%; pointer-events: none; }
/* 置き場所：画面の下端を1体が歩く。本文のクリックを邪魔しない（pointer-events: none）。スマホでは固定ボタンの上 */
.rz-roam { position: fixed; left: 0; bottom: 0; width: 84px; z-index: 45; pointer-events: none; transform: translateX(var(--rx, 16px)); opacity: 0; transition: opacity .5s, bottom .35s var(--ease-out); }
.rz-roam.is-on { opacity: 1; }
@media (max-width: 880px) { .rz-roam { width: 62px; } body.cta-on .rz-roam { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); } .rz-roam--calm:not(.is-show) { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; } }   /* スマホの控えめモード：案内している数秒だけ見せる（固定ボタンの上） */
.site-header:has(.site-nav.is-open) ~ .rz-roam { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .rz, .rz * { animation: none !important; } .rz-eyes, .rz-armw, .rz img.rz-eye { transition: none; } }
@media print { .rz-roam { display: none; } }
/* <<< mascot */
/* >>> pages-content：新設ページ（案件一覧・数字で見るRezon・よくある質問）。build_content.py が書く。手で直さない */
.pagehero { padding-block: 64px 48px; }
.pagehero h1 { font-size: 40px; line-height: 1.3; }
@media (max-width: 760px) { .pagehero { padding-block: 40px 32px; } .pagehero h1 { font-size: 30px; } }
.bandnav { display: flex; flex-wrap: wrap; gap: 8px; }
.bandnav .chip { text-decoration: none; }
.case__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.case__status { color: var(--gray); font-weight: 700; }
.case__checked { color: var(--gray); }
.case__more { margin-top: auto; padding-top: 6px; color: var(--rz-blue); align-self: flex-start; min-height: 32px; display: inline-flex; align-items: center; }
.bignum { border: 1px solid var(--hair); border-radius: 12px; padding: 32px; background: #FFFFFF; border-top: 2px solid var(--rz-blue); max-width: 720px; }
.bignum__k { font-size: 13px; font-weight: 700; color: var(--gray); }
.bignum__v { font-size: 64px; font-weight: 700; line-height: 1.1; color: var(--rz-blue); margin-top: 6px; }
.bignum__v small { font-size: 26px; margin-left: 2px; }
.bignum__d { font-size: 13px; color: var(--gray); line-height: 1.7; margin-top: 8px; max-width: 40em; }
.split3__h { font-size: 14px; font-weight: 700; }
.split3__bar { display: flex; height: 44px; border-radius: 6px; overflow: hidden; margin-top: 10px; background: var(--rz-tint); }
.split3__bar i { display: block; height: 100%; width: calc(var(--w) * 100%); }
.split3 .s1 { background: var(--rz-blue); } .split3 .s2 { background: var(--rz-blue-light, #9DB8F5); } .split3 .s3 { background: #DDE2EA; }
.split3__legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--ink-soft); }
.split3__legend li { display: inline-flex; align-items: center; gap: 8px; }
.split3__legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.split3__legend b { color: var(--ink); margin: 0 2px; }
.numgroup__h { font-size: 20px; }
.numcards { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .numcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .numcards { grid-template-columns: 1fr; } }
.numcard { background: #FFFFFF; border: 1px solid var(--hair); border-top: 2px solid var(--rz-blue); border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.numcard__k { font-size: 13px; font-weight: 700; color: var(--gray); }
.numcard__v { font-size: 44px; line-height: 1.1; color: var(--rz-blue); font-weight: 700; }
.numcard__v .num--text { font-size: 28px; }
.numcard__v small { font-size: 20px; margin-left: 2px; }
.numcard__v .pre { font-size: 14px; margin-right: 4px; }
.numcard__d { font-size: 12px; line-height: 1.7; color: var(--gray); }
.numcard__t { font-size: 12px; color: var(--gray); }
@media (max-width: 560px) { .numcard__v { font-size: 36px; } }
.deftable td:first-child { font-weight: 700; }
.deftable__v { display: block; font-weight: 700; color: var(--rz-blue); font-family: var(--font-num); font-size: 15px; }
@media (max-width: 640px) {
  .deftable thead { display: none; }
  .deftable tr { display: block; border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: #FFFFFF; }
  .deftable td { display: block; border: 0; padding: 4px 0; }
  .deftable td::before { content: attr(data-th); display: block; font-size: 11px; color: var(--gray); font-weight: 700; }
  .deftable td:first-child::before { display: none; }
}
.faq__rel { margin: -8px 0 20px; font-size: 13px; }
.faq__rel a { color: var(--rz-blue); font-weight: 700; }
.kuchikomi { border: 1px solid var(--hair); border-radius: 12px; padding: 24px; }
.kuchikomi__list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 15px; }
.kuchikomi__list a { color: var(--rz-blue); font-weight: 700; }
/* <<< pages-content */
/* >>> v75 */
@media (max-width: 760px) { #entry .grid2 > div:first-child { display: contents; } #entry .grid2 > form { order: 1; } #entry .grid2 .steps { order: 2; margin-top: 8px; } }
@media (max-width: 1000px) { .site-nav { max-height: none; height: calc(100vh - 60px - env(safe-area-inset-top, 0px)); height: calc(100dvh - 60px - env(safe-area-inset-top, 0px)); } }
.vtabs__list [role="tab"][aria-selected="true"], .chips [aria-pressed="true"] { border-color: var(--rz-blue); }
/* <<< v75 */

/* >>> v78：トップのAIの段の数字（ラベル → 数字 → 定義）。時点は下の cap に1回だけ */
.ai-home { align-items: center; }
.ai-home__p { font-size: 15px; line-height: 1.95; color: var(--ink-soft); max-width: 40em; }
.ai-nums { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); max-width: 30em; }
.ai-nums li { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 14px 0 0; }
.ai-nums li + li { padding-left: 14px; border-left: 1px solid var(--hair); }
.ai-nums__k { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.ai-nums__v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: clamp(30px, 2.8vw, 40px); font-weight: 700; line-height: 1.1; color: var(--rz-blue); white-space: nowrap; }
.ai-nums__v small { font-size: .45em; margin-left: 2px; }
.ai-nums__v small.pre { margin: 0 2px 0 0; font-family: var(--font-ja); color: var(--ink-soft); }
.ai-nums__d { font-size: 12px; line-height: 1.7; color: var(--gray); }
@media (max-width: 560px) {
  .ai-nums { grid-template-columns: 1fr; }
  .ai-nums li { display: grid; grid-template-columns: 6.2em 1fr; grid-template-areas: "v k" "v d"; column-gap: 14px; row-gap: 2px; align-items: center; padding: 12px 0; }
  .ai-nums li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); }
  .ai-nums__v { grid-area: v; } .ai-nums__k { grid-area: k; } .ai-nums__d { grid-area: d; }
}
/* <<< v78 */
/* >>> people */
.people { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--hair); }
.people__grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.people__grid li { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.people__grid img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: var(--rz-tint); }
.people__cap { display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.5; }
.people__name { font-weight: 700; color: var(--ink); font-size: 13px; }
.people__role { color: var(--gray); }
.people__tag { align-self: flex-start; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: var(--rz-blue-pale); color: var(--rz-blue); font-weight: 700; font-size: 11px; }
@media (max-width: 760px) { #entry .grid2 .people { order: 3; margin-top: 8px; } .people__grid { gap: 8px; } }
/* <<< people */
/* >>> income */
.income { align-items: center; }
@media (max-width: 1000px) { .grid2.income { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.pledge { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 12px; padding: 20px 24px; }
.pledge__t { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.pledge__d { margin: 6px 0 0; font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.income__fig { margin: 0; min-width: 0; }
.income__t { width: 100%; border-collapse: separate; border-spacing: 0; background: #FFFFFF; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; font-size: 15px; }
.income__t th, .income__t td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.income__t tbody tr:last-child th, .income__t tbody tr:last-child td { border-bottom: 0; }
.income__t thead th { font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--gray); background: #FFFFFF; }
.income__t tbody th { font-weight: 700; white-space: nowrap; }
.income__t td { white-space: nowrap; }
.income__t .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; }
.income__t td b.num { font-size: 18px; }
.income__bar { display: inline-block; width: 72px; height: 8px; margin-right: 10px; border-radius: 4px; background: var(--rz-tint); vertical-align: middle; overflow: hidden; }
.income__bar i { display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--rz-blue); border-radius: 4px; }
.article .income__t--article { min-width: 0; }
.article .table-wrap .income__t--article td:first-child { white-space: nowrap; }
@media (max-width: 760px) {
  .income__t { font-size: 14px; }
  .income__t th, .income__t td { padding: 12px 10px; }
  .income__bar { width: 36px; margin-right: 6px; }
  .income__t td b.num { font-size: 16px; }
  .article .table-wrap:has(.income__t--article) { overflow-x: visible; }
  .article .table-wrap:has(.income__t--article)::before { content: none; display: none; }
  .article .table-wrap .income__t--article { min-width: 0; }
}
/* <<< income */
/* >>> v84 */
/* 採用：単価が上がったときの月給（内訳バー3本。長さは単価に比例、0起点） */
figure.raise { margin: 0; }
.raise__rows { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.raise__row { display: grid; grid-template-columns: 11.5em minmax(0, 1fr) 10em; gap: 8px 20px; align-items: center; }
.raise__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.raise__who b { font-size: 14px; color: var(--ink); }
.raise__who span { font-size: 12px; color: var(--gray); }
.raise__track { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.raise__bar { height: 30px; border-radius: 6px; background: var(--rz-tint); }
.raise__u { font-size: 12px; color: var(--gray); }
.raise__u .num { font-family: var(--font-num); font-size: 14px; color: var(--ink); }
.raise__pay { display: flex; flex-direction: column; gap: 2px; }
.raise__g .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.raise__g small { font-size: 12px; margin-left: 2px; color: var(--ink-soft); }
.raise__y { font-size: 12px; color: var(--gray); }
.raise__d { align-self: flex-start; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: var(--rz-blue-pale); color: var(--rz-blue); font-size: 12px; font-weight: 700; }
.raise__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: 12px; color: var(--ink-soft); }
.raise__legend span { display: inline-flex; align-items: center; gap: 6px; }
.raise__legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
@media (max-width: 760px) {
  .raise__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who pay" "track track"; gap: 6px 12px; }
  .raise__who { grid-area: who; } .raise__pay { grid-area: pay; align-items: flex-end; text-align: right; } .raise__track { grid-area: track; }
  .raise__d { align-self: flex-end; }
  .raise__g .num { font-size: 22px; }
}
/* トップ：単価に差がつくところ（3段） */
.path3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: p3; max-width: 40em; }
.path3 li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 14px 14px; background: #FFFFFF; border: 1px solid var(--hair); min-width: 0; counter-increment: p3; }
.path3 li + li { border-left: 0; }
.path3 li:first-child { border-radius: 10px 0 0 10px; } .path3 li:last-child { border-radius: 0 10px 10px 0; }
.path3 li::before { content: counter(p3); font-family: var(--font-num); font-size: 12px; font-weight: 800; color: var(--gray); }
.path3 li:not(:last-child)::after { content: ''; position: absolute; right: -7px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: #FFFFFF; border-top: 1px solid var(--hair); border-right: 1px solid var(--hair); transform: rotate(45deg); z-index: 1; }
.path3 b { font-size: 14px; line-height: 1.5; color: var(--ink); }
.path3 span { font-size: 12px; line-height: 1.7; color: var(--gray); }
.path3 .is-key { border-color: var(--rz-blue); box-shadow: inset 0 0 0 1px var(--rz-blue); }
.path3 .is-key::before { color: var(--rz-blue); }
@media (max-width: 1100px) {
  .path3 { grid-template-columns: 1fr; }
  .path3 li + li { border-left: 1px solid var(--hair); border-top: 0; }
  .path3 li:first-child { border-radius: 10px 10px 0 0; } .path3 li:last-child { border-radius: 0 0 10px 10px; }
  .path3 li:not(:last-child)::after { right: auto; left: 22px; top: auto; bottom: -7px; margin-top: 0; transform: rotate(135deg); }
  .path3 .is-key { border-left-color: var(--rz-blue); }
}
/* トップ：AIの段は 見出し｜写真と数字 ／ 本文 の3つに分ける */
.ai3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "main side" "body side"; column-gap: 56px; row-gap: 0; align-items: start; }
.ai3__main { grid-area: main; min-width: 0; } .ai3__body { grid-area: body; min-width: 0; margin-top: 24px; } .ai3__side { grid-area: side; min-width: 0; position: sticky; top: 96px; }
.ai-nums--side { margin-top: 24px; max-width: none; }
@media (max-width: 760px) {
  .ai3 { grid-template-columns: 1fr; grid-template-areas: "main" "side" "body"; }
  .ai3__side { position: static; margin-top: 24px; }
}
/* トップ：代表メッセージ。右の列に写真・署名・歩みをまとめ、読んでいる間は横に付いてくる */
.why2 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; }
.why2__main { min-width: 0; } .why2__main .letter { max-width: 38em; }
.why2__aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; }
.why2__portrait { margin: 0; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--hair); background: var(--rz-tint); }
.why2__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why2__sig { margin: 0; font-size: 13px; line-height: 1.6; color: var(--gray); }
.why2__sig strong { display: block; font-size: 17px; color: var(--ink); }
.growth-note--side { margin: 6px 0 0; }
.growth-note--side .mslist--row { grid-template-columns: 1fr; }
@media (max-width: 880px) {
  .why2 { grid-template-columns: 1fr; gap: 32px; }
  .why2__aside { position: static; display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px 16px; }
  .why2__portrait { width: 120px; }
  .growth-note--side { grid-column: 1 / -1; }
  .growth-note--side .mslist--row { grid-template-columns: 1fr 1fr; }
}
/* <<< v84 */
/* >>> v87 実績の数字の帯 */
.proof-band { padding-block: 8px 48px; }
.proof { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.proof--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; }
.proof li { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 16px 0 0; }
.proof li + li { padding-left: 16px; border-left: 1px solid var(--hair); }
.proof__k { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.proof__v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: clamp(32px, 3.4vw, 48px); font-weight: 700; line-height: 1.1; color: var(--rz-blue); white-space: nowrap; }
.proof__v small { font-size: .42em; margin-left: 2px; }
.proof__v small.pre { margin: 0 4px 0 0; font-family: var(--font-ja); color: var(--ink-soft); }
.proof__d { font-size: 12px; line-height: 1.6; color: var(--gray); }
@media (max-width: 760px) {
  .proof, .proof--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .proof li:nth-child(n+3) { border-top: 1px solid var(--hair); padding-top: 14px; margin-top: 14px; }
  .proof--3 li:first-child { grid-column: 1 / -1; }
  .proof--3 li:first-child + li { padding-left: 0; border-left: 0; }
  .proof--3 li:nth-child(n+2) { border-top: 1px solid var(--hair); padding-top: 14px; margin-top: 14px; }
  .proof--3 li:nth-child(3) { padding-left: 16px; border-left: 1px solid var(--hair); }
}
/* <<< v87 */
/* >>> v92top トップ：スマホでは顔写真の列を出さない */
@media (max-width: 760px) { #people .faces { display: none; } }
/* <<< v92top */
/* >>> v92foot フッター：Rezonの発信 */
.site-footer__social { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hair); font-size: 13px; }
.site-footer__sk { font-weight: 700; color: var(--ink-soft); }
.site-footer__social a { color: var(--gray); }
.site-footer__social a:hover { color: var(--rz-blue); }
.site-footer__social a::after { content: '↗'; margin-left: 3px; font-size: 11px; }
/* <<< v92foot */
/* >>> v92 採用ページ（見る順に絞った版） */
.links2 { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.rhero { padding-top: 56px; background: #FFFFFF; }
.rhero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px 64px; align-items: end; }
.rhero__h1 { margin: 14px 0 0; font-size: clamp(38px, 4.6vw, 62px); font-weight: 700; line-height: 1.16; letter-spacing: -0.025em; text-wrap: balance; }
.rhero__lead { margin: 0; font-size: 16px; line-height: 1.85; color: var(--ink-soft); }
.rhero .hero-actions { margin-top: 20px; }
.rhero__photo { margin: 44px 0 0; }
.rhero__photo img { display: block; width: 100%; height: clamp(320px, 40vw, 660px); object-fit: cover; object-position: 50% 30%; }
.rfacts { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.rfacts li { padding: 28px 24px 28px 0; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rfacts li:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--hair); }
.rfacts__k { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.rfacts__v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: clamp(46px, 4.6vw, 64px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--rz-blue); white-space: nowrap; }
.rfacts__v small { font-size: .36em; margin-left: 3px; font-weight: 700; letter-spacing: 0; }
.rfacts__v small.pre { margin: 0 4px 0 0; color: var(--ink-soft); }
.rfacts__d { font-size: 13px; line-height: 1.6; color: var(--gray); }
.rsn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.rsn__item { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.rsn__img, .rsn__viz { aspect-ratio: 16 / 9; }
.rsn__img { background: var(--rz-tint); }
.rsn__img img { width: 100%; height: 100%; object-fit: cover; }
.rsn__viz { background: var(--rz-blue-pale); display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px clamp(20px, 4vw, 44px); }
.rsn__vk { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.rsn__bar { height: 44px; border-radius: 6px; }
.rsn__legend { margin-top: 4px; font-size: 14px; gap: 6px; }
.rsn__body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rsn__t { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.45; word-break: normal; word-break: auto-phrase; }
.rsn__p { margin: 0 0 6px; font-size: 15px; line-height: 1.85; color: var(--ink-soft); }
.rsn__body .link { margin-top: auto; font-size: 14px; }
.rvo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.rvo__item { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--ink); text-decoration: none; min-width: 0; transition: border-color .2s; }
.rvo__item:hover { border-color: var(--rz-blue); }
.rvo__t { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.55; text-wrap: pretty; word-break: normal; word-break: auto-phrase; }
.rvo__p { margin: 0; font-size: 14px; line-height: 1.85; color: var(--ink-soft); }
.rvo__m { margin-top: auto; padding-top: 4px; font-size: 13px; color: var(--gray); }
.rvo__more { font-size: 14px; font-weight: 700; color: var(--rz-blue); }
.perkl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 28px; }
.perkl__g { min-width: 0; }
.perkl__h { margin: 0 0 10px; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.perkl__h::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--rz-blue); flex: none; }
.perkl ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.perkl li { padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.6; }
.perkl li small { display: block; font-size: 12px; color: var(--gray); }
.rsum { margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-top: 1px solid var(--hair); }
.rsum > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.rsum dt { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.rsum dd { margin: 0; font-size: 15px; line-height: 1.75; }
@media (max-width: 1000px) {
  .rhero__in { grid-template-columns: 1fr; }
  .rvo { grid-template-columns: 1fr; }
  .perkl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}
@media (max-width: 760px) {
  .rhero { padding-top: 28px; }
  .rhero__photo { margin-top: 28px; }
  .rhero__photo img { height: auto; aspect-ratio: 4 / 3; }
  .rhero__lead { font-size: 15px; }
  .rfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rfacts li, .rfacts li:not(:nth-child(3n+1)) { padding: 18px 12px 18px 0; border-left: 0; }
  .rfacts li:nth-child(2n) { padding-left: 14px; border-left: 1px solid var(--hair); }
  .rfacts__v { font-size: 40px; }
  .rsn { grid-template-columns: 1fr; gap: 14px; }
  .rsn__img, .rsn__viz { aspect-ratio: 2 / 1; }
  .rsn__viz { aspect-ratio: auto; padding: 20px; }
  .rsn__body { padding: 18px 20px 20px; }
  .rsn__t { font-size: 18px; }
  .rsum { grid-template-columns: 1fr; }
  .rsum > div { grid-template-columns: 5.5em minmax(0, 1fr); gap: 12px; padding: 13px 0; }
}
@media (max-width: 420px) { .perkl li { font-size: 14px; } .rfacts__v { font-size: 36px; } }
.rsen__lead { max-width: 44em; }
.rsen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 48px; margin-top: 32px; align-items: start; }
.rsen__h { margin: 0 0 14px; font-size: 18px; font-weight: 700; line-height: 1.5; }
.rsen__t { width: 100%; border-collapse: separate; border-spacing: 0; background: #FFFFFF; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; font-size: 15px; }
.rsen__t th, .rsen__t td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.rsen__t thead th { font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--gray); }
.rsen__t tbody tr:last-child th, .rsen__t tbody tr:last-child td { border-bottom: 0; }
.rsen__t tbody th { font-weight: 700; }
.rsen__t td { white-space: nowrap; }
.rsen__t .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; }
.rsen__t td b.num { color: var(--rz-blue); font-size: 20px; }
.rsen__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.rsen__list li { padding: 14px 0; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 4px; }
.rsen__list b { font-size: 16px; line-height: 1.5; }
.rsen__list span { font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.rsen__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; align-items: stretch; }
.rsen__cards > * { min-width: 0; }
.rsen__cta { margin-top: 36px; padding: 28px 32px; border-radius: 12px; background: var(--rz-blue-pale); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; }
.rsen__ct { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.5; text-wrap: balance; }
.rsen__cd { margin: 8px 0 0; font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.rsen__btns { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1000px) { .rsen { grid-template-columns: 1fr; } .rsen__cards { grid-template-columns: 1fr; } .rsen__cta { grid-template-columns: 1fr; padding: 22px; } .rsen__btns { flex-direction: row; flex-wrap: wrap; } }
@media (max-width: 560px) { .rsen__t th, .rsen__t td { padding: 12px 10px; font-size: 13px; } .rsen__t td b.num { font-size: 17px; } }
/* <<< v92 */