/* TOPの3導線。題字枠は1440px時34.444444px、screen PCは題字Fに連動し1920pxで拡大上限。
 * 設定メモ：現役：TOPのABOUT／STORIES／CAREERS導線とFAQ。hero.cssより後の最終上書き。screen768px以上は50:50構図、FAQ見出しはfaq.jsの動的計測とも連動する。記事・下層本文には適用しない。
 */
body.design-center .design-center-lower { --top-title-height: 34.444444px; margin: 0; padding: 0; background: #fff; }
body.design-center .design-center-topSrOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.design-center .design-center-topSection { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; background: #fff; }
body.design-center .design-center-topPhoto { min-width: 0; aspect-ratio: 1; overflow: hidden; }
body.design-center .design-center-topPhoto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 調整メモ：padding64px 24px／min-height240pxは小幅パネルの基底。screen PC1024以上は後方の2列構図と可視gap補正式を優先。基底gap16pxは小幅・印刷用。 */
body.design-center .design-center-topPanel { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; min-width: 0; min-height: 240px; padding: 64px 24px; box-sizing: border-box; }
/* 題字とMoreだけを一つの操作枠へ。小幅では従来どおり題字枠がpadding内を越えて中央に置かれる。 */
body.design-center a.design-center-topPanelLink {
  display: flex; flex-direction: column; align-items: center; gap: inherit; width: max-content;
  color: inherit; text-decoration: none; opacity: 1; filter: opacity(1); transition: filter .3s ease;
}
body.design-center a.design-center-topPanelLink:hover { opacity: 1; text-decoration: none; }
/* 子Moreの独立revealは残し、hover減光は外anchorの一回だけにする。 */
body.design-center a.design-center-topPanelLink > .design-center-topMore:hover { filter: opacity(1); }
@media (hover: hover) {
  body.design-center a.design-center-topPanelLink:hover { filter: opacity(.5); }
}
@media (prefers-reduced-motion: reduce), print {
  body.design-center a.design-center-topPanelLink { transition: none; }
}
body.design-center :is(.design-center-topTitle, #design-center-faq-title) { width: var(--top-title-width); height: var(--top-title-height); margin: 0; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
body.design-center .design-center-topTitle::before, body.design-center .design-center-topTitle::after { content: none; }
body.design-center .design-center-topTitleImage { display: block; width: 100%; height: 100%; object-fit: contain; }
body.design-center .design-center-topSection--aboutus { --top-title-width: 212.777778px; }
body.design-center .design-center-topSection--stories { --top-title-width: 282.222222px; }
body.design-center .design-center-topSection--careers { --top-title-width: 191.111111px; }
body.design-center .design-center-topMore { display: flex; width: fit-content; }

/* lowerLinkのem比率・可視中心補正はexternal-link.cssの変数へ集約。親のfade用transformは変更しない。 */
body.design-center .design-center-faq { --top-title-width: 76.666667px; display: grid; grid-template-columns: 1fr; gap: 48px; margin: 0; padding: 80px 24px; background: #000; color: var(--color-text-white); box-sizing: border-box; }
body.design-center #design-center-faq-title { justify-self: center; align-self: center; }
body.design-center .design-center-faq_list { width: auto; margin: 0; padding: 0; min-width: 0; }
body.design-center .design-center-faq_item { border: 0; }
body.design-center .design-center-faq_item + .design-center-faq_item { margin-top: 0; }
body.design-center .design-center-faq_item summary { align-items: baseline; gap: 12px; min-height: 0; padding: 20px 44px 20px 0; border-radius: 0; background: transparent; color: inherit; font-size: 16px; font-weight: 400; line-height: 1.5; }
body.design-center .design-center-faq_question-label { flex-shrink: 0; font: 400 16px/1.5 Roboto, sans-serif; }
body.design-center .design-center-faq_item summary::after,
body.design-center .design-center-faq_item[open] summary::after { content: none; }
body.design-center .design-center-faq_icon { position: absolute; right: 4px; top: 22px; width: 20px; height: 20px; color: inherit; }
body.design-center .design-center-faq_icon::before,
body.design-center .design-center-faq_icon::after { content: ""; position: absolute; background: currentColor; }
body.design-center .design-center-faq_icon::before { left: 1.5px; top: 9px; width: 17px; height: 2px; }
body.design-center .design-center-faq_icon::after { left: 9px; top: 1.5px; width: 2px; height: 17px; transform: scaleY(1); transform-origin: center; transition: transform 300ms ease; }
body.design-center .design-center-faq_item[open]:not([data-design-center-faq-ready]) .design-center-faq_icon::after,
body.design-center .design-center-faq_item[data-design-center-faq-expanded="true"] .design-center-faq_icon::after { transform: scaleY(0); }
@media (prefers-reduced-motion: reduce), print {
  body.design-center .design-center-faq_icon::after { transition: none; }
}
body.design-center .design-center-faq_answer { padding: 0 24px 24px; border-radius: 0; background: transparent; color: inherit; }

@media (min-width: 1024px) {
  body.design-center .design-center-lower { --top-title-height: calc(100vw * 34.444444 / 1440); }
  body.design-center .design-center-topSection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.design-center .design-center-topSection--aboutus { --top-title-width: calc(100vw * 212.777778 / 1440); }
  body.design-center .design-center-topSection--stories { --top-title-width: calc(100vw * 282.222222 / 1440); }
  body.design-center .design-center-topSection--careers { --top-title-width: calc(100vw * 191.111111 / 1440); }
  body.design-center .design-center-topSection:not(.design-center-topSection--stories) .design-center-topPhoto { grid-column: 2; grid-row: 1; }
  body.design-center .design-center-topSection:not(.design-center-topSection--stories) .design-center-topPanel { grid-column: 1; grid-row: 1; }
  body.design-center .design-center-faq { --top-title-width: calc(100vw * 76.666667 / 1440); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; align-items: start; min-height: 50vw; padding: 12.5vw 0; }
  body.design-center .design-center-faq_list { padding-right: 14%; }
  body.design-center .design-center-faq[data-design-center-faq-title-ready] > #design-center-faq-title { align-self: start; margin-block-start: var(--faq-title-offset, 0px); }
  body.design-center .design-center-heroCopy { font-size: 16px; }
}
/* 可視外接中心だけを補正。fade/maskのtransformと操作領域は維持する。 */
@media screen and (min-width: 1024px) {
  /* 可視glyphからgap/中心へ補正。Moreは18.5/14 em丸と光学offset.076em。
   * F題字/f More/G可視gapの設定元はtitle.css。操作枠44pxは維持する。 */
  body.design-center .design-center-lower { --top-title-height: calc(var(--dc-top-title-size) * 34.444444 / 40); }
  body.design-center .design-center-topSection--aboutus { --top-title-width: calc(var(--dc-top-title-size) * 212.777778 / 40); }
  body.design-center .design-center-topSection--stories { --top-title-width: calc(var(--dc-top-title-size) * 282.222222 / 40); }
  body.design-center .design-center-topSection--careers { --top-title-width: calc(var(--dc-top-title-size) * 191.111111 / 40); }
  body.design-center .design-center-faq { --top-title-width: calc(var(--dc-top-title-size) * 76.666667 / 40); }
  body.design-center .design-center-topMore { --dc-round-link-font-size: var(--dc-top-more-size); }
  body.design-center .design-center-topPanel {
    gap: calc(var(--dc-top-visible-gap) - var(--dc-top-title-size) * .06189235 - (22px - var(--dc-top-more-size) * (18.5 / 14 / 2 - .076)));
    --top-visible-center-offset: calc(((22px - var(--dc-top-more-size) * (18.5 / 14 / 2 + .076)) - var(--dc-top-title-size) * .06875) / 2);
  }
  body.design-center .design-center-topPanelLink { position: relative; top: var(--top-visible-center-offset); }
  body.design-center .design-center-faq[data-design-center-faq-title-ready] { min-height: var(--faq-base-height); padding-block: var(--faq-closed-padding); }
  /* FAQ黒面の下からSNS上端まで196px。footer本来のpadding/borderは変更せず内寸を引く。 */
  body.design-center .design-center-lower { padding-bottom: calc(196px - var(--dc-pc-footer-sns-inset)); }
}
@media print {
  body.design-center .design-center-faq { display: block; background: #000; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  body.design-center .design-center-faq[data-design-center-faq-title-ready] > #design-center-faq-title { margin-block-start: 0; }
  body.design-center .design-center-faq_list { padding: 0; margin-top: 32px; }
}
/* ABOUT以降のGナビは既存の白い読み取り面を維持。 */
body.design-center .common-header.is-lower-solid,
body.design-center .common-header.is-lower-solid :is(.common-header_title, .common-header_topSp, .common-header_grid, .common-header_main::before) { background: #fff !important; }
body.design-center .common-header.is-lower-solid { opacity: 1 !important; }

@media (max-width: 1023px) {
  body.design-center .design-center-topPanel,
  body.design-center .design-center-faq { padding-inline: 40px; }
}

/* TOPはtokens.cssを読み込まないため、SNS内寸をこの読込済みCSSで定義する。 */
@media screen and (min-width: 1024px) {
  body.design-center { --dc-pc-footer-sns-inset: calc(var(--space-7xl, 56px) + 1px); }
}
@media screen and (min-width: 1024px) and (min-width: 75em) {
  body.design-center { --dc-pc-footer-sns-inset: calc(var(--space-8xl, 64px) + 1px); }
}

/* SPは写真と白パネルを正方形へ。内容が収まらない時は自然高を優先。 */
@media screen and (max-width: 1023px) {
  body.design-center .design-center-lower { --top-title-height: 25px; }
  body.design-center .design-center-topPanel { aspect-ratio: 1; min-height: min-content; padding-inline: var(--dc-sp-gutter); gap: 0; }
  body.design-center .design-center-topTitle { width: max-content; font-size: 25px; }
  body.design-center .design-center-topPanelLink { position: relative; top: 4px; }
  body.design-center .design-center-faq { padding-inline: var(--dc-sp-gutter); }
  body.design-center .design-center-faq_item summary,
  body.design-center .design-center-faq_question-label { font-size: 14px; }
  body.design-center .design-center-faq_answer p { font-size: 12px; line-height: 1.9; }
}

/* tabletは写真/白パネルを50:50へ。SP文字下限と固定余白を保ち、長いFAQは自然高で伸ばす。 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  body.design-center .design-center-topSection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.design-center .design-center-topSection:not(.design-center-topSection--stories) .design-center-topPhoto { grid-column: 2; grid-row: 1; }
  body.design-center .design-center-topSection:not(.design-center-topSection--stories) .design-center-topPanel { grid-column: 1; grid-row: 1; }
  body.design-center .design-center-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; align-items: start; min-height: 384px; padding: 64px 0; }
  body.design-center .design-center-faq_list { padding-right: 40px; }
  body.design-center .design-center-faq[data-design-center-faq-title-ready] > #design-center-faq-title { align-self: start; margin-block-start: var(--faq-title-offset, 0px); }
}