/* ==========================================================================
   採用情報 (/recruit/) — v0.9.30 v2: strict imitation of the reference recruit site
   Values below are the reference's computed CSS (docs/recruit-reference.md §9), recoloured:
   ink #252525 → #062a40 (dark navy), black fills → navy #043450, accent pills: green → cyan #02A2E0,
   orange → yellow #FDD804 (navy text), yellow hover → #FDD804. Paper texture → light SVG noise.
   Root size like the ref: 4.268vw (≤640px, 16px @375), 1.2195vw (641–1400px), 16px above.
   ========================================================================== */

html.zr-root { font-size: 16px; scroll-padding-top: 5rem; }
@media (max-width: 1400px) { html.zr-root { font-size: 1.2195vw; } }
@media (max-width: 640px) { html.zr-root { font-size: 4.268vw; } }

body.is-zr {
	--zr-ink: #062a40;
	--zr-navy: #043450;
	--zr-cyan: #02a2e0;
	--zr-cyan-2: #00aeef;
	--zr-sky: #7fd6f7;
	--zr-yellow: #fdd804;
	--zr-paper: #f6f7f5;
	--zr-line: #062a40;
	--zr-en: "Outfit", var(--f-en, sans-serif);
	margin: 0;
	color: var(--zr-ink);
	font-family: var(--f-ja);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.03125rem;
	font-feature-settings: "palt";
	background-color: var(--zr-paper);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.zr, .zr-header, .zr-footer, .zr-sbar { box-sizing: border-box; }
.zr *, .zr *::before, .zr *::after, .zr-header *, .zr-footer *, .zr-sbar * { box-sizing: border-box; }
.zr { overflow-x: clip; }
:where(.zr, .zr-header, .zr-footer) :is(h1, h2, h3, p, ul, ol, figure, dl, dd) { margin: 0; }
:where(.zr, .zr-header, .zr-footer) :is(ul, ol) { padding: 0; list-style: none; }
.zr h1, .zr h2, .zr h3 { color: inherit; }
:where(.zr, .zr-header, .zr-footer, .zr-sbar) a { color: inherit; text-decoration: none; }
:where(.zr) img { display: block; max-width: 100%; height: auto; }
.zr :focus-visible, .zr-header :focus-visible, .zr-footer :focus-visible, .zr-sbar :focus-visible { outline: 3px solid var(--zr-cyan); outline-offset: 2px; }
.zr-main { display: block; padding-top: 4.0625rem; }
.zr-nowrap { white-space: nowrap; }
.zr-arrow { width: 1.5rem; height: 1.5rem; flex: none; }
.zr-arrow--sm { width: .9375rem; height: .9375rem; }
.zr-arrow--h3 { width: 1.25rem; height: 1.25rem; margin-left: .5rem; }
.zr-carrow { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 3.75rem; height: 3.75rem; border: 1px solid currentColor; border-radius: 50%; margin-left: 1.5rem; transition: background-color .2s, color .2s, border-color .2s; }
.zr-carrow svg { width: 1.25rem; height: 1.25rem; }
@media (max-width: 640px) { .zr-carrow { width: 2.25rem; height: 2.25rem; margin-left: .75rem; } .zr-carrow svg { width: 1rem; height: 1rem; } }

/* ---------- Pills (ref .btn-base) ---------- */
.zr-btn, .zr-pill {
	display: flex; align-items: center; justify-content: center; height: 2.875rem; border: 1px solid var(--zr-line); border-radius: 1.875rem;
	font-weight: 900; font-size: 1rem; letter-spacing: -.1125rem; text-align: center; line-height: 1.1; transition: background-color .2s, color .2s, border-color .2s;
}
.zr-btn span, .zr-pill span { display: inline-block; transform: scale(1, .95); }
.zr-btn--cyan { background: var(--zr-cyan); border-color: var(--zr-cyan); color: #fff; }
.zr-btn--yellow { background: var(--zr-yellow); border-color: var(--zr-yellow); color: var(--zr-navy); }
.zr-btn--white { background: #fff; color: var(--zr-ink); }
.zr-btn--cyan:hover, .zr-btn--yellow:hover { background: var(--zr-navy); border-color: var(--zr-navy); color: #fff; }
.zr-btn--white:hover { color: var(--zr-cyan); }

/* ---------- Header (ref .commonHeader) ---------- */
.zr-header {
	position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 4.0625rem; padding: .75rem 2.3%;
	border-bottom: 1px solid var(--zr-line); background: inherit; background-color: var(--zr-paper);
	transition: transform .3s;
}
.zr-header.is-hidden { transform: translateY(-4.0625rem); }
.admin-bar .zr-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .zr-header { top: 46px; } }
.zr-header__inner { display: flex; align-items: center; width: 100%; height: 100%; }
.zr-header__ttl { display: flex; align-items: center; flex-shrink: 0; font-weight: 900; font-size: 1rem; color: var(--zr-ink); }
.zr-header__ttl img { width: auto; height: 1.75rem; margin-right: .75rem; }
.zr-header__nav { display: flex; align-items: center; margin: 0 0 0 auto; font-size: .875rem; }
.zr-header__nav ul { display: flex; align-items: center; }
.zr-header__nav li a { display: block; margin: 0 .625rem; font-weight: 900; transition: color .1s; }
.zr-header__nav li a { transition: color .1s; }
.zr-header__nav li a:hover { color: var(--zr-cyan); text-decoration: none; }
.zr-pill--header { width: 11.75rem; height: 2.5rem; margin-left: 1.25rem; border-radius: 1.25rem; background: var(--zr-navy); border-color: var(--zr-navy); color: #fff; font-size: .9375rem; letter-spacing: 0; }
.zr-pill--header span, .zr-pill--sp span { transform: scale(1, .9); }
.zr-pill--header:hover { background: var(--zr-yellow); border-color: var(--zr-yellow); color: var(--zr-navy); }
.zr-pill--sp, .zr-toggle { display: none; }
@media (max-width: 1100px) { /* v6: drawer header up to 1100px (the inline nav did not fit on tablets) */
	.zr-header { padding: 0 1.25rem; }
	.zr-header__ttl { flex-direction: column; align-items: flex-start; font-size: .75rem; }
	.zr-header__ttl img { height: 1.75rem; margin: 0 0 .25rem; }
	.zr-pill--sp { display: flex; width: 5.4375rem; height: 2.0625rem; margin: 0 3.125rem 0 auto; background: var(--zr-navy); border-color: var(--zr-navy); color: #fff; font-size: .9375rem; letter-spacing: 0; }
	.zr-toggle { display: block; position: absolute; right: 1.25rem; top: 50%; width: 1.875rem; height: 1.875rem; margin-top: -.9375rem; padding: 0; border: 0; background: none; cursor: pointer; color: var(--zr-ink); }
	.zr-toggle__bar, .zr-toggle__bar::before, .zr-toggle__bar::after { position: absolute; left: .125rem; width: 1.625rem; height: 2px; background: currentColor; transition: transform .25s, top .25s; }
	.zr-toggle__bar { top: 50%; margin-top: -1px; }
	.zr-toggle__bar::before, .zr-toggle__bar::after { content: ""; left: 0; }
	.zr-toggle__bar::before { top: -.5rem; }
	.zr-toggle__bar::after { top: .5rem; }
	.zr-toggle[aria-expanded="true"] .zr-toggle__bar { background: transparent; }
	.zr-toggle[aria-expanded="true"] .zr-toggle__bar::before { top: 0; transform: rotate(45deg); background: currentColor; }
	.zr-toggle[aria-expanded="true"] .zr-toggle__bar::after { top: 0; transform: rotate(-45deg); background: currentColor; }
	.zr-header__nav {
		position: fixed; top: 4.0625rem; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.25rem 1.25rem 6.25rem;
		flex-direction: column; align-items: stretch; background: var(--zr-navy); overflow-y: auto; visibility: hidden; transform: translateY(-110%); transition: transform .5s, visibility 0s .5s;
	}
	.zr-header.is-open .zr-header__nav { visibility: visible; transform: none; transition: transform .5s; }
	.zr-header__nav ul { flex-direction: column; align-items: stretch; }
	.zr-header__nav li a { margin: 0; padding: .9375rem 0; border-bottom: 1px solid rgba(255, 255, 255, .45); color: #fff; font-size: 1.125rem; }
	.zr-header__nav-corp { display: block; }
	.zr-pill--header { width: 100%; height: 3.125rem; margin: 1.875rem 0 0; border-radius: 1.875rem; background: var(--zr-yellow); border-color: var(--zr-yellow); color: var(--zr-navy); font-size: 1.125rem; }
}

/* ---------- MV (ref .topMv) ---------- */
.zr-mv { width: 100%; aspect-ratio: 2; border-bottom: 1px solid var(--zr-line); }
.zr-mv__inner { display: flex; height: 100%; }
.zr-mv__text { width: 50%; border-right: 1px solid var(--zr-line); display: flex; flex-direction: column; }
.zr-mv__catch {
	flex: 1; display: flex; flex-direction: column; justify-content: center; padding: .875rem .625rem .875rem 1.25rem;
	font-weight: 900; font-size: 10.2vw; line-height: 1; letter-spacing: -.06em; color: var(--zr-ink);
}
.zr-mv__line { display: block; white-space: nowrap; }
.zr-mv__nav { display: flex; align-items: center; padding: .875rem .75rem; border-top: 1px solid var(--zr-line); }
.zr-mv__nav .zr-btn { width: calc(100% / 3 - 1rem); margin: 0 .5rem; }
.zr-mv__image { width: 50%; }

@media (max-width: 640px) {
	.zr-mv { aspect-ratio: auto; }
	.zr-mv__inner { flex-direction: column; }
	.zr-mv__text { width: 100%; border-right: 0; padding: .46875rem 0 0; }
	.zr-mv__catch { padding: .625rem .9375rem 1.25rem; font-size: 21vw; line-height: 1.02; }
	.zr-mv__nav { order: 3; flex-wrap: wrap; gap: .5rem .375rem; padding: .9375rem 1.25rem 1.25rem; border-top: 0; }
	.zr-mv__nav .zr-btn { width: calc(50% - .1875rem); height: 2.375rem; margin: 0; font-size: .875rem; }
	.zr-mv__nav .zr-btn--white { width: 12.1875rem; }
	.zr-mv__text { display: contents; }
	.zr-mv__catch { order: 1; }
	.zr-mv__image { order: 2; width: 100%; border-top: 1px solid var(--zr-line); border-bottom: 1px solid var(--zr-line); }
}

/* ---------- Ruled blocks with a vertical label (ref .topBlock) ---------- */
.zr-block { display: flex; border-bottom: 1px solid var(--zr-line); }
.zr-block__label { width: 6.25rem; flex: none; display: flex; justify-content: center; writing-mode: vertical-rl; }
.zr-block__label span { position: sticky; top: 4.0625rem; padding: 8.125rem 0; font-family: var(--zr-en); font-weight: 800; font-size: .875rem; letter-spacing: .02em; text-transform: uppercase; }
.zr-block__content { position: relative; width: calc(100% - 6.25rem); padding: 7.5rem 2.5rem; border-left: 1px solid var(--zr-line); }
@media (max-width: 640px) {
	.zr-block { flex-direction: column; }
	.zr-block__label { display: none; }
	.zr-block__content { width: 100%; border-left: 0; padding: 3.75rem 1.25rem; }
}
.zr-h2 { font-weight: 900; font-size: 5rem; line-height: 1; letter-spacing: -.03125rem; }
.zr-h2 a { display: inline-flex; align-items: center; }
.zr-h2 a:hover .zr-carrow { background: var(--zr-yellow); border-color: var(--zr-yellow); color: var(--zr-navy); }
@media (max-width: 640px) { .zr-h2 { font-size: 2rem; } }

/* ---------- MESSAGE (ref ABOUT) ---------- */
.zr-about__inner { overflow: hidden; }
.zr-about__title { position: relative; z-index: 1; font-weight: 900; font-size: 5.5vw; line-height: 1.3; margin-bottom: 7.5rem; }
.zr-about__col { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 4rem; }
.zr-about__text { width: 37.75rem; max-width: 55%; }
.zr-about__text p { font-weight: 700; font-size: 1.25rem; line-height: 1.8; margin-bottom: 1.875rem; }
.zr-about__nav { width: 27.1875rem; flex: none; border-top: 1px solid var(--zr-line); }
.zr-about__nav a { display: flex; align-items: center; justify-content: space-between; padding: 1.4375rem 0; border-bottom: 1px solid var(--zr-line); font-weight: 700; font-size: 1.625rem; letter-spacing: -.0625rem; line-height: 1; }
.zr-about__nav a:hover { color: var(--zr-cyan); }
.zr-about__nav .zr-arrow { width: 1.25rem; height: 1.25rem; }
.zr-about__deco { position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 1.5rem; transform: rotate(45deg); pointer-events: none; }
.zr-about__deco--1 { width: 15rem; left: -2.5rem; top: 3.5rem; background: var(--zr-yellow); opacity: .85; border-radius: 0 50% 50% 50%; transform: rotate(-45deg); }
.zr-about__deco--2 { width: 13rem; left: 18rem; top: 2rem; border: 1px solid var(--zr-yellow); }
.zr-about__deco--3 { width: 20rem; left: 6rem; top: 30rem; border: 1px solid var(--zr-yellow); }
@media (max-width: 640px) {
	.zr-about__title { font-size: 2.25rem; margin-bottom: 3.125rem; }
	.zr-about__col { flex-direction: column; gap: 1.875rem; }
	.zr-about__text { width: 100%; max-width: none; }
	.zr-about__text p { font-size: 1.125rem; }
	.zr-about__nav { width: 100%; }
	.zr-about__nav a { font-size: .8125rem; font-weight: 900; padding: 1.125rem 0; }
	.zr-about__deco--1 { width: 8rem; left: -1rem; top: 2.5rem; }
	.zr-about__deco--2 { width: 8rem; left: 9rem; top: 2.2rem; }
	.zr-about__deco--3 { width: 12rem; left: -3rem; top: 20rem; }
}

/* ---------- MISSION (ref BUSINESS: text + vertical slider) ---------- */
.zr-biz .zr-block__content { padding-top: 0; padding-bottom: 0; padding-right: 0; display: flex; }
.zr-biz__text { width: 60%; padding: 8.125rem 2.5rem 8.125rem 0; }
.zr-biz .zr-h2 { margin-bottom: 5.625rem; }
.zr-biz__list { padding-left: 11.25rem; }
.zr-biz__item + .zr-biz__item { margin-top: 3.125rem; }
.zr-biz__item h3 { display: flex; align-items: center; font-weight: 700; font-size: 2rem; line-height: 1.2; margin-bottom: 1.25rem; }
.zr-biz__item p { font-weight: 700; font-size: 1.125rem; line-height: 1.6; max-width: 25rem; }
.zr-biz__image { position: relative; width: 40%; overflow: hidden; }
.zr-biz__track { position: absolute; inset: 0 0 auto; transition: transform .3s ease; }
.zr-biz__fig { height: 31.25rem; padding: 0 0 1.25rem 2.5rem; }
.zr-biz__img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
	.zr-biz .zr-block__content { position: relative; display: block; padding: 0; overflow: hidden; }
	.zr-biz__text { position: relative; z-index: 2; width: 100%; padding: 3.75rem 1.25rem; color: #fff; }
	.zr-biz .zr-h2 { margin-bottom: 3rem; }
	.zr-biz__list { padding-left: 0; }
	.zr-biz__item + .zr-biz__item { margin-top: 1.875rem; }
	.zr-biz__item h3 { font-size: 1.375rem; margin-bottom: 1.25rem; }
	.zr-biz__item p { font-size: .875rem; }
	.zr-biz__image { position: absolute; inset: 0; width: 100%; border-left: 0; }
	.zr-biz__image::after { content: ""; position: absolute; inset: 0; background: rgba(4, 30, 46, .62); }
	.zr-biz__track { position: absolute; inset: 0; transform: none !important; }
	.zr-biz__fig { position: absolute; inset: 0; height: 100%; padding: 0; opacity: 0; transition: opacity .3s ease; }
	.zr-biz__fig.is-active { opacity: 1; }
}

/* ---------- POSITIONS (ref INTERVIEW) ---------- */
.zr-int .zr-block__content { padding-right: 0; padding-bottom: 0; }
.zr-int .zr-h2 { margin-bottom: 5.625rem; }



.zr-int__notice, .zr-int__content { max-width: 50rem; font-size: 1rem; line-height: 1.8; margin-bottom: 3rem; }
@media (max-width: 640px) {
	.zr-int .zr-block__content { padding: 3.75rem 0 0; }
	.zr-int__message { padding-left: 1.25rem; }
	.zr-int .zr-h2 { margin-bottom: 2.1875rem; }
}

/* belt (ref CROSS×TALK beltSlider: linear, 5s per 1/3 width) */
.zr-belt { overflow: hidden; border-top: 1px solid var(--zr-line); border-bottom: 1px solid var(--zr-line); margin-top: 5rem; padding: .9375rem 0; }
.zr-belt__track { display: flex; width: max-content; animation: zr-belt var(--zr-belt-dur, 40s) linear infinite; }
.zr-belt__item { flex: none; padding: 0 2.5rem; font-family: var(--zr-en); font-weight: 800; font-size: 2.8125rem; line-height: 1; letter-spacing: -.02em; white-space: nowrap; color: var(--zr-ink); }
@keyframes zr-belt { to { transform: translateX(-50%); } }
@media (max-width: 640px) { .zr-belt { margin-top: 2.5rem; padding: .75rem 0; } .zr-belt__item { font-size: 2.25rem; padding: 0 1.25rem; } }

/* VALUES (ref crosstalk header + mosaic image cards) */
.zr-ct { padding: 7.5rem 2.5rem 7.5rem 0; }
.zr-ct__header { display: flex; align-items: center; margin-bottom: 4.6875rem; }
.zr-ct__desc, .zr-env__desc { margin-left: auto; font-weight: 700; font-size: 1.125rem; line-height: 1.8; }
.zr-ct__cols { display: grid; grid-template-columns: 60fr 40fr; gap: 1rem; }
.zr-ct__col { position: relative; height: 26.25rem; overflow: hidden; }
.zr-ct__col--3 { grid-column: span 1; }
.zr-ct__cols > :nth-child(3) { width: auto; }
.zr-ct__cols { grid-template-areas: "a b" "c d"; }
.zr-ct__col--1 { grid-area: a; } .zr-ct__col--2 { grid-area: b; }
.zr-ct__col--3 { grid-area: c; } .zr-ct__col--4 { grid-area: d; }
@supports (grid-template-columns: subgrid) { .zr-ct__cols { grid-template-columns: repeat(10, 1fr); grid-template-areas: "a a a a a a b b b b" "c c c c d d d d d d"; } }
.zr-ct__image, .zr-ct__img { width: 100%; height: 100%; }
.zr .zr-ct__img { object-fit: cover; transition: transform .5s; }
.zr-ct__col:hover .zr-ct__img { transform: scale(1.1); }
.zr-ct__text h3 { transition: background-color .3s; }
.zr-ct__col:hover .zr-ct__text h3 { background: var(--zr-yellow); }
.zr-ct__text { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; align-items: flex-start; }
.zr-ct__cat { display: inline-block; background: #fff; padding: .4375rem 1rem; margin-bottom: .3125rem; font-weight: 500; font-size: .875rem; line-height: 1; }
.zr-ct__text h3 { background: #fff; padding: .4375rem 1rem; font-weight: 900; font-size: 1.65vw; line-height: 1.4; }
.zr-ct__no { font-family: var(--zr-en); font-weight: 800; margin-right: .5rem; }
@media (max-width: 640px) {
	.zr-ct { padding: 3.75rem 0; }
	.zr-ct__header { display: block; padding: 0 1.25rem; margin-bottom: 2.5rem; }
	.zr-ct .zr-h2 { margin-bottom: 1.625rem; }
	.zr-ct__desc { font-size: .875rem; line-height: 1.8; }
	.zr-ct__cols { display: flex; flex-direction: column; gap: .625rem; padding: 0 .3125rem; }
	.zr-ct__col { height: 13.125rem; }
	.zr-ct__text { left: .625rem; right: .625rem; bottom: .625rem; }
	.zr-ct__cat { font-size: .75rem; }
	.zr-ct__text h3 { font-size: .875rem; }
}

/* ---------- FLOW (ref ENVIRONMENT cards) ---------- */
.zr-env__header { display: flex; align-items: center; margin-bottom: 5rem; }
.zr-env__list { display: flex; flex-wrap: wrap; margin: -1.875rem; }
.zr-env__card { width: calc(100% / 3 - 3.75rem); margin: 1.875rem; }
.zr-env__image { position: relative; aspect-ratio: 3 / 2; margin-bottom: 1.875rem; overflow: hidden; }
.zr .zr-env__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.zr-env__card:hover .zr-env__img { transform: scale(1.2); }
.zr-env__title { transition: color .3s; }
.zr-env__card:hover .zr-env__title { color: var(--zr-cyan); }
.zr-env__step { position: absolute; left: 0; top: 0; background: var(--zr-navy); color: #fff; font-family: var(--zr-en); font-weight: 800; font-size: .875rem; line-height: 1; padding: .5rem .75rem; letter-spacing: .04em; }
.zr-env__title { display: flex; align-items: center; justify-content: space-between; padding-bottom: .9375rem; border-bottom: 1px solid var(--zr-line); font-weight: 900; font-size: 1.5rem; line-height: 1; margin-bottom: .9375rem; }
.zr-env__text { font-size: .9375rem; line-height: 1.8; }
@media (max-width: 640px) {
	.zr-env__header { display: block; margin-bottom: 2.5rem; }
	.zr-env .zr-h2, .zr-faq .zr-h2 { margin-bottom: 1.625rem; }
	.zr-env__desc { font-size: .875rem; }
	.zr-env__list { margin: -.9375rem -.625rem; }
	.zr-env__card { width: calc(50% - 1.25rem); margin: .9375rem .625rem; }
	.zr-env__image { margin-bottom: 1rem; }
	.zr-env__step { font-size: .6875rem; padding: .375rem .5rem; }
	.zr-env__title { font-size: 1rem; line-height: 1.4; padding-bottom: .5rem; margin-bottom: .5rem; }
	.zr-env__text { font-size: .8125rem; line-height: 1.7; }
}

/* ---------- FAQ (ref ENTRY: 2px bordered boxes, 2 columns) ---------- */
.zr-faq__list { display: grid; grid-template-columns: 1fr 1fr; gap: 3.125rem 4rem; align-items: start; }
.zr-faq__item { border: 2px solid var(--zr-line); background: #fcfcfc; }
.zr-faq__item summary { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 8.4375rem; padding: 1.25rem 2rem; cursor: pointer; list-style: none; text-align: center; font-weight: 900; font-size: 1.375rem; line-height: 1.4; }
.zr-faq__item summary::-webkit-details-marker { display: none; }
.zr-faq__item summary { transition: background-color .3s; }
.zr-faq__item summary:hover { background: var(--zr-yellow); color: var(--zr-navy); }
.zr-faq__icon { position: relative; flex: none; width: 1rem; height: 1rem; }
.zr-faq__icon::before, .zr-faq__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; background: currentColor; transition: transform .25s; }
.zr-faq__icon::after { transform: rotate(90deg); }
.zr-faq__item[open] .zr-faq__icon::after { transform: rotate(0); }
.zr-faq__a { padding: 0 2rem 1.75rem; font-weight: 700; font-size: 1rem; line-height: 1.8; }
@media (max-width: 640px) {
	.zr-faq__list { grid-template-columns: 1fr; gap: .9375rem; }
	.zr-faq__item summary { min-height: 3.25rem; padding: .875rem 1rem; font-size: .875rem; }
	.zr-faq__a { padding: 0 1.25rem 1.25rem; font-size: .875rem; }
}

/* ---------- Closing CTA (ref .footer__cta) ---------- */
.zr-cta { background: var(--zr-navy); color: #fff; }
.zr-cta__title, .zr-cta__main, .zr-cta__sub { width: calc(100% - 6.25rem); margin-left: auto; border-left: 1px solid rgba(255, 255, 255, .3); }
.zr-cta__title { font-weight: 900; font-size: 7.1vw; line-height: 1.3; padding: 7.5rem 7.14% 3.75rem 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, .3); color: #fff; }
.zr-cta__main { display: flex; align-items: center; justify-content: space-between; padding: 2.1875rem 7.14% 2.1875rem 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.zr-cta__main a { display: inline-flex; align-items: center; font-weight: 700; font-size: 3.5vw; line-height: 1; }
.zr-cta__main .zr-carrow { width: 3.75rem; height: 3.75rem; margin-left: 1.875rem; }
.zr-cta__main a:hover .zr-carrow { background: var(--zr-yellow); border-color: var(--zr-yellow); color: var(--zr-navy); } /* v0.9.31: outline by default, yellow on hover/focus */
.zr-cta__main a:focus-visible .zr-carrow { background: var(--zr-yellow); border-color: var(--zr-yellow); color: var(--zr-navy); }
.zr-cta__main a:hover { color: var(--zr-yellow); }
.zr-cta__sub { display: flex; align-items: center; padding: 3.5625rem 7.14% 3.5625rem 2.5rem; }
.zr-cta__sub a { display: inline-flex; align-items: center; gap: 1.5rem; margin-right: 6.25rem; font-weight: 700; font-size: 1.35vw; line-height: 1; }
.zr-cta__sub a:hover { opacity: .7; }
@media (max-width: 640px) {
	.zr-cta__title, .zr-cta__main, .zr-cta__sub { width: 100%; border-left: 0; margin: 0; }
	.zr-cta__title { font-size: 2.25rem; padding: 3.75rem 1.25rem 1.875rem; }
	.zr-cta__main { flex-direction: column; align-items: stretch; padding: 0; border-bottom: 0; }
	.zr-cta__main a { padding: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .3); font-size: 1.5rem; }
	.zr-cta__main .zr-carrow { width: 1.75rem; height: 1.75rem; margin-left: 1.25rem; }
	.zr-cta__sub { flex-direction: column; align-items: flex-start; padding: 2.5rem 1.25rem 3.75rem; }
	.zr-cta__sub a { margin: .75rem 0; font-size: 1.125rem; }
}

/* ---------- Footer (ref .footer__nav + giant wordmark) ---------- */
.zr-footer { background: var(--zr-navy); color: #fff; padding-bottom: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .3); }
.zr-footer__nav { display: flex; gap: 4rem; width: calc(100% - 6.25rem); margin-left: auto; padding: 4.375rem 2.5rem; border-left: 1px solid rgba(255, 255, 255, .3); }
.zr-footer__head { font-weight: 700; font-size: .875rem; margin-bottom: 1rem; }
.zr-footer__col li + li { margin-top: .75rem; }
.zr-footer__col a { font-size: .75rem; color: rgba(255, 255, 255, .85); }
.zr-footer__col a:hover { color: var(--zr-yellow); }
.zr-footer__mark { display: flex; justify-content: space-between; padding: 0 1.25rem; border-top: 1px solid rgba(255, 255, 255, .3); border-bottom: 1px solid rgba(255, 255, 255, .3); font-family: var(--zr-en); font-weight: 800; font-size: 15.6vw; line-height: 1.05; letter-spacing: -.02em; overflow: hidden; }
.zr-footer__copy { text-align: center; padding-top: 1.25rem; font-size: 1rem; }
.zr-footer__copy small { font-size: inherit; }
@media (max-width: 640px) {
	.zr-footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
	.zr-footer__nav { width: 100%; flex-wrap: wrap; gap: 2.5rem 3rem; margin: 0; padding: 3.75rem 1.25rem; border-left: 0; }
	.zr-footer__mark { flex-direction: column; font-size: 22vw; line-height: .95; padding: .5rem .625rem; }
	.zr-footer__copy { font-size: .875rem; }
}

/* ---------- Sticky entry bar (phones only; the ref keeps its pill in the header) ---------- */
.zr-sbar { display: none; }
@media (max-width: 640px) {
	.zr-sbar {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
		padding: .625rem 1.25rem calc(.625rem + env(safe-area-inset-bottom)); background: var(--zr-paper); border-top: 1px solid var(--zr-line);
		transform: translateY(110%); visibility: hidden; transition: transform .3s, visibility 0s .3s;
	}
	.zr-sbar.is-shown { transform: none; visibility: visible; transition: transform .3s; }
	.zr-pill--sbar { height: 3.125rem; background: var(--zr-yellow); border-color: var(--zr-navy); color: var(--zr-navy); font-size: 1.125rem; letter-spacing: 0; }
}

/* ---------- Reduced motion / paused ---------- */
@media (prefers-reduced-motion: reduce) {
	.zr-belt__track { animation: none; }
}
.zr-paused .zr-belt__track { animation-play-state: paused; }

.zr h2, .zr h3, .zr-about__text p, .zr-ct__desc, .zr-env__desc { word-break: auto-phrase; }
:where(.zr, .zr-header, .zr-footer, .zr-sbar) a:hover { color: inherit; }

/* ---------- Micro-details (ref) ---------- */
html.zr-root { line-break: strict; }
.zr-mv__image { position: relative; }
.zr-about__nav a, .zr-about__nav .zr-arrow, .zr-biz__item h3, .zr-h2 a, .zr-cta__main a, .zr-cta__sub a, .zr-footer__col a, .zr-footer__head { transition: color .3s, opacity .3s; }
.zr-biz__item:hover h3 { color: var(--zr-cyan); }
.zr-cta__sub a:hover { opacity: .7; }
.zr-cta__sub a:hover .zr-arrow { color: var(--zr-yellow); }
.zr-cta__main a:hover .zr-carrow { background: var(--zr-yellow); border-color: var(--zr-yellow); color: var(--zr-navy); }
.zr-footer__head { color: #bebebe; font-weight: 900; }
.zr-faq__a a { text-decoration: underline; }
.zr-btn:active, .zr-pill:active, .zr-faq__item summary:active, .zr-about__nav a:active { opacity: .7; }
.zr, .zr-header, .zr-sbar { -webkit-tap-highlight-color: rgba(253, 216, 4, .35); }
.zr-h2 a:hover { color: var(--zr-cyan); }

/* ---------- MV people grid (v3: own motif, not the ref's diamonds) ----------
   善 logo silhouette (ring + arch, zen_ring_path) + a thin ring behind each portrait,
   3-column staggered grid on PC / 2-column offset on phones, lift-on-hover, slow ring drift. */
.zr-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem 1.25rem; height: 100%; padding: .75rem 1.75rem 0; align-content: start; overflow: hidden; }
.zr-people__item { position: relative; aspect-ratio: 3 / 4; display: flex; align-items: flex-end; justify-content: center; }
.zr-people__item:nth-child(3n+2) { transform: translateY(3.25rem); }
.zr-people__shape { position: absolute; left: 0; bottom: 4%; width: 100%; height: auto; transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.zr-people__ring { position: absolute; width: 58%; height: auto; top: 4%; right: -2%; fill: none; stroke-width: 1.6; animation: zr-drift 7s ease-in-out infinite alternate; transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.zr-people__item:nth-child(even) .zr-people__ring { right: auto; left: -2%; animation-delay: -3.5s; }
.zr .zr-people__img { position: relative; z-index: 1; width: 128%; max-width: none; margin: 0 -14%; height: auto; transition: transform .5s cubic-bezier(.22, .61, .36, 1); transform-origin: 50% 100%; }
.zr-people__item--1 .zr-people__shape { fill: var(--zr-cyan-2); } .zr-people__item--1 .zr-people__ring { stroke: var(--zr-navy); }
.zr-people__item--2 .zr-people__shape { fill: var(--zr-yellow); } .zr-people__item--2 .zr-people__ring { stroke: var(--zr-cyan); }
.zr-people__item--3 .zr-people__shape { fill: var(--zr-navy); } .zr-people__item--3 .zr-people__ring { stroke: var(--zr-yellow); }
.zr-people__item--4 .zr-people__shape { fill: var(--zr-sky); } .zr-people__item--4 .zr-people__ring { stroke: var(--zr-navy); }
.zr-people__item--5 .zr-people__shape { fill: var(--zr-navy); } .zr-people__item--5 .zr-people__ring { stroke: var(--zr-cyan); }
.zr-people__item--6 .zr-people__shape { fill: var(--zr-yellow); } .zr-people__item--6 .zr-people__ring { stroke: var(--zr-navy); }
.zr-people__item:hover .zr-people__img { transform: translateY(-.5rem) scale(1.03); }
.zr-people__item:hover .zr-people__shape { transform: scale(1.06); }
.zr-people__item:hover .zr-people__ring { transform: rotate(25deg) scale(1.1); }
@keyframes zr-drift { from { translate: 0 0; } to { translate: -6% 8%; } }
@media (max-width: 640px) {
	.zr-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem .75rem; padding: 1rem 1.25rem 2.75rem; height: auto; }
	.zr-people__item:nth-child(3n+2) { transform: none; }
	.zr-people__item:nth-child(even) { transform: translateY(2.25rem); }
	.zr-people__item--5, .zr-people__item--6 { display: none; }
	.zr-people__item { aspect-ratio: 1 / 1.08; }
}
/* our heading treatment: yellow underline drawn in on load */
.zr-mark { background: linear-gradient(transparent 80%, var(--zr-yellow) 80%, var(--zr-yellow) 95%, transparent 95%) no-repeat 0 0 / 100% 100%; color: inherit; }
@media (prefers-reduced-motion: no-preference) {
	.js .zr-mark { background-size: 0% 100%; animation: zr-mark .8s .4s cubic-bezier(.65, 0, .35, 1) forwards; }
}
@keyframes zr-mark { to { background-size: 100% 100%; } }
@media (prefers-reduced-motion: reduce) {
	.zr-people__ring { animation: none; }
	.zr-people__img, .zr-people__shape, .zr-people__ring { transition: none; }
}

/* ---------- POSITIONS v4: back to the v1 card style, one person per card ---------- */
.zr-int__message { padding-right: 2.5rem; }
.zr-jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.zr-job { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--zr-line); border-radius: 1.25rem; box-shadow: .375rem .375rem 0 var(--zr-navy); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.zr-job:hover { transform: translate(-.125rem, -.125rem); box-shadow: .5rem .5rem 0 var(--zr-navy); }
.zr-job__visual { position: relative; aspect-ratio: 4 / 3; background: #eaf8fe; border-bottom: 1px solid var(--zr-line); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.zr-job__shape { position: absolute; left: 50%; bottom: 0; width: 70%; height: auto; transform: translate(-50%, 6%); transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.zr-job--1 .zr-job__shape { fill: var(--zr-cyan-2); } .zr-job--2 .zr-job__shape { fill: var(--zr-yellow); } .zr-job--3 .zr-job__shape { fill: var(--zr-navy); }
.zr-job--4 .zr-job__shape { fill: var(--zr-sky); } .zr-job--5 .zr-job__shape { fill: var(--zr-yellow); } .zr-job--6 .zr-job__shape { fill: var(--zr-navy); }
.zr-job--2 .zr-job__visual, .zr-job--5 .zr-job__visual { background: #fff8d6; }
.zr .zr-job__img { position: relative; z-index: 1; width: 70%; max-width: none; height: auto; margin-bottom: -2%; transition: transform .5s cubic-bezier(.22, .61, .36, 1); transform-origin: 50% 100%; }
.zr-job:hover .zr-job__img { transform: scale(1.04); }
.zr-job:hover .zr-job__shape { transform: translate(-50%, 6%) scale(1.05); }
.zr-job__body { flex: 1; display: flex; flex-direction: column; gap: .75rem; padding: 1.625rem 1.5rem 1.5rem; }
.zr-job__num { font-family: var(--zr-en); font-weight: 800; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: #0078a8; line-height: 1; }
.zr-job__name { font-weight: 900; font-size: 1.375rem; line-height: 1.5; color: var(--zr-ink); }
.zr-job__text { font-size: .9375rem; line-height: 1.85; }
.zr-job__terms { margin: auto 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; padding-top: .875rem; border-top: 1px dashed rgba(4, 52, 80, .3); font-size: .875rem; line-height: 1.4; }
.zr-job__terms dt { background: var(--zr-navy); color: #fff; font-weight: 700; font-size: .75rem; border-radius: .25rem; padding: .125rem .5rem; }
.zr-job__terms dd { margin: 0; font-weight: 700; color: var(--zr-navy); }
.zr-job__link { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; margin-top: .25rem; padding: .625rem 1.125rem; border: 2px solid var(--zr-navy); border-radius: 999px; font-weight: 900; font-size: .9375rem; line-height: 1.2; color: var(--zr-navy); transition: background-color .3s; }
.zr-job__link:hover { background: var(--zr-yellow); color: var(--zr-navy); }
@media (max-width: 1100px) { .zr-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.zr-int__message { padding: 0 1.25rem; }
	.zr-jobs { grid-template-columns: 1fr; gap: 1.5rem; }
	.zr-job__name { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .zr-job, .zr .zr-job__img, .zr-job__shape { transition: none; } }

/* v0.9.30: align the position cards row by row (label / title / text / terms / button line up across a row).
   Each card spans 6 rows of the list grid and shares them via subgrid; the body wrapper is flattened. */
@supports (grid-template-rows: subgrid) {
	.zr-jobs { grid-auto-rows: auto; row-gap: 0; }
	.zr-job { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 2rem; }
	.zr-job__body { display: contents; }
	.zr-job__body > * { margin-left: 1.5rem; margin-right: 1.5rem; }
	.zr-job__num { padding-top: 1.625rem; margin-bottom: .75rem; }
	.zr-job__name { margin-bottom: .75rem; }
	.zr-job__text { margin-bottom: .875rem; }
	.zr-job__terms { margin-top: 0; align-self: end; }
	.zr-job__link { margin: .75rem 1.5rem 1.5rem; align-self: end; justify-self: start; }
}
/* the portraits are cut out at slightly different scales: pin them to the same height so heads line up */
.zr .zr-job__img { width: auto; height: 94%; max-height: 94%; }

/* ==========================================================================
   v5 polish (owner: アニメーション・読み込み・ボタン・文字間隔・配置を細部まで)
   One motion language: ease-out cubic-bezier(.22,1,.36,1), 500–800ms, 90ms stagger.
   Opening (every load since v0.9.44, html.zr-loading) → hero intro (html.zr-intro) → scroll reveals (html.zr-anim).
   Everything is skipped with prefers-reduced-motion (the head script never adds the classes).
   ========================================================================== */
body.is-zr {
	--zr-out: cubic-bezier(.22, 1, .36, 1);
	--zr-t0: .15s;              /* hero intro start */
	--zr-btn-h: 3rem;
	letter-spacing: .04em;
	font-kerning: normal;
}

/* ---- Opening v4 (v0.9.45, owner: カクカクしてる／善いらない／手裏剣で壁を壊す) — ≈3.0s ----
   Only transform / opacity animate on big layers (the brush marker and the cracks are tiny clip / stroke draws).
   No animated filters, no moving grain, no full-screen clip-path animation. Timeline from html.zr-go:
   0      navy wall (static seams + grain)
   .15    copy rises char by char out of per-line masks · 1.1 brush marker under 当事者
   1.35   shuriken flies in spinning (3 afterimages) · 1.75 impact: flash + wall shake · 1.77 cracks run
   1.95   the wall shatters into 16 static shards (fly / fall with rotation; the copy breaks with them)
   2.1    the real hero heading rises in place (line masks) · 2.7 marker · 2.75+ header, buttons, tiles · 2.95 loader hidden,
          3.3 loader display:none (inline style, no page-wide class change) → zr:opened starts the tile flips.
   Tap / click / key → html.zr-done: loader removed, hero in its final state at once. */
body.is-zr { --zr-expo: cubic-bezier(.16, 1, .3, 1); --zr-io: cubic-bezier(.83, 0, .17, 1); }
.zr-loader { display: none; }
html.zr-loading .zr-loader { --zr-ls: -.02em; --zr-f: min(20vw, 12.5vh); display: block; position: fixed; inset: 0; z-index: 1000; overflow: hidden; cursor: pointer; contain: strict; animation: zr-ld-gone 0s 2.95s forwards; }
html.zr-loading:not(.zr-go) *, html.zr-loading:not(.zr-go) *::before, html.zr-loading:not(.zr-go) *::after { animation-play-state: paused !important; }
@keyframes zr-ld-gone { to { visibility: hidden; pointer-events: none; } }
@keyframes zr-ld-out { to { opacity: 0; } }
@keyframes zr-ld-in { to { opacity: 1; } }

/* the wall = 16 shards; each shard shows its part of one full-screen face (navy, panel seams, static grain, copy) */
.zr-loader__wall { position: absolute; inset: -2vmin; will-change: transform; /* a little larger than the screen: the shake never shows the page */ animation: zr-ld-shake .26s 1.75s linear; }
@keyframes zr-ld-shake { 15% { transform: translate(-1.2vmin, .8vmin); } 35% { transform: translate(1vmin, -.6vmin); } 55% { transform: translate(-.6vmin, -.5vmin); } 75% { transform: translate(.4vmin, .4vmin); } to { transform: none; } }
.zr-loader__shard { position: absolute; overflow: hidden; opacity: 0; will-change: transform, opacity; animation: zr-ld-in 0s 1.95s forwards, zr-ld-shatter .85s calc(1.95s + var(--d)) cubic-bezier(.3, .55, .6, 1) forwards; }
@keyframes zr-ld-shatter { from, 70% { opacity: 1; } to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(var(--s)); } }
.zr-loader__face {
	position: absolute; display: block;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255, 255, 255, .05) calc(25% - 1px) 25%),
		repeating-linear-gradient(0deg, transparent 0 calc(33.333% - 1px), rgba(0, 0, 0, .18) calc(33.333% - 1px) 33.333%),
		radial-gradient(ellipse at 50% 45%, #10365c, #0b2a4a 55%, #081f38);
}
/* one unbroken face under the shards hides their hairline seams until the wall breaks */
.zr-loader__face--whole { inset: 0; animation: zr-ld-out 0s 1.95s forwards; }
.zr-loader__face--whole .zr-loader__ch, .zr-loader__face--whole .zr-loader__hl::before { animation: none; transform: none; clip-path: none; opacity: 1; }
.zr-loader__face--whole .zr-loader__stage { visibility: hidden; }
.zr-loader__stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1rem, 3vh, 2rem); padding: 0 1rem; }
/* the live copy animates on top of the wall, then hands over to the identical static copies in the shards */
.zr-loader__stage--live { animation: zr-ld-out 0s 1.95s forwards; }
.zr-loader__shard .zr-loader__ch, .zr-loader__shard .zr-loader__hl::before { animation: none; transform: none; clip-path: none; opacity: 1; }

.zr-loader__catch { display: flex; flex-direction: column; align-items: flex-start; font-family: var(--f-ja, sans-serif); font-weight: 900; font-size: var(--zr-f); line-height: 1.1; letter-spacing: var(--zr-ls); color: #fff; font-feature-settings: "palt"; }
.zr-loader__row { display: block; white-space: nowrap; overflow: hidden; padding: 0 .06em .04em 0; margin-bottom: -.04em; transform-origin: 0 0; }
.zr-loader__rowin { display: inline-block; }
.zr-loader__ch { display: inline-block; transform: translateY(115%) rotate(10deg); transform-origin: 0 100%; animation: zr-ld-rise .7s calc(.15s + var(--c) * .045s) var(--zr-expo) forwards; }
@keyframes zr-ld-rise { to { transform: none; } }
.zr-loader__hl { position: relative; display: inline-block; isolation: isolate; }
.zr-loader__hl::before {
	content: ""; position: absolute; z-index: -1; left: -.06em; right: -.1em; top: 74%; height: 24%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath fill='%23fdd804' d='M3 10C30 5 70 4 120 5c30 0 55 1 77 3l-2 3c-6 1-4 3 1 4l-3 4c-50 2-100 3-150 3-14 0-28-1-41-2l2-3c-4-1-5-3-1-4z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
	clip-path: inset(0 100% 0 0); animation: zr-ld-brush .35s 1.1s cubic-bezier(.7, 0, .2, 1) forwards;
}
@keyframes zr-ld-brush { to { clip-path: inset(0 0 0 0); } }


/* shuriken: flies in from the upper right spinning, sticks in the centre, falls away with the wall */
.zr-loader__defs { position: absolute; }
.zr-loader__star { position: absolute; left: 50%; top: 50%; width: clamp(3.5rem, 10vmin, 6.5rem); aspect-ratio: 1; margin: calc(clamp(3.5rem, 10vmin, 6.5rem) / -2) 0 0 calc(clamp(3.5rem, 10vmin, 6.5rem) / -2); transform: translate(70vw, -70vh) rotate(0deg); will-change: transform; animation: zr-ld-throw .4s calc(1.35s + var(--g) * .03s) cubic-bezier(.5, 0, .9, .55) forwards, zr-ld-drop .5s 1.95s cubic-bezier(.5, 0, .75, 0) forwards; }
.zr-loader__star svg { display: block; width: 100%; height: 100%; fill: #e8f1f7; }
.zr-loader__star--ghost { opacity: calc(.42 - var(--g) * .12); animation: zr-ld-throw .4s calc(1.35s + var(--g) * .03s) cubic-bezier(.5, 0, .9, .55) forwards, zr-ld-out .1s 1.78s linear forwards; }
.zr-loader__star--ghost svg { fill: var(--zr-cyan); }
@keyframes zr-ld-throw { to { transform: translate(0, 0) rotate(1260deg); } }
@keyframes zr-ld-drop { from { transform: translate(0, 0) rotate(1260deg); } to { transform: translate(4vw, 60vh) rotate(1500deg); opacity: 0; } }
/* impact: flash + cracks along the shard edges */
.zr-loader__flash { position: absolute; left: 50%; top: 50%; width: 60vmax; aspect-ratio: 1; margin: -30vmax 0 0 -30vmax; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(127, 214, 247, .45) 18%, rgba(127, 214, 247, 0) 55%); opacity: 0; transform: scale(.1); animation: zr-ld-flash .3s 1.75s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes zr-ld-flash { 25% { opacity: 1; } to { opacity: 0; transform: scale(1); } }
.zr-loader__cracks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: rgba(234, 248, 254, .85); stroke-width: .22; stroke-linecap: round; opacity: 0; animation: zr-ld-in 0s 1.76s forwards, zr-ld-out .1s 1.95s linear forwards; }
.zr-loader__cracks path { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: zr-ld-crack .18s calc(1.77s + var(--k) * .008s) cubic-bezier(.2, .8, .4, 1) forwards; }
@keyframes zr-ld-crack { to { stroke-dashoffset: 0; } }

/* the hero under the opening (v0.9.46): nothing moves onto it — the real heading rises in place through its line
   masks as the wall breaks, the marker follows, then header / buttons / tiles (all after the heading) */
html.zr-loading body.is-zr { --zr-t0: 2.75s; }
html.zr-intro.zr-loading .zr-mv__in { animation: zr-up .55s calc(2.1s + var(--i, 0) * .07s) var(--zr-expo) forwards; }
html.zr-intro.zr-loading .zr-mark { background-size: 0% 100%; animation: zr-mark .45s 2.7s var(--zr-expo) forwards; }
html.zr-intro.zr-loading .zr-flip__item { opacity: 0; transform: scale(.94); animation: zr-ld-tile .6s var(--zr-expo) forwards; } /* .zr-intro.zr-loading: must beat the later html.zr-intro rule */
html.zr-intro.zr-loading .zr-flip__item--1 { animation-delay: 2.8s; } html.zr-intro.zr-loading .zr-flip__item--2 { animation-delay: 2.86s; } html.zr-intro.zr-loading .zr-flip__item--3 { animation-delay: 2.92s; }
html.zr-intro.zr-loading .zr-flip__item--4 { animation-delay: 2.98s; } html.zr-intro.zr-loading .zr-flip__item--5 { animation-delay: 3.04s; } html.zr-intro.zr-loading .zr-flip__item--6 { animation-delay: 3.1s; }
@keyframes zr-ld-tile { to { opacity: 1; transform: none; } }

/* ---- Hero intro ---- */
.zr-mv__line { overflow: hidden; padding-bottom: .04em; }
.zr-mv__in { display: block; }
html.zr-intro .zr-mv__in { transform: translateY(105%); animation: zr-up .8s calc(var(--zr-t0) + var(--i, 0) * .1s) var(--zr-out) forwards; }
@keyframes zr-up { to { transform: translateY(0); } }
html.zr-intro .zr-mark { background-size: 0% 100%; animation: zr-mark .6s calc(var(--zr-t0) + .55s) var(--zr-out) forwards; }
html.zr-intro .zr-people__item { opacity: 0; scale: .9; animation: zr-pop .7s var(--zr-out) forwards; }
html.zr-intro .zr-people__item--1 { animation-delay: calc(var(--zr-t0) + .25s); }
html.zr-intro .zr-people__item--2 { animation-delay: calc(var(--zr-t0) + .34s); }
html.zr-intro .zr-people__item--3 { animation-delay: calc(var(--zr-t0) + .43s); }
html.zr-intro .zr-people__item--4 { animation-delay: calc(var(--zr-t0) + .52s); }
html.zr-intro .zr-people__item--5 { animation-delay: calc(var(--zr-t0) + .61s); }
html.zr-intro .zr-people__item--6 { animation-delay: calc(var(--zr-t0) + .70s); }
@keyframes zr-pop { to { opacity: 1; scale: 1; } }
html.zr-intro .zr-mv__nav .zr-btn { opacity: 0; translate: 0 .75rem; animation: zr-rise .6s var(--zr-out) forwards; }
html.zr-intro .zr-mv__nav .zr-btn:nth-child(1) { animation-delay: calc(var(--zr-t0) + .55s); }
html.zr-intro .zr-mv__nav .zr-btn:nth-child(2) { animation-delay: calc(var(--zr-t0) + .64s); }
html.zr-intro .zr-mv__nav .zr-btn:nth-child(3) { animation-delay: calc(var(--zr-t0) + .73s); }
html.zr-intro .zr-header { translate: 0 -100%; animation: zr-headin .6s calc(var(--zr-t0) - .1s) var(--zr-out) forwards; }
@keyframes zr-rise { to { opacity: 1; translate: 0 0; } }
@keyframes zr-headin { to { translate: 0 0; } }
html.zr-intro .zr-belt__track { animation-delay: calc(var(--zr-t0) + .9s); }

/* ---- Scroll reveals (tagged by recruit.js; each element animates once, never nested) ---- */
html.zr-anim [data-zr-a] { transition: opacity .7s var(--zr-out), translate .7s var(--zr-out), clip-path .8s var(--zr-out), scale .8s var(--zr-out); transition-delay: var(--zr-d, 0s); }
html.zr-anim [data-zr-a="rise"]:not(.is-in) { opacity: 0; translate: 0 1.5rem; }
html.zr-anim [data-zr-a="mask"]:not(.is-in) { clip-path: inset(0 0 100% 0); translate: 0 .5em; }
html.zr-anim [data-zr-a="mask"].is-in { clip-path: inset(0 0 -10% 0); }
html.zr-anim [data-zr-a="img"]:not(.is-in) { clip-path: inset(0 0 0 100%); }
html.zr-anim [data-zr-a="img"] img { transition: scale .8s var(--zr-out); transition-delay: var(--zr-d, 0s); }
html.zr-anim [data-zr-a="img"]:not(.is-in) img { scale: 1.08; }

/* ---- Buttons: one system (height 48px, pill, 900, .06em, arrow that moves, pressed .98, focus ring) ---- */
.zr-btn, .zr-pill, .zr-job__link {
	display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: var(--zr-btn-h); height: auto; padding: 0 1.5rem;
	border: 2px solid var(--zr-navy); border-radius: 999px; font-weight: 900; font-size: .9375rem; letter-spacing: .06em; line-height: 1.2;
	transition: background-color .3s var(--zr-out), color .3s var(--zr-out), border-color .3s var(--zr-out), scale .15s ease, box-shadow .3s var(--zr-out);
	-webkit-tap-highlight-color: transparent;
}
.zr-btn span, .zr-pill span { transform: none; }
.zr-btn__arrow, .zr-job__link .zr-arrow { width: 1rem; height: 1rem; flex: none; transition: translate .3s var(--zr-out); }
.zr-btn__arrow--down { rotate: 90deg; }
.zr-btn:hover .zr-btn__arrow, .zr-pill:hover .zr-btn__arrow, .zr-job__link:hover .zr-arrow { translate: .25rem 0; }
.zr-btn:hover .zr-btn__arrow--down { translate: 0 .25rem; }
.zr-btn:active, .zr-pill:active, .zr-job__link:active, .zr-cta__main a:active { scale: .98; opacity: 1; }
.zr-btn:focus-visible, .zr-pill:focus-visible, .zr-job__link:focus-visible { outline: 3px solid var(--zr-cyan); outline-offset: 3px; }
.zr-cta a:focus-visible, .zr-footer a:focus-visible, .zr-header__nav a:focus-visible { outline-color: var(--zr-yellow); }
/* primary = entry: yellow + navy */
.zr-btn--primary, .zr-pill--header, .zr-pill--sp, .zr-pill--sbar { background: var(--zr-yellow); border-color: var(--zr-navy); color: var(--zr-navy); box-shadow: 0 .1875rem 0 var(--zr-navy); }
.zr-btn--primary:hover, .zr-pill--header:hover, .zr-pill--sp:hover, .zr-pill--sbar:hover { background: var(--zr-navy); border-color: var(--zr-navy); color: var(--zr-yellow); box-shadow: 0 0 0 var(--zr-navy); }
/* secondary = navy fill, tertiary = outline */
.zr-btn--navy { background: var(--zr-navy); border-color: var(--zr-navy); color: #fff; }
.zr-btn--navy:hover { background: var(--zr-cyan); border-color: var(--zr-cyan); color: #fff; }
.zr-btn--outline, .zr-job__link { background: transparent; color: var(--zr-navy); }
.zr-btn--outline:hover, .zr-job__link:hover { background: var(--zr-navy); color: #fff; }
.zr-mv__nav .zr-btn { height: auto; padding: 0 .875rem; gap: .5rem; font-size: .875rem; letter-spacing: .04em; white-space: nowrap; }
.zr-pill--header { width: auto; height: auto; min-height: 2.75rem; padding: 0 1.25rem; margin-left: 1.25rem; font-size: .875rem; }
@media (min-width: 1101px) { .zr-pill--sp { display: none; } }
@media (max-width: 1100px) {
	.zr-pill--sp { width: auto; height: auto; min-height: 2.25rem; padding: 0 .875rem; gap: .375rem; font-size: .8125rem; box-shadow: 0 .125rem 0 var(--zr-navy); }
	.zr-pill--sp .zr-btn__arrow { width: .75rem; height: .75rem; }
	.zr-pill--header { width: 100%; min-height: 3.25rem; margin: 1.875rem 0 0; font-size: 1rem; }
}
@media (max-width: 640px) {
	.zr-mv__nav .zr-btn { min-height: 2.75rem; padding: 0 1rem; font-size: .875rem; }
	.zr-mv__nav .zr-btn--outline { width: auto; }
	.zr-sbar { padding: .625rem max(1.25rem, env(safe-area-inset-left)) calc(.625rem + env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-right)); }
	.zr-pill--sbar { display: flex; width: 100%; min-height: 3.25rem; font-size: 1.0625rem; }
}
.zr-cta__main a { transition: color .3s var(--zr-out), scale .15s ease; }
.zr-cta__main .zr-carrow { transition: background-color .3s var(--zr-out), border-color .3s var(--zr-out), color .3s var(--zr-out), translate .3s var(--zr-out); }
.zr-cta__main a:hover .zr-carrow, .zr-h2 a:hover .zr-carrow { translate: .25rem 0; }
.zr-about__nav a .zr-arrow, .zr-cta__sub a .zr-arrow, .zr-env__title .zr-arrow, .zr-biz__item h3 .zr-arrow { transition: translate .3s var(--zr-out), color .3s; }
.zr-about__nav a:hover .zr-arrow, .zr-cta__sub a:hover .zr-arrow, .zr-env__card:hover .zr-arrow, .zr-biz__item:hover .zr-arrow { translate: .25rem 0; }

/* ---- Typography & spacing (8px scale) ---- */
.zr h1, .zr h2, .zr h3, .zr-faq__q { hanging-punctuation: allow-end; text-wrap: balance; font-feature-settings: "palt"; }
.zr-about__text p, .zr-ct__desc, .zr-env__desc { hanging-punctuation: allow-end; text-wrap: pretty; }
.zr-mv__catch { letter-spacing: -.02em; line-height: 1.1; font-size: 9.6vw; }
@media (max-width: 640px) { .zr-mv__catch { font-size: 20vw; line-height: 1.1; } }
.zr-h2 { letter-spacing: .03em; line-height: 1.25; }
.zr-about__title, .zr-cta__title { letter-spacing: .03em; line-height: 1.35; }
.zr-biz__item h3, .zr-job__name, .zr-ct__text h3, .zr-env__title, .zr-faq__item summary { letter-spacing: .03em; line-height: 1.4; }
.zr-env__title { line-height: 1.35; }
.zr-about__text p, .zr-biz__item p, .zr-job__text, .zr-env__text, .zr-faq__a, .zr-ct__desc, .zr-env__desc { letter-spacing: .05em; line-height: 1.9; }
.zr-block__label span, .zr-job__num, .zr-env__step { letter-spacing: .16em; }
.zr-belt__item { letter-spacing: .04em; }
.zr-footer__col a { letter-spacing: .06em; line-height: 1.6; }
@media (max-width: 640px) {
	.zr-block__content { padding: 4.5rem 1.25rem; }
	.zr-int .zr-block__content { padding: 4.5rem 0 0; }
	.zr-biz .zr-block__content { padding: 0; }
	.zr-biz__text { padding: 4.5rem 1.25rem; }
	.zr-ct { padding: 4.5rem 0; }
	.zr-cta__title { padding: 4.5rem 1.25rem 2rem; }
	.zr-h2 { margin-bottom: 2rem; font-size: 1.875rem; letter-spacing: .02em; }
	.zr-h2 .zr-carrow { margin-left: .625rem; }
	.zr-about__title { margin-bottom: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
	.zr-loader { display: none !important; }
	html [data-zr-a], html [data-zr-a] img { opacity: 1 !important; translate: none !important; clip-path: none !important; scale: none !important; transition: none !important; }
	.zr-btn, .zr-pill, .zr-job__link, .zr-btn__arrow { transition: none; }
}

/* ==========================================================================
   v6 readability & layout QA (owner: もう少し字を読みやすく、ずれやUIの崩れを直して)
   - Root size never below 16px (the old 1.2195vw made tablet text 7–11px).
   - Body ≥16px on phones / ≥17px on PC, line-height 1.9, weight 500; labels ≥13px.
   - Text colours ≥ 4.5:1 (cyan text → #0078a8; white text on the photo gets a darker scrim).
   - Tablet (641–1100): drawer header, single-column MESSAGE, 2-column FLOW, fluid big type.
   ========================================================================== */
html.zr-root { font-size: max(16px, min(1.2195vw, 17px)); }
@media (min-width: 1401px) { html.zr-root { font-size: 16px; } }
@media (max-width: 640px) { html.zr-root { font-size: max(16px, 4.268vw); } }
body.is-zr { --zr-cyan: #0078a8; }
.zr-btn--navy:hover { background: #0078a8; border-color: #0078a8; }

/* body copy */
.zr-about__text p { font-weight: 500; font-size: 1.1875rem; line-height: 1.9; margin-bottom: 1.25em; }
.zr-biz__item p, .zr-ct__desc, .zr-env__desc, .zr-faq__a { font-weight: 500; font-size: 1.0625rem; line-height: 1.9; }
.zr-job__text, .zr-env__text { font-size: 1.0625rem; line-height: 1.9; }
.zr-job__text { margin-bottom: 1.25rem; }
.zr-job__text, .zr-env__text, .zr-faq__a, .zr-biz__item p, .zr-about__text p { text-wrap: pretty; }
.zr-biz__item p { max-width: 26rem; }
/* labels ≥13px */
.zr-job__num, .zr-job__terms dt, .zr-env__step, .zr-footer__col a { font-size: .8125rem; }
.zr-job__terms { font-size: .9375rem; }
.zr-header__ttl { font-size: .9375rem; }
.zr-header__nav li a { font-size: .875rem; }
.zr-ct__cat { font-size: .875rem; }
/* fluid display type so tablets never overflow */
.zr-h2 { font-size: clamp(2rem, 5.6vw, 5rem); }
.zr-ct__text h3 { font-size: clamp(1rem, 1.65vw, 1.5rem); }
.zr-cta__main a { font-size: clamp(1.5rem, 3.5vw, 3.25rem); }
.zr-cta__sub a { font-size: clamp(1rem, 1.35vw, 1.25rem); }
.zr-biz__list { padding-left: min(11.25rem, max(0rem, calc(15vw - 2.25rem))); }
@media (max-width: 1100px) and (min-width: 641px) {
	.zr-about__col { flex-direction: column; gap: 2.5rem; }
	.zr-about__text { width: 100%; max-width: 40rem; }
	.zr-about__nav { width: 100%; max-width: 40rem; }
	.zr-env__card { width: calc(50% - 3.75rem); }
	.zr-ct__header, .zr-env__header { flex-wrap: wrap; gap: 1.5rem; }
	.zr-ct__desc, .zr-env__desc { margin-left: 0; }
	.zr-faq__item summary { font-size: 1.125rem; min-height: 6rem; }
	.zr-header__ttl { flex-direction: row; font-size: .9375rem; }
	.zr-header__ttl img { margin: 0 .75rem 0 0; }
}
@media (max-width: 640px) {
	.zr-about__text p { font-size: 1.0625rem; }
	.zr-about__nav a { font-size: 1rem; font-weight: 700; }
	.zr-biz__item p, .zr-ct__desc, .zr-env__desc, .zr-faq__a, .zr-job__text { font-size: 1rem; }
	.zr-env__text { font-size: .9375rem; }
	.zr-header__ttl { font-size: .8125rem; }
	.zr-biz__image::after { background: rgba(4, 30, 46, .74); }
	.zr-biz__text { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
	.zr-env__list { margin: -.75rem 0; }
	.zr-env__card { width: 100%; margin: .75rem 0; display: grid; grid-template-columns: 40% 1fr; column-gap: 1rem; align-items: start; }
	.zr-env__image { grid-row: span 2; margin-bottom: 0; }
	.zr-env__title { font-size: 1.0625rem; }
	.zr-ct__desc, .zr-env__desc { font-size: 1rem; }
}
@media (max-width: 1100px) and (min-width: 641px) {
	.zr-mv { aspect-ratio: auto; }
	.zr-mv__inner { min-height: 50vw; }
	.zr-mv__catch { font-size: 9vw; }
	.zr-people { height: auto; padding-bottom: 3.5rem; }
	.zr-faq__item summary { min-height: 7.5rem; }
}
@media (max-width: 1100px) {
	.zr-cta__sub { flex-wrap: wrap; gap: 1rem 2.5rem; }
	.zr-cta__sub a { margin-right: 0; white-space: nowrap; }
}
/* v0.9.32: 4th sub link (カジュアル面談を予約する) — keep each link on one line, wrap the row instead */
@media (min-width: 641px) {
	.zr-cta__sub { flex-wrap: wrap; gap: 1.25rem 0; }
	.zr-cta__sub a { white-space: nowrap; margin-right: clamp(2.5rem, 4vw, 6.25rem); }
}
.zr-job__link { white-space: nowrap; padding: 0 1.25rem; }
/* v6 QA round 2 */
@media (max-width: 1100px) and (min-width: 641px) {
	.zr-mv__inner { flex-direction: column; min-height: 0; }
	.zr-mv__text, .zr-mv__image { width: 100%; border-right: 0; }
	.zr-mv__catch { font-size: 12vw; padding: 2rem 2.5rem; }
	.zr-mv__nav { justify-content: flex-start; flex-wrap: wrap; gap: .75rem; padding: 1.25rem 2.5rem; border-bottom: 1px solid var(--zr-line); }
	.zr-mv__nav .zr-btn { width: auto; margin: 0; }
	.zr-people { padding: 2rem 2.5rem 4.5rem; }
	.zr-faq__list { grid-template-columns: 1fr; gap: 1rem; }
	.zr-faq__item summary { min-height: 4.5rem; justify-content: space-between; text-align: left; }
}
@media (max-width: 1100px) {
	.zr-cta__main { flex-wrap: wrap; justify-content: flex-start; gap: 1.5rem 3rem; }
}
.zr-footer__mark { gap: .3em; }
@media (max-width: 640px) {
	.zr-h2 { font-size: 1.75rem; }
	.zr-faq__item summary { justify-content: space-between; text-align: left; font-size: 1rem; line-height: 1.6; padding: 1rem 1.125rem; }
	.zr-faq__a { padding: 0 1.125rem 1.25rem; }
}
.zr-footer__mark { font-size: 14vw; justify-content: center; } @media (max-width: 640px) { .zr-footer__mark { font-size: 21vw; } }

/* ==========================================================================
   v7 hero fix (owner screenshot @1490): the MV no longer relies on aspect-ratio 2.
   Height comes from the content (min 50vw / one screen), the catch scales with both
   width and height, the button row always sits inside the MV above its bottom rule,
   buttons never wrap (the row wraps instead), the people grid is centred vertically.
   The ref's diamond outlines are gone; MESSAGE keeps one fully visible 善 ring shape.
   ========================================================================== */
@media (min-width: 1101px) {
	.zr-mv { aspect-ratio: auto; }
	.zr-mv__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(50vw, calc(100svh - 4.0625rem)); height: auto; }
	.zr-mv__text { width: auto; }
	.zr-mv__catch { flex: 1 0 auto; font-size: clamp(4.5rem, min(9vw, 15svh), 10.5rem); line-height: 1.1; padding: 2.5rem 1.5rem 2.5rem 2.5rem; }
	.zr-mv__image { width: auto; display: flex; align-items: center; }
	.zr-people { height: auto; width: 100%; padding: 2.5rem 2.5rem 5rem; align-content: center; }
}
.zr-mv__nav { flex-wrap: wrap; gap: .75rem; padding: 1.25rem 1.5rem 1.25rem 2.5rem; margin-top: auto; }
.zr-mv__nav .zr-btn { width: auto; margin: 0; flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) { .zr-mv__nav { padding: 1rem 1.25rem 1.25rem; gap: .5rem; } }
.zr-about__deco { display: none; }
.zr-about__ring { position: absolute; z-index: 0; left: 1rem; top: 4.5rem; width: 9rem; height: auto; fill: var(--zr-yellow); opacity: .9; pointer-events: none; }
@media (max-width: 640px) { .zr-about__ring { left: .5rem; top: 2.75rem; width: 6rem; } }

/* ==========================================================================
   v8 MV people tiles — the reference's treatment with our 6 portraits:
   square tiles edge to edge with 1px rules (PC/tablet 3×2, phone 2×2), a big rotated
   rounded square behind each person cropped by the tile, head & shoulders filling the
   tile in black and white (+10% grey gradient like the ref), flip every 2.5s
   (0.5s cubic-bezier(.25,1,.5,1), 0→200→180°, 0.5s offset per tile).
   PC: the catch sits on 2 lines so the left column matches the 2-row tile height.
   ========================================================================== */
.zr-people { display: none; }
.zr-flip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin: 0; padding: 0; list-style: none; }
.zr-flip__item { position: relative; aspect-ratio: 1; perspective: 62.5rem; overflow: hidden; border-right: 1px solid var(--zr-line); border-bottom: 1px solid var(--zr-line); }
.zr-flip__item:nth-child(3n) { border-right: 0; }
.zr-flip__item:nth-child(n+4) { border-bottom: 0; }
.zr-flip__face { position: absolute; inset: 0; overflow: hidden; background: var(--zr-paper); backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; }
.zr-flip__face::after { content: ""; position: absolute; inset: 0; z-index: 2; opacity: .1; background: linear-gradient(132deg, #535353 5.82%, #8e8e8e 34.1%, #f3f3f3 91.8%); pointer-events: none; }
.zr-flip__shape { position: absolute; z-index: 0; width: 78%; aspect-ratio: 1; border-radius: 22%; transform: rotate(45deg); }
.zr-flip__item--1 .zr-flip__shape { background: var(--zr-cyan-2); left: -14%; bottom: -10%; }
.zr-flip__item--2 .zr-flip__shape { background: var(--zr-yellow); right: -14%; bottom: -10%; }
.zr-flip__item--3 .zr-flip__shape { background: var(--zr-navy); left: -14%; top: 8%; }
.zr-flip__item--4 .zr-flip__shape { background: var(--zr-sky); right: -14%; top: 8%; }
.zr-flip__item--5 .zr-flip__shape { background: var(--zr-yellow); left: -14%; top: 8%; }
.zr-flip__item--6 .zr-flip__shape { background: var(--zr-cyan-2); right: -14%; bottom: -10%; }
.zr .zr-flip__img { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; transform: scale(1.45); transform-origin: 50% 4%; filter: grayscale(1) contrast(1.05); }
.zr-flip__before { transform: rotateY(0deg); z-index: 2; }
.zr-flip__after { transform: rotateY(180deg); z-index: 1; }
.zr-flip__item.is-ready .zr-flip__before { animation: zr-front .5s cubic-bezier(.25, 1, .5, 1) forwards; }
.zr-flip__item.is-ready .zr-flip__after { animation: zr-back .5s cubic-bezier(.25, 1, .5, 1) forwards; }
.zr-flip__item.is-flipped .zr-flip__before { animation: zr-back .5s cubic-bezier(.25, 1, .5, 1) forwards; z-index: 1; }
.zr-flip__item.is-flipped .zr-flip__after { animation: zr-front .5s cubic-bezier(.25, 1, .5, 1) forwards; z-index: 2; }
@keyframes zr-back { 0% { transform: rotateY(0deg); } 70% { transform: rotateY(200deg); } 100% { transform: rotateY(180deg); } }
@keyframes zr-front { 0% { transform: rotateY(180deg); } 70% { transform: rotateY(380deg); } 100% { transform: rotateY(360deg); } }
@keyframes zr-fade { to { opacity: 1; } } /* v0.9.47: restored — it was removed with the old loader in 0.9.43, which left the tiles at opacity 0 */
html.zr-intro .zr-flip__item { opacity: 0; animation: zr-fade .6s var(--zr-out) forwards; }
html.zr-intro .zr-flip__item--1 { animation-delay: calc(var(--zr-t0) + .25s); }
html.zr-intro .zr-flip__item--2 { animation-delay: calc(var(--zr-t0) + .34s); }
html.zr-intro .zr-flip__item--3 { animation-delay: calc(var(--zr-t0) + .43s); }
html.zr-intro .zr-flip__item--4 { animation-delay: calc(var(--zr-t0) + .52s); }
html.zr-intro .zr-flip__item--5 { animation-delay: calc(var(--zr-t0) + .61s); }
html.zr-intro .zr-flip__item--6 { animation-delay: calc(var(--zr-t0) + .70s); }
@media (min-width: 1101px) {
	.zr-mv__inner { min-height: 0; align-items: stretch; }
	.zr-mv__image { display: block; align-self: start; }
	.zr-mv__catch { display: grid; grid-template-columns: auto auto; justify-content: start; align-content: center; font-size: min(7.4vw, 9rem); line-height: 1.15; padding: 2rem 1.5rem 2rem 2.5rem; }
	.zr-mv__text { min-height: 100%; }
}
@media (max-width: 1100px) and (min-width: 641px) {
	.zr-mv__image { border-top: 1px solid var(--zr-line); }
}
@media (max-width: 640px) {
	.zr-flip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zr-flip__item--5, .zr-flip__item--6 { display: none; }
	.zr-flip__item:nth-child(3n) { border-right: 1px solid var(--zr-line); }
	.zr-flip__item:nth-child(2n) { border-right: 0; }
	.zr-flip__item:nth-child(n+3) { border-bottom: 0; }
	.zr-flip__item:nth-child(-n+2) { border-bottom: 1px solid var(--zr-line); }
	.zr-mv__image { border-bottom: 1px solid var(--zr-line); }
}
@media (prefers-reduced-motion: reduce) { .zr-flip__item .zr-flip__face { animation: none !important; } }
.zr-mv__br { display: none; }
@media (min-width: 1101px) {
	.zr-mv__catch { display: block; margin: auto 0; }
	.zr-mv__catch > .zr-mv__line { display: inline-block; }
	.zr-mv__br { display: inline; }
}

/* v0.9.31: entry button right after the selection flow */
.zr-env__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 3.5rem; padding: 2rem 2.25rem; border: 1px solid var(--zr-line); border-radius: 1.25rem; background: #fff; }
.zr-env__cta-lead { margin: 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.7; color: var(--zr-ink); }
.zr-env__cta-actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
@media (max-width: 640px) { .zr-env__cta { flex-direction: column; align-items: stretch; padding: 1.5rem 1.25rem; margin-top: 2.5rem; } .zr-env__cta .zr-btn { justify-content: center; } }
@media (max-width: 640px) { .zr-env__cta-actions { flex-direction: column; } }

/* v0.9.43: small subtitle under a position title (「サポーター／お客様にAI活用やAX化の支援ができる人材」) */
.zr-job__sub { display: block; margin-top: .25rem; font-size: .9375rem; font-weight: 700; line-height: 1.6; letter-spacing: .02em; color: #1f3a4d; }

/* v0.9.43: after the opening (or when it is skipped) the hero is simply in its final state — no half-played intro */
html.zr-done .zr-mv__in, html.zr-done .zr-mv__nav .zr-btn, html.zr-done .zr-header, html.zr-done .zr-flip__item { animation: none !important; opacity: 1; transform: none; translate: none; clip-path: none; }
html.zr-done .zr-header.is-hidden { transform: translateY(-4.0625rem); }
html.zr-done .zr-mark { animation: none !important; background-size: 100% 100%; }

/* v0.9.47 safety net: recruit.js adds .is-tiles-on to the hero after the opening (or after 4.5s at the latest) —
   the photo tiles are then visible whatever happened to the intro animations */
.zr-mv.is-tiles-on .zr-flip__item { opacity: 1 !important; transform: none !important; animation: none !important; }

/* v0.9.48 (owner: あの部分が変に重なってる): MESSAGE heading accent = one clean yellow circle sized to the text,
   inside the heading box behind the first character (the reveal mask clip-path never cuts it) */
.zr-about__title::before { content: ""; position: absolute; z-index: -1; left: 0; top: .1em; width: 1.05em; aspect-ratio: 1; border-radius: 50%; background: var(--zr-yellow); opacity: .9; pointer-events: none; }