/* ==========================================================================
   AI Security Recruit — site.css（ページの組み立て。components.css の後に読む）
   ========================================================================== */
main { display: block; position: relative; }
.sec { overflow: clip; }
.sec > .container, .sec > .container--wide { position: relative; z-index: 1; }
.sec-body > * { min-width: 0; }
.sec-head--side { margin-bottom: 0; align-self: stretch; }
.sec-head--side .sec-num { position: static; display: block; font-size: clamp(56px, 6vw, 96px); margin: -.1em 0 .1em; }
.sec-head--side .lead { margin-top: 6px; }
.kv-title, .tags-title { margin: 0 0 14px; }
.stack-title { margin-bottom: 22px; }
.caption + .caption { margin-top: 6px; }
html:not(.mo) .flow li .flow__dot { background: var(--fill-key); border-color: var(--fill-key); color: var(--on-fill); }
html.mo [data-focus-list] > * .pr__en { opacity: .5; transition: opacity 500ms var(--ease-out); }
html.mo [data-focus-list] > .is-focus .pr__en { opacity: 1; }

/* ---------- ヒーロー（共通） ---------- */
.hero { position: relative; isolation: isolate; }
.hero__grid { position: relative; z-index: 2; }
.hero .crumb { margin-bottom: clamp(28px, 4vw, 44px); }
.hero__en { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: .92; letter-spacing: -.005em; color: var(--ink-900); }
.hero__en-line { display: block; }
.hero__en i { font-style: italic; font-weight: 400; color: var(--teal-700); }
.hero .lead { max-width: 30em; }
.hero .pills { margin-top: 26px; }
.hero .btns { margin-top: 30px; }
.hero__role { display: block; font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--teal-800); margin-bottom: 14px; }

/* 職種ページ（型 B：左 5 列に文章、右 7 列から右端まで写真） */
.hero--role { padding-block: clamp(24px, 2.6vw, 36px) clamp(150px, 14vw, 200px); min-height: min(80vh, 780px); display: flex; align-items: center; }
.hero--role .crumb { margin-bottom: clamp(22px, 2.4vw, 32px); }
.hero--role .hero__grid { align-items: center; width: min(100% - var(--gutter) * 2, var(--maxw)); }
.hero--role .hero__en { font-size: clamp(50px, 6.4vw, 96px); margin-bottom: clamp(18px, 2vw, 26px); }
.hero--role .hero__h1 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.55; letter-spacing: .05em; max-width: 17em; }
.hero--role .lead { margin-top: 18px; font-size: 15.5px; }
.hero--role .eyebrow { margin-bottom: 18px; }
.hero__media { align-self: stretch; display: flex; align-items: center; }
.hero__media .ph { width: 100%; --ar: 4 / 3; }
.hero__media .ph__frame { box-shadow: 0 30px 80px rgba(11,27,38,.16); }
@media (min-width: 900px) {
  .hero--role .l-b1 { grid-column: 1 / span 6; } .hero--role .l-b2 { grid-column: 7 / span 6; }
  .hero__media .ph--bleed-r { width: auto; max-width: none; flex: 1 1 0%; min-width: 0; }
  .hero--role .hero__media { align-self: start; margin-top: clamp(8px, 2vw, 24px); }
  .hero--role .hero__media .ph__frame { aspect-ratio: auto; height: min(70vh, 660px); }
}
@media (max-width: 899.98px) { .hero--role { min-height: 0; padding-bottom: 120px; } }
.digest-wrap { position: relative; z-index: 3; margin-top: clamp(-120px, -9vw, -72px); margin-bottom: clamp(56px, 6vw, 88px); }
.digest__links .pdfcard { grid-template-columns: 64px minmax(0, 1fr) 28px; padding: 12px; gap: 12px; box-shadow: none; border: 1px solid var(--line); }
.digest__links .pdfcard__cover { width: 64px; height: 40px; border-radius: 6px; }
.digest__links .pdfcard__cover .pdfcard__en, .digest__links .pdfcard__cover .pdfcard__ja { display: none; }
.digest__links .pdfcard .small { display: none; }
.digest__links .pdfcard__t { font-size: 13px; }

/* ---------- 求めない人 ---------- */
.notfor { border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 34px); background: #fff; }
.notfor__title { margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.notfor__title::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--risk); background: linear-gradient(45deg, transparent calc(50% - .75px), var(--risk) calc(50% - .75px), var(--risk) calc(50% + .75px), transparent calc(50% + .75px)); flex: none; }
.notfor__list { list-style: none; margin: 0; padding: 0; display: grid; }
.notfor__list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.notfor__list li:first-child { border-top: 0; }
.notfor__n { font-family: var(--font-ui); font-size: 12px; color: var(--ink-400); letter-spacing: .08em; padding-top: 3px; }
.notfor__t { display: block; font-weight: 700; font-size: 15px; line-height: 1.7; color: var(--ink-900); }
.notfor__b { display: block; font-size: 13.5px; line-height: 1.9; color: var(--ink-500); margin-top: 2px; }
.notfor__close { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.9; color: var(--ink-700); }

