/* =========================================================
   QUONTIER Recruiting Site
   Design tokens derived from Figma export (PC / SP)
   ========================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

/* ---------- Design Tokens ---------- */
:root {
  /* Colors */
  --c-white: #FFFFFF;
  --c-cod: #1C1C1C;          /* Cod Gray – primary text */
  --c-dove: #636363;         /* Dove Gray – secondary text */
  --c-orange: #EB5E00;       /* Quontier Orange */
  --c-vermilion: #F7481A;
  --c-vermilion-10: rgba(255, 65, 22, 0.1);
  --c-pale: #F8F4F3;         /* Extremely pale orange – section bg */
  --c-medium-orange: #E79270;
  --c-mercury: #EAEAEA;
  --c-silver: #A9A9A9;
  --c-light-orange: #F7DDCA;
  --c-light-orange-border: #E9AB88;
  --c-black-20: rgba(0, 0, 0, 0.2);
  --c-black-10: rgba(0, 0, 0, 0.1);

  /* Type families */
  --f-en: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Avenir Next', 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --f-jp: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --f-poppins: 'Poppins', var(--f-en);

  /* Layout */
  --container: 1440px;
  --gutter: 240px;
  --radius: 8px;
  --radius-lg: 16px;

  /* Arrow glyph (rightward) */
  --arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'><path d='M16.06 0 20 4 16.06 8 15.35 7.3 18.2 4.5 0 4.5 0 3.5 18.2 3.5 15.35 0.7Z'/></svg>");
}

/* ---------- Arrow glyphs (CSS-drawn, inherit currentColor) ---------- */
.arrow::after, .link-arrow::after {
  content: ""; display: block; width: 18px; height: 7px; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--arrow) no-repeat center / contain;
          mask: var(--arrow) no-repeat center / contain;
}
.link-arrow.light { color: #fff; }

/* SP-only line break: hidden on desktop, shown in mobile media query */
.sp-br { display: none; }
.gnav-list .chev { color: var(--c-orange); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--c-cod);
  background: var(--c-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* ---- Fit-to-width scaling (every section scales together like Figma's "幅に合わせる") ----
   Desktop (≥769): 1920 canvas scales to the viewport, capped at 1x and centred above 1920.
   Mobile (≤768): 393 canvas scales, capped at ~1.12x and centred on wider phones/tablets. */
html { background: var(--c-white); }
/* ≥394px: desktop 1920 canvas — shrinks to fit, capped at 1x & centred above 1920 */
@media (min-width: 768px) {
  body { width: 1920px; margin-inline: auto; }
}
@media (min-width: 768px) and (max-width: 1920px) {
  body { zoom: calc(100vw / 1920px); }
}
@media (min-width: 1921px) {
  body { zoom: 1; }
}
/* ≤393px: switch to the mobile 393 canvas (scales to fit; never exceeds 1x) */
@media (max-width: 767px) {
  body { width: 393px; zoom: calc(100vw / 393px); }
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* ---------- Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 0;
}
@media (max-width: 767px) { .container { padding-inline: 24px; } }
.en { font-family: var(--f-en); }
.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;
}

/* ---------- Placeholder helpers ---------- */
/* <img> replacement: labelled grey box */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(45deg, #eceae7 0 12px, #e4e1dd 12px 24px);
  border-radius: inherit;
  overflow: hidden;
  min-height: 40px;
}
.ph::after {
  content: attr(data-img);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
  font-family: var(--f-en);
  font-size: 11px; font-weight: 500; letter-spacing: .3px;
  color: #8a8378; text-align: center; word-break: break-all;
  background: rgba(255,255,255,.25);
}
/* Background-image placeholder for hero / full-bleed sections */
.ph-bg { position: relative; background: #cfcac3; }
.ph-bg::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 20px, rgba(0,0,0,.08) 20px 40px);
}
.ph-bg .ph-label {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  font-family: var(--f-en); font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.35); padding: 4px 8px; border-radius: 4px;
  letter-spacing: .3px;
}

/* =========================================================
   Focus icon (three orange chevrons w/ fading opacity)
   ========================================================= */
.focus-icon { display: inline-block; width: 53.54px; height: 10.71px; flex: none; }

