/*
 * Brand materials (/brand/film/, /brand/logo/, /brand/graphic-system/, /brand/guidelines/).
 * Figma 区画16（988:8377）: PC 1280 is the base, PC 1080 is 768–1199px and SP 375 is up to 767px.
 * Labels and the short rule beside them are Ink (not red). Red fills only the header contact,
 * one primary download per page and the contact button at the bottom.
 */
.cx-brand-page { --cx-brand-line-dark: #3a3a42; --cx-brand-muted-dark: #babac1; }

/*
 * The Figma copy was broken by phrase in Chromium: wrap the same way (lang="ja" is set on .cx-brand)
 * instead of fixing every line. Where the real font wraps differently from the Figma copy, the copy carries
 * a break that applies only at that width (.cx-brand-br-pc / -w / -tab / -sp).
 */
.cx-brand { word-break: auto-phrase; line-break: strict; overflow-wrap: anywhere; }
.cx-brand-sp, .cx-brand-br-sp, .cx-brand-br-tab, .cx-brand-br-w { display: none; }
.cx-brand-frame { border: 1px solid var(--cx-rule); }

/* Hero (the shared .cx-page-hero) and the materials navigation */
.cx-brand-hero .cx-page-hero__description { max-width: 640px; }
.cx-brand-nav { color: #fff; background: var(--cx-ink); }
.cx-brand-nav__inner { display: flex; flex-direction: column; gap: 16px; }
.cx-brand-nav__label { color: var(--cx-brand-muted-dark); font-size: 14px; font-weight: 700; line-height: 20px; }
.cx-brand-nav__tabs { display: flex; list-style: none; border-top: 1px solid var(--cx-brand-line-dark); }
.cx-brand-nav__tabs > li { flex: 1 1 0; min-width: 0; }
.cx-brand-nav__tab { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 20px; color: #fff; font-size: 16px; font-weight: 700; line-height: 24px; }
.cx-brand-nav__no { flex: 0 0 auto; color: var(--cx-brand-muted-dark); font: 700 12px/16px Archivo, sans-serif; }
.cx-brand-nav__tab[aria-current="page"] { color: var(--cx-text); background: #fff; }
.cx-brand-nav__tab[aria-current="page"] .cx-brand-nav__no { color: var(--cx-muted); }
.cx-brand-nav__tab:not([aria-current]):hover > span:last-child,
.cx-brand-nav__tab:not([aria-current]):hover > .cx-brand-pc { text-decoration: underline; text-underline-offset: 4px; }

/* Sections */
.cx-brand-section { color: var(--cx-text); background: #fff; }
.cx-brand-section--paper { background: var(--cx-paper); }
.cx-brand-section__inner { display: flex; flex-direction: column; gap: 56px; padding-top: 80px; padding-bottom: 80px; }
.cx-brand-heading { display: flex; flex-direction: column; gap: 24px; }
.cx-brand-eyebrow { display: flex; align-items: center; gap: 12px; color: var(--cx-ink); font: 700 12px/16px Archivo, sans-serif; white-space: nowrap; }
.cx-brand-eyebrow::before { content: ""; flex: 0 0 18px; height: 3px; background: currentColor; }
.cx-brand-heading h2 { font-size: 36px; font-weight: 700; line-height: 50px; }
.cx-brand-lead { max-width: 640px; font-size: 16px; line-height: 28px; }
.cx-brand-caption, .cx-brand-note { color: var(--cx-muted); font-size: 14px; line-height: 24px; }
.cx-brand-tag { display: inline-flex; flex: 0 0 auto; padding: 1px 4px; border: 1px solid var(--cx-ink); color: var(--cx-ink); font: 700 10px/16px Archivo, sans-serif; white-space: nowrap; }
.cx-brand-button { border-radius: 4px; }
.cx-brand-button--compact { min-height: 44px; padding-block: 10px; }
.cx-brand-pair { display: flex; gap: 24px; }
.cx-brand-pair > * { flex: 1 1 0; min-width: 0; }
.cx-brand-pair--top { align-items: flex-start; }

/* Usage scope and the other pages */
.cx-brand-end__inner { gap: 40px; }
.cx-brand-usage { display: flex; flex-direction: column; gap: 16px; padding: 32px; border: 1px solid var(--cx-rule); background: #fff; }
.cx-brand-usage__title { font-size: 20px; font-weight: 700; line-height: 30px; }
.cx-brand-usage__text { font-size: 16px; line-height: 28px; }
.cx-brand-related { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; border-top: 1px solid var(--cx-rule); }
.cx-brand-related__label { font-size: 14px; font-weight: 700; line-height: 20px; }
.cx-brand-related__links { display: flex; flex-wrap: wrap; gap: 12px 24px; list-style: none; }
.cx-brand-related__links > li { flex: 0 0 max(228px, calc((100% - 72px) / 4)); min-width: 0; }
.cx-brand-related__links .cx-button { width: 100%; }

/* Press contact: the current contact section with an Ink rule beside its label */
.cx-brand-press .cx-contact__label { color: var(--cx-ink); }
.cx-brand-press .cx-contact__label::before { background: var(--cx-ink); }
.cx-brand-press__mail { color: inherit; }
.cx-brand-press__mail:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Rows: an image or figure on the left, text on the right */
.cx-brand-rows { display: flex; flex-direction: column; gap: 40px; list-style: none; }
.cx-brand-expressions { gap: 48px; }
.cx-brand-row { display: flex; align-items: flex-start; gap: 24px; }
.cx-brand-row__media { flex: 0 0 calc((100% - 24px) / 2); width: calc((100% - 24px) / 2); height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #fff; }
.cx-brand-row__text { display: flex; flex: 1 1 0; flex-direction: column; gap: 12px; min-width: 0; }
.cx-brand-row__no { color: var(--cx-ink); font: 700 12px/16px Archivo, sans-serif; }
.cx-brand-row__title { font-size: 24px; font-weight: 700; line-height: 34px; }
.cx-brand-row__desc { font-size: 16px; line-height: 28px; }
.cx-brand-rule { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--cx-rule); font-size: 14px; }
.cx-brand-rule__label { font-weight: 700; line-height: 20px; }
.cx-brand-rule__text { color: var(--cx-muted); line-height: 24px; }

/* Label and value table (Corp / Service / Fact) */
.cx-brand-facts { width: 100%; max-width: 800px; border-top: 1px solid var(--cx-rule); }
.cx-brand-facts > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; padding-block: 24px; border-top: 1px solid var(--cx-rule); }
.cx-brand-facts dt { color: var(--cx-muted); font-size: 14px; font-weight: 700; line-height: 20px; }
.cx-brand-facts dd { font-size: 16px; line-height: 28px; }

/* Download cards */
.cx-brand-cards { display: flex; align-items: stretch; gap: 24px; }
.cx-brand-card { display: flex; flex: 1 1 0; flex-direction: column; gap: 16px; min-width: 0; padding: 32px; border: 1px solid var(--cx-rule); background: #fff; }
.cx-brand-card__preview { width: 100%; height: auto; aspect-ratio: 498 / 353; object-fit: cover; }
.cx-brand-card__preview--paper { display: flex; align-items: center; justify-content: center; background: var(--cx-paper); }
.cx-brand-card__meta { color: var(--cx-muted); font-size: 14px; line-height: 24px; }
.cx-brand-card__title { font-size: 24px; font-weight: 700; line-height: 34px; }
.cx-brand-card__desc { font-size: 16px; line-height: 28px; }
.cx-brand-card__spacer { flex: 1 0 1px; }
.cx-brand-cards--film .cx-brand-card__spacer { min-height: 8px; }
.cx-brand-card__button { width: 320px; max-width: 100%; }

/* Film */
.cx-brand-film { display: flex; flex-direction: column; gap: 12px; }
.cx-brand-video { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--cx-rule); background: #fff; }
.cx-brand-video > img, .cx-brand-video > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.cx-brand-video__play { position: absolute; left: 23px; bottom: 23px; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 4px; color: #fff; background: var(--cx-ink); font-size: 14px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.cx-brand-video__play:hover { background: var(--cx-text); }
.cx-brand-video__icon { flex: 0 0 10px; width: 10px; height: 12px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.cx-brand-timeline { display: flex; gap: 8px; list-style: none; }
.cx-brand-timeline > li { display: flex; flex: var(--cx-grow) 1 0; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 16px 0 0; border-top: 2px solid var(--cx-ink); }
.cx-brand-timeline__meta { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.cx-brand-timeline__no { color: var(--cx-ink); font: 700 12px/16px Archivo, sans-serif; }
.cx-brand-timeline__time { color: var(--cx-muted); font: 400 12px/16px Archivo, sans-serif; }
.cx-brand-timeline__name { font-size: 24px; font-weight: 700; line-height: 34px; }
.cx-brand-timeline__words { font-size: 14px; line-height: 24px; }
.cx-brand-scene__meta { display: flex; align-items: center; gap: 12px; }
.cx-brand-scene__time { color: var(--cx-muted); font-size: 14px; line-height: 24px; white-space: nowrap; }
.cx-brand-stills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 12px; padding: 0 31px; }
.cx-brand-stills img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cx-brand-files { display: flex; flex-direction: column; gap: 16px; }
.cx-brand-files__label, .cx-brand-notes__label { font-size: 14px; font-weight: 700; line-height: 20px; }
.cx-brand-files__list { list-style: none; border-top: 1px solid var(--cx-rule); }
.cx-brand-file { display: flex; align-items: center; gap: 24px; padding-block: 20px; border-bottom: 1px solid var(--cx-rule); }
.cx-brand-file__name { flex: 0 0 200px; font-size: 14px; font-weight: 700; line-height: 20px; }
.cx-brand-file__detail { flex: 1 1 0; min-width: 0; color: var(--cx-muted); font-size: 14px; line-height: 24px; }
.cx-brand-file__button { flex: 0 0 240px; }
.cx-brand-notes { display: flex; flex-direction: column; gap: 12px; }
.cx-brand-notes__list { display: flex; flex-direction: column; gap: 12px; max-width: 640px; list-style: none; font-size: 14px; line-height: 24px; }
.cx-brand-notes__list > li, .cx-brand-color__rules > li { display: flex; gap: 4px; }
.cx-brand-notes__list > li > span:first-child, .cx-brand-color__rules > li > span:first-child { flex: 0 0 auto; }

/* Logo */
.cx-brand-sample { display: flex; flex-direction: column; gap: 16px; }
.cx-brand-sample__panel { display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; }
.cx-brand-sample__panel--logo { height: 320px; }
.cx-brand-sample__panel--ink { background: var(--cx-ink); }
.cx-brand-sample__panel--lockup { height: 280px; }
/* Widths are the Figma heights × the SVG ratio, so the marks shrink inside narrow panels instead of being cut. */
.cx-brand-sample__logo { width: min(411.29px, calc(100% - 40px)); height: auto; }
.cx-brand-sample__lockup-h { width: min(402.91px, calc(100% - 40px)); height: auto; }
.cx-brand-sample__lockup-v { width: min(312.41px, calc(100% - 40px)); height: auto; }
.cx-brand-sample__caption { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.cx-brand-sample__caption strong { font-weight: 700; line-height: 20px; }
.cx-brand-sample__caption span { color: var(--cx-muted); line-height: 24px; }
.cx-brand-why { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; border-top: 1px solid var(--cx-rule); }
.cx-brand-why__title { font-size: 24px; font-weight: 700; line-height: 34px; }
.cx-brand-why__body { max-width: 640px; font-size: 16px; line-height: 28px; }
.cx-brand-kit { flex-direction: column; gap: 32px; }
.cx-brand-kit__logo { width: min(274.19px, calc(100% - 32px)); height: auto; }
.cx-brand-kit__row { display: flex; align-items: center; gap: 24px; }
.cx-brand-kit__tile { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid var(--cx-rule); background: #fff; }
.cx-brand-kit__tile img { width: 35.54px; height: 35.54px; }
.cx-brand-kit__lockup { width: 201.45px; min-width: 0; height: auto; }

/* X meaning: positions follow the X inside the logo (logo coordinates: X from 7.31% to 41.45%, centre 24.38% / 50.26%) */
.cx-brand-xmeaning { --h: min(160px, calc((100cqw - 48px) / 4.284234)); --top: 128px; --bracket: 28px; --leader: 64px; position: relative; overflow: hidden; height: 400px; background: var(--cx-paper); container-type: inline-size; }
.cx-brand-xmeaning__logo { position: absolute; top: var(--top); left: 50%; width: calc(var(--h) * 4.284234); height: var(--h); transform: translateX(-50%); }
.cx-brand-xmeaning__logo > img { width: 100%; height: 100%; }
.cx-brand-xmeaning__bracket { position: absolute; top: calc(var(--bracket) * -1); left: 7.3111%; width: 34.1364%; height: 8px; border: 1px solid var(--cx-ink); border-bottom: 0; }
.cx-brand-xmeaning__size { position: absolute; top: calc(var(--bracket) * -1 - 32px); left: 7.3111%; font-size: 14px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.cx-brand-xmeaning__half { position: absolute; top: calc(100% + 16px); color: var(--cx-muted); font-size: 20px; font-weight: 700; line-height: 28px; transform: translateX(-50%); }
.cx-brand-xmeaning__half--gt { left: 15.4922%; }
.cx-brand-xmeaning__half--lt { left: 33.268%; }
.cx-brand-xmeaning__dot { position: absolute; top: 50.2627%; left: 24.3793%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--cx-ink); }
.cx-brand-xmeaning__leader { position: absolute; top: calc(50.2627% + 3px); left: calc(24.3793% - 0.5px); width: 1px; height: calc(49.7373% - 3px + var(--leader)); background: var(--cx-ink); }
.cx-brand-xmeaning__leader-x { position: absolute; top: calc(100% + var(--leader)); left: calc(24.3793% - 0.5px); width: 48px; height: 1px; background: var(--cx-ink); }
.cx-brand-xmeaning__facing { position: absolute; top: calc(100% + var(--leader) - 10px); left: calc(24.3793% + 56px); display: flex; flex-direction: column; gap: 2px; font-size: 14px; white-space: nowrap; }
.cx-brand-xmeaning__facing strong { font-weight: 700; line-height: 20px; }
.cx-brand-xmeaning__facing span { color: var(--cx-muted); line-height: 24px; }

.cx-brand-dark { display: flex; flex-direction: column; gap: 12px; }
.cx-brand-dark__panel { display: flex; align-items: center; justify-content: center; gap: 120px; height: 200px; background: var(--cx-ink); }
.cx-brand-dark__h { width: 287.79px; height: auto; }
.cx-brand-dark__v { width: 208.27px; height: auto; }

/* Clear space: everything is measured from the logo box (2S = 0.378 × logo height, S = 0.1899 × logo height) */
.cx-brand-space { display: flex; flex-direction: column; gap: 12px; }
.cx-brand-space__panel { position: relative; overflow: hidden; height: 320px; background: #fff; container-type: inline-size; }
.cx-brand-space__logo { --h: min(96px, calc((100cqw - 24px) / 5.04)); --label: 15px; --label-size: 11px; --label-gap: 17px; position: absolute; top: 50%; left: 50%; width: calc(var(--h) * 4.284234); height: var(--h); transform: translate(-50%, -50%); }
.cx-brand-space__logo > img { position: relative; width: 100%; height: 100%; }
.cx-brand-space__area { position: absolute; inset: calc(var(--h) * -0.378); border: 1px dashed var(--cx-muted); }
.cx-brand-space__unit { position: absolute; top: calc(var(--h) * -0.378); left: calc(var(--h) * -0.378); display: flex; align-items: center; justify-content: center; width: calc(var(--h) * 0.378); height: calc(var(--h) * 0.378); color: var(--cx-muted); background: var(--cx-rule); font: 700 var(--label-size)/var(--label) Archivo, sans-serif; }
.cx-brand-space__bounds { position: absolute; inset: 0; border: 1px dashed var(--cx-rule); }
.cx-brand-space__measure { position: absolute; background: var(--cx-muted); }
.cx-brand-space__measure--right { top: 50%; left: 100%; width: calc(var(--h) * 0.378); height: 1px; }
.cx-brand-space__measure--bottom { top: 100%; left: 62.7%; width: 1px; height: calc(var(--h) * 0.378); }
.cx-brand-space__label { position: absolute; color: var(--cx-muted); font: 700 var(--label-size)/var(--label) Archivo, sans-serif; white-space: nowrap; }
.cx-brand-space__label--right { top: calc(50% - var(--label-gap)); left: calc(100% + var(--h) * 0.189); transform: translateX(-50%); }
.cx-brand-space__label--bottom { top: calc(100% + var(--h) * 0.189 - var(--label) / 2); left: calc(62.7% + 4px); }
.cx-brand-space__s { position: absolute; top: calc(100% + 4px); left: 0; width: calc(var(--h) * 0.1899); height: 1px; background: var(--cx-ink); }
.cx-brand-space__s::before, .cx-brand-space__s::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--cx-ink); }
.cx-brand-space__s::before { left: 0; }
.cx-brand-space__s::after { right: 0; }
.cx-brand-space__label--s { top: calc(100% - 3.5px); left: calc(var(--h) * 0.1899 + 4px); color: var(--cx-ink); }
.cx-brand-minimum { display: flex; flex-direction: column; gap: 24px; }
.cx-brand-minimum__item { display: flex; flex-direction: column; gap: 8px; }
.cx-brand-minimum__item + .cx-brand-minimum__item { padding-top: 24px; border-top: 1px solid var(--cx-rule); }
.cx-brand-minimum__item--symbol { gap: 12px; }
.cx-brand-minimum__label { color: var(--cx-muted); font-size: 14px; font-weight: 700; line-height: 20px; }
.cx-brand-minimum__value { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.cx-brand-minimum__number { font: 700 48px/56px Archivo, sans-serif; }
.cx-brand-minimum__unit { font: 700 20px/28px Archivo, sans-serif; }
.cx-brand-minimum__desc { font-size: 14px; line-height: 24px; }
.cx-brand-minimum__sample { display: flex; align-items: center; gap: 12px; }
.cx-brand-minimum__sample img { width: auto; height: 16px; }
.cx-brand-minimum__sample span, .cx-brand-minimum__symbols figcaption { color: var(--cx-muted); font-size: 12px; line-height: 20px; white-space: nowrap; }
.cx-brand-minimum__body { font-size: 14px; line-height: 24px; }
.cx-brand-minimum__symbols { display: flex; gap: 24px; }
.cx-brand-minimum__symbols figure { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cx-brand-minimum__tile { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1px solid var(--cx-rule); background: #fff; }
.cx-brand-minimum__tile--round { border-radius: 50%; }
.cx-brand-minimum__tile img { width: 40.62px; height: 40.62px; }
.cx-brand-donts { display: flex; flex-direction: column; gap: 32px; }
.cx-brand-donts__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; list-style: none; }
.cx-brand-dont { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cx-brand-dont img { width: 100%; height: auto; aspect-ratio: 211.2 / 87.1; object-fit: cover; }
.cx-brand-dont__caption { display: flex; align-items: flex-start; gap: 8px; }
.cx-brand-dont__text { font-size: 14px; font-weight: 700; line-height: 20px; }
.cx-brand-dont__caption--nosample .cx-brand-dont__text { font-weight: 400; line-height: 24px; }

/* Graphic system */
.cx-brand-o2f-panel, .cx-brand-card__preview--o2f { display: flex; align-items: center; justify-content: center; container-type: inline-size; }
.cx-brand-o2f { --x: 176px; --arrow: 40px; --gap: 24px; display: flex; align-items: center; justify-content: center; gap: var(--gap); }
.cx-brand-o2f__x { flex: 0 0 auto; width: min(var(--x), calc((100cqw - var(--arrow) - 2 * var(--gap) - 24px) / 2)); height: auto; aspect-ratio: 1; overflow: visible; }
.cx-brand-o2f__arrow { flex: 0 0 auto; width: var(--arrow); height: 12px; overflow: hidden; }
.cx-brand-type { display: flex; align-items: stretch; gap: 24px; }
.cx-brand-type__card { display: flex; flex: 1 1 0; flex-direction: column; gap: 16px; min-width: 0; padding: 32px; border: 1px solid var(--cx-rule); background: #fff; }
.cx-brand-type__label { color: var(--cx-muted); font-size: 14px; font-weight: 700; line-height: 20px; }
.cx-brand-type__name { font-size: 24px; font-weight: 700; line-height: 34px; }
.cx-brand-type__big { color: var(--cx-ink); font-size: 28px; font-weight: 700; line-height: 40px; }
.cx-brand-type__small { font-size: 16px; line-height: 28px; }
.cx-brand-type__card--en .cx-brand-type__big { font: 700 40px/48px Archivo, sans-serif; }
.cx-brand-type__card--en .cx-brand-type__small { font: 400 16px/24px Archivo, sans-serif; }
.cx-brand-formats { display: flex; align-items: flex-start; gap: 24px; }
.cx-brand-format { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cx-brand-format--wide { flex: 1.777778 1 0; }
.cx-brand-format--tall { flex: 0.5625 1 0; }
.cx-brand-format img { width: 100%; height: auto; }
.cx-brand-format--wide img { aspect-ratio: 16 / 9; }
.cx-brand-format--tall img { aspect-ratio: 9 / 16; }
.cx-brand-format figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.cx-brand-format figcaption strong { font-weight: 700; line-height: 20px; }
.cx-brand-format figcaption span { color: var(--cx-muted); line-height: 24px; }
.cx-brand-color__column { display: flex; flex-direction: column; gap: 16px; }
.cx-brand-color__title { font-size: 24px; font-weight: 700; line-height: 34px; }
.cx-brand-color__body { font-size: 16px; line-height: 28px; }
.cx-brand-color__rules { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; list-style: none; font-size: 16px; line-height: 28px; }
.cx-brand-color__rules > li { gap: 0; }
.cx-brand-swatches { list-style: none; border-bottom: 1px solid var(--cx-rule); }
.cx-brand-swatches > li { display: flex; align-items: center; gap: 16px; padding-block: 12px; border-top: 1px solid var(--cx-rule); }
.cx-brand-swatch { flex: 0 0 48px; height: 48px; }
.cx-brand-swatch--light { border: 1px solid var(--cx-rule); }
.cx-brand-swatches__text { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.cx-brand-swatches__name { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.cx-brand-swatches__name strong { font-weight: 700; line-height: 20px; }
.cx-brand-swatches__name span { line-height: 24px; }
.cx-brand-swatches__role { color: var(--cx-muted); line-height: 24px; }
.cx-brand-card__preview--image { padding: 0 31px; }
.cx-brand-card__preview--image img { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Guidelines */
.cx-brand-excerpt { display: flex; align-items: stretch; gap: 40px; padding: 32px; border: 1px solid var(--cx-rule); background: #fff; }
.cx-brand-excerpt__cover { flex: 0 0 47.882%; width: 47.882%; height: auto; aspect-ratio: 2400 / 1697; }
.cx-brand-excerpt__info { display: flex; flex: 1 1 0; flex-direction: column; gap: 16px; min-width: 0; }
.cx-brand-toc { display: flex; flex-direction: column; gap: 24px; }
.cx-brand-toc__title { font-size: 24px; font-weight: 700; line-height: 34px; }
.cx-brand-toc__list { list-style: none; border-top: 1px solid var(--cx-rule); }
.cx-brand-toc__list > li { display: flex; align-items: baseline; gap: 24px; padding-block: 20px; border-bottom: 1px solid var(--cx-rule); }
.cx-brand-toc__no { flex: 0 0 40px; color: var(--cx-muted); font: 700 12px/16px Archivo, sans-serif; }
.cx-brand-toc__body { display: flex; flex: 1 1 0; align-items: baseline; gap: 24px; min-width: 0; }
.cx-brand-toc__chapter { flex: 0 0 200px; font-size: 18px; font-weight: 700; line-height: 28px; }
.cx-brand-toc__topics { flex: 1 1 0; min-width: 0; color: var(--cx-muted); font-size: 14px; line-height: 24px; }
.cx-brand-toc__pages { flex: 0 0 88px; font-size: 14px; line-height: 24px; text-align: right; white-space: nowrap; }
.cx-brand-viewer { border: 1px solid var(--cx-rule); background: #fff; }
.cx-brand-viewer__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 24px; color: #fff; background: var(--cx-ink); }
.cx-brand-viewer__doc { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 14px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.cx-brand-viewer__tag { padding: 2px 6px; border: 1px solid var(--cx-brand-muted-dark); font: 700 12px/16px Archivo, sans-serif; }
.cx-brand-viewer__actions { display: flex; align-items: center; gap: 32px; }
.cx-brand-viewer__pager { display: flex; align-items: center; gap: 12px; }
.cx-brand-viewer__step { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 0; color: #fff; background: none; cursor: pointer; }
.cx-brand-viewer__step[data-cx-viewer-step="-1"] { color: var(--cx-brand-muted-dark); }
.cx-brand-viewer__step:disabled { opacity: 0.4; cursor: default; }
.cx-brand-viewer__count { font: 700 12px/16px Archivo, sans-serif; white-space: nowrap; }
.cx-brand-viewer__download { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.cx-brand-viewer__download:hover .cx-brand-pc { text-decoration: underline; text-underline-offset: 4px; }
.cx-brand-viewer__stage { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 40px 32px; background: var(--cx-paper); }
.cx-brand-viewer__page { width: 800px; max-width: 100%; height: auto; aspect-ratio: 1600 / 1131; background: #fff; }
.cx-brand-viewer__pager--stage { display: none; }
.cx-brand-viewer__caption { color: var(--cx-muted); font-size: 14px; line-height: 24px; text-align: center; }
.cx-brand-viewer__thumbs { display: flex; flex-wrap: wrap; gap: 20px 16px; padding: 24px; border-top: 1px solid var(--cx-rule); list-style: none; }
.cx-brand-viewer__thumbs > li { width: calc((100% - 80px) / 6); }
.cx-brand-viewer__thumb { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cx-brand-viewer__thumb img { width: 100%; height: auto; aspect-ratio: 800 / 566; border: 1px solid var(--cx-rule); }
.cx-brand-viewer__thumb[aria-current="true"] img { border: 2px solid var(--cx-ink); }
.cx-brand-viewer__thumb:hover img { border-color: var(--cx-control); }
.cx-brand-viewer__thumb[aria-current="true"]:hover img { border-color: var(--cx-ink); }
.cx-brand-viewer__no { color: var(--cx-muted); font: 700 12px/16px Archivo, sans-serif; }
.cx-brand-viewer__thumb[aria-current="true"] .cx-brand-viewer__no { color: var(--cx-text); }
@media (prefers-reduced-motion: no-preference) {
  .cx-brand-viewer__page { transition: opacity 120ms ease; }
  .cx-brand-viewer__page.is-changing { opacity: 0.35; }
}

@media (min-width: 1200px) { .cx-brand-br-w { display: inline; } }
/* Very narrow phones (outside the Figma widths): keep the short tab names on one line. */
@media (max-width: 359px) {
  .cx-brand-nav__tab { gap: 8px; padding-inline: 12px; }
}
/* Narrow PCs and tablets (outside the Figma widths): five NG samples in a row would be too small. */
@media (max-width: 1023px) and (min-width: 768px) {
  .cx-brand-donts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* PC 1080 (768–1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
  .cx-brand-br-tab { display: inline; }
  .cx-brand-cards--logo .cx-brand-card__spacer { min-height: 8px; }
  .cx-brand-nav__inner, .cx-brand-section__inner { padding-inline: 48px; }
  .cx-brand-stills { padding-inline: 23px; }
  .cx-brand-sample__panel--logo { height: 280px; }
  .cx-brand-sample__logo { width: min(342.74px, calc(100% - 40px)); }
  .cx-brand-sample__panel--lockup { height: 260px; }
  .cx-brand-sample__lockup-h { width: min(345.35px, calc(100% - 40px)); }
  .cx-brand-sample__lockup-v { width: min(270.75px, calc(100% - 40px)); }
  .cx-brand-kit { gap: 28px; }
  .cx-brand-kit__logo { width: min(239.92px, calc(100% - 32px)); }
  .cx-brand-kit__lockup { width: 172.67px; }
  .cx-brand-xmeaning { --h: min(144px, calc((100cqw - 48px) / 4.284234)); --top: 120px; --bracket: 24px; --leader: 68px; height: 380px; }
  .cx-brand-space__panel { height: 300px; }
  .cx-brand-space__logo { --h: min(80px, calc((100cqw - 24px) / 5.04)); }
  .cx-brand-o2f { --x: 144px; --arrow: 32px; --gap: 20px; }
  .cx-brand-type__big { font-size: 24px; line-height: 36px; }
  .cx-brand-toc__chapter { flex-basis: 176px; }
  .cx-brand-viewer__page { width: 720px; }
}

/* SP 375 (up to 767px) */
@media (max-width: 767px) {
  .cx-brand-pc { display: none; }
  .cx-brand-sp, .cx-brand-br-sp { display: inline; }
  .cx-brand-br-pc { display: none; }
  .cx-brand-hero .cx-page-hero__description { max-width: none; }
  .cx-brand-hero--guidelines .cx-page-hero__outline { font-size: min(52px, calc((100vw - 48px) / 6.1)); }
  .cx-brand-nav__inner { gap: 0; padding-bottom: 16px; }
  .cx-brand-nav__label { display: none; }
  .cx-brand-nav__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
  .cx-brand-nav__tab { min-height: 48px; padding: 0 16px; border-top: 1px solid var(--cx-brand-line-dark); font-size: 14px; line-height: 20px; }

  .cx-brand-section__inner { gap: 40px; padding-top: 48px; padding-bottom: 56px; }
  .cx-brand-heading { gap: 20px; }
  .cx-brand-heading h2 { font-size: 28px; line-height: 40px; }
  .cx-brand-lead { max-width: none; }
  .cx-brand-pair { flex-direction: column; gap: 32px; }
  .cx-brand-pair > * { flex: none; width: 100%; }

  .cx-brand-end__inner { gap: 32px; }
  .cx-brand-usage { gap: 12px; padding: 24px; }
  .cx-brand-usage__title { font-size: 18px; line-height: 28px; }
  .cx-brand-related__links { flex-direction: column; gap: 12px; }
  .cx-brand-related__links > li { flex: none; }

  .cx-brand-rows { gap: 32px; }
  .cx-brand-expressions { gap: 40px; }
  .cx-brand-row { flex-direction: column; gap: 16px; }
  .cx-brand-expressions .cx-brand-row { gap: 20px; }
  .cx-brand-row__media { flex: none; width: 100%; }
  .cx-brand-scenes .cx-brand-row__text { gap: 8px; }
  .cx-brand-row__title { font-size: 20px; line-height: 30px; }

  .cx-brand-facts > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .cx-brand-cards { flex-direction: column; }
  .cx-brand-card { flex: none; padding: 24px; }
  .cx-brand-card__title { font-size: 20px; line-height: 30px; }
  .cx-brand-card__spacer { display: none; }
  .cx-brand-card__button { width: 100%; }

  .cx-brand-video__play { left: 11px; bottom: 11px; height: 40px; padding: 0 14px; }
  .cx-brand-timeline { flex-direction: column; gap: 12px; }
  .cx-brand-timeline > li { flex: none; gap: 8px; padding: 4px 0 4px 16px; border-top: 0; border-left: 2px solid var(--cx-ink); }
  .cx-brand-timeline__name { font-size: 20px; line-height: 30px; }
  .cx-brand-stills { gap: 8px; padding-inline: 15px; }
  .cx-brand-file { flex-direction: column; align-items: stretch; gap: 8px; }
  .cx-brand-file__name, .cx-brand-file__button { flex: none; }
  .cx-brand-notes__list { max-width: none; }

  .cx-brand-sample__panel--logo { height: 200px; }
  .cx-brand-sample__logo { width: min(239.92px, calc(100% - 40px)); }
  .cx-brand-sample__panel--lockup { height: 180px; }
  .cx-brand-sample__lockup-h { width: min(230.23px, calc(100% - 40px)); }
  .cx-brand-sample__lockup-v { width: min(208.27px, calc(100% - 40px)); }
  .cx-brand-why__title { font-size: 20px; line-height: 30px; }
  .cx-brand-kit { gap: 20px; }
  .cx-brand-kit__logo { width: min(171.37px, calc(100% - 32px)); }
  .cx-brand-kit__tile { width: 48px; height: 48px; }
  .cx-brand-kit__tile img { width: 30.46px; height: 30.46px; }
  .cx-brand-kit__lockup { width: 143.89px; }
  .cx-brand-xmeaning { --h: min(64px, calc((100cqw - 8px) / 4.284234)); --top: 88px; --bracket: 28px; height: 288px; }
  .cx-brand-xmeaning__size { top: -64px; left: 50%; transform: translateX(-50%); }
  .cx-brand-xmeaning__half { top: calc(100% + 10px); font-size: 16px; line-height: 24px; }
  .cx-brand-xmeaning__leader { height: calc(49.7373% - 3px + 54px); }
  .cx-brand-xmeaning__leader-x { display: none; }
  .cx-brand-xmeaning__facing { top: calc(100% + 62px); left: -2.4px; }
  .cx-brand-dark__panel { flex-direction: column; gap: 40px; height: 280px; }
  .cx-brand-dark__h { width: min(201.45px, calc(100% - 32px)); }
  .cx-brand-dark__v { width: min(166.62px, calc(100% - 32px)); }
  .cx-brand-pair--top.cx-brand-pair { gap: 40px; }
  .cx-brand-space__panel { height: 220px; }
  .cx-brand-space__logo { --h: min(48px, calc((100cqw - 24px) / 5.04)); --label: 14px; --label-size: 10px; --label-gap: 16px; }
  .cx-brand-space__label--s { top: calc(100% - 3px); }
  .cx-brand-minimum__number { font-size: 40px; line-height: 48px; }
  .cx-brand-donts { gap: 24px; }
  .cx-brand-donts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }

  .cx-brand-o2f { --x: 96px; --arrow: 24px; --gap: 12px; }
  .cx-brand-type { flex-direction: column; }
  .cx-brand-type__card { flex: none; padding: 24px; }
  .cx-brand-type__name { font-size: 20px; line-height: 30px; }
  .cx-brand-type__big { font-size: 24px; line-height: 36px; }
  .cx-brand-type__card--en .cx-brand-type__big { font-size: 32px; line-height: 40px; }
  .cx-brand-formats { flex-direction: column; }
  .cx-brand-format--wide { flex: none; width: 100%; }
  .cx-brand-format--tall { flex: none; flex-direction: row; gap: 16px; width: 100%; }
  .cx-brand-format--tall img { flex: 0 0 calc((100% - 16px) / 2); width: calc((100% - 16px) / 2); }
  .cx-brand-color.cx-brand-pair { gap: 48px; }
  .cx-brand-color__title { font-size: 20px; line-height: 30px; }
  .cx-brand-card__preview--image { padding-inline: 15px; }

  .cx-brand-excerpt { flex-direction: column; gap: 16px; padding: 24px; }
  .cx-brand-excerpt__cover { flex: none; width: 100%; }
  .cx-brand-toc { gap: 16px; }
  .cx-brand-toc__title { font-size: 20px; line-height: 30px; }
  .cx-brand-toc__list > li { gap: 12px; }
  .cx-brand-toc__no { flex-basis: 24px; }
  .cx-brand-toc__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
  .cx-brand-toc__chapter { grid-column: 1; grid-row: 1; }
  .cx-brand-toc__pages { grid-column: 2; grid-row: 1; flex: none; }
  .cx-brand-toc__topics { grid-column: 1 / -1; grid-row: 2; }
  .cx-brand-viewer__toolbar { height: 48px; padding: 0 16px; }
  .cx-brand-viewer__doc { gap: 10px; }
  .cx-brand-viewer__pager--toolbar { display: none; }
  .cx-brand-viewer__download { justify-content: center; width: 44px; height: 44px; margin-right: -12px; }
  .cx-brand-viewer__download svg { width: 20px; height: 20px; }
  .cx-brand-viewer__stage { gap: 12px; padding: 16px; }
  .cx-brand-viewer__page { width: 100%; }
  .cx-brand-viewer__pager--stage { display: flex; gap: 16px; }
  .cx-brand-viewer__pager--stage .cx-brand-viewer__step { width: 44px; height: 44px; border: 1px solid var(--cx-rule); color: var(--cx-ink); background: #fff; }
  .cx-brand-viewer__pager--stage .cx-brand-viewer__count { color: var(--cx-text); }
  .cx-brand-viewer__thumbs { gap: 16px 12px; padding: 16px; }
  .cx-brand-viewer__thumbs > li { width: calc((100% - 24px) / 3); }
  .cx-brand-viewer__thumb { gap: 4px; }
}