/* 保険整備屋：承認スマホルール v1 ／統合確認版 2026-10-16
   The 15 articles, tool, home and category pages opt into this layer through
   body classes. Small desktop additions are limited to the new title markup
   and the three new supplementary disclosures. */

/* The title's source order remains main, optional separator, then subtitle.
   Article 5 deliberately retains its existing dv-title-main/sub markup. */
body.hks-article .article h1.hks-title > .hks-title-main {
  display: block;
  font-size: 1em;
  line-height: 1.35;
  white-space: normal;
}
body.hks-article .article h1.hks-title > .hks-title-separator,
body.hks-article .article h1.hks-title > .hks-title-sub {
  display: inline;
  font-size: .66em;
  line-height: 1.55;
  white-space: normal;
}
body.hks-article .article h1.hks-title > .hks-title-separator:not(:empty) {
  margin-right: .15em;
}

body:is(.hks-a03, .hks-a06, .hks-a12) .article details.article-supplement {
  margin: 2rem 0;
  padding: 0 1.25rem;
  border: 1px solid #cfdaea;
  border-radius: .75rem;
  background: #f8fbfe;
}
body:is(.hks-a03, .hks-a06, .hks-a12) .article details.article-supplement[open] {
  padding-bottom: 1.25rem;
}
body:is(.hks-a03, .hks-a06, .hks-a12) .article details.article-supplement > summary {
  cursor: pointer;
  padding: 1rem .25rem;
  color: #12355f;
  font-weight: 700;
  line-height: 1.65;
}
body:is(.hks-a03, .hks-a06, .hks-a12) .article details.article-supplement > summary:focus-visible {
  outline: .1875rem solid #b16a14;
  outline-offset: .1875rem;
  border-radius: .25rem;
}
body:is(.hks-a03, .hks-a06, .hks-a12) .article details.article-supplement[open] > summary {
  border-bottom: 1px solid #cfdaea;
}
body:is(.hks-a03, .hks-a06, .hks-a12) .article details.article-supplement > summary + * {
  margin-top: 1.25rem;
}