/* Section eyebrow tag (orange bar + bold label) */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0;
  font-family: var(--f-body); font-weight: 700;
  font-size: 16px; line-height: 1.4; color: var(--c-cod);
}
.eyebrow::before {
  content: ""; width: 53px; height: 32px; flex: none;
  background: var(--c-orange); opacity: .2; margin-right: -16px;
  clip-path: polygon(100% 100%, 57.96% 100%, 0% 0%, 42.04% 0%);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn-outline {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 24px; min-width: 300px; padding: 20px 24px 20px 32px;
  border: 2px solid var(--c-cod); border-radius: 100px;
  font-family: var(--f-body); font-weight: 500; font-size: 20px;
  letter-spacing: .8px; color: var(--c-cod);
  transition: background .2s, color .2s, border-color .2s;
}
.btn-outline .arrow { display: inline-flex; align-items: center; height: 28.5px; border-left: 1px solid rgba(28,28,28,.3); padding-left: 20px; }
/* black/white -> orange on hover */
.btn-outline:hover { background: var(--c-orange); color: var(--c-white); border-color: var(--c-orange); }
.btn-outline:hover .arrow { border-left-color: rgba(255,255,255,.3); }

.btn-fill {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 24px; min-width: 300px; padding: 0 24px 0 32px; height: 70px;
  background: var(--c-white); border-radius: 100px;
  font-family: var(--f-body); font-weight: 700; font-size: 16px;
  color: var(--c-orange);
  transition: background .2s, color .2s;
}
.btn-fill .arrow { display: inline-flex; align-items: center; height: 28.5px; border-left: 1px solid rgba(235,94,0,.3); padding-left: 20px; }
/* white/orange -> orange on hover (lift removed) */
.btn-fill:hover { background: var(--c-orange); color: var(--c-white); }
.btn-fill:hover .arrow { border-left-color: rgba(255,255,255,.3); }

.btn-orange {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 0 24px 0 32px; height: 56px;
  background: var(--c-orange); border-radius: 100px;
  font-family: var(--f-body); font-weight: 700; font-size: 16px; color: #fff;
  width: 100%;
  transition: background .2s, color .2s, box-shadow .2s;
}
.btn-orange .arrow { display: inline-flex; align-items: center; height: 28.5px; border-left: 1px solid rgba(255,255,255,.3); padding-left: 20px; }
/* orange -> white/orange on hover */
.btn-orange:hover { background: var(--c-white); color: var(--c-orange); box-shadow: inset 0 0 0 2px var(--c-orange); }
.btn-orange:hover .arrow { border-left-color: rgba(235,94,0,.3); }

/* hover: arrow + divider nudge left (like View More) */
.btn-outline .arrow, .btn-fill .arrow, .btn-orange .arrow, .nex-more .arrow { transition: transform .3s ease, border-left-color .2s ease; }
.btn-outline:hover .arrow, .btn-fill:hover .arrow, .btn-orange:hover .arrow, .nex-more:hover .arrow { transform: translateX(-8px); }

/* small pill arrow (view more) */
.link-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 29px; border: 1px solid var(--c-cod);
  border-radius: 100px; transition: background .2s;
}
.link-arrow svg path { fill: var(--c-cod); }
.link-arrow.light { border-color: #fff; }
.link-arrow.light svg path { fill: #fff; }

.view-more {
  display: inline-flex; align-items: center;
  font-family: var(--f-en); font-weight: 500; font-size: 16px;
  color: var(--c-cod); transition: color .2s ease;
}
/* Figma initial position: "View More" + arrow right-aligned, gap 16px.
   Hover: text slides toward the arrow, arrow pill fills orange, text turns orange. */
.view-more .link-arrow { margin-left: 16px; transition: margin-left .35s ease, background .2s ease, border-color .2s ease; }
.view-more:hover { color: var(--c-orange); }
.view-more:hover .link-arrow { margin-left: 8px; background: var(--c-orange); border-color: var(--c-orange); }
.view-more:hover .link-arrow::after { background-color: #fff; }

/* =========================================================
   Header (fixed)
   ========================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  height: 160px; padding-inline: 40px; background: transparent;
}
@media (max-width: 767px) {
  /* Figma mobile toolbar (1:2531): frosted white bar, 88% opacity */
  .site-header { height: 72px; padding-inline: 20px; background: rgba(255,255,255,0.88); -webkit-backdrop-filter: saturate(180%) blur(2px); backdrop-filter: saturate(180%) blur(2px); }
}
/* in-page jump targets clear the fixed header */
/* #press → vis-detail-txt (below 300px section padding), #nex → nex-head (inside section) */
#press { scroll-margin-top: 160px; }
#nex   { scroll-margin-top: 180px; }
@media (max-width: 767px) { #press, #nex { scroll-margin-top: 100px; } }
.brand { display: inline-flex; align-items: center; gap: 24px; }
.brand .logo-img { height: 51px; width: auto; display: block; }
.brand .tagline {
  font-family: var(--f-poppins); font-size: 16px; line-height: 24px; letter-spacing: .8px; color: var(--c-cod);
}
@media (max-width: 767px) {
  .brand { gap: 8px; }
  .brand .logo-img { height: 32px; }
}
.gnav-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  width: 118.75px; height: 47.5px; background: var(--c-cod); border-radius: 100px;
}
@media (max-width: 767px) { .gnav-toggle { width: 80px; height: 36px; } }
.gnav-toggle .bars { position: relative; width: 19px; height: 10px; }
.gnav-toggle .bars span {
  position: absolute; left: 0; right: 0; height: 2px; background: #fff; transition: transform .3s, top .3s;
}
.gnav-toggle .bars span:nth-child(1) { top: 0; }
.gnav-toggle .bars span:nth-child(2) { top: 8px; }

/* =========================================================
   Global nav overlay
   ========================================================= */
/* dimmed overlay */
.gnav {
  position: fixed; inset: 0; z-index: 70; overflow: hidden;
  background: rgba(28,28,28,.45);
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
.gnav.open { opacity: 1; visibility: visible; }
/* right-side white panel (Figma: right 1440px, dimmed left) */
.gnav-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 1440px; max-width: 100%;
  background: #fff;
  transform: translateX(100%);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  overflow-y: auto;
}
.gnav.open .gnav-panel { transform: translateX(0); }
.gnav-inner { display: flex; gap: 160px; align-items: flex-start; padding: 220px 130px 80px; }
.gnav-close {
  position: absolute; top: 56px; right: 40px; z-index: 2;
  width: 118.75px; height: 47.5px; border-radius: 100px; background: var(--c-cod);
  display: inline-flex; align-items: center; justify-content: center;
}
.gnav-close::before, .gnav-close::after {
  content: ""; position: absolute; width: 19px; height: 2px; background: #fff;
}
.gnav-close::before { transform: rotate(45deg); }
.gnav-close::after { transform: rotate(-45deg); }

.gnav-col { width: 400px; flex: none; }
.gnav-entry { width: 620px; flex: none; }
.gnav-col .col-label, .gnav-entry .col-label {
  font-family: var(--f-en); font-size: 16px; letter-spacing: .48px; color: var(--c-cod);
  margin-bottom: 24px;
}
/* Contents list: no horizontal lines, items spaced, vertical divider before orange arrow */
.gnav-list { display: flex; flex-direction: column; gap: 37.75px; }
.gnav-list li { border: 0; }
.gnav-list a { display: flex; align-items: stretch; justify-content: space-between; gap: 0; padding: 0; }
.gnav-txt { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.gnav-list .en-title {
  font-family: var(--f-en); font-weight: 600; font-size: 32px;
  letter-spacing: .8px; line-height: 40px; color: var(--c-cod); transition: color .2s;
}
.gnav-list .jp-sub { font-family: var(--f-body); font-weight: 500; font-size: 16px; line-height: 24px; color: var(--c-cod); }
.gnav-list a:hover .en-title { color: var(--c-orange); }
.gnav-list .chev {
  flex: none; width: 36.5px; display: inline-flex; align-items: center; justify-content: flex-end;
  border-left: 1px solid var(--c-mercury); color: var(--c-orange);
}
.gnav-list .chev::after { width: 20px; height: 8px; }
.gnav-entry .btn-orange { width: 380px; height: 70px; }
.gnav-entry .entry-item { margin-bottom: 40px; }
.gnav-entry .entry-item:last-child { margin-bottom: 0; }
.gnav-entry .entry-item p { font-family: var(--f-body); font-size: 16px; line-height: 32px; color: var(--c-cod); margin-top: 16px; text-align: justify; }

/* =========================================================
   HERO carousel
   ========================================================= */
/* 1920-based scale unit: 1 design px = --hpx (caps at 1px above 1920) */
.hero { position: relative; --hpx: 1px; }
.hero-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: start;
  height: calc(1040 * var(--hpx)); overflow: hidden;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  color: var(--c-cod);
}
.hero-slide.light { color: var(--c-white); }
.hero-photo { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #23282b; }
.hero-photo img { position: absolute; max-width: none; display: block; }
.hero-photo .hero-photo-blend { inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; opacity: .25; }
/* slide 4 — faithful to Figma (node 1:2610): base handshake photo, then mist
   (screen 25%), then left→transparent gradient (color-burn), all in the
   background group behind the text; plus a subtle noise grain over the frame. */
.slide4 .hero-photo .hero-mist { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; opacity: .25; pointer-events: none; }
.slide4 .hero-photo .grad-burn { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 55.833%); mix-blend-mode: color-burn; pointer-events: none; }
/* Figma noise effect (モノ / white / density 100% / 25%): white per-pixel grain,
   normal blend, element opacity 0.25 == Figma's color-opacity 25%. */
.slide4 .hero-noise { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .25;
  background-image: url("../images/hero-noise.png"); background-repeat: repeat; background-size: 600px 600px; }

.hero-slide .overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.overlay.grad-top  { background: linear-gradient(180deg, rgba(0,39,50,.2) 0%, rgba(161,194,203,0) 11.154%); }
.overlay.grad-diag { background: linear-gradient(51.43deg, rgba(0,0,0,.5) 0.727%, rgba(0,0,0,0) 78.323%); }
.overlay.grad-left { background: linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 55.833%); }

.hs-inner {
  position: absolute; z-index: 3;
  top: calc(240 * var(--hpx)); left: calc(240 * var(--hpx));
  width: calc(1440 * var(--hpx));
}
.hero .text-stack {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(24 * var(--hpx)); width: calc(700 * var(--hpx)); max-width: 100%;
}
.hero .text-stack.w800 { width: calc(800 * var(--hpx)); }
.slide2 .content-row { display: flex; align-items: stretch; justify-content: space-between; width: 100%; gap: 0; }

.hero .tag { display: flex; align-items: center; gap: calc(16 * var(--hpx)); }
.hero .focus-icon { width: calc(53.54 * var(--hpx)); height: calc(10.71 * var(--hpx)); }
.hero .focus-label {
  font-family: var(--f-en); font-weight: 400;
  font-size: calc(24 * var(--hpx)); line-height: calc(32 * var(--hpx)); letter-spacing: calc(0.8 * var(--hpx));
}
.hero-h {
  font-family: var(--f-body); font-weight: 500; margin: 0;
  font-size: calc(64 * var(--hpx)); line-height: calc(88 * var(--hpx)); letter-spacing: calc(2 * var(--hpx));
  white-space: nowrap;
}
.hero-h .lat { font-family: var(--f-en); font-weight: 500; }
.hero .lead {
  font-family: var(--f-body); font-weight: 400;
  font-size: calc(20 * var(--hpx)); letter-spacing: calc(0.4 * var(--hpx));
}
.hero .lead p { margin: 0; line-height: calc(32 * var(--hpx)); }

/* arrow pill (hero) */
.hero .link-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(68 * var(--hpx)); height: calc(29 * var(--hpx));
  border: 1px solid currentColor; border-radius: 100px;
  transition: background .2s, border-color .2s, color .2s;
}
/* hover: the mid-line arrow fills orange */
.hero .link-arrow:hover { background: var(--c-orange); border-color: var(--c-orange); color: #fff; }
.hero .link-arrow::after {
  content: ""; display: block;
  width: calc(15.44 * var(--hpx)); height: calc(6 * var(--hpx));
  background: currentColor;
  -webkit-mask: var(--arrow) no-repeat center / contain; mask: var(--arrow) no-repeat center / contain;
}

/* press-release card (slide 2) */
.slide2 .pr-card {
  width: calc(740 * var(--hpx)); background: rgba(255,255,255,.9);
  border-radius: calc(8 * var(--hpx)); padding: calc(32 * var(--hpx)) calc(40 * var(--hpx)) calc(40 * var(--hpx));
  display: flex; flex-direction: column; justify-content: space-between; gap: calc(16 * var(--hpx));
  color: var(--c-cod);
}
.pr-card .line { display: flex; align-items: center; justify-content: flex-end; gap: calc(16 * var(--hpx)); }
.pr-card .line b {
  font-family: var(--f-body); font-weight: 700; color: var(--c-dove); white-space: nowrap;
  font-size: calc(24 * var(--hpx)); line-height: calc(32 * var(--hpx)); letter-spacing: calc(0.8 * var(--hpx));
}
.pr-card .dash { flex: 1; border-top: 1px dashed var(--c-black-20); }
.pr-card .link-row { display: flex; align-items: flex-start; flex: 1; }
.pr-card .thumb { width: calc(240 * var(--hpx)); height: calc(240 * var(--hpx)); border-radius: calc(8 * var(--hpx)); flex: none; }
.pr-card .cstack { flex: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
.pr-card .cstack .title { padding-left: calc(24 * var(--hpx)); }
.pr-card .cstack .title p {
  font-family: var(--f-body); font-weight: 400; text-align: justify; margin: 0;
  font-size: calc(20 * var(--hpx)); line-height: calc(32 * var(--hpx)); letter-spacing: calc(0.4 * var(--hpx));
}
.pr-card .cstack .arr { display: flex; justify-content: flex-end; padding-left: calc(16 * var(--hpx)); }

/* company chips + arrow (slide 4) */
.slide4 .companies {
  display: flex; align-items: center; gap: calc(8 * var(--hpx));
  padding-top: calc(25 * var(--hpx)); border-top: 1px dashed #fff; width: calc(800 * var(--hpx));
}
.company-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(4 * var(--hpx)) calc(24 * var(--hpx)); background: #fff; border-radius: 100px; text-align: center; flex: none;
}
.company-chip.grow { flex: 1 0 0; min-width: 0; }
.company-chip b { font-family: var(--f-body); font-weight: 400; color: var(--c-cod); white-space: nowrap; font-size: calc(14 * var(--hpx)); line-height: calc(26 * var(--hpx)); }
.company-chip span { font-family: var(--f-body); font-weight: 400; color: var(--c-cod); font-size: calc(12 * var(--hpx)); line-height: calc(16 * var(--hpx)); }
.slide4 .companies .arr { padding-left: calc(49.78 * var(--hpx)); }

.hero-dots { position: absolute; left: 50%; bottom: calc(40 * var(--hpx)); transform: translateX(-50%); z-index: 5; display: flex; gap: calc(16 * var(--hpx)); }
.hero-dots button { width: calc(14 * var(--hpx)); height: calc(14 * var(--hpx)); border-radius: 50%; background: rgba(28,28,28,.25); }
.hero-dots button.active { background: var(--c-orange); }

/* =========================================================
   PHILOSOPHY
   ========================================================= */
.philosophy {
  position: relative; --hpx: 1px; overflow: hidden;
  padding: calc(200 * var(--hpx)) 0 calc(300 * var(--hpx));
  display: flex; flex-direction: column; align-items: center;
}
/* Section-sized image (1920×1659) with the fade + ~25% opacity baked into its
   own alpha channel — fill the section, CSS opacity 1 shows it as designed. */
.philosophy-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; z-index: 0; pointer-events: none; }
.philosophy-inner {
  position: relative; z-index: 1; width: calc(1040 * var(--hpx)); max-width: calc(100% - 48px);
  display: flex; flex-direction: column; align-items: center; gap: calc(120 * var(--hpx));
}
.philosophy .text-group { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: calc(8 * var(--hpx)); }
.philosophy .the0th { font-family: var(--f-en); font-weight: 600; font-size: calc(80 * var(--hpx)); line-height: 1.2; color: var(--c-cod); }
.philosophy .ph-sub { font-family: var(--f-body); font-weight: 600; font-size: calc(56 * var(--hpx)); line-height: 1.2; color: var(--c-cod); }
.philosophy .ph-paragraph { width: 100%; display: flex; flex-direction: column; gap: calc(48 * var(--hpx)); }
.philosophy .ph-body p {
  margin: 0; font-family: var(--f-body); font-weight: 400; text-align: justify; color: var(--c-cod);
  font-size: calc(28 * var(--hpx)); line-height: calc(54 * var(--hpx)); letter-spacing: calc(0.224 * var(--hpx));
}
.philosophy .ph-sign { text-align: right; font-family: var(--f-body); color: var(--c-cod); font-size: calc(28 * var(--hpx)); line-height: calc(54 * var(--hpx)); }
@media (max-width: 767px) {
  .philosophy { --hpx: 1px; padding: 100px 24px 150px; }
  .philosophy-inner { width: 100%; max-width: none; gap: 40px; }
  .philosophy .text-group { gap: 8px; }
  .philosophy .the0th { font-size: 32px; line-height: 40px; letter-spacing: .8px; }
  .philosophy .ph-sub { font-size: 28px; line-height: 40px; }
  .philosophy .ph-body p { font-size: 14px; line-height: 26px; }
  .philosophy .ph-sign { font-size: 16px; line-height: 32px; }
  /* mobile bg image (Philosophy_mobail: fade baked into its alpha → opacity 1) */
  .philosophy-bg { object-fit: cover; object-position: bottom; opacity: 1; }
}

