/* Desktop finishing rules. Keep every declaration inside the PC breakpoint. */
@media screen and (min-width: 64rem) {
  .site-shell [id] { scroll-margin-top: 24px; }
  .page-sections > .section-card,
  .shop-quick { scroll-margin-top: 24px; }

  .pc-navigation a:focus-visible,
  .pc-header-action:focus-visible {
    outline: 3px solid #247eb9;
    outline-offset: -5px;
  }

  .shop-access-card {
    grid-template-areas:
      "heading heading"
      "photo summary"
      "photo info"
      "map gallery-title"
      "map gallery"
      "map-link gallery"
      "cta cta";
  }
  .shop-map-open-link {
    display: flex;
    grid-area: map-link;
    justify-content: center;
    margin: 0;
    font-size: 14px;
  }
  .shop-store-summary h3 { font-size: 20px; }
  .shop-access-label { font-size: 13px; }
  .shop-access-subtext { font-size: 12px; }
  .shop-access-main-photo { max-height: 570px; }
  .shop-gallery-title { font-size: 22px; }
  .hero-heading-price small { width: 110px; flex-shrink: 0; }

  .site-shell:not(.price-page):not(.flow-page):not(.insurance-page) .class-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .site-shell:not(.price-page):not(.flow-page):not(.insurance-page) .class-card {
    grid-column: auto;
    min-width: 0;
  }
  .home-sp-s-class-visual img {
    width: 100%;
    height: 125px;
    object-fit: contain;
  }
  .class-price-list dd > strong { font-size: clamp(27px, 2.3vw, 33px); }
  .class-price-list dt { font-size: 13px; }
  .class-price-list dt > span { font-size: 11px; }
  .class-card-link { font-size: 14px; }

  #insurance,
  .page-sections > .section-card[aria-labelledby="scene-title"] {
    grid-column: 1 / -1;
    width: min(100%, var(--desktop-content));
  }
  .insurance-table {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 14px;
  }
  .insurance-table div {
    min-width: 0;
    grid-template-columns: 38% minmax(0, 1fr);
  }
  .insurance-table div:nth-child(odd) { border-right: 1px solid var(--line); }
  .insurance-table div:nth-last-child(2) { border-bottom: 0; }
  .insurance-table dt,
  .insurance-table dd { font-size: 15px; }

  .scene-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .scene-list li { display: flex; flex-direction: column; align-items: stretch; }
  .scene-list img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .scene-list div { padding: 20px 16px; }
  .scene-list h3 { font-size: 18px; }
  .scene-list p { font-size: 14px; }
  .faq-question { font-size: 16px; }
  .faq-answer p { line-height: 1.9; }
  .site-footer nav a { font-size: 14px; }
  .site-footer small { font-size: 12px; }

  .contact-modal { width: min(calc(100% - 48px), 680px); }
  .contact-method-copy { min-width: 0; }
}

@media screen and (min-width: 64rem) and (max-width: 74.999rem) {
  .page-sections > .section-card { padding: 44px 32px; }
  .site-shell:not(.price-page):not(.flow-page):not(.insurance-page) .class-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .scene-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #guide .steps { gap: 16px; }
  #guide .steps li { padding-inline: 12px; }
  #guide .steps h3 { font-size: 20px; }
  #guide .steps li:not(:last-child)::before { right: -17px; width: 16px; }
  .shop-access-card { padding: 32px; gap: 20px; }
  .shop-store-title-name { font-size: 34px; }
  .shop-access-cell { padding: 12px 8px; gap: 8px; }
  .shop-access-text { font-size: 13px; }
  .final-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .final-cta h2 { font-size: 36px; }
  .final-cta > .button { font-size: 20px; }
  .site-footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px 32px; }
  .footer-brand-word { width: 240px; }
}