/* 採用CSSのhtml黒を上書きし、共通本文色を継承の起点にする。
 * 設定メモ：現役：TOPの基底と旧演出を同じファイルに保存。index.htmlでstatic／hero／lowerより先に読み込む。旧selector・値の残存を現役表示と混同せず、HTML使用箇所と後続上書きを調べる。FAQ回答は基底本文14px、1920以上16pxを使う。
 */
body.design-center {
  color: var(--color-text);
  --design-center-mission-overlap: 46vw;
  --design-center-message-pin-offset: 22vw;
  /* TOPの本文は1920px未満で14px、1920px以上で16px。 */
  --design-center-body-font-size: 14px;
  --design-center-meta-font-size: 12px;
  --design-center-card-heading-font-size: 16px;
}
@media (min-width: 1920px) {
  body.design-center {
    --design-center-body-font-size: 16px;
    --design-center-meta-font-size: 14px;
    --design-center-card-heading-font-size: 18px;
  }
}
/* IAB Design Center: hero navigation overlay */
body.design-center .l-container {
  overflow: visible;
}

body.design-center .common-main {
  color: var(--color-text);
  position: relative;
  background: #000;
}



body.design-center .common-header:not(.is-design-center-interacting) {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  box-shadow: none;
  transition: box-shadow 0.2s ease;
}
/* Closed header chrome stays transparent; open controls use the white header surface. */
body.design-center .common-header:not(.is-design-center-interacting) .common-header_title,
body.design-center .common-header:not(.is-design-center-interacting) .common-header_topSp,
body.design-center .common-header:not(.is-design-center-interacting) .common-header_grid,
body.design-center .common-header:not(.is-design-center-interacting) .common-header_main::before {
  background-color: transparent;
}


body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) {
  color: var(--color-text-white);
  background-color: transparent;
  box-shadow: none;
}

body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header).is-design-center-mission-header {
  background-color: rgb(255 255 255 / 30%);
}



body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) a,
body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) button {
  color: var(--color-text-white);
}

body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-header_title,
body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-header_topSp,
body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-header_grid,
body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-header_main::before {
  background-color: transparent;
}

body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-header_title::before,
body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-header_topSp,
body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-header_main::before,
body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-mainMenu,
body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-subMenu {
  border-color: rgb(255 255 255 / 35%);
}

body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-header_logo img {
  filter: brightness(0) invert(1);
}

body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-lang_icon,
body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-mainMenu_icon,
body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-spButton_button,
body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-searchPc_search {
  color: var(--color-text-white);
}

body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-lang_btn::before,
body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-lang_btn::after {
  background-color: rgb(255 255 255 / 35%);
}

body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-mainMenu.-product .common-mainMenu_bg {
  background: transparent;
  opacity: 0;
}

body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-mainMenu.-product .common-mainMenu_inner,
body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-mainMenu.-product .common-mainMenu_icon {
  color: var(--color-text-white);
}

body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-mainMenu.-active .common-mainMenu_bg {
  background: transparent;
  border: 0;
  opacity: 0;
}

body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-mainMenu[data-target="recruit"] .common-mainMenu_bg {
  background: transparent;
  border: 2px solid #fff;
  opacity: 1;
}

body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-mainMenu.-active .common-mainMenu_inner,
body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-mainMenu.-active .common-mainMenu_icon {
  color: var(--color-text-white);
}

body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-mainMenu:hover .common-mainMenu_inner,
body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-lang_btn:hover .common-lang_label,
body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-lang_btn:hover .common-lang_icon {
  color: var(--color-text-white);
  border-bottom-color: rgb(255 255 255 / 70%);
}

body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-searchPc_input {
  color: var(--color-text-white);
  background-color: rgb(0 0 0 / 16%);
  border-color: rgb(255 255 255 / 55%);
}

body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-searchPc_input::placeholder {
  color: color-mix(in srgb, var(--color-text-white) 80%, transparent);
}

body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-searchPc_search {
  background-color: rgb(0 0 0 / 16%);
  border: 1px solid rgb(255 255 255 / 55%);
}

body.design-center.is-design-center-header-ready .common-header:not(.is-design-center-interacting):not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])):not(.is-design-center-stories-header) .common-searchPc_search:hover {
  background-color: rgb(255 255 255 / 16%);
}



body.design-center .common-breadcrumb {
  position: absolute;
  top: 4.8rem;
  right: 0;
  left: 0;
  z-index: 2;
  background-color: transparent;
  /* border-top: 1px solid rgb(255 255 255 / 28%); */
}

body.design-center .common-breadcrumb_inner {
  padding-top: var(--space-75);
  padding-bottom: var(--space-75);
}

body.design-center .common-pageHeader {
  background-color: #000;
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
}
  /* ヒーロー動画透過黒レイヤーSP */