/* =========================================================
   VISION
   ========================================================= */
.vision { --hpx: 1px; padding: calc(300 * var(--hpx)) 0; display: flex; flex-direction: column; align-items: center; }
.vision .eyebrow::before { width: calc(53 * var(--hpx)); height: calc(32 * var(--hpx)); }
.vision .eyebrow { font-size: calc(16 * var(--hpx)); }

/* Block A */
.vis-lede { width: calc(1440 * var(--hpx)); display: flex; gap: calc(120 * var(--hpx)); align-items: center; }
.vis-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: calc(32 * var(--hpx)); }
.vis-h3 { font-family: var(--f-body); font-weight: 600; font-size: calc(48 * var(--hpx)); line-height: calc(72 * var(--hpx)); letter-spacing: calc(2 * var(--hpx)); color: var(--c-cod); margin: 0; }
.vis-body { display: flex; flex-direction: column; gap: calc(40 * var(--hpx)); }
.vis-body p { margin: 0; font-family: var(--f-body); font-size: calc(20 * var(--hpx)); line-height: calc(40 * var(--hpx)); letter-spacing: calc(0.8 * var(--hpx)); text-align: justify; color: var(--c-cod); }
.vis-diagram { width: calc(740 * var(--hpx)); height: calc(740 * var(--hpx)); overflow: hidden; flex: none; }
.vis-diagram img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Block B */
.vis-fy { width: 100%; display: flex; align-items: center; padding: calc(160 * var(--hpx)) 0; }
.vis-fy-img { width: calc(1200 * var(--hpx)); height: calc(300 * var(--hpx)); border-radius: 0 calc(16 * var(--hpx)) calc(16 * var(--hpx)) 0; overflow: hidden; flex: none; }
.vis-fy-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vis-fy-txt { flex: 1; padding-left: calc(80 * var(--hpx)); display: flex; flex-direction: column; gap: calc(24 * var(--hpx)); }
.vis-focus { display: inline-flex; align-items: center; gap: calc(16 * var(--hpx)); font-family: var(--f-en); font-size: calc(24 * var(--hpx)); line-height: calc(32 * var(--hpx)); letter-spacing: calc(0.8 * var(--hpx)); color: var(--c-cod); }
.vis-fy-txt h4 { font-family: var(--f-body); font-weight: 600; font-size: calc(32 * var(--hpx)); line-height: 1.375; color: var(--c-cod); margin: 0; }
.vision .focus-icon { width: calc(53.54 * var(--hpx)); height: calc(10.71 * var(--hpx)); }

