/* IAB公開ページだけのスクロールナビ。初期寸法とJSなしの通常フローを保持。
 * 設定メモ：現役：TOPと下層の共通ナビ。navigation.jsの状態class／slot高さと連動する。寸法変更時は初期フロー、固定時、JS無効時、anchorの可視性をまとめて確認する。subnav.cssと役割を重ねない。
 */
body[data-design-center-navigation]:not(.design-center) .common-breadcrumb .common-breadcrumb_inner { padding-bottom: 0; }
body[data-design-center-navigation] .design-center-navigationSlot.common-breadcrumb_inner {
  box-sizing: border-box; max-width: none; padding-top: 12px; padding-inline: 0; margin-top: 0;
}
body[data-design-center-navigation] .design-center-navigationSlot nav { margin-top: 0; }
/* 公開10ページのローカルナビはTOP基準の寸法・書体を共有。位置と配色は各ページを維持。 */
body[data-design-center-navigation] {
  --dc-local-nav-font-family: Roboto, "Noto Sans JP", sans-serif;
  --dc-local-nav-font-weight: 400;
  --dc-local-nav-font-size: 14px;
  --dc-local-nav-line-height: 1.6;
  --dc-local-nav-letter-spacing: .08em;
  --dc-local-nav-gap: 32px;
  --dc-local-nav-padding-block: 8px;
  --dc-local-nav-min-height: 60px;
  --dc-local-nav-control-height: 44px;
}
/* 初期/fixedともホームの左端と同じ共通gutter。全幅背景・遮蔽面は縮めない。 */
body[data-design-center-navigation] :is(nav[data-design-center-subnav], .design-center-heroNav) {
  box-sizing: border-box; display: flex; flex-wrap: nowrap; justify-content: flex-start;
  padding: var(--dc-local-nav-padding-block) var(--space-gutter);
  min-height: var(--dc-local-nav-min-height); gap: var(--dc-local-nav-gap);
  font-family: var(--dc-local-nav-font-family); font-weight: var(--dc-local-nav-font-weight);
  font-size: var(--dc-local-nav-font-size); line-height: var(--dc-local-nav-line-height);
  letter-spacing: var(--dc-local-nav-letter-spacing); font-kerning: normal;
}
/* 共通transition:allによるbreakpoint間の文字寸法補間を避け、hoverの色変化は残す。 */
body[data-design-center-navigation] :is(nav[data-design-center-subnav], .design-center-heroNav) a {
  position: relative; display: inline-flex; align-items: center; flex-shrink: 0; min-height: var(--dc-local-nav-control-height);
  color: inherit; font: inherit; letter-spacing: inherit; white-space: nowrap;
  /* 共通mainのhover/focusを含めnative下線を表示しない。 */
  text-decoration: none !important;
  opacity: 1; transition-duration: .3s; transition-timing-function: ease;
  transition-property: color, background-color, border-color, opacity, box-shadow, outline-color;
}
/* ローカルナビは下線なし。hover/currentのopacityとキーボード輪郭は保持。 */
@media (hover: hover) {
  body[data-design-center-navigation] :is(nav[data-design-center-subnav], .design-center-heroNav) a:hover { opacity: .5; }
}
body[data-design-center-navigation]:not(.design-center) :is(nav[data-design-center-subnav], .design-center-heroNav) a:is([aria-current="page"], [aria-current="true"], [aria-current="location"]) { opacity: .5; }
@media (prefers-reduced-motion: reduce), print {
  body[data-design-center-navigation] :is(nav[data-design-center-subnav], .design-center-heroNav) a { transition: none; }
}
@media (min-width: 1024px) {
  body[data-design-center-navigation] { --dc-local-nav-font-size: 16px; }
}
@media (max-width: 1023px) {
  body[data-design-center-navigation] {
    --dc-local-nav-gap: 24px; --dc-local-nav-padding-block: 4px; --dc-local-nav-min-height: 52px;
  }
}
@media (max-width: 639px) {
  body[data-design-center-navigation] { --dc-local-nav-gap: 8px; }
}
/* 調整メモ：ローカルナビは479px以下12px／倍率1.6、480〜1023px14px／1.6、1024px以上16px／1.6。高さ・gapの変更はJS初期slot計測とも照合。 */
@media (max-width: 479px) {
  body[data-design-center-navigation] { --dc-local-nav-font-size: 12px; }
}
body.is-design-center-navigation-ready #js-common-header {
  position: fixed !important; top: 0 !important; left: 0; right: 0; width: 100%;
  transform: translate3d(0, var(--navigation-shift, 0px), 0) !important;
  translate: none !important; transition: transform var(--navigation-duration, 200ms) var(--navigation-easing, ease) !important;
}
body.is-design-center-navigation-ready .common-breadcrumb {
  position: fixed; top: var(--navigation-header-height); left: var(--navigation-left, 0px); right: auto; width: var(--navigation-width, 100%);
  transform: translate3d(0, var(--navigation-shift, 0px), 0);
  transition: transform var(--navigation-duration, 200ms) var(--navigation-easing, ease); z-index: 8;
}
body.is-design-center-navigation-ready :is(nav[data-design-center-subnav], .design-center-heroNav) {
  box-sizing: border-box; position: fixed; top: var(--navigation-top); left: var(--navigation-left); right: auto; width: var(--navigation-width);
  margin: 0; background: transparent; z-index: 9;
  transition: top var(--navigation-duration, 200ms) var(--navigation-easing, ease);
}
body.is-design-center-navigation-ready .design-center-heroNavSlot { z-index: 9; }
body.is-design-center-navigation-ready .common-main [id] { scroll-margin-top: calc(var(--navigation-bottom, 0px) + 24px); }
body.design-center #js-common-header.is-design-center-interacting,
body.design-center #js-common-header.is-design-center-interacting :is(.common-header_title, .common-header_topSp, .common-header_grid, .common-header_main::before) { background-color: #fff !important; }
body.design-center #js-common-header.is-design-center-interacting .common-header_logo img { filter: none !important; }
/* nativeのゴムバンド中もロゴをページと一緒に動かす。最上部ではviewport固定を使わない。 */
body.is-design-center-navigation-ready.is-design-center-navigation-at-top #js-common-header {
  position: absolute !important; transform: none !important; transition: none !important;
}
body.is-design-center-navigation-ready.is-design-center-navigation-at-top .common-breadcrumb {
  position: absolute; transform: none; transition: none;
}
body.is-design-center-navigation-ready.is-design-center-navigation-at-top :is(nav[data-design-center-subnav], .design-center-heroNav) {
  position: static; top: auto; left: auto; right: auto; width: auto; transition: none;
}
body.is-design-center-navigation-ready.is-design-center-navigation-at-top:not(.design-center) #js-common-header { position: relative !important; }
body.is-design-center-navigation-ready.is-design-center-navigation-at-top:not(.design-center) .common-breadcrumb { position: static; width: auto; }
body.is-design-center-navigation-ready.is-design-center-navigation-at-top .design-center-headerSpace { height: 0 !important; }
body.is-design-center-navigation-ready.is-design-center-navigation-at-top :is(.design-center-breadcrumbSpace, .design-center-navigationSlot) { height: auto !important; }
/* TOPだけ、位置の200msとhover配色の300msを独立させる。hover配色ではheader全体のopacityや位置を変更しない。 */
body.design-center.is-design-center-navigation-ready #js-common-header {
  --header-color-duration: 0ms;
  transition: transform var(--navigation-header-duration, var(--navigation-duration, 200ms)) var(--navigation-easing, ease),
    background-color var(--header-color-duration) ease, color var(--header-color-duration) ease !important;
}
body.design-center.is-design-center-navigation-ready #js-common-header.is-design-center-hover-color {
  --header-color-duration: var(--header-hover-duration, 300ms);
}
body.design-center.is-design-center-navigation-ready.is-design-center-navigation-at-top #js-common-header {
  --navigation-header-duration: 0ms;
}
/* document配置を保持した復帰。!importantの既存transformへ専用値を渡し、WAAPIとは競合させない。 */
body.is-design-center-navigation-ready.is-design-center-navigation-returning :is(#js-common-header, .common-breadcrumb) {
  transform: var(--navigation-return-transform) !important;
  opacity: var(--navigation-return-opacity, 1) !important;
  transition: transform var(--navigation-return-duration, 200ms) var(--navigation-easing, ease),
    opacity var(--navigation-return-duration, 200ms) var(--navigation-easing, ease) !important;
}
body.design-center.is-design-center-navigation-ready.is-design-center-navigation-returning #js-common-header {
  transition: transform var(--navigation-return-duration, 200ms) var(--navigation-easing, ease),
    opacity var(--navigation-return-duration, 200ms) var(--navigation-easing, ease),
    background-color var(--header-color-duration) ease, color var(--header-color-duration) ease !important;
}
/* 最上部からのSP展開中はfixedメニューの基準をviewportに戻す。退避中の状態は変えない。 */
body.design-center.is-design-center-navigation-ready:not(.is-design-center-navigation-away) #js-common-header:not(.-disabled)[aria-expanded="true"] {
  --navigation-header-duration: 0ms;
  transform: none !important;
}
body.design-center.is-design-center-navigation-ready #js-common-header :is(
  .common-header_title, .common-header_topSp, .common-header_grid,
  .common-mainMenu, .common-subMenu, a, button, input,
  .common-mainMenu_inner, .common-mainMenu_icon, .common-lang_label, .common-lang_icon,
  .common-searchPc_search, .common-spButton_button) {
  transition: background-color var(--header-color-duration) ease,
    color var(--header-color-duration) ease, border-color var(--header-color-duration) ease !important;
}
/* 共通SPメニューの横移動と言語アイコンの回転は、配色の即時解除時も既存時間を維持。 */
body.design-center.is-design-center-navigation-ready #js-common-header :is(.common-header_grid, .common-lang_icon) {
  transition: transform var(--anim-duration) var(--anim-easing),
    background-color var(--header-color-duration) ease,
    color var(--header-color-duration) ease, border-color var(--header-color-duration) ease !important;
}
body.design-center.is-design-center-navigation-ready #js-common-header :is(.common-header_title, .common-header_main)::before,
body.design-center.is-design-center-navigation-ready #js-common-header .common-lang_btn::before,
body.design-center.is-design-center-navigation-ready #js-common-header .common-lang_btn::after {
  transition: background-color var(--header-color-duration) ease, border-color var(--header-color-duration) ease !important;
}
body.design-center.is-design-center-navigation-ready #js-common-header input::placeholder {
  transition: color var(--header-color-duration) ease !important;
}
body.design-center.is-design-center-navigation-ready #js-common-header .common-header_logo img {
  transition: filter var(--header-color-duration) ease !important;
}
body.design-center.is-design-center-navigation-ready #js-common-header .common-mainMenu_bg {
  transition: background-color var(--header-color-duration) ease,
    border-color var(--header-color-duration) ease, opacity var(--header-color-duration) ease !important;
}
@media (prefers-reduced-motion: reduce), print {
  body.design-center.is-design-center-navigation-ready #js-common-header.is-design-center-hover-color {
    --header-color-duration: 0ms;
  }
}
@media print {
  body[data-design-center-navigation] :is(.design-center-headerSpace, .design-center-breadcrumbSpace) { height: auto !important; }
  body[data-design-center-navigation] :is(#js-common-header, .common-breadcrumb, nav[data-design-center-subnav], .design-center-heroNav) { position: static !important; transform: none !important; width: auto !important; transition: none !important; }
  body[data-design-center-navigation] .design-center-navigationSlot { height: auto !important; }
}

/* corporate共通パンくずの寸法・書体・リンク操作を継承し、TOPの暗い背景だけ白色へ。 */
body.design-center .common-breadcrumb:not(.is-light),
body.design-center .common-breadcrumb:not(.is-light) .common-breadcrumb_inner > ol > li,
body.design-center .common-breadcrumb:not(.is-light) .common-breadcrumb_inner > ol > li a { color: var(--color-text-white, #fff); }
body.design-center .common-breadcrumb:not(.is-light) .common-breadcrumb_inner > ol > li:not(:first-child)::before {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24" width="24" height="24"><path stroke="%23fff" stroke-width="2" stroke-linecap="round" fill="none" d="M10 7.25L15 12.25L10 17.25" /></svg>');
}

/* 入力方法はnavigation.jsの独立処理が更新する。pointer時もfocus位置・クリック・
 * hover装飾は変えない。共通CSSとIABのa/button/summaryのshadowはfocusリングのみ。
 * メニュー容器の恒常shadowは対象外とする。 */
body[data-design-center-navigation][data-design-center-input="pointer"] :is(a, button, summary):focus {
  outline: none !important;
  box-shadow: none !important;
}
/* goTopの1px白輪郭はfocusリングではなく常時装飾なのでpointer時も残す。 */
body.design-center[data-design-center-input="pointer"] .common-fixedButton > .common-goTop:focus {
  outline: 1px solid #fff !important;
  outline-offset: 0 !important;
}

/* SP/tabletの本文とナビはパンくずと同じ共通gutter（24px/40px）を参照する。 */
@media screen and (max-width: 1023px) {
  body[data-design-center-navigation] { --dc-local-nav-font-size: 14px; --dc-sp-gutter: var(--space-gutter, 24px); }
}

/* 全10ページで使える本文の両端揃え。最終行は行頭へ戻し、字体・余白は変更しない。 */
body[data-design-center-navigation] .design-center-textJustify { text-align: justify; text-align-last: start; }

/* 下層のローカルナビも本文・パンくずと同じgutterに揃える。 */
@media screen and (max-width: 1023px) {
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body:is(.design-center-aboutusPage, .design-center-careersPage, .design-center-storiesPage, .design-center-articlePage, .design-center-rebirthPage) nav[data-design-center-subnav] {
    padding-inline: var(--dc-sp-gutter, 40px);
  }
}

/* 公開ページのSPナビを共通間隔に揃える。小幅でも文字サイズは維持する。 */
@media screen and (max-width: 1023px) {
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body[data-design-center-navigation] { --dc-local-nav-gap: 24px; }
}
@media screen and (max-width: 359px) {
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body[data-design-center-navigation] { --dc-local-nav-gap: 14px; }
}