.services-directory article > a { cursor: pointer; border-radius: 8px; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.services-directory article > a:hover,
.services-directory article > a:focus-visible { border-color: #235de8; background: #f7faff; box-shadow: 0 4px 18px #235de814; }
.services-directory article > a:hover h2,
.services-directory article > a:focus-visible h2 { color: #235de8; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.service-directory-action { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 25px; }
.service-directory-meta { font-size: 14px; color: #68758a; line-height: 1.8; }
.services-directory .service-directory-cta { font-size: 16px; padding: 14px 22px; max-width: 100%; box-sizing: border-box; text-align: center; letter-spacing: 0; }
.services-directory article > a:hover .service-directory-cta,
.services-directory article > a:focus-visible .service-directory-cta { background: #174bc6!important; }
@media (max-width: 700px) { .services-directory .service-directory-cta { width: 100%; } .service-directory-action { align-items: stretch; } }
@media (prefers-reduced-motion: reduce) { .services-directory article > a { transition: none; } }
.service-detail-page .d2-main { color: #242d32; }
.service-detail-page .d2-main h1,
.service-detail-page .d2-main h2,
.service-detail-page .d2-main h3,
.service-detail-page .d2-main p,
.service-detail-page .d2-main a,
.service-detail-page .d2-main th,
.service-detail-page .d2-main td,
.home-service-evidence { letter-spacing: 0; }
.service-detail-page .service-hero { padding-bottom: 38px; }
.service-detail-page .service-hero h1 { font-size: 44px; line-height: 1.4; overflow-wrap: anywhere; }
.service-detail-page .service-hero img { height: 440px; object-position: center; }
.service-detail-page .service-hero figure { min-width: 0; }
.service-detail-page .service-hero .service-hero-area { font-size: 15px; color: #336a57; font-weight: 700; margin-bottom: 24px; }
.service-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.service-hero-actions .solid-link { padding: 15px 22px; }
.service-detail-page .guide-toc { font-size: 15px; gap: 14px 26px; }
.service-detail-page .service-answer { background: none; border: 0; border-radius: 0; padding: 46px 0 30px; margin: 0; }
.service-detail-page .service-answer h2,
.service-detail-page .guide-explain h2,
.service-detail-page .guide-section h2,
.service-detail-page .service-scope h2,
.service-detail-page .service-time h2,
.service-detail-page .care-box h2,
.service-detail-page .consultation-guide h2,
.service-detail-page .service-area h2,
.service-detail-page .knowledge-faq h2,
.service-detail-page .related-services h2 { font-size: 30px; line-height: 1.5; }
.service-detail-page .answer-lead { font-size: 18px; max-width: 940px; margin-bottom: 26px; color: #52605e; }
.service-detail-page .service-facts { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px; }
.service-detail-page .service-facts dt { color: #35654f; font-size: 14px; }
.service-detail-page .service-facts dd { font-size: 15px; }
.service-detail-page .guide-explain { padding: 35px 0 38px; max-width: 920px; }
.service-detail-page .guide-explain > p:last-child { font-size: 18px; }
.service-detail-page .guide-section,
.service-detail-page .service-scope { padding: 48px 0; }
.service-detail-page .renew-scope-body { padding: 0; }
.service-detail-page .renew-scope-body dl { column-gap: 38px; row-gap: 0; }
.service-detail-page .renew-scope-body dl > div { background: none; border-radius: 0; border-top: 1px solid #dce3de; padding: 22px 0; }
.service-detail-page .renew-scope-body dt { font-size: 20px; }
.service-detail-page .renew-note { background: #f1f5f1; border-radius: 0; margin: 16px 0 0; }
.service-detail-page .renew-note strong { color: #35654f; }
.material-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 28px; }
.material-grid article { display: flex; flex-direction: column; padding: 24px 20px; border: 1px solid #dce3de; border-radius: 8px; background: #fff; }
.material-grid article:nth-child(even) { background: #f5f7f4; }
.material-grid h3 { font-size: 23px; margin: 10px 0 16px; }
.material-grid article > p:not(.material-label) { font-size: 16px; line-height: 1.85; color: #59675f; margin: 0 0 24px; }
.material-grid .material-label { margin: 0; color: #397458; font-size: 12px; font-weight: 700; }
.material-grid .text-link { margin-top: auto; font-size: 14px; align-self: start; }
.material-note { font-size: 14px; color: #69756e; line-height: 1.8; margin-top: 20px; }
.grout-colors { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; margin: 30px 0 20px; }
.grout-colors h3 { font-size: 19px; margin: 18px 0 10px; }
.grout-colors p { font-size: 15px; color: #66726e; margin: 0; }
.grout-swatch { display: block; width: 60px; height: 60px; border-radius: 50%; border: 1px solid #cad1cd; }
.swatch-light { background: #f5f3ed; }
.swatch-gray { background: #acb1b2; }
.swatch-gold { background: #c1ac76; }
.swatch-dark { background: #414644; }
.service-manufacturer { display: block; border-top: 1px solid #dce3de; }
.service-manufacturer > div { max-width: 720px; }
.service-manufacturer > .material-grid { max-width: none; }
.service-manufacturer p:not(.d2-kicker) { color: #5b6961; }
.service-manufacturer > a { flex-shrink: 0; }
.service-comparison-details { border-block: 1px solid #dce3de; padding: 20px 0; scroll-margin-top: 110px; }
.service-comparison-details summary { cursor: pointer; font-size: 18px; font-weight: 700; line-height: 1.8; }
.service-detail-page .cost-grid { gap: 0 38px; margin-top: 22px; }
.service-detail-page .cost-grid article { background: none; border-radius: 0; border-top: 1px solid #dce3de; padding: 22px 0; }
.service-detail-page .cost-grid h3 { font-size: 20px; margin: 8px 0 12px; }
.service-detail-page .cost-grid p { margin: 0; font-size: 16px; }
.service-detail-page .cost-grid article > span { font-size: 13px; }
.elastic-price-wrap { margin: 28px 0 36px; }
.elastic-price-table { width: 100%; table-layout: fixed; border-collapse: collapse; color: #26372d; }
.elastic-price-table caption { text-align: left; font-size: 14px; color: #647068; padding-bottom: 12px; }
.elastic-price-table th,
.elastic-price-table td { padding: 21px 24px; border-bottom: 1px solid #d8e2da; }
.elastic-price-table th { text-align: left; width: 40%; }
.elastic-price-table thead { background: #eaf1eb; }
.elastic-price-table thead th:not(:first-child) { width: 30%; text-align: right; }
.elastic-price-table tbody th { font-size: 19px; }
.elastic-price-table td { font-size: 28px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.elastic-price-table td small { font-size: 15px; font-weight: 400; margin-left: 5px; }
.price-room-guide { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 18px 0 0; font-size: 14px; }
.price-room-guide > div { display: flex; gap: 10px; }
.price-room-guide dt { font-weight: 700; flex-shrink: 0; }
.price-room-guide dd { margin: 0; color: #58665e; }
.service-detail-page .service-note { background: #f3f6f3; color: #53625a; border-left-color: #64957a; margin-bottom: 28px; }
.service-benefit { padding: 22px 0 24px; margin: 0 0 24px; border-bottom: 1px solid #dce3de; }
.service-benefit > strong { font-size: 14px; color: #397458; }
.service-benefit p { margin: 6px 0; font-size: 20px; font-weight: 700; }
.service-benefit small { font-size: 14px; color: #66726e; }
.service-detail-page .service-time { border: 0; border-block: 1px solid #dce3de; border-radius: 0; padding: 32px 0; margin: 0; }
.service-detail-page .guide-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 38px; margin-top: 25px; }
.service-detail-page .guide-steps li { gap: 20px; }
.service-detail-page .guide-steps h3 { font-size: 20px; }
.service-detail-page .guide-steps li > span { font-size: 22px; }
.service-detail-page .guide-steps p { font-size: 16px; }
.service-detail-page .care-box { border-radius: 0; background: #f3f6f3; margin: 0; padding: 30px; }
.service-detail-page .care-box ul { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 40px; font-size: 16px; }
.service-detail-page .knowledge-faq { padding: 60px 0; gap: 40px; }
.service-detail-page .knowledge-faq summary { font-size: 17px; }
.service-detail-page .knowledge-faq details p { font-size: 16px; }
.service-detail-page .consultation-guide { padding: 40px 0; border-top: 1px solid #dce3de; gap: 45px; }
.service-detail-page .consultation-guide li { font-size: 16px; padding-block: 12px; }
.service-detail-page .service-area { background: #f3f6f3; color: #253b2e; border-radius: 0; padding: 30px; }
.service-detail-page .service-area p:not(.d2-kicker) { color: #53665a; font-size: 16px; }
.service-detail-page .service-area a { color: #245b3e; }
.service-photo-section { padding: 24px 0 35px; }
.service-photo-section header { max-width: 840px; margin-bottom: 28px; }
.service-photo-section h2 { font-size: 30px; line-height: 1.5; letter-spacing: 0; margin: 0 0 15px; }
.service-photo-section header > p:last-child { font-size: 17px; color: #5e6c64; }
.service-photo-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.service-photo-grid figure { margin: 0; min-width: 0; }
.service-photo-grid a { display: block; }
.service-photo-grid img { display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: contain; border-radius: 5px; }
.service-photo-grid figcaption { padding-top: 16px; }
.service-photo-grid figcaption span { display: block; font-size: 13px; font-weight: 700; color: #397458; margin-bottom: 5px; }
.service-photo-grid figcaption strong { font-size: 16px; font-weight: 500; line-height: 1.7; }
.home-service-evidence { padding-block: 60px; }
.service-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1000px) {
  .material-grid, .service-detail-page .service-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-detail-page .service-hero h1 { font-size: 38px; }
  .service-detail-page .service-hero img { height: 400px; }
  .service-manufacturer { display: block; }
  .service-manufacturer > a { margin-top: 15px; }
}
@media (max-width: 700px) {
  .service-detail-page .service-hero h1 { font-size: 32px; }
  .service-detail-page .service-hero img { height: 320px; }
  .service-detail-page .service-hero { gap: 26px; }
  .service-detail-page .service-hero .service-hero-area { font-size: 14px; }
  .service-detail-page .guide-toc { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px 8px; font-size: 14px; }
  .service-detail-page .service-answer { padding-top: 32px; }
  .service-detail-page .d2-main h2, .service-photo-section h2 { font-size: 25px; }
  .service-detail-page .answer-lead { font-size: 17px; }
  .service-detail-page .service-facts { grid-template-columns: 1fr; gap: 16px; }
  .service-detail-page .service-facts > div { display: grid; grid-template-columns: 75px 1fr; gap: 12px; padding-top: 14px; }
  .service-detail-page .service-facts dd { margin: 0; font-size: 14px; }
  .service-detail-page .guide-explain { padding: 15px 0 25px; }
  .service-detail-page .guide-explain > p:last-child { font-size: 17px; }
  .service-detail-page .guide-section, .service-detail-page .service-scope { padding: 32px 0; }
  .service-detail-page .renew-scope-body dl, .service-detail-page .guide-steps, .service-detail-page .care-box ul { grid-template-columns: 1fr; }
  .material-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
  .material-grid article { padding: 22px; }
  .material-grid article > p:not(.material-label) { margin-bottom: 16px; }
  .material-grid h3 { font-size: 22px; margin-bottom: 12px; }
  .grout-colors { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 20px; }
  .grout-colors h3 { font-size: 17px; }
  .elastic-price-table th, .elastic-price-table td { padding: 16px 10px; }
  .elastic-price-table tbody th { font-size: 16px; }
  .elastic-price-table td { font-size: 23px; }
  .elastic-price-table td small { font-size: 12px; margin-left: 2px; }
  .price-room-guide { display: grid; font-size: 13px; }
  .service-detail-page .care-box, .service-detail-page .service-area { padding: 24px 20px; }
  .service-detail-page .knowledge-faq { padding: 40px 0; gap: 20px; }
  .service-detail-page .consultation-guide { grid-template-columns: 1fr; gap: 15px; }
  .service-photo-grid { grid-template-columns: 1fr; gap: 25px; }
  .service-photo-grid figure { width: 100%; max-width: 440px; margin-inline: auto; }
  .service-photo-grid figcaption { padding-top: 10px; }
  .home-service-evidence { padding-block: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-detail-page { scroll-behavior: auto; }
}