/* Match the approved TOP tone, 2026-10-02.
   Presentation only: preserve copy, prices, forms and responsive layout. */
:root {
  --white: #fff;
  --paper: #f7f9fb;
  --mist: #edf2f6;
}

body.slc-refined-page .site-header {
  background: rgba(255, 255, 255, .98);
}

body.slc-refined-page main :is(h1, h2, h3, h4) {
  font-family: inherit;
  font-weight: 600;
}
body.slc-refined-page .subpage-hero h1 {
  letter-spacing: -.015em;
  text-shadow: none;
}
body.slc-refined-page .section-kicker {
  font-family: Manrope, "Noto Sans JP", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .12em;
  overflow-wrap: anywhere;
}

/* Same small-radius actions as TOP; Japanese labels remain easy to read. */
body.slc-refined-page main .button {
  min-height: 56px;
  min-width: 0;
  padding: 15px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .025em;
  white-space: normal;
  text-align: center;
  box-shadow: none;
  transition: background-color .18s ease, border-color .18s ease;
}
body.slc-refined-page main .button[href$="contact.html#line-contact"],
body.slc-refined-page .line-contact-card .line-contact-button {
  color: #fff;
  background: #067647;
  border-color: #067647;
}
body.slc-refined-page main .button[href$="contact.html#line-contact"]:hover,
body.slc-refined-page .line-contact-card .line-contact-button:hover {
  background: #055b38;
  border-color: #055b38;
}
body.slc-refined-page .line-contact-card .line-contact-button {
  min-height: 56px;
  padding: 15px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .025em;
}
body.slc-refined-page main .button:focus-visible {
  outline: 3px solid #526b83;
  outline-offset: 4px;
}
body.slc-refined-page .contact .button:focus-visible,
body.slc-refined-page .fee-simulator-result .button:focus-visible {
  outline-color: #fff;
}

/* Quiet white cards, while keeping every existing column breakpoint. */
body.slc-refined-page :is(
  .business-focus-grid, .about-value-grid, .guide-route-grid,
  .guide-spot-grid, .subsidy-fee-grid, .info-category-grid
) {
  gap: 16px;
  border: 0;
  background: transparent;
}
body.slc-refined-page :is(
  .service-detail-grid, .business-focus-grid, .about-value-grid,
  .guide-plan-grid, .guide-spot-grid, .subsidy-fee-grid, .topic-seed-grid
) > article,
body.slc-refined-page .guide-route-grid > a,
body.slc-refined-page .info-category-grid > .info-category-card {
  min-width: 0;
  border: 1px solid #dce4eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(16, 42, 67, .025);
}
body.slc-refined-page .guide-plan-grid > article {
  border-top: 3px solid var(--blue);
}
body.slc-refined-page .guide-plan-grid > article.featured {
  border-top-color: var(--gold);
}
body.slc-refined-page .guide-route-grid > a:hover,
body.slc-refined-page .info-category-grid > .info-category-card:hover {
  background: #f7f9fb;
  border-color: #b8c8d6;
}
body.slc-refined-page :is(
  .business-focus-grid, .about-value-grid, .guide-route-grid,
  .info-category-grid, .topic-seed-grid
) strong {
  font-weight: 600;
}

/* Remove the old serif numerals without restyling body-text spans. */
body.slc-refined-page :is(
  .service-detail-grid, .business-focus-grid, .about-value-grid,
  .guide-spot-grid, .subsidy-fee-grid, .topic-seed-grid
) > article > span,
body.slc-refined-page .guide-route-grid > a > span,
body.slc-refined-page .info-category-card > span,
body.slc-refined-page .privacy-policy-list > article > span {
  color: #526b83;
  font-family: Manrope, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}
body.slc-refined-page .service-flow-grid > article > span,
body.slc-refined-page .guide-flow-grid > article > span {
  color: #d4e1ec;
  font-family: Manrope, Arial, sans-serif;
  font-weight: 600;
  border-color: rgba(212, 225, 236, .4);
  background: rgba(212, 225, 236, .08);
}
body.slc-refined-page .contact-expectations li > span,
body.slc-refined-page .fee-simulator-steps li > span,
body.slc-refined-page .fee-simulator-form legend > span {
  font-family: Manrope, Arial, sans-serif;
  font-weight: 600;
}

/* Forms and long-form information retain readable type and existing semantics. */
body.slc-refined-page .contact-form-section {
  background: #f7f9fb;
}
body.slc-refined-page .contact-page-main .line-contact-card {
  border-color: #dce4eb;
  border-radius: 10px;
  background: #edf2f6;
}
body.slc-refined-page .line-message-template,
body.slc-refined-page .guide-first-year-example {
  border-color: #dce4eb;
  border-radius: 10px;
}
body.slc-refined-page .fee-simulator-form,
body.slc-refined-page .fee-simulator-result {
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(16, 42, 67, .025);
}
body.slc-refined-page .slc-post-content blockquote {
  border-left-color: #526b83;
}
body.slc-refined-page .slc-post-disclaimer {
  border: 1px solid #dce4eb;
  border-radius: 10px;
}

@media (max-width: 520px) {
  body.slc-refined-page main .button,
  body.slc-refined-page .line-contact-card .line-contact-button {
    padding-inline: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.slc-refined-page main .button { transition: none; }
}

/* First Hire: keep a two-line title without enlarging the opening photograph. */
@media (min-width: 821px) {
  body.slc-refined-page .first-hire-hero {
    min-height: 410px;
    padding-top: 56px;
    padding-bottom: 46px;
  }
}
@media (min-width: 1025px) {
  body.slc-refined-page .first-hire-hero {
    background-color: #f4f7fa;
    background-size: cover, auto 100%;
    background-position: center, right center;
    background-repeat: no-repeat;
  }
  body.slc-refined-page .first-hire-hero .subpage-lead {
    max-width: 640px;
  }
}

/* Page-specific original photo illustrations. Keep the established wash and
   the approved First Hire image sizing; TOP and Privacy are unchanged. */
body.slc-refined-page .services-overview-hero {
  background-image: var(--visual-photo-wash), url("./assets/hero-services-distinct-20261002.png");
}
body.slc-refined-page .first-hire-hero {
  background-image: var(--visual-photo-wash), url("./assets/hero-first-hire-distinct-20261002.png");
}
body.slc-refined-page .salon-support-hero {
  background-image: var(--visual-photo-wash), url("./assets/hero-salon-distinct-20261002.png");
}
body.slc-refined-page .about-photo-hero {
  background-image: var(--visual-photo-wash), url("./assets/hero-about-distinct-20261002.png");
}
body.slc-refined-page .guide-hero {
  background-image: var(--visual-photo-wash), url("./assets/hero-guide-distinct-20261002.png");
}
body.slc-refined-page .information-hero {
  background-image: var(--visual-photo-wash), url("./assets/hero-information-distinct-20261002.png");
}
body.slc-refined-page .contact-form-hero {
  background-image: var(--visual-photo-wash), url("./assets/hero-contact-distinct-20261002.png");
}

/* Keep longer copy readable over the new darker tablet and seating motifs. */
body.slc-refined-page .information-hero {
  --visual-photo-wash: linear-gradient(90deg, rgba(244,247,250,.97), rgba(244,247,250,.9) 42%, rgba(244,247,250,.8) 72%, rgba(244,247,250,.6));
}
body.slc-refined-page .contact-form-hero .consultation-terms {
  max-width: 760px;
}
@media (max-width: 820px) {
  body.slc-refined-page .subpage-hero:not(.privacy-hero) {
    --visual-photo-wash: linear-gradient(90deg, rgba(244,247,250,.98), rgba(244,247,250,.96) 42%, rgba(244,247,250,.86) 72%, rgba(244,247,250,.8));
  }
}
@media (min-width: 1025px) {
  body.slc-refined-page .first-hire-hero {
    /* Fade the left edge of the 410px-high, right-aligned photograph. */
    --visual-photo-wash: linear-gradient(90deg, #f4f7fa calc(100% - 730px), #f4f7fa calc(100% - 710px), rgba(244,247,250,.85) calc(100% - 600px), rgba(244,247,250,.4) calc(100% - 360px), rgba(244,247,250,.13));
  }
}

/* Meaningful mobile line breaks, without changing Japanese copy or desktop. */
@media (max-width: 520px) {
  body.slc-refined-page .mobile-title-line {
    display: block;
  }
  body.slc-refined-page .mobile-phrase {
    display: inline-block;
    max-width: 100%;
    vertical-align: baseline;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
  }
  body.slc-refined-page .subpage-lead,
  body.slc-refined-page .consultation-terms {
    text-wrap: pretty;
  }
  body.slc-refined-page .section-kicker {
    word-break: normal;
    overflow-wrap: normal;
  }
  body.slc-refined-page .about-practice-summary h2 {
    font-size: clamp(22px, 6.15vw, 27px) !important;
  }
  body.slc-refined-page .about-practice-summary > p:not(.section-kicker) {
    text-wrap: balance;
  }
}
@media (max-width: 479px) {
  body.slc-refined-page .services-overview-hero .services-hero-title,
  body.slc-refined-page .salon-support-hero .salon-hero-title {
    font-size: clamp(24px, 7.6vw, 32px) !important;
  }
}
@media (max-width: 360px) {
  body.slc-refined-page .subpage-hero h1 {
    font-size: 28px !important;
  }
}