@charset "UTF-8";
/* Reference-led HR content, using the site's existing type and palette. */
.service-detail__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 5vw, 92px); align-items: start; }
.service-detail__intro { min-width: 0; }
.service-detail__eyebrow { color: var(--c-primary); font: 700 15px/1.4 var(--font-en); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 28px; }
/* The stage title (Strategy / 【上流】…) in the same blue as its number,
   as on the top page's Service rows (2026-10-08). */
.service-detail__intro .hgroup__en,
.service-detail__intro .hgroup__jp { color: var(--c-primary); }
.service-detail__description { margin-top: 36px; font-size: clamp(16px, 1.2vw, 20px); line-height: 2.15; }
.service-detail__description strong { color: var(--c-ink); }
.service-detail__num { color: var(--c-primary); font: 700 17px/1.8 var(--font-en); letter-spacing: .06em; }
.scope-intro { margin-top: 32px; max-width: 1480px; }
.scope-grid { margin-top: 42px; border-color: #b6c5d6; }
.scope-grid .capgrid__cell { padding: clamp(24px, 2vw, 36px); gap: 23px; border-color: #b6c5d6; }
.scope-grid .capgrid__num { font-size: 17px; }
.scope-grid .capgrid__title { font-size: clamp(20px, 0.6vw + 15px, 26px); line-height: 1.5; overflow-wrap: anywhere; }
.scope-grid .capgrid__text { font-size: 14px; line-height: 1.95; word-break: keep-all; overflow-wrap: anywhere; }

.hr-model { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 1fr); gap: clamp(20px, 2vw, 36px); margin-top: 60px; align-items: start; }
.hr-model__label { display: flex; align-items: center; gap: 16px; font: 800 16px/1.5 var(--font-en); text-transform: uppercase; letter-spacing: .12em; color: var(--c-primary); }
.hr-model__label::after { content: ""; height: 1px; flex: 1; background: #aec9e5; }
.hr-model__side--before .hr-model__label { color: #64758b; }
.hr-model__side h3 { margin-top: 18px; color: var(--c-ink); font-size: var(--fs-2l); line-height: 1.6; }
.hr-model__side ul { margin-top: 14px; }
.hr-model__side li { position: relative; border-bottom: 1px solid #c7d9eb; padding: 18px 0 18px 18px; font-size: clamp(13px, .97vw, 16px); line-height: 1.95; }
.hr-model__side li:last-child { border-bottom: 0; }
.hr-model__side li::before { content: ""; position: absolute; top: 29px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #8c9fb7; }
.hr-model__side--after li::before { background: var(--c-primary); }
.hr-model__stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 28px; }
.hr-model__stage { display: flex; flex-direction: column; min-width: 0; position: relative; }
.hr-model__circle { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 12px; aspect-ratio: 1; width: 90%; margin: 0 auto 42px; border: 2px solid var(--c-primary); border-radius: 50%; text-align: center; background: #f8fbff; padding: 10px; }
.hr-model__circle::after { content: ""; position: absolute; width: 1px; height: 42px; background: #91b6dd; top: 100%; left: 50%; }
.hr-model__stage:not(:last-child) .hr-model__circle::before { content: ""; position: absolute; left: 100%; top: 50%; width: calc(100% / 9 + 14px); height: 1px; background: var(--c-primary); }
.hr-model__circle span { align-self: center; color: var(--c-primary); font: 600 clamp(24px, 2.7vw, 44px)/1.1 var(--font-en); border-bottom: 1px solid var(--c-primary); padding-bottom: 8px; }
.hr-model__circle p { color: var(--c-ink); font-size: clamp(12px, .96vw, 16px); font-weight: 700; line-height: 1.8; }
.hr-model__card { flex: 1; border: 1px solid #b8cee6; border-radius: 10px; background: #fff; padding: clamp(15px, 1.4vw, 24px); }
.hr-model__number { color: var(--c-primary); font: 600 30px/1.2 var(--font-en); }
.hr-model__card h3 { min-height: 5.4em; padding-block: 18px; border-bottom: 1px solid #c3d5e9; color: var(--c-ink); font-size: clamp(14px, 1vw, 17px); line-height: 1.65; }
.hr-model__card p { margin-top: 16px; font-size: clamp(12px, .85vw, 14px); line-height: 2; }

.case-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 42px; border-block: 1px solid #c4d4e6; }
.case-nav a { display: flex; align-items: center; gap: 12px; padding: 22px 15px; font-size: 14px; font-weight: 700; transition: color .2s, background .2s; }
.case-nav a:hover { background: var(--c-bone); color: var(--c-primary); }
.case-nav a + a { border-left: 1px solid #dbe4ee; }
.case-nav a span:first-child { color: var(--c-primary); font: 700 12px/1 var(--font-en); }
.case-nav a span:last-child { margin-left: auto; color: var(--c-primary); }
.case-studies { margin-top: var(--sp-md); display: grid; gap: clamp(48px, 6vw, 100px); }
.case-study { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: clamp(28px, 3.5vw, 60px); padding: clamp(24px, 2.8vw, 48px); border: 1px solid #c5d8eb; border-radius: 12px; scroll-margin-top: 24px; }
.case-study__aside { min-width: 0; display: flex; flex-direction: column; }
.case-study__identity { display: grid; gap: 20px; }
.case-study__index { justify-self: start; padding: 7px 20px; border-radius: 100px; background: var(--c-primary); color: #fff; font: 800 17px/1.6 var(--font-en); text-transform: uppercase; letter-spacing: .035em; }
.case-study__industry { color: var(--c-primary); font: 800 clamp(18px, 1.65vw, 27px)/1.25 var(--font-en); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.case-study__industry span { display: block; margin-top: 10px; color: var(--c-ink); font: 700 clamp(18px, 1.4vw, 23px)/1.5 var(--font-jp); }
.case-study__art { margin: 26px -10px; }
.case-study__art img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.case-study__result { display: grid; gap: 10px; margin-top: auto; padding: 20px 0 0; border-top: 1px solid #c8dbed; }
.case-study__result span { color: var(--c-primary); font: 800 13px/1.5 var(--font-en); text-transform: uppercase; letter-spacing: .09em; }
.case-study__result strong { color: var(--c-primary); font-size: clamp(18px, 1.5vw, 25px); line-height: 1.65; }
.case-study__body { min-width: 0; }
.case-study__body > h3 { color: var(--c-ink); font-size: clamp(24px, 2.3vw, 40px); line-height: 1.65; letter-spacing: -.025em; margin-bottom: 26px; text-wrap: pretty; }
.case-study__row { display: grid; grid-template-columns: minmax(115px, .65fr) minmax(0, 2.5fr); gap: 25px; padding: 23px 0; border-bottom: 1px solid #c9dcee; }
.case-study__row dt { display: flex; flex-direction: column; gap: 5px; color: var(--c-primary); }
.case-study__row dt span:first-child { font: 800 clamp(14px, 1.3vw, 21px)/1.5 var(--font-en); text-transform: uppercase; letter-spacing: .025em; }
.case-study__row dt span:last-child { font-size: 13px; font-weight: 500; }
.case-study__row dd { font-size: clamp(16px, 1.1vw, 18px); line-height: 1.95; }
.case-study__row--impact { margin-top: 20px; padding: 22px; background: #edf5fc; border: 0; border-radius: 9px; }
.case-study__row--impact dd { color: var(--c-ink); font-weight: 500; }
.case-study__support { display: flex; align-items: start; gap: 20px; margin-top: 25px; padding-top: 22px; border-top: 1px solid #c9dcee; }
.case-study__support > p { flex: 0 0 auto; color: var(--c-primary); font: 800 12px/1.5 var(--font-en); letter-spacing: .05em; text-transform: uppercase; }
.case-study__support > p span { display: block; font: 500 12px/1.8 var(--font-jp); margin-top: 4px; }
.case-study__support ul { display: flex; flex-wrap: wrap; gap: 8px; }
.case-study__support li { padding: 5px 13px; border-radius: 30px; background: #edf5fc; color: var(--c-primary); font-size: 12px; line-height: 1.7; }

@media (max-width: 1199px) {
  .hr-model { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hr-model__stages { grid-column: 1 / -1; grid-row: 2; max-width: 880px; width: 100%; margin-inline: auto; padding-top: 0; }
  .hr-model__side--after { grid-column: 2; grid-row: 1; }
  .hr-model__side li { font-size: 15px; }
  .hr-model__circle p { font-size: 14px; }
  .hr-model__card h3 { font-size: 17px; }
  .hr-model__card p { font-size: 14px; }
  .case-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-nav a:nth-child(4) { border-left: 0; }
  .case-nav a:nth-child(n+4) { border-top: 1px solid #dbe4ee; }
  .case-study { grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); }
  .case-study__row { grid-template-columns: 1fr; gap: 10px; }
  .case-study__row dt { flex-direction: row; align-items: center; gap: 14px; }
  .case-study__row--impact { padding: 20px; }
}
@media (max-width: 879px) {
  .service-detail__layout { grid-template-columns: 1fr; gap: 36px; }
  .service-detail__description { margin-top: 24px; }
}
@media (max-width: 759px) {
  .scope-grid .capgrid__cell { padding: 22px 17px; gap: 16px; }
  .scope-grid .capgrid__text { font-size: 13px; }
  .hr-model { display: flex; flex-direction: column; gap: 36px; margin-top: 36px; }
  .hr-model__side, .hr-model__stages { width: 100%; }
  .hr-model__side--before { order: 0; }
  .hr-model__stages { order: 1; grid-template-columns: 1fr; gap: 28px; }
  .hr-model__side--after { order: 2; }
  .hr-model__stage { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; }
  .hr-model__circle { width: 56px; margin: 0; padding: 8px; gap: 0; }
  .hr-model__circle span { font-size: 23px; padding: 0; border: 0; }
  .hr-model__circle p { display: none; }
  .hr-model__circle::after { width: 18px; height: 1px; left: 100%; top: 50%; }
  .hr-model__stage:not(:last-child) .hr-model__circle::before { display: none; }
  .hr-model__stage:not(:last-child)::before { content: ""; position: absolute; width: 1px; left: 28px; top: 56px; height: calc(100% - 28px); background: #abc6e4; }
  .hr-model__card { padding: 20px; }
  .hr-model__card h3 { min-height: 0; padding-block: 12px; font-size: 16px; }
  .hr-model__card p { margin-top: 13px; font-size: 14px; }
  .hr-model__number { display: none; }
  .hr-model__card h3 { padding-top: 0; }
  .case-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
  .case-nav a { padding: 16px 10px; font-size: 13px; gap: 9px; }
  .case-nav a:nth-child(odd) { border-left: 0; }
  .case-nav a:nth-child(even) { border-left: 1px solid #dbe4ee; }
  .case-nav a:nth-child(n+3) { border-top: 1px solid #dbe4ee; }
  .case-study { grid-template-columns: 1fr; padding: 24px 20px; gap: 28px; }
  .case-study__identity { grid-template-columns: auto 1fr; align-items: start; gap: 16px; }
  .case-study__index { padding: 6px 12px; font-size: 14px; white-space: nowrap; }
  .case-study__industry { font-size: 17px; line-height: 1.4; }
  .case-study__industry span { font-size: 17px; margin-top: 4px; }
  .case-study__art { max-width: 380px; width: 100%; margin: 18px auto; }
  .case-study__result { grid-template-columns: auto 1fr; gap: 16px; align-items: baseline; padding-top: 18px; }
  .case-study__result strong { font-size: 18px; }
  .case-study__body > h3 { font-size: 23px; margin-bottom: 12px; }
  .case-study__body > h3 br { display: none; }
  .case-study__row { padding-block: 20px; }
  .case-study__row dt span:first-child { font-size: 17px; }
  .case-study__row dd { font-size: 15px; line-height: 2; }
  .case-study__support { flex-direction: column; gap: 14px; }
  .case-study__support > p span { display: inline; margin-left: 12px; }
}
@media (max-width: 399px) {
  .hr-model__stage { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
  .hr-model__circle { width: 48px; }
  .hr-model__circle span { font-size: 20px; }
  .hr-model__circle::after { width: 14px; }
  .hr-model__stage:not(:last-child)::before { left: 24px; top: 48px; height: calc(100% - 20px); }
  .hr-model__card { padding: 16px; }
  .scope-grid { grid-template-columns: 1fr; }
  .case-study__identity { grid-template-columns: 1fr; }
}

/* All case studies share the CASE06 pictograms and pale disc treatment. */
.case-icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.case-study--icons .case-study__row { grid-template-columns: minmax(190px, .95fr) minmax(0, 2.5fr); gap: 22px; }
.case-study--icons .case-study__row dt { flex-direction: row; align-items: center; gap: 13px; align-self: start; }
.case-icon { flex: 0 0 44px; width: 44px; height: 44px; color: var(--c-primary); padding: 8px; border-radius: 50%; }
.case-label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.case-study--icons .case-study__row dt .case-label__en { font: 800 clamp(14px, 1.3vw, 21px)/1.5 var(--font-en); letter-spacing: .025em; }
.case-study--icons .case-study__row dt .case-label__jp { font: 500 13px/1.6 var(--font-jp); }
.case-study--icons-soft .case-icon { background: #e4f1fc; }
.case-study--icons-soft .case-icon--alert { padding: 10px; outline: 1.7px solid currentColor; outline-offset: -9px; }
.case-study--icons-soft .case-study__row--impact .case-icon { background: #d7eaf9; }
.case-study__support .case-support-label { display: flex; align-items: center; gap: 12px; }
.case-support-icon { width: 36px; height: 36px; flex: 0 0 36px; color: var(--c-primary); }
.case-study__support .case-support-label__text { display: block; margin: 0; font: 800 12px/1.5 var(--font-en); }
.case-study__support .case-support-label__text > span { display: block; margin: 4px 0 0; font: 500 12px/1.8 var(--font-jp); }
@media (max-width: 1199px) {
  .case-study--icons .case-study__row { grid-template-columns: 1fr; gap: 12px; }
  .case-study--icons .case-study__row dt .case-label__en { font-size: 17px; }
  .case-label { flex-direction: row; gap: 12px; align-items: center; flex-wrap: wrap; }
}
@media (max-width: 759px) {
  .case-study--icons .case-study__row dt { gap: 12px; }
  .case-icon { flex-basis: 38px; width: 38px; height: 38px; padding: 7px; }
  .case-study--icons .case-study__row--impact { padding: 18px; }
  .case-study--icons .case-study__row dt .case-label__jp { font-size: 12px; }
  .case-label { gap: 3px 10px; }
  .case-support-icon { width: 32px; height: 32px; flex-basis: 32px; }
}
@media (max-width: 359px) {
  .case-label { flex-direction: column; align-items: flex-start; }
}


/* --- Cases page: each case is one square white panel on the tone band,
   the same treatment as the document cards on the top page. No border and
   no rounding; the white ground also absorbs the illustrations' own white. */
.case-studies { gap: clamp(20px, 2vw, 32px); }
.case-study {
  padding: clamp(28px, 3.4vw, 64px);
  border: 0;
  border-radius: 0;
  background: var(--c-white);
  scroll-margin-top: calc(var(--header-h) + 8px);
}
.case-study__index {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--c-primary);
  font: 700 var(--fs-x3s)/1 var(--font-en);
  letter-spacing: 0.16em;
}
.case-study__index::after { content: ""; width: clamp(32px, 3vw, 56px); height: 1px; background: var(--c-primary); }
.case-study__row--impact { border-radius: 0; background: var(--c-bone); }
.case-nav a:hover { background: var(--c-white); }
@media (max-width: 759px) {
  .case-study { padding: 28px 20px; }
  .case-study__index { padding: 0; font-size: var(--fs-x4s); }
}

/* --- Cases teaser (top page #cases, service page) ------------------------
   A grey label, one large line, a button into the Cases page and a link to
   each case, with the section name set large and vertical on the right. On phones the
   name lies down and sits above the label. */
/* The tight section rhythm: the block is short, and the vertical mark already
   gives it presence. It is its own section, not the tail of Service, so it
   sits on the deeper band colour — distinct from the white Service above and
   the lighter tone bands around it on either page. */
.ind { overflow: hidden; padding-block: var(--sp-xl); background: var(--c-bone-deep); }

.ind__box {
  /* Sized so the mark stands a little taller than the copy, not double. */
  --ind-en: clamp(80px, 5vw + 40px, 130px);
  --ind-gap: clamp(48px, 7vw, 140px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--ind-gap);
  align-items: center;
}
.ind__body { grid-column: 1; grid-row: 1; }
.ind__mark { grid-column: 2; grid-row: 1; }

.ind__en {
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--font-en);
  font-size: var(--ind-en);
  /* Same weight and tracking as the site's other English headings (.hgroup__en). */
  font-weight: 800;
  /* Tight enough that the two columns read as one block, like the reference. */
  line-height: 0.74;
  letter-spacing: -0.025em;
  color: var(--c-ink);
  /* Two columns of 0.74em, stated outright. Left to size itself, WebKit
     (Safari) laid the vertical lines out against a wider box than it drew,
     pushing CASE out of the section and cutting Recruit in half. */
  width: 1.48em;
}
.ind__en span { display: block; }
.ind__en span:first-child { color: var(--c-primary); }
/* The two words drift in one after the other. No clip-path here: WebKit
   (Safari) places the clip box wrongly on vertical text and cut the words
   off — CASE vanished and Recruit showed only half (2026-10-06). */
.js .ind__en[data-reveal] { opacity: 1; transform: none; transition: none; }
.js .ind__en[data-reveal] span {
  opacity: 0;
  transform: translateY(-0.25em);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease);
}
.js .ind__en[data-reveal] span + span { transition-delay: 0.12s; }
.js .ind__en[data-reveal].is-in span { opacity: 1; transform: none; }

.ind__label {
  margin-bottom: clamp(14px, 1.2vw + 4px, 24px);
  font-size: clamp(14px, 0.3vw + 12px, 18px);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--c-gray);
}
.ind__title {
  margin-bottom: clamp(24px, 2.4vw + 6px, 44px);
  font-size: clamp(26px, 3.9vw, 56px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--c-ink);
}
.ind__title span { display: inline-block; }

.ind__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; }

/* Link text that rolls up and back in on hover. */
.ind__roll { display: inline-block; overflow: hidden; vertical-align: top; }
.ind__roll > span { display: block; }
@keyframes ind-roll {
  0% { transform: translateY(0); }
  50% { transform: translateY(-110%); }
  50.1% { transform: translateY(110%); }
  100% { transform: translateY(0); }
}

/* The button is the site's own filled capsule (.pbtn--fill, as in the first
   view), so it matches every other CTA. */

.ind__links { display: flex; flex-wrap: wrap; gap: 14px 22px; max-width: 26em; font-size: var(--fs-x2s); }
/* Long labels (the three stages on the Cases page): one per line. */
.ind__links--stack { flex-direction: column; align-items: flex-start; max-width: none; }
.ind__links a {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  transition: color var(--dur) var(--ease);
}
.ind__links a::before,
.ind__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  transition: transform 0.4s var(--ease);
}
.ind__links a::before { background: var(--c-rule); transform-origin: right center; }
.ind__links a::after { background: var(--c-primary); transform: scaleX(0); transform-origin: left center; transition-delay: 0.1s; }

@media (any-hover: hover) {
  .ind__links a:hover { color: var(--c-primary); }
  .ind__links a:hover::before { transform: scaleX(0); }
  .ind__links a:hover::after { transform: scaleX(1); }
  .ind__links a:hover .ind__roll > span { animation: ind-roll 0.4s ease-out; }
}

@media (max-width: 759px) {
  .ind__box { grid-template-columns: minmax(0, 1fr); }
  .ind__mark { grid-column: 1; grid-row: 1; margin-bottom: 10px; }
  .ind__body { grid-row: 2; }
  .ind__en { width: auto; writing-mode: horizontal-tb; font-size: clamp(44px, 13vw, 64px); line-height: 1.1; letter-spacing: -0.03em; }
  .ind__en span { display: inline-block; }
  .js .ind__en[data-reveal] span { transform: translateX(-0.25em); }
  .ind__nav { flex-direction: column; align-items: stretch; gap: 22px; }
  .ind__links { display: grid; grid-template-columns: repeat(2, max-content); gap: 16px 32px; max-width: none; }
  .ind__links--stack { grid-template-columns: minmax(0, 1fr); }
  /* Two English words lying side by side need a word space. */
  .ind__en--words span + span { margin-left: 0.24em; }
}

@media (prefers-reduced-motion: reduce) {
  .js .ind__en[data-reveal] span { opacity: 1; transform: none; transition: none; }
  .ind__links a:hover .ind__roll > span { animation: none; }
}

/* =========================================================================
   SERVICE PAGE (2026-10-09)
   ====================================================================== */

/* --- Approach: the three stages climb from left to right over a rising
   ribbon. The ribbon is drawn at a fixed aspect (no stretching, so the
   arrowhead keeps its shape) and its tail fades out on the left. */
.apr { position: relative; overflow: hidden; }
.apr__grid { position: relative; z-index: 1; display: grid; gap: var(--sp-md); }
.apr__head .lead { margin-top: var(--sp-x2s); }
.apr__step { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-left: clamp(26px, 2.6vw, 40px); }
.apr__step::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 0; width: 1px; background: linear-gradient(var(--c-primary-soft), rgba(163, 198, 232, 0)); }
.apr__step::after { content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--c-primary); }
.apr__num { font: 800 clamp(64px, 5vw + 24px, 112px)/0.9 var(--font-en); letter-spacing: -0.05em; color: #c3d8f0; }
.apr__step:nth-of-type(2) .apr__num { color: #9dbfe6; }
.apr__step:nth-of-type(3) .apr__num { color: var(--c-primary); }
.apr__label { margin-top: 12px; font: 800 var(--fs-lg)/1.3 var(--font-en); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-primary); }
.apr__title { margin-top: 14px; font-size: var(--fs-2l); font-weight: 700; line-height: 1.55; color: var(--c-ink); }
.apr__text { margin-top: 14px; max-width: 30em; font-size: var(--fs-sm); line-height: 2; color: var(--ink-body); }
.apr__step .tlink { margin-top: 22px; }
.apr__ribbon { display: none; }
@media (min-width: 1000px) {
  .apr { padding-bottom: clamp(200px, 19vw, 320px); }
  .apr__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: clamp(36px, 4vw, 80px); row-gap: 0; }
  .apr__head { grid-column: 1; grid-row: 1; }
  .apr__step:nth-of-type(1) { grid-column: 1; grid-row: 2; margin-top: var(--sp-lg); }
  .apr__step:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 2; margin-top: clamp(150px, 14vw, 230px); }
  .apr__step:nth-of-type(3) { grid-column: 3; grid-row: 1 / span 2; }
  .apr__ribbon { display: block; position: absolute; z-index: 0; right: 0; bottom: 0; width: min(100%, 1600px); height: auto; pointer-events: none; }
}

/* --- Stage detail: one "詳細を見る" row per stage opens the whole list, so
   each section stays short until the reader asks for more. */
.sd-more { border-block: 1px solid #cbdcec; }
.sd-more__btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 28px;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 24px 0;
  text-align: left;
  color: var(--c-ink);
}
.sd-more__arw { color: var(--c-primary); font: 700 var(--fs-xl)/1 var(--font-en); transition: transform var(--dur) var(--ease); }
.sd-more__label { font-size: var(--fs-xl); font-weight: 700; letter-spacing: 0.04em; transition: color var(--dur) var(--ease); }
.sd-more.is-open .sd-more__arw { transform: rotate(90deg); }
@media (any-hover: hover) {
  .sd-more__btn:hover .sd-more__label { color: var(--c-primary); }
  .sd-more:not(.is-open) .sd-more__btn:hover .sd-more__arw { transform: translateX(4px); }
}
.js .sd-more__panel { height: 0; overflow: hidden; transition: height var(--dur-slow) var(--ease); }
.service-detail__list { border-top: 1px solid #cbdcec; }
.service-detail__list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 20px; padding: 22px 0; }
.service-detail__list li + li { border-top: 1px solid #cbdcec; }
.service-detail__list h3 { font-size: var(--fs-lg); line-height: 1.55; color: var(--c-ink); }
.service-detail__list p { margin-top: 6px; font-size: var(--fs-sm); line-height: 1.9; }
@media (max-width: 759px) {
  .service-detail__list li { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 18px 0; }
}

/* --- Scope: a cell turns blue under the cursor, or when tapped. */
.scope-grid .capgrid__cell { cursor: pointer; transition: background-color var(--dur) var(--ease); }
.scope-grid .capgrid__cell > * { transition: color var(--dur) var(--ease); }
.scope-grid .capgrid__cell.is-active { background: var(--c-primary); }
.scope-grid .capgrid__cell.is-active > * { color: var(--c-white); }
@media (any-hover: hover) {
  .scope-grid .capgrid__cell:hover { background: var(--c-primary); }
  .scope-grid .capgrid__cell:hover > * { color: var(--c-white); }
}

/* --- Engagement model (after the client's mock, 2026-10-09) -------------
   A near-white stage with a faint oversized title behind it. One card is
   "current": it stands square, lifts and turns blue, while the others are
   sheared into parallelograms (sides upright, top and bottom rising to the
   right), as in the mock. Hover, tap, the round arrow and the dots all move it (main.js).
   Below 1280px the row scrolls sideways. */
.eng { position: relative; overflow: hidden; background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); }
.eng__curve { position: absolute; inset: 22% 0 auto; width: 100%; height: 60%; pointer-events: none; }
.eng__inner { position: relative; }
.eng__watermark {
  position: absolute;
  top: -0.18em;
  right: var(--gutter);
  display: grid;
  justify-items: end;
  font: 800 clamp(64px, 8.6vw, 168px)/0.86 var(--font-en);
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: rgba(21, 36, 60, 0.055);
  pointer-events: none;
  user-select: none;
}
/* A desktop flourish: on a phone the word cannot fit and only crowds the heading. */
@media (max-width: 759px) { .eng__watermark { display: none; } }
.eng__head { position: relative; z-index: 1; }
.eng__eyebrow {
  display: flex;
  align-items: center;
  gap: 20px;
  font: 600 var(--fs-x4s)/1.9 var(--font-en);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.eng__eyebrow::before { content: ""; flex: 0 0 48px; height: 1px; background: var(--c-ink); }
.eng__sub { margin-top: 12px; font-size: var(--fs-lg); font-weight: 500; letter-spacing: 0.06em; color: var(--c-ink-soft); }
.eng__statement { margin-top: 10px; }
.eng__motto { align-items: flex-start; margin-top: var(--sp-sm); font-size: 10px; }
.eng__motto::before { margin-top: 0.95em; }

.eng__stage { position: relative; z-index: 1; margin-top: var(--sp-md); }
.eng__cards {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(74%, 320px);
  gap: 28px;
  /* Room below for the cards' shadow: the scrolling box clips whatever
     overflows it, and a cut-off shadow shows as a hard edge. */
  margin: 0 calc(var(--gutter) * -1) -30px;
  padding: 22px var(--gutter) 60px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
}
.eng__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 22px 34px;
  border-top: 3px solid transparent;
  border-radius: 6px;
  background: var(--c-white);
  box-shadow: 0 2px 6px rgba(21, 36, 60, 0.05), 0 18px 40px rgba(21, 36, 60, 0.09);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.eng__card:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 46%;
  right: -22px;
  width: 16px;
  font: 400 18px/1 var(--font-en);
  text-align: center;
  color: #6f7c8f;
}
/* Grey, slightly metallic numbers; the current card's number is solid blue. */
.eng__num {
  font: 800 clamp(52px, 3.2vw + 20px, 92px)/1 var(--font-en);
  letter-spacing: -0.045em;
  background: linear-gradient(180deg, #a7b0bc 0%, #d6dbe2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eng__key { margin-top: 18px; font: 600 var(--fs-x4s)/1.4 var(--font-en); letter-spacing: 0.36em; text-transform: uppercase; color: #5b6677; transition: color 0.5s var(--ease); }
.eng__key::after { content: ""; display: block; width: 26px; height: 1px; margin-top: 16px; background: currentColor; }
/* Sized so the longest phrase (ブランディングの専門性) holds one line. */
.eng__title { margin-top: 18px; font-size: clamp(16px, 0.6vw + 8.4px, 18px); font-weight: 700; line-height: 1.55; color: var(--c-ink); }
.eng__title span { display: inline-block; }
.eng__text { margin-top: 14px; font-size: var(--fs-x2s); line-height: 1.9; color: var(--ink-body); }
.eng__card { transform: skewY(-6deg) scale(0.95); }
.eng__card.is-active { z-index: 1; transform: translateY(-12px) scale(1.04); }
.eng__card.is-active { border-top-color: var(--c-primary); box-shadow: 0 4px 10px rgba(31, 108, 184, 0.08), 0 26px 56px rgba(31, 108, 184, 0.18); }
.eng__card.is-active .eng__num { background: none; color: var(--c-primary); }
.eng__card.is-active .eng__key { color: var(--c-primary); }

/* Round arrow, dots, and (wide screens) the vertical "scroll to explore". */
.eng__ctrl { display: flex; align-items: center; gap: 20px; margin-top: 6px; }
.eng__next {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: 0 10px 26px rgba(31, 108, 184, 0.32);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.eng__next svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.eng__dots { display: flex; gap: 12px; }
.eng__dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; background: #c4cbd5; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.eng__dot[aria-current="true"] { background: var(--c-primary); transform: scale(1.15); }
.eng__scroll { display: none; }
@media (any-hover: hover) {
  .eng__next:hover { background: var(--c-primary-bright); transform: translateX(3px); }
  .eng__dot:hover { background: var(--c-primary-soft); }
}

.eng__foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: var(--sp-sm); }
.eng__count { display: flex; align-items: center; gap: 14px; font: 600 var(--fs-x4s)/1 var(--font-en); letter-spacing: 0.16em; color: var(--c-ink-soft); }
.eng__count-line { position: relative; width: clamp(80px, 9vw, 140px); height: 1px; background: #c4cbd5; }
.eng__count-line::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0.2) * 100%); background: var(--c-ink); transition: width 0.5s var(--ease); }
.eng__tag { font: 600 9px/1.8 var(--font-en); letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-gray); }

@media (min-width: 1280px) {
  .eng__stage { display: grid; grid-template-columns: minmax(0, 1fr) 60px; column-gap: clamp(24px, 2.4vw, 44px); align-items: start; }
  .eng__cards {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 46px 0 34px;
    overflow: visible;
  }
  .eng__card.is-active { transform: translateY(-16px) scale(1.05); }
  .eng__ctrl { flex-direction: column; gap: 26px; margin-top: 14px; }
  .eng__dots { flex-direction: column; }
  /* Vertical text: the flex main axis runs top to bottom here, so the rule
     sits above the words with the default row direction. */
  .eng__scroll {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    writing-mode: vertical-rl;
    font: 600 9px/1 var(--font-en);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--c-gray);
  }
  .eng__scroll::before { content: ""; width: 1px; height: 70px; background: currentColor; }
}