/* Block C */
.vis-detail { position: relative; width: calc(1440 * var(--hpx)); min-height: calc(1008 * var(--hpx)); }
.vis-detail-img { position: absolute; left: calc(860 * var(--hpx)); top: calc(62 * var(--hpx)); width: calc(820 * var(--hpx)); height: calc(946 * var(--hpx)); border-radius: calc(16 * var(--hpx)) 0 0 calc(16 * var(--hpx)); overflow: hidden; }
.vis-detail-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vis-detail-txt { position: relative; z-index: 1; width: calc(740 * var(--hpx)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(32 * var(--hpx)); }
.vis-sub { margin: 0; font-family: var(--f-body); font-weight: 500; font-size: calc(24 * var(--hpx)); line-height: calc(32 * var(--hpx)); letter-spacing: calc(0.8 * var(--hpx)); color: var(--c-orange); }
.vis-body2 { display: flex; flex-direction: column; width: 100%; }
.vis-body2 p { margin: 0; font-family: var(--f-body); font-size: calc(20 * var(--hpx)); line-height: calc(40 * var(--hpx)); letter-spacing: calc(0.8 * var(--hpx)); text-align: justify; color: var(--c-cod); }
.vis-links { display: flex; flex-direction: column; gap: calc(32 * var(--hpx)); width: 100%; margin-top: calc(32 * var(--hpx)); }
/* Figma link_PC_release: the label + dashed line is absolutely positioned at
   top:0 (level with the image top), NOT stacked above the row. */
.vp-link { position: relative; display: block; width: 100%; text-decoration: none; }
.vp-line { position: absolute; top: 0; left: 0; right: calc(104 * var(--hpx)); display: flex; align-items: center; gap: calc(16 * var(--hpx)); padding-left: calc(149 * var(--hpx)); }
.vp-line b { font-family: var(--f-body); font-weight: 700; font-size: calc(16 * var(--hpx)); color: var(--c-dove); white-space: nowrap; }
.vp-line .dash { flex: 1; border-top: 1px dashed rgba(0,0,0,.2); }
.vp-row { display: flex; align-items: flex-start; }
.vp-textcol { flex: 1; min-width: 0; display: flex; align-items: flex-start; }
.vp-thumb { width: calc(120 * var(--hpx)); height: calc(120 * var(--hpx)); border-radius: calc(8 * var(--hpx)); object-fit: cover; flex: none; }
.vp-title { flex: 1; margin: 0; padding: calc(40 * var(--hpx)) 0 0 calc(32 * var(--hpx)); font-family: var(--f-body); font-size: calc(20 * var(--hpx)); line-height: calc(32 * var(--hpx)); letter-spacing: calc(0.4 * var(--hpx)); text-align: justify; color: var(--c-cod); transition: color .2s; }
.vp-arrow { margin: calc(40 * var(--hpx)) 0 0 calc(48 * var(--hpx)); flex: none; color: var(--c-cod); transition: background .2s, border-color .2s, color .2s; }
/* hover: press/topics link text + arrow turn orange (#EB5E00) */
.vp-link:hover .vp-title { color: var(--c-orange); }
.vp-link:hover .vp-arrow { background: var(--c-orange); border-color: var(--c-orange); color: #fff; }
.vision .link-arrow { width: calc(68 * var(--hpx)); height: calc(29 * var(--hpx)); border: 1px solid currentColor; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; }
.vision .link-arrow::after { width: calc(15.44 * var(--hpx)); height: calc(6 * var(--hpx)); }

@media (max-width: 767px) {
  .vision { --hpx: 1px; padding: 150px 24px; gap: 80px; align-items: flex-start; }
  .vision .eyebrow { font-size: 12px; }
  .vision .eyebrow::before { width: 27px; height: 16px; margin-right: -8px; }
  /* Block A: eyebrow → heading → image → body (Figma 1:2139 order) */
  .vis-lede { width: 100%; flex-direction: column; align-items: flex-start; gap: 24px; }
  .vis-txt { display: contents; }
  .vis-lede .eyebrow { order: 1; }
  .vis-h3 { font-size: 28px; line-height: 40px; letter-spacing: 0; order: 2; }
  .vis-lede .vis-diagram { width: 100%; height: auto; aspect-ratio: 1/1; order: 3; }
  .vis-body { gap: 40px; order: 4; }
  .vis-body p, .vis-body2 p, .vp-title { font-size: 14px; line-height: 26px; letter-spacing: 0; }
  /* FY2026: image flush to the left screen edge + text row */
  .vis-fy { flex-direction: row; align-items: center; gap: 16px; padding: 0; width: 100%; }
  .vis-fy-img { width: 180px; height: 150px; border-radius: 0 8px 8px 0; margin-left: -24px; flex: none; }
  .vis-fy-txt { padding-left: 0; gap: 8px; }
  .vis-focus { font-size: 12px; gap: 8px; white-space: nowrap; }
  .vis-fy-txt h4 { font-size: 18px; line-height: 26px; }
  .vision .focus-icon { width: 54px; height: 11px; }
  /* 事業共創 detail (Figma 1:2159): eyebrow → h3 → sub → body → image → links.
     Image bleeds to the right screen edge (rounded left corners). */
  .vis-detail { width: 100%; min-height: 0; display: flex; flex-direction: column; gap: 24px; }
  .vis-detail-txt { display: contents; }
  .vis-detail .eyebrow { order: 1; }
  .vis-detail .vis-h3 { order: 2; }
  .vis-detail .vis-sub { order: 3; font-size: 16px; line-height: 26px; letter-spacing: 0; }
  .vis-detail .vis-body2 { order: 4; }
  .vis-detail-img { position: static; width: calc(100% + 24px); margin-right: -24px; height: auto; aspect-ratio: 369/426; border-radius: 16px 0 0 16px; order: 5; }
  .vis-links { gap: 16px; margin-top: 0; order: 6; }
  /* press / topics (Figma 1:2168): label, 16px gap, then [80px thumb] + [title over right-aligned arrow] */
  .vp-link { width: 100%; display: flex; flex-direction: column; gap: 16px; }
  .vp-line { padding-left: 0; position: static; }
  .vp-line b { font-size: 16px; }
  .vp-row { align-items: flex-start; }
  .vp-textcol { flex: 1; min-width: 0; flex-direction: column; align-items: flex-end; gap: 8px; }
  .vp-title { padding: 0 0 0 16px; font-size: 14px; line-height: 22px; letter-spacing: 0; width: 100%; }
  .vp-thumb { width: 80px; height: 80px; }
  .vp-arrow { margin: 0; }
}

/* =========================================================
   Section heading (large)
   ========================================================= */
.section-head { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.section-head .display {
  font-family: var(--f-en); font-weight: 600; font-size: 88px; line-height: 1.05;
}
.section-head.jp .display { font-family: var(--f-en); }
.section-intro { max-width: 800px; font-size: 20px; line-height: 1.6; letter-spacing: .4px; text-align: justify; }

/* =========================================================
   QUONTIER NEX
   ========================================================= */
.nex { --hpx: 1px; background: var(--c-pale); padding: calc(300 * var(--hpx)) 0; display: flex; flex-direction: column; align-items: center; }
.nex .eyebrow { font-size: calc(16 * var(--hpx)); }
.nex .eyebrow::before { width: calc(53 * var(--hpx)); height: calc(32 * var(--hpx)); }
/* Figma: heading + intro are top-aligned in a 240px-tall row, then the slider */
.nex-head { width: calc(1440 * var(--hpx)); display: flex; align-items: flex-start; min-height: calc(240 * var(--hpx)); }
.nex-heading { width: calc(640 * var(--hpx)); padding-bottom: 0; display: flex; flex-direction: column; gap: calc(8 * var(--hpx)); }
.nex-title { margin: 0; font-family: var(--f-en); font-weight: 600; font-size: calc(88 * var(--hpx)); line-height: calc(96 * var(--hpx)); color: var(--c-cod); }
.nex-intro { flex: 1; padding-top: calc(24 * var(--hpx)); }
.nex-intro p { margin: 0; font-family: var(--f-body); font-size: calc(20 * var(--hpx)); line-height: calc(32 * var(--hpx)); letter-spacing: calc(0.4 * var(--hpx)); text-align: justify; color: var(--c-cod); }

/* Continuous marquee (like Environment): the 4 cards drift left and loop
   seamlessly; a click pauses / resumes the motion (handled in main.js). */
.nex-slider { width: 100%; overflow: hidden; padding-bottom: calc(16 * var(--hpx)); cursor: pointer; }
.nex-track { display: flex; align-items: flex-start; width: max-content; animation: nex-marquee 55s linear infinite; will-change: transform; }
.nex-track.paused { animation-play-state: paused; }
@keyframes nex-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nex-track { animation: none; } }
.nex-item { flex: none; padding: 0 calc(24 * var(--hpx)); }
.nex-item--offset { padding-top: calc(95 * var(--hpx)); }
.nex-card { width: calc(480 * var(--hpx)); display: flex; flex-direction: column; text-decoration: none; }
.nex-card .photo {
  width: calc(480 * var(--hpx)); height: calc(640 * var(--hpx)); border-radius: calc(16 * var(--hpx));
  position: relative; overflow: hidden; background: linear-gradient(180deg,#fff 0%, rgba(255,255,255,0) 100%);
}
.nex-card .photo .tri { position: absolute; left: 0; right: 0; top: 25%; z-index: 0; width: 100%; height: auto; }
.nex-card .photo .person { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; filter: grayscale(1); transition: transform .4s ease; transform-origin: center bottom; }
/* 黒川さん(4枚目)は縦長で頭が切れるため、頭が収まる位置に（複製にも効くようクラス指定） */
.nex-item--kurokawa .nex-card .photo .person { object-position: center 12%; }
/* hover: the person photo scales up slightly in place (the white/orange triangle stays put) */
.nex-card:hover .photo .person { transform: scale(1.06); }
.nex-content { display: flex; align-items: flex-end; gap: calc(16 * var(--hpx)); width: calc(480 * var(--hpx)); margin-top: calc(-32 * var(--hpx)); position: relative; z-index: 2; }
.nex-inner { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.nex-inner .num { font-family: var(--f-en); font-weight: 500; font-size: calc(56 * var(--hpx)); line-height: calc(56 * var(--hpx)); letter-spacing: calc(-0.8 * var(--hpx)); color: var(--c-orange); padding-bottom: calc(16 * var(--hpx)); }
.nex-name { margin: 0; font-family: var(--f-body); font-weight: 700; font-size: calc(28 * var(--hpx)); line-height: calc(32 * var(--hpx)); letter-spacing: calc(0.8 * var(--hpx)); color: var(--c-cod); padding-top: calc(16 * var(--hpx)); }
.nex-role { font-family: var(--f-body); font-weight: 700; font-size: calc(16 * var(--hpx)); color: var(--c-cod); padding: calc(16 * var(--hpx)) 0; }
.nex-bio { margin: 0; font-family: var(--f-body); font-size: calc(20 * var(--hpx)); line-height: calc(32 * var(--hpx)); letter-spacing: calc(0.4 * var(--hpx)); text-align: justify; color: var(--c-cod); padding-bottom: calc(24 * var(--hpx)); }
.nex-content .link-arrow { flex: none; color: var(--c-cod); margin-bottom: calc(8 * var(--hpx)); width: calc(68 * var(--hpx)); height: calc(29 * var(--hpx)); border: 1px solid currentColor; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s, color .2s; }
/* hover anywhere on the card fills the button orange */
.nex-card:hover .nex-content .link-arrow { background: var(--c-orange); border-color: var(--c-orange); color: #fff; }
.nex-content .link-arrow::after { width: calc(15.44 * var(--hpx)); height: calc(6 * var(--hpx)); }
.nex-footer { width: calc(1440 * var(--hpx)); display: flex; justify-content: flex-end; padding-top: calc(64 * var(--hpx)); }
.nex-more { display: inline-flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--hpx)); width: calc(380 * var(--hpx)); padding: calc(24 * var(--hpx)) calc(24 * var(--hpx)) calc(24 * var(--hpx)) calc(32 * var(--hpx)); border: 2px solid var(--c-cod); border-radius: 100px; font-family: var(--f-body); font-weight: 500; font-size: calc(20 * var(--hpx)); letter-spacing: calc(0.8 * var(--hpx)); color: var(--c-cod); transition: background .2s, color .2s, border-color .2s; }
.nex-more:hover { background: var(--c-orange); color: #fff; border-color: var(--c-orange); }
.nex-more .arrow { display: inline-flex; align-items: center; height: calc(28.5 * var(--hpx)); border-left: 1px solid rgba(28,28,28,.3); padding-left: calc(20 * var(--hpx)); }
.nex-more:hover .arrow { border-left-color: rgba(255,255,255,.3); }
.nex-more .arrow::after { width: calc(20 * var(--hpx)); height: calc(8 * var(--hpx)); }

@media (max-width: 767px) {
  .nex { --hpx: 1px; padding: 150px 0; }
  .nex-head { width: 100%; flex-direction: column; align-items: stretch; gap: 24px; padding: 0 24px; }
  .nex-heading { width: 100%; padding-bottom: 0; gap: 8px; }
  .nex-title { font-size: 32px; line-height: 44px; }
  /* match What We Do heading: small eyebrow + ribbon (Figma 1:2172) */
  .nex .eyebrow { font-size: 12px; }
  .nex .eyebrow::before { width: 27px; height: 16px; margin-right: -8px; }
  .nex-intro p { letter-spacing: 0; }
  /* SP: static swipeable slider (no marquee), starts at card 01 (Figma 1:2180) */
  .nex-slider { width: 100%; padding: 0 12px 16px; overflow-x: auto; overflow-y: hidden; display: flex; align-items: flex-start; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: default; }
  .nex-slider::-webkit-scrollbar { display: none; }
  .nex-item { padding: 0 12px; }
  .nex-item--offset { padding: 48px 12px 0; }
  .nex-card, .nex-card .photo { width: 304px; }
  .nex-card .photo { height: 406px; }
  /* arrow stacks BELOW the text (Figma) so the text gets full 304 width → role fits 1 line */
  .nex-content { width: 304px; flex-direction: column; align-items: flex-end; gap: 16px; }
  .nex-inner { width: 100%; flex: none; }
  /* Figma NEX card: name 20/32, role 14/24 (1 line), bio 14/26 */
  .nex-name { font-size: 20px; line-height: 32px; }
  .nex-role { font-size: 14px; line-height: 24px; }
  .nex-bio { font-size: 14px; line-height: 26px; letter-spacing: 0; }
  .nex-footer { width: 100%; justify-content: center; padding: 32px 24px 0; }
  /* button matches Figma btn_fill 1_SP (1:1066): 14px text, py16/pl32/pr24, 28.5px divider */
  .nex-more { width: 100%; font-size: 14px; letter-spacing: 0; gap: 16px; padding: 16px 24px 16px 32px; }
  .nex-more .arrow { height: 28.5px; padding-left: 28.5px; }
  .nex-more .arrow::after { width: 20.19px; height: 8.314px; }
}

/* =========================================================
   WHAT WE DO
   ========================================================= */
.what { padding: 300px 0; }
.what .container { display: flex; flex-direction: column; align-items: center; }
.what-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 80px; width: 100%; margin-bottom: 96px; }
.what-head .section-head { width: 640px; max-width: 100%; align-items: flex-start; }
.what-head .section-intro { flex: 1; padding-top: 40px; text-align: justify; }
.sectors { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 80px; width: 100%; }
.sector { display: flex; gap: 40px; }
.sector .thumb { width: 280px; height: 280px; flex: none; border-radius: 8px; overflow: hidden; }
.sector .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sector .body { display: flex; flex-direction: column; gap: 24px; flex: 1; }
.sector .title h5 { font-weight: 700; font-size: 28px; line-height: 1.14; letter-spacing: .8px; }
.sector .title .en { font-family: var(--f-en); font-weight: 700; font-size: 16px; color: var(--c-orange); margin-top: 8px; }
.sector .desc { font-size: 20px; line-height: 1.6; letter-spacing: .4px; text-align: justify; flex: 1; }
.sector .view-more { align-self: flex-end; }

.differences { display: flex; flex-direction: column; gap: 40px; width: 100%; margin-top: 96px; }
.diff h6 { display: flex; align-items: center; gap: 16px; font-weight: 700; font-size: 24px; line-height: 1.33; letter-spacing: .8px; }
.diff h6::before { content: ""; width: 53px; height: 32px; background: var(--c-orange); opacity: .2; flex: none; margin-right: -32px; clip-path: polygon(100% 100%, 57.96% 100%, 0% 0%, 42.04% 0%); }
.diff p { font-size: 20px; line-height: 2; letter-spacing: .8px; text-align: justify; margin-top: 16px; }

/* =========================================================
   REAL VOICE
   ========================================================= */
.voice { background: var(--c-pale); padding: 300px 0 340px; }
.voice .container { display: flex; flex-direction: column; }
.voice-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 80px; width: 100%; margin-bottom: 96px; }
.voice-head .section-head { width: 640px; max-width: 100%; align-items: flex-start; }
.voice-head .section-intro { flex: 1; padding-top: 40px; text-align: justify; }
/* Slider bleeds to the right screen edge (section is 1680 wide, x240–1920) */
/* full-bleed slider: spans the whole viewport so cards scroll off the actual screen edges */
.voice-slider { display: flex; gap: 80px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; padding: 0 0 40px 0; margin-left: 0; margin-right: -240px; scrollbar-width: none; -ms-overflow-style: none; }
.voice-slider::-webkit-scrollbar { display: none; }
.voice-card { flex: 0 0 1680px; max-width: 1680px; scroll-snap-align: start; display: grid; grid-template-columns: 760px 920px; gap: 0; align-items: stretch; min-height: 790px; }
.voice-card .info { padding-right: 80px; display: flex; flex-direction: column; }
.voice-card .rv-tag { display: flex; align-items: center; gap: 7px; font-family: var(--f-en); font-weight: 500; font-size: 14px; }
.voice-card .rv-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-orange); }
.voice-card .num { font-family: var(--f-en); font-weight: 500; font-size: 64px; line-height: 1; letter-spacing: -.8px; color: var(--c-orange); padding: 8px 0 24px; }
.voice-card .copy { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 40px; }
.voice-card .copy span { background: #fff; padding: 4px 16px 4px 8px; font-weight: 700; font-size: 56px; line-height: 1.28; letter-spacing: .8px; white-space: nowrap; }
.voice-card .person { display: flex; align-items: center; gap: 24px; margin-bottom: 40px; }
.voice-card .person .name { font-weight: 700; font-size: 28px; letter-spacing: .8px; white-space: nowrap; }
.voice-card .person .role { font-weight: 500; font-size: 20px; color: var(--c-dove); }
.voice-rows { display: flex; flex-direction: column; gap: 16px; margin-bottom: auto; }
.voice-row { display: flex; gap: 24px; align-items: flex-start; }
.voice-row .chip { flex: none; width: 57px; padding: 4px 8px; text-align: center; background: #fff; font-size: 20px; color: var(--c-dove); }
.voice-row.result .chip { background: var(--c-vermilion-10); color: var(--c-orange); }
.voice-row p { font-size: 20px; line-height: 1.6; letter-spacing: .4px; text-align: justify; }
.voice-row.result p { color: var(--c-orange); }
.voice-card .btn-outline { margin-top: 40px; min-width: 380px; height: 76.5px; align-self: flex-start; }
.voice-card .voice-img { position: relative; overflow: hidden; border-radius: 16px 0 0 16px; width: 100%; height: 100%; min-height: 790px; }
.voice-card .voice-img img { position: absolute; max-width: none; display: block; }
.voice-dots { display: flex; gap: 24px; justify-content: center; margin-top: 24px; }
.voice-dots button { width: 16px; height: 16px; border-radius: 50%; background: rgba(28,28,28,.25); }
.voice-dots button.active { background: var(--c-orange); }

/* =========================================================
   ENVIRONMENT
   ========================================================= */
.environment { padding: 200px 0 80px; display: flex; flex-direction: column; align-items: center; }
.env-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 80px; width: 100%; max-width: var(--container); padding-inline: 0; margin-bottom: 96px; }
.env-head .section-head { width: 640px; max-width: 100%; align-items: flex-start; }
.env-head .section-intro { flex: 1; text-align: justify; }
/* Slow leftward marquee: images drift left continuously, looping seamlessly */
.env-gallery { overflow: hidden; width: 100%; padding-bottom: 16px; }
.env-track { display: flex; width: max-content; animation: env-marquee 60s linear infinite; will-change: transform; }
/* keep the marquee running even on hover (per request) */
@keyframes env-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .env-track { animation: none; } }
.env-gallery .item { height: 620px; border-radius: var(--radius-lg); flex: none; overflow: hidden; margin-right: 40px; }
.env-gallery .item.s { width: 465px; }
.env-gallery .item.l { width: 930px; }
.env-gallery .item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) {
  .env-head { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 48px; padding-inline: 24px; }
  .env-head .section-head { width: 100%; }
  .env-head .section-intro { width: 100%; }
}

