/* Typography shared by the general site pages (2026-09-14).
 * Keep the existing layout, font families and approved color palette.
 * The one font-size override layer reconciles legacy inline/scoped CSS.
 * Compact diagrams, metadata and results use explicit role exceptions below.
 */
.mobile-type-break { display: none; }
/* This compact career diagram uses the same roles in all four arrows. */
@media screen and (min-width: 900px) {
  #pg-top .career-flow--chevrons .career-domain-label {
    font-size: var(--os8-type-note);
    line-height: 18px;
    letter-spacing: .12em;
  }
  #pg-top .career-flow--chevrons h3 {
    font-size: clamp(13.4px, 8.9cqi, 16px) !important;
    letter-spacing: 0;
    text-wrap: nowrap;
  }
  #pg-top .career-flow--chevrons :is(.career-points li, .career-node-detail small) {
    font-size: var(--os8-type-support) !important;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0;
  }
}
@media screen and (min-width: 761px) {
  :root {
    --os8-type-title: 36px;
    --os8-type-section: 28px;
    --os8-type-subheading: 20px;
    --os8-type-compact: 16px;
    --os8-type-body: 14.4px;
    --os8-type-support: 13.4px;
    --os8-type-note: 12px;
    --body: var(--os8-type-body);
    --support: var(--os8-type-support);
    --note: var(--os8-type-note);
    --text-display: var(--os8-type-title);
    --text-question: var(--os8-type-section);
    --text-result: var(--os8-type-section);
    --text-section: var(--os8-type-subheading);
    --text-body: var(--os8-type-body);
    --text-support: var(--os8-type-support);
    --text-meta: var(--os8-type-note);
    --text-control: var(--os8-type-support);
  }

  body h1 { font-size: var(--os8-type-title) !important; }
  /* The flagship service title is deliberately larger (owner request 2026-09-14).
   * Fit its eight Japanese characters inside the existing left column.
   * The adjacent lead keeps its current width and position. */
  #pg-produce .titleblk .row > div {
    flex: 1;
    min-width: 0;
    container-type: inline-size;
  }
  #pg-produce .titleblk .jp {
    font-size: clamp(36px, 12.3cqi, 72px) !important;
  }
  body :is(h2, .sec-title > .jp, .features-title) { font-size: var(--os8-type-section) !important; }
  body h3 { font-size: var(--os8-type-subheading) !important; }
  body h4 { font-size: var(--os8-type-compact) !important; }
  body :is(p, li, dd, td, .lead, .option-title) { font-size: var(--os8-type-body) !important; }
  body :is(.section-subtitle, .eyebrow, .kicker, .kick, .question-help, .option-desc, .scope, .pb-sub, .notice p) {
    font-size: var(--os8-type-support) !important;
  }
  body :is(small, .note, .trust, .fine, .caption, .table-note, .page-en, .rail-heading, .rail-note, .selection-status, .flow-note, .step-state, .service-usage p, .service-terms p, .terms-note p, .notice li, .service-usage li, .service-terms li, .terms-note li) {
    font-size: var(--os8-type-note) !important;
  }
  body :is(.pill, .cta-pill, .cta, .primary, .btn, .service-closing__button, .os8-pill, .os8-cta, .button-row button, .action-button, .header-nav a, .tag-pill) {
    font-size: var(--os8-type-support) !important;
  }
  body :is(.brand, .os8-brand, .ft .b) { font-size: var(--os8-type-compact) !important; }
  body.scrolled :is(.nav .pill, .site-nav .pill, .os8-pill) { font-size: var(--os8-type-note) !important; }
  body :is(.faq-toggle, summary.os8-faq-question, .faq summary, .os8-faq summary, .video-faq summary) { font-size: var(--os8-type-body) !important; }

  /* These headings label a compact component, rather than a page section. */
  body :is(.award-copy h3, .approach-item h3, .career-node h3, .career-node-core h3, .voice h3, .voice-card h3, .ball h3, .prob h3, .case-card h3, .pb-title, .pack-body h3, .audio-production-card h3, .flow h3, .flow-step h3, .legal-article h3) {
    font-size: var(--os8-type-compact) !important;
  }
  body :is(.sequence h2, .purpose-entry-name h3, .sections .section-head h2, .consultation-plate, #profile-note-title, .distribution-service-copy h2, #resultStage h2) {
    font-size: var(--os8-type-subheading) !important;
  }
  body :is(.service-usage h3, .service-terms h3, .terms-note h3, .notice h3, .work-text h3) {
    font-size: var(--os8-type-support) !important;
  }
  body #resultStage h1 { font-size: var(--os8-type-section) !important; }
  body #resultStage h3 { font-size: var(--os8-type-compact) !important; }

  /* Labels implemented as spans/divs still follow their visual role. */
  body :is(.cap-jp, .mkplate > .jp, .mkplate .mkh, .mkcard .mkh) {
    font-size: var(--os8-type-section) !important;
  }
  body :is(.trailer-row h2, .treeblk .brandline .mkh) {
    font-size: var(--os8-type-subheading) !important;
  }
  body :is(.final .note, .consultation-copy .note) {
    font-size: var(--os8-type-body) !important;
  }
  body :is(.service-usage dt, .service-terms dt, .terms-note dt) {
    font-size: var(--os8-type-note) !important;
  }

  /* Price figures are display data, not paragraph copy. */
  body .rate-hero .rate-value { font-size: 56px !important; }
  body .rate-hero :is(.rate-unit, .rate-tax) {
    font-size: var(--os8-type-support) !important;
  }

  /* A common rhythm and restrained depth; keep existing plates and colors. */
  body :is(h1, h2, h3, h4, .cap-jp, .mkplate > .jp, .sec-title > .jp, .features-title, .mkh) {
    font-weight: 700;
    line-height: 1.55 !important;
    text-wrap: balance;
  }
  body :is(h1, h2, .cap-jp, .mkplate > .jp, .sec-title > .jp, .features-title, .mkh) {
    text-shadow: 0 1px 1px rgb(0 0 0 / 12%);
  }
  body :is(h3, h4) { text-shadow: 0 1px 1px rgb(0 0 0 / 6%); }
  body :is(.final h2, .service-closing h2, .mkplate .mkh) {
    text-shadow: 0 1px 2px rgb(0 0 0 / 20%);
  }
}

@media screen and (max-width: 760px) {
  .mobile-type-break { display: initial; }
  .mobile-type-phrase { white-space: nowrap; }
  #mnav[aria-hidden="true"] { visibility: hidden; }
  :root {
    --os8-type-title: 28px;
    --os8-type-section: 24px;
    --os8-type-subheading: 20px;
    --os8-type-compact: 16px;
    --os8-type-body: 14.4px;
    --os8-type-support: 13.4px;
    --os8-type-note: 12px;
  }
  body h1 { font-size: var(--os8-type-title) !important; }
  body :is(h2, .features-title, .cap-jp) {
    font-size: var(--os8-type-section) !important;
  }
  body :is(.sec-title > .jp, .mkplate > .jp, .mkplate .mkh, .mkcard .mkh) {
    font-size: var(--os8-type-section) !important;
  }
  body h3 { font-size: var(--os8-type-subheading) !important; }
  body h4 { font-size: var(--os8-type-compact) !important; }
  body :is(p, li, dd, td, .lead) { font-size: var(--os8-type-body) !important; }
  body :is(.section-subtitle, .eyebrow, .kicker, .kick, .scope, .pb-sub, .notice p) {
    font-size: var(--os8-type-support) !important;
  }
  body :is(small, .note, .trust, .fine, .caption, .table-note, .page-en, .service-usage p, .service-terms p, .terms-note p, .notice li, .service-usage li, .service-terms li, .terms-note li, .service-usage dt, .service-terms dt, .terms-note dt) {
    font-size: var(--os8-type-note) !important;
  }
  body :is(.award-copy h3, .approach-item h3, .career-node h3, .career-node-core h3, .voice h3, .voice-card h3, .ball h3, .prob h3, .case-card h3, .pb-title, .pack-body h3, .audio-production-card h3, .flow h3, .flow-step h3, .legal-article h3) {
    font-size: var(--os8-type-compact) !important;
  }
  body :is(.sequence h2, .purpose-entry-name h3, .sections .section-head h2, .legal-article h2, #profile-note-title, .distribution-service-copy h2, .trailer-row h2, .treeblk .brandline .mkh) {
    font-size: var(--os8-type-subheading) !important;
  }
  body .consultation-plate { font-size: var(--os8-type-compact) !important; }
  body :is(.service-usage h3, .service-terms h3, .terms-note h3, .notice h3, .work-text h3) {
    font-size: var(--os8-type-support) !important;
  }
  body :is(.final .note, .consultation-copy .note) { font-size: var(--os8-type-body) !important; }
  body :is(.faq-toggle, summary.os8-faq-question, .faq summary, .os8-faq summary, .video-faq summary) { font-size: var(--os8-type-body) !important; }
  body .rate-hero .rate-value { font-size: 44px !important; }
  body .rate-hero :is(.rate-unit, .rate-tax) { font-size: var(--os8-type-support) !important; }
  body :is(h1, h2, h3, h4, .cap-jp, .mkplate > .jp, .sec-title > .jp, .features-title, .mkh) {
    font-weight: 700;
    line-height: 1.55 !important;
    text-wrap: balance;
  }
  body :is(h1, h2, .cap-jp, .mkplate > .jp, .sec-title > .jp, .features-title, .mkh) {
    text-shadow: 0 1px 1px rgb(0 0 0 / 12%);
  }
  body :is(h3, h4) { text-shadow: 0 1px 1px rgb(0 0 0 / 6%); }
  /* The consultation section uses the existing dark mobile surface. */
  #pg-services .final { padding: 72px 0; }
  #pg-services .final :is(.note, .trust) { color: #c4c4ca; }
  /* Keep the Before → 1 → 2 → 3 → After reading order on a narrow screen. */
  #pg-grow .timeline { flex-direction: column; align-items: stretch; gap: 28px; }
  #pg-grow .tl-end { flex: none; }
  #pg-grow .tl-step {
    flex: none; display: grid; grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px; text-align: left; padding: 0;
  }
  #pg-grow .tl-step .dot { grid-row: 1 / span 2; margin: 0; }
  #pg-grow .tl-step h3 { align-self: center; margin: 0 0 8px; }
  #pg-grow .tl-step p { grid-column: 2; }
  .distribution-page .flow .distribution-step-copy { display: block; grid-column: 2; min-width: 0; }
  .distribution-page .flow .step-materials ul { padding-left: 1.2em; margin: 12px 0 0; }
  .distribution-page .flow .step-materials li {
    display: list-item; padding: 0; margin: 8px 0; border: 0; line-height: 1.95;
  }
  .distribution-page .flow .step-materials li::before { content: none; }
  body .rate-hero .rate-value span { font-size: 20px; margin-left: 6px; }
  .sns-page .sns-options {
    width: 100%; table-layout: fixed; border-collapse: collapse; line-height: 1.8;
  }
  .sns-page .sns-options :is(th, td) {
    padding: 12px 4px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--line); font-size: 13.4px !important;
  }
  .sns-page .sns-options thead th { background: var(--gray1); }
  .sns-page .sns-options th:first-child { width: 25%; }
  .sns-page .sns-options th:nth-child(2),
  .sns-page .sns-options th:nth-child(3) { width: 22%; }
  .sns-page .sns-options :is(.option-price, .option-total) { white-space: nowrap; }
}
@media screen and (max-width: 360px) {
  .sns-page .sns-options th:first-child { width: 22%; }
  .sns-page .sns-options th:nth-child(2) { width: 26%; }
  .sns-page .sns-options th:nth-child(3) { width: 24%; }
}