/* 261005ヒーロー。旧演出・下層ページに影響させない。
 * 設定メモ：現役：TOP heroと操作部。design-center.css／static.cssの後、lower.cssの前に読み込む。従ってPC heroCopy最終サイズ16pxはlower.cssが決める。初期高さはhero.jsの実測・固定位置と連動する。
 */
body.design-center { --hero-header-height: 120px; --hero-crumb-height: 48px; --hero-nav-height: 60px; }
body.design-center .common-breadcrumb { top: var(--hero-header-height); z-index: 5; opacity: 1; visibility: visible; }
/* 採用共通CSSのリンクtransitionによる遅延をなくし、文字と区切りを一括で切り替える。 */
body.design-center .common-breadcrumb,
body.design-center .common-breadcrumb *,
body.design-center .common-breadcrumb *::before,
body.design-center .common-breadcrumb *::after { transition: none; }
body.design-center .common-breadcrumb_inner { padding-block: 12px; }
/* 白背景状態だけを保持。パンくずの文字・リンク・矢印はcorporate共通CSSへ委ねる。 */
body.design-center .common-breadcrumb.is-light { background-color: #fff; }

body.design-center .design-center-heroNavSlot { position: absolute; top: calc(var(--hero-header-height) + var(--hero-crumb-height)); left: 0; right: 0; z-index: 95; }
body.design-center .design-center-heroNav { margin: 0; color: var(--color-text-white); }
body.design-center .design-center-heroNav.is-fixed { position: fixed; top: var(--hero-header-height); left: 0; right: 0; background: transparent; }
/* 共有navigation.cssの透明指定より優先し、nav全幅を白い読み取り面にする。 */
body.design-center .design-center-heroNav.is-light { background: #fff; color: var(--color-text); }
body.design-center[data-design-center-motion="off"] :is(#about, #our-mission, #stories, #faq, #careers) { scroll-margin-top: calc(var(--hero-header-height) + var(--hero-nav-height) + 24px); }

/* JSなし・動きを減らす設定では全文を通常フローで読める。 */
body.design-center[data-design-center-motion="off"] .common-pageHeader { display: block; height: auto; min-height: 100dvh; }
/* 初期paintも演出開始後と同じ高さ。通常フローの本文高から100dvhへ縮む際の
 * cover再計算による人物の拡大・位置跳びを防ぐ。失敗/reduced/print時はpendingが外れる。 */
@media screen and (prefers-reduced-motion: no-preference) {
  body.design-center[data-design-center-motion="off"].is-hero-scroll-pending .common-pageHeader { height: 100vh; height: 100dvh; min-height: 0; }
}
body.design-center .design-center-heroTextViewport { position: relative; z-index: 3; box-sizing: border-box; padding: 80px 24px 64px; color: var(--color-text-white); }
body.design-center .design-center-heroText { width: 30.243056vw; margin-inline: auto; }
/* 通常フローでもz-indexを有効にし、題字がabsoluteの背景動画に隠れないようにする。 */
body.design-center .design-center-heroTitle { display: block; position: relative; z-index: 3; inset: auto; padding: calc(var(--hero-header-height) + var(--hero-crumb-height) + var(--hero-nav-height) + 80px) 24px 0; }
body.design-center .design-center-heroTitle img { width: 30.243056vw; margin-inline: auto; }
/* 調整メモ：line-height2.8は倍率。最終font-sizeはPC16／小幅14で行高44.8／39.2px、479px以下は後方2.4で33.6px。p下36pxは行高と別の段落余白。 */
body.design-center .design-center-heroCopy { --hero-copy-gap: 80px; margin-top: var(--hero-copy-gap); font-size: var(--design-center-body-font-size); line-height: 2.8; letter-spacing: .06em; overflow-wrap: anywhere; }
body.design-center .design-center-heroCopy p { margin: 0 0 36px; }
body.design-center .design-center-heroCopy p:last-child { margin-bottom: 0; }
body.design-center .design-center-heroControls { position: relative; inset: auto; margin: 0 24px; padding-bottom: 24px; grid-template-columns: auto minmax(0, 1fr); gap: 16px 32px; }
/* stageだけの除外では下流ABOUTがanchorになり、予約高更新→scrollY増加→再予約が循環する。
 * scroll配置を管理する間はTOP全体を除外し、通常フローへのfallback時はブラウザ既定へ戻す。 */
body.design-center.is-hero-scroll-ready { overflow-anchor: none; }
body.design-center.is-hero-scroll-ready .design-center-heroStage { position: relative; overflow-anchor: none; }
body.design-center.is-hero-scroll-ready .common-pageHeader { position: sticky; top: 0; height: 100vh; height: 100dvh; min-height: 0; }
body.design-center.is-hero-scroll-ready .design-center-heroTextViewport {
  position: absolute; top: calc(var(--hero-header-height) + var(--hero-nav-height) + 16px); bottom: 24px; left: 0; right: 0;
  overflow: hidden; padding: 0 24px;
  mask-image: linear-gradient(to bottom, transparent, #000 var(--hero-copy-fade-top, 12%), #000 var(--hero-copy-fade-solid, 76%), transparent var(--hero-copy-fade-end, 100%));
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--hero-copy-fade-top, 12%), #000 var(--hero-copy-fade-solid, 76%), transparent var(--hero-copy-fade-end, 100%));
}
body.design-center.is-hero-scroll-ready .design-center-heroText { position: relative; }
/* 題字の時間制御はhero-intro.jsのclip WAAPIだけ。scroll量によるtransitionと下移動は使わない。 */
body.design-center.is-hero-scroll-ready .design-center-heroTitle {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; padding: 24px; box-sizing: border-box; opacity: 1; visibility: visible; transition: none;
}
body.design-center.is-hero-scroll-ready .design-center-heroCopy { position: absolute; top: var(--hero-copy-start); width: 100%; margin-top: 0; will-change: transform; }
body.design-center.is-hero-scroll-ready .design-center-heroControls { position: absolute; left: 24px; right: 24px; bottom: 16px; margin: 0; padding: 0; }
/* 左端24px + 56pxでCookieアイコンの右側（80px）を確保する。 */
body.design-center .design-center-heroControls .design-center-heroFull { display: inline-flex; margin-left: 56px; max-width: calc(100% - 56px); white-space: normal; overflow-wrap: anywhere; border-radius: 0; text-align: left; background: transparent; }
body.design-center .design-center-heroControls .design-center-heroNews { border-radius: 0; background: rgb(0 0 0 / 85%); }
body.design-center .design-center-heroControls .design-center-heroPause { border-radius: 50%; background: transparent; }
body.design-center .design-center-heroNewsArea { width: min(640px, 100%); }
body.design-center .design-center-heroNewsPanel { border-radius: 0; padding: 16px 48px 16px 24px; background: rgb(0 0 0 / 85%); max-height: min(240px, 25dvh); overflow-y: auto; }
body.design-center .design-center-heroNewsList { gap: 8px; }
body.design-center .design-center-heroNewsList li { gap: 8px; }
body.design-center .design-center-heroNewsPanel[hidden] { display: none !important; }
body.design-center .design-center-heroNews { position: static; }
body.design-center.is-hero-in-view #js-go-top-button { display: none !important; }

@media (max-width: 1023px) {
  body.design-center { --hero-header-height: 64px; }
  body.design-center .design-center-heroText { width: min(560px, 100%); }
  body.design-center .design-center-heroCopy { font-size: 14px; }
  body.design-center .design-center-heroControls { grid-template-columns: minmax(0, 1fr) 44px; gap: 12px; }
  body.design-center .design-center-heroControls_right { display: contents; }
  body.design-center .design-center-heroNewsArea { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  body.design-center .design-center-heroNewsPanel { position: absolute; bottom: 52px; right: 0; width: min(640px, 100%); max-height: 24dvh; }
  body.design-center .design-center-heroNewsList li { grid-template-columns: max-content minmax(0, 1fr); }
  body.design-center .design-center-heroNews { margin-right: 56px; }
  body.design-center.is-hero-scroll-ready .design-center-heroTextViewport { bottom: 140px; }
  body.design-center .design-center-heroCopy { --hero-copy-gap: 56px; }
}
@media (max-width: 479px) {
  body.design-center .design-center-heroCopy br { display: none; }
  body.design-center .design-center-heroCopy p:first-child br:first-child { display: initial; }
  body.design-center .design-center-heroCopy { line-height: 2.4; }
  body.design-center .design-center-heroControls .design-center-heroFull { padding: 10px; }
  body.design-center .design-center-heroNewsList li { grid-template-columns: 1fr; }
}
@media screen and (max-height: 500px) {
  body.design-center.is-hero-scroll-ready .design-center-heroTextViewport { top: calc(var(--hero-header-height) + var(--hero-nav-height)); bottom: 100px; }
  body.design-center .design-center-heroControls { grid-template-columns: auto minmax(0, 1fr); }
  body.design-center .design-center-heroControls_right { display: flex; gap: 12px; }
  body.design-center .design-center-heroNewsArea { grid-column: auto; grid-row: auto; width: auto; }
  body.design-center .design-center-heroNews { margin: 0; }
  body.design-center .design-center-heroNewsPanel { position: absolute; bottom: 52px; right: 0; width: min(640px, calc(100vw - 48px)); max-height: 25dvh; }
}
body.design-center:not(.is-hero-scroll-ready) .design-center-heroNewsPanel { position: relative; inset: auto; }

@media print {
  body.design-center .common-pageHeader { background: #fff; }
  body.design-center .design-center-heroStage { height: auto !important; }
  body.design-center.is-hero-scroll-ready .common-pageHeader { position: relative; height: auto !important; }
  body.design-center .design-center-heroTextViewport { position: relative !important; inset: auto !important; padding: 48px 24px !important; mask-image: none !important; -webkit-mask-image: none !important; overflow: visible !important; }
  body.design-center .design-center-heroText { top: auto !important; transform: none !important; width: 80%; }
  body.design-center .design-center-heroTitle,
  body.design-center .design-center-heroCopy { position: static !important; transform: none !important; will-change: auto; }
  body.design-center .design-center-heroTitle { padding: 0; }
  body.design-center .design-center-heroCopy { margin-top: var(--hero-copy-gap) !important; }
  body.design-center .design-center-heroTextViewport { color: var(--color-text); }
  body.design-center .design-center-heroTitle img { filter: invert(1); }
  body.design-center .design-center-heroNavSlot,
  body.design-center .design-center-heroControls { display: none; }
}

@media (prefers-reduced-motion: reduce), print {
  body.design-center .design-center-heroTitle {
    opacity: 1 !important; visibility: visible !important; transition: none !important;
  }
}

/* PC本文は手動のbrだけで改行。タイトルの寸法・透過領域とは独立させる。 */
@media (min-width: 1024px) {
  body.design-center .design-center-heroText { width: 100%; }
  body.design-center .design-center-heroCopy { width: max-content; margin-inline: auto; }
  body.design-center.is-hero-scroll-ready .design-center-heroCopy { width: max-content; left: 50%; margin-left: 0; translate: -50% 0; }
  body.design-center .design-center-heroCopy { white-space: nowrap; overflow-wrap: normal; }
}
@media (max-width: 1023px) {
  body.design-center .design-center-heroTitle img { width: min(560px, 100%); }
}
@media (max-width: 767px) {
  body.design-center .design-center-heroTitle img { width: min(80vw, 560px); }
}

@media print {
  body.design-center .design-center-heroCopy { white-space: normal; width: auto !important; translate: none !important; }
}

/* 261013案：PCの題字と本文段落間だけ調整。A/Bの縦開始位置・移動制御は維持。 */
@media screen and (min-width: 1024px) {
  body.design-center .design-center-heroTitle img { width: 496px; max-width: 100%; }
  body.design-center .design-center-heroCopy p:not(:last-child) { margin-bottom: 45px; }
}

/* Aのみ：安定した外枠と全面coverを保持。SDK待機/失敗時は背景画像。 */
body.design-center[data-design-center-brightcove] .design-center-brightcoveHero,
body.design-center[data-design-center-brightcove] .design-center-brightcoveHero :is(.design-center-bcLayer, .design-center-bcPlayer, .vjs-tech) {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; aspect-ratio: auto;
}
body.design-center[data-design-center-brightcove] .common-pageHeader_image { background: #000 url('../img/top-hero-bg.webp') center / cover no-repeat; }
/* 初回の映像準備後だけ600ms/ease。内部2層にはtransitionを付けない。 */
body.design-center[data-design-center-brightcove] .design-center-brightcoveHero { background: #000; pointer-events: none; opacity: 0; transition: opacity 600ms ease; }
body.design-center[data-design-center-brightcove] .design-center-brightcoveHero[data-brightcove-frame-ready] { opacity: 1; }
@media (prefers-reduced-motion: reduce), print {
  body.design-center[data-design-center-brightcove] .design-center-brightcoveHero { transition: none; }
}
body.design-center[data-design-center-brightcove] .design-center-brightcoveHero .vjs-tech { object-fit: cover; object-position: center; }
/* SDK標準UIは既存操作列と重複させない（背景・本編ともAの生成playerだけ）。 */
body.design-center[data-design-center-brightcove] .design-center-bcPlayer > :not(.vjs-tech) { display: none !important; }

/* A：nav到達でclip枠を汎用表示。entry後の追加downで、その場でopacity退場する。 */
body.design-center:not([data-design-variant="b"]).is-hero-scroll-pending :is(.design-center-heroTitle, .design-center-heroCopy) { opacity: 0; visibility: hidden; }
body.design-center:not([data-design-variant="b"]).is-hero-a-ready .design-center-heroTitle {
  opacity: 1; visibility: visible; pointer-events: none;
  transition: none;
  mask-image: linear-gradient(to bottom, transparent var(--hero-nav-height), #000 calc(var(--hero-nav-height) + 16px));
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--hero-nav-height), #000 calc(var(--hero-nav-height) + 16px));
}
body.design-center.is-hero-title-pending .design-center-heroTitleClip { opacity: 0; }
body.design-center:is([data-hero-flow="waiting"], [data-hero-flow="copy"], [data-hero-flow="complete"], [data-hero-flow="readable"]) .design-center-heroTitleClip { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce), print {
  body.design-center:not([data-design-variant="b"]) :is(.design-center-heroTitle, .design-center-heroCopy) { opacity: 1 !important; visibility: visible !important; }
}

/* 題字の表示寸法は従来と同じ。下線や境界線は加えず、実画像高で切り抜く。 */
body.design-center .design-center-heroTitleClip { width: 30.243056vw; max-width: 100%; margin-inline: auto; }
body.design-center .design-center-heroTitleClip img { display: block; width: 100%; }
body.design-center.is-hero-a-ready .design-center-heroTitleClip { overflow: hidden; }
@media (max-width: 1023px) {
  body.design-center .design-center-heroTitleClip { width: min(560px, 100%); }
}
@media (max-width: 767px) {
  body.design-center .design-center-heroTitleClip { width: min(80vw, 560px); }
}
@media screen and (min-width: 1024px) {
  body.design-center .design-center-heroTitleClip { width: 496px; }
}
@media (prefers-reduced-motion: reduce), print {
  body.design-center .design-center-heroTitleClip { overflow: visible !important; opacity: 1 !important; translate: none !important; }
  body.design-center .design-center-heroTitleClip img { transform: none !important; }
}

/* TOPの空goTop外枠だけが白点にならないよう、枠を可視リンクの輪郭へ移す。
   外枠の寸法とキーボードfocus専用outline/box-shadowは変えない。 */
body.design-center .common-fixedButton:has(> .common-goTop) { border-color: transparent; }
body.design-center .common-fixedButton > .common-goTop:not(:focus-visible) { outline: 1px solid #fff; outline-offset: 0; }

/* SP本文のみ左右40px。背景動画・全幅写真・hero計測ロジックは維持。 */
@media (max-width: 1023px) {
  body.design-center .design-center-heroTextViewport,
  body.design-center.is-hero-scroll-ready .design-center-heroTextViewport { padding-inline: 40px; }
  body.design-center .design-center-heroTitle,
  body.design-center.is-hero-scroll-ready .design-center-heroTitle { padding-inline: 40px; }
}

@media screen and (max-width: 1023px) {
  body.design-center .design-center-heroTextViewport,
  body.design-center.is-hero-scroll-ready .design-center-heroTextViewport,
  body.design-center .design-center-heroTitle,
  body.design-center.is-hero-scroll-ready .design-center-heroTitle { padding-inline: var(--dc-sp-gutter); }
}

/* Unicode記号の絵文字化を避け、再生状態は既存のaria-pressedで切り替える。 */
@media screen {
  body.design-center .design-center-heroPause_icon { display: block; width: 10px; height: 12px; flex: none; color: #fff; }
  body.design-center .design-center-heroPause_play { display: none; }
  body.design-center .design-center-heroPause[aria-pressed="true"] .design-center-heroPause_play { display: block; }
  body.design-center .design-center-heroPause[aria-pressed="true"] .design-center-heroPause_pause { display: none; }
}
/* 左右に同幅の操作列を予約し、短い画面でもFull Videoの中心を維持する。 */
@media screen and (max-width: 1023px) {
  body.design-center .design-center-heroControls,
  body.design-center .is-news-stacked .design-center-heroControls { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  body.design-center .design-center-heroControls_right { display: contents; }
  body.design-center .design-center-heroControls .design-center-heroFull { grid-column: 2; grid-row: 1; justify-self: center; margin-left: 0; max-width: 100%; }
  body.design-center .design-center-heroControls .design-center-heroPause,
  body.design-center .is-news-stacked .design-center-heroControls .design-center-heroPause { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* tablet題字は375px時の300pxを下限/固定値として使用。Full VideoはCookie操作部の右へ。 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  body.design-center .design-center-heroTitleClip { width: 300px; }
  body.design-center .design-center-heroTitle img { width: 300px; max-width: 100%; }
  body.design-center .design-center-heroControls,
  body.design-center .is-news-stacked .design-center-heroControls { grid-template-columns: minmax(0, 1fr) 44px; }
  body.design-center .design-center-heroControls .design-center-heroFull { grid-column: 1; justify-self: start; margin-left: 56px; max-width: calc(100% - 56px); }
  body.design-center .design-center-heroControls .design-center-heroPause,
  body.design-center .is-news-stacked .design-center-heroControls .design-center-heroPause { grid-column: 2; }
}

/* 背景動画の初回準備／再試行だけ。動画ホストのopacityとは独立した装飾面。 */
body.design-center .design-center-heroLoader {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
body.design-center .design-center-heroLoader > span {
  display: block; box-sizing: border-box; width: 18px; height: 18px;
  border: 1px solid rgb(255 255 255 / 25%); border-top-color: #fff; border-right-color: rgb(255 255 255 / 65%);
  border-radius: 50%; animation: design-center-hero-loading 1s linear infinite; animation-play-state: paused;
}
body.design-center .design-center-heroLoader[data-loading] { opacity: 1; visibility: visible; transition: none; }
body.design-center .design-center-heroLoader[data-loading] > span { animation-play-state: running; }
@keyframes design-center-hero-loading { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce), print {
  body.design-center .design-center-heroLoader { display: none; transition: none; }
  body.design-center .design-center-heroLoader > span { animation: none; }
}