/* =========================================================
   CAREER VISION + ALPHA WORLD  (pale bg)
   ========================================================= */
.career { background: var(--c-pale); padding: 200px 0 100px; }
.career .container { display: flex; flex-direction: column; gap: 200px; align-items: center; }
.career-head { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: left; align-self: stretch; }
/* Figma: the heading row reserves 240px before the diagrams start */
/* Figma: heading (640) + intro (800) side by side; intro sits 40px down */
.career-head .cv-row { display: flex; justify-content: flex-start; gap: 0; width: 100%; min-height: 240px; align-items: flex-start; }
.career-head .cv-row .section-head { width: 640px; flex: none; }
.career-head .display64 { font-family: var(--f-en); font-weight: 600; font-size: 64px; line-height: 1.2; }
.career-head .intro { width: 800px; max-width: 800px; flex: none; padding-top: 40px; font-size: 20px; line-height: 1.6; letter-spacing: .4px; text-align: justify; }
.career-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; width: 100%; }
.career-col { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.career-col .label { font-weight: 600; font-size: 24px; letter-spacing: .8px; }
.career-col .diagram { width: 100%; max-width: 480px; aspect-ratio: 1/1; }
.career-col .diagram img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* min-height = 2 lines so the left/right body text starts at the same height */
.career-col h6 { font-weight: 700; font-size: 24px; line-height: 1.33; letter-spacing: .8px; min-height: 64px; }
.career-col .body { font-size: 20px; line-height: 2; letter-spacing: .8px; text-align: justify; }
.career .divider { width: 100%; border-top: 1px solid var(--c-black-20); }

.alpha { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.alpha-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }
.alpha-head .display64 { font-family: var(--f-en); font-weight: 600; font-size: 64px; line-height: 1.5; }
.alpha-body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; padding-bottom: 165px; }
.alpha-bg { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); width: 600px; height: 600px; max-width: 90%; z-index: 0; pointer-events: none; opacity: 1; }
.alpha-body > *:not(.alpha-bg) { position: relative; z-index: 1; }
/* Figma Section 1:1900: heading is a 200px-tall box (2 lines centered) so the
   subheading lands at the circle's centre (y≈328). */