/* ---------- 採用資料（PDF）のカード ---------- */
.pdfcard { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr) 44px; gap: 20px; align-items: center; padding: 16px; background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-card); isolation: isolate; transition: transform var(--dur-fast) var(--ease-expo-out), box-shadow var(--dur-fast); }
.pdfcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.pdfcard__cover { position: relative; width: 132px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--grad-hero); display: grid; align-content: space-between; padding: 10px 12px; }
.pdfcard__cover::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 16px 16px; }
.pdfcard__en { position: relative; font-family: var(--font-display); font-size: 15px; line-height: 1; color: #fff; }
.pdfcard__en i { color: var(--teal-300); }
.pdfcard__ja { position: relative; font-size: 10px; font-weight: 700; color: #fff; letter-spacing: .04em; }
.pdfcard__body { display: grid; gap: 4px; min-width: 0; }
.pdfcard__t { font-weight: 700; font-size: 15px; line-height: 1.6; color: var(--ink-900); }
.pdfcard__go { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-brand); color: #fff; }
.pdfcard__go svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .pdfcard { grid-template-columns: 88px minmax(0, 1fr); } .pdfcard__cover { width: 88px; } .pdfcard__go { display: none; } }

/* ---------- 選考 ---------- */
.selection { display: grid; gap: 28px; }
.selection__period { margin: 0; display: inline-flex; align-items: center; gap: 14px; padding: 10px 18px 10px 14px; border-radius: var(--r-pill); background: var(--teal-100); justify-self: start; }
.selection__period b { font-size: 14px; color: var(--teal-800); }
.selection__iv { display: grid; gap: 6px; padding: 18px 20px; border-radius: var(--r-md); background: var(--mist); }
.g-mist .selection__iv { background: #fff; }
.selection__iv p { margin: 0; font-size: 14px; line-height: 1.9; color: var(--ink-500); }

/* ---------- 職種カード ---------- */
.rolecards { display: grid; gap: clamp(16px, 2vw, 28px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rolecards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rolecards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .rolecards, .rolecards--3, .rolecards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rolecards, .rolecards--3, .rolecards--4 { grid-template-columns: minmax(0, 1fr); } }
.rolecard { position: relative; display: grid; gap: 10px; align-content: start; border-radius: var(--r-lg); isolation: isolate; }
.rolecard .ph__frame { border-radius: var(--r-lg); }
.rolecard .ph__in img { transition: transform 900ms var(--ease-expo-out); }
.rolecard:hover .ph__in img { transform: scale(1.05); }
.rolecard__en { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; color: var(--ink-900); margin-top: 8px; }
.rolecard__en i { font-style: italic; color: var(--teal-700); }
.rolecard__ja { font-weight: 700; font-size: 14px; color: var(--ink-900); letter-spacing: .02em; }
.rolecard__one { font-size: 13.5px; line-height: 1.85; color: var(--ink-500); }
.rolecard__more { margin-top: 6px; }
.rolecard--sm .rolecard__en { font-size: 24px; }

/* ---------- セクションの細部 ---------- */
.sec--voices .bigquote { margin-bottom: var(--sp-block); }
.sec--voices .quote { box-shadow: none; border: 1px solid rgba(14,116,144,.12); }
.sec--growth .kv > dt:nth-of-type(odd), .sec--growth .kv > dd:nth-of-type(odd) { background: rgba(255,255,255,.7); }
.grades .grade { font-weight: 500; color: var(--teal-700); font-size: 15px; }
.grades .floor { text-align: right; }
.grades td.floor { font-size: 15px; font-weight: 400; color: var(--ink-900); }
.grades tbody tr:nth-child(-n+4) td.floor { color: var(--ink-400); font-family: var(--font-sans); font-size: 13px; }
.sec--others .ph__frame { border-radius: var(--r-md); }
.pin { margin-block: clamp(8px, 2vw, 24px); }
.pin__note { margin-top: 18px; }
.sec--work .pin, .sec--work .week { margin-top: var(--sp-block); }

/* ---------- アクセシビリティの補助 ---------- */
@media (forced-colors: active) { .aurora__canvas, .aurora__still { display: none; } .card, .digest, .stackcard { border: 1px solid CanvasText; } }

/* ==========================================================================
   共通ページ
   ========================================================================== */
/* ---------- 型 A のヒーロー（会社・理念・選考・資料・募集職種） ---------- */
.hero--a { padding-block: clamp(36px, 5vw, 64px) clamp(150px, 15vw, 220px); display: flex; align-items: center; }
.hero--tall { min-height: min(88vh, 860px); }
.hero--short { min-height: min(62vh, 600px); }
.hero--a .hero__copy { max-width: 760px; position: relative; z-index: 2; }
.hero--a .hero__en { font-size: clamp(56px, 8.4vw, 128px); margin-bottom: clamp(18px, 2.2vw, 28px); }
.hero--a .h1 { font-size: clamp(30px, 3.6vw, 54px); line-height: 1.42; }
.hero--a .lead { margin-top: 22px; }
.hero__giant { position: absolute; z-index: 1; left: -1.5vw; bottom: clamp(60px, 9vw, 130px); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-xxl); line-height: .8; letter-spacing: -.02em; color: rgba(11,27,38,.07); pointer-events: none; user-select: none; white-space: nowrap; }
.hero__giant [data-split] { display: block; }
.hero--a:has(.hero__giant) .hero__copy { margin-left: auto; margin-right: 0; }
@media (max-width: 899.98px) { .hero--a:has(.hero__giant) .hero__copy { margin-left: 0; } .hero__giant { bottom: 70px; } }

/* ---------- トップ（改修案）のヒーロー ---------- */
.hero--top { min-height: max(640px, min(100svh, 980px)); padding-block: clamp(40px, 6vw, 80px) clamp(150px, 15vw, 220px); display: flex; align-items: center; }
.hero--top .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
.hero--top .annot-row { margin-bottom: clamp(24px, 3vw, 40px); }
.hero__en--top { font-size: var(--fs-display-xl); margin-bottom: clamp(26px, 3vw, 40px); }
.hero__en--top i { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.hero--top .hero__h1 { font-size: clamp(24px, 2.6vw, 40px); letter-spacing: .08em; line-height: 1.5; }
.hero--top .lead { margin-top: 18px; max-width: 34em; }
@media (max-width: 899.98px) { .hero--top .hero__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- MVV の行（トップ） ---------- */
.mvvrows { border-top: 1px solid rgba(14,116,144,.18); }
.mvvrow { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; align-items: center; padding: clamp(22px, 3vw, 40px) 0; border-bottom: 1px solid rgba(14,116,144,.18); }
.mvvrow__en { margin: 0; display: grid; gap: 4px; }
.mvvrow__en i { font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 46px); line-height: 1; color: var(--teal-700); }
.mvvrow__en span { font-size: 12px; font-weight: 700; color: var(--ink-500); letter-spacing: .1em; }
.mvvrow__st { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.6; letter-spacing: .06em; color: var(--ink-900); }
@media (max-width: 700px) { .mvvrow { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* ---------- 3 つの入口（トップ） ---------- */
.knowcards { display: grid; gap: clamp(16px, 2vw, 28px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.knowcards .knowcard:nth-child(2) { margin-top: clamp(0px, 5vw, 72px); }
.knowcard { position: relative; display: grid; gap: 8px; align-content: start; border-radius: var(--r-lg); isolation: isolate; }
.knowcard .ph__in img { transition: transform 900ms var(--ease-expo-out); }
.knowcard:hover .ph__in img { transform: scale(1.05); }
.knowcard__en { font-family: var(--font-display); font-style: italic; font-size: clamp(30px, 3vw, 44px); line-height: 1; color: var(--ink-900); margin-top: 12px; }
.knowcard__ja { font-weight: 700; font-size: 14.5px; color: var(--teal-700); }
.knowcard__b { font-size: 13.5px; line-height: 1.85; color: var(--ink-500); padding-right: 52px; }
.knowcard__go { position: absolute; right: 4px; bottom: 6px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink-900); transition: background-color var(--dur-micro), transform var(--dur-fast) var(--ease-expo-out); }
.knowcard__go svg { width: 14px; height: 14px; }
.knowcard:hover .knowcard__go { background: var(--ink-900); color: #fff; transform: translateX(3px); }
@media (max-width: 900px) { .knowcards { grid-template-columns: minmax(0, 1fr); } .knowcards .knowcard:nth-child(2) { margin-top: 0; } }

/* ---------- 暗転セクション（地の切り替え）と循環の図 ---------- */
.sec--dark { color: #fff; background: var(--paper); }
.sec--dark[data-shift]:not(.stmt) { padding-top: calc(var(--sp-section) + min(24vh, 220px)); }
.shift-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.shift-layer, html:not(.mo) .sec--dark[data-ground="dark"] { background: var(--teal-900) url("../img/aurora/aurora-dark-lg.webp") center / cover no-repeat; }
@media (max-aspect-ratio: 4/5) { .shift-layer, html:not(.mo) .sec--dark[data-ground="dark"] { background-image: url("../img/aurora/aurora-dark-sm.webp"); } }
.shift-layer::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 118px 118px; }
.shift-layer::after { content: ""; position: absolute; inset: 0; background: url("../img/grain.png") 0 0 / 128px 128px; opacity: .045; mix-blend-mode: overlay; }
/* D06：動きがあるときは暗転の地を shift-layer だけが持ち、上端をぼかして前のセクションの地から変わる */
html.mo .sec--dark[data-shift] { background: var(--shift-from, #ffffff); }
.g-mist + .sec--dark[data-shift] { --shift-from: #f5f7fa; } .g-teal + .sec--dark[data-shift] { --shift-from: #f1f8fa; }
.sec--dark[data-shift] .shift-layer { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 min(24vh, 220px)); mask-image: linear-gradient(180deg, transparent 0, #000 min(24vh, 220px)); }
.stmt.sec--dark[data-shift] .shift-layer { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 min(18vh, 160px)); mask-image: linear-gradient(180deg, transparent 0, #000 min(18vh, 160px)); }
html.mo .sec--dark[data-shift] .shift-layer { opacity: 0; }
.sec--dark > .container, .sec--dark .giant { position: relative; z-index: 1; }
.sec--dark .giant { position: absolute; }
.sec--dark .h2, .sec--dark .h3, .sec--dark .h4 { color: #fff; }
.sec--dark .lead, .sec--dark .prose p, .sec--dark .small { color: #bfe9ef; }
.sec--dark .caption { color: #9ed6df; }
.cycle { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.cycle__fig { position: relative; aspect-ratio: 1; max-width: 560px; width: 100%; justify-self: center; }
.cycle__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cycle__svg path { stroke-dasharray: 600; stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--ease-out); }
html.mo .cycle__fig:not(.is-in) .cycle__svg path { stroke-dashoffset: 600; }
.cycle__fig.is-in .cycle__svg path:nth-of-type(2) { transition-delay: 200ms; } .cycle__fig.is-in .cycle__svg path:nth-of-type(3) { transition-delay: 400ms; } .cycle__fig.is-in .cycle__svg path:nth-of-type(4) { transition-delay: 600ms; }
.cycle__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; text-align: center; font-family: var(--font-serif); font-size: clamp(14px, 1.4vw, 18px); line-height: 1.6; letter-spacing: .1em; color: var(--teal-300); }
.cycle__nodes { list-style: none; margin: 0; padding: 0; }
.cycle__node { position: absolute; width: min(46%, 220px); padding: 16px 18px; border-radius: var(--r-md); background: rgba(255,255,255,.07); border: 1px solid rgba(143,230,239,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; gap: 4px; }
.cycle__node--0 { left: 50%; top: 0; transform: translate(-50%, -12%); }
.cycle__node--1 { right: 0; top: 50%; transform: translate(10%, -50%); }
.cycle__node--2 { left: 50%; bottom: 0; transform: translate(-50%, 12%); }
.cycle__node--3 { left: 0; top: 50%; transform: translate(-10%, -50%); }
.cycle__k { font-family: var(--font-serif); font-size: 20px; letter-spacing: .1em; color: #fff; }
.cycle__b { font-size: 12px; font-weight: 700; color: var(--teal-300); letter-spacing: .02em; line-height: 1.5; }
.cycle__d { font-size: 12.5px; color: #bfe9ef; line-height: 1.6; }
.cycle__cap { margin: 0; font-family: var(--font-serif); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.85; letter-spacing: .05em; color: #fff; }
.cyroles { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.18); }
.cyroles a { display: grid; grid-template-columns: 116px minmax(0, 1fr) 32px; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.18); transition: padding var(--dur-fast) var(--ease-expo-out); }
.cyroles a:hover { padding-left: 8px; }
.cyroles .label { color: var(--teal-300); }
.cyrole__r { font-weight: 700; font-size: 14.5px; color: #fff; }
.cyroles .arrow { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; color: #fff; }
.cyroles .arrow svg { width: 12px; height: 12px; }
@media (max-width: 900px) {
  .cycle { grid-template-columns: minmax(0, 1fr); }
  .cycle__fig { aspect-ratio: auto; max-width: none; }
  .cycle__svg, .cycle__center { display: none; }
  .cycle__nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cycle__node { position: static; transform: none !important; width: auto; }
}
@media (max-width: 480px) { .cycle__nodes { grid-template-columns: minmax(0, 1fr); } }
.biz { margin-top: var(--sp-block); display: grid; gap: 28px; }
.org { border: 1px solid rgba(143,230,239,.28); border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 30px); display: grid; gap: 12px; background: rgba(255,255,255,.04); }
.org__top { display: grid; gap: 2px; justify-items: center; padding: 14px; border-radius: var(--r-sm); background: rgba(143,230,239,.16); color: #fff; font-weight: 700; font-size: 14px; text-align: center; }
.org__top small { font-weight: 400; color: #bfe9ef; font-size: 12px; }
.org__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.org__label { font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; color: var(--teal-300); text-transform: uppercase; min-width: 150px; }
.org__box { padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 13px; font-weight: 700; }
.org__box--f { border-style: dashed; font-weight: 500; }
.org .caption { color: #9ed6df; }

/* ---------- 8 つの原則（カード） ---------- */
.prcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.prcard { background: #fff; padding: clamp(20px, 2.2vw, 30px); display: grid; gap: 10px; align-content: start; min-height: 190px; transition: background-color var(--dur-fast); }
.prcard:hover { background: var(--teal-50); }
.prcard__n { font-family: var(--font-ui); font-size: 12px; letter-spacing: .1em; color: var(--teal-700); }
.prcard__en { font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.1; color: var(--ink-900); }
.prcard__ja { font-size: 13.5px; line-height: 1.85; color: var(--ink-500); }
.prcard { box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
.prcard:nth-child(4n) { box-shadow: inset 0 -1px 0 var(--line); }
.prcard:nth-last-child(-n+4) { box-shadow: inset -1px 0 0 var(--line); }
.prcard:last-child { box-shadow: none; }
@media (max-width: 900px) {
  .prcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prcard, .prcard:nth-child(4n), .prcard:nth-last-child(-n+4) { box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
  .prcard:nth-child(2n) { box-shadow: inset 0 -1px 0 var(--line); }
  .prcard:nth-last-child(-n+2) { box-shadow: inset -1px 0 0 var(--line); }
  .prcard:last-child { box-shadow: none; }
}
@media (max-width: 480px) { .prcards { grid-template-columns: minmax(0, 1fr); } .prcard { min-height: 0; } .prcard:nth-child(n) { box-shadow: inset 0 -1px 0 var(--line); } .prcard:last-child { box-shadow: none; } }

/* ---------- 数字（年代構成） ---------- */
.numbers__ages { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 40px; align-items: start; padding-top: 28px; border-top: 1px solid var(--line); }
.numbers__ages .h4 { margin: 0; }
.numbers__ages .bars { grid-column: 2; }
.numbers__ages .caption { grid-column: 2; }
@media (max-width: 760px) { .numbers__ages { grid-template-columns: minmax(0, 1fr); } .numbers__ages .bars, .numbers__ages .caption { grid-column: 1; } }

/* ---------- 会社を知る ---------- */
.band-photo { position: relative; z-index: 2; margin-top: clamp(-150px, -11vw, -90px); }
.band-photo .ph__frame { border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(11,27,38,.16); }
.band-photo .ph__in { inset: 0; }   /* 2026-10-12：経営陣と顧問の組み写真。左右の端の人が切れないよう、視差用の余白を取らない */
@media (max-width: 899.98px) { .band-photo .ph--219 { --ar: 4 / 3; } }
.band-photo + .digest-wrap { margin-top: clamp(40px, 5vw, 72px); }
.digest--simple .digest__head { grid-template-columns: minmax(0, 1fr); }
.mvvgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mvvcard { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px 22px 26px; border-radius: var(--r-md); background: var(--teal-50); isolation: isolate; transition: transform var(--dur-fast) var(--ease-expo-out); min-height: 210px; }
.mvvcard:hover { transform: translateY(-3px); }
.mvvcard__en { font-family: var(--font-display); font-size: 32px; line-height: 1; color: var(--teal-700); }
.mvvcard__st { font-family: var(--font-serif); font-weight: 500; font-size: 17px; line-height: 1.7; letter-spacing: .04em; color: var(--ink-900); }
@media (max-width: 900px) { .mvvgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mvvgrid { grid-template-columns: minmax(0, 1fr); } }
.message__photos { align-self: stretch; }
.message__stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.message__stack .portrait:nth-child(2) { margin-top: 48px; }
.message__body .h2 { margin: 14px 0 28px; }
.prose--message { max-width: 36em; }
.prose--message p { font-size: 15.5px; line-height: 2.1; color: var(--ink-700); }
.message__sign { display: grid; gap: 4px; margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--font-serif); font-size: 15px; letter-spacing: .08em; color: var(--ink-900); max-width: 36em; }
@media (max-width: 900px) { .message__stack .portrait:nth-child(2) { margin-top: 0; } }
.rings-fig { position: relative; aspect-ratio: 1; max-width: 520px; margin-inline: auto; }
.ring { position: absolute; border-radius: 50%; border: 1px solid rgba(14,116,144,.35); display: grid; justify-items: center; align-content: start; transition: transform 1200ms var(--ease-expo-out), opacity 1200ms; }
.ring--0 { inset: 0; background: rgba(255,255,255,.35); }
.ring--1 { inset: 15%; background: rgba(255,255,255,.45); transition-delay: 120ms; }
.ring--2 { inset: 31%; background: rgba(255,255,255,.6); transition-delay: 240ms; }
.ring--3 { inset: 39%; background: var(--fill-key); border-color: transparent; transition-delay: 360ms; align-content: center; }
.ring__l { margin-top: 7%; font-size: 12.5px; font-weight: 700; color: var(--teal-800); letter-spacing: .04em; background: rgba(255,255,255,.85); padding: 4px 12px; border-radius: var(--r-pill); white-space: nowrap; }
.ring--3 .ring__l { margin: 0; background: none; color: #fff; font-size: 11.5px; text-align: center; white-space: normal; padding: 0 6%; line-height: 1.5; }
html.mo .rings-fig:not(.is-in) .ring { transform: scale(.6); opacity: 0; }
.territory-cards { margin-top: var(--sp-block); }
#territory .cards { margin-top: var(--sp-block); }
.datacmp { margin-top: var(--sp-block); padding: clamp(24px, 3vw, 44px); border-radius: var(--r-lg); background: #fff; }
.datacmp .h3 { margin-bottom: 22px; }
.datacmp__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.datacmp__card { display: grid; gap: 8px; padding: 22px; border-radius: var(--r-md); border: 1px solid var(--line); color: var(--ink-400); }
.datacmp__card svg { width: 100%; max-width: 220px; height: auto; color: var(--ink-400); margin-bottom: 6px; }
.datacmp__t { margin: 0; font-family: var(--font-serif); font-size: 20px; color: var(--ink-900); letter-spacing: .04em; }
@media (max-width: 700px) { .datacmp__grid { grid-template-columns: minmax(0, 1fr); } }
.alumni { margin-top: 40px; display: grid; gap: 14px; }
.people-group { margin: 48px 0 18px; display: flex; align-items: center; gap: 14px; }
.people-group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.portraits--sm .portrait__bio { font-size: 12px; }
.plannums { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.plannums li { padding: 18px 18px 18px 0; border-right: 1px solid var(--line-soft); display: grid; gap: 6px; }
.plannums li:last-child { border-right: 0; }
.plannums li + li { padding-left: 18px; }
.plannums__v { font-family: var(--font-serif); font-size: clamp(18px, 1.7vw, 23px); letter-spacing: .04em; color: var(--ink-900); }
@media (max-width: 760px) { .plannums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plannums li, .plannums li + li { padding-left: 0; border-right: 0; border-bottom: 1px solid var(--line-soft); } }

/* ---------- 理念：ステートメントの区間 ---------- */
.stmt { min-height: min(100vh, 980px); display: flex; align-items: center; }
.stmt__in { position: relative; z-index: 1; max-width: 860px; }
.stmt__label { display: flex; align-items: baseline; gap: 14px; margin: 0 0 28px; }
.stmt__label i { font-family: var(--font-display); font-size: 30px; text-transform: none; letter-spacing: .02em; color: var(--teal-700); }
.stmt__st { margin: 0 0 clamp(28px, 3vw, 44px); font-family: var(--font-serif); font-weight: 500; font-size: clamp(30px, 4.2vw, 60px); line-height: 1.5; letter-spacing: .08em; color: var(--ink-900); text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
#slogan .stmt__st { font-family: var(--font-display); font-weight: 500; font-size: clamp(48px, 7vw, 108px); line-height: 1; letter-spacing: 0; }
.stmt__body p { font-size: 15.5px; line-height: 2.15; }
.stmt__close { margin: 32px 0 0; font-family: var(--font-serif); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.9; letter-spacing: .06em; color: var(--ink-900); padding-left: 22px; border-left: 2px solid var(--teal-500); }
.stmt.sec--dark .stmt__st, .stmt.sec--dark .stmt__close { color: #fff; }
.stmt.sec--dark .stmt__label i { color: var(--teal-300); }
.stmt .giant { font-size: var(--fs-display-xxl); }

/* ---------- 仕事を知る：職種の索引（ヒーロー） ---------- */
.hero--work { padding-block: clamp(32px, 4vw, 56px) clamp(150px, 14vw, 210px); }
.hero--work .hero__grid { display: block; }
.hero--work .h1 { font-size: clamp(30px, 3.6vw, 54px); margin-top: clamp(24px, 3vw, 40px); }
.hero--work .lead { margin-top: 16px; max-width: 40em; }
.idx { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.idx__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(11,27,38,.12); }
.idx__item a { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: clamp(14px, 1.6vw, 22px) 6px; border-bottom: 1px solid rgba(11,27,38,.12); transition: background-color var(--dur-fast), padding var(--dur-fast) var(--ease-expo-out); }
.idx__item a { border-radius: var(--r-md); }
.idx__item a:hover, .idx__item.is-act a { background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(14,116,144,.16); padding-left: 16px; }
.idx__n { font-family: var(--font-ui); font-size: 12px; letter-spacing: .1em; color: var(--teal-700); padding-top: 1.1em; grid-row: span 3; }
.idx__en { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 4.6vw, 72px); line-height: 1.02; color: var(--ink-900); }
.idx__en i { font-style: italic; font-weight: 400; color: var(--teal-700); }
.idx__ja { font-weight: 700; font-size: 13.5px; color: var(--ink-900); margin-top: 8px; }
.idx__one { font-size: 13px; color: var(--ink-500); line-height: 1.7; }
.idx__photos { position: relative; aspect-ratio: 4 / 5; max-width: 100%; }
.idx__ph { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms var(--ease-out); }
.idx__ph .ph__frame { clip-path: inset(6% 6% 6% 6% round var(--r-lg)); transition: clip-path 600ms var(--ease-expo-out); }
.idx__ph .ph__in img { transform: scale(1.08); transition: transform 900ms var(--ease-expo-out); }
.idx__ph.is-act { opacity: 1; }
.idx__ph.is-act .ph__frame { clip-path: inset(0 round var(--r-lg)); }
.idx__ph.is-act .ph__in img { transform: none; }
@media (max-width: 899.98px) { .idx { grid-template-columns: minmax(0, 1fr); } .idx__photos { display: none; } }

/* 職種カード（ハブの横長） */
.rolecards--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rolecard--wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px; align-items: start; padding: 18px; background: #fff; border: 1px solid var(--line); }
.rolecard--wide .ph__frame { border-radius: var(--r-md); }
.rolecard__body { display: grid; gap: 8px; align-content: start; padding-top: 6px; }
.rolecard--wide .rolecard__en { margin-top: 0; font-size: clamp(24px, 2.2vw, 30px); }
.rolecard__lead { font-family: var(--font-serif); font-size: 15px; line-height: 1.75; color: var(--ink-900); letter-spacing: .03em; margin: 4px 0; }
.rolecard__meta { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px 12px; margin: 6px 0 0; font-size: 12.5px; line-height: 1.75; }
.rolecard__meta dt { font-weight: 700; color: var(--ink-900); } .rolecard__meta dd { margin: 0; color: var(--ink-500); }
@media (max-width: 1100px) { .rolecards--wide { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .rolecard--wide { grid-template-columns: minmax(0, 1fr); } }
.case { padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-lg); background: #fff; display: grid; gap: 10px; }
.case p { margin: 0; font-family: var(--font-serif); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.95; letter-spacing: .04em; color: var(--ink-900); }

/* ---------- 人を知る ---------- */
.hero--people { padding-block: clamp(36px, 5vw, 64px) clamp(120px, 12vw, 170px); min-height: min(92vh, 900px); display: grid; align-content: center; }
.hero--people .hero__copy { max-width: 640px; position: relative; z-index: 2; }
.hero--people .h1 { font-size: clamp(30px, 3.6vw, 54px); line-height: 1.45; }
.hero--people .lead { margin-top: 20px; max-width: 34em; }
.hero--people .hero__giant { top: clamp(40px, 6vw, 90px); bottom: auto; left: auto; right: -2vw; }
.voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: var(--sp-block); }
.voice { background: #fff; border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 34px); display: grid; gap: 16px; align-content: start; }
.voice__head { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.voice__role { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 19px; letter-spacing: .04em; color: var(--ink-900); }
.voice__qa { margin: 0; display: grid; gap: 4px; }
.voice__qa dt { font-size: 12px; font-weight: 700; color: var(--teal-700); letter-spacing: .04em; margin-top: 10px; }
.voice__qa dt:first-child { margin-top: 0; }
.voice__qa dd { margin: 0; font-size: 14px; line-height: 1.95; color: var(--ink-700); }
@media (max-width: 760px) { .voices { grid-template-columns: minmax(0, 1fr); } }
.artgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.artgrid .artcard:first-child { grid-column: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(18px, 2.4vw, 32px); align-items: end; }
.artgrid .artcard:first-child { grid-template-rows: 1fr auto auto; }
.artgrid .artcard:first-child .artcard__img { grid-column: 2; grid-row: 1 / span 3; }
.artgrid .artcard:first-child .artcard__meta { grid-column: 1; grid-row: 2; }
.artgrid .artcard:first-child .artcard__t { grid-column: 1; grid-row: 3; padding-bottom: 6px; }
.artgrid .artcard:first-child .artcard__t { font-size: clamp(18px, 1.6vw, 22px); }
.artcard__img { aspect-ratio: 4 / 5; background: url("../img/aurora/aurora-light-sm.webp") center / cover; }
.artcard__img img { object-position: 50% 18%; }
@media (max-width: 900px) { .artgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .artgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } .artgrid .artcard:first-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .artcard__t { font-size: 14px; } }
.pr-big { display: block; font-family: var(--font-display); font-style: italic; font-size: clamp(90px, 10vw, 150px); line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--teal-600); margin-bottom: 8px; }
.prs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pr { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: clamp(22px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--line); }
.pr__n { font-family: var(--font-ui); font-size: 13px; letter-spacing: .1em; color: var(--teal-700); padding-top: .9em; }
.pr__en { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.05; color: var(--ink-900); }
.pr__ja { margin: 8px 0 0; font-size: 15px; line-height: 1.9; color: var(--ink-700); }
.pr__gn { margin-top: 10px; border-bottom: 0; }
.pr__gn > summary { padding: 8px 0; grid-template-columns: auto minmax(0, 1fr) 30px; font-size: 13px; font-weight: 500; color: var(--ink-500); }
.pr__dl { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 12px; margin: 4px 0 8px; font-size: 13.5px; line-height: 1.8; }
.pr__dl dt { font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; padding-top: 3px; }
.pr__dl dt.good { color: var(--ok); } .pr__dl dt.ng { color: var(--risk-ink); }
.pr__dl dd { margin: 0; color: var(--ink-700); }

/* ---------- 選考・FAQ ---------- */
.casualbox, .hrmosbox { margin-top: var(--sp-block); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-lg); background: var(--teal-50); }
.casualbox > div, .hrmosbox > div { display: grid; gap: 8px; max-width: 40em; }
.casualbox .h3, .hrmosbox .h3 { font-size: clamp(20px, 1.8vw, 24px); }
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.fit__col { border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 34px); background: var(--teal-50); }
.fit__title { margin: 0 0 14px; }
.fit__list { list-style: none; margin: 0; padding: 0; display: grid; }
.fit__list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid rgba(14,116,144,.15); font-weight: 700; font-size: 15px; line-height: 1.7; color: var(--ink-900); }
.fit__list li:first-child { border-top: 0; }
.fit__n { font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--teal-700); padding-top: 3px; }
.fit__sub { margin: 22px 0 10px; font-size: 13px; font-weight: 700; color: var(--teal-800); }
.fit__dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: 13.5px; line-height: 1.8; }   /* 2026-10-13：職種名（リソースストラテジストなど）を 1 行で */
.fit__dl dt { font-weight: 700; color: var(--ink-900); } .fit__dl dd { margin: 0; color: var(--ink-500); }
.fit__dl dt { white-space: nowrap; }
@media (max-width: 479.98px) { .fit__dl { grid-template-columns: minmax(0, 1fr); row-gap: 2px; } .fit__dl dd { margin-bottom: 8px; } }
@media (max-width: 900px) { .fit { grid-template-columns: minmax(0, 1fr); } }

/* ---------- カジュアル面談 ---------- */
.hero--casual { padding-block: clamp(32px, 4vw, 56px) clamp(140px, 13vw, 190px); }
.hero--casual .hero__grid { align-items: center; }
.casual__photo { grid-column: 1 / span 5; position: relative; z-index: 1; }
.casual__photo .portrait__frame { box-shadow: 0 30px 80px rgba(11,27,38,.2); }
.casual__photo figcaption { padding-left: 4px; }
.casual__card { grid-column: 5 / span 8; position: relative; z-index: 2; margin-left: 0; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: var(--r-lg); padding: clamp(26px, 3.4vw, 56px); box-shadow: 0 20px 60px rgba(11,27,38,.10); align-self: center; }
.casual__card .crumb { margin-bottom: 22px; }
.casual__card .hero__en { font-size: clamp(44px, 5.6vw, 84px); margin-bottom: 18px; }
.casual__card .h1 { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.55; }
.casual__card .lead { margin-top: 16px; }
.casual__card .btns { margin-top: 26px; }
@media (min-width: 900px) { .casual__photo, .casual__card { grid-row: 1; } }
@media (max-width: 899.98px) { .casual__photo { grid-column: 1 / -1; max-width: 340px; } .casual__card { grid-column: 1 / -1; margin-top: -60px; } }
.mbar { display: none; }
@media (max-width: 899.98px) {
  .mbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
  [data-page="casual"] .footer, body:has(.mbar) .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 採用資料 ---------- */
.sec--docs { padding-top: 0; }
.docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 30px); margin-top: clamp(-110px, -8vw, -60px); position: relative; z-index: 3; }
.doc { position: relative; display: grid; gap: 16px; align-content: start; perspective: 800px; isolation: isolate; border-radius: var(--r-lg); }
.doc:first-child { grid-column: span 2; }
.doc__cover { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; display: grid; align-content: space-between; padding: clamp(18px, 2vw, 28px); background: var(--grad-hero); box-shadow: var(--shadow-hero); transition: transform 500ms var(--ease-expo-out), box-shadow 500ms; transform-style: preserve-3d; isolation: isolate; }
.doc:first-child .doc__cover { aspect-ratio: 16 / 8; }
.doc:nth-child(2) .doc__cover { background: linear-gradient(135deg, #0e7490 0%, #0b3e4c 100%); }
.doc:nth-child(3) .doc__cover { background: linear-gradient(135deg, #047857 0%, #0b3e4c 100%); }
.doc:nth-child(4) .doc__cover { background: linear-gradient(135deg, #0f4c5c 0%, #1e1b4b 100%); }
.doc:nth-child(5) .doc__cover { background: linear-gradient(135deg, #4f46e5 0%, #0b3e4c 100%); }
.doc__cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.doc__cover::after { content: ""; position: absolute; right: -18%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(143,230,239,.28), transparent 62%); pointer-events: none; }
.doc:hover .doc__cover { transform: rotateX(3deg) rotateY(-4deg) translateY(-4px); box-shadow: 0 2px 4px rgba(11,27,38,.05), 0 30px 70px rgba(11,27,38,.2); }
.doc__en { position: relative; font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 36px); line-height: 1; color: #fff; }
.doc__en i { color: var(--teal-300); }
.doc__ja { position: relative; font-family: var(--font-serif); font-weight: 500; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.55; letter-spacing: .05em; color: #fff; max-width: 16em; word-break: keep-all; overflow-wrap: anywhere; }
.doc:first-child .doc__ja { font-size: clamp(20px, 2.2vw, 30px); }
.doc__tag { position: static; order: -1; justify-self: start; margin-bottom: 12px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(11,27,38,.36); padding: 4px 10px; border-radius: var(--r-pill); }
.doc__cover { align-content: stretch; grid-template-rows: auto auto 1fr; }
.doc__ja { align-self: end; }
.doc__body { display: grid; gap: 4px; }
.doc__t { font-weight: 700; font-size: 15px; color: var(--ink-900); line-height: 1.6; }
.doc__meta { font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; color: var(--ink-400); }
.doc .link { margin-top: 6px; }
@media (max-width: 900px) { .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .docs { grid-template-columns: minmax(0, 1fr); } .doc:first-child { grid-column: auto; } }

/* ---------- 募集職種 ---------- */
.sec--jobs { padding-top: 0; }
.jobcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); margin-top: clamp(-110px, -8vw, -60px); position: relative; z-index: 3; }
.jobcard .btns { margin-top: 6px; }
@media (max-width: 760px) { .jobcards { grid-template-columns: minmax(0, 1fr); } }

.logos--certs img { filter: none; opacity: 1; max-height: 44px; }
.logos--certs li { height: 88px; }
@media (max-width: 480px) { .logos--certs { grid-template-columns: minmax(0, 1fr); } .logos--certs li { height: 96px; } .logos--certs img { max-height: 56px; } }
.stmt__sub { display: block; margin-top: .5em; font-size: .52em; line-height: 1.6; letter-spacing: .1em; color: var(--ink-700); }
.stmt__main { display: block; }

/* ==========================================================================
   v3 監査の修正（2026-10-11）
   ========================================================================== */
/* ---------- 文字組み：本文の最後の行に 1 文字だけ残さない（D17）・見出し類を語の途中で折らない（C02）・文節で折る（C24） ---------- */
main :is(p, li, dd, dt, td, th, h3, h4, figcaption, summary) { text-wrap: pretty; }
/* 文節（生成時に入れた <wbr>）で折る。auto-phrase に対応しないブラウザでも語の途中で折らない */
main, .footer { word-break: keep-all; overflow-wrap: anywhere; }
.card__title, .stackcard__t, .notfor__t, .week__t, .pin__t, .step__t, .flow__t, .voice__role, .pdfcard__t, .doc__ja, .rolecard__ja, .rolecard__one, .rolecard__lead,
.idx__ja, .idx__one, .knowcard__b, .cycle__b, .cycle__d, .mvvcard__st, .mvvrow__st, .prcard__ja, .pr__ja, .jobcard .h3, .jobcard .small, .table th, .case p,
.portrait__bio, .stmt__sub, .stmt__close, .callout, .fit__list li, .digest__k, .menu__item, .ring__l, .cycle__cap {
  word-break: keep-all; overflow-wrap: anywhere;
}
.card__body, .digest__v, .digest__note, .digest__point span, .kv > dd, .stackcard__b, .notfor__b, .flow__b, .step__b, .week__b, .pin__b, .portrait__bio,
.caption, .small, .acc__a p, .prose p, .lead, .quote p, .voice__qa dd, .case p, .pillar__b, .stat__cap {
  word-break: keep-all; overflow-wrap: anywhere;   /* 生成時の <wbr>（BudouX）で折る。ブラウザごとの差をなくす */
}
.voice__role { font-size: clamp(16px, 4.4vw, 19px); }

/* ---------- D45：Noto Serif JP は 500 だけを読み込む ---------- */
.cycle__k, .cycle__center, .cycle__cap, .datacmp__t, .plannums__v, .message__sign { font-weight: 500; }

/* ---------- D28：オーロラの上の小さな文字は teal-800 ---------- */
.aurora .eyebrow .n, .aurora .idx__n, .aurora .portrait__role { color: var(--teal-800); }

/* ---------- D15：同じ地が続く境目は上の余白を詰め、1px の線で区切る ---------- */
.sec.g-paper + .sec.g-paper:not(.sec--flush-top), .sec.g-mist + .sec.g-mist, .sec.g-teal + .sec.g-teal { padding-top: clamp(48px, 5vw, 64px); }
.sec.g-paper + .sec.g-paper:not(.sec--flush-top) > .container { border-top: 1px solid var(--line-soft); padding-top: clamp(48px, 5vw, 64px); }

/* ---------- D16・K04・K08：ブロックの間と、職種ページの追加部品 ---------- */
.faq-title { margin: 0 0 16px; }
.kv-note { margin-top: 10px; }
.kv-note + .kv-note { margin-top: 4px; }
.apply-btns { padding: clamp(18px, 2vw, 26px); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-card); }
.role-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.role-links .label { flex-basis: 100%; }
.role-more { display: grid; gap: 28px; margin-top: var(--sp-block); }
.quote--gap { max-width: 760px; }
.role-more__links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; }

/* ---------- D14：「ある1日」の固定中は、構図を画面の中央に ---------- */
@media (min-width: 900px) {
  .pin:not(.is-static) { min-height: calc(100vh - var(--header-h) - var(--pagenav-h)); display: grid; align-content: center; }
  .pin:not(.is-static) .pin__card { width: clamp(300px, 27vw, 400px); min-height: 300px; padding: 32px 30px 34px; }
  .pin:not(.is-static) .pin__time { font-size: clamp(36px, 3.4vw, 48px); }
}

/* ---------- D34：ページ内ナビは、ヒーローを抜けたら上から出す ---------- */
@media (min-width: 900px) {
  html.mo .pagenav { transform: translateY(-100%); opacity: 0; transition: transform var(--dur-fast) var(--ease-expo-out), opacity var(--dur-micro); }
  html.mo .pagenav.is-shown { transform: none; opacity: 1; }
}

/* ---------- D05：同心円の図（スマホ） ---------- */
@media (max-width: 600px) {
  .ring--1 { inset: 11%; } .ring--2 { inset: 23%; } .ring--3 { inset: 35%; }
  .ring__l { font-size: 11.5px; margin-top: 5%; padding: 3px 10px; }
  .ring--3 .ring__l { font-size: 11px; padding: 0 12%; text-wrap: balance; }
}

.hero--top .hero__en--top { font-size: clamp(52px, 7.2vw, 112px); margin-bottom: clamp(20px, 2.4vw, 32px); }
.hero--top { padding-block: clamp(28px, 3.4vw, 48px) clamp(56px, 5vw, 72px); }
.hero--top .lead { max-width: 40em; }
.hero--top .annot-row { margin-bottom: clamp(18px, 2.2vw, 28px); }

/* ---------- D19：セクションの冒頭の型を 2 つ足す（文の冒頭・写真の冒頭） ---------- */
.sec-head--statement { grid-template-columns: minmax(0, 1fr); margin-bottom: clamp(48px, 6vw, 96px); }
.sec-head--statement .h2 { font-size: clamp(32px, 4.4vw, 64px); line-height: 1.45; max-width: 15em; }
.sec-head--statement .lead { max-width: 36em; }
.sec-head--statement .sec-num { top: -.1em; }
@media (min-width: 900px) { .sec-body--offset { margin-left: calc((100% - 11 * var(--space-5)) / 12 * 4 + 4 * var(--space-5)); } }
.sec-cover { position: relative; aspect-ratio: 21 / 9; border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-block); isolation: isolate; max-width: 100%; background: var(--teal-900); }
.sec-cover .ph__cover { --cover: #0b3e4c; }
.sec-cover > .ph { position: absolute; inset: 0; }
.sec-cover > .ph .ph__frame { aspect-ratio: auto; height: 100%; border-radius: 0; clip-path: inset(0% 0% 0% 0% round 0px); }
.sec-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(11,27,38,.80) 0%, rgba(11,27,38,.66) 50%, rgba(11,27,38,.30) 72%, rgba(11,27,38,0) 92%); }
.sec-cover > .sec-head { position: absolute; left: clamp(20px, 3vw, 48px); right: clamp(20px, 3vw, 48px); bottom: clamp(20px, 3vw, 40px); z-index: 2; margin: 0; }
.sec-cover .h2 { color: #fff; }
.sec-cover .label, .sec-cover .eyebrow .n { color: var(--teal-300); }
.sec-cover .eyebrow::before { background: var(--teal-300); }
.sec-cover .sec-num { -webkit-text-stroke-color: rgba(255,255,255,.4); }
@media (max-width: 899.98px) { .sec-cover { aspect-ratio: 4 / 3; } }
.sec-cover__lead { max-width: 36em; margin: calc(var(--sp-block) * -0.5) 0 var(--sp-block); }
@media (min-width: 900px) { .sec-cover__lead { margin-left: calc((100% - 11 * var(--space-5)) / 12 * 4 + 4 * var(--space-5)); } }

/* ---------- 面接官（2 名） ---------- */
.portraits--pair .portrait__bio { font-size: 13px; }

/* ---------- D23：スマホで写真カードを 2 列にして縦の長さを抑える ---------- */
@media (max-width: 560px) {
  .knowcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .knowcards .knowcard:first-child { grid-column: 1 / -1; }
  .knowcards .knowcard:first-child .ph--45 { --ar: 16 / 10; }
  .knowcard__b { padding-right: 0; } .knowcard__go { display: none; }
  .knowcard__en { font-size: 26px; }
  .rolecards, .rolecards--3, .rolecards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .rolecard__en { font-size: 20px; } .rolecard__one { font-size: 12.5px; }
  .rolecard--wide { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .rolecards--wide { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- D25・C02：仕事ハブの比較表 ---------- */
.table--compare { min-width: 820px; }
.table--compare thead th { white-space: nowrap; }
@media (max-width: 760px) {
  .table--compare th, .table--compare td { min-width: 160px; }
  .table--compare .sticky-first { min-width: 88px; width: 88px; box-shadow: 1px 0 0 var(--line); }
}

/* ---------- D24：カジュアル面談（スマホ）：申込の見出しとボタンを先に、固定バーは重ならない ---------- */
@media (max-width: 899.98px) {
  .hero--casual .hero__grid { display: flex; flex-direction: column; }
  .casual__card { order: -1; margin-top: 0; }
  .casual__photo { order: 0; max-width: none; margin-top: 20px; }
  .casual__photo .portrait { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: end; gap: 14px; }
  .casual__photo .portrait__frame { width: 120px; }
  .casual__photo figcaption { padding: 0 0 4px; }
  .mbar { transition: transform 300ms var(--ease-quart-out); }
  .mbar.is-hidden { transform: translateY(110%); }
}

/* ---------- D12：巨大欧文（型 A のヒーローに置くときの位置） ---------- */
.hero--short .hero__giant { bottom: clamp(48px, 7vw, 110px); }

html.mo .sec-head .eyebrow.rv-line:not(.is-in) { opacity: 0; }
.sec-head .eyebrow.rv-line { transition: opacity 500ms var(--ease-out); }
.table thead th { text-wrap: balance; }

/* ===================================================================
   v3 検証の修正（2026-10-11）
   =================================================================== */
.nw { white-space: nowrap; }
/* N10：役職・人名・PDF の表紙の版名を語の途中で折らない */
.portrait__role { word-break: keep-all; overflow-wrap: anywhere; }
.artcard__who { display: inline-flex; flex-wrap: wrap; column-gap: .6em; word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 560px) { .pdfcard__cover .pdfcard__ja { display: none; } }
/* N11：静的な「ある1日」の後の本文との間 */
.pin.is-static + .container { margin-top: var(--sp-block); }
/* N03：キーボードで入ったときもページ内ナビを見せる */
@media (min-width: 900px) { html.mo .pagenav:focus-within { transform: none; opacity: 1; } }
/* D32：動きを止めた後は、ラベルも時間をかけずに出す */
html.motion-off .sec-head .eyebrow.rv-line { transition: none !important; }
/* N12：高さの低い画面では、トップの 1 画面目に人物の列の全体を入れる */
@media (min-width: 900px) and (max-height: 820px) {
  .hero--top .hero__en--top { font-size: clamp(48px, 5.6vw, 84px); margin-bottom: 14px; }
  .hero--top .lead { margin-top: 12px; }
}
/* 5-2：「ある1日」の固定中は、地を朝（mint）から夕方（lavender）へ。いまの時刻のカードを前に出す */
.pin:not(.is-static) { isolation: isolate; }
.pin:not(.is-static)::before, .pin:not(.is-static)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pin:not(.is-static)::before { background: linear-gradient(100deg, rgba(167,243,208,.36), rgba(165,243,252,.24) 55%, rgba(255,255,255,0)); opacity: calc(1 - var(--day, 0)); }
.pin:not(.is-static)::after { background: linear-gradient(100deg, rgba(255,255,255,0), rgba(199,210,254,.40) 55%, rgba(165,180,252,.50)); opacity: var(--day, 0); }
.pin:not(.is-static) .pin__note, .pin:not(.is-static) .pin__hint, .pin:not(.is-static) .pin__meta .small { color: var(--ink-500); }
.pin:not(.is-static) .pin__card { transform: scale(.96); transition: transform 600ms var(--ease-expo-out), box-shadow 600ms var(--ease-expo-out), border-color 400ms; }
.pin:not(.is-static) .pin__card.is-on { transform: none; box-shadow: 0 18px 44px rgba(11,27,38,.10); border-color: rgba(14,116,144,.35); }
/* 5-3：循環図の光点と、いまの役割 */
.cycle__node { transition: background-color 400ms var(--ease-out), border-color 400ms, box-shadow 400ms; }
.cycle__node.is-cur { background: rgba(143,230,239,.16); border-color: rgba(143,230,239,.75); box-shadow: 0 18px 40px rgba(0,0,0,.22); }
.cycle__dot { filter: drop-shadow(0 0 8px rgba(143,230,239,.9)); }
/* D09・5-1：職種への遷移で、職種名と写真を一続きに動かす */
html.vt-job .hero--role [data-split="hero-en"] { visibility: visible; }
::view-transition-group(job-title) { animation-duration: var(--dur-page-in); animation-timing-function: var(--ease-expo-out); }
::view-transition-group(job-photo) { animation-duration: 600ms; animation-timing-function: var(--ease-expo-out); }
::view-transition-old(job-photo), ::view-transition-new(job-photo) { height: 100%; object-fit: cover; overflow: clip; }
html.vt-job .hero--role .ph.ap .ph__frame { clip-path: inset(0 round var(--r-lg) 0 0 var(--r-lg)); transition: none; }
html.vt-job .hero--role .ph.ap .ph__in img { transform: none; transition: none; }
/* N05（390px）：4:3 では文字の位置が高くなるため、覆いを上まで濃くする */
@media (max-width: 899.98px) { .sec-cover::after { background: linear-gradient(0deg, rgba(11,27,38,.86) 0%, rgba(11,27,38,.76) 56%, rgba(11,27,38,.40) 80%, rgba(11,27,38,0) 98%); } }
/* 表のセルは、文節の幅を最小幅として列を割り付ける（anywhere だと最小幅が縮み、狭い列で語の途中で折れる） */
.table :is(td, th) { overflow-wrap: break-word; }
/* 比較表の行見出しは 1 行で（「向いている／人」のように 1 文字だけ次の行に送らない） */
.table--compare th.sticky-first { white-space: nowrap; }
/* D45：明朝は 500 だけを読み込むので、指定もそろえる */
.stmt__close, .rolecard__lead { font-weight: 500; }

/* ===================================================================
   v4 検証の修正（2026-10-11）
   =================================================================== */
/* V01：FAQ の番号を 1 行に */
.acc__q { white-space: nowrap; }
/* V06：段階のラベル・PDF カードのラベルを 1 行に */
@media (max-width: 1199.98px) { .pillar .label { white-space: nowrap; letter-spacing: .04em; } }
@media (max-width: 560px) { .pdfcard .label { white-space: nowrap; letter-spacing: .04em; font-size: 10.5px; } }
/* V07：900px 以上は、文字のある左下だけを暗くし、明るいオフィスの印象を残す */
@media (min-width: 900px) {
  .sec-cover::after { background: linear-gradient(0deg, rgba(11,27,38,.84) 0%, rgba(11,27,38,.76) 38%, rgba(11,27,38,.42) 56%, rgba(11,27,38,0) 76%),
                                  linear-gradient(90deg, rgba(11,27,38,.42) 0%, rgba(11,27,38,0) 55%); }
}
/* V11：比較表の見出し行の 1 列目も固定 */
.table--compare thead .sticky-first { z-index: 2; }
/* V14：実在の人物と職種の 2×2 の入口は、下から開く（視差なし） */
html.mo .ph--people.ap:not(.is-in) .ph__frame { clip-path: inset(100% 0 0 0 round var(--r-lg)); }
/* V15：400px 未満は仕事ハブの職種カードを 1 列に */
@media (max-width: 399.98px) { .rolecards { grid-template-columns: minmax(0, 1fr); } }
/* 5-A：「ある1日」の背景の大きな時刻。900px 未満は、画面の 60% の線を通る行に印を付ける */
.pin__clock { position: absolute; right: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); bottom: 3vh; z-index: -1; font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(96px, 11vw, 168px); line-height: .8; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(11,27,38,.22); pointer-events: none; font-variant-numeric: tabular-nums; }
.pin__clock.is-tick { animation: pin-tick 500ms var(--ease-expo-out); }
@keyframes pin-tick { from { opacity: 0; transform: translateY(18%); } to { opacity: 1; transform: none; } }
@media (max-width: 899.98px) {
  html.mo .pin.is-static .pin__card { position: relative; }
  html.mo .pin.is-static .pin__card::before { content: ""; position: absolute; left: -12px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--grad-brand);
    transform: scaleY(0); transform-origin: top; transition: transform 500ms var(--ease-expo-out); }
  html.mo .pin.is-static .pin__card.is-on::before { transform: none; }
  html.mo .pin.is-static .pin__card.is-on .pin__time { color: var(--teal-700); }
}

/* ===================================================================
   最終化（2026-10-11 FB）
   =================================================================== */
/* トップのヒーロー：左に文章、右に代表 2 名の実写と言葉のカード（900px 未満は文章の下） */
.hero--top { flex-direction: row; align-items: center; }
.hero--top .hero__grid { width: min(100% - var(--gutter) * 2, var(--maxw)); grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(32px, 4.4vw, 72px); align-items: center; }
.hero--top .hero__en--top { font-size: clamp(52px, 6.6vw, 104px); }
.hero--top .lead { max-width: 34em; }
@media (max-width: 899.98px) { .hero--top .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
/* 人を知るのヒーロー：左に文章、右にピープル・インデックス */
.hero--people .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 4.4vw, 72px); align-items: center; }
.hero--people .hero__giant { z-index: 1; }
@media (max-width: 899.98px) { .hero--people .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
/* ロゴ：動かさず、カラーのまま、はっきり見せる */
.logos li { height: 84px; padding: 0 18px; border: 1px solid var(--line); }
.logos img { filter: none; opacity: 1; max-height: 34px; transition: none; }
.logos li:hover img { filter: none; opacity: 1; }
.alumni .logos { margin-top: 16px; }
/* ヘッダーのロゴを大きく、英字のタグを読みやすく */
.brand__logo { height: 32px; }
.brand__tag { font-size: 17px; letter-spacing: .2em; color: var(--teal-800); }
@media (max-width: 560px) { .brand__logo { height: 28px; } }
/* 実在の人物の写真は、明るい背景の色調（2026-10-11 FB）。暗くする重ねを外す */
.portrait__frame { background: #eaf3f6; }
.portrait__frame::after { background: none; }
.portrait__frame { box-shadow: 0 1px 2px rgba(11,27,38,.05), 0 12px 28px rgba(11,27,38,.08); }

/* ---------- 最終化 B：顔を並べない（2026-10-11 FB） ---------- */
/* トップのヒーローの右：実写 1 枚＋代表の言葉のカード（誌面の重ね） */
.hvis { position: relative; z-index: 2; min-width: 0; padding-bottom: clamp(56px, 6vw, 88px); }
.hvis__ph .ph__frame { border-radius: var(--r-lg); box-shadow: 0 30px 70px rgba(11,27,38,.16); }
.hvis__quote { position: absolute; left: clamp(-56px, -3.6vw, -20px); bottom: 0; width: min(78%, 400px); margin: 0; padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 28px) clamp(16px, 1.6vw, 22px);
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--r-md); box-shadow: 0 18px 44px rgba(11,27,38,.14); display: grid; gap: 10px; }
.hvis__quote blockquote { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.75; letter-spacing: .05em; color: var(--ink-900); text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
.hvis__quote figcaption { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 11.5px; color: var(--ink-500); letter-spacing: .03em; }
.hvis__more { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--teal-700); justify-self: start; white-space: nowrap; }
.hvis__more svg { width: 14px; height: 14px; transition: transform var(--dur-micro) var(--ease-out); }
.hvis__more:hover svg { transform: translateX(3px); }
.hvis__quote .label { color: var(--teal-800); }
@media (max-width: 899.98px) {
  .hvis { padding-bottom: 0; }
  .hvis__quote { position: relative; left: auto; bottom: auto; width: auto; margin: -36px 16px 0; }
}
/* 人を知るのヒーロー：ピープル・インデックス（名前にポインター・フォーカスを合わせると、その人の写真が開く） */
.pidx { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; min-width: 0; }
.pidx__view { display: grid; gap: 14px; position: sticky; top: calc(var(--header-h) + 24px); }
.pidx__stage { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: #eaf3f6; box-shadow: 0 30px 70px rgba(11,27,38,.16); isolation: isolate; }
.pidx__ph { position: absolute; inset: 0; margin: 0; clip-path: inset(0 0 100% 0); transition: clip-path 700ms var(--ease-expo-out); z-index: 1; }
.pidx__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transform: scale(1.06); transition: transform 1000ms var(--ease-expo-out); }
.pidx__ph.is-act { clip-path: inset(0 0 0 0); z-index: 2; }
.pidx__ph.is-act img { transform: none; }
.pidx__ph.was-act { clip-path: inset(0 0 0 0); z-index: 1; }
.pidx__glow { position: absolute; inset: auto 0 0 0; height: 40%; z-index: 3; pointer-events: none; background: linear-gradient(0deg, rgba(11,27,38,.18), transparent); }
.pidx__cap { margin: 0; display: grid; gap: 2px; }
.pidx__cap-n { font-family: var(--font-ui); font-size: 11px; letter-spacing: .18em; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.pidx__cap b { font-family: var(--font-serif); font-weight: 500; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: .08em; color: var(--ink-900); }
.pidx__cap .pidx__cap-role { font-size: 12px; font-weight: 700; color: var(--teal-700); letter-spacing: .02em; }
.pidx__list { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.pidx__group ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.pidx__group .label { color: var(--teal-800); }
.pidx__item { width: 100%; text-align: left; display: grid; gap: 1px; padding: 8px 0 8px 14px; position: relative; border-bottom: 1px solid rgba(11,27,38,.10); cursor: pointer; }
.pidx__item::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--teal-700); transform: scale(0); transition: transform var(--dur-fast) var(--ease-expo-out); }
.pidx__name { font-family: var(--font-serif); font-weight: 500; font-size: clamp(15px, 1.2vw, 17px); letter-spacing: .08em; color: var(--ink-500); transition: color var(--dur-micro), transform var(--dur-fast) var(--ease-expo-out); white-space: nowrap; }
.pidx__role { font-size: 10.5px; line-height: 1.5; color: var(--ink-400); word-break: keep-all; overflow-wrap: normal; }
.pidx__item:hover .pidx__name, .pidx__item:focus-visible .pidx__name, .pidx__item.is-act .pidx__name { color: var(--ink-900); transform: translateX(4px); }
.pidx__item.is-act::before { transform: scale(1); }
.pidx__item.is-act .pidx__role { color: var(--teal-700); }
html.motion-off .pidx__ph, html.motion-off .pidx__ph img, html.motion-off .pidx__name { transition: none !important; }
@media (max-width: 899.98px) {
  .pidx { grid-template-columns: minmax(0, 1fr); }
  .pidx__view { position: static; }
  .pidx__stage { aspect-ratio: 4 / 4.4; max-width: 420px; }
}
/* 会社を知るの代表メッセージ：代表 2 名の実写 1 枚（4/8 の左列で sticky） */
.message__photos .ph { margin: 0; }
.hero--people .hero__giant { top: auto; bottom: clamp(70px, 9vw, 130px); left: -1.5vw; right: auto; }
/* ロゴ：最後の行を中央にそろえる（格子の端に 1 つだけ残さない） */
.logos { display: flex; flex-wrap: wrap; justify-content: center; }
.logos li { flex: 0 0 calc((100% - (var(--cols, 6) - 1) * 12px) / var(--cols, 6)); }
@media (max-width: 900px) { .logos li { flex-basis: calc((100% - 24px) / 3); } }
@media (max-width: 480px) { .logos li { flex-basis: calc((100% - 12px) / 2); } .logos--certs li { flex-basis: 100%; } }

/* ===================================================================
   最終化 C（2026-10-11 18:00）：実写・コンセプトムービー・内容の絞り込み
   =================================================================== */
/* トップのヒーロー：4 名の実写（5:4）を少し大きく */
.hero--top .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
@media (max-width: 899.98px) { .hero--top .hero__grid { grid-template-columns: minmax(0, 1fr); } }
/* コンセプトムービー：映像の 0:50 の場面（2026-10-12 FB：M-011）に、題名と再生ボタン。押してから読み込む。
   再生ボタンは人物の顔に重ねず、人物の視線の先（左上）に置く */
.sec--movie { padding-block: clamp(64px, 8vw, 128px); }
.movie { position: relative; margin-top: clamp(28px, 3.4vw, 48px); border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: #08161f; box-shadow: 0 40px 90px rgba(11,27,38,.22); isolation: isolate; }
.movie__poster { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.movie__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.02); transition: transform 1200ms var(--ease-expo-out); }
.movie__poster:hover .movie__img { transform: scale(1.05); }
.movie__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,22,32,.80) 0%, rgba(8,22,32,.38) 48%, rgba(8,22,32,.06) 100%), radial-gradient(110% 90% at 90% 120%, rgba(79,214,228,.32), transparent 60%); }
.movie__text { position: absolute; left: clamp(22px, 4vw, 64px); bottom: clamp(22px, 4vw, 60px); display: grid; gap: clamp(10px, 1.2vw, 16px); max-width: 58%; }
.movie__text .label { color: var(--teal-300); }
.movie__t { font-family: var(--font-serif); font-weight: 500; font-size: clamp(20px, 2.6vw, 40px); line-height: 1.5; letter-spacing: .08em; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere;
  text-shadow: 0 1px 2px rgba(8,22,32,.35), 0 2px 24px rgba(8,22,32,.55); }   /* 映像の場面（白いシャツ）に文字が掛かっても読めるように */
.movie__play { --s: clamp(64px, 7vw, 104px); position: absolute; left: 24%; top: 38%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: var(--ink-900); box-shadow: 0 18px 40px rgba(0,0,0,.25); transition: transform var(--dur-fast) var(--ease-expo-out), background-color var(--dur-micro); }
.movie__play svg { width: 36%; height: 36%; margin-left: 6%; }
.movie__ring { position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); transition: inset var(--dur-fast) var(--ease-expo-out), opacity var(--dur-fast); }
.movie__poster:hover .movie__play, .movie__poster:focus-visible .movie__play { transform: scale(1.06); background: #fff; }
.movie__poster:hover .movie__ring { inset: -16px; opacity: .7; }
.movie__poster:focus-visible { outline: 3px solid var(--teal-300); outline-offset: -6px; }
.movie__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; background: #000; }
.movie.is-playing { aspect-ratio: 16 / 9; }
.movie.is-playing .movie__poster { visibility: hidden; }
.movie__cap { margin-top: 14px; }
html.motion-off .movie__img, html.motion-off .movie__play, html.motion-off .movie__ring { transition: none !important; }
@media (max-width: 899.98px) {
  .movie { aspect-ratio: 4 / 3; }
  .movie__text { max-width: 86%; }
  .movie__shade { background: linear-gradient(0deg, rgba(8,22,32,.84) 0%, rgba(8,22,32,.30) 58%, rgba(8,22,32,.10) 100%); }
  .movie__play { left: 21%; top: 32%; }
}
@media (max-width: 599.98px) {
  /* スマホ：題名が 3 行になるので、再生ボタンは右上に小さく置き、文字と重ねない */
  .movie__play { --s: 52px; left: auto; right: 14px; top: 14px; margin: 0; }
  .movie__ring { inset: -6px; }
  .movie__poster:hover .movie__ring { inset: -9px; }
}
/* 写真の列（静止）：働き方の 3 枚を段違いに。スクロールで傾けない */
.photo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); }
.photo-row .ph:nth-child(2) { margin-top: clamp(24px, 4vw, 56px); }
.photo-row .ph__frame { border-radius: var(--r-md); clip-path: inset(0 round var(--r-md)); }
@media (min-width: 900px) { html.mo .photo-row .ph.ap:not(.is-in) .ph__frame { clip-path: inset(42% 8% 42% 8% round var(--r-md)); } }
/* 人を知るのヒーロー：見出しの下に、実写の全幅 */
.hero--people.hero--cover { min-height: 0; display: block; padding-block: clamp(32px, 4vw, 56px) clamp(110px, 11vw, 160px); }
.hero--cover .hero__copy { max-width: 760px; position: relative; z-index: 2; }
.hero__cover { position: relative; z-index: 2; margin-top: clamp(28px, 3.6vw, 52px); }
.hero__cover .ph__frame { border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(11,27,38,.18); }
.hero--people.hero--cover .hero__giant { top: clamp(24px, 4vw, 64px); bottom: auto; left: auto; right: -2vw; z-index: 1; }
@media (max-width: 899.98px) { .hero__cover .ph__frame { --ar: 4 / 3; } }
/* 公開予定の記事：日付・題名・語り手の一覧（顔を格子に並べない） */
.sched { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sched__row { display: grid; grid-template-columns: 128px minmax(0, 1fr) minmax(0, 300px); gap: clamp(16px, 2.4vw, 36px); align-items: center; padding: clamp(18px, 2vw, 26px) 4px; border-bottom: 1px solid var(--line); transition: background-color var(--dur-micro); }
.sched__row:hover { background: rgba(14,116,144,.03); }
.sched__date { display: grid; gap: 2px; }
.sched__date b { font-family: var(--font-serif); font-weight: 500; font-size: clamp(17px, 1.5vw, 21px); letter-spacing: .04em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.sched__date span { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--teal-700); }
.sched__t { font-family: var(--font-serif); font-weight: 500; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.6; letter-spacing: .06em; color: var(--ink-900); text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
.sched__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sched__av { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #eaf3f6; box-shadow: 0 0 0 1px rgba(11,27,38,.06); }
.sched__av img { width: 100%; height: 100%; object-fit: cover; }
.sched__id { display: grid; min-width: 0; }
.sched__role { font-size: 11px; line-height: 1.5; color: var(--ink-400); word-break: keep-all; overflow-wrap: anywhere; }
.sched__name { font-size: 14px; font-weight: 700; color: var(--ink-900); white-space: nowrap; }
@media (max-width: 760px) {
  .sched__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sched__date { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; }
}
/* 資料の案内（各ページの終わり） */
.pdfcards { display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pdfcards--1 { grid-template-columns: minmax(0, 680px); }
@media (max-width: 760px) { .pdfcards { grid-template-columns: minmax(0, 1fr); } }
.know-deck { margin-top: clamp(28px, 3vw, 44px); max-width: 680px; }
/* 実名の実写（面接官・カジュアル面談の担当） */
.portrait--candid .portrait__frame { background: #eef3f5; }
/* カジュアル面談：申し込みの横の写真 */
.how__photo .ph { max-width: 420px; margin-left: auto; }
/* 会社を知るの経営陣：索引（写真の下に経歴） */
#leadership .pidx { margin-top: clamp(8px, 1vw, 16px); }
.pidx__cap .pidx__bio { margin-top: 6px; font-size: 13px; font-weight: 400; line-height: 1.85; letter-spacing: .02em; color: var(--ink-500); max-width: 30em; }
/* 4 職種のカード：横一列に顔が並ぶ印象を和らげる段違い（900px 以上） */
@media (min-width: 900px) { .rolecards--4 .rolecard:nth-child(even) { margin-top: clamp(28px, 4vw, 64px); } }
/* 記事の一覧：小さな円の中で、顔が主役になるように */
.sched__av img { object-position: 50% 18%; transform: scale(1.75); transform-origin: 50% 12%; }

/* ===== 2026-10-11 20:00：経営陣の索引（長い経歴）・代表の署名・人を知る（Coming Soon） ===== */
/* 経営陣の索引：左に写真（sticky）、右に名前の一覧と、選んだ人の経歴。経歴は一覧の下に置き、長さが変わっても一覧が動かない */
.pidx { grid-template-columns: minmax(0, .74fr) minmax(0, 1fr); }
.pidx__stage { position: sticky; top: calc(var(--header-h) + 24px); }
.pidx__side { display: flex; flex-direction: column; gap: clamp(22px, 2.4vw, 32px); min-width: 0; }
.pidx__cap { padding-top: clamp(16px, 1.6vw, 22px); border-top: 1px solid rgba(11,27,38,.14); gap: 4px; }
.pidx__cap .pidx__bio { margin-top: 10px; font-size: 13.5px; line-height: 1.95; max-width: 40em; color: var(--ink-700); }
@media (max-width: 899.98px) {
  /* 900px 未満：写真 → 選んだ人の経歴 → 名前の一覧、の 1 列 */
  .pidx { grid-template-columns: minmax(0, 1fr); }
  .pidx__stage { position: relative; top: auto; width: min(100%, 320px); }
  .pidx__side .pidx__cap { order: -1; }
}
/* 代表メッセージの署名：役職と名前（文字）＋手書き風の署名 */
.message__sign { grid-template-columns: repeat(2, minmax(0, max-content)); gap: 20px clamp(28px, 4vw, 56px); margin: 32px 0 0; padding-top: 22px; font-family: inherit; font-size: inherit; letter-spacing: normal; }
.sign { margin: 0; display: grid; gap: 3px; justify-items: start; }
.sign__id { display: grid; gap: 2px; }
.sign__role { font-size: 11.5px; font-weight: 400; color: var(--ink-500); letter-spacing: .06em; }
.sign__name { font-family: var(--font-serif); font-weight: 500; font-size: 17px; letter-spacing: .14em; color: var(--ink-900); }
.sign__img { display: block; height: clamp(40px, 3.4vw, 50px); width: auto; max-width: 100%; margin: 2px 0 0 -4px; }
@media (max-width: 480px) { .message__sign { grid-template-columns: minmax(0, 1fr); } }
/* 人を知る：Coming Soon（記事は社内の CMS で順次公開） */
.soon { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.soon__en { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(64px, 9vw, 150px); line-height: .9; letter-spacing: -.01em; color: var(--ink-900); }
.soon__en i { color: var(--teal-700); }
.soon__body .h2 { margin: 14px 0 18px; }
.soon__links { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.soon__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 16px 18px; border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-card); color: var(--ink-900); text-decoration: none; }
.soon__t { font-weight: 700; font-size: 15px; }
.soon__b { grid-column: 1; font-size: 13px; color: var(--ink-500); }
.soon__go { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-brand); color: #fff; }
.soon__go svg { width: 14px; height: 14px; }
@media (max-width: 899.98px) { .soon { grid-template-columns: minmax(0, 1fr); } }

/* ===== 2026-10-11 21:00：トップの 3 つの入口（広がるパネル）と、スクロールで広がる映像（トップのアクセント） ===== */
/* 3 つの入口：ポインター（またはフォーカス）を合わせた 1 枚が広がる。900px 未満は縦に並べる */
.xp { display: flex; gap: clamp(10px, 1vw, 14px); height: clamp(440px, 44vw, 600px); margin-top: clamp(28px, 3vw, 44px); }
.xp__item { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--r-lg); overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; background: #10202a;
  box-shadow: 0 24px 60px rgba(11,27,38,.14); transition: flex-grow 560ms var(--ease-expo-out), box-shadow 300ms; }
.xp__item.is-act { flex-grow: 2.1; box-shadow: 0 30px 70px rgba(11,27,38,.20); }
.xp__ph { position: absolute; inset: 0; }
.xp__ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transform: scale(1.06); filter: saturate(.8) brightness(.9);
  transition: transform 1100ms var(--ease-expo-out), filter 560ms; }
.xp__item.is-act .xp__ph img { transform: none; filter: none; }
.xp__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,27,38,0) 40%, rgba(11,27,38,.72) 100%); }
.xp__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 6px; padding: clamp(18px, 2vw, 30px); padding-right: 80px; }
.xp__en { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(28px, 2.8vw, 42px); line-height: 1; letter-spacing: .01em; }
.xp__ja { font-size: 14px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.xp__b { font-size: 13px; line-height: 1.85; color: rgba(255,255,255,.92); max-width: 24em; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px);
  transition: opacity 300ms, transform 500ms var(--ease-expo-out), max-height 500ms var(--ease-expo-out); }
.xp__item.is-act .xp__b { max-height: 6em; opacity: 1; transform: none; transition-delay: 140ms; }
.xp__go { position: absolute; right: clamp(16px, 1.8vw, 26px); bottom: clamp(18px, 2vw, 30px); z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.38); transition: background 300ms, color 300ms, transform 300ms var(--ease-expo-out); }
.xp__go svg { width: 16px; height: 16px; }
.xp__item.is-act .xp__go { background: #fff; color: var(--ink-900); }
.xp__item:hover .xp__go { transform: translateX(3px); }
.xp__item:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 3px; }
@media (max-width: 899.98px) {
  .xp { flex-direction: column; height: auto; }
  .xp__item { flex: none; aspect-ratio: 4 / 3; }
  /* スマホ：説明文は出さず（行き先のページで読める）、題名だけを下に。写真の中央（ロゴなど）を覆わない */
  .xp__shade { background: linear-gradient(180deg, rgba(11,27,38,0) 48%, rgba(11,27,38,.74) 100%); }
  .xp__b { display: none; }
  .xp__ph img { transform: none; filter: none; }
}
html.motion-off .xp__item, html.motion-off .xp__ph img, html.motion-off .xp__b { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .xp__item, .xp__ph img, .xp__b { transition: none !important; } }

/* スクロールで広がる映像：枠（カード）から、画面いっぱいへ。900px 以上・動きを許すときだけ（site.js が .is-expand を付ける） */
.movie-stage { padding-inline: var(--gutter); }
.movie-stage__sticky { max-width: var(--maxw); margin-inline: auto; }
.movie-stage.is-expand { --mx: 0px; --my: 0px; --mr: 0px; --k: 0; height: 230vh; padding-inline: 0; margin-top: clamp(20px, 2.4vw, 36px); }
.movie-stage.is-expand .movie-stage__sticky { position: sticky; top: 0; height: 100vh; max-width: none; overflow: hidden; }
.movie-stage.is-expand .movie { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none;
  clip-path: inset(var(--my) var(--mx) var(--my) var(--mx) round var(--mr)); }
.movie-stage.is-expand .movie__img { transform: scale(calc(1.10 - .10 * var(--k))); transition: none; }
.movie-stage.is-expand .movie__poster:hover .movie__img { transform: scale(calc(1.10 - .10 * var(--k))); }
.movie-stage.is-expand .movie__shade { inset: var(--my) var(--mx); }
.movie-stage.is-expand .movie__text { left: calc(var(--mx) + clamp(22px, 4vw, 64px)); bottom: calc(var(--my) + clamp(22px, 4vw, 60px)); }
.movie-stage.is-expand .movie__t { font-size: calc(clamp(20px, 2.6vw, 40px) * (1 + .22 * var(--k))); }
.movie-stage.is-expand .movie__play { --s: calc(clamp(64px, 7vw, 104px) * (1 + .3 * var(--k))); }
.movie-stage.is-expand + .container .movie__cap { margin-top: 18px; }

/* ===== 2026-10-11 23:50：書体を 2 つにそろえる（和文 Noto Sans JP・欧文 Jost）。斜体・透かし文字・細かな飾りは使わない ===== */
i, em { font-style: normal; }
.display i, .display em, .display--italic, .ticker__item i, .cta__en i, .hero__en i, .rolecard__en i, .idx__en i, .jobcard__en i, .mvvrow__en i, .stmt__label i, .pdfcard__en i { font-style: normal; font-weight: inherit; }
.card__num, .footer__slogan, .stackcard__n, .knowcard__en, .pr-big, .pin__clock, .xp__en, .t-sec-num { font-style: normal; }
.giant, .hero__giant, .sec-num, .brand__tag, .eyebrow, .annot-row { display: none !important; }
/* 和文の見出し：ゴシックの Medium（h3 以下は Bold）。明朝のときより字間を詰める */
.h1, .h2, .h3, .h4 { font-weight: 500; letter-spacing: .03em; line-height: 1.45; }
.h3, .h4 { font-weight: 700; letter-spacing: .02em; }
.h2 { font-size: clamp(30px, 3.3vw, 50px); line-height: 1.38; }
.hero__h1, .hero--top .hero__h1 { font-weight: 500; letter-spacing: .04em; }
/* 欧文の大きな文字：Jost。細めのウエイトで、字間をわずかに詰める。強調は色だけ */
.hero__en { font-weight: 400; letter-spacing: -.03em; line-height: .98; }
.hero__en i, .rolecard__en i, .idx__en i, .jobcard__en i, .cta__en i { color: var(--teal-700); }
.cta__en { font-weight: 400; letter-spacing: -.03em; }
.ticker__item { font-weight: 300; letter-spacing: -.01em; }
.ticker__item i { color: var(--teal-700); font-weight: 400; }
.xp__en { font-weight: 500; letter-spacing: -.015em; }
.rolecard__en, .jobcard__en, .prcard__en, .pr__en, .doc__en, .mvvcard__en, .knowcard__en { font-weight: 400; letter-spacing: -.015em; }
.idx__en, .soon__en, #slogan .stmt__st { font-weight: 400; letter-spacing: -.03em; }
.movie__t { font-weight: 500; letter-spacing: .06em; }
.hvis__quote blockquote { font-weight: 500; }
.sec-head .lead { max-width: 30em; }

/* ===== 3 枚のカード → 画面の幅いっぱいの行（bigrows）。大きな見出しと本文。行に入ると線が引かれ、見出しが下から現れる ===== */
.bigrows { position: relative; display: grid; margin-top: clamp(40px, 4.6vw, 72px); }
.bigrows::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink-900); transform-origin: left; transition: transform 1200ms var(--ease-expo-out); }
.bigrow { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(20px, 4.4vw, 80px); align-items: start;
  padding: clamp(36px, 4.8vw, 72px) clamp(4px, 1.2vw, 18px); border-bottom: 1px solid rgba(11,27,38,.14); isolation: isolate; overflow: hidden; }
.bigrow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--teal-100), rgba(233,245,248,0) 78%); transform: scaleX(0); transform-origin: left; transition: transform 800ms var(--ease-expo-out); }
.bigrow:hover::before { transform: scaleX(1); }
.bigrow__head { display: grid; gap: 14px; min-width: 0; }
.bigrow__tag { font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--teal-700); }
.bigrow__t { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: clamp(26px, 3.3vw, 50px); line-height: 1.32; letter-spacing: .02em; color: var(--ink-900); text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere;
  transition: transform 1000ms var(--ease-expo-out), color 400ms; transition-delay: calc(var(--i, 0) * 90ms + 120ms); }
.bigrow:hover .bigrow__t { color: var(--teal-800); }
.bigrow__b { margin: 0; padding-top: .5em; font-size: 15.5px; line-height: 2.05; color: var(--ink-700); max-width: 32em; white-space: pre-line; }
.bigrows--short .bigrow { grid-template-columns: minmax(0, 1fr); padding-block: clamp(26px, 3vw, 44px); }
.bigrows--short .bigrow__t { font-size: clamp(22px, 2.4vw, 34px); }
/* 暗いセクションの中 */
.sec--dark .bigrows::before, [data-ground="dark"] .bigrows::before { background: rgba(255,255,255,.7); }
.sec--dark .bigrow, [data-ground="dark"] .bigrow { border-bottom-color: rgba(255,255,255,.16); }
.sec--dark .bigrow::before, [data-ground="dark"] .bigrow::before { background: linear-gradient(100deg, rgba(79,214,228,.16), rgba(79,214,228,0) 78%); }
.sec--dark .bigrow__t, [data-ground="dark"] .bigrow__t { color: #fff; }
.sec--dark .bigrow:hover .bigrow__t, [data-ground="dark"] .bigrow:hover .bigrow__t { color: var(--teal-300); }
.sec--dark .bigrow__b, [data-ground="dark"] .bigrow__b { color: rgba(255,255,255,.82); }
.sec--dark .bigrow__tag, [data-ground="dark"] .bigrow__tag { color: var(--teal-300); }
/* 登場：線が左から引かれ、見出しが下から（行の高さの中で）現れる */
html.mo .bigrows:not(:has(.bigrow.is-in))::before { transform: scaleX(0); }
html.mo .bigrow.rv:not(.is-in) { opacity: 1; transform: none; }
html.mo .bigrow.rv:not(.is-in) .bigrow__t { transform: translateY(110%); }
html.mo .bigrow.rv:not(.is-in) .bigrow__b, html.mo .bigrow.rv:not(.is-in) .bigrow__tag { opacity: 0; }
.bigrow__head { overflow: hidden; padding-bottom: .1em; }
.bigrow__b, .bigrow__tag { transition: opacity 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + 320ms); }
@media (max-width: 899.98px) {
  .bigrow { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 30px; }
  .bigrow__t { font-size: clamp(24px, 6.6vw, 30px); }
  .bigrow__b { padding-top: 0; font-size: 15px; }
}
html.motion-off .bigrow__t, html.motion-off .bigrow__b, html.motion-off .bigrows::before { transition: none !important; }

/* 行の「いま読んでいる 1 行」を、画面の端から端までの面で塗る（スクロールに合わせて切り替わる。site.js の data-rows） */
.bigrows:not(.bigrows--short) .bigrow::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc((100vw - 100%) / -2); right: calc((100vw - 100%) / -2); z-index: -2;
  background: linear-gradient(110deg, #0b3e4c 0%, #0e7490 55%, #3b4fd1 130%); opacity: 0; transition: opacity 700ms var(--ease-out); }
.bigrows:not(.bigrows--short) .bigrow { overflow: visible; transition: color 500ms; }
.bigrows:not(.bigrows--short) .bigrow.is-on::after { opacity: 1; }
.bigrows:not(.bigrows--short) .bigrow.is-on::before { transform: scaleX(0); }
.bigrows:not(.bigrows--short) .bigrow.is-on .bigrow__t { color: #fff; }
.bigrows:not(.bigrows--short) .bigrow.is-on .bigrow__b { color: rgba(255,255,255,.88); }
.bigrows:not(.bigrows--short) .bigrow.is-on .bigrow__tag { color: var(--teal-300); }
.bigrows:not(.bigrows--short) .bigrow.is-on { border-bottom-color: transparent; }
.sec--dark .bigrows:not(.bigrows--short) .bigrow::after, [data-ground="dark"] .bigrows:not(.bigrows--short) .bigrow::after { background: linear-gradient(110deg, rgba(143,230,239,.14), rgba(129,140,248,.10)); }
.bigrow__t, .bigrow__b, .bigrow__tag { transition-property: transform, color, opacity; }
html.motion-off .bigrow::after { transition: none; }

/* ===== 事業の循環図（2026-10-11 23:50：大きく・大胆に）。左に大きな図、右に照らした役割の詳細 ===== */
.sec--cyc { padding-block: clamp(100px, 11vw, 170px); }
.cyc { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: clamp(36px, 5.4vw, 100px); align-items: center; margin-top: clamp(44px, 5vw, 84px); }
.cyc__fig { position: relative; aspect-ratio: 1; width: 100%; max-width: 720px; justify-self: center; }
.cyc__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cyc__arc { opacity: .32; transition: opacity 600ms var(--ease-out), stroke-width 600ms var(--ease-expo-out); }
.cyc__arc.is-act { opacity: 1; stroke-width: 5; filter: drop-shadow(0 0 10px rgba(79,214,228,.8)); }
.cyc__dot { filter: drop-shadow(0 0 8px #8fe6ef); }
.cyc__inner { transform-origin: 260px 260px; animation: cyc-spin 48s linear infinite; }
@keyframes cyc-spin { to { transform: rotate(360deg); } }
.cyc__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; text-align: center; font-weight: 700; font-size: clamp(16px, 1.55vw, 22px); line-height: 1.65; letter-spacing: .14em; color: #fff; }
.cyc__nodes { list-style: none; margin: 0; padding: 0; }
.cyc__node { position: absolute; width: min(44%, 252px); padding: 18px 20px 20px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(143,230,239,.30); color: #fff; cursor: pointer; display: grid; gap: 6px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translate(var(--tx), var(--ty)) scale(var(--s, 1)); transform-origin: center;
  transition: transform 700ms var(--ease-expo-out), background 500ms, border-color 500ms, box-shadow 700ms var(--ease-expo-out), opacity 500ms, color 400ms; outline: none; }
.cyc__node--0 { left: 50%; top: 0; --tx: -50%; --ty: -16%; }
.cyc__node--1 { right: 0; top: 50%; --tx: 14%; --ty: -50%; }
.cyc__node--2 { left: 50%; bottom: 0; --tx: -50%; --ty: 16%; }
.cyc__node--3 { left: 0; top: 50%; --tx: -14%; --ty: -50%; }
.cyc__k { font-size: clamp(20px, 1.9vw, 27px); font-weight: 700; letter-spacing: .06em; line-height: 1.3; }
.cyc__b { font-size: 12.5px; font-weight: 500; color: var(--teal-300); line-height: 1.55; }
.cyc .cyc__node { opacity: .46; --s: .95; }
.cyc .cyc__node.is-act { opacity: 1; --s: 1.16; background: linear-gradient(135deg, #a6f0f5 0%, #8fe6ef 35%, #9aa6fb 100%); border-color: transparent; color: #0b1b26;
  box-shadow: 0 28px 70px rgba(0,0,0,.38), 0 0 0 8px rgba(143,230,239,.14); z-index: 2; }
.cyc .cyc__node.is-act .cyc__b { color: #20425a; }
.cyc .cyc__node:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--teal-400); }
.cyc__panel { position: relative; display: grid; gap: clamp(26px, 3vw, 42px); min-width: 0; }
.cyc__slides { display: grid; }
.cyc__slide { grid-area: 1 / 1; display: grid; align-content: start; gap: 12px; opacity: 0; transform: translateY(28px); pointer-events: none;
  transition: opacity 450ms var(--ease-out), transform 800ms var(--ease-expo-out); }
.cyc__slide.is-act { opacity: 1; transform: none; pointer-events: auto; transition-delay: 100ms; }
.cyc__pk { margin: 0; font-weight: 700; font-size: clamp(54px, 6.2vw, 104px); line-height: 1.04; letter-spacing: .02em; color: #e9fdff;
  background: linear-gradient(100deg, #f2fdff 0%, #8fe6ef 52%, #a5b4fc 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .04em; }
.cyc__pb { margin: 0; font-size: clamp(15px, 1.25vw, 18px); font-weight: 700; letter-spacing: .04em; color: var(--teal-300); }
.cyc__pd { margin: 4px 0 0; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.95; font-weight: 500; color: #fff; max-width: 22em; }
.cyc__role { display: grid; grid-template-columns: minmax(0, 1fr) 50px; column-gap: 18px; row-gap: 3px; align-items: center; margin-top: 14px; padding: 18px 20px 18px 24px; border-radius: 18px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; text-decoration: none; transition: background 300ms, border-color 300ms, transform 500ms var(--ease-expo-out); }
.cyc__role:hover { background: rgba(255,255,255,.15); border-color: rgba(143,230,239,.65); transform: translateY(-3px); }
.cyc__rl { grid-column: 1; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--teal-300); }
.cyc__rn { grid-column: 1; font-size: clamp(18px, 1.6vw, 23px); font-weight: 700; letter-spacing: .02em; }
.cyc__ro { grid-column: 1; font-size: 13.5px; line-height: 1.8; color: rgba(255,255,255,.82); }
.cyc__ra { grid-column: 2; grid-row: 1 / span 3; width: 50px; height: 50px; border-radius: 50%; background: #fff; color: #0b1b26; display: grid; place-items: center; transition: transform 400ms var(--ease-expo-out); }
.cyc__role:hover .cyc__ra { transform: translateX(4px); }
.cyc__ra svg { width: 16px; height: 16px; color: #0b1b26; }
.cyc__ra svg path { stroke: #0b1b26; }   /* 暗いセクションでは --ink-900 が白に置き換わるので、ここは色を直に書く */
.cyc__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.2); }
.cyc__tab { position: relative; display: grid; gap: 4px; justify-items: start; padding: 14px 6px 2px 0; background: none; border: 0; color: rgba(255,255,255,.5); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .04em; cursor: pointer; text-align: left; transition: color 300ms; }
.cyc__tab::before { content: ""; position: absolute; left: 0; right: 8px; top: -1px; height: 2px; background: linear-gradient(90deg, #34d399, #4fd6e4, #818cf8); transform: scaleX(0); transform-origin: left; }
.cyc__tab.is-act { color: #fff; }
.cyc__tab.is-act::before { transform: scaleX(1); transition: transform var(--cyc-dur, 2600ms) linear; }
.cyc.is-paused .cyc__tab.is-act::before { transition: none; transform: scaleX(1); }
.cyc__tn { font-family: var(--font-ui); font-weight: 400; font-size: 12px; color: var(--teal-300); letter-spacing: .06em; }
.cyc__cap { margin: clamp(52px, 6vw, 92px) auto 0; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.8; font-weight: 500; letter-spacing: .04em; color: #fff; text-align: center; max-width: 30em; }
@media (max-width: 899.98px) {
  .cyc { grid-template-columns: minmax(0, 1fr); }
  .cyc__fig { aspect-ratio: auto; max-width: none; }
  .cyc__svg, .cyc__center { display: none; }
  .cyc__nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cyc__node { position: static; width: auto; transform: none !important; }
  .cyc .cyc__node { opacity: .7; }
  .cyc__pk { font-size: clamp(42px, 12vw, 60px); }
  .cyc__tabs { display: none; }
  .cyc__cap { text-align: left; margin-left: 0; }
}
html.motion-off .cyc__inner { animation: none; }
@media (prefers-reduced-motion: reduce) { .cyc__inner { animation: none; } .cyc__node, .cyc__slide, .cyc__arc { transition-duration: 1ms !important; } }

/* ===== 採用資料を横幅いっぱいで見せる（2026-10-12）。暗い面に、資料のページを大きく並べる ===== */
.reel { position: relative; isolation: isolate; color: #fff; overflow: clip;
  background: radial-gradient(110% 80% at 85% -10%, rgba(14,116,144,.55) 0%, rgba(11,27,38,0) 60%), radial-gradient(90% 70% at 0% 110%, rgba(79,70,229,.28) 0%, rgba(11,27,38,0) 55%), #0b1b26; }
.reel__pin { display: grid; align-content: center; gap: clamp(30px, 3.6vw, 52px); padding-block: clamp(80px, 9vw, 130px) clamp(56px, 6vw, 88px); }
.reel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.reel__titles { min-width: 0; max-width: 46em; }
.reel__kick { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--teal-300); }
.reel__h { margin: 0; font-weight: 500; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.32; letter-spacing: .03em; color: #fff; }
.reel__lead { margin: 14px 0 0; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.9; }
.reel__open { display: inline-flex; align-items: center; gap: 14px; padding: 10px 10px 10px 26px; border-radius: 999px; background: #fff; color: #0b1b26; font-weight: 700; font-size: 15px; text-decoration: none;
  box-shadow: 0 18px 40px rgba(0,0,0,.28); transition: transform 400ms var(--ease-expo-out), box-shadow 400ms; }
.reel__open:hover { transform: translateY(-2px); box-shadow: 0 24px 50px rgba(0,0,0,.36); }
.reel__oi { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #0e7490, #4f46e5); }
.reel__oi svg { width: 15px; height: 15px; }
.reel__vp { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); }
.reel__vp::-webkit-scrollbar { display: none; }
.reel__track { display: flex; gap: clamp(16px, 2.2vw, 36px); width: max-content; will-change: transform; }
.reel__slide { position: relative; flex: none; width: min(80vw, 1280px, calc((100vh - 300px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: clamp(10px, 1vw, 18px); overflow: hidden; scroll-snap-align: start;
  background: #fff; box-shadow: 0 50px 120px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); transform-origin: 50% 60%; transition: box-shadow 400ms; }
.reel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__slide:hover { box-shadow: 0 60px 140px rgba(0,0,0,.6), 0 0 0 2px rgba(143,230,239,.7); }
.reel__n { position: absolute; right: 14px; bottom: 12px; font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--ink-700); background: rgba(255,255,255,.9); padding: 5px 11px; border-radius: 999px; }
.reel__cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 56px 24px 20px; background: linear-gradient(0deg, rgba(11,27,38,.86), rgba(11,27,38,0)); color: #fff; text-align: left; }
.reel__cap b { font-size: clamp(16px, 1.4vw, 21px); font-weight: 700; letter-spacing: .02em; }
.reel__cap span { font-size: 12.5px; color: rgba(255,255,255,.78); }
.reel__foot { display: flex; align-items: center; gap: 20px; }
.reel__bar { position: relative; flex: 1; height: 2px; background: rgba(255,255,255,.16); overflow: hidden; }
.reel__fill { position: absolute; inset: 0; background: linear-gradient(90deg, #34d399, #4fd6e4, #818cf8); transform-origin: left; transform: scaleX(var(--p, .06)); }
.reel__hint { font-size: 12px; color: rgba(255,255,255,.6); letter-spacing: .06em; white-space: nowrap; }
.reel.is-pinned .reel__vp { overflow: visible; scroll-snap-type: none; }
.reel.is-pinned .reel__pin { min-height: 100vh; min-height: 100svh; box-sizing: border-box; padding-block: clamp(88px, 9vh, 120px) clamp(36px, 5vh, 64px); }
@media (max-width: 899.98px) {
  .reel__slide { width: 86vw; }
  .reel__hint { display: none; }
  .reel__head { align-items: flex-start; }
}
/* 資料のページ：表紙を大きな面で */
.bigdocs { display: grid; gap: clamp(28px, 3.4vw, 52px); }
.bigdoc { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; color: var(--ink-900); text-decoration: none; }
.bigdoc__img { display: block; border-radius: clamp(12px, 1.2vw, 20px); overflow: hidden; aspect-ratio: 16 / 9; box-shadow: 0 40px 90px rgba(11,27,38,.18), 0 0 0 1px var(--line); transition: transform 700ms var(--ease-expo-out), box-shadow 600ms; }
.bigdoc__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms var(--ease-expo-out); }
.bigdoc:hover .bigdoc__img { transform: translateY(-4px); box-shadow: 0 50px 110px rgba(11,27,38,.24), 0 0 0 2px var(--teal-400); }
.bigdoc:hover .bigdoc__img img { transform: scale(1.03); }
.bigdoc__body { display: grid; gap: 12px; justify-items: start; }
.bigdoc__tag { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--teal-700); }
.bigdoc__t { font-size: clamp(22px, 2.3vw, 34px); font-weight: 700; line-height: 1.45; letter-spacing: .02em; }
.bigdoc__meta { font-size: 13px; color: var(--ink-500); }
.bigdoc__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-weight: 700; font-size: 14.5px; color: var(--teal-800); }
.bigdoc__go svg { width: 14px; height: 14px; }
@media (max-width: 899.98px) { .bigdoc { grid-template-columns: minmax(0, 1fr); } }
.reel__pin { grid-template-columns: minmax(0, 1fr); }
.reel__pin > * { min-width: 0; }
.reel__vp { width: 100%; min-width: 0; box-sizing: border-box; }
.reel__slide { width: min(80vw, 1280px, calc((100vh - 330px) * 16 / 9)); }
@media (max-width: 899.98px) { .reel__slide { width: 86vw; } }
/* 行のリンク（理念の 4 つなど）：右に矢印 */
.bigrow--link { grid-template-columns: minmax(0, 1fr) 56px; align-items: center; color: inherit; text-decoration: none; }
.bigrow--link .bigrow__t { white-space: pre-line; font-size: clamp(24px, 2.8vw, 42px); }
.bigrow__go { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(11,27,38,.2); display: grid; place-items: center; color: var(--ink-900); transition: background 300ms, color 300ms, transform 500ms var(--ease-expo-out), border-color 300ms; }
.bigrow__go svg { width: 16px; height: 16px; }
.bigrow--link:hover .bigrow__go, .bigrow--link.is-on .bigrow__go { background: #fff; color: #0b1b26; border-color: #fff; transform: translateX(4px); }
@media (max-width: 899.98px) { .bigrow--link { grid-template-columns: minmax(0, 1fr) 44px; } .bigrow__go { width: 44px; height: 44px; } }
.pidx__group .label { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: none; }
/* 要点の中の 3 つ（小さなカードの格子）→ 線で区切った縦の並び */
.digest__points { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.digest__point { background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 14px 0 !important; border-top: 1px solid rgba(11,27,38,.12); display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 6px 24px; }
.digest__point:first-child { border-top: 0; padding-top: 4px !important; }
.digest__point b { font-size: 15.5px; }
@media (max-width: 699.98px) { .digest__point { grid-template-columns: minmax(0, 1fr); } }
/* 2026-10-12：右に寄せた本文（sec-body--offset）の中の bigrows も、ほかのセクションと同じく容器の幅いっぱいに（面の塗りが画面の端から端へ揃うように） */
@media (min-width: 900px) { .sec-body--offset:has(> .bigrows) { margin-left: 0; } }

/* 2026-10-12：採用資料を、ヘッダーの下の画面いっぱいで（見出しは先に流れ、ページの帯 reel__stage だけを固定する）。1 枚の幅は画面の 86%、最初と最後の 1 枚は画面の中央に */
.reel__stage { display: grid; gap: clamp(16px, 2.4vh, 28px); align-content: center; min-width: 0; }
.reel.is-pinned { --sw: min(86vw, calc((100vh - var(--hh, 74px) - 100px) * 16 / 9)); }
.reel.is-pinned .reel__pin { min-height: 0; padding-block: clamp(80px, 9vw, 130px) 0; }
.reel.is-pinned .reel__stage { height: calc(100vh - var(--hh, 74px)); height: calc(100svh - var(--hh, 74px)); box-sizing: border-box; padding-block: clamp(10px, 2vh, 22px); }
.reel.is-pinned .reel__vp { padding-inline: calc((100vw - var(--sw)) / 2); }
.reel.is-pinned .reel__slide { width: var(--sw); }
/* 2026-10-12：循環図の左右のノードが選ばれたとき、中心の「一気通貫デリバリー基盤」と重ならないように（左右のノードは外側へ向けて大きくなる） */
@media (min-width: 900px) {
  .cyc__node { width: min(38%, 236px); }
  .cyc__node--1 { --tx: 4%; transform-origin: 0% 50%; }
  .cyc__node--3 { --tx: -4%; transform-origin: 100% 50%; }
  .cyc .cyc__node.is-act { --s: 1.12; }
  .cyc__center { font-size: clamp(15px, 1.25vw, 19px); letter-spacing: .06em; }
}

/* 2026-10-12：コンセプトムービーをサイトの中で再生する（YouTube の埋め込みをやめた）。動画は面の下に置き、押すと面を消して再生する */
.movie__video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }
.movie.is-playing .movie__video { object-fit: contain; z-index: 2; }
button.movie__poster { z-index: 1; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.movie.is-playing .movie__poster { visibility: hidden; pointer-events: none; }
html:not(.js) .movie__poster { display: none; }
.movie-stage.is-expand .movie__video { inset: var(--my) var(--mx); width: auto; height: auto; border-radius: var(--mr); }
/* ===== 2026-10-12 デザインの最終化 ===== */
/* 型 A のヒーロー：1 行目に画面の幅いっぱいの欧文の表題（2 語目はティール）、2 行目に左の h1 と右下のリード（7/5 の非対称） */
.hero--a .hero__head, .hero--a .hero__copy, .hero--a .hero__aside { position: relative; z-index: 2; min-width: 0; }
.hero--a .hero__en { font-size: clamp(52px, 8.2vw, 128px); letter-spacing: -.035em; line-height: .95; margin-bottom: clamp(22px, 2.6vw, 38px); }
.hero--a .h1 { font-size: clamp(28px, 3.3vw, 50px); line-height: 1.4; }
.hero--a .hero__aside .lead { margin-top: 22px; }
@media (min-width: 900px) {
  .hero--a .hero__grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 112px); align-items: end; }
  .hero--a .hero__head { grid-column: 1 / -1; }
  .hero--a .hero__en { white-space: nowrap; }
  .hero--a .hero__copy { max-width: none; }
  .hero--a .hero__aside { padding-bottom: clamp(8px, .9vw, 14px); }
  .hero--a .hero__aside .lead { margin-top: 0; max-width: 24em; padding-top: 18px; border-top: 1px solid rgba(11,27,38,.16); }
}
/* 欧文の表題：語の間を少し詰める（「the Future.」の間が空きすぎないように） */
.hero__en { word-spacing: -.06em; }
/* 数字：大きく、細く（数字が主役の帯に）。スマホは 2 列 */
.stats .num { font-size: clamp(50px, 6vw, 92px); letter-spacing: -.02em; }
.stats .stat { padding-top: clamp(26px, 2.6vw, 36px); gap: 12px; }
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat, .stat:first-child { border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); padding: 22px 0 18px 14px; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(-n+2) { border-top: 0; }
  .stats .num { font-size: 46px; }
}
/* 資料の帯：上端を、前のセクションの地の曲面で閉じる（白からインクへ、段差を作らない） */
.reel .reel__curve { z-index: 0; height: clamp(56px, 7vw, 110px); }
.reel > .reel__pin { position: relative; z-index: 1; }
.g-mist + .reel .reel__curve, .sec--apply + .reel .reel__curve { --curve-fill: var(--mist); }
/* 資料の帯の直前は、セクションの下の余白を詰める（曲面の高さぶん、空きが大きく見えるため） */
.sec:has(+ .reel) { padding-bottom: clamp(40px, 5vw, 80px); }
/* 出身企業のロゴ：スマホは 3 列（2 列だとカードが大きく、間延びするため） */
@media (max-width: 480px) {
  .alumni .logos { gap: 8px; }
  .alumni .logos li { flex-basis: calc((100% - 16px) / 3); height: 60px; padding: 0 10px; }
  .alumni .logos img { max-height: 22px; }
}
/* 選考期間のピル：和文のラベル */
.selection__period .label { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: none; color: var(--teal-700); }
/* 人を知る：公開までの案内を、小さなカードの縦積みから、大きな文字の目次（罫線の行）へ */
.soon__links { margin-top: clamp(30px, 3vw, 44px); gap: 0; border-top: 1px solid var(--ink-900); }
.soon__links li { border-bottom: 1px solid var(--line); }
.soon__link { position: relative; isolation: isolate; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; padding: clamp(20px, 2vw, 28px) 4px; border-radius: 0; background: none; box-shadow: none; overflow: hidden; }
.soon__link::before { content: ""; position: absolute; inset: 0 -100vw; z-index: -1; background: var(--teal-50); opacity: 0; transition: opacity 400ms var(--ease-expo-out); }
.soon__link:hover::before, .soon__link:focus-visible::before { opacity: 1; }
.soon__t { font-size: clamp(20px, 1.9vw, 27px); font-weight: 700; letter-spacing: .02em; line-height: 1.4; }
.soon__b { font-size: 14px; line-height: 1.8; }
.soon__go { width: 48px; height: 48px; background: var(--paper); color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--line); transition: background 400ms var(--ease-expo-out), color 400ms, box-shadow 400ms, transform 400ms var(--ease-expo-out); }
.soon__go svg { width: 16px; height: 16px; }
.soon__link:hover .soon__go, .soon__link:focus-visible .soon__go { background: var(--grad-brand); color: #fff; box-shadow: none; transform: translateX(4px); }
/* 理念のステートメント：860px の中央の列（右半分が空く）をやめ、大きな言葉を左に、本文を右の列に置く対角の組みにする（1100px 以上） */
@media (min-width: 1100px) {
  .stmt__in { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .stmt__label, .stmt__st { grid-column: 1 / -1; }
  .stmt__st { margin-bottom: clamp(36px, 3.6vw, 56px); }
  .stmt__body, .stmt__close { grid-column: 2; max-width: 36em; }
  .stmt__body { position: relative; padding-top: clamp(22px, 2vw, 30px); }
  .stmt__body::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 1px; background: currentColor; opacity: .5; }
}
/* 選考：面接を担当するメンバー（右の 8 列いっぱいに 2 名） */
.portraits--lg { max-width: none; gap: clamp(20px, 2.6vw, 40px); }
.portraits--lg .portrait__name { font-size: clamp(20px, 1.7vw, 24px); }
.portraits--lg .portrait__bio { font-size: 14px; }
/* 選考：求める人物像と求めない人。枠と地のカードをやめ、上の罫線と大きな見出しの 2 段組みに */
.fit { gap: clamp(36px, 5.5vw, 96px); margin-top: clamp(8px, 1vw, 16px); }
.fit__col, .fit .notfor { border: 0; border-top: 1px solid var(--ink-900); border-radius: 0; background: none; padding: clamp(24px, 2.4vw, 34px) 0 0; }
.fit__title, .fit .notfor__title { font-size: clamp(22px, 2vw, 28px); line-height: 1.4; margin-bottom: clamp(14px, 1.4vw, 20px); }
.fit .notfor__title::before { width: 22px; height: 22px; }
.fit__list li, .fit .notfor__list li { padding: 16px 0; border-top: 1px solid var(--line); }
.fit__list li:first-child, .fit .notfor__list li:first-child { border-top: 1px solid var(--line); }
/* 募集職種：職種ごとの大きな行（写真 5：内容 7、写真の左右を交互に） */
.jobcards--rows { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 2.6vw, 40px); }
.jobcard--row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; padding: 0; overflow: hidden; align-items: stretch; }
.jobcard--row:hover { transform: none; box-shadow: var(--shadow-card); }
.jobcard--rev .jobcard__ph { order: 2; }
.jobcard__ph { position: relative; min-height: clamp(380px, 36vw, 560px); }
.jobcard__ph .ph { position: absolute; inset: 0; }
.jobcard__ph .ph__frame { aspect-ratio: auto; height: 100%; border-radius: 0; clip-path: inset(0); }
html.mo .jobcard__ph .ph.ap:not(.is-in) .ph__frame { clip-path: inset(10% 10% 10% 10%); }
.jobcard__body { display: grid; align-content: center; gap: 0; padding: clamp(30px, 4.4vw, 72px); min-width: 0; }
.jobcard--row .jobcard__top { display: flex; flex-wrap: wrap; gap: 8px; }
.jobcard--row .jobcard__en { margin: clamp(22px, 2.2vw, 30px) 0 0; font-size: clamp(38px, 4.2vw, 62px); line-height: 1.02; }
.jobcard__ja { margin: clamp(14px, 1.3vw, 18px) 0 0; font-size: clamp(19px, 1.6vw, 23px); font-weight: 700; line-height: 1.5; letter-spacing: .02em; color: var(--ink-900); }
.jobcard__one { margin: 10px 0 0; font-size: 15px; line-height: 1.85; color: var(--ink-500); }
.jobcard--row .jobcard__meta { margin-top: clamp(22px, 2.2vw, 30px); grid-template-columns: 92px minmax(0, 1fr); gap: 0 18px; font-size: 14px; line-height: 1.8; border-top: 1px solid var(--line); }
.jobcard--row .jobcard__meta dt, .jobcard--row .jobcard__meta dd { padding: 12px 0; border-bottom: 1px solid var(--line); }
.jobcard--row .btns { margin-top: clamp(24px, 2.4vw, 32px); }
@media (max-width: 899.98px) {
  .jobcard--row { grid-template-columns: minmax(0, 1fr); }
  .jobcard--rev .jobcard__ph { order: 0; }
  .jobcard__ph { min-height: 0; aspect-ratio: 4 / 3; }
}
/* 認証・加盟団体：余白を切り落としたロゴを、マーク（正方形）は高く、横長は低くして見た目の大きさをそろえる */
.logos--certs li { height: 104px; padding: 0 22px; }
.logos--certs img { max-height: 42px; max-width: 82%; }
.logos--certs img[src*="cert_iso27001"], .logos--certs img[src*="cert_pmark"] { max-height: 64px; }
@media (max-width: 480px) { .logos--certs li { height: 96px; } .logos--certs img { max-height: 40px; } .logos--certs img[src*="cert_iso27001"], .logos--certs img[src*="cert_pmark"] { max-height: 60px; } }
/* 大きな行：塗りに入ったときの文字色は、登場の遅れ（行の間 90ms＋320ms）を待たずに 0.45 秒で白へ（途中の低いコントラストを短く） */
.bigrow__t { transition: transform 1000ms var(--ease-expo-out), color 450ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + 120ms), 0ms; }
.bigrow__b, .bigrow__tag { transition: opacity 900ms var(--ease-out), color 450ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + 320ms), 0ms; }
/* 循環図のノードの事業名：英字の途中で折らない（Freelance が「Freelanc／e」にならないように） */
.cyc__b { word-break: keep-all; overflow-wrap: normal; }
@media (max-width: 899.98px) { .cyc__b { font-size: 11.5px; } }
/* 循環図：選ばれていないノードの地を少し濃くし、背後の円弧が文字に透けないようにする */
.cyc .cyc__node:not(.is-act) { opacity: 1; background: rgba(8, 40, 52, .9); border-color: rgba(143,230,239,.22); }
.cyc .cyc__node:not(.is-act) .cyc__k { color: rgba(255,255,255,.66); transition: color 400ms; }
.cyc .cyc__node:not(.is-act) .cyc__b { color: rgba(143,230,239,.62); }
.cyc .cyc__node:not(.is-act):hover .cyc__k { color: #fff; }
.jobcard--row.jobcard--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 899.98px) { .jobcard--row.jobcard--rev { grid-template-columns: minmax(0, 1fr); } }
/* ===== グローバルナビのメガメニュー（2026-10-12 11:26 FB：カーソルを当てると下の階層のページを出す） =====
   ナビの項目にカーソルかフォーカスを当てると、ヘッダーの直下に画面幅いっぱいの面を出す。左に区分の名前と説明、右に下の階層のページ。
   後ろのページは薄く暗くする。980px 未満はメニュー（バーガー）で全ページを出すため、使わない */
.nav { align-self: stretch; }
.nav__grp { display: flex; align-items: center; align-self: stretch; }
.nav__grp.is-open > .nav__item::after { transform: scaleX(1); transform-origin: left; }
.nav__grp.is-open > .nav__item .ja { color: var(--teal-700); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid rgba(11,27,38,.07);
  box-shadow: 0 48px 80px -24px rgba(11,27,38,.24); opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 420ms var(--ease-expo-out), visibility 0s linear 200ms; }
.nav__grp.is-open > .mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.mega__in { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(36px, 4.4vw, 80px); padding-block: clamp(32px, 3.2vw, 46px) clamp(34px, 3.4vw, 50px); }
.mega__intro { display: grid; align-content: start; gap: 10px; min-width: 0; }
.mega__en { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 3vw, 46px); line-height: 1; letter-spacing: -.03em; color: #0b1b26; white-space: nowrap; }
.mega__en i { font-style: normal; color: var(--teal-700); }
.mega__ja { margin: 8px 0 0; font-size: 16px; font-weight: 700; letter-spacing: .04em; color: #0b1b26; }
.mega__desc { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--ink-500); }
.mega__top { justify-self: start; margin-top: 12px; display: inline-flex; align-items: center; gap: 12px; padding: 7px 7px 7px 20px; border-radius: 999px; background: #0b1b26; color: #fff;
  font-size: 13.5px; font-weight: 700; text-decoration: none; transition: transform 300ms var(--ease-expo-out), box-shadow 300ms; }
.mega__top:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(11,27,38,.18); }
.mega__arr { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-brand); color: #fff; }
.mega__arr svg, .mega__link .a svg, .mega__chip svg { width: 13px; height: 13px; }
.mega__body { display: grid; gap: 22px; align-content: start; min-width: 0; }
.mega__roles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); }
.mega__role a { display: grid; gap: 6px; color: #0b1b26; text-decoration: none; }
.mega__ph { display: block; overflow: hidden; border-radius: 12px; background: var(--teal-100); aspect-ratio: 16 / 10; margin-bottom: 6px; }
.mega__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-expo-out); }
.mega__role a:hover .mega__ph img, .mega__role a:focus-visible .mega__ph img { transform: scale(1.05); }
.mega__role .t { font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; }
.mega__role a:hover .t { color: var(--teal-700); }
.mega__role .d { font-size: 12px; line-height: 1.7; color: var(--ink-500); }
.mega__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); column-gap: clamp(20px, 2.4vw, 36px); border-top: 1px solid var(--line); }
.mega__link a { display: grid; grid-template-columns: minmax(0, 1fr) 30px; column-gap: 14px; row-gap: 2px; align-items: center; padding: 15px 2px 15px 0; border-bottom: 1px solid var(--line); color: #0b1b26; text-decoration: none; }
.mega__link .t { font-size: 14px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; }
.mega__link .d { grid-column: 1; font-size: 12px; line-height: 1.65; color: var(--ink-500); }
.mega__link .a { grid-column: 2; grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: #0b1b26;
  transition: background 300ms, color 300ms, transform 300ms var(--ease-expo-out); }
.mega__link a:hover .t, .mega__link a:focus-visible .t, .mega__link a[aria-current="page"] .t { color: var(--teal-700); }
.mega__link a:hover .a, .mega__link a:focus-visible .a { background: var(--grad-brand); color: #fff; transform: translateX(3px); }
.mega__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.mega__chips-l { font-size: 12.5px; font-weight: 700; color: var(--ink-500); margin-right: 4px; }
.mega__chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: #0b1b26;
  font-size: 13px; font-weight: 700; text-decoration: none; transition: border-color 300ms, background 300ms; }
.mega__chip:hover, .mega__chip:focus-visible { border-color: var(--teal-700); background: var(--teal-50); }
.mega__chip span { display: grid; place-items: center; color: var(--teal-700); }
.mega-scrim { position: fixed; inset: 0; z-index: var(--z-menu); background: rgba(11,27,38,.26); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 260ms var(--ease-out), visibility 0s linear 260ms; }
html.mega-open .mega-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
@media (max-width: 1240px) { .mega__in { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); } .mega__en { font-size: 32px; } }
@media (max-width: 980px) { .mega, .mega-scrim { display: none; } }
html.motion-off .mega, html.motion-off .mega-scrim, html.motion-off .mega__ph img { transition: none; }
@media (prefers-reduced-motion: reduce) { .mega, .mega-scrim, .mega__ph img { transition: none; } }
html.mega-open .header { background: #fff; }
.mega__role .t { word-break: keep-all; overflow-wrap: anywhere; }
.mega__desc, .mega__link .t, .mega__link .d, .mega__role .d { word-break: keep-all; overflow-wrap: anywhere; }

/* ---- 人材紹介の13の業務と担う人（tsplit）。2026-10-13 FB：CA の4業務を図で見せる ---- */
.tsplit { margin: 0; display: grid; gap: clamp(22px, 2.4vw, 32px); }
.tsplit__steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n, 13), minmax(0, 1fr)); column-gap: 4px; }
.tsplit__steps::before { content: ""; position: absolute; left: calc(100% / var(--n, 13) / 2); right: calc(100% / var(--n, 13) / 2); top: 33px; height: 1px; background: var(--line); }
.tsplit__step { position: relative; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-content: start; gap: 10px; padding: 14px 4px 14px; text-align: center; border-radius: 14px; min-width: 0; }
.tsplit__dot { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.tsplit__t { font-size: 13px; font-weight: 500; line-height: 1.55; letter-spacing: .02em; color: var(--ink-500); word-break: keep-all; overflow-wrap: anywhere; }
.tsplit__who { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 1; padding: 5px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.tsplit__step--acq .tsplit__dot { background: #fff; border: 1px dashed var(--ink-300); color: var(--ink-400); }
.tsplit__step--acq .tsplit__who { color: var(--ink-400); border: 1px dashed var(--ink-300); }
.tsplit__step--auto .tsplit__dot { background: var(--mist); border: 1px solid var(--line); color: var(--ink-400); }
.tsplit__step--auto .tsplit__who { color: var(--ink-400); background: var(--mist); }
.tsplit__step--ca { background: var(--teal-100); }
.tsplit__step--ca .tsplit__dot { background: var(--fill-key); border: 1px solid var(--fill-key); color: var(--on-fill); }
.tsplit__step--ca .tsplit__t { font-weight: 700; color: var(--ink-900); }
.tsplit__step--ca .tsplit__who { color: var(--on-fill); background: var(--fill-key); }
.g-mist .tsplit__step--acq .tsplit__dot { background: #fff; }
.g-mist .tsplit__step--auto .tsplit__dot, .g-mist .tsplit__step--auto .tsplit__who { background: #fff; }
.tsplit__legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tsplit__g { display: grid; align-content: start; gap: 8px; padding: 18px 20px 20px; border-radius: var(--r-md); background: var(--mist); min-width: 0; }
.g-mist .tsplit__g { background: #fff; }
.tsplit__g--ca { background: var(--teal-100); }
.g-mist .tsplit__g--ca { background: var(--teal-100); }
.tsplit__gt { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 14.5px; font-weight: 700; line-height: 1.5; color: var(--ink-900); }
.tsplit__mk { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.tsplit__g--acq .tsplit__mk { background: #fff; border: 1px dashed var(--ink-400); }
.tsplit__g--auto .tsplit__mk { background: var(--ink-300); }
.tsplit__g--ca .tsplit__mk { background: var(--fill-key); }
.tsplit__gc { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--teal-800); padding: 3px 9px; border-radius: var(--r-pill); background: #fff; }
.tsplit__g--ca .tsplit__gc { background: var(--fill-key); color: var(--on-fill); }
.g-mist .tsplit__g:not(.tsplit__g--ca) .tsplit__gc { background: var(--mist); }
.tsplit__gb { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--ink-500); word-break: keep-all; overflow-wrap: anywhere; }
.tsplit__note { margin-top: -6px; }
@media (min-width: 1100px) and (max-width: 1259.98px) { .tsplit__t { font-size: 12px; } .tsplit__step { padding: 12px 2px; } }
@media (max-width: 1099.98px) {
  .tsplit__steps { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .tsplit__steps::before { left: 33px; right: auto; top: 26px; bottom: 26px; width: 1px; height: auto; }
  .tsplit__step { grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-rows: none; justify-items: start; align-items: center; column-gap: 14px; padding: 7px 14px; text-align: left; }
  .tsplit__t { font-size: 14px; }
  .tsplit__legend { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}