body.design-center .common-pageHeader::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  pointer-events: none;
  content: "";
  /* background: linear-gradient(to bottom, rgb(0 0 0 / 72%) 0, rgb(0 0 0 / 58%) 10.5rem, rgb(0 0 0 / 0%) 100%); */
  background: rgb(0 0 0 / 40%);
  /* background: rgb(0 0 0 / 0); */
}



body.design-center .common-pageHeader_image {
  background-color: #000;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body.design-center .common-pageHeader_image video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.design-center .common-header:not(.is-design-center-interacting) :where(a, button, input):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #1a1a1a;
}

/* Open-menu text and controls retain their existing colors. */
body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) {
  color: var(--color-text);
  background-color: #fff;
}

body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-header_title,
body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-header_topSp,
body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-header_grid,
body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-header_main::before {
  background-color: #fff;
}

body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-header_title::before,
body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-header_topSp,
body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-mainMenu,
body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-subMenu,
body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-header_main::before {
  border-color: var(--color-border-gray);
}

body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-header_title::before {
  background-color: var(--color-border-gray);
}

body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) a,
body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) button {
  color: var(--color-text);
}

body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-header_logo img {
  filter: none;
}

body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-lang_icon,
body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-mainMenu_icon,
body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-search_open,
body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-spButton_button {
  color: var(--color-text-blue);
}

body.design-center .common-header:not(.is-design-center-interacting):is([aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-mainMenu.-product .common-mainMenu_inner {
  color: var(--color-text);
}

body.design-center .common-header:not(.is-design-center-interacting):is([aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-mainMenu.-product .common-mainMenu_icon {
  color: var(--color-text-blue);
}

body.design-center .common-header:not(.is-design-center-interacting):is([aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-mainMenu.-product .common-mainMenu_bg {
  background: transparent;
  opacity: 0;
}

body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-lang_btn::before,
body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-lang_btn::after {
  background-color: var(--color-border-gray);
}

body.design-center .common-header:not(.is-design-center-interacting):has(.common-mainMenu[aria-selected="true"]) .common-mainMenu[aria-selected="true"],
body.design-center .common-header:not(.is-design-center-interacting):has(.common-mainMenu[aria-selected="true"]) .common-mainMenu[aria-selected="true"] .common-mainMenu_icon,
body.design-center .common-header:not(.is-design-center-interacting):has(.common-mainMenu[aria-selected="true"]) .common-mainMenu.-product .common-mainMenu_inner,
body.design-center .common-header:not(.is-design-center-interacting):has(.common-mainMenu[aria-selected="true"]) .common-mainMenu.-product .common-mainMenu_icon {
  color: var(--color-text-white);
}

body.design-center .common-header:not(.is-design-center-interacting):has(.common-mainMenu[aria-selected="true"]) .common-mainMenu.-product .common-mainMenu_bg {
  background-color: var(--color-surface-blue);
  opacity: 1;
}

body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-searchPc_input {
  color: var(--color-text);
  background-color: var(--color-bg-white);
  border-color: var(--color-border-blue-low);
}

body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-searchPc_input::placeholder {
  color: var(--color-text);
}

body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-search_search,
body.design-center .common-header:not(.is-design-center-interacting):is(.is-design-center-stories-header, [aria-expanded="true"], :has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-searchPc_search {
  color: var(--color-text-white);
  background-color: var(--color-border-blue);
  border-color: var(--color-border-blue);
}

body.design-center .common-header:not(.is-design-center-interacting).is-design-center-stories-header { opacity: 0.8; }
body.design-center .common-header:not(.is-design-center-interacting).is-design-center-stories-header:not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-mainMenu.-product .common-mainMenu_inner,
body.design-center .common-header:not(.is-design-center-interacting).is-design-center-stories-header:not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-mainMenu.-product .common-mainMenu_icon { color: var(--color-text-white); }
body.design-center .common-header:not(.is-design-center-interacting).is-design-center-stories-header:not([aria-expanded="true"]):not(:has(.common-mainMenu[aria-selected="true"], .common-lang[aria-expanded="true"], .common-search[aria-expanded="true"])) .common-mainMenu.-product .common-mainMenu_bg { background-color: var(--color-surface-blue); opacity: 1; }

/* TOP 0910: normal-flow content; only the message stage may be pinned. */
body.design-center {
  --design-center-body-size: clamp(16px, 1.05vw, 24px);
  overflow-x: clip;
}
body.design-center .common-pageHeader_inner {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--design-center-header-height, 120px) + 48px) 24px 96px;
}
body.design-center .common-pageHeader_contents {
  width: 100%;
  max-width: none;
  padding: 0;
  color: var(--color-text-white);
  text-align: center;
  background: transparent;
}
body.design-center .common-main .common-pageHeader_contents {
  border-radius: 5px;
}
body.design-center .common-pageHeader .common-heading_title {
  margin: 0;
  color: var(--color-text-white);
  line-height: 1;
}
body.design-center .common-pageHeader [data-design-center-title-image] {
  display: block;
  width: min(31.7361vw, 914px);
  max-width: min(100%, 914px);
  height: auto;
  margin-inline: auto;
}
body.design-center .common-message {
  position: relative;
  margin: 0;
  padding: 0;
  color: var(--color-text-white);
  background: rgb(0 0 0 / 100%);
  border: 0;
}
body.design-center .design-center-message_stage {
  position: relative;
  box-sizing: border-box;
  padding-bottom: calc(64px + var(--design-center-mission-overlap));
  display: grid;
  align-items: start;
  min-height: max(100vh, 95.833334vw);
  min-height: max(100svh, 95.833334vw);
  isolation: isolate;
}
body.design-center .design-center-message_viewport {
  box-sizing: border-box;
  margin-top: var(--design-center-message-pin-offset);
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 24px;
}
body.design-center .design-center-message_media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #000;
}
/* メッセージ背景動画黒レイヤー */
body.design-center .design-center-message_media::after {
  position: absolute;
  inset: 0;
  content: "";
  /* background: rgb(0 0 0 / 40%); */
  background: rgb(0 0 0 / 0);

}
body.design-center .design-center-message_media video {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 46vw;
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: left top;
}
body.design-center .common-message_inner {
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  color: var(--color-text-white);
  text-align: left;
}
body.design-center .common-message_main {
  margin: 0 0 0.25em;
  color: inherit;
  font-size: clamp(22px, 1.225vw, 28px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
  transform: none;
}
body.design-center .common-message_sub {
  width: auto;
  max-width: none;
  margin: 0;
  color: inherit;
  font-size: var(--design-center-body-font-size);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.06em;
  transform: none;
}
body.design-center .common-message_sub p {
  margin: 0;
  color: inherit;
  font: inherit;
}
body.design-center .common-message_sub p + p { margin-top: 2em; }
body.design-center .common-message_sub .design-center-message_closing { font-weight: 700; }
/* Keep the wave continuous from MISSION through CAREERS. */
body.design-center .design-center-content {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--design-center-mission-overlap));
  background:
    url("../img/top-bg3-2.webp") center 23vw / 100% auto no-repeat,
    linear-gradient(to bottom, transparent 0px, transparent var(--design-center-mission-overlap), #000 var(--design-center-mission-overlap), #000 168vw, #fff 268vw, #fff 100%);
}
body.design-center .design-center-mission {
  position: relative;
  box-sizing: border-box;
  min-height: 126.333333vw;
  padding: 46vw 24px 54vw;
  color: var(--color-text-white);
  text-align: center;
}
body.design-center .design-center-mission_inner { max-width: 1200px; margin-inline: auto; }
body.design-center :is(.design-center-mission, .design-center-stories, .design-center-faq-careers) .common-heading_title {
  margin: 0;
  padding: 0;
  color: inherit;
  line-height: 1;
  text-align: center;
}
body.design-center :is(.design-center-mission, .design-center-stories) .common-heading_title > img {
  display: block;
  width: clamp(180px, 19vw, 432px);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
body.design-center .design-center-mission_description {
  width: max-content;
  max-width: 100%;
  margin: clamp(32px, 3.5vw, 72px) auto 0;
  text-align: center;
}
body.design-center .design-center-mission_heading {
  font-family: "Noto Sans JP", sans-serif;
  margin: 0 0 1.2em;
  color: var(--color-text-white);
  font-size: clamp(24px, 2.1875vw, 48px);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.25em;
}
body.design-center .design-center-mission_description p {
  margin: 0;
  color: var(--color-text-white);
  font-size: var(--design-center-body-font-size);
  line-height: 2.2;
  letter-spacing: 0.08em;
}
/* 共通ボタンの外観はcomponentに任せ、セクション内の配置を維持する。 */
body.design-center .design-center-button,
body.design-center .design-center-stories_more {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 40px auto 0;
}
body.design-center .design-center-stories { padding: clamp(96px, 16vw, 460.8px) 0 clamp(96px, 22vw, 633.6px); }
body.design-center .design-center-stories_inner { width: min(76vw, 2188.8px); margin-inline: auto; }
body.design-center .design-center-stories .common-heading { margin: 0; padding: 0; color: var(--color-text-white); }
body.design-center .design-center-stories .common-heading_title > img { filter: brightness(0) invert(1); }
body.design-center .design-center-stories .common-heading_title_sub {
  font-family: "Noto Sans JP", sans-serif;
  display: block;
  margin-top: clamp(32px, 3.5vw, 72px);
  font-size: clamp(24px, 2.1875vw, 48px);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.2em;
}
body.design-center .design-center-stories_list {
  display: grid;
  gap: min(22vw, 633.6px);
  margin-top: clamp(64px, 8vw, 180px);
}
body.design-center .design-center-story {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;

  text-decoration: none;
}

/* 元の画像配置・幅を外枠に移し、拡大画像をこの領域内だけに表示する。 */
body.design-center .design-center-story_media {
  display: block;
  grid-column: 1;
  justify-self: end;
  grid-row: 1;
  width: min(55.208333vw, 1208.4px);
  max-width: min(100%, 1208.4px);
  min-width: 0;
  height: auto;
  aspect-ratio: 1590 / 894;
  overflow: hidden;
}
body.design-center .design-center-story_image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1590 / 894;
  object-fit: cover;
  transition: transform .3s ease;
}
body.design-center .common-main .design-center-story:is(:hover, :focus-visible),
body.design-center .common-main .design-center-story .design-center-story_title { text-decoration: none; }
body.design-center .design-center-story:hover .design-center-story_image { transform: scale(1.1); }

body.design-center .design-center-story_copy {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-self: start;
  width: min(24.930556vw, 545.68px);
  max-width: min(100%, 545.68px);
  min-height: min(17.986111vw, 518px);
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
  padding: clamp(24px, 5.902778vw, 170px) clamp(16px, 0.833333vw, 24px) clamp(24px, 1.041667vw, 30px) clamp(24px, 2.222222vw, 64px);
  background-color: rgb(255 255 255 / 70%);
  transition: background-color .3s ease;
}
body.design-center .design-center-story:hover .design-center-story_copy { background-color: rgb(255 255 255 / 100%); }

body.design-center .design-center-story:nth-child(even) .design-center-story_media {
  justify-self: start;
}

body.design-center .design-center-story:nth-child(even) .design-center-story_copy {
  justify-self: end;
}

body.design-center .design-center-story_metadata { font-size: var(--design-center-meta-font-size); }

body.design-center .design-center-story_category,
body.design-center .design-center-story_tags,
body.design-center .design-center-story_date {
  display: block;
  margin: 0;
  font-size: var(--design-center-meta-font-size);
  font-weight: 500;
  line-height: 1.8;
}

body.design-center .design-center-story_title {
  margin: 0;
  font-size: var(--design-center-body-font-size);
  font-weight: 700;
  line-height: 1.6;
}

body.design-center .design-center-story_footer {
  display: flex;
  margin-top: auto;
  padding-top: 24px;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

body.design-center .design-center-story_category {
  margin-left: auto;
  padding: 8px 12px;
  border-radius: 5px;
  color: var(--color-text-white);
  background-color: #666;
}


body.design-center .design-center-stories_more {
  margin: clamp(64px, 10vw, 288px) auto 0;
}
body.design-center .design-center-faq-careers { padding: 0 24px clamp(120px, 22vw, 500px); }
body.design-center .design-center-faq-careers_title-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
body.design-center .design-center-faq-careers_title-image.-faq { width: clamp(48.4167px, 3.45917vw, 96.8333px); }
body.design-center .design-center-section_description {
  margin: clamp(24px, 2.5vw, 56px) auto 0;

  font-size: var(--design-center-body-font-size);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.08em;
  text-align: center;
}
/* 共通CAREERSの寸法・記事ページは保持し、TOPの文字サイズのみ統一する。 */
body.design-center .common-main .design-center-careers .design-center-section_description,
body.design-center .common-main .design-center-careers_card p {
  font-size: var(--design-center-body-font-size);
}
body.design-center .common-main .design-center-careers_card h3 {
  font-size: var(--design-center-card-heading-font-size);
}
body.design-center .design-center-faq_list {
  width: min(58vw, 1670px);
  margin: clamp(40px, 4vw, 96px) auto 0;
}
body.design-center .design-center-faq_item { margin: 0; }
body.design-center .design-center-faq_item + .design-center-faq_item { margin-top: 24px; }
body.design-center .design-center-faq_item summary {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 24px;
  min-height: 44px;
  padding: 16px 64px 16px 32px;
  border-radius: 5px;
  color: var(--color-text-white);
  background: #000;
  font-size: var(--design-center-body-font-size);
  font-weight: 700;
  line-height: 1.7;
  cursor: pointer;
  list-style: none;
}
body.design-center .design-center-faq_question-label { font-size: clamp(18px, 0.875vw, 20px); }
body.design-center .design-center-faq_item summary::-webkit-details-marker { display: none; }
body.design-center .design-center-faq_item summary::after {
  position: absolute;
  right: 24px;
  content: "+";
  font-size: 28px;
  line-height: 1;
}
body.design-center .design-center-faq_item[open] summary::after { content: "−"; }
body.design-center .design-center-faq_answer {
  padding: 28px 80px;
  border-radius: 5px;
  /* background: #e6e6e6; */
  background: #ffffff;
}
/* 調整メモ：FAQ回答は基底本文14px／倍率1.9（26.6px）、1920以上16px／1.9（30.4px）。heroCopyは後続lower.cssのPC16px指定が別に適用される。 */
body.design-center .design-center-faq_answer p {
  margin: 0;

  font-size: var(--design-center-body-font-size);
  line-height: 1.9;
}
body.design-center .common-main :is(a, button, summary):focus-visible,
body.design-center:not([data-design-center-input="pointer"]) .common-main common-button:focus-within {
  outline: 3px solid #005eb8;
  outline-offset: 5px;
  box-shadow: 0 0 0 2px #fff;
}
@media (max-width: 63.999em) {
  body.design-center .common-pageHeader [data-design-center-title-image] { width: 80vw; }
  body.design-center .common-message_inner { width: fit-content; margin: 0 auto; padding: 0 24px; }
  body.design-center .common-message_main { letter-spacing: 0.06em; }
  body.design-center .common-message_sub br,
  body.design-center .design-center-mission_description br { display: none; }
  body.design-center .design-center-content { background-position: center top; background-size: cover; }
  body.design-center .design-center-mission { min-height: 0; padding: 46vw 24px 96px; }
  body.design-center .design-center-mission_inner,
  body.design-center .design-center-stories .common-heading { position: relative; isolation: isolate; }
  /* The dark plateau follows the content height, including enlarged text. */
  body.design-center .design-center-mission_inner::before,
  body.design-center .design-center-stories .common-heading::before {
    position: absolute;
    z-index: -1;
    inset: -32px -24px;
    content: "";
    background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 60%) 32px, rgb(0 0 0 / 60%) calc(100% - 32px), transparent);
    pointer-events: none;
  }
  body.design-center .design-center-mission_heading,
  body.design-center .design-center-stories .common-heading_title_sub {
    font-size: clamp(20px, 2.35vw, 24px);
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
  }
  body.design-center .design-center-stories_inner { width: calc(100% - 48px); }
  body.design-center .design-center-stories_list { gap: 72px; }
  body.design-center .design-center-story { display: flex; flex-direction: column; align-items: stretch; }
  body.design-center .design-center-story_media { width: 100%; }
  body.design-center .design-center-story_copy { width: calc(100% - 32px); max-width: 545.68px; min-height: 0; margin: -24px auto 0; padding: 24px; }
  body.design-center .design-center-faq_list { width: min(100%, 884px); }
  body.design-center .design-center-faq_answer { padding: 24px; }
  body.design-center .design-center-faq_item summary { gap: 12px; padding-left: 20px; }
}
@media screen and (min-width: 64em) {
  /* Match the article width cap to the image and copy width caps. */
  body.design-center .design-center-story {
    width: min(100%, 1663.488px);
    margin-inline: auto;
  }
  /* Center the heading; let the left-aligned body extend to the right. */
  body.design-center .common-message_inner {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) fit-content(100%) minmax(0, 1fr);
  }
  body.design-center .common-message_main { grid-column: 2; }
  body.design-center .common-message_sub {
    grid-column: 2 / -1;
    justify-self: start;
    max-width: 100%;
  }
}
@media screen and (min-width: 64em) and (orientation: portrait) {
  body.design-center .design-center-mission {
    min-height: 103.333333vw;
    padding-top: 23vw;
  }
}
@media print, all and (min-width: 64em) {
  body.design-center .common-breadcrumb { top: 11.6rem; }
  /* ヒーロー動画透過黒レイヤーPC */
  body.design-center .common-pageHeader::before {
    /* background: linear-gradient(to bottom, rgb(0 0 0 / 72%) 0, rgb(0 0 0 / 58%) 17.5rem, rgb(0 0 0 / 0%) 30rem); */
    background: rgb(0 0 0 / 40%);
    /* background: rgb(0 0 0 / 0); */

  }
}
@media (prefers-reduced-motion: reduce) {
  body.design-center [data-message-reveal] { opacity: 1 !important; transform: none !important; }
}
@media print {
  body.design-center .common-header:not(.is-design-center-interacting) { position: static; }
  body.design-center .common-pageHeader::before,
  body.design-center .common-pageHeader_image,
  body.design-center .design-center-message_media { display: none !important; }
  body.design-center .common-pageHeader,
  body.design-center .common-pageHeader_inner,
  body.design-center .design-center-message_stage { min-height: 0; height: auto !important; }
  body.design-center .design-center-message_stage { padding-bottom: 0; }
  body.design-center .design-center-message_viewport { min-height: 0; margin-top: 0; padding-block: 0; }
  body.design-center .design-center-message_stage { position: relative !important; inset: auto !important; transform: none !important; }
  body.design-center .common-message { padding: 0; }
  body.design-center .common-message_inner { width: 100%; margin: 0; padding: 48px 24px; }
  body.design-center [data-message-reveal] { opacity: 1 !important; transform: none !important; }
  body.design-center .design-center-content { margin-top: 0; background: #fff; }
  body.design-center .design-center-mission { min-height: 0; padding: 64px 24px; color: inherit; }
  body.design-center .design-center-mission_heading,
  body.design-center .design-center-mission_description p,
  body.design-center .design-center-stories .common-heading { color: inherit; }
  body.design-center .design-center-mission .common-heading_title img,
  body.design-center .design-center-stories .common-heading_title > img { filter: brightness(0); }
  body.design-center .design-center-mission_inner::before,
  body.design-center .design-center-stories .common-heading::before { display: none; }
  body.design-center .design-center-story { break-inside: avoid; }
}

/* Hero navigation position/color; dimensions and typography are shared in navigation.css. */
body.design-center .design-center-heroNav { position: relative; margin-top: 16px; color: var(--color-text-white); }

body.design-center .design-center-heroControls {
  position: absolute;
  right: calc(var(--space-60, 1rem) + 7.2rem + 16px);
  bottom: var(--space-60, 1rem);
  left: 96px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  color: var(--color-text-white);
}
body.design-center .design-center-heroControls_right { display: flex; align-items: center; gap: 24px; margin-left: auto; }
body.design-center .design-center-heroControls button { box-sizing: border-box; min-width: 44px; padding: 10px 16px; border: 0; }
/* 丸矢印の書体・色はroundLink共通設定へ任せ、操作ボタンだけ従来値を使う。 */
body.design-center .design-center-heroControls button:not(.design-center-roundLink) { min-height: 44px; color: inherit; font-size: var(--design-center-body-font-size); line-height: 1.6; }
body.design-center .design-center-heroFull { border-radius: 5px; background: rgb(0 0 0 / 65%); }
body.design-center .design-center-heroControls .design-center-heroNews { border-radius: 5px; background: rgb(0 0 0 / 65%); }
body.design-center .design-center-heroControls .design-center-heroPause { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 5px; background: rgb(0 0 0 / 65%); }
body.design-center .design-center-heroControls button:disabled { cursor: not-allowed; opacity: 0.65; }
body.design-center .design-center-heroPause { cursor: pointer; }
body.design-center .design-center-heroPause[hidden] { display: none; }
@media (max-width: 47.999em) {
  body.design-center .design-center-heroControls { align-items: flex-start; }
  body.design-center .design-center-heroControls_right { max-width: 100%; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
  body.design-center .design-center-heroControls button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  body.design-center .design-center-heroControls .design-center-heroNews { padding-right: 8px; padding-left: 8px; }
}
/* NEWS shares the existing bottom-right controls without covering the movie button. */
body.design-center .design-center-heroControls { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; }
body.design-center .design-center-heroControls_right { width: 100%; min-width: 0; align-items: flex-end; justify-content: flex-end; }
body.design-center .design-center-heroNewsArea { position: relative; width: min(760px, 100%); min-width: 0; text-align: right; }
body.design-center .design-center-heroNews { position: absolute; right: 0; bottom: 0; cursor: pointer; }
body.design-center .design-center-heroNewsPanel {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 64px 16px 20px;
  border-radius: 5px;
  color: var(--color-text-white);
  background: rgb(0 0 0 / 65%);
  font-size: var(--design-center-body-font-size);
  line-height: 1.8;
  text-align: left;
  opacity: 1;
  transition: opacity 300ms ease;
}
body.design-center .design-center-heroControls .design-center-heroNewsClose {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 5px;
  color: var(--color-text-white);
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
body.design-center .design-center-heroControls .design-center-heroNewsClose:hover,
body.design-center:not([data-design-center-input="pointer"]) .design-center-heroControls .design-center-heroNewsClose:focus-visible { background: rgb(255 255 255 / 20%); }
body.design-center .design-center-heroControls .design-center-heroNewsClose[hidden] { display: none; }
body.design-center .design-center-heroNewsPanel.is-fading { opacity: 0; }
body.design-center .design-center-heroNewsPanel:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
body.design-center .design-center-heroNewsList { display: grid; gap: 12px; margin: 0; padding: 0; font: inherit; list-style: none; }
body.design-center .design-center-heroNewsList li { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0; font: inherit; overflow-wrap: anywhere; }
body.design-center .design-center-heroControls .design-center-heroPause { flex: 0 0 44px; }
body.design-center .design-center-heroNews[hidden] { display: none; }
/* Keep the box for a stable hero height; visibility also removes it from the accessibility tree. */
body.design-center .design-center-heroNewsPanel[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
@media (max-width: 63.999em) {
  body.design-center .common-pageHeader_inner { min-height: calc(100svh - var(--design-center-news-controls-height, 0px)); padding-top: max(calc(var(--design-center-header-height, 120px) + 48px), var(--design-center-news-title-clearance, 0px)); padding-bottom: 12px; }
  body.design-center .design-center-heroControls { position: relative; inset: auto; grid-template-columns: minmax(0, 1fr) 44px; margin: 0 24px; padding-bottom: 24px; }
  body.design-center .design-center-heroFull { justify-self: start; max-width: 100%; white-space: normal; }
  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-heroControls .design-center-heroPause { grid-column: 2; grid-row: 1; }
  body.design-center .design-center-heroNewsList li { grid-template-columns: minmax(0, 1fr); }
  body.design-center .design-center-heroNewsPanel { padding: 12px 64px 12px 12px; }
  body.design-center .design-center-heroNews { right: 64px; }
  body.design-center .common-main .common-pageHeader .common-heading_title { margin-block: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.design-center .design-center-heroNewsPanel { transition: none; }
}
@media print {
  body.design-center .design-center-heroNav,
  body.design-center .design-center-heroControls { display: none; }
}

@media screen and (max-height: 540px) {
  body.design-center .common-pageHeader_inner { min-height: 540px; }
}

@media (max-width: 63.999em), (max-height: 700px), print {
  body.design-center { --design-center-mission-overlap: 0px; }
}

@media screen and (max-width: 63.999em) and (max-height: 540px) {
  body.design-center .common-pageHeader_inner { min-height: calc(100svh - var(--design-center-news-controls-height, 0px)); }
}

/* Expanded text can require the same non-overlapping rows on a desktop. */
body.design-center .common-pageHeader.is-news-stacked .common-pageHeader_inner { min-height: calc(100svh - var(--design-center-news-controls-height, 0px)); padding-top: max(calc(var(--design-center-header-height, 120px) + 48px), var(--design-center-news-title-clearance, 0px)); padding-bottom: 24px; }
body.design-center .is-news-stacked .design-center-heroControls { position: relative; inset: auto; grid-template-columns: minmax(0, 1fr) 44px; margin: 0 24px; padding-bottom: 24px; }
body.design-center .is-news-stacked .design-center-heroFull { justify-self: start; max-width: 100%; white-space: normal; }
body.design-center .is-news-stacked .design-center-heroControls_right { display: contents; }
body.design-center .is-news-stacked .design-center-heroNewsArea { grid-column: 1 / -1; grid-row: 2; width: 100%; }
body.design-center .is-news-stacked .design-center-heroControls .design-center-heroPause { grid-column: 2; grid-row: 1; }
body.design-center .is-news-stacked .design-center-heroNews { right: 64px; }
body.design-center .common-main .is-news-stacked .common-heading_title { margin-block: 0; }

body.design-center .design-center-heroFull { cursor: pointer; }

/* 明示アンカー移動後のフォーカス表示。 */
body.design-center :is(#about, #stories, #faq, #careers):focus-visible,
body.design-center :is(#about, #stories, #faq, #careers) h2:focus-visible { outline: 2px solid currentColor; outline-offset: 8px; }

/* Hero → STATEMENT → pulse/title → MISSION (normal flow is the safe default). */
@media screen and (prefers-reduced-motion: no-preference) {
  /* Set by the synchronous header bootstrap before H1 exists; no-JS stays visible. */
  body.design-center.is-design-center-intro-pending .design-center-introTitle {
    opacity: 0;
    transition: none;
  }
}

body.design-center .design-center-introTitle {
  position: relative;
  z-index: 3;
  padding: 64px 24px;
  color: var(--color-text-white);
  text-align: center;
}
body.design-center .design-center-introTitle h1 { margin: 0; padding: 0; line-height: 1; }
body.design-center .design-center-introTitle img {
  display: block;
  width: min(31.7361vw, 914px);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
body.design-center .design-center-message_stage {
  min-height: 0;
  padding: 0;
}
body.design-center .design-center-message_viewport {
  min-height: 0;
  margin-top: 0;
  padding: 80px 0;
}
body.design-center .design-center-introScene { position: relative; z-index: 2; background: #000; }
body.design-center .design-center-introStage { position: relative; isolation: isolate; }
body.design-center .design-center-introStage .design-center-message_media { z-index: -1; background: transparent; }
body.design-center .design-center-introStage .design-center-mission {
  min-height: 0;
  margin: 0;
  padding: 120px 24px;
}
body.design-center .design-center-content {
  z-index: 2;
  margin-top: 0;
  background: #fff url("../img/top-bg3-3.webp") center top / 100% auto no-repeat;
}
body.design-center.is-design-center-intro-ready .common-main { isolation: isolate; }
body.design-center.is-design-center-intro-ready [data-design-center-hero] {
  position: fixed;
  inset: 0;
  height: var(--design-center-intro-height);
  min-height: 0;
  z-index: 0;
}
body.design-center.is-design-center-intro-ready .common-message {
  z-index: 1;
  padding-top: var(--design-center-intro-height);
  background: transparent;
  pointer-events: none;
}
body.design-center.is-design-center-intro-ready .design-center-message_viewport {
  padding-top: 0;
  padding-bottom: calc(var(--design-center-intro-height) + var(--design-center-statement-extra));
}
body.design-center.is-design-center-intro-ready [data-message-content] {
  transform: translateY(var(--design-center-statement-shift, 0px));
}
body.design-center.is-design-center-intro-ready .design-center-introTitle {
  position: fixed;
  top: 50%;
  right: 0;
  left: 0;
  padding: 0 24px;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s linear;
}
body.design-center.is-design-center-intro-ready .design-center-introTitle.is-visible {
  opacity: 1;
  transition-duration: 0.5s;
}
body.design-center.is-design-center-intro-ready .design-center-introScene {
  height: var(--design-center-intro-scene-height);
  background: transparent;
}
body.design-center.is-design-center-intro-ready .design-center-introStage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--design-center-intro-stage-height);
  background: #000 url("../img/top-bg3-3.webp") center var(--design-center-intro-art-top) / 100% auto no-repeat;
}
body.design-center.is-design-center-intro-ready .design-center-content {
  background-position: center calc(-1 * var(--design-center-intro-art-tail));
}
body.design-center.is-design-center-intro-ready .design-center-introStage .design-center-mission {
  position: absolute;
  top: var(--design-center-intro-mission-top);
  right: 0;
  left: 0;
  padding: 0 24px;
}
body.design-center.is-design-center-intro-ready .design-center-mission_inner {
  opacity: 0;
  transition: opacity 0.5s linear;
}
body.design-center.is-design-center-intro-ready .design-center-mission_inner.is-visible { opacity: 1; }
body.design-center.is-design-center-hero-covered [data-design-center-hero] { visibility: hidden; }
@media (max-width: 63.999em) {
  body.design-center .design-center-introTitle img { width: 80vw; }
  body.design-center .design-center-content { background-position: center top; }
  body.design-center .design-center-introStage .design-center-mission { padding: 80px 24px; }
  body.design-center.is-design-center-intro-ready .design-center-introStage .design-center-mission { padding: 0 24px; }
}
@media print {
  body.design-center .design-center-introTitle { color: inherit; padding: 24px; }
  body.design-center .design-center-introTitle img { filter: brightness(0); }
  body.design-center .design-center-introScene,
  body.design-center .design-center-content { background: #fff; }
  body.design-center .design-center-introStage .design-center-mission { padding: 48px 24px; }
}
/* The mobile NEWS rows stay at the bottom after moving H1 out of the hero. */
body.design-center [data-design-center-hero] { display: flex; flex-direction: column; justify-content: flex-end; }
/* Timed pin release changes only the scene's remaining space, never the scroll anchor. */
body.design-center.is-design-center-intro-ready .common-main { overflow-anchor: none; }
@media print {
  /* Print layout cannot depend on a requestAnimationFrame after beforeprint. */
  body.design-center.is-design-center-intro-ready [data-design-center-hero] {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    visibility: visible !important;
  }
  body.design-center.is-design-center-intro-ready .common-message { padding-top: 0; }
  body.design-center.is-design-center-intro-ready .design-center-message_viewport { padding-block: 0; }
  body.design-center.is-design-center-intro-ready [data-message-content] { transform: none; }
  body.design-center.is-design-center-intro-ready .design-center-introTitle {
    position: relative;
    inset: auto;
    padding: 24px;
    transform: none;
    opacity: 1;
    transition: none;
  }
  body.design-center.is-design-center-intro-ready .design-center-introScene,
  body.design-center.is-design-center-intro-ready .design-center-introStage {
    position: relative !important;
    top: auto !important;
    height: auto;
    background: #fff;
  }
  body.design-center.is-design-center-intro-ready .design-center-introStage .design-center-mission {
    position: relative;
    inset: auto;
    padding: 48px 24px;
  }
  body.design-center.is-design-center-intro-ready .design-center-mission_inner { opacity: 1; transition: none; }
}
/* Preserve NEWS timing/layout while a foreground STATEMENT line passes over it. */
body.design-center .design-center-heroNewsArea.is-statement-overlap { visibility: hidden; }

/* Text reveal layers do not change the source text flow, fonts or SVG artwork. */
body.design-center .design-center-revealChar { position: relative; display: inline; }
body.design-center .design-center-revealImageHost { position: relative; }
body.design-center .design-center-revealImage { position: absolute; display: block; pointer-events: none; }
body.design-center .design-center-revealImage[hidden] { display: none; }
body.design-center .design-center-revealSlice { position: absolute; inset: 0; display: block; }
/* Intro owns the hold and exit; its children now own the entrance animation. */
body.design-center.is-design-center-intro-ready .design-center-introTitle[data-design-center-reveal-ready].is-visible { transition-duration: 0s; }
body.design-center.is-design-center-intro-ready .design-center-mission_inner[data-design-center-reveal-ready] { transition: none; }
@media (prefers-reduced-motion: reduce), print {
  body.design-center .design-center-revealChar { opacity: 1 !important; top: 0 !important; }
  body.design-center .design-center-revealImage { display: none !important; }
  body.design-center [data-design-center-reveal-ready] img:not(.design-center-revealImage img),
  body.design-center [data-design-center-reveal-ready] [data-design-center-text-mask] { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.design-center .design-center-story_image,
  body.design-center .design-center-story_copy { transition: none; }
}