.alpha .big { font-family: var(--f-body); font-weight: 600; font-size: 48px; line-height: 1.5; letter-spacing: 2px; text-align: center; align-self: stretch; margin-top: 80px; min-height: 200px; display: flex; flex-direction: column; justify-content: center; }
.alpha .name { align-self: stretch; font-weight: 700; font-size: 20px; line-height: 32px; letter-spacing: .8px; margin-top: 24px; }
.alpha .body { align-self: stretch; font-size: 20px; line-height: 2; letter-spacing: .8px; text-align: justify; }
.alpha .btn-wrap { align-self: flex-end; margin-top: 64px; }
.alpha .btn-outline { min-width: 380px; }

/* =========================================================
   CULTURE
   ========================================================= */
.culture { padding: 200px 107px 0; display: flex; justify-content: center; }
.culture .inner { display: flex; gap: 80px; align-items: flex-start; width: 100%; max-width: var(--container); }
.culture .deck { width: 800px; max-width: 55%; aspect-ratio: 16/9; background: var(--c-mercury); border-radius: var(--radius-lg); position: relative; overflow: hidden; }
/* deck image is used on mobile only; desktop keeps the constructed deck */
.culture .deck .deck-img { display: none; }
.culture .deck .deck-logo { position: absolute; left: 60px; top: 50%; transform: translateY(-50%); width: 230px; height: auto; }
.culture .deck .deck-para { position: absolute; right: 96px; top: 50%; transform: translateY(-45%); width: 172px; height: auto; }
.culture .deck .caption { position: absolute; right: 96px; top: 55%; font-family: var(--f-en); font-weight: 500; font-size: 15px; color: var(--c-cod); }
.culture .deck .copyright { position: absolute; right: 40px; bottom: 24px; font-family: var(--f-en); font-size: 12px; color: var(--c-cod); }
.culture .info { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; align-self: stretch; }
.culture .info h2 { font-family: var(--f-en); font-weight: 600; font-size: 80px; line-height: 1; letter-spacing: 1px; }
.culture .info p { font-size: 20px; line-height: 1.6; letter-spacing: .4px; text-align: justify; }
.culture .socials { display: flex; justify-content: flex-end; gap: 16px; }
.culture .socials a { width: 32px; height: 32px; display: inline-flex; }
.culture .socials a img { width: 100%; height: 100%; display: block; }

/* =========================================================
   TOPICS
   ========================================================= */
.topics { padding: 100px 0 200px; }
.topics .container { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.topics-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; width: 100%; }
.topic-card { display: flex; flex-direction: column; gap: 20px; }
.topic-card .thumb { aspect-ratio: 453/237; border-radius: 8px; }
.topic-card p { font-size: 16px; line-height: 2; }
.topics .btn-wrap { align-self: flex-end; }
.topics .btn-outline { min-width: 380px; height: 76.5px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { position: relative; padding: 116px 0 87px; color: var(--c-cod); overflow: hidden; }
.site-footer .bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.site-footer .bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-footer .bg::after { content: ""; position: absolute; inset: 0; background: var(--c-medium-orange); mix-blend-mode: screen; }
.site-footer .fwrap { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 120px; width: 100%; max-width: 1440px; margin-inline: auto; }
.contact-card {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px;
  background: var(--c-medium-orange); border-radius: var(--radius-lg);
  padding: 75px 103px;
}
.contact-card .txt { display: flex; flex-direction: column; gap: 16px; color: #fff; max-width: 869px; }
.contact-card .eyebrow { color: #fff; }
.contact-card .eyebrow::before { background: #fff; opacity: .2; }
.contact-card h2 { font-family: var(--f-en); font-weight: 600; font-size: 88px; line-height: 1.05; }
.contact-card .desc { font-size: 20px; line-height: 2; letter-spacing: .8px; color: #fff; }
.contact-card .actions { display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; }
.contact-card .btn-fill { min-width: 300px; }

.footer-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.footer-col { min-width: 160px; }
.footer-col h4 { font-family: var(--f-en); font-weight: 700; font-size: 20px; letter-spacing: .8px; margin-bottom: 15px; }
.footer-col li { font-size: 16px; line-height: 2; }
/* footer menu links: colour change on hover */
.footer-col li a, .footer-bottom .policies a { transition: color .2s ease; }
.footer-col li a:hover, .footer-bottom .policies a:hover { color: var(--c-orange); }
.footer-links { display: flex; flex-direction: column; gap: 23px; min-width: 300px; }
.footer-links .btn-fill { min-width: 300px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-top: 40px; border-top: 1px solid var(--c-black-20); }
.footer-bottom .policies { display: flex; gap: 48px; flex-wrap: wrap; }
.footer-bottom span, .footer-bottom a { font-family: var(--f-en); font-size: 12px; letter-spacing: .2px; }

/* =========================================================
   Arrow svg default
   ========================================================= */
.arrow { display: inline-flex; align-items: center; }
.arrow svg { display: block; }

/* =========================================================
   RESPONSIVE  (SP ~ tablet)
   ========================================================= */
@media (max-width: 767px) {
  /* ---- SP layout (scaling handled by the fit-to-width section at the top) ---- */
  .brand .tagline { display: inline; font-size: 15px; line-height: 22px; }
  /* mobile hamburger menu: full-width slide-in panel, stacked contents */
  .gnav-inner { flex-direction: column; gap: 40px; padding: 96px 24px 56px; }
  .gnav-col, .gnav-entry { width: 100%; flex: none; }
  /* Contents list: horizontal dividers between items, EN 1 line + JP 1 line */
  .gnav-list { gap: 0; }
  .gnav-list li { border-top: 1px solid var(--c-mercury); }
  .gnav-list li:last-child { border-bottom: 1px solid var(--c-mercury); }
  /* align-items:stretch → the divider (chev border-left) spans the full item height */
  .gnav-list a { padding: 18px 0; align-items: stretch; }
  .gnav-txt { gap: 4px; }
  .gnav-list .en-title { font-size: 24px; line-height: 1.25; }
  .gnav-list .jp-sub { font-size: 13px; line-height: 1.5; }
  .gnav-list .chev { width: 36.5px; }
  .gnav-entry .btn-orange { width: 100%; height: 60px; }
  /* entry description text: 14px (Figma) — 16px wrapped 1 line early */
  .gnav-entry .entry-item p { font-size: 14px; line-height: 26px; margin-top: 12px; }
  .gnav-close { top: 24px; right: 24px; }

  /* ---- SP section paddings ---- */
  .what { padding: 150px 0; }
  .what-head { flex-direction: column; gap: 24px; margin-bottom: 40px; }
  .what-head .section-intro { flex: none; padding-top: 0; }
  .voice { padding: 100px 0; }
  .environment { padding: 100px 0; }
  .career { padding: 100px 0; }
  .career .container { gap: 80px; }
  .culture { padding: 100px 24px 0; }
  .site-footer { padding: 56px 24px 40px; }
  .site-footer .fwrap { gap: 56px; }
  /* footer nav: 2-column grid, entry buttons stacked on top (Figma SP) */
  .footer-nav { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px 20px; }
  .footer-col { min-width: 0; }
  /* Figma footer items are 14px & don't wrap (「バリューチェーンセクター」stays 1 line) */
  .footer-col li { font-size: 14px; white-space: nowrap; }
  .footer-links { order: -1; grid-column: 1 / -1; min-width: 0; margin-bottom: 8px; }
  .footer-links .btn-fill { min-width: 0; width: 100%; }
  /* Alpha Works: no background diagram on mobile */
  .alpha-bg { display: none; }
  .contact-card { padding: 40px 24px; }
  /* ---- SP shared: headings, eyebrow, body ---- */
  .section-head .display, .culture .info h2, .career-head .display64, .alpha-head .display64 { font-size: 32px; line-height: 44px; }
  .contact-card h2 { font-size: 32px; }
  .eyebrow { font-size: 12px; }
  .eyebrow::before { width: 27px; height: 16px; margin-right: -8px; }
  .section-intro, .nex-intro p, .career-head .intro { font-size: 14px; line-height: 26px; letter-spacing: 0; }
  .voice-card .copy span { font-size: 22px; }
  .alpha .big { font-size: 22px; padding-top: 0; margin-top: 0; min-height: 0; display: block; }

  .sp-br { display: inline; }

  /* ---- Mobile overflow guard: keep everything within the 393 canvas ---- */
  html { overflow-x: hidden; }
  .site-header, .gnav, .gnav-panel { width: 393px; max-width: 393px; left: 0; right: auto; }
  .section-intro, .career-head .intro, .what-head .section-intro, .env-head .section-intro, .nex-intro { width: 100%; max-width: 100%; }
  .section-head, .what-head .section-head, .env-head .section-head, .career-head .section-head, .voice-head .section-head { width: 100%; max-width: 100%; }
  .career-head .cv-row .section-head { width: 100%; flex: none; }

  /* Hero slide 4: mobile uses a clean handshake image (no mist / gradient / noise) */
  .slide4 .hero-mist, .slide4 .grad-burn, .hero-noise { display: none; }

  /* ---- SP HERO (393×852): bg photo cover + text-stack at left32/top240/w329 ---- */
  .hero { --hpx: 1px; }
  .hero-slide { min-height: 0; height: 852px; display: block; }
  .hero-photo img { inset: 0 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; object-position: 70% center; transform: none !important; }
  .hero-photo .hero-photo-blend { object-position: center; }
  .hs-inner { position: absolute; top: 240px; left: 32px; width: 329px; padding: 0; }
  .hero .text-stack, .hero .text-stack.w800 { width: 100%; gap: 16px; }
  .hero .tag { gap: 16px; }
  .hero .focus-label { font-size: 16px; line-height: 24px; letter-spacing: .8px; }
  .hero .focus-icon { width: 54px; height: 11px; }
  .hero-h { white-space: normal; font-size: 28px; line-height: 40px; letter-spacing: 1px; }
  .hero .lead { font-size: 14px; letter-spacing: 0; }
  .hero .lead p { line-height: 26px; display: inline; letter-spacing: 0; }
  /* slide 2: break after「回る。」(Figma keeps it on its own line) */
  .slide2 .lead p:first-child { display: block; }
  /* slide 2: press card (Figma link_SP_release: label 16px Bold, title 14px) */
  .slide2 .content-row { flex-direction: column; gap: 16px; }
  .slide2 .pr-card { width: 100%; padding: 16px; }
  .pr-card .thumb { width: 80px; height: 80px; }
  .pr-card .line b { font-size: 16px; line-height: 1.4; }
  .pr-card .cstack .title { padding-left: 16px; }
  .pr-card .cstack .title p { font-size: 14px; line-height: 26px; letter-spacing: 0; }
  /* slide 4: company chips (2×2), arrow on its own row, right-aligned */
  .slide4 .companies { flex-wrap: wrap; width: 100%; gap: 8px; }
  .company-chip.grow { flex: none; }
  .company-chip { width: 160px; padding: 4px 16px; text-align: center; }
  .company-chip b { font-size: 12px; line-height: 1.4; }
  .company-chip span { font-size: 12px; }
  .slide4 .companies .arr { flex: 0 0 100%; display: flex; justify-content: flex-end; padding-left: 0; padding-top: 8px; }
  .pr-card { padding: 16px; }
  .pr-card .pr-thumb { width: 80px; height: 80px; }
  .pr-card .pr-text p { font-size: 14px; }

  .nex-footer .btn-outline, .voice-card .btn-outline, .alpha .btn-outline, .topics .btn-outline { min-width: 0; width: 100%; }

  /* What We Do: 4 sector cards stacked + differences */
  .sectors { grid-template-columns: 1fr; gap: 40px; }
  .sector { flex-direction: column; gap: 16px; }
  .sector .thumb { width: 100%; height: 200px; border-radius: 8px; }
  .sector .title h5 { font-size: 20px; }
  .sector .title .en { font-size: 14px; }
  .sector .desc { font-size: 14px; line-height: 26px; letter-spacing: 0; }
  /* differences: title 16px + small ribbon 33×20 (Figma 1:2240) */
  .diff h6 { font-size: 16px; line-height: 26px; gap: 0; letter-spacing: 0; }
  .diff h6::before { width: 33px; height: 20px; margin-right: -8px; }
  .diff p { font-size: 14px; line-height: 26px; letter-spacing: 0; }

  /* Real Voice (Figma 1:2266): image → 「01」overlapping bottom-left → title → name → rows → button */
  .voice-head { flex-direction: column; gap: 0; margin-bottom: 40px; }
  .voice-head .section-head { width: 100%; }
  .voice-head .section-intro { width: 100%; flex: none; padding-top: 24px; }
  /* one person per full-screen page: slider spans the full 393 (breaks out of the 24px container
     padding); each card = viewport width with content inset 24px; snaps at the screen edges */
  .voice-slider { margin-left: -24px; margin-right: -24px; gap: 0; padding: 0 0 24px; scroll-padding-left: 0; }
  .voice-card { flex: 0 0 100%; width: 100%; max-width: 100%; padding: 0 24px; display: flex; flex-direction: column; grid-template-columns: 1fr; min-height: 0; }
  /* no "Real Voice" tag on mobile */
  .voice-card .rv-tag { display: none; }
  /* image on top; the info block overlaps it by 32px so「01」straddles the image bottom */
  .voice-card .voice-img { border-radius: 8px; order: 1; margin-bottom: -32px; min-height: 0; height: auto; aspect-ratio: 345/296; }
  /* info fills the card height so the button (margin-top:auto) sits at the bottom → all 4 buttons align */
  .voice-card .info { padding-right: 0; order: 2; flex: 1; display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 1; }
  .voice-card .num { font-size: 64px; line-height: 64px; padding: 0; }
  .voice-card .copy { margin-bottom: 0; }
  .voice-card .copy span { font-size: 24px; line-height: 32px; }
  .voice-card .person { margin-bottom: 0; flex-wrap: wrap; gap: 4px 24px; padding-left: 8px; }
  .voice-card .person .name { font-size: 20px; line-height: 32px; }
  .voice-card .person .role { font-size: 14px; }
  .voice-rows { margin-bottom: 0; gap: 16px; }
  .voice-row { gap: 24px; }
  .voice-row .chip { width: auto; padding: 0 8px; font-size: 14px; line-height: 26px; letter-spacing: 0; }
  /* Figma row text is 14px/22 with letter-spacing 0 (mine inherited 0.4px → wrapped 1 char early) */
  .voice-row p { font-size: 14px; line-height: 22px; letter-spacing: 0; }
  /* all 4 interview buttons: fixed 345×60.5 box, 14px, text centered (01/02 = 1 line, 03/04 = 2 lines) */
  .voice-card .btn-outline { margin-top: auto; height: 60.5px; padding: 0 24px 0 32px; font-size: 14px; align-items: center; }
  .voice-card .btn-outline span:first-child { line-height: 1.35; }

  /* Environment marquee (SP heights) */
  .env-gallery .item { height: 310px; }
  .env-gallery .item.s { width: 232px; }
  .env-gallery .item.l { width: 465px; }

  /* Career Vision: 2 square diagrams stacked; Alpha text */
  .career-head { gap: 24px; }
  .career-head .cv-row { min-height: 0; flex-direction: column; gap: 24px; }
  /* kill the desktop 40px intro padding-top so heading→body gap isn't doubled */
  .career-head .intro { padding-top: 0; }
  .career-cols { grid-template-columns: 1fr; gap: 60px; }
  .career-col .diagram { aspect-ratio: 1/1; }
  .career-col .label { font-size: 20px; line-height: 32px; }
  .career-col h6 { font-size: 16px; line-height: 26px; min-height: 0; letter-spacing: 0; }
  .career-col .body { font-size: 14px; line-height: 26px; letter-spacing: 0; }
  .alpha-body { padding-bottom: 0; }
  /* Alpha big copy: Figma 28px/40, 4 lines (Medium, no tracking) */
  .alpha .big { font-size: 28px; line-height: 40px; font-weight: 500; letter-spacing: 0; }
  .alpha .name { font-size: 16px; line-height: 26px; letter-spacing: 0; }
  .alpha .body { font-size: 14px; line-height: 26px; letter-spacing: 0; }

  /* Culture (Figma 1:2440): heading → body → deck → note/LinkedIn icons */
  /* divider + spacing between the culture socials and the topics list (Figma 1:2450) */
  .culture .inner { flex-direction: column; gap: 24px; padding-bottom: 50px; border-bottom: 1px solid var(--c-black-20); }
  .topics { padding: 50px 0 100px; }
  .culture .info { display: contents; }
  .culture .info h2 { order: 1; }
  .culture .info p { order: 2; font-size: 14px; line-height: 26px; letter-spacing: 0; }
  .culture .deck { order: 3; width: 100%; max-width: 100%; aspect-ratio: 345/194; }
  /* mobile: show the flat deck image, hide the constructed overlay elements */
  .culture .deck .deck-img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .culture .deck .deck-logo, .culture .deck .deck-para, .culture .deck .caption, .culture .deck .copyright { display: none; }
  .culture .socials { order: 4; width: 100%; justify-content: flex-end; }

  /* Topics: article cards stacked; interview titles 14px/26 (Figma) */
  .topics-list { grid-template-columns: 1fr; gap: 24px; }
  .topic-card p { font-size: 14px; line-height: 26px; }
  .topics .btn-wrap { align-self: stretch; }
  .topics .btn-outline { width: 345px; height: 60.5px; align-self: center; }

  .contact-card .desc, .culture .info p, .section-intro, .career-head .intro, .nex-card .bio { text-align: justify; }
  .contact-card .actions { width: 100%; }
  .contact-card .btn-fill, .footer-links .btn-fill { min-width: 0; width: 100%; }
  /* Entry description: Figma 14px/26 (was 20px → wrong wrap) */
  .contact-card .desc { font-size: 14px; line-height: 26px; letter-spacing: 0; }
  /* footer bottom: policies row, then copyright centered (Figma 1:2515) */
  .footer-bottom { flex-direction: column; align-items: center; gap: 24px; }
  /* policies inset 24px each side → a bit more toward center (Figma List px-24) */
  .footer-bottom .policies { width: 100%; justify-content: space-between; gap: 0; padding: 0 24px; }
  .footer-bottom > span { text-align: center; width: 100%; }
}

@media (max-width: 767px) {
  .btn-outline, .btn-fill { min-width: 0; width: 100%; }
  /* SP button sizes — outline (Figma 1:1066): 14px, py16; fill (Figma 1:903): 16px, h70.
     gap:0 relies on space-between so long labels get max room. divider pl 28.5, arrow 20.19×8.314 */
  .btn-outline { font-size: 14px; letter-spacing: 0; gap: 0; padding: 16px 24px 16px 32px; }
  .btn-fill { font-size: clamp(13px, 3.8vw, 16px); height: 70px; gap: 0; padding: 0 24px 0 32px; }
  .btn-fill > span:first-child { white-space: nowrap; }
  .btn-outline .arrow, .btn-fill .arrow { height: 28.5px; padding-left: 28.5px; }
  .btn-outline .arrow::after, .btn-fill .arrow::after { width: 20.19px; height: 8.314px; }
  .hero-companies { gap: 8px; }
  .company-chip { padding: 4px 16px; }
}

/* ---------- Bottom-right conversion popup (Figma node 1:2026) ---------- */
.cv-popup {
  position: fixed; right: 50px; bottom: 50px; z-index: 50;
  display: flex; flex-direction: column; align-items: flex-end;
}
.cv-card-wrap { position: relative; }
.cv-close {
  position: absolute; top: -20px; right: 24px; z-index: 2;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 40px;
  background: var(--c-orange); cursor: pointer;
}
.cv-close::before, .cv-close::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 2px; background: #fff;
}
.cv-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.cv-close::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.cv-card {
  width: 400px; background: #fff; border-radius: 8px;
  box-shadow: 0 60px 60px -30px rgba(0,0,0,.24);
  padding: 16px 0 24px; display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.cv-item { width: 100%; padding: 0 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
/* description fades/expands in on hover of the button */
.cv-desc { width: 100%; margin: -8px 0 0; max-height: 0; opacity: 0; overflow: hidden; font-family: var(--f-body); font-size: 15.5px; line-height: 1.7; letter-spacing: .2px; color: var(--c-cod); text-align: justify; transition: max-height .55s ease, opacity .5s ease .05s, margin-top .55s ease; }
.cv-item:hover .cv-desc { max-height: 130px; opacity: 1; margin-top: 0; }
.cv-label { margin: 0; font-family: var(--f-en); font-weight: 700; font-size: 14px; line-height: 24px; color: var(--c-cod); }
.cv-item .btn-orange { width: 100%; }
.cv-reopen {
  display: none; align-items: center; justify-content: center;
  width: 320px; height: 80px; padding: 0; border: 0; border-radius: 100px;
  background: var(--c-orange); color: #fff; cursor: pointer;
  font-family: var(--f-body); font-weight: 700; font-size: 16px;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.35); transition: background .2s, color .2s, box-shadow .2s;
}
/* orange -> white/orange on hover (matches the entry buttons) */
.cv-reopen:hover { background: var(--c-white); color: var(--c-orange); box-shadow: inset 0 0 0 2px var(--c-orange), 0 20px 40px -20px rgba(0,0,0,.35); }
.cv-popup.collapsed .cv-card-wrap { display: none; }
.cv-popup.collapsed .cv-reopen { display: inline-flex; }
.cv-popup.hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; }

@media (max-width: 767px) {
  .cv-popup { right: 24px; bottom: 24px; transition: opacity .45s ease, transform .45s ease, visibility .45s ease; }
  /* after ×: the reopen (ENTRY) button is centered horizontally */
  .cv-popup.collapsed { left: 0; right: 0; align-items: center; }
  /* hidden while scrolling / touching — soft fade + slight rise back in on idle */
  .cv-popup.scroll-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); }
  /* Figma SP popup (1:796): card pt32/pb24/gap16, close 40px sits 8px above the first button */
  .cv-card { width: 345px; padding-top: 32px; }
  .cv-close { top: -16px; }
  /* label hidden; description uses max-height transition (shown on .expanded) */
  .cv-item .cv-label { display: none; }
  .cv-item { gap: 0; }
  .cv-item.expanded { gap: 8px; }
  .cv-item.expanded .cv-desc { max-height: 130px; opacity: 1; margin-top: 0; }
  .cv-item .btn-orange { font-size: clamp(13px, 3.8vw, 15px); gap: 0; padding: 0 20px 0 28px; }
  .cv-item .btn-orange > span:first-child { white-space: nowrap; }
  .cv-item .btn-orange .arrow { height: 28.5px; padding-left: 24px; }
  .cv-item .btn-orange .arrow::after { width: 20.19px; height: 8.314px; }
  /* reopen button: auto-width to fit longer text「気になる方はこちら」*/
  .cv-reopen { width: auto; min-width: 160px; padding: 0 20px; height: 40px; font-size: 13px; box-shadow: 0 12px 24px -12px rgba(0,0,0,.35); }
}