@charset "UTF-8";

/* =========================================================================
   Stellaxis Consulting — built to the XD artboards
   Desktop artboard: 1920 x 12205   Mobile artboard: 390 x 11970
   1rem = 10 design px, so `--px` (0.1rem) == 1 design pixel at any width.
   ========================================================================= */

/* Canela Deck Light substitute — full variable axes (SOFT / WONK / opsz) */
@font-face {
  font-family: "Fraunces";
  src: url("../public/fonts/Fraunces-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --px: 0.1rem;

  --navy: #2a3442;
  --bg: #f4f5f6;
  --beige: #a29888;
  --muted: #b4b4b4;
  --hair: #707070;
  --card-line: #5f5f5f;

  /* XD fonts (ABOUT / sitewide):
     Canela Deck Trial Light → Fraunces (variable, soft)
     Optima Regular          → Tenor Sans
     A1 Mincho Std Bold      → Shippori Mincho B1
     Zen Kaku Gothic New     → Zen Kaku Gothic New (Google Fonts) */
  --f-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", meiryo, sans-serif;
  --f-mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
  --f-display: "Fraunces", "Canela Deck", "Cormorant Garamond", "Times New Roman", serif;
  --f-en: "Tenor Sans", "Optima", Candara, "Gill Sans MT", "Trebuchet MS", sans-serif;
}

/* XD: Optima for English display labels; Zen Kaku for nav / JP / dates */
.btn__en,
.eyebrow,
.ty-en-xl,
.ty-en-l,
.ty-en-m,
.ty-en-s,
.ty-en-xs,
.icard__tag,
.icard__more,
.stack-en {
  font-family: var(--f-en);
  font-weight: 400;
  font-style: normal;
}

html {
  font-size: calc(100vw / 192);
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

@media (min-width: 1920px) {
  html { font-size: 10px; }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0 auto;
  max-width: 1920px;
  background: var(--bg);
  color: var(--navy);
  font-family: var(--f-jp);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* continue footer navy below the document (overscroll / short viewports) */
  box-shadow: 0 100vmax 0 0 var(--navy);
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd, address {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
}

ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* the two artboards break several headlines at different points, so each
   variant ships in the markup and the wrong one is switched off */
.sp-only { display: none !important; }

/* ---------------------------------------------------------- primitives -- */

/* absolutely-placed box: --x/--y/--w/--h are raw design pixels */
.a {
  position: absolute;
  left: calc(var(--x, 0) * var(--px));
  top: calc(var(--y, 0) * var(--px));
}
.a.w { width: calc(var(--w) * var(--px)); }
.a.h { height: calc(var(--h) * var(--px)); }

/* baseline-anchored text: --y is the design baseline of the first line */
.bl {
  position: absolute;
  left: calc(var(--x, 0) * var(--px));
  top: calc((var(--y) - (var(--lh) - var(--fs)) / 2 - 0.86 * var(--fs)) * var(--px));
  font-size: calc(var(--fs) * var(--px));
  line-height: calc(var(--lh) * var(--px));
}
/* --x is the design centre, so the box must not be clipped by the right edge */
.bl.mid { transform: translateX(-50%); text-align: center; white-space: nowrap; }

/* top-anchored text box: --y is the design top of the text frame */
.tx {
  position: absolute;
  left: calc(var(--x, 0) * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(var(--w) * var(--px));
  font-size: calc(var(--fs) * var(--px));
  line-height: calc(var(--lh) * var(--px));
}

.sec {
  position: relative;
  height: calc(var(--h) * var(--px));
  overflow: hidden;
}

.cover { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ type ----- */

/* Tuned toward Canela Deck Light: light weight, mild softness, no wonk */
.ty-display {
  --fs: 101; --lh: 126;
  font-family: var(--f-display);
  font-weight: 350;
  font-style: normal;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 35, "WONK" 0, "opsz" 144;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.ty-display-s {
  --fs: 86; --lh: 107;
  font-family: var(--f-display);
  font-weight: 350;
  font-style: normal;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 35, "WONK" 0, "opsz" 144;
  letter-spacing: -0.01em;
}
.ty-h2        { --fs: 48;  --lh: 80;  font-family: var(--f-mincho); font-weight: 700; }
.ty-en-xl     { --fs: 64;  --lh: 77;  font-family: var(--f-en); font-weight: 400; letter-spacing: 0.04em; }
.ty-en-l      { --fs: 32;  --lh: 77;  font-family: var(--f-en); font-weight: 400; letter-spacing: 0.04em; }
.ty-en-m      { --fs: 24;  --lh: 77;  font-family: var(--f-en); font-weight: 400; letter-spacing: 0.04em; }
.ty-en-s      { --fs: 16;  --lh: 35;  font-family: var(--f-en); font-weight: 400; letter-spacing: 0.05em; }
.ty-en-xs     { --fs: 14;  --lh: 27;  font-family: var(--f-en); font-weight: 400; letter-spacing: 0.04em; }
.ty-mincho-s  { --fs: 20;  --lh: 32;  font-family: var(--f-mincho); font-weight: 700; }

.ty-lead      { --fs: 32; --lh: 64; font-weight: 400; }
.ty-copy32    { --fs: 32; --lh: 48; font-weight: 500; letter-spacing: 0.05em; }
.ty-tag24     { --fs: 24; --lh: 80; font-weight: 400; }
.ty-item24    { --fs: 24; --lh: 64; font-weight: 500; letter-spacing: 0.05em; }
.ty-card24    { --fs: 24; --lh: 35; font-weight: 500; }
.ty-nav20     { --fs: 20; --lh: 32; font-weight: 500; }
.ty-btn20     { --fs: 20; --lh: 35; font-weight: 500; }
.ty-news20    { --fs: 20; --lh: 64; font-weight: 400; letter-spacing: 0.05em; }
.ty-sub18     { --fs: 18; --lh: 64; font-weight: 400; letter-spacing: 0.05em; }
.ty-body16    { --fs: 16; --lh: 24; font-weight: 400; }
.ty-date16    { --fs: 16; --lh: 64; font-weight: 500; letter-spacing: 0.05em; }
.ty-foot16    { --fs: 16; --lh: 80; font-weight: 400; }
.ty-foot16b   { --fs: 16; --lh: 80; font-weight: 700; }

.c-white { color: #fff; }
.c-navy  { color: var(--navy); }
.c-muted { color: var(--muted); }
.o-46 { opacity: 0.4649; }
.o-50 { opacity: 0.5; }
.o-25 { opacity: 0.25; }

/* --------------------------------------------------------- ornaments --- */

.sparkle {
  width: calc(28.53 * var(--px));
  height: calc(28 * var(--px));
  flex: none;
  align-self: flex-start;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.53 28'%3E%3Cpath fill='white' d='M14.298 28c-.758-5.258.024-11.508-5.895-12.914C6.095 14.538 3.753 14.356 1.345 14.191L0 13.975c2.843-.152 5.687-.291 8.508-.986 2.359-.582 3.993-2.158 4.642-4.488C13.782 6.027 14.038 3.555 14.088.943L14.385 0c.125 2.878.29 5.611.972 8.335.605 2.417 2.26 4.05 4.677 4.649 2.773.687 5.568.842 8.495.985-.294.084-.828.215-1.158.232-2.531.13-4.972.322-7.387.94C14.322 16.591 14.935 22.709 14.298 28Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.53 28'%3E%3Cpath fill='white' d='M14.298 28c-.758-5.258.024-11.508-5.895-12.914C6.095 14.538 3.753 14.356 1.345 14.191L0 13.975c2.843-.152 5.687-.291 8.508-.986 2.359-.582 3.993-2.158 4.642-4.488C13.782 6.027 14.038 3.555 14.088.943L14.385 0c.125 2.878.29 5.611.972 8.335.605 2.417 2.26 4.05 4.677 4.649 2.773.687 5.568.842 8.495.985-.294.084-.828.215-1.158.232-2.531.13-4.972.322-7.387.94C14.322 16.591 14.935 22.709 14.298 28Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.arrow {
  display: block;
  width: calc(16 * var(--px));
  height: calc(5 * var(--px));
  flex: none;
  background: currentColor;
  /* Path taken from XD compound shape (16 x 5) */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 5'%3E%3Cpath fill='white' d='M11.6945 3.022H0V1.978h11.6945V0L16 2.5 11.6945 5V3.022Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 5'%3E%3Cpath fill='white' d='M11.6945 3.022H0V1.978h11.6945V0L16 2.5 11.6945 5V3.022Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform 0.3s ease;
}

/* eyebrow = sparkle + latin label, sitting on the design's mark position */
.eyebrow {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--px));
  height: calc(28 * var(--px));
  font-family: var(--f-en);
  font-size: calc(24 * var(--px));
  line-height: 1;
}

/* section title stack used for CASES / INSIGHTS / NEWS / ABOUT / RECRUIT */
.stack-en { letter-spacing: 0; }

/* ------------------------------------------------------------ header --- */

.hdr {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  max-width: 1920px;
  height: calc(122 * var(--px));
  z-index: 100;
  pointer-events: none;
}

.hdr__bar {
  position: absolute;
  left: calc(128 * var(--px));
  top: calc(40 * var(--px));
  width: calc(1664 * var(--px));
  height: calc(82 * var(--px));
  background: #fff;
  pointer-events: auto;
  transition: box-shadow 0.3s ease;
}

.is-scrolled .hdr__bar { box-shadow: 0 calc(4 * var(--px)) calc(24 * var(--px)) rgba(42, 52, 66, 0.1); }

.hdr__logo {
  position: absolute;
  left: calc(36 * var(--px));
  top: calc(17 * var(--px));
  width: calc(197 * var(--px));
  height: calc(48 * var(--px));
  color: var(--navy);
}
.hdr__logo svg, .hdr__logo img { width: 100%; height: 100%; }

.hdr__link {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc((51 - (32 - 20) / 2 - 0.86 * 20) * var(--px));
  /* XD: ZenKakuGothicNew-Medium / 20 / lh 32 */
  font-family: var(--f-jp);
  font-size: calc(20 * var(--px));
  line-height: calc(32 * var(--px));
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.hdr__link:hover { opacity: 0.6; }
.hdr__link[aria-current="page"] { color: var(--beige); }
.hdr__ja,
.hdr__cta-ja,
.hdr__legal { display: none; }

/* wrappers exist for the SP drawer; on desktop they must not box the links */
.hdr__nav-main,
.hdr__nav-actions { display: contents; }

.hdr__cta {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(18 * var(--px));
  width: calc(195 * var(--px));
  height: calc(47 * var(--px));
  border-radius: calc(24 * var(--px));
  color: #fff;
  font-size: calc(20 * var(--px));
  line-height: calc(32 * var(--px));
  font-weight: 500;
  display: grid;
  place-items: center;
  transition: opacity 0.2s ease;
}
.hdr__cta:hover { opacity: 0.85; }
.hdr__cta--recruit { background: var(--beige); }
.hdr__cta--contact { background: var(--navy); }

.hdr__burger { display: none; }

/* -------------------------------------------------------------- CTA ---- */

/* 387 x 86 outlined / filled action used across every section */
.btn {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(387 * var(--px));
  height: calc(86 * var(--px));
  display: block;
  color: var(--navy);
  border: 1px solid currentColor;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn--solid { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--light { color: #fff; }

.btn__en {
  position: absolute;
  left: calc(33 * var(--px));
  top: calc((35 - (35 - 16) / 2 - 0.86 * 16) * var(--px));
  font-family: var(--f-en);
  font-size: calc(16 * var(--px));
  line-height: calc(35 * var(--px));
  letter-spacing: 0.05em;
  opacity: 0.4649;
}
.btn__ja {
  position: absolute;
  left: calc(33 * var(--px));
  top: calc((64 - (35 - 20) / 2 - 0.86 * 20) * var(--px));
  font-size: calc(20 * var(--px));
  line-height: calc(35 * var(--px));
  font-weight: 500;
  white-space: nowrap;
}
.btn__circle {
  position: absolute;
  left: calc(323 * var(--px));
  top: calc(28 * var(--px));
  width: calc(30 * var(--px));
  height: calc(30 * var(--px));
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.btn:hover .arrow { transform: translateX(calc(4 * var(--px))); }
.btn--light:hover { background: #fff; color: var(--navy); }
.btn--outline-dark:hover { background: var(--navy); color: #fff; }
.btn--solid:hover { background: #1c2531; }

/* round carousel controls */
.round {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(var(--d, 40) * var(--px));
  height: calc(var(--d, 40) * var(--px));
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.round--prev .arrow { transform: rotate(180deg); }
.round:hover { background: currentColor; }
.round:hover .arrow { background: var(--bg); }
.round[disabled] { opacity: 0.3; cursor: default; }
.round[disabled]:hover { background: none; }
.round[disabled]:hover .arrow { background: currentColor; }

/* ============================== HERO ==================================== */

.hero { --h: 1080; background: #fff; }

.hero__star {
  --x: 311; --y: 0; --w: 1219; --h: 1076;
  mix-blend-mode: darken;
  pointer-events: none;
}
.hero__star img,
.hero__star-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  transition: opacity 0.7s ease;
}
.fx-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  display: block;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: normal;
  transition: opacity 0.7s ease;
}
body.is-fx-live .fx-particles { opacity: 1; }
body.is-fx-live .hero__star-img,
body.is-fx-live .mission__visual,
body.is-fx-live .service__visual,
body.is-fx-live .bigcta__visual { opacity: 0; }
.hero__title,
.hero__lead,
.hero .btn,
.mission__eyebrow,
.mission__title,
.mission__body,
.service__eyebrow,
.service__title,
.service__list,
.service__cta,
.bigcta__en,
.bigcta__ja { z-index: 5; }

.hero__title { --x: 140; --y: 515; }
.hero__lead  { --x: 140; --y: 732; }

/* ============================== MISSION ================================= */

.mission { --h: 1226; background: #fff; }

.mission__visual {
  --x: 805; --y: 240; --w: 1084; --h: 708;
  mix-blend-mode: darken;
  pointer-events: none;
}
.mission__visual img { width: 100%; height: 100%; object-fit: contain; }

.mission__eyebrow { --x: 289.7; --y: 126; }
.mission__title   { --x: 288; --y: 236; }
.mission__body    { --x: 288; --y: 402; --w: 1344; }

/* ============================== SERVICE ================================= */

.service {
  --h: auto;
  height: auto;
  min-height: calc(1664 * var(--px));
  padding-bottom: calc(160 * var(--px));
  background: var(--navy);
  color: #fff;
  overflow: visible;
}

/* Infinity graphic is desktop-removed in XD 260919; kept for mobile */
.service__visual { display: none; }

.service__eyebrow { --x: 288; --y: 160; }
.service__title   { --x: 288; --y: 270; }
.service__cta     { --x: 1245; --y: 258; z-index: 5; }

/* List starts under the heading; 1344px column at x=288 */
.service__list {
  position: relative;
  z-index: 5;
  margin: 0 calc(288 * var(--px));
  padding-top: calc(447 * var(--px));
  width: calc(1344 * var(--px));
}

.svc {
  position: relative;
  border-bottom: 1px solid var(--muted);
}
.svc__head {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: calc(147 * var(--px));
  padding: calc(16 * var(--px)) 0;
  text-align: left;
  list-style: none;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  gap: 0;
}
.svc[open] .svc__head {
  min-height: calc(133 * var(--px));
  padding-top: calc(8 * var(--px));
  padding-bottom: calc(8 * var(--px));
}
.svc__head::-webkit-details-marker { display: none; }
.svc__head:focus,
.svc__head:focus-visible { outline: none; box-shadow: none; }

.svc__no {
  flex: 0 0 calc(54 * var(--px));
  font-family: var(--f-en);
  font-size: calc(20 * var(--px));
  line-height: 1;
  color: #fff;
}

.svc__thumb {
  display: none;
  flex: 0 0 calc(249 * var(--px));
  width: calc(249 * var(--px));
  height: calc(133 * var(--px));
  margin-right: calc(32 * var(--px));
  border-radius: calc(8 * var(--px));
  overflow: hidden;
  background: #fff;
}
.svc[open] .svc__thumb { display: block; }
.svc__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc__titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(8 * var(--px));
}

.svc__name {
  font-size: calc(64 * var(--px));
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.svc__head:hover .svc__name { opacity: 0.7; }

.svc__en {
  font-family: var(--f-en);
  font-size: calc(20 * var(--px));
  line-height: 1;
  font-weight: 400;
  color: #fff;
}

.svc__plus {
  position: relative;
  flex: 0 0 calc(37 * var(--px));
  margin-left: auto;
  width: calc(37 * var(--px));
  height: calc(37 * var(--px));
}
.svc__plus::before,
.svc__plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transition: transform 0.25s ease;
}
.svc__plus::before {
  width: 100%;
  height: calc(2 * var(--px));
  transform: translate(-50%, -50%);
}
.svc__plus::after {
  width: calc(2 * var(--px));
  height: 100%;
  transform: translate(-50%, -50%);
}
.svc[open] .svc__plus::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.svc[open] .svc__plus::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.svc__panel {
  overflow: hidden;
  padding: calc(16 * var(--px)) 0 calc(32 * var(--px)) calc(54 * var(--px));
}
.svc:not([open]) .svc__panel { display: none; }

.svc__desc {
  font-size: calc(16 * var(--px));
  line-height: calc(24 * var(--px));
  max-width: calc(1175 * var(--px));
}

.svc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--px));
  margin-top: calc(32 * var(--px));
}
.svc__tag {
  display: inline-flex;
  align-items: center;
  height: calc(40 * var(--px));
  padding: 0 calc(16 * var(--px));
  border-radius: calc(4 * var(--px));
  background: #d9e0e9;
  color: var(--navy);
  font-size: calc(16 * var(--px));
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}

/* ============================= STRENGTHS ================================ */

.strengths {
  --h: 1290;
  background: var(--bg);
  /* strength icon circles sit 8px above their cards */
  overflow: visible;
}

.strengths__eyebrow { --x: 289.7; --y: 202; }
.strengths__title   { --x: 288; --y: 312; }

.strengths__photo {
  --x: 288; --y: 422; --w: 519; --h: 712;
  border-radius: calc(16 * var(--px));
  overflow: hidden;
}
.strengths__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Design crop: left person + hallway, man center-right */
  object-position: 22% 34%;
}

.stcard {
  position: absolute;
  left: calc(858 * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(774 * var(--px));
  height: calc(var(--h) * var(--px));
  background: #fff;
}
/* Design: icon circle inside card left; title beside it; desc flush left under icon */
.stcard__icon {
  position: absolute;
  left: calc(32 * var(--px));
  top: calc(24 * var(--px));
  width: calc(56 * var(--px));
  height: calc(56 * var(--px));
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
}
.stcard__icon img,
.stcard__icon svg {
  display: block;
  width: calc(26 * var(--px));
  height: calc(26 * var(--px));
  object-fit: contain;
}
.stcard__title {
  position: absolute;
  left: calc(104 * var(--px));
  top: calc(24 * var(--px));
  height: calc(56 * var(--px));
  display: flex;
  align-items: center;
  font-family: var(--f-jp);
  font-size: calc(24 * var(--px));
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
/* Design: body copy starts at card left (same as icon), not indented under title */
.stcard__desc {
  position: absolute;
  left: calc(32 * var(--px));
  top: calc(100 * var(--px));
  width: calc(710 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: calc(24 * var(--px));
}

/* ============================== CASES =================================== */

.cases { --h: 1417; background: #fff; }

.cases__en { --x: 290; --y: 186; }
.cases__ja { --x: 290; --y: 237; }
.cases__prev { --x: 1536; --y: 247; }
.cases__next { --x: 1592; --y: 247; }

.cases__viewport {
  position: absolute;
  left: calc(288 * var(--px));
  top: calc(330 * var(--px));
  width: calc(1632 * var(--px));
  overflow: hidden;
}
.cases__track {
  display: flex;
  gap: calc(40 * var(--px));
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.case {
  flex: none;
  position: relative;
  display: block;
  width: calc(933 * var(--px));
  height: calc(765 * var(--px));
}
.case__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(527 * var(--px));
  border-radius: calc(16 * var(--px));
  overflow: hidden;
}
.case__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Design crop: two men + Quest Research mark (woman partially cropped left) */
  object-position: 68% 45%;
  transition: transform 0.6s ease;
}
.case:hover .case__img img { transform: scale(1.04); }
.case__date {
  position: absolute;
  left: 0;
  top: calc((586 - (64 - 16) / 2 - 0.86 * 16) * var(--px));
  /* XD: ZenKakuGothicNew-Medium / 16 */
  font-family: var(--f-jp);
  font-size: calc(16 * var(--px));
  line-height: calc(64 * var(--px));
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.5;
}
.case__title {
  position: absolute;
  left: 0;
  top: calc(607 * var(--px));
  width: calc(933 * var(--px));
  font-size: calc(32 * var(--px));
  line-height: calc(48 * var(--px));
  font-weight: 500;
  letter-spacing: 0.05em;
}
.case__tags {
  position: absolute;
  left: 0;
  top: calc((740 - (64 - 20) / 2 - 0.86 * 20) * var(--px));
  font-size: calc(20 * var(--px));
  line-height: calc(64 * var(--px));
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.5;
}
.case__tags span { position: absolute; left: 0; white-space: nowrap; }
.case__tags span + span { left: calc(301 * var(--px)); }

.cases__cta { --x: 288; --y: 1156; }

/* ============================= INSIGHTS ================================= */

.insights { --h: 1072; background: var(--navy); color: #fff; }

.insights__en { --x: 290; --y: 188; }
.insights__ja { --x: 290; --y: 239; }
.insights__prev { --x: 1536; --y: 249; }
.insights__next { --x: 1592; --y: 249; }

.insights__viewport {
  position: absolute;
  left: calc(288 * var(--px));
  top: calc(329 * var(--px));
  width: calc(1632 * var(--px));
  overflow: hidden;
}
.insights__track {
  display: flex;
  gap: calc(24 * var(--px));
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.icard {
  flex: none;
  position: relative;
  width: calc(432 * var(--px));
  height: calc(400 * var(--px));
  background: #fff;
  color: var(--navy);
  border-radius: calc(8.38 * var(--px));
  overflow: hidden;
}
.icard__img {
  position: absolute;
  left: calc(18 * var(--px));
  top: calc(18 * var(--px));
  width: calc(396 * var(--px));
  height: calc(217 * var(--px));
  border-radius: calc(8 * var(--px));
  overflow: hidden;
}
.icard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.icard:hover .icard__img img { transform: scale(1.05); }
/* XD centres this label on x=52 rather than left-aligning it */
.icard__tag {
  position: absolute;
  left: calc(52 * var(--px));
  top: calc((267.5 - (27 - 14) / 2 - 0.86 * 14) * var(--px));
  transform: translateX(-50%);
  font-family: var(--f-en);
  font-size: calc(14 * var(--px));
  line-height: calc(27 * var(--px));
  white-space: nowrap;
  opacity: 0.5;
}
.icard__title {
  position: absolute;
  left: calc(26 * var(--px));
  top: calc(279 * var(--px));
  width: calc(379 * var(--px));
  font-size: calc(20 * var(--px));
  line-height: calc(32 * var(--px));
  font-weight: 500;
}
.icard__more {
  position: absolute;
  left: calc(350.3 * var(--px));
  top: calc((379.5 - (27 - 14) / 2 - 0.86 * 14) * var(--px));
  display: flex;
  align-items: center;
  gap: calc(7 * var(--px));
  font-family: var(--f-en);
  font-size: calc(14 * var(--px));
  line-height: calc(27 * var(--px));
}

.insights__cta { --x: 288; --y: 809; }

/* =============================== NEWS =================================== */

/* XD 260919: 321px page-bg gap after INSIGHTS, then white 1764 band */
.news {
  --h: 1764;
  background: #fff;
  margin-top: calc(321 * var(--px));
}

.news__en { --x: 288; --y: 295; }
.news__ja { --x: 288; --y: 346; }
.news__cta { --x: 288; --y: 409; }

.news__list {
  position: absolute;
  left: calc(831 * var(--px));
  top: calc(238 * var(--px));
  width: calc(801 * var(--px));
}
.news__item {
  position: relative;
  display: block;
  height: calc(105 * var(--px));
  /* Design: short underline under title — not full-width row rules */
  border: none;
  padding: calc(16 * var(--px)) calc(56 * var(--px)) 0 0;
  box-sizing: border-box;
}
.news__date {
  display: block;
  /* XD: ZenKakuGothicNew-Medium / 16 / lh 64 — visual gap to title ≈ 8–10px */
  font-family: var(--f-jp);
  font-size: calc(16 * var(--px));
  line-height: calc(24 * var(--px));
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.5;
  margin: 0 0 calc(8 * var(--px));
}
.news__title {
  position: relative;
  display: block;
  /* XD: ZenKakuGothicNew-Regular / 20 */
  font-family: var(--f-jp);
  font-size: calc(20 * var(--px));
  line-height: calc(32 * var(--px));
  font-weight: 400;
  letter-spacing: 0.05em;
  transition: opacity 0.2s ease;
  padding-bottom: calc(14 * var(--px));
}
/* Design: light full-width hairline + short dark accent on the left */
.news__title::before {
  content: "";
  position: absolute;
  left: 0;
  right: calc(-56 * var(--px)); /* extend under arrow column */
  bottom: 0;
  height: 1px;
  background: rgba(42, 52, 66, 0.15);
}
.news__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  /* XD path 80: bold accent width 32.42 */
  width: calc(32 * var(--px));
  height: 1px;
  background: var(--navy);
  z-index: 1;
}
.news__item:hover .news__title { opacity: 0.6; }
.news__go {
  position: absolute;
  right: 0;
  top: 50%;
  width: calc(32 * var(--px));
  height: calc(32 * var(--px));
  margin-top: calc(-16 * var(--px));
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.news__item:hover .news__go .arrow { transform: translateX(calc(3 * var(--px))); }

/* ============================== RECRUIT ================================= */

.recruit {
  position: absolute;
  left: calc(288 * var(--px));
  top: calc(var(--top, 1061) * var(--px));
  width: calc(1344 * var(--px));
  height: calc(515 * var(--px));
  border-radius: calc(16 * var(--px));
  background: var(--beige);
  color: #fff;
  overflow: hidden;
}
.recruit__en { --x: 95; --y: 155; }
.recruit__ja { --x: 95; --y: 206; }
.recruit__copy { --x: 95; --y: 277; }
.recruit__go {
  position: absolute;
  left: calc(95 * var(--px));
  top: calc(378 * var(--px));
  width: calc(65 * var(--px));
  height: calc(65 * var(--px));
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.recruit__go .arrow { width: calc(20 * var(--px)); height: calc(6 * var(--px)); }
.recruit:hover .recruit__go { background: #fff; }
.recruit:hover .recruit__go .arrow { background: var(--beige); }

.recruit__collage { position: absolute; inset: 0; pointer-events: none; }
.recruit__collage span {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(247 * var(--px));
  height: calc(308 * var(--px));
  overflow: hidden;
}
.recruit__collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* XD 260919 collage crops (247×308 cover) */
.recruit__shot--1 img { object-position: 34% 40%; } /* standing pair at the desk */
.recruit__shot--2 img { object-position: 68% 36%; } /* person by the window */
.recruit__shot--5 img { object-position: 78% 88%; } /* tablet on the desk */
.recruit__shot--4 img { object-position: 48% 40%; } /* Stellaxis notebook */
.recruit__shot--3 img { object-position: 22% 40%; } /* three standing / window */

/* ========================== ABOUT LINKS + CTA =========================== */

.about-links {
  --h: 1549;
  background: var(--bg);
  /* star graphic extends slightly past section bottom in XD */
  overflow: visible;
}

.about-links__en { --x: 288; --y: 201; }
.about-links__ja { --x: 288; --y: 252; }

/* SP-only NEWS CTA between cards and Make IT — never show on desktop */
.about-links__news { display: none; }

.lcard {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(659 * var(--px));
  height: calc(144 * var(--px));
  border-radius: calc(8 * var(--px));
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lcard:hover { transform: translateY(calc(-4 * var(--px))); box-shadow: 0 calc(8 * var(--px)) calc(24 * var(--px)) rgba(42, 52, 66, 0.08); }
.lcard__img {
  position: absolute;
  left: calc(14 * var(--px));
  top: calc(14 * var(--px));
  width: calc(194 * var(--px));
  height: calc(116 * var(--px));
  border-radius: calc(8 * var(--px));
  overflow: hidden;
  background: var(--navy);
}
.lcard__img img { width: 100%; height: 100%; object-fit: cover; }
.lcard--company img { object-position: 50% 40%; }
.lcard--message img { object-position: 50% 28%; }
.lcard--philosophy img { object-position: 50% 48%; }
.lcard--member img { object-position: 38% 42%; }
.lcard__en {
  position: absolute;
  left: calc(232 * var(--px));
  top: calc((58 - (35 - 16) / 2 - 0.86 * 16) * var(--px));
  font-family: var(--f-en);
  font-size: calc(16 * var(--px));
  line-height: calc(35 * var(--px));
  letter-spacing: 0.05em;
  opacity: 0.4649;
}
.lcard__ja {
  position: absolute;
  left: calc(232 * var(--px));
  top: calc((94 - (35 - 24) / 2 - 0.86 * 24) * var(--px));
  font-size: calc(24 * var(--px));
  line-height: calc(35 * var(--px));
  font-weight: 500;
}
.lcard__go {
  position: absolute;
  left: calc(599 * var(--px));
  top: calc(57 * var(--px));
  width: calc(30 * var(--px));
  height: calc(30 * var(--px));
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.lcard:hover .lcard__go .arrow { transform: translateX(calc(3 * var(--px))); }

/*
 * XD AABB 1226×953 at (347,646); content 1091×726 centered inside
 * (PNG is already tilted — do not add CSS rotate).
 */
.bigcta__visual {
  --x: 415; --y: 759; --w: 1091; --h: 726;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.bigcta__visual img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
/* XD: EN y=1099 (Canela 86/107), JA y=1204 (32/80), centered x=960 */
.bigcta__en {
  --x: 960; --y: 1099;
  letter-spacing: 0.04em;
  font-weight: 300;
}
.bigcta__ja { --x: 960; --y: 1204; --fs: 32; --lh: 80; }

/* ============================== FOOTER ================================== */

.footer {
  --h: 786;
  position: relative;
  width: 100%;
  height: calc(var(--h) * var(--px));
  margin: 0;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}

.footer__logo {
  /* XD/Figma: mark+wordmark ~393×96, top aligned with CTAs at y=154 */
  position: absolute;
  left: calc(128 * var(--px));
  top: calc(154 * var(--px));
  width: calc(393 * var(--px));
  height: calc(96 * var(--px));
  color: #fff;
}
.footer__logo svg, .footer__logo img { width: 100%; height: 100%; }

.footer__cta1 { --x: 960; --y: 154; }
.footer__cta2 { --x: 1379; --y: 154; }

.footer__company { --x: 128; --y: 397.8; }
.footer__lbl { font-family: var(--f-en); --fs: 16; --lh: 77; opacity: 0.5; letter-spacing: 0.04em; text-transform: uppercase; }
.footer__addr-lbl { --x: 128; --y: 450.8; }
.footer__addr { --x: 128; --y: 477.8; --fs: 16; --lh: 24; }
.footer__mail-lbl { --x: 128; --y: 553.8; }
.footer__mail { --x: 128; --y: 580.8; --fs: 16; --lh: 24; }
.footer__mail a { transition: opacity 0.2s ease; }
.footer__mail a:hover { opacity: 0.6; }

/* desktop SNS row (XD y≈623, icon pitch ≈38) */
.footer__social {
  position: absolute;
  left: calc(128 * var(--px));
  top: calc(623 * var(--px));
  height: calc(18 * var(--px));
}
.footer__social a {
  position: absolute;
  top: 0;
  width: calc(18 * var(--px));
  height: calc(18 * var(--px));
  display: grid;
  place-items: center;
  color: #f7f7f6;
  transition: opacity 0.2s ease;
}
.footer__social a:hover { opacity: 0.7; }
.footer__social a svg { width: 100%; height: 100%; display: block; }
.footer__social a:nth-child(1) { left: 0; }
.footer__social a:nth-child(2) { left: calc(38 * var(--px)); }
.footer__social a:nth-child(3) { left: calc(77 * var(--px)); }
.footer__social a:nth-child(4) { left: calc(114 * var(--px)); }
.footer__social a:nth-child(5) { left: calc(154 * var(--px)); }

.footer__nav a { transition: opacity 0.2s ease; }
.footer__nav a:hover { opacity: 0.6; }

.footer__rule {
  position: absolute;
  left: 0;
  top: calc(696 * var(--px));
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}
/* XD: rule y=696, copyright baseline y=741, 45px navy to footer end (artboard flush) */
.footer__copy { --x: 960; --y: 741; --lh: 24; }

/* ======================= ABOUT PAGE ONLY ================================ */

.phero { --h: 917; background: var(--bg); }
.phero__star { --x: 681; --y: 0; --w: 1219; --h: 1076; mix-blend-mode: darken; pointer-events: none; }
.phero__star img { width: 100%; height: 100%; object-fit: contain; }
.phero__title { --x: 286; --y: 415; --fs: 100; --lh: 126; letter-spacing: 0.1em; }
.phero__ja { --x: 286; --y: 481; }
.phero__eyebrow { --x: 286; --y: 608; }

.ccard-panel { display: contents; }
.phero__eyebrow-sp { display: none; }

.ccard {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(660 * var(--px));
  width: calc(325 * var(--px));
  height: calc(84 * var(--px));
  background: #fff;
  border-radius: calc(8 * var(--px));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ccard:hover { transform: translateY(calc(-4 * var(--px))); box-shadow: 0 calc(8 * var(--px)) calc(20 * var(--px)) rgba(42, 52, 66, 0.08); }
.ccard__en {
  position: absolute;
  left: calc(32 * var(--px));
  top: calc((31 - (35 - 16) / 2 - 0.86 * 16) * var(--px));
  font-family: var(--f-en);
  font-size: calc(16 * var(--px));
  line-height: calc(35 * var(--px));
  letter-spacing: 0.05em;
  opacity: 0.4649;
}
.ccard__ja {
  position: absolute;
  left: calc(32 * var(--px));
  top: calc((62 - (35 - 20) / 2 - 0.86 * 20) * var(--px));
  font-size: calc(20 * var(--px));
  line-height: calc(35 * var(--px));
  font-weight: 500;
}
.ccard__go {
  position: absolute;
  left: calc(271 * var(--px));
  top: calc(30 * var(--px));
  width: calc(30 * var(--px));
  height: calc(30 * var(--px));
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.ccard:hover .ccard__go .arrow { transform: translateX(calc(3 * var(--px))); }

/* philosophy / vision / mission / value — one dark band, 917 → 3504 */
.philos { --h: 2587; background: var(--navy); color: #fff; }

.philos__en { --x: 288; --y: 191; }
.philos__ja { --x: 288; --y: 234; }
.philos__title { --x: 768; --y: 204; }
.philos__body { --x: 768; --y: 401; --w: 864; --fs: 24; --lh: 48; }
/* XD パス 8998: 1344×1 at (288, 1016), stroke #FFFFFF */
.philos__rule {
  position: absolute;
  left: calc(288 * var(--px));
  top: calc(1016 * var(--px));
  width: calc(1344 * var(--px));
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}

/* desktop: card wrappers don't create boxes — children keep absolute XD coords */
.mv-card { display: contents; }
.mv-card__rule { display: none; }
.value-card { display: contents; }

.mv-card__lbl,
.mv-eyebrow { --x: 288; }
.mv-block {
  position: absolute;
  left: calc(768 * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(864 * var(--px));
}
.mv-block h3 { font-size: calc(32 * var(--px)); line-height: calc(48 * var(--px)); font-weight: 500; letter-spacing: 0.05em; }
.mv-block p { margin-top: calc(22 * var(--px)); font-size: calc(20 * var(--px)); line-height: calc(40 * var(--px)); }
.mv-block__note { color: rgba(255, 255, 255, 0.62); }

.mv-checks {
  list-style: none;
  margin-top: calc(22 * var(--px));
}
.mv-checks li {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--px));
  font-size: calc(20 * var(--px));
  line-height: calc(40 * var(--px));
  color: #fff;
}
.mv-check {
  position: relative;
  flex: none;
  width: calc(18 * var(--px));
  height: calc(18 * var(--px));
  margin-top: calc(11 * var(--px));
  border-radius: calc(3 * var(--px));
  background: #785dc8;
}
.mv-check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 56%;
  height: 30%;
  border-left: calc(1.6 * var(--px)) solid #fff;
  border-bottom: calc(1.6 * var(--px)) solid #fff;
  transform: translate(-50%, -62%) rotate(-45deg);
}

.vcard {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(425 * var(--px));
  display: flex;
  flex-direction: column;
  text-align: left;
}
.vcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(344 * var(--px));
  margin-bottom: calc(18 * var(--px));
}
.vcard__num {
  font-family: var(--f-en);
  font-size: calc(40 * var(--px));
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--beige);
}
.vcard__icon {
  flex: none;
  width: calc(36 * var(--px));
  height: calc(36 * var(--px));
  color: rgba(255, 255, 255, 0.62);
}
.vcard__icon svg,
.vcard__icon img {
  width: 100%;
  height: 100%;
  display: block;
  /* navy-fill assets → white on PC dark band */
  filter: brightness(0) invert(1);
  opacity: 0.62;
}
.vcard__t {
  font-size: calc(20 * var(--px));
  line-height: calc(32 * var(--px));
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #fff;
}
.vcard__d {
  margin-top: calc(8 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: calc(28 * var(--px));
  color: rgba(255, 255, 255, 0.55);
}

/* message 3504 → 5734 — keep sign below body (do not raise onto last paragraph) */
.message { --h: 2230; background: var(--bg); }
.message__en { --x: 288; --y: 234; }
.message__ja { --x: 288; --y: 277; }
.message__photo { --x: 768; --y: 205; --w: 864; --h: 446; border-radius: calc(16 * var(--px)); overflow: hidden; }
.message__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.message__title { --x: 768; --y: 716; --w: 864; --fs: 48; --lh: 80; font-family: var(--f-mincho); font-weight: 700; }
.message__body { --x: 768; --y: 924; --w: 864; --fs: 24; --lh: 48; }
.message__body p + p { margin-top: calc(48 * var(--px)); }
.message__sign {
  /* XD グループ 3748 (vector 清水謙太朗), right edge kept at 1632 */
  --x: 1360; --y: 1970; --w: 272.4; --h: 87.6;
  background: none;
}
.message__sign img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* member 5443 → 6333 — two static profiles, no slider / More */
.member { --h: 890; background: #fff; }
.member__en { --x: 288; --y: 190; }
.member__ja { --x: 288; --y: 233; }

.mprof {
  position: absolute;
  top: calc(319 * var(--px));
  width: calc(656 * var(--px));
  height: calc(320 * var(--px));
  background: #f8fafb;
  border-radius: calc(8 * var(--px));
  overflow: hidden;
  color: #183044;
}
.mprof--1 { left: calc(288 * var(--px)); }
.mprof--2 { left: calc(976 * var(--px)); }
.mprof__photo {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(264 * var(--px));
  height: 100%;
  overflow: hidden;
  background: #e8eef1;
}
.mprof__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.mprof__role,
.mprof__name,
.mprof__en,
.mprof__label,
.mprof__body {
  position: absolute;
  left: calc(293 * var(--px));
  width: calc(339 * var(--px));
}
.mprof__role {
  top: calc(61 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: calc(24 * var(--px));
  font-weight: 500;
  color: #678092;
}
.mprof__name {
  top: calc(91 * var(--px));
  font-size: calc(24 * var(--px));
  line-height: calc(32 * var(--px));
  font-weight: 700;
}
.mprof__en {
  top: calc(123 * var(--px));
  font-size: calc(12 * var(--px));
  line-height: calc(18 * var(--px));
  color: #183044;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: calc(10 * var(--px));
  border-bottom: 1px solid rgba(24, 48, 68, 0.35);
}
.mprof__label {
  top: calc(166 * var(--px));
  font-size: calc(8 * var(--px));
  line-height: calc(12 * var(--px));
  font-weight: 700;
  letter-spacing: 0.08em;
}
.mprof__body {
  top: calc(181 * var(--px));
  font-size: calc(11 * var(--px));
  line-height: calc(20 * var(--px));
  color: #536875;
}

/* company 6333 → 7856 — 資本金 fits inside the original navy band */
.company { --h: 1523; background: var(--navy); color: #fff; }
.company__en { --x: 288; --y: 333; }
.company__ja { --x: 288; --y: 376; }
.company__table {
  position: absolute;
  left: calc(768 * var(--px));
  top: calc(305.24 * var(--px));
  width: calc(864 * var(--px));
  border-top: 1px solid rgba(153, 153, 153, 0.5);
}
.company__row {
  position: relative;
  display: flex;
  border-bottom: 1px solid rgba(153, 153, 153, 0.5);
  padding: calc(28 * var(--px)) 0;
  font-size: calc(16 * var(--px));
  line-height: calc(32 * var(--px));
  font-weight: 500;
  letter-spacing: 0.1em;
}
.company__row dt { flex: none; width: calc(194 * var(--px)); }
.company__map {
  position: absolute;
  left: calc(1391 * var(--px));
  top: calc(512 * var(--px));
  width: calc(216 * var(--px));
  height: calc(48 * var(--px));
  background: #fff;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: calc(12 * var(--px));
  padding-left: calc(19 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: calc(32 * var(--px));
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: opacity 0.2s ease;
}
.company__map:hover { opacity: 0.85; }
.company__map .pin { width: calc(14 * var(--px)); height: calc(18 * var(--px)); flex: none; }
.company__map .round-s {
  margin-left: auto;
  margin-right: calc(18 * var(--px));
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
/* XD ABOUT PC: gallery @y1016, 560×314.4 r16, gap16, x-184 */
.company__gallery {
  position: absolute;
  left: 0;
  top: calc(1016 * var(--px));
  width: 100%;
  overflow: hidden;
}
.company__gallery ul {
  display: flex;
  gap: calc(16 * var(--px));
  margin: 0 0 0 calc(-184 * var(--px));
  padding: 0;
  list-style: none;
}
.company__gallery li {
  flex: none;
  width: calc(560 * var(--px));
  height: calc(314.4 * var(--px));
  border-radius: calc(16 * var(--px));
  overflow: hidden;
}
.company__gallery img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* other-pages block on ABOUT: recruit banner + link cards + closing CTA */
.other { --h: 2435; background: var(--bg); }
.other .recruit { --top: 200; }
.other__en { --x: 288; --y: 943; }
.other__ja { --x: 288; --y: 994; }
/* ABOUT page: same star/text relationship as TOP */
.other .bigcta__visual { --y: 1501; }
.other .bigcta__en { --y: 1841; }
.other .bigcta__ja { --y: 1946; }

/* neutral placeholder that stands in for the design's "NO IMAGE" comps */
.ph {
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(42, 52, 66, 0.06), rgba(42, 52, 66, 0.14)),
    var(--bg);
}

/* ------------------------------------------------------------ motion --- */

.reveal { opacity: 0; transform: translateY(calc(24 * var(--px))); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s ease; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__particles,
  .fx-particles { display: none !important; }
  body.is-fx-live .hero__star-img { opacity: 1; }
  body.is-fx-live .mission__visual,
  body.is-fx-live .service__visual,
  body.is-fx-live .bigcta__visual { opacity: 1; }
}

/* ======================= SERVICE PAGE ===================================== */

.phero--service { --h: 1080; background: var(--bg); }
/* XD 画像 28: 723×481 at (880,379), rotation -13°, origin top-left. No flip. */
.phero--service .phero__photo {
  --x: 880; --y: 379; --w: 723; --h: 481;
  pointer-events: none;
  mix-blend-mode: multiply;
  transform: rotate(-13deg);
  transform-origin: 0 0;
}
.phero--service .phero__photo img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.phero--service .phero__lead { --x: 288; --y: 650; }
.phero--service .phero__body {
  --x: 288; --y: 800; --w: 1344; --fs: 24; --lh: 40;
}

.svwhy { --h: 1060; background: #fff; }
.svwhy__en { --x: 288; --y: 166; }
.svwhy__ja { --x: 288; --y: 209; --fs: 20; --lh: 32; font-family: var(--f-mincho); font-weight: 700; }
.svwhy__title { --x: 768; --y: 172; --fs: 40; --lh: 64; }

.wcard {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(295 * var(--px));
  width: calc(426 * var(--px));
  height: calc(567 * var(--px));
  border-radius: calc(8 * var(--px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.wcard::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(8 * var(--px));
  background: var(--beige);
  z-index: 4;
}
.wcard__case,
.wcard__feat {
  position: relative;
  text-align: center;
  box-sizing: border-box;
}
.wcard__case {
  flex: 0 0 calc(248 * var(--px));
  padding: calc(68 * var(--px)) calc(36 * var(--px)) calc(36 * var(--px));
  background: #f2f5f8;
}
.wcard__case::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 0;
  height: 0;
  border-left: calc(12 * var(--px)) solid transparent;
  border-right: calc(12 * var(--px)) solid transparent;
  border-top: calc(10 * var(--px)) solid #f2f5f8;
  z-index: 2;
}
.wcard__feat {
  flex: 1;
  padding: calc(56 * var(--px)) calc(32 * var(--px)) calc(28 * var(--px));
  background: var(--navy);
  color: #fff;
}
.wcard__pill {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: calc(28 * var(--px));
  padding: 0 calc(16 * var(--px));
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: var(--f-en);
  font-size: calc(12 * var(--px));
  letter-spacing: 0.06em;
  white-space: nowrap;
  z-index: 3;
}
.wcard__pill--case {
  top: calc(20 * var(--px));
  background: var(--beige);
  color: #fff;
}
.wcard__pill--feat {
  top: calc(20 * var(--px));
  background: #fff;
  color: #8a929c;
}
.wcard__gap {
  font-family: var(--f-mincho);
  font-size: calc(24 * var(--px));
  line-height: calc(40 * var(--px));
  font-weight: 700;
}
.wcard__need {
  margin-top: calc(8 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: calc(24 * var(--px));
  color: rgba(42, 52, 66, 0.7);
}
.wcard__cat {
  font-size: calc(16 * var(--px));
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--beige);
}
.wcard__name {
  margin-top: calc(8 * var(--px));
  font-family: var(--f-mincho);
  font-size: calc(24 * var(--px));
  line-height: calc(32 * var(--px));
  font-weight: 700;
}
.wcard__name::after {
  content: "";
  display: block;
  width: calc(374 * var(--px));
  height: 1px;
  margin: calc(16 * var(--px)) 0 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
}
.wcard__desc {
  margin-top: calc(16 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: calc(24 * var(--px));
  color: rgba(255, 255, 255, 0.86);
}

.svhow { --h: 1004; background: #fff; }
.svhow__en { --x: 325; --y: 24; }
.svhow__title {
  --x: 1030; --y: 225; --fs: 32; --lh: 67;
  font-family: var(--f-mincho);
  font-weight: 700;
}
.svhow__catch { --x: 385; --y: 448; --fs: 40; --lh: 67; }
.svhow__outer {
  position: absolute;
  left: calc(802 * var(--px));
  top: calc(71 * var(--px));
  width: calc(797 * var(--px));
  height: calc(796 * var(--px));
  border: 1px solid rgba(42, 52, 66, 0.18);
  border-radius: 50%;
  pointer-events: none;
}
.svhow__inner {
  position: absolute;
  left: calc(322 * var(--px));
  top: calc(225 * var(--px));
  width: calc(483 * var(--px));
  height: calc(483 * var(--px));
  border: 1px solid rgba(42, 52, 66, 0.25);
  border-radius: 50%;
  pointer-events: none;
}
.svhow__node {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  border: 0;
  background: #d9e0e9;
  color: var(--navy);
  font-size: calc(16 * var(--px));
  line-height: calc(22 * var(--px));
  box-sizing: border-box;
}
.svhow__node--1 { left: calc(475 * var(--px)); top: calc(177 * var(--px)); width: calc(100 * var(--px)); height: calc(100 * var(--px)); }
.svhow__node--2 { left: calc(672 * var(--px)); top: calc(227 * var(--px)); width: calc(100 * var(--px)); height: calc(100 * var(--px)); }
.svhow__node--3 {
  left: calc(716 * var(--px));
  top: calc(397 * var(--px));
  width: calc(140 * var(--px));
  height: calc(140 * var(--px));
  background: #172335;
  color: #fff;
  font-size: calc(28 * var(--px));
  font-weight: 500;
}
.svhow__node--4 { left: calc(672 * var(--px)); top: calc(587 * var(--px)); width: calc(100 * var(--px)); height: calc(100 * var(--px)); }
.svhow__list {
  position: absolute;
  left: calc(952 * var(--px));
  top: calc(320 * var(--px));
  width: calc(600 * var(--px));
  list-style: none;
}
.svhow__list li {
  display: grid;
  grid-template-columns: calc(40 * var(--px)) 1fr;
  column-gap: calc(16 * var(--px));
  align-items: start;
}
.svhow__list li + li { margin-top: calc(40 * var(--px)); }
.svhow__no {
  grid-row: 1 / span 2;
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--f-en);
  font-size: calc(14 * var(--px));
  letter-spacing: 0.04em;
}
.svhow__h {
  display: block;
  padding-top: calc(6 * var(--px));
  font-size: calc(22 * var(--px));
  font-weight: 500;
}
.svhow__h em {
  font-style: normal;
  font-weight: 500;
  color: var(--beige);
}
.svhow__p {
  display: block;
  grid-column: 2;
  margin-top: calc(8 * var(--px));
  font-size: calc(15 * var(--px));
  line-height: calc(26 * var(--px));
  color: rgba(42, 52, 66, 0.75);
}

.svlist { --h: 2983; background: var(--navy); color: #fff; }
.svlist__en { --x: 325; --y: 180; color: rgba(255,255,255,0.7); }
.svlist__title { --x: 288; --y: 268; }

.sdcard {
  position: relative;
  width: calc(1344 * var(--px));
  min-height: calc(400 * var(--px));
  margin: 0 auto calc(40 * var(--px));
  padding: calc(39 * var(--px)) calc(48 * var(--px)) calc(39 * var(--px)) calc(92 * var(--px));
  background: #fff;
  border: 0;
  border-radius: calc(8 * var(--px));
  box-sizing: border-box;
  color: var(--navy);
  display: grid;
  grid-template-columns: calc(400 * var(--px)) 1fr;
  gap: calc(37 * var(--px));
  align-items: start;
}
.svlist .sdcard:first-of-type { margin-top: calc(360 * var(--px)); }
.sdcard__no {
  position: absolute;
  left: calc(32 * var(--px));
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-mincho);
  font-size: calc(40 * var(--px));
  line-height: 1;
  font-weight: 700;
  color: var(--navy);
}
.sdcard__photo {
  width: calc(400 * var(--px));
  height: calc(322 * var(--px));
  border-radius: calc(8 * var(--px));
  overflow: hidden;
}
.sdcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.sdcard__body h3 {
  font-size: calc(32 * var(--px));
  line-height: calc(40 * var(--px));
  font-weight: 500;
  color: var(--navy);
}
.sdcard__lead {
  margin-top: calc(5 * var(--px));
  padding-bottom: calc(8 * var(--px));
  font-size: calc(24 * var(--px));
  line-height: calc(32 * var(--px));
  color: #1d2738;
  border-bottom: 1px solid #dcdcdc;
}
.sdcard__desc {
  margin-top: calc(8 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: calc(24 * var(--px));
  color: #566173;
}
.sdcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--px));
  margin-top: calc(28 * var(--px));
  list-style: none;
}
.sdcard__tags li {
  padding: 0 calc(16 * var(--px));
  height: calc(40 * var(--px));
  display: grid;
  place-items: center;
  background-color: #d9e0e9;
  color: #2a3442;
  font-size: calc(16 * var(--px));
  font-weight: 500;
  line-height: 1;
  border: 0;
  border-radius: calc(4 * var(--px));
}

.cases--page { background: var(--bg); }

.svflow { --h: 1930; background: #fff; overflow: hidden; }
.svflow__en { --x: 288; --y: 160; }
.svflow__ja { --x: 288; --y: 220; }
.svflow__axis {
  position: absolute;
  left: calc(390 * var(--px));
  top: calc(301 * var(--px));
  width: 0;
  height: calc(864 * var(--px));
  border-left: 1.6px solid #aab9c9;
}
.svflow__steps {
  position: absolute;
  left: calc(338 * var(--px));
  top: calc(321 * var(--px));
  width: calc(1254 * var(--px));
  list-style: none;
  overflow: visible;
}
.svflow__steps li {
  position: relative;
  height: calc(180 * var(--px));
  margin-bottom: calc(32 * var(--px));
  padding: calc(15 * var(--px)) 0 0 calc(262 * var(--px));
  box-sizing: border-box;
  overflow: visible;
}
.svflow__steps li::after {
  content: "";
  position: absolute;
  left: calc(262 * var(--px));
  right: 0;
  bottom: 0;
  height: 1px;
  background: #e1e6ec;
}
.svflow__steps li:last-child::after { display: none; }
.svflow__no {
  position: absolute;
  left: calc(12 * var(--px));
  top: calc(36 * var(--px));
  width: calc(80 * var(--px));
  height: calc(80 * var(--px));
  border-radius: 50%;
  background: #fff;
  border: 1px solid #c5d0db;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  font-family: var(--f-en);
  font-size: calc(38 * var(--px));
  line-height: 1;
  color: #182438;
  z-index: 2;
  overflow: visible;
}
.svflow__ptr {
  position: absolute;
  left: calc(92 * var(--px));
  top: calc(76 * var(--px));
  width: calc(28 * var(--px));
  height: 0;
  border-top: 1px solid #aab9c9;
  z-index: 1;
}
.svflow__ptr::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: calc(5 * var(--px));
  height: calc(5 * var(--px));
  margin: calc(-2.5 * var(--px)) 0 0 calc(-2.5 * var(--px));
  border-radius: 50%;
  background: #aab9c9;
}
.svflow__label {
  display: block;
  font-family: var(--f-en);
  font-size: calc(16 * var(--px));
  line-height: calc(16 * var(--px));
  letter-spacing: 0.08em;
  color: #9b7c45;
}
.svflow__h {
  display: block;
  margin-top: calc(29 * var(--px));
  font-size: calc(32 * var(--px));
  line-height: calc(32 * var(--px));
  font-weight: 500;
  color: #182438;
}
.svflow__p {
  display: block;
  margin-top: calc(16 * var(--px));
  font-size: calc(20 * var(--px));
  line-height: calc(32 * var(--px));
  color: #647287;
}
/* Align CONTINUOUS block with step copy column (ESTABLISH @ x=600) */
.svflow__wave {
  position: absolute;
  left: calc(332 * var(--px));
  top: calc(1178 * var(--px));
  width: calc(116 * var(--px));
  height: calc(74 * var(--px));
  display: block;
  overflow: visible;
}
.svflow__cont {
  --x: 600;
  --y: 1184;
  --fs: 11;
  --lh: 24;
  font-family: var(--f-en);
  letter-spacing: 0.08em;
  color: #9b7c45;
}
.svflow__cont-ja {
  --x: 600;
  --y: 1241;
  --fs: 40;
  --lh: 40;
  font-family: var(--f-mincho);
  font-weight: 700;
  color: #182438;
}

.svcontact {
  position: absolute;
  left: calc(288 * var(--px));
  top: calc(1356 * var(--px));
  width: calc(1344 * var(--px));
  height: calc(515 * var(--px));
  background: var(--navy);
  color: #fff;
  border-radius: calc(16 * var(--px));
  overflow: hidden;
  display: block;
}
.svcontact__visual {
  position: absolute;
  left: calc(216 * var(--px));
  top: calc(-179 * var(--px));
  width: calc(873 * var(--px));
  height: calc(873 * var(--px));
  pointer-events: none;
}
.svcontact__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svcontact__en {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(214 * var(--px));
  font-family: var(--f-en);
  font-size: calc(64 * var(--px));
  line-height: calc(77 * var(--px));
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}
.svcontact__go {
  position: absolute;
  left: 50%;
  top: calc(310 * var(--px));
  width: calc(65 * var(--px));
  height: calc(65 * var(--px));
  border: 1px solid #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
}
.svcontact__go .arrow {
  width: calc(28 * var(--px));
  height: calc(9 * var(--px));
}
.svcontact:hover .svcontact__go .arrow { transform: translateX(calc(4 * var(--px))); }

/* ======================= RECRUIT / NEWS / LEGAL PAGES ======================= */

.hdr__cta[aria-current="page"] {
  box-shadow: inset 0 0 0 calc(2 * var(--px)) #fff;
}

/* shared page-hero modifiers (ABOUT .phero is the base) */
.phero.rhero { --h: 1079; }
.phero.nhero { --h: 800; background: #f2f5f8; }
.phero.nhero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(640 * var(--px));
  height: calc(160 * var(--px));
  background: #fff;
  pointer-events: none;
}
.phero.nhero--detail { --h: 470; }
.phero.phero--legal { --h: 471; }

.phero--legal .phero__title,
.nhero--detail .nhero__label {
  --x: 288; --fs: 57; --lh: 72; --y: 270; letter-spacing: 0.02em;
}
.nhero--detail .nhero__label {
  --lh: 57;
  top: 0;
  margin-top: calc(270 * var(--px));
}
.phero--legal .phero__ja { --x: 288; --y: 309; --fs: 14; --lh: 47; }
.nhero--detail .nhero__ja {
  --x: 288;
  --y: 348;
  --fs: 14;
  --lh: 20;
  top: 0;
  margin-top: calc(348 * var(--px));
}

/* OTHER without recruit (news / legal) — Make IT Work = TOP about-links bigcta */
.other.other--sub { --h: 1549; }
.other.other--sub .other__en { --y: 80; }
.other.other--sub .other__ja { --y: 131; }
.other.other--sub .bigcta__visual {
  --x: 415;
  --y: 759;
  --w: 1091;
  --h: 726;
}
.other.other--sub .bigcta__en { --y: 1099; }
.other.other--sub .bigcta__ja { --y: 1204; }

/* ----- RECRUIT hero ----- */
.rhero__head { --x: 288; --y: 650; }
.rhero__lead {
  --x: 288; --y: 800; --w: 1344; --fs: 24; --lh: 40;
  color: var(--navy);
}
.rhero__shot {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(var(--w) * var(--px));
  height: calc(var(--h) * var(--px));
  border-radius: calc(8 * var(--px));
  overflow: hidden;
  background: #fff;
}
.rhero__shot img { width: 100%; height: 100%; object-fit: cover; }
.rhero__shot--1 img { object-position: 52% 42%; transform: scaleX(-1); }
.rhero__shot--2 img { object-position: 50% 42%; }
.rhero__shot--3 img { object-position: 48% 38%; }
.rhero__shot--5 img { object-position: 50% 45%; }
.rhero__ow {
  position: absolute;
  left: calc(1424 * var(--px));
  top: calc(861 * var(--px));
  width: calc(368 * var(--px));
  height: calc(124 * var(--px));
  z-index: 2;
}

.owcta {
  color: #fff;
  background: var(--beige);
  overflow: hidden;
}
.owcta--hero {
  border: none;
  border-radius: calc(28 * var(--px));
}
.owcta--hero .owcta__logo {
  position: absolute;
  left: calc(36 * var(--px));
  top: calc(22 * var(--px));
  font-family: var(--f-en);
  font-size: calc(22 * var(--px));
  line-height: 1;
  letter-spacing: 0.16em;
}
.owcta--hero .owcta__ja {
  position: absolute;
  left: calc(36 * var(--px));
  top: calc(60 * var(--px));
  font-family: var(--f-jp);
  font-size: calc(14 * var(--px));
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.06em;
}
.owcta--hero .owcta__sub {
  position: absolute;
  left: calc(36 * var(--px));
  top: calc(84 * var(--px));
  font-family: var(--f-en);
  font-size: calc(9 * var(--px));
  line-height: 1;
  letter-spacing: 0.14em;
}
.owcta--wide {
  border: 1.5px solid var(--beige);
  border-radius: calc(4 * var(--px));
}
.owcta__name {
  position: absolute;
  left: calc(40 * var(--px));
  top: calc(40 * var(--px));
  font-family: var(--f-en);
  font-size: calc(18 * var(--px));
  line-height: 1;
  letter-spacing: 0.04em;
}
.owcta__brand {
  position: absolute;
  left: calc(40 * var(--px));
  top: calc(74 * var(--px));
  font-family: var(--f-en);
  font-size: calc(18 * var(--px));
  line-height: 1;
  letter-spacing: 0.04em;
}
.owcta--hero .owcta__go {
  right: calc(28 * var(--px));
  top: calc(46 * var(--px));
  border-color: #fff;
}
.owcta--hero .owcta__go .arrow {
  width: calc(16 * var(--px));
  height: calc(5 * var(--px));
  transform: rotate(-45deg);
}
.owcta--hero:hover .owcta__go .arrow {
  transform: rotate(-45deg) translateX(calc(3 * var(--px)));
}
.owcta__go {
  position: absolute;
  right: calc(44 * var(--px));
  top: calc(39 * var(--px));
  width: calc(48 * var(--px));
  height: calc(48 * var(--px));
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.owcta__go .arrow { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
.owcta:hover .arrow { transform: translateX(calc(4 * var(--px))); }
.owcta--wide .owcta__name {
  left: calc(31 * var(--px));
  top: calc(46 * var(--px));
  font-size: calc(17 * var(--px));
}
.owcta--wide .owcta__sep {
  position: absolute;
  left: calc(173 * var(--px));
  top: calc(29 * var(--px));
  width: 1px;
  height: calc(52 * var(--px));
  background: rgba(255, 255, 255, 0.22);
}
.owcta--wide .owcta__brand {
  left: calc(204 * var(--px));
  top: calc(48 * var(--px));
  font-size: calc(15 * var(--px));
}
.owcta--wide .owcta__go {
  right: auto;
  left: calc(533 * var(--px));
  top: calc(7 * var(--px));
}

/* ----- CULTURE & CAREER ----- */
.rculture { --h: 1153; background: var(--navy); color: #fff; }
.rculture__en { --x: 288; --y: 177; }
.rculture__ja { --x: 288; --y: 220; }
.rculture__title {
  --x: 288; --y: 355; --fs: 40; --lh: 64;
  font-family: var(--f-mincho); font-weight: 700;
}

.ccul {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(430 * var(--px));
  height: calc(347 * var(--px));
  background: #fff;
  border: 1px solid #dde3ea;
  color: var(--navy);
}
.ccul__no {
  position: absolute;
  right: calc(32 * var(--px));
  top: calc(32 * var(--px));
  font-family: var(--f-en);
  font-size: calc(36 * var(--px));
  line-height: 1;
  color: #a5b0be;
}
.ccul__icon {
  position: absolute;
  left: calc(37 * var(--px));
  top: calc(32 * var(--px));
  width: calc(57 * var(--px));
  height: calc(57 * var(--px));
  border-radius: 50%;
  background: #f4f6f8;
  border: 1px solid #c8d1dc;
  display: grid;
  place-items: center;
}
.ccul__icon img,
.ccul__icon svg {
  width: calc(32 * var(--px));
  height: calc(32 * var(--px));
  object-fit: contain;
}
.ccul__en {
  position: absolute;
  left: calc(37 * var(--px));
  top: calc((135 - 0.86 * 10) * var(--px));
  font-family: var(--f-en);
  font-size: calc(10 * var(--px));
  line-height: 1;
  letter-spacing: 0.2em;
  color: #9b7c45;
}
.ccul__t {
  position: absolute;
  left: calc(37 * var(--px));
  top: calc((177 - (28 - 20) / 2 - 0.86 * 20) * var(--px));
  width: calc(360 * var(--px));
  font-size: calc(20 * var(--px));
  line-height: calc(28 * var(--px));
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #182438;
}
.ccul__rule {
  position: absolute;
  left: calc(37 * var(--px));
  top: calc(206 * var(--px));
  width: calc(357 * var(--px));
  height: 1px;
  background: #e1e6ec;
}
.ccul__d {
  position: absolute;
  left: calc(37 * var(--px));
  top: calc(230 * var(--px));
  width: calc(361 * var(--px));
  font-size: calc(13 * var(--px));
  line-height: calc(23 * var(--px));
  letter-spacing: 0.015em;
  color: #667489;
}
.ccul--tall .ccul__rule { top: calc(234 * var(--px)); }
.ccul--tall .ccul__d { top: calc(258 * var(--px)); }

/* ----- quote band ----- */
.rquote { --h: 602; background: #030303; }
.rquote__img {
  --x: 0; --y: 0; --w: 1920; --h: 602;
}
.rquote__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.rquote__dim {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 3, 0.5);
}
.rquote__t {
  position: absolute;
  left: 50%;
  top: calc(249 * var(--px));
  transform: translateX(-50%);
  width: calc(1400 * var(--px));
  text-align: center;
  font-size: calc(40 * var(--px));
  line-height: calc(72 * var(--px));
  font-family: var(--f-mincho);
  font-weight: 700;
  color: #fff;
}

/* ----- HIRING TARGETS ----- */
.rhire { --h: 1438; background: var(--bg); }
.rhire__axis {
  position: absolute;
  left: calc(288 * var(--px));
  top: calc(268 * var(--px));
  width: calc(1344 * var(--px));
  height: calc(80 * var(--px));
  background: #fff;
  border-radius: calc(8 * var(--px));
  display: flex;
  align-items: center;
  overflow: hidden;
}
.rhire__axis-lab {
  width: calc(301 * var(--px));
  height: 100%;
  background: var(--navy);
  color: #fff;
  border-radius: calc(8 * var(--px)) 0 0 calc(8 * var(--px));
  display: grid;
  place-items: center;
  font-size: calc(24 * var(--px));
  font-weight: 500;
  flex: none;
}
.rhire__axis-tags {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--px));
  padding-left: calc(42 * var(--px));
}
.rhire__axis-tags span {
  height: calc(40 * var(--px));
  padding: 0 calc(16 * var(--px));
  border-radius: calc(4 * var(--px));
  background: #f2f5f8;
  color: var(--navy);
  font-size: calc(16 * var(--px));
  font-weight: 500;
  letter-spacing: 0.05em;
  display: grid;
  place-items: center;
  white-space: nowrap;
}

.htype {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(656 * var(--px));
  height: calc(398 * var(--px));
  border-radius: calc(10 * var(--px));
  overflow: hidden;
}
.htype--dark { background: var(--navy); color: #fff; }
.htype--light { background: #fff; color: var(--navy); }
.htype__no {
  position: absolute;
  left: calc(32 * var(--px));
  top: calc(36 * var(--px));
  width: calc(78 * var(--px));
  height: calc(78 * var(--px));
  border-radius: calc(6 * var(--px));
  display: grid;
  place-items: center;
  font-family: var(--f-en);
  font-size: calc(26 * var(--px));
  line-height: 1;
  letter-spacing: 0.045em;
}
.htype--dark .htype__no { background: #fff; color: var(--navy); }
.htype--light .htype__no { background: #f2f5f8; color: var(--navy); }
.htype__head {
  position: absolute;
  left: calc(134 * var(--px));
  top: calc(36 * var(--px));
  right: calc(24 * var(--px));
}
.htype__t {
  margin: calc(8 * var(--px)) 0 0;
  font-family: var(--f-mincho);
  font-size: calc(24 * var(--px));
  font-weight: 700;
  line-height: 1.2;
}
.htype__meta {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--px));
  margin-top: calc(8 * var(--px));
  min-width: 0;
}
.htype__ex {
  margin: 0;
  flex: none;
  font-family: var(--f-en);
  font-size: calc(16 * var(--px));
  line-height: calc(28 * var(--px));
  letter-spacing: 0.08em;
}
.htype--dark .htype__ex { color: #fff; }
.htype--light .htype__ex { color: var(--navy); }
.htype__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--px));
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.htype__tags li {
  height: calc(28 * var(--px));
  padding: 0 calc(16 * var(--px));
  border-radius: calc(4 * var(--px));
  font-size: calc(14 * var(--px));
  font-weight: 500;
  letter-spacing: 0.025em;
  display: grid;
  place-items: center;
  white-space: nowrap;
}
.htype--dark .htype__tags li { background: #fff; color: var(--navy); }
.htype--light .htype__tags li { background: #f2f5f8; color: var(--navy); }
.htype__rows {
  position: absolute;
  left: calc(32 * var(--px));
  top: calc(140 * var(--px));
  width: calc(593 * var(--px));
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--px));
}
.htype__row {
  height: calc(71 * var(--px));
  border-radius: calc(8 * var(--px));
  display: flex;
  align-items: center;
  padding: 0 calc(20 * var(--px));
  gap: calc(16 * var(--px));
}
.htype--dark .htype__row { background: #fff; color: var(--navy); }
.htype--light .htype__row { background: #f2f5f8; color: var(--navy); }
.htype__row dt {
  flex: none;
  width: calc(72 * var(--px));
  font-family: var(--f-en);
  font-size: calc(12 * var(--px));
  letter-spacing: 0.045em;
}
.htype--light .htype__row:nth-child(2) dt,
.htype--light .htype__row:nth-child(3) dt { color: #7c8794; }
.htype__row dd {
  margin: 0;
  font-size: calc(16 * var(--px));
  line-height: 1.4;
}

/* ----- CAREER PATH ----- */
.rcareer { --h: 1108; background: var(--bg); overflow: visible; }
.rcareer__arcwrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.rcareer__arc {
  display: block;
  width: 100%;
  height: 100%;
}
.rcareer__lead {
  --x: 288; --y: 36; --w: 1344; --fs: 20; --lh: 32;
  color: var(--navy);
}
.rcareer__photo {
  --x: 404; --y: 436; --w: 426; --h: 426;
  z-index: 1;
  overflow: visible;
}
.rcareer__photo img { width: 100%; height: 100%; object-fit: contain; }
.rcareer__badge {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(137 * var(--px));
  height: calc(137 * var(--px));
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: calc(56 * var(--px));
  font-weight: 400;
  z-index: 2;
}
.rcareer__badge--next { background: #d9e0e9; color: #fff; }
.rcareer__kicker {
  --x: 830; --y: 560; --fs: 12; --lh: 16;
  font-weight: 500;
  letter-spacing: 0.208em;
  color: #405b7b;
  z-index: 1;
}
.rcareer__t {
  --x: 830; --y: 604; --fs: 32; --lh: 40;
  font-weight: 500;
  letter-spacing: 0.0125em;
  color: #182438;
  z-index: 1;
}
.rcareer__d {
  --x: 830; --y: 652; --w: 680; --fs: 16; --lh: 24;
  color: #58677b;
  z-index: 1;
}
.rcareer__chips {
  position: absolute;
  left: calc(830 * var(--px));
  top: calc(685 * var(--px));
  display: flex;
  gap: calc(16 * var(--px));
  z-index: 1;
}
.rcareer__chip {
  height: calc(42 * var(--px));
  width: calc(166 * var(--px));
  border-radius: calc(21 * var(--px));
  background: #fff;
  border: 1px solid #b9c6d3;
  font-size: calc(16 * var(--px));
  font-weight: 500;
  letter-spacing: 0.016em;
  color: #182438;
  display: grid;
  place-items: center;
  white-space: nowrap;
}
.rcareer__chip:nth-child(2) { width: calc(238 * var(--px)); }
.rcareer__chip:nth-child(3) { width: calc(244 * var(--px)); }

/* ----- FAQ ----- */
.rfaq { --h: 982; background: #fff; overflow: hidden; }
.rfaq__en { --x: 288; --y: 187; --lh: 32; }
.rfaq__ja { --x: 288; --y: 230; }
.rfaq__list {
  position: absolute;
  left: calc(768 * var(--px));
  top: calc(208 * var(--px));
  width: calc(864 * var(--px));
  z-index: 2;
}
.rfaq__shots {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(612 * var(--px));
  height: calc(314 * var(--px));
  overflow: hidden;
}
.rfaq__track {
  display: flex;
  gap: calc(16 * var(--px));
  width: max-content;
  margin-left: calc(-184 * var(--px));
}
.rfaq__shot {
  flex: none;
  width: calc(560 * var(--px));
  height: calc(314 * var(--px));
  border-radius: calc(16 * var(--px));
  overflow: hidden;
}
.rfaq__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qacc {
  border-top: 1px solid #d8dde2;
}
.qacc:last-child { border-bottom: 1px solid #d8dde2; }
.qacc__head {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--px));
  min-height: calc(72 * var(--px));
  cursor: pointer;
  list-style: none;
}
.qacc__head::-webkit-details-marker { display: none; }
.qacc__q {
  font-family: var(--f-display);
  font-size: calc(22 * var(--px));
  color: #263447;
}
.qacc__t {
  flex: 1;
  font-size: calc(15 * var(--px));
  font-weight: 700;
  color: #263447;
}
.qacc__plus {
  font-family: var(--f-display);
  font-size: calc(28 * var(--px));
  color: #263447;
  line-height: 1;
  transition: transform 0.35s ease;
}
.qacc[open] .qacc__plus { transform: rotate(45deg); }
.qacc__panel {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 0 0 calc(46 * var(--px));
  font-size: calc(15 * var(--px));
  line-height: calc(28 * var(--px));
  color: #58677b;
  transition: grid-template-rows 0.35s ease, padding-bottom 0.35s ease;
}
.qacc__panel > .qacc__a { overflow: hidden; }
.qacc[open] .qacc__panel {
  grid-template-rows: 1fr;
  padding-bottom: calc(24 * var(--px));
}

.rcta { --h: 1210; background: #fff; overflow: hidden; }
/* XD 画像 28 inner content 1091×726; button sits below the graphic with a gap */
.rcta .bigcta__visual {
  --x: 380; --y: 114; --w: 1091; --h: 726;
  mix-blend-mode: normal;
}
.rcta .bigcta__visual img { object-fit: contain; }
.rcta .bigcta__en { --y: 453; letter-spacing: 0; }
.rcta .bigcta__ja { --y: 558; }
.rcta__ow {
  position: absolute;
  left: calc(606 * var(--px));
  top: calc(896 * var(--px));
  width: calc(638 * var(--px));
  height: calc(110 * var(--px));
  z-index: 2;
}
/* HRMOS-only (Make IT lives in .other--sub below) */
.rcta--ow { --h: 310; }
.rcta--ow .rcta__ow {
  left: calc(606 * var(--px));
  top: calc(100 * var(--px));
}
.owcta--xd {
  border: none;
  border-radius: calc(8 * var(--px));
  display: flex;
  align-items: center;
  padding: 0 calc(36 * var(--px)) 0 calc(40 * var(--px));
  gap: calc(28 * var(--px));
}
.owcta--xd .owcta__logo {
  position: static;
  flex: none;
  font-family: var(--f-en);
  font-size: calc(20 * var(--px));
  line-height: 1;
  letter-spacing: 0.14em;
}
.owcta--xd .owcta__lines {
  position: static;
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--px));
  min-width: 0;
}
.owcta--xd .owcta__ja {
  display: block;
  font-size: calc(15 * var(--px));
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.owcta--xd .owcta__sub {
  display: block;
  margin: 0;
  font-family: var(--f-en);
  font-size: calc(9 * var(--px));
  line-height: 1;
  letter-spacing: 0.12em;
}
.owcta--xd .owcta__go {
  position: static;
  margin-left: auto;
  transform: none;
  flex: none;
  width: calc(48 * var(--px));
  height: calc(48 * var(--px));
  border-color: #fff;
}
.owcta--xd .owcta__go .arrow { transform: rotate(-45deg); }
.owcta--xd:hover .owcta__go .arrow { transform: rotate(-45deg) translateX(calc(3 * var(--px))); }

/* ----- NEWS archive ----- */
.narchive { --h: 1900; background: #fff; }
/* EN frame top +46. JA pushed down so ink gap ≈ EN cap height (design ~1.1×). */
.narchive__en {
  --x: 845;
  --y: 46;
  --lh: 32;
  top: 0;
  margin-top: calc(46 * var(--px));
  letter-spacing: 0;
  color: #2a3442;
}
.narchive__ja {
  --x: 900;
  --y: 114;
  --lh: 20;
  top: 0;
  margin-top: calc(114 * var(--px));
  color: #2a3442;
}
.nfilter {
  position: absolute;
  left: calc(288 * var(--px));
  top: calc(163 * var(--px));
  width: calc(1344 * var(--px));
  height: calc(173 * var(--px));
  background: #f1f3f4;
  border-radius: calc(10 * var(--px));
}
.nfilter__lbl {
  position: absolute;
  left: calc(45 * var(--px));
  top: 0;
  font-size: calc(20 * var(--px));
  font-weight: 500;
  line-height: calc(45 * var(--px));
  color: #263447;
  white-space: nowrap;
}
.nfilter__lbl--type { margin-top: calc(31 * var(--px)); }
.nfilter__lbl--year { margin-top: calc(95 * var(--px)); }
.nfilter__row {
  position: absolute;
  left: calc(129 * var(--px));
  top: 0;
  display: flex;
  gap: calc(16 * var(--px));
}
.nfilter__row--type { margin-top: calc(31 * var(--px)); }
.nfilter__row--year { margin-top: calc(95 * var(--px)); }
.nchip {
  box-sizing: border-box;
  height: calc(45 * var(--px));
  padding: calc(8 * var(--px)) calc(32 * var(--px));
  background: #fff;
  border-radius: calc(33 * var(--px));
  font-size: calc(20 * var(--px));
  font-weight: 500;
  line-height: 1;
  display: grid;
  place-items: center;
  color: #2a3442;
  white-space: nowrap;
}
.nchip--all {
  width: calc(101 * var(--px));
  letter-spacing: 0.025em;
}
.nfilter__row--type .nchip:nth-child(2) { width: calc(146 * var(--px)); }
.nfilter__row--type .nchip:nth-child(3) { width: calc(207 * var(--px)); }
.nfilter__row--type .nchip:nth-child(4) { width: calc(187 * var(--px)); }
.nfilter__row--type .nchip:nth-child(5) { width: calc(146 * var(--px)); }
.nfilter__row--year .nchip:nth-child(2) { width: calc(124 * var(--px)); }
.nchip.is-on { background: #263447; color: #fff; }

.narchive__count {
  position: absolute;
  left: calc(288 * var(--px));
  top: calc(502 * var(--px));
  display: flex;
  align-items: flex-end;
  height: calc(16 * var(--px));
  font-size: calc(16 * var(--px));
  font-weight: 500;
  line-height: 1;
}
.narchive__count-lbl {
  font-size: calc(16 * var(--px));
  font-weight: 500;
  line-height: 1;
}
.narchive__count b {
  font-size: calc(32 * var(--px));
  font-weight: 500;
  line-height: 1;
  margin-top: calc(-16 * var(--px));
  margin-left: calc(8 * var(--px));
}
.narchive__count-ken {
  font-size: calc(15 * var(--px));
  font-weight: 400;
  line-height: 1;
  margin-left: calc(5 * var(--px));
}
.narchive__range {
  position: absolute;
  right: calc(288 * var(--px));
  top: calc(501 * var(--px));
  font-size: calc(16 * var(--px));
  font-weight: 500;
  line-height: 1;
}

.nrow {
  position: absolute;
  left: calc(288 * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(1344 * var(--px));
  height: calc(92 * var(--px));
  border-top: 1px solid rgba(38, 52, 71, 0.18);
  display: block;
  color: var(--navy);
}
.nrow:last-of-type { border-bottom: 1px solid rgba(38, 52, 71, 0.18); }
.nrow:hover { opacity: 0.7; }
.nrow__date {
  position: absolute;
  left: calc(22 * var(--px));
  top: 50%;
  transform: translateY(-50%);
  font-size: calc(16 * var(--px));
}
.nrow__cat {
  position: absolute;
  left: calc(177 * var(--px));
  top: 50%;
  transform: translateY(-50%);
  height: calc(34 * var(--px));
  min-width: calc(137 * var(--px));
  padding: 0 calc(16 * var(--px));
  background: #edf1f4;
  border-radius: 999px;
  font-size: calc(16 * var(--px));
  display: grid;
  place-items: center;
}
.nrow__t {
  position: absolute;
  left: calc(358 * var(--px));
  top: 50%;
  transform: translateY(-50%);
  font-size: calc(20 * var(--px));
  font-weight: 500;
  white-space: nowrap;
}
.nrow__go {
  position: absolute;
  right: calc(8 * var(--px));
  top: 50%;
  width: calc(32 * var(--px));
  height: calc(32 * var(--px));
  margin-top: calc(-16 * var(--px));
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.npager {
  position: absolute;
  left: calc(687 * var(--px));
  top: calc(1597 * var(--px));
  width: calc(610 * var(--px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(15 * var(--px));
  color: #263447;
  line-height: 1;
}
/* Disabled PREV (page 1) — XD #7c8794 */
.npager > span:first-child {
  color: #7c8794;
}
.npager__nums {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--px));
}
.npager__nums a {
  width: calc(49 * var(--px));
  height: calc(49 * var(--px));
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #263447;
  text-decoration: none;
  font-weight: 400;
}
/* Active page — XD 楕円形 137: 49×49 / #263447 / white Bold 15 */
.npager__nums a.is-on {
  background: #263447;
  color: #fff;
  font-weight: 700;
}
.npager__nums > span {
  width: calc(49 * var(--px));
  display: grid;
  place-items: center;
  color: #7c8794;
}
.npager a:hover { opacity: 0.6; }
.npager__nums a.is-on:hover { opacity: 1; }

/* ----- NEWS detail ----- */
.nhero__cat {
  position: absolute;
  left: calc(638 * var(--px));
  top: calc(226 * var(--px));
  height: calc(36 * var(--px));
  padding: 0 calc(18 * var(--px));
  background: var(--navy);
  color: #fff;
  font-size: calc(14 * var(--px));
  font-weight: 500;
  display: grid;
  place-items: center;
  border-radius: calc(33 * var(--px));
}
.nhero__date {
  position: absolute;
  left: calc(775 * var(--px));
  top: calc(237 * var(--px)); /* vertically centered with cat pill */
  font-size: calc(14 * var(--px));
  line-height: calc(14 * var(--px));
  color: #7c8794;
}
.nhero__headline {
  --x: 638;
  --y: 324;
  --w: 840;
  --fs: 40;
  --lh: 40; /* avoid lh box eating into tags */
}
.nhero__tags {
  position: absolute;
  left: calc(638 * var(--px));
  top: calc(404 * var(--px)); /* ~40px under headline (design guide gap) */
  display: flex;
  gap: calc(16 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: calc(16 * var(--px));
  color: var(--hair);
}

.ndetail { --h: 2417; background: #fff; }

.nside {
  position: absolute;
  left: calc(288 * var(--px));
  top: calc(162 * var(--px));
  width: calc(280 * var(--px));
  background: #f4f6f8;
  padding: calc(32 * var(--px)) calc(24 * var(--px)) calc(36 * var(--px));
  border-radius: calc(8 * var(--px)); /* XD 長方形 1409 */
}
.nside__h {
  font-family: var(--f-en);
  font-size: calc(20 * var(--px));
  margin-bottom: calc(16 * var(--px));
}
.nside__search-wrap {
  position: relative;
  display: block;
}
.nside__search {
  width: 100%;
  height: calc(46 * var(--px));
  border: 0;
  background: #fff;
  padding: 0 calc(40 * var(--px)) 0 calc(16 * var(--px));
  font: inherit;
  font-size: calc(12 * var(--px));
  color: var(--navy);
  border-radius: calc(4 * var(--px));
}
.nside__search::-webkit-search-decoration,
.nside__search::-webkit-search-cancel-button,
.nside__search::-webkit-search-results-button,
.nside__search::-webkit-search-results-decoration { display: none; }
.nside__search::placeholder { color: #9aa3ad; }
.nside__search-icon {
  position: absolute;
  right: calc(14 * var(--px));
  top: 50%;
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  transform: translateY(-50%);
  color: #2a3442;
  pointer-events: none;
}
.nside__rule {
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
  border: 0;
  margin: calc(20 * var(--px)) 0;
}
.nside__lbl {
  font-size: calc(12 * var(--px));
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: calc(12 * var(--px));
}
.nside__chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--px)); }
.nside__chip {
  height: calc(34 * var(--px));
  padding: 0 calc(14 * var(--px));
  background: #fff;
  font-size: calc(12 * var(--px));
  display: grid;
  place-items: center;
  border-radius: calc(17 * var(--px)); /* XD category chips r=17 */
}
.nside__chip.is-on { background: #253448; color: #fff; }
.nside__year { font-size: calc(12 * var(--px)); }
.nside__go {
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(50 * var(--px));
  margin-top: calc(24 * var(--px));
  background: #253448;
  color: #fff;
  font-size: calc(12 * var(--px));
  border-radius: calc(25 * var(--px)); /* XD 長方形 1421 */
}
.nside__clear {
  display: block;
  text-align: center;
  margin-top: calc(16 * var(--px));
  font-size: calc(12 * var(--px));
  color: var(--hair);
}

.narticle {
  position: absolute;
  left: calc(700 * var(--px));
  top: calc(218 * var(--px));
  width: calc(932 * var(--px));
}
.narticle__lead {
  font-size: calc(20 * var(--px));
  font-weight: 500;
  margin-bottom: calc(24 * var(--px));
}
.narticle p {
  font-size: calc(16 * var(--px));
  line-height: calc(32 * var(--px));
}
.narticle p + p { margin-top: calc(8 * var(--px)); }
.narticle__fig {
  width: 100%;
  height: calc(440 * var(--px));
  margin: calc(40 * var(--px)) 0;
  background: linear-gradient(135deg, #e8eef2, #d5dee5);
  display: grid;
  place-items: center;
  color: #7c8794;
  font-size: calc(32 * var(--px));
  border-radius: calc(4 * var(--px)); /* XD 長方形 1469 */
}
.narticle h2 {
  position: relative;
  margin: calc(56 * var(--px)) 0 calc(28 * var(--px));
  padding-left: calc(26 * var(--px));
  font-size: calc(32 * var(--px));
  font-weight: 400;
  line-height: calc(46 * var(--px));
}
/* XD 線 105–107: 3×46, #a89f8f */
.narticle h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: calc(3 * var(--px));
  height: calc(46 * var(--px));
  background: #a89f8f;
}
.nrel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--px));
  margin: calc(28 * var(--px)) 0;
  padding: calc(28 * var(--px)) calc(32 * var(--px));
  background: #f5f7f8;
  border-radius: calc(6 * var(--px));
  /* XD 長方形 1426: 5px left accent */
  border-left: calc(5 * var(--px)) solid #253448;
  overflow: hidden;
  transition: opacity 0.2s ease;
}
.nrel:hover { opacity: 0.85; }
.nrel--dark {
  background: #253448;
  color: #fff;
  border-left-color: #151b24;
}
.nrel__txt { min-width: 0; }
.nrel__k {
  display: block;
  font-size: calc(12 * var(--px));
  letter-spacing: 0.15em;
  color: #8a949e;
}
.nrel--dark .nrel__k { color: #aebac6; }
.nrel__t {
  display: block;
  margin-top: calc(10 * var(--px));
  font-size: calc(20 * var(--px));
}
.nrel--dark .nrel__t { font-size: calc(24 * var(--px)); }
.nrel__d {
  display: block;
  margin-top: calc(6 * var(--px));
  font-size: calc(12 * var(--px));
  opacity: 0.7;
}
/* XD 楕円形 252: r=22 → 44×44 */
.nrel__go {
  flex: none;
  width: calc(44 * var(--px));
  height: calc(44 * var(--px));
  border-radius: 50%;
  background: #253448;
  color: #fff;
  display: grid;
  place-items: center;
}
.nrel--dark .nrel__go {
  background: transparent;
  border: 1px solid #fff;
}
.nrel__go .arrow {
  width: calc(14 * var(--px));
  height: calc(5 * var(--px));
}

.nshare {
  position: absolute;
  left: calc(700 * var(--px));
  top: calc(2036 * var(--px));
  width: calc(932 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--px));
}
.nshare__lbl {
  margin-right: calc(8 * var(--px));
  font-size: calc(12 * var(--px));
  letter-spacing: 0.08em;
  color: #8a949e;
}
/* XD 楕円形 253/254: r=16 → 32×32 */
.nshare__btn {
  width: calc(32 * var(--px));
  height: calc(32 * var(--px));
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: calc(18 * var(--px));
  line-height: 1;
  transition: opacity 0.2s ease;
}
.nshare__btn:hover { opacity: 0.7; }
.nshare__btn--x {
  background: #253448;
  color: #fff;
}
.nshare__btn--x svg {
  width: calc(12 * var(--px));
  height: calc(12 * var(--px));
  display: block;
}
.nshare__btn--more {
  background: #fff;
  color: #253448;
  border: 1px solid #dde3e8;
}

.nnav {
  position: absolute;
  left: calc(682 * var(--px));
  top: calc(2117 * var(--px));
  width: calc(950 * var(--px));
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: calc(40 * var(--px));
  gap: calc(40 * var(--px));
}
.nnav__back,
.nnav__next {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--px));
  min-width: 0;
  flex: 1;
}
.nnav__next {
  justify-content: flex-end;
  text-align: right;
}
.nnav__meta { min-width: 0; }
.nnav__k {
  display: block;
  font-size: calc(12 * var(--px));
  letter-spacing: 0.08em;
  color: #98a1aa;
}
.nnav__t {
  display: block;
  margin-top: calc(12 * var(--px));
  font-size: calc(16 * var(--px));
}
.nnav__d {
  display: block;
  margin-top: calc(8 * var(--px));
  font-size: calc(12 * var(--px));
  color: #98a1aa;
}
/* XD 楕円形 255/256: r=22 → 44×44 */
.nnav__go {
  flex: none;
  width: calc(44 * var(--px));
  height: calc(44 * var(--px));
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: opacity 0.2s ease;
}
.nnav__back .nnav__go {
  background: #fff;
  color: #253448;
  border: 1px solid #dde3e8;
}
.nnav__back .nnav__go .arrow { transform: rotate(180deg); }
.nnav__next .nnav__go {
  background: #253448;
  color: #fff;
}
.nnav__go .arrow {
  width: calc(14 * var(--px));
  height: calc(5 * var(--px));
}
.nnav a:hover .nnav__go { opacity: 0.75; }
/* XD 線 109 — vertical divider between BACK / NEXT */
.nnav::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(40 * var(--px));
  width: 1px;
  height: calc(106 * var(--px));
  background: #dde3e8;
  transform: translateX(-50%);
}

.nrelated { --h: 531; background: #f2f5f8; }
.nrelated__en { --x: 290; --y: 140; --fs: 40; --lh: 40; font-family: var(--f-en); }
.nrelated__ja { --x: 290; --y: 177; --fs: 11; --lh: 16; color: var(--hair); }

/* XD NEWS single: RECRUIT band 3418–4166 (=748), banner @+45 — same grey as RELATED NEWS */
.nrecruit {
  --h: 748;
  background: #f2f5f8;
}
.nrecruit .recruit { --top: 45; }

/* Privacy XD: date ends ~4596 → banner @4991 (=395). White after legal + grey inset @200 (ABOUT pattern) */
.legal + .nrecruit {
  --h: 903; /* 200 + 515 + 188 */
}
.legal + .nrecruit .recruit {
  --top: 200;
}

.rncard {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(218 * var(--px));
  width: calc(431 * var(--px));
  height: calc(150 * var(--px));
  background: #fff;
  border-radius: calc(7 * var(--px)); /* XD 長方形 1432 */
  padding: calc(24 * var(--px)) calc(24 * var(--px)) calc(20 * var(--px));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rncard:hover {
  transform: translateY(calc(-2 * var(--px)));
  box-shadow: 0 calc(8 * var(--px)) calc(20 * var(--px)) rgba(42, 52, 66, 0.08);
}
.rncard__meta {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--px));
  font-size: calc(12 * var(--px));
  color: #7e8994;
}
/* XD pill ~109×28, r=15, fill #edf1f4 */
.rncard__cat {
  height: calc(28 * var(--px));
  padding: 0 calc(16 * var(--px));
  border-radius: calc(15 * var(--px));
  background: #edf1f4;
  color: #253448;
  font-size: calc(14 * var(--px));
  display: grid;
  place-items: center;
  line-height: 1;
}
.rncard__t {
  margin-top: calc(14 * var(--px));
  font-size: calc(16 * var(--px));
  color: #253448;
  line-height: 1.4;
}
.rncard__foot {
  margin-top: auto;
  padding-top: calc(12 * var(--px));
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rncard__more {
  font-size: calc(10 * var(--px));
  letter-spacing: 0.08em;
  color: #9aa3ac;
}
/* XD circle r=11 → 22×22, outline */
.rncard__go {
  width: calc(22 * var(--px));
  height: calc(22 * var(--px));
  border-radius: 50%;
  border: 1px solid #253448;
  background: transparent;
  color: #253448;
  display: grid;
  place-items: center;
}
.rncard__go .arrow {
  width: calc(10 * var(--px));
  height: calc(4 * var(--px));
}
.rncard:hover .rncard__go .arrow {
  transform: translateX(calc(2 * var(--px)));
}

/* ----- LEGAL (privacy / disclaimer) ----- */
.legal.sec {
  height: auto;
  min-height: 0;
  overflow: visible;
  background: #fff;
  /* XD: short white after last content, then RECRUIT grey (space via .legal + .nrecruit --top) */
  padding: calc(161 * var(--px)) calc(288 * var(--px)) calc(80 * var(--px));
}
.legal__kicker {
  font-size: calc(12 * var(--px));
  letter-spacing: 0.1em;
  color: var(--navy);
}
.legal__kicker-ja {
  margin-top: calc(8 * var(--px));
  font-size: calc(13 * var(--px));
}
.legal__shell {
  display: flex;
  align-items: flex-start;
  gap: calc(76 * var(--px));
  margin-top: calc(40 * var(--px));
}
.legal__toc {
  flex: none;
  width: calc(286 * var(--px));
  background: #f2f5f8;
  border-radius: calc(8 * var(--px)); /* XD 長方形 1448 */
  padding: calc(32 * var(--px)) calc(26 * var(--px)) calc(28 * var(--px));
  position: sticky;
  top: calc(140 * var(--px));
}
.legal__toc-h {
  font-size: calc(12 * var(--px));
  font-weight: 700;
  letter-spacing: 0.1em;
  padding-bottom: calc(12 * var(--px));
  border-bottom: 1px solid rgba(42, 52, 66, 0.15);
  margin-bottom: calc(16 * var(--px));
}
.legal__toc nav a {
  display: block;
  font-size: calc(13 * var(--px));
  line-height: calc(39 * var(--px));
  color: var(--navy);
}
.legal__toc nav a:hover { opacity: 0.6; }
/* XD 長方形 1449: 234×52, r=26 + 楕円形 252 r=11 */
.legal__toc-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--px));
  margin-top: calc(24 * var(--px));
  height: calc(52 * var(--px));
  border-radius: calc(26 * var(--px));
  background: #263447;
  color: #fff;
  font-size: calc(16 * var(--px));
  letter-spacing: 0.08em;
}
/* XD 楕円形 252: fill none, white 0.5 stroke → dark (button) bg + white ring/arrow */
.legal__toc-cta .legal__toc-go {
  width: calc(22 * var(--px));
  height: calc(22 * var(--px));
  border-radius: 50%;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.legal__toc-cta .legal__toc-go .arrow {
  width: calc(10 * var(--px));
  height: calc(4 * var(--px));
  background: currentColor;
}
.legal__toc-cta:hover .legal__toc-go .arrow {
  transform: translateX(calc(2 * var(--px)));
}
.legal__body {
  flex: 1;
  min-width: 0;
  max-width: calc(900 * var(--px));
}
.legal__lead {
  font-size: calc(18 * var(--px));
  line-height: calc(34 * var(--px));
  margin-bottom: calc(48 * var(--px));
}
.legal__sec { scroll-margin-top: calc(140 * var(--px)); margin-bottom: calc(56 * var(--px)); }
.legal__sec h2 {
  position: relative;
  padding-left: calc(30 * var(--px));
  font-size: calc(30 * var(--px));
  font-weight: 500;
  line-height: calc(49 * var(--px));
  margin-bottom: calc(24 * var(--px));
}
/* XD 線 118–128: 3×49, #b2a38d */
.legal__sec h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: calc(3 * var(--px));
  height: calc(49 * var(--px));
  background: #b2a38d;
}
.legal__sec p {
  font-size: calc(18 * var(--px));
  line-height: calc(34 * var(--px));
}
.legal__sec p + p { margin-top: calc(16 * var(--px)); }
.legal__list {
  margin: calc(24 * var(--px)) 0;
  padding: calc(28 * var(--px)) calc(34 * var(--px));
  background: #f6f8f9;
  border-radius: calc(6 * var(--px)); /* XD 長方形 1450 */
  font-size: calc(18 * var(--px));
  line-height: calc(34 * var(--px));
}
.legal__list li + li { margin-top: calc(4 * var(--px)); }
.legal__note {
  margin: calc(24 * var(--px)) 0;
  padding: calc(28 * var(--px)) calc(34 * var(--px));
  background: #f2f5f8;
  border-radius: 0;
  border-left: calc(5 * var(--px)) solid #263447; /* XD 線 125 */
}
.legal__note-k {
  font-size: calc(12 * var(--px));
  letter-spacing: 0.08em;
  margin-bottom: calc(12 * var(--px));
  color: var(--hair);
}
.legal__note p { font-size: calc(18 * var(--px)); line-height: calc(32 * var(--px)); }
.legal__box {
  margin: calc(24 * var(--px)) 0;
  padding: calc(32 * var(--px)) calc(34 * var(--px));
  background: #f6f8f9;
  border-radius: 0;
  font-size: calc(18 * var(--px));
  line-height: calc(42 * var(--px));
}
.legal__sec .legal__date {
  margin-top: calc(32 * var(--px));
  font-size: calc(13 * var(--px)); /* XD ZenKakuGothicNew-Regular/13/lh28 */
  line-height: calc(28 * var(--px));
  color: #6f7b84;
}
.legal__rel {
  display: block;
  margin: calc(20 * var(--px)) 0;
  padding: calc(24 * var(--px)) calc(34 * var(--px));
  background: #f2f5f8;
  border-radius: 0;
  border-left: calc(5 * var(--px)) solid #263447; /* XD 線 158 */
}
.legal__rel small {
  display: block;
  font-size: calc(12 * var(--px));
  letter-spacing: 0.08em;
  color: var(--hair);
  margin-bottom: calc(10 * var(--px));
}
.legal__rel span { font-size: calc(18 * var(--px)); }


/* ============================ CONTACT PAGE =============================== */
/* CONTACT[Stellaxis WEB]_260922 (artboard-67607c5b). Page on #f2f5f8; hero
   0→640 · form card 289,640 1343 wide · RECRUIT @2541 · OTHER @3204
   · footer @4776. Scoped to .chero / .cform / .crecruit / .other--contact. */

.phero.chero { --h: 640; background: #f2f5f8; }

.cform {
  position: relative;
  background: #f2f5f8;
}
.cform__card {
  width: calc(1343 * var(--px));
  margin-left: calc(289 * var(--px));
  padding: calc(68.2 * var(--px)) calc(64.5 * var(--px)) calc(72.5 * var(--px));
  background: #fff;
  border-radius: calc(11.5 * var(--px));
  color: #1a1a1a;
}
.cform__h {
  font-size: calc(22 * var(--px));
  line-height: calc(32 * var(--px));
  font-weight: 500;
  color: #000;
}
.cform__lead {
  margin-top: calc(25.5 * var(--px));
  padding-bottom: calc(22.8 * var(--px));
  border-bottom: 1px solid #c7c7c2;
  font-size: calc(16 * var(--px));
  line-height: calc(30 * var(--px));
  color: #404040;
}

/* label column 352.5, field 861 wide, 33 between rows */
.cform__row {
  display: flex;
  align-items: center;
  margin: calc(25.5 * var(--px)) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.cform__row + .cform__row { margin-top: calc(33 * var(--px)); }
.cform__row--top { align-items: flex-start; }
.cform__lbl {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--px));
  width: calc(352.5 * var(--px));
  padding: 0;
  float: left; /* lets <legend> sit in the flex row */
  font-size: calc(16 * var(--px));
  line-height: calc(24 * var(--px));
  font-weight: 500;
  color: #1a1a1a;
}
.cform__row--top .cform__lbl { margin-top: calc(9.5 * var(--px)); }
.cform__badge {
  display: grid;
  place-items: center;
  width: calc(50 * var(--px));
  height: calc(24 * var(--px));
  border-radius: calc(12 * var(--px));
  background: #c7c7c2;
  color: #fff;
  font-size: calc(12 * var(--px));
  line-height: 1;
  font-weight: 400;
}
.cform__badge--req { background: #1f1f1f; }

.cform__input {
  display: block;
  flex: none;
  width: calc(861 * var(--px));
  height: calc(63 * var(--px));
  margin: 0;
  padding: 0 calc(24.5 * var(--px));
  background: #fff;
  border: 1px solid #a6a6a1;
  border-radius: calc(7.5 * var(--px));
  font: inherit;
  font-size: calc(16 * var(--px));
  line-height: calc(24 * var(--px));
  color: #1a1a1a;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cform__input::placeholder { color: #8c8c87; opacity: 1; }
.cform__input:focus {
  outline: none;
  border-color: #2a3442;
  box-shadow: 0 0 0 calc(2 * var(--px)) rgba(42, 52, 66, 0.15);
}
textarea.cform__input { resize: none; }
.cform__input--wrap {
  padding-top: calc(19.5 * var(--px));
  padding-bottom: 0;
  overflow: hidden;
  white-space: nowrap;
}
.cform__input--area {
  height: calc(279 * var(--px));
  padding-top: calc(25 * var(--px));
  padding-bottom: calc(25 * var(--px));
  resize: vertical;
}

/* 5 options, 54 each, hairline between */
.cform__radios {
  flex: none;
  width: calc(861 * var(--px));
  border: 1px solid #a6a6a1;
  border-radius: calc(7.5 * var(--px));
  overflow: hidden;
}
.cform__radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(16.5 * var(--px));
  height: calc(54 * var(--px));
  padding-left: calc(24 * var(--px));
  font-size: calc(15 * var(--px));
  color: #292929;
  cursor: pointer;
}
.cform__radio + .cform__radio { border-top: 1px solid #e0e0db; }
.cform__radio input,
.cform__agree input {
  flex: none;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  cursor: pointer;
}
.cform__radio input {
  width: calc(17 * var(--px));
  height: calc(17 * var(--px));
  border: 1px solid #474745;
  border-radius: 50%;
}
.cform__radio input:checked {
  background: radial-gradient(circle, #2a3442 0 38%, #fff 42%);
}
.cform__radio input:focus-visible,
.cform__agree input:focus-visible { outline: 2px solid #2a3442; outline-offset: 2px; }

.cform__note {
  margin-top: calc(34 * var(--px));
  font-size: calc(14 * var(--px));
  line-height: calc(20 * var(--px));
  color: #61615c;
}
.cform__agree {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12.5 * var(--px));
  margin-top: calc(40 * var(--px));
  font-size: calc(14 * var(--px));
  line-height: calc(20 * var(--px));
  color: #1f1f1f;
  cursor: pointer;
}
.cform__agree a { text-decoration: underline; text-underline-offset: 0.2em; }
.cform__agree input {
  width: calc(17 * var(--px));
  height: calc(17 * var(--px));
  border: 1px solid #4d4d4a;
  border-radius: calc(3.5 * var(--px));
}
.cform__agree input:checked {
  background: #2a3442 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
  border-color: #2a3442;
}
.cform__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--px));
  width: calc(360 * var(--px));
  height: calc(64 * var(--px));
  margin: calc(37.5 * var(--px)) auto 0;
  border-radius: calc(32 * var(--px));
  background: #141414;
  color: #fff;
  font-size: calc(18 * var(--px));
  font-weight: 500;
  transition: opacity 0.2s ease;
}
.cform__submit:hover { opacity: 0.85; }
.cform__submit-arrow {
  font-size: calc(22 * var(--px));
  font-weight: 400;
  line-height: 1;
  transition: transform 0.3s ease;
}
.cform__submit:hover .cform__submit-arrow { transform: translateX(calc(4 * var(--px))); }

/* RECRUIT banner 321 below the card, OTHER from 3204 */
.nrecruit.crecruit { --h: 984; }
.crecruit .recruit { --top: 321; }

.other.other--contact { --h: 1572; }
.other.other--contact .bigcta__visual { --y: 638; }
.other.other--contact .bigcta__en { --y: 978; }
.other.other--contact .bigcta__ja { --y: 1083; }

/* ================= CASES / INSIGHT hidden (not deleted) ================= */
/* Markup keeps every CASES / INSIGHT section, link and card, flagged with
   .is-hidden. To bring them back: drop the class and delete this block
   (the OTHER cards lose their second row, so everything below moves -168). */
.is-hidden { display: none !important; }

/* Home: the 321 gap above NEWS separated it from the (hidden) INSIGHTS band */
.news { margin-top: 0; }

.other { --h: 2267; }
.other .bigcta__visual { --y: 1333; }
.other .bigcta__en { --y: 1673; }
.other .bigcta__ja { --y: 1778; }

.other.other--sub { --h: 1381; }
.other.other--sub .bigcta__visual { --y: 591; }
.other.other--sub .bigcta__en { --y: 931; }
.other.other--sub .bigcta__ja { --y: 1036; }

.other.other--contact { --h: 1404; }
.other.other--contact .bigcta__visual { --y: 470; }
.other.other--contact .bigcta__en { --y: 810; }
.other.other--contact .bigcta__ja { --y: 915; }

/* Home: html.fx (set in <head>) means the WebGL particles will draw these
   shapes, so the static PNG/WebP art never flashes in on first load.
   hero-particles.js removes .fx again if WebGL / motion isn't available. */
html.fx .hero__star-img,
html.fx .mission__visual,
html.fx .service__visual,
html.fx .about-links .bigcta__visual { visibility: hidden; }

/* ======================= NEWS: published articles ======================= */
/* 3 real articles (F24). /news rows flow instead of sitting on fixed --y,
   so category / year / keyword filtering can hide rows without gaps. */
.narchive {
  height: auto;
  padding: calc(540 * var(--px)) calc(288 * var(--px)) calc(200 * var(--px));
}
.nrow {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
}
.nrow[hidden],
.narchive__empty[hidden] { display: none; }
.nrow.is-last { border-bottom: 1px solid rgba(38, 52, 71, 0.18); }
.narchive__empty {
  padding: calc(40 * var(--px)) 0;
  border-top: 1px solid rgba(38, 52, 71, 0.18);
  border-bottom: 1px solid rgba(38, 52, 71, 0.18);
  font-size: calc(16 * var(--px));
  color: #7c8794;
  text-align: center;
}
.nchip { cursor: pointer; }

/* TOP: 3 rows instead of 6 → RECRUIT banner and band end move up 3 × 105 */
.news { --h: 1449; }
.news .recruit { --top: 746; }

/* article sidebar is a real GET form into /news (F08) */
.nside__chip { cursor: pointer; }
.nside__chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.nside__chip:has(input:checked) { background: #253448; color: #fff; }
.nside__chip:has(input:focus-visible) { outline: 2px solid #253448; outline-offset: 2px; }
button.nside__go { border: 0; font: inherit; font-size: calc(12 * var(--px)); cursor: pointer; }
.nside__search:disabled { opacity: 1; }

/* first / last article: keep the BACK / NEXT columns in place */
.nnav__empty { flex: 1; visibility: hidden; }

/* share: X gets the article URL + title, "+" = native share / copy URL (F11) */
button.nshare__btn { padding: 0; font: inherit; cursor: pointer; }

/* article column flows (real articles are short); sidebar stays at 288,162 */
.ndetail {
  height: auto;
  min-height: calc(960 * var(--px));
  padding: calc(218 * var(--px)) calc(288 * var(--px)) calc(154 * var(--px)) calc(700 * var(--px));
}
.narticle,
.nshare {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
}
.nshare { margin-top: calc(80 * var(--px)); }
.nnav {
  position: relative;
  left: auto;
  top: auto;
  width: calc(950 * var(--px));
  margin: calc(49 * var(--px)) 0 0 calc(-18 * var(--px));
}
.nshare__msg {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: calc(10 * var(--px));
  transform: translateX(-50%);
  font-size: calc(12 * var(--px));
  color: #7c8794;
  white-space: nowrap;
}

/* F01: footer links were 80px-tall boxes 28–40px apart, so each click area
   covered the next link. .bl anchors on the baseline, so a 24px line box
   keeps every label exactly where it was and ends the overlap (PC only). */
@media (min-width: 768px) {
  .footer__nav a { --lh: 24; }
}

/* F17 / F18: contact window links inside the legal text */
.legal__sec a:not(.legal__rel) { text-decoration: underline; text-underline-offset: 0.2em; }

/* related cards: real titles can wrap to two lines */
.rncard { height: auto; min-height: calc(150 * var(--px)); }

/* ======================= 2026-09-30 修正（指摘一覧） ======================= */
/* No.1: service names must read smaller than the section heading (48) */
.svc__name { font-size: calc(40 * var(--px)); }

/* No.5: TOP NEWS band follows the number of articles (--rows on .news,
   105 per row); the RECRUIT banner inside it moves with the list */
.news { --h: calc(1134 + 105 * var(--rows, 3)); }
.news .recruit { --top: calc(431 + 105 * var(--rows, 3)); }

/* No.12: SERVICE has 4 domains now (one 400 + 40 card less) */
.svlist { --h: 2543; }

/* No.8: EXPERT card uses a portrait — keep the face in the thumbnail */
.lcard__img--expert img { object-position: 50% 22%; }
/* No.3: one service row fewer on TOP (was sized for 5 rows) */
.service { min-height: calc(1516 * var(--px)); }

/* ===================== RECRUIT CAREER PATH: 3-step slider =================== */
/* XD RECRUIT-CAREER PATH 01 / 02 / 03. The active step sits on top of the arc,
   the previous / next ones on either side; panels cross-fade (js/main.js). */
.rcareer__steps { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.rcareer__badge {
  --x: 824; --y: 183;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: left 0.8s cubic-bezier(0.65, 0, 0.25, 1), top 0.8s cubic-bezier(0.65, 0, 0.25, 1),
    width 0.8s ease, height 0.8s ease, font-size 0.8s ease, background-color 0.6s ease,
    color 0.6s ease, opacity 0.6s ease, visibility 0.6s;
}
.rcareer__badge:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.rcareer__badge.is-next,
.rcareer__badge.is-prev { background: #d9e0e9; color: #fff; }
.rcareer__badge.is-next:hover,
.rcareer__badge.is-prev:hover { background: #c5d0dd; }
.rcareer__badge.is-far-prev,
.rcareer__badge.is-far-next { background: #d9e0e9; opacity: 0; visibility: hidden; pointer-events: none; }

.rcareer__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
  z-index: 1;
}
.rcareer__panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.7s ease 0.25s, visibility 0s;
}
.rcareer__panel .rcareer__photo,
.rcareer__panel .rcareer__kicker,
.rcareer__panel .rcareer__t,
.rcareer__panel .rcareer__d,
.rcareer__panel .rcareer__chips {
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
}
.rcareer__panel:not(.is-active) .rcareer__photo { transform: translateX(calc(-32 * var(--px))) scale(0.94); }
.rcareer__panel:not(.is-active) .rcareer__kicker,
.rcareer__panel:not(.is-active) .rcareer__t,
.rcareer__panel:not(.is-active) .rcareer__d,
.rcareer__panel:not(.is-active) .rcareer__chips { transform: translateX(calc(32 * var(--px))); }

@media (min-width: 768px) {
  .rcareer__badge.is-active   { --x: 824; --y: 183; }
  .rcareer__badge.is-next     { --x: 1496; --y: 368; }
  .rcareer__badge.is-prev     { --x: 152; --y: 368; }   /* mirror of next around the active */
  .rcareer__badge.is-far-next { --x: 1760; --y: 640; }
  .rcareer__badge.is-far-prev { --x: -112; --y: 640; }

  /* XD graphics (02: 314 x 327, 03: 356 x 368), same distance to the text as in the artboards */
  .rcareer__panel--2 .rcareer__photo { --x: 465; --y: 483; --w: 314; --h: 327; }
  .rcareer__panel--3 .rcareer__photo { --x: 431; --y: 465; --w: 356; --h: 368; }
  .rcareer__panel--2 .rcareer__chip:nth-child(1),
  .rcareer__panel--2 .rcareer__chip:nth-child(2) { width: calc(150 * var(--px)); }
  .rcareer__panel--2 .rcareer__chip:nth-child(3) { width: calc(196 * var(--px)); }
  .rcareer__panel--3 .rcareer__chip:nth-child(1) { width: calc(250 * var(--px)); }
  .rcareer__panel--3 .rcareer__chip:nth-child(2) { width: calc(282 * var(--px)); }
  .rcareer__panel--3 .rcareer__chip:nth-child(3) { width: calc(188 * var(--px)); }
}

/* ===================== 2026-10-06 写真差し替え（写真差し替え.xd） ===================== */
/* No clearly visible fictitious people: new / reused photos, crops from the XD */
.recruit__collage picture { display: block; width: 100%; height: 100%; }
.recruit__shot--1 img,
.recruit__shot--2 img,
.recruit__shot--5 img { object-position: 50% 50%; }
.recruit__shot--4 img { object-position: 50% 50%; }   /* recruit-fv-1: pre-cropped, face-free */
.recruit__shot--3 img { object-position: 89% 50%; }   /* photo-corridor-logo, XD offset -.234 */
/* hero shots are pre-cropped to the XD frames (recruit-fv-*.webp) */
.rhero__shot img { transform: none; object-position: 50% 50%; }

/* 2026-10-06 — photo strips slide endlessly (items duplicated in main.js).
   Spacing moves from gap to margin-right so -50% is exactly one set. */
@keyframes stx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.company__gallery ul.is-marquee,
.rfaq__track.is-marquee {
  width: max-content;
  gap: 0;
  animation: stx-marquee 60s linear infinite;
  will-change: transform;
}
.company__gallery ul.is-marquee > li,
.rfaq__track.is-marquee > .rfaq__shot { margin-right: calc(16 * var(--px)); }
@media (prefers-reduced-motion: reduce) {
  .company__gallery ul.is-marquee,
  .rfaq__track.is-marquee { animation: none; }
}

/* 2026-10-06 — WHY STELLAXIS: 3 cards at the original 4-card size (168 each,
   gap 16 → 422–958); the photo shrinks to the same height. Even 24px
   padding above the icon row and below the copy. */
.strengths { --h: 1114; }
.strengths__photo { --h: 536; }
.strengths__photo img { object-position: 50% 45%; }
.stcard__desc { top: calc(96 * var(--px)); }

/* SERVICES contact banner: arrow sits under the copy (it overlapped the
   2nd line); box colour = the envelope image's own navy, edges feathered
   so the square image no longer shows as a lighter/darker block. */
.svcontact { background: #1f2e3f; }
.svcontact__visual img {
  -webkit-mask-image: radial-gradient(closest-side, #000 78%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 78%, transparent 100%);
}
.svcontact__en { top: calc(140 * var(--px)); }
.svcontact__go { top: calc(340 * var(--px)); }
/* PC: copy on one line (XD), arrow centred below it */
.svcontact__en {
  top: calc(190 * var(--px));
  font-size: calc(52 * var(--px));
  line-height: calc(52 * var(--px));
  white-space: nowrap;
}
.svcontact__go { top: calc(299 * var(--px)); }

/* 2026-10-08 — 資本金 row hidden: gallery + band move up by one row (89) */
.company { --h: 1434; }
.company__gallery { top: calc(927 * var(--px)); }