@media (max-width: 768px) {
  body.hks-mobile-page {
    font-size: 1rem;
    line-height: 1.8;
  }

  body.hks-mobile-page .header-inner {
    box-sizing: border-box;
    height: auto;
    min-height: 4.25rem;
    padding: .625rem 1rem;
    flex-wrap: wrap;
    gap: .5rem 1rem;
  }
  body.hks-mobile-page .global-nav { display: none; }
  body.hks-mobile-page .mobile-menu { display: block; }
  body.hks-mobile-page .header-nav,
  body.hks-mobile-page .footer-links { flex-wrap: wrap; }
  body.hks-mobile-page .menu-toggle,
  body.hks-mobile-page .header-nav a,
  body.hks-mobile-page .mobile-nav-content a {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
  body.hks-mobile-page :is(a, button, input, select, textarea, summary):focus-visible,
  body.hks-mobile-page .hks-table-scroll:focus-visible {
    outline: .1875rem solid #b16a14;
    outline-offset: .1875rem;
  }

  /* Use a named inline-size container so 200% text enlargement also collapses
     compact grids even when the CSS viewport remains wider than 359px. */
  body.hks-article .article {
    box-sizing: border-box;
    container: hks-article / inline-size;
    max-width: 100%;
    padding-inline: clamp(1rem, 3vw, 1.5rem);
    font-size: 1.0625rem;
    line-height: 1.85;
    overflow-wrap: break-word;
  }
  body.hks-article .article :is(p, li, dd, blockquote),
  body.hks-tool .simulator-page :is(p, li, dd, blockquote) {
    font-size: 1.0625rem;
    line-height: 1.85;
  }
  /* Articles 3–6 publish `article.<visual> p {font-size:18px!important}`.
     Scope this one exception to those four article bodies; the named source,
     scope and diagram notes below then override it to the 16px minimum. */
  body:is(.hks-a03, .hks-a04, .hks-a05, .hks-a06) .article p {
    font-size: 1.0625rem !important;
  }
  body.hks-article .article :is(.hero, .a1-hero, .a2-hero, .nv-hero,
    .uv-hero, .dv-hero, .iv-hero, .a8-hero, .a9-hero, .a10-hero,
    .a13-hero) {
    grid-template-columns: minmax(0, 1fr);
  }
  body.hks-article .article h1.hks-title {
    max-width: 100%;
    font-size: 1.5rem !important;
    line-height: 1.45 !important;
    white-space: normal;
    overflow-wrap: break-word;
    height: auto;
  }
  body.hks-article .article h1.hks-title br { display: none; }
  body.hks-article .article h1.hks-title > .hks-title-main {
    display: block;
    font-size: 1.5rem !important;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: break-word;
  }
  body.hks-article .article h1.hks-title > .hks-title-separator,
  body.hks-article .article h1.hks-title > .hks-title-sub {
    display: inline;
    font-size: 1.25rem !important;
    line-height: 1.55;
    white-space: normal;
    overflow-wrap: break-word;
  }
  /* Article 5 keeps its already published H1 words and nested spans. */
  body.hks-a05 .article h1.hks-title .dv-title-main {
    display: block;
    font-size: 1em !important;
    white-space: normal;
  }
  body.hks-a05 .article h1.hks-title .dv-title-sub {
    display: block;
    font-size: 1.25rem !important;
    line-height: 1.55;
    margin-top: .35em;
  }
  body.hks-article .article h2 {
    max-width: 100%;
    font-size: 1.4375rem !important;
    line-height: 1.5 !important;
    overflow-wrap: break-word;
    height: auto;
  }
  body.hks-article .article h3 {
    max-width: 100%;
    font-size: 1.25rem !important;
    line-height: 1.55 !important;
    overflow-wrap: break-word;
    height: auto;
  }
  body.hks-article .article :is(h2[id], h3[id], section[id]) {
    scroll-margin-top: 5.5rem;
  }
  body.hks-article .article :is(img, video) {
    max-width: 100%;
    height: auto;
  }

  /* Explanatory paragraphs and important conditions retain body-size type;
     labels/citations can be a step smaller, but remain readable. */
  /* 16px minimum for source scope, contract caveats and diagram labels.
     These component overrides need importance only where the published
     visual styles themselves mark their font size important. */
  body.hks-article .article :is(.source-note, .scope-note, .fineprint,
    .experience-note, .a13-scope, .a12-affiliate-note, figcaption) {
    font-size: 1rem !important;
    line-height: 1.7;
  }
  body.hks-article .article :is(.metric small, .metric span, .fact-card span,
    .summary-point span, .amount-questions span, .a13-card small,
    .a13-quote small, .wait-card .tag, .sim-breakdown span) {
    font-size: 1rem;
    line-height: 1.6;
  }
  body.hks-a03 .article .amount-questions span { font-size: 1rem !important; }
  /* The published visual CSS pins these content bearing notes, card labels,
     conditions and figure legends to 12–15px with !important. These named
     components are the exception list; compact category badges stay as-is. */
  body.hks-a03 .article :is(.nv-nav-note, .nv-note, .experience-banner > small,
    .experience-banner > span, .impact-message > span, .decision-card > small,
    .decision-contrast-item span, .reason-grid span, .choice-card small,
    .claim-copy span, .claim-copy p, .claim-flow-summary span,
    .claim-flow-summary strong, .claim-flow-summary b, .summary-tags > span,
    .author p, .sources p, .nv-answer-copy > p),
  body.hks-a04 .article :is(.uv-nav-note, .grade-card > span, .scan-impact > span,
    .uv-caption, .uv-chart-note, .repair-choice > span,
    .question-callout > span, .uv-steps > div > span,
    .uv-steps > div > small, .uv-final-copy > span,
    .example-money-flow > div > span, .author p, .sources p,
    .uv-answer-copy > p),
  body.hks-a05 .article :is(.dv-answer p, .dv-example-intro p,
    .scan-impact > span, .dv-guide-note, .sources p, .author p,
    .dv-equation-cell > span, .five-ten-flow > div > span,
    .dv2-figure-note, .dv2-figure-condition, .dv2-case-label,
    .dv2-rider-copy > span, .dv2-step > span, .dv2-step > small,
    .dv2-decision-axes > div > span),
  body.hks-a06 .article :is(.iv-nav-note, .value-definition-card > span,
    .value-definition-card > p, .value-term-grid > div > span,
    .loss-type-grid > div > span, .loss-type-grid small,
    .iv-bar-line > span, .iv-scale span, .scan-impact > span,
    .iv-caption, .iv-result-cell > span, .age-flow > div > span,
    .iv-next-car > div > span, .iv-hail-steps > div > span,
    .estimate-accuracy-card > span, .iv-gap-bar span,
    .insured-value-three > div > span, .insured-value-three > div > small,
    .new-car-extra > span, .author p, .sources p, .iv-answer-copy > p,
    .iv-limit > span, .iv-equation-row > div > span,
    .iv-repair-compare > div > span, .hail-grade-grid > div > span,
    .scan-summary > span, .scan-summary p),
  body.hks-a07 .article :is(.vx-condition, .vx-condition p, .vx-panel p,
    .vx-figure-note, .vx-axis-caption, .grade-note, .grade-coverage-pair p,
    .knowledge-toc .kt-hint, .kp-summary .grade-question > p,
    .kp-answer .grade-kicker),
  body.hks-a10 .article :is(.a10-grade p, .a10-references p,
    .a10-references li, .a10-condition, .a10-payout span) {
    font-size: 1rem !important;
    line-height: 1.6;
  }
  /* Remaining published labels use ordinary declarations, so the local
     mobile layer can raise them to 16px without another importance override. */
  body.hks-a08 .article :is(.a8-damage-item span, .a8-grade .a8-condition),
  body.hks-a09 .article :is(.a9-damage-item span, .a9-grade .a9-condition,
    .a9-methods small, .a9-grade-grid > div > span),
  body:is(.hks-a11, .hks-a12, .hks-a13) .article :is(.preview-note,
    .answer .answer-label, .answer .answer-scope,
    .firsthand .field-label, .storage-help, .paper-pair small,
    .toc-grid span, .personal-label, .related-card span,
    .bottom-label, .compare-table details p, .footer-note),
  body:is(.hks-a14, .hks-a15) .article :is(.hero-caption, .toc-head small,
    .timing small, .related small, .check-grid small,
    .price-pair span, .compare-table th label) {
    font-size: 1rem;
    line-height: 1.6;
  }
  body.hks-article .article :is(.card, .scan-card, .fact-card, .decision-card,
    .wait-card, .a13-card, .a13-quote, .related-card) {
    min-width: 0;
    height: auto;
  }

  /* Short, directly comparable facts remain side by side at normal 360px+.
     Long contract conditions, process explanations, and checklists use width. */
  body.hks-a01 .article .scan-two-cards:not(.fit-cards),
  body.hks-a02 .article :is(.fact-cards, .summary-points),
  body.hks-a03 .article .amount-questions,
  body.hks-a08 .article .a8-grade-grid,
  body.hks-a09 .article .a9-grade-grid,
  body.hks-a12 .article .two-terms,
  body.hks-a13 .article .a13-quote-grid,
  body.hks-a15 .article .cost-stack,
  body.hks-tool .sim-breakdown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }
  body.hks-a01 .article .big-compare,
  body.hks-a02 .article .money-row,
  body.hks-a14 .article .price-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: .5rem;
    align-items: center;
  }
  body.hks-a01 .article .big-compare .arrow,
  body.hks-a02 .article .money-arrow { transform: none; }
  body.hks-a01 .article .big-compare .price b,
  body.hks-a02 .article .money-value b,
  body.hks-a02 .article .fact-card b,
  body.hks-a03 .article .amount-questions strong {
    font-size: 1.375rem;
    line-height: 1.35;
  }
  /* Articles 2 and 3 fix these same figures with !important. */
  body.hks-a02 .article :is(.money-value b, .fact-card b),
  body.hks-a03 .article .amount-questions strong {
    font-size: 1.375rem !important;
  }
  body.hks-a03 .article :is(.decision-grid, .reason-grid, .choice-grid,
    .fit-grid, .final-questions),
  body.hks-a04 .article :is(.scenario-grid, .repair-choice-grid),
  body.hks-a05 .article :is(.deductible-meaning-grid, .deductible-level-grid,
    .deductible-axis-grid, .dv2-four-steps),
  body.hks-a06 .article :is(.loss-type-grid, .iv-repair-compare,
    .iv-coverage-compare),
  body.hks-a08 .article .a8-repair-flow,
  body.hks-a11 .article :is(.check-grid, .wait-grid, .end-links),
  body.hks-a12 .article :is(.priority-grid, .example-cards, .mini-check-grid,
    .related-grid),
  body.hks-a13 .article :is(.a13-grid, .a13-answer-grid, .a13-step,
    .a13-end),
  body.hks-a14 .article :is(.cards.two, .cards.three, .timing, .flow,
    .check-grid),
  body.hks-a15 .article :is(.decision-cards, .check-grid, .repair-visual) {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The saved article 3 CSS uses !important for its five long cards. */
  body.hks-a03 .article .decision-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Keep formulas and arrows in reading order. If enlarged, only that
     diagram scrolls; the page body itself is never overflow-hidden. */
  body.hks-a03 .article .nv-component-row,
  body.hks-a04 .article .example-money-flow,
  body.hks-a05 .article :is(.deductible-equation, .five-ten-flow),
  body.hks-a06 .article .iv-equation-row,
  body.hks-a08 .article .a8-equation,
  body.hks-a09 .article .a9-equation,
  body.hks-a10 .article .a10-payout > div,
  body.hks-a15 .article .who-grid,
  body.hks-tool .sim-equation {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
  }
  body.hks-a03 .article .nv-component-row,
  body.hks-a04 .article .example-money-flow,
  body.hks-a06 .article .iv-equation-row,
  body.hks-a08 .article .a8-equation,
  body.hks-a09 .article .a9-equation,
  body.hks-a10 .article .a10-payout > div {
    grid-template-columns: minmax(5rem, 1fr) 1rem minmax(5rem, 1fr)
      1rem minmax(5rem, 1fr);
  }
  body.hks-a04 .article .example-money-flow {
    grid-template-columns: minmax(5rem, 1fr) 1rem minmax(5rem, 1fr)
      1rem minmax(5rem, 1fr) !important;
  }
  body.hks-a05 .article .deductible-equation {
    grid-template-columns: minmax(6rem, 1fr) 1.5rem minmax(5rem, 1fr)
      1.5rem minmax(6rem, 1fr) !important;
  }
  body.hks-a05 .article .five-ten-flow {
    grid-template-columns: minmax(7rem, 1fr) 1.5rem minmax(7rem, 1fr) !important;
  }
  /* Article 5's four explanation cards need their full text column. Its
     connector remains between cards in source order, rotated by the legacy
     narrow layout. */
  body.hks-a05 .article .dv2-four-steps {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.hks-a15 .article .who-grid {
    grid-template-columns: minmax(6rem, 1fr) 1rem minmax(7rem, 1fr);
  }
  body.hks-article .article :is(.example-money-flow, .deductible-equation,
    .five-ten-flow, .iv-equation-row, .a8-equation, .a9-equation,
    .a10-payout, .cost-stack) :is(span, small) {
    font-size: 1rem;
    line-height: 1.5;
  }

  body.hks-mobile-page .hks-table-scroll,
  body.hks-mobile-page .table-wrap {
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }
  body.hks-a08 .article .hks-table-scroll table,
  body.hks-a09 .article .hks-table-scroll table,
  body.hks-a10 .article .hks-table-scroll table,
  body.hks-a11 .article .hks-table-scroll .rental-table,
  body.hks-a13 .article .hks-table-scroll .a13-table,
  body.hks-a14 .article .hks-table-scroll .compare-table {
    min-width: 34rem;
    width: 100%;
  }
  body.hks-a13 .article .hks-table-scroll .a13-table { min-width: 37rem; }
  body.hks-article .article :is(th, td) { font-size: 1rem; }

  body.hks-article .article :is(.toc a, .toc-grid a, .a8-toc-grid a,
    .a9-toc-grid a, .a10-toc-grid a, .a13-toc a),
  body.hks-category .topic a,
  body.hks-tool .source-links a {
    box-sizing: border-box;
    min-height: 2.75rem;
    padding-block: .5rem;
    font-size: 1rem;
    line-height: 1.5;
  }
  body.hks-article .article :is(.toc summary, details summary, .link-button,
    .cta a.button, .a12-affiliate-code a, .related a),
  body.hks-tool .sim-actions button {
    min-height: 2.75rem;
  }
  body.hks-article .article :is(input, select, textarea),
  body.hks-tool .simulator-page :is(input, select, textarea) {
    font-size: 1rem;
  }
  body.hks-article .article :is(.check-row, .check-grid label,
    .a13-check, .mini-check-grid label, .compare-table .check-label),
  body.hks-tool .sim-check {
    min-height: 2.75rem;
    font-size: 1rem;
  }
  body.hks-article .article :is(.check-row input, .check-grid input,
    .a13-check input, .compare-table input) {
    width: 1.375rem;
    height: 1.375rem;
    flex: 0 0 1.375rem;
  }

  body.hks-tool .simulator-page {
    box-sizing: border-box;
    container: hks-tool / inline-size;
    max-width: 100%;
    padding-inline: clamp(1rem, 3vw, 1.5rem);
    font-size: 1.0625rem;
  }
  body.hks-tool .simulator-page h1 {
    font-size: 1.5rem;
    line-height: 1.45;
  }
  body.hks-tool .simulator-page h2 {
    font-size: 1.4375rem;
    line-height: 1.5;
  }
  body.hks-tool .simulator-page h3 {
    font-size: 1.25rem;
    line-height: 1.55;
  }
  body.hks-tool :is(.sim-form-grid, .sim-result-grid, .sim-guide-grid,
    .sim-before, .sim-context) { grid-template-columns: minmax(0, 1fr); }
  body.hks-tool .sim-field > small,
  body.hks-tool .sim-result-card > small { font-size: 1rem; }
  body.hks-tool .sim-breakdown :is(span, small) {
    font-size: 1rem;
    line-height: 1.6;
  }
  body.hks-tool .sim-actions button { min-height: 3rem; }

  body.hks-mobile-page:not(.hks-article):not(.hks-tool) :is(.page,
    .category-page, .optimization-page) {
    box-sizing: border-box;
    max-width: 100%;
    padding-inline: clamp(1rem, 3vw, 1.5rem);
    font-size: 1.0625rem;
  }
  body.hks-mobile-page:not(.hks-article):not(.hks-tool) :is(.page,
    .category-page, .optimization-page) :is(p, li) {
    font-size: 1.0625rem;
    line-height: 1.85;
  }
  body.hks-mobile-page:not(.hks-article):not(.hks-tool) :is(.page,
    .category-page, .optimization-page) h1 { font-size: 1.5rem; line-height: 1.45; }
  body.hks-mobile-page:not(.hks-article):not(.hks-tool) :is(.page,
    .category-page, .optimization-page) h2 { font-size: 1.4375rem; line-height: 1.5; }
  body.hks-mobile-page:not(.hks-article):not(.hks-tool) :is(.page,
    .category-page, .optimization-page) h3 { font-size: 1.25rem; line-height: 1.55; }
  body.hks-category :is(.topic-grid, .categories),
  body.hks-home :is(.category-grid, .problem-grid, .optimize, .rule-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
  body.hks-home .hero-grid,
  body.hks-home .feature,
  body.hks-home .trust { grid-template-columns: minmax(0, 1fr); }
  body.hks-home .wrap { padding-inline: clamp(1rem, 3vw, 1.5rem); }
  body.hks-home .hero h1 { font-size: 1.5rem; line-height: 1.45; }
  body.hks-home .section h2 { font-size: 1.4375rem; line-height: 1.5; }
  body.hks-static .page :is(input, select, textarea) { font-size: 1rem; }
  body.hks-static .page :is(button, a.button) { min-height: 2.75rem; }
}

@media (max-width: 359px) {
  body.hks-a01 .article .scan-two-cards:not(.fit-cards),
  body.hks-a02 .article :is(.fact-cards, .summary-points),
  body.hks-a03 .article .amount-questions,
  body.hks-a08 .article .a8-grade-grid,
  body.hks-a09 .article .a9-grade-grid,
  body.hks-a12 .article .two-terms,
  body.hks-a13 .article .a13-quote-grid,
  body.hks-a15 .article .cost-stack,
  body.hks-tool .sim-breakdown,
  body.hks-a01 .article .big-compare,
  body.hks-a02 .article .money-row,
  body.hks-a14 .article .price-pair {
    grid-template-columns: minmax(0, 1fr);
  }
  body.hks-a03 .article .amount-questions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.hks-a01 .article .big-compare .arrow,
  body.hks-a02 .article .money-arrow { transform: rotate(90deg); }
  body.hks-a14 .article .price-pair .vs { text-align: center; }
}

@media (max-width: 768px) {
  @container hks-article (max-width: 18rem) {
    body.hks-a01 .article .scan-two-cards:not(.fit-cards),
    body.hks-a02 .article :is(.fact-cards, .summary-points),
    body.hks-a03 .article .amount-questions,
    body.hks-a08 .article .a8-grade-grid,
    body.hks-a09 .article .a9-grade-grid,
    body.hks-a12 .article .two-terms,
    body.hks-a13 .article .a13-quote-grid,
    body.hks-a15 .article .cost-stack,
    body.hks-a01 .article .big-compare,
    body.hks-a02 .article .money-row,
    body.hks-a14 .article .price-pair {
      grid-template-columns: minmax(0, 1fr);
    }
    body.hks-a03 .article .amount-questions {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    body.hks-a01 .article .big-compare .arrow,
    body.hks-a02 .article .money-arrow { transform: rotate(90deg); }
    body.hks-a14 .article .price-pair .vs { text-align: center; }
  }
  @container hks-tool (max-width: 18rem) {
    body.hks-tool .sim-breakdown { grid-template-columns: minmax(0, 1fr); }
  }
}