/* TOP4／下層3のHTML題字。未使用の旧題字SVG4点は削除済み。
 * PSD由来のRoboto300／tracking100＝.1em／kerning0。枠・margin・revealは外側見出しに残す。
 * 1440px 旧称ABOUT US実比較のY補正.684028pxをem化。末尾trackingは負marginで除去。
 * nav-maskは内側のtext面を通常どおり生成。字形指定は外側spanに置いて継承させる。 */
/* 基準サイズは単位なしpx数、字間はem。全7題字と末尾tracking除去が同時に連動する。 */
body[data-design-center-navigation] { --dc-title-size-base: 36; --dc-title-tracking: .1em; }
body[data-design-center-navigation] .design-center-titleText {
  --dc-title-font-size: calc(var(--dc-title-size-base) * 1px);
  --dc-title-baseline-offset: .0171007em;
  display: inline-block; flex: none; width: max-content; max-width: none;
  margin: 0 calc(-1 * var(--dc-title-tracking)) 0 0; padding: 0; border: 0;
  font-family: Roboto, sans-serif; font-size: var(--dc-title-font-size); font-weight: 300;
  font-kerning: none; letter-spacing: var(--dc-title-tracking); line-height: 1; white-space: nowrap;
  color: var(--color-text, #1d242b); transform: translateY(var(--dc-title-baseline-offset));
}
/* FAQはQ descenderを含む実比較Y -1.731011px / 40px。#fffefeは元SVG再現の意図的な色例外。 */
body.design-center .design-center-titleText--faq { --dc-title-baseline-offset: -.043275275em; color: #fffefe; }
body:is(.design-center-aboutusPage, .design-center-storiesPage, .design-center-careersPage) .design-center-titleText { --dc-title-font-size: calc(var(--dc-title-size-base) * var(--dc-page-lead-title-scale, 1) * 1px); }
@media (min-width: 1024px) {
  body.design-center .design-center-titleText { --dc-title-font-size: calc(100vw * var(--dc-title-size-base) / 1440); }
}

/* 下層H1は左寄せのまま旧imgと同じ内枠を置く。字形は比較fixtureと同じ中央配置で
 * 先頭sidebearing差を枠の左右へ分配し、既存幅・高さ・scaleを維持する。 */
body:is(.design-center-aboutusPage, .design-center-storiesPage, .design-center-careersPage) .design-center-titleFrame {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: calc(var(--dc-page-lead-title-width) * var(--dc-page-lead-title-scale));
  height: calc(var(--dc-page-lead-title-image-height) * var(--dc-page-lead-title-scale));
}
/* 短縮後のABOUT／STORIESは文字幅に合わせて左端を維持する。高さ・scaleとCAREERSの枠は従来どおり。 */
body:is(.design-center-aboutusPage, .design-center-storiesPage) .design-center-titleFrame { width: max-content; }

/* PC下層は実文字のline-heightに内枠を合わせる。外側48px枠・左右位置・SP内枠は維持。 */
@media (min-width: 1024px) {
  body:is(.design-center-aboutusPage, .design-center-storiesPage, .design-center-careersPage) .design-center-titleFrame { height: calc(var(--dc-title-size-base) * 1px); }
}

/* screenのTOPだけ：1024〜1439は従来vw、1440から緩やかに1.2倍まで拡大。
 * F=題字px、f=More px、G=可視gap px。SP・print・下層は上の既存設定を維持する。 */
@media screen and (min-width: 1024px) {
  body.design-center {
    --dc-top-title-size: calc(100vw * var(--dc-title-size-base) / 1440);
    --dc-top-more-size: 14px;
    --dc-top-visible-gap: 25px;
  }
  body.design-center .design-center-titleText { --dc-title-font-size: var(--dc-top-title-size); }
}
@media screen and (min-width: 1440px) {
  body.design-center {
    --dc-top-title-size: clamp(calc(var(--dc-title-size-base) * 1px), calc(var(--dc-title-size-base) * 1px + (100vw - 1440px) * var(--dc-title-size-base) / 2400), calc(var(--dc-title-size-base) * 1.2px));
    --dc-top-more-size: clamp(14px, calc(14px + (100vw - 1440px) * 14 / 2400), 16.8px);
    --dc-top-visible-gap: clamp(25px, calc(25px + (100vw - 1440px) * 25 / 2400), 30px);
  }
}

/* SP題字は文字基準。PC/printの旧内枠とscaleには触れない。 */
@media screen and (max-width: 1023px) {
  body.design-center .design-center-titleText { --dc-title-font-size: 25px; }
  body:is(.design-center-aboutusPage, .design-center-storiesPage, .design-center-careersPage) .design-center-titleText { --dc-title-font-size: var(--dc-sp-page-title-size); }
  body:is(.design-center-aboutusPage, .design-center-storiesPage, .design-center-careersPage) .design-center-titleFrame { width: max-content; height: var(--dc-sp-page-title-size); }
}