/* ============================================================
   Careers（採用）。washi.css の上に重ねる。2026-10 に版画を足した
   なぜ働くのか（右に版画）→ 得られるもの（版画つき 2×2）→ カルチャー
   → 募集中のポジション（職種ごとの版画）→ 選考フロー（4場面の絵巻）→ 応募
   ============================================================ */

/* なぜ GENSHI AI で働くのか：左に文、右に版画 */
.cr-why-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: center; }
.wz .cr-why-grid .story-content { max-width: none; }
.cr-why-art { margin: 0; max-width: 440px; width: 100%; justify-self: end; }
.cr-why-art img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 40px 80px -50px rgba(70, 30, 0, .6); }

/* 得られるもの：版画を上にのせたカードを 2×2 で */
.wz .cr-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.wz .cr-offer { padding: 0; overflow: hidden; text-align: left; }
.cr-offer figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 1px solid var(--line); }
.cr-offer figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--ease); }
.cr-offer:hover figure img { transform: scale(1.05); }
.cr-offer-body { padding: 26px 32px 32px; }
.wz .cr-offer-body p { font-size: 1rem; line-height: 1.95; color: var(--body); }

/* 募集中のポジション：「+」の丸の代わりに職種ごとの版画 */
.wz .cr-role { width: 140px; height: 140px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--washi); }
.cr-role img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.cr-roles .team-card:hover .cr-role img { transform: scale(1.06); }

/* 選考フロー：4つの場面の絵巻を、4つの手順の上に。巻物をひらくように左から出す */
.cr-flow-art { margin: 0 0 32px; }
.cr-flow-art img { width: 100%; height: auto; display: block; border-radius: 6px; clip-path: inset(0 100% 0 0); transition: clip-path 2.4s cubic-bezier(.6, .05, .2, 1) .2s; }
.cr-flow-art.is-in img { clip-path: inset(0 0 0 0); }
.cr-flow-scene { display: none; }

@media (max-width: 900px) {
    .cr-why-grid { grid-template-columns: 1fr; gap: 40px; }
    .cr-why-art { justify-self: start; max-width: 420px; }
    .wz .cr-role { margin: 0 auto; width: 120px; height: 120px; }
    /* 狭い画面では絵巻を分けて、各手順のカードに1場面ずつ */
    .cr-flow-art { display: none; }
    .wz .approach-grid--flow .approach-item { overflow: hidden; }
    .cr-flow-scene { display: block; aspect-ratio: 4 / 3; margin: -2rem -2rem 1.5rem; border-bottom: 1px solid var(--line); background: url(../img/pages/careers-flow-2400.webp) no-repeat; background-size: 400% auto; background-position: calc(var(--n, 0) * 100% / 3) 58%; }
}

@media (max-width: 640px) {
    .wz .cr-offer-grid { grid-template-columns: 1fr; }
    .cr-offer-body { padding: 22px 24px 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .cr-flow-art img { clip-path: none; transition: none; }
    .cr-offer figure img, .cr-role img { transition: none; }
}