/* ニャンコクリーニング｜サービス紹介
   HTML/CSS only. All images are local. No font or JavaScript dependency. */
:root {
  --blue:#0873c5; --blue-deep:#075b9d; --ink:#294e65; --text:#4c6a7c;
  --sky:#edf8ff; --sky-soft:#f6fbfe; --line:#dcecf6; --gold:#ab813f;
  --paw:#f4c478; --green:#178b4e; --max:1184px; --radius:22px;
  --font:'Hiragino Maru Gothic ProN','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,'Noto Sans CJK JP',sans-serif;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:114px; }
body { margin:0; background:#fff; color:var(--text); font:15px/1.95 var(--font); -webkit-text-size-adjust:100%; }
h1,h2,h3,p,figure,ul,ol,dl,dd { margin:0; } ul,ol { padding:0; }
h1,h2,h3 { color:var(--blue); line-height:1.55; letter-spacing:.025em; }
a { color:var(--blue); text-underline-offset:4px; }
a:hover { text-decoration:none; }
a,button,summary { -webkit-tap-highlight-color:transparent; }
a:focus-visible,summary:focus-visible { outline:3px solid #8b600d; outline-offset:5px; }
img { max-width:100%; height:auto; display:block; }
.container { width:min(var(--max),calc(100% - 72px)); margin-inline:auto; }
.section { padding-block:82px; }
.ui-icon { display:inline-block; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:middle; }
.paw { fill:var(--paw); stroke:none; }
.illustration { width:100%; height:100%; object-fit:contain; }
.eyebrow { font-family:Arial,sans-serif; font-size:11px; font-weight:600; letter-spacing:.22em; color:var(--blue); line-height:1.4; }
.skip-link { position:fixed; z-index:100; padding:10px 22px; background:white; top:-70px; left:20px; border:2px solid var(--blue); }
.skip-link:focus { top:10px; }
/* Header */
.site-header { background:rgba(255,255,255,.98); position:sticky; top:0; z-index:30; border-bottom:1px solid #e9f1f6; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:94px; }
.brand-link { color:var(--blue); text-decoration:none; flex-shrink:0; }
.brand { display:inline-flex; align-items:center; gap:10px; }
.brand-cat { width:50px; height:auto; }
.brand-words { display:flex; flex-direction:column; gap:4px; }
.brand-words strong { font-size:19px; line-height:1.4; letter-spacing:.015em; }
.brand-words > img { width:117px; height:15px; object-fit:contain; object-position:left; }
.desktop-nav ul { list-style:none; display:flex; gap:17px; align-items:center; }
.desktop-nav a { color:var(--ink); font-size:12px; font-weight:600; text-decoration:none; min-height:48px; display:flex; align-items:center; border-bottom:2px solid transparent; white-space:nowrap; }
.desktop-nav a:hover,.desktop-nav a[aria-current] { border-color:var(--blue); color:var(--blue); }
.header-contact { flex:none; }
.header-tel { display:flex; gap:6px; align-items:center; justify-content:center; text-decoration:none; font:700 24px/1.3 Arial,sans-serif; margin-bottom:8px; }
.header-tel .ui-icon { width:19px; height:19px; }
.header-contact > div { display:flex; gap:7px; }
.mini-button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:30px; padding:5px 12px; border-radius:30px; color:white; text-decoration:none; font-size:10px; font-weight:600; }
.mini-button .ui-icon { width:15px; height:15px; }
.mini-line { background:var(--green); } .mini-blue { background:var(--blue); }
.mobile-menu { display:none; }
/* Buttons */
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:47px; padding:10px 25px; border-radius:40px; border:1px solid var(--blue); font-weight:600; line-height:1.7; text-decoration:none; transition:background-color .18s,box-shadow .18s; }
.outline-button { background:#fff; color:var(--blue); }
.outline-button:hover { background:var(--sky); }
.blue-button { color:white; background:var(--blue); }
.line-button { color:white; background:var(--green); border-color:var(--green); }
.phone-button { color:var(--blue); background:white; border-color:#bddcf0; }
.button:hover { box-shadow:0 5px 14px #06487312; }
/* Hero follows the accepted blue/white photographic composition. */
.hero { position:relative; isolation:isolate; background:#ecf8ff; min-height:510px; overflow:hidden; }
.hero-photo { position:absolute; inset:0 0 0 auto; z-index:-3; width:64%; height:100%; object-fit:cover; object-position:58% 46%; }
.hero-shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,#eef9ff 0%,#f0faff 28%,#f0faffdf 42%,#f4fbff80 54%,#fff0 76%); }
.hero::after { content:''; position:absolute; left:-1%; right:-1%; bottom:-19px; height:44px; background:white; border-radius:50% 50% 0 0; z-index:-1; }
.hero-inner { position:relative; padding-block:22px 65px; }
.breadcrumb { display:flex; gap:12px; font-size:11px; padding-bottom:30px; }
.breadcrumb a { color:var(--text); text-decoration:none; }
.breadcrumb > span[aria-hidden] { color:#9ebaca; }
.hero-copy { max-width:615px; }
.hero-copy h1 { font-size:17px; margin-top:6px; letter-spacing:.06em; }
.hero-catch { font-size:clamp(30px,3.2vw,44px); line-height:1.7; font-weight:700; color:var(--blue); letter-spacing:.045em; margin-block:22px 16px; }
.hero-intro { max-width:480px; font-size:14px; line-height:2; }
.hero-points { display:flex; flex-wrap:wrap; gap:8px 17px; margin-top:18px; font-size:12px; color:var(--blue); }
.hero-points > span { display:inline-flex; align-items:center; gap:5px; }
.hero-points .ui-icon { width:15px; height:15px; }
.hero-button { margin-top:25px; font-size:13px; min-height:44px; padding-inline:23px; }
.hero-cat { position:absolute; bottom:35px; left:54%; display:flex; align-items:flex-start; flex-direction:row-reverse; gap:6px; }
.hero-cat img { width:88px; }
.hero-cat span { color:var(--blue); font-size:11px; padding:5px 15px; background:white; border:1px solid var(--line); border-radius:50px; transform:rotate(-8deg); }
/* Shared heading and three-service overview */
.section-heading { text-align:center; margin-bottom:38px; }
.heading-row { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:10px; }
.heading-row .paw { width:24px; height:24px; transform:rotate(-14deg); }
.heading-row .paw:last-child { transform:rotate(14deg); }
.heading-row h2 { font-size:29px; }
.heading-description { margin-top:12px; font-size:14px; }
.overview { padding-top:66px; padding-bottom:60px; }
.service-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.service-card { border:1px solid #edf3f8; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 8px 23px #315e7c07; display:flex; flex-direction:column; }
.card-photo { position:relative; }
.card-photo > img { width:100%; aspect-ratio:1.75; object-fit:cover; }
.service-card:first-child .card-photo > img { object-position:50% 21%; }
.service-card:last-child .card-photo > img { object-position:50% 70%; }
.audience { position:absolute; top:12px; left:12px; background:var(--blue); color:white; font-size:11px; line-height:1.5; border-radius:50px; padding:6px 14px; }
.card-copy { padding:21px 21px 24px; text-align:center; flex:1; display:flex; align-items:center; flex-direction:column; }
.card-copy h3 { font-size:19px; letter-spacing:0; }
.card-copy p { color:var(--text); line-height:1.9; margin-block:9px 18px; font-size:14px; }
.card-copy .button { min-height:38px; font-size:12px; width:90%; padding-block:6px; margin-top:auto; }
.card-copy .button .ui-icon { width:17px; height:17px; }
.page-links { display:flex; justify-content:center; gap:16px 32px; flex-wrap:wrap; margin-top:28px; }
.page-links a { text-decoration:none; font-size:12px; border-bottom:1px solid #c7e5f8; min-height:38px; display:flex; align-items:center; }
/* Service details */
.service-detail { border-top:1px solid #eef4f8; padding-block:88px 70px; }
.service-washer { background:linear-gradient(180deg,#f7fcff,#fff 90%); }
.service-intro { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:62px; }
.service-text { min-width:0; }
.service-commercial .service-text,.service-washer .service-text { order:2; }
.service-kicker { display:flex; gap:17px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
.service-number { font:300 44px/1 Arial,sans-serif; color:#59aadf; }
.service-audience { display:inline-block; color:var(--blue); background:var(--sky); padding:5px 14px; border-radius:30px; font-size:12px; }
.service-text > .eyebrow { font-size:10px; margin-bottom:9px; }
.service-text h2 { font-size:27px; letter-spacing:0; }
.service-catch { color:var(--blue); font-size:17px; font-weight:600; margin-top:16px; }
.service-description { font-size:14px; line-height:2.15; margin-top:16px; }
.service-photo { min-width:0; position:relative; padding-bottom:23px; }
.main-service-photo { width:100%; aspect-ratio:1.4; object-fit:cover; border-radius:25px; }
.service-commercial .main-service-photo { object-position:50% 26%; }
.service-household .main-service-photo { object-position:42% 40%; }
.service-washer .main-service-photo { object-position:50% 65%; }
.inset-photo { position:absolute; width:33%; aspect-ratio:1.42; object-fit:cover; right:-14px; bottom:4px; border:6px solid white; border-radius:16px; box-shadow:0 6px 17px #3c678016; }
.service-photo figcaption { font-size:10px; color:#718b9a; margin-top:10px; }
.features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin-top:46px; margin-bottom:37px; }
.feature { padding-right:15px; }
.feature+.feature { border-left:1px solid var(--line); padding-left:28px; }
.feature-art { display:block; width:62px; height:62px; margin-bottom:12px; }
.feature-art .illustration { border-radius:50%; }
.feature h3 { font-size:17px; margin-bottom:9px; letter-spacing:0; }
.feature p { font-size:13px; line-height:2.05; }
/* Illustrated cleaning process, number and labels are editable HTML. */
.process { background:#f1f9fd; border-radius:22px; padding:30px 34px 25px; }
.process-header { display:flex; align-items:center; gap:34px; }
.process-header > div { flex-shrink:0; }
.process-header .eyebrow { font-size:10px; margin-bottom:4px; }
.process-header h3 { font-size:20px; }
.process-header > p { font-size:13px; }
.process-steps { list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:25px; margin-top:25px; }
.process-steps li { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; }
.process-art { position:relative; width:110px; height:110px; border-radius:50%; background:linear-gradient(160deg,#e6f5ff,#fff); margin-bottom:11px; padding:19px 7px 7px; }
.step-number { position:absolute; z-index:1; display:grid; place-items:center; top:-6px; left:50%; transform:translateX(-50%); width:30px; height:30px; border-radius:50%; background:#dff3ff; color:var(--blue); font:500 13px/1 Arial,sans-serif; border:3px solid #f1f9fd; }
.process-label { color:var(--ink); font-size:13px; font-weight:600; line-height:1.7; }
.process-steps li:not(:last-child)::after { content:''; position:absolute; right:-16px; top:46px; width:7px; height:7px; border-right:2px solid #67afe0; border-top:2px solid #67afe0; transform:rotate(45deg); }
.support-note { display:flex; align-items:flex-start; gap:8px; margin-top:22px; font-size:12px; }
.support-note .ui-icon { color:var(--blue); width:18px; height:18px; margin-top:3px; }
.certificate-link { margin-top:14px; display:flex; align-items:center; justify-content:flex-end; gap:8px; font-size:12px; min-height:32px; }
.certificate-link .ui-icon { width:17px; }
.service-consult { margin-top:24px; border:1px solid #bddcf0; background:white; border-radius:15px; }
summary { cursor:pointer; list-style:none; }
summary::-webkit-details-marker { display:none; }
.service-consult > summary { padding:19px 24px; display:flex; gap:17px; align-items:center; justify-content:space-between; color:var(--blue); font-weight:600; min-height:66px; font-size:14px; }
.service-consult > summary > span:first-child { display:flex; align-items:center; gap:11px; }
.open-close { display:block; width:16px; height:16px; position:relative; flex-shrink:0; }
.open-close::before,.open-close::after { content:''; position:absolute; width:14px; height:1.5px; background:var(--blue); left:1px; top:7px; }
.open-close::after { transform:rotate(90deg); }
details[open] > summary .open-close::after { transform:none; }
.service-consult[open] > summary { background:#f6fbff; border-radius:15px 15px 0 0; }
.consult-body { border-top:1px solid var(--line); padding:25px; }
.consult-body > p:first-child { text-align:center; margin-bottom:20px; font-size:13px; }
.back-link { display:flex; justify-content:center; align-items:center; gap:5px; width:max-content; max-width:100%; min-height:34px; font-size:11px; margin:16px auto 0; }
.back-link .ui-icon { width:14px; height:14px; }
/* Certificate: generous whitespace with the document centered. */
.certificate { background:linear-gradient(135deg,#f3faff 0%,#fffefa 48%,#edf8ff 100%); border-block:1px solid #eaf3f8; text-align:center; }
.certificate-heading h2 { font-size:25px; margin-top:6px; }
.certificate-english { font-family:Georgia,'Times New Roman',serif; font-size:30px; line-height:1.5; color:var(--gold); letter-spacing:.055em; }
.certificate-catch { font-size:30px; color:var(--blue); font-weight:600; margin-top:22px; letter-spacing:.07em; }
.certificate-description { max-width:750px; margin:20px auto 0; font-size:14px; line-height:2.1; }
.certificate-figure { width:min(100%,412px); margin:35px auto 0; }
.certificate-frame { padding:12px; background:linear-gradient(135deg,#e9e5dc,#fff 15%,#e8e5df 50%,#fff 83%,#dbd7cf); border:1px solid #d7d1c5; box-shadow:0 10px 30px #51514316; }
.certificate-paper { position:relative; border:1px solid #bca474; padding:29px 29px 28px; background:#fffefd; outline:1px solid #e6d6b6; outline-offset:-5px; }
.sample { display:inline-block; color:#947342; letter-spacing:.18em; font:10px Arial,sans-serif; border:1px solid #dfceb1; padding:5px 11px; border-radius:20px; }
.sample > span { font-size:9px; letter-spacing:0; margin-left:7px; }
.certificate-paw { display:block; width:23px; height:23px; margin:15px auto 10px; fill:#b39153; }
.certificate-paper-en { font:24px/1.12 Georgia,'Times New Roman',serif; color:var(--blue-deep); letter-spacing:.075em; }
.certificate-paper h3 { font-size:13px; font-weight:600; line-height:1.8; margin-top:13px; }
.certificate-fields { display:grid; gap:11px; margin-block:24px 18px; }
.certificate-fields > div { display:grid; grid-template-columns:90px 1fr; align-items:end; gap:9px; text-align:left; font-size:9px; line-height:1.7; }
.certificate-fields dd { border-bottom:1px solid #cdc6b9; color:#566e7c; padding-bottom:4px; white-space:nowrap; font-size:9px; }
.certificate-paper-text { font-size:10px; line-height:1.9; }
.certificate-paper-brand { margin-top:20px; }
.certificate-paper-brand .brand { gap:7px; }
.certificate-paper-brand .brand-cat { width:31px; }
.certificate-paper-brand .brand-words strong { font-size:13px; }
.certificate-paper-brand .brand-words > img { width:85px; height:11px; }
.certificate-figure figcaption { font-size:10px; margin-top:13px; color:#7a8d98; }
.certificate-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; list-style:none; max-width:975px; margin:40px auto 0; text-align:left; }
.certificate-points li { display:flex; gap:12px; align-items:flex-start; }
.certificate-points .illustration { width:45px; height:45px; flex:none; border-radius:50%; }
.certificate-points p { font-size:13px; line-height:2; }
.certificate-bottom { margin-top:30px; }
.certificate-bottom > p:first-child { max-width:680px; margin:auto; font-size:14px; }
.certificate-bottom .button { margin-top:20px; font-size:13px; }
.certificate-issuer { font-size:10px; color:#7b8c96; margin-top:13px; }
/* Reasons and illustration-led flow */
.reasons { padding-bottom:60px; }
.reason-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; }
.reason-card { background:linear-gradient(145deg,#f2faff,#f8fcff); border-radius:24px; text-align:center; padding:24px 28px 27px; }
.reason-number { display:block; font:500 17px/1.3 Arial,sans-serif; color:var(--blue); margin-bottom:10px; }
.reason-card h3 { font-size:18px; min-height:55px; }
.reason-art { height:102px; width:114px; margin:13px auto 20px; }
.reason-card p { font-size:13px; text-align:left; line-height:2; }
.flow { padding-block:35px 65px; }
.flow .section-heading { margin-bottom:52px; }
.flow-steps { list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px; }
.flow-step { position:relative; min-width:0; }
.flow-art { width:164px; height:164px; padding:26px 10px 10px; border-radius:50%; background:linear-gradient(140deg,#edf9ff,#f6fbff); position:relative; margin:0 auto 21px; }
.flow-art > .step-number { width:40px; height:40px; font-size:18px; top:-9px; border:3px solid #fff; }
.flow-text h3 { font-size:16px; text-align:center; margin-bottom:12px; letter-spacing:0; }
.flow-text p { font-size:13px; line-height:1.95; }
.flow-step:not(:last-child)::after { content:''; position:absolute; right:-17px; top:77px; width:8px; height:8px; border-right:2px solid #67afe0; border-top:2px solid #67afe0; transform:rotate(45deg); }
/* Estimate, FAQ and contact */
.estimate { padding-top:0; padding-bottom:66px; }
.estimate-box { border:1px solid var(--line); border-radius:22px; padding:29px 35px; display:grid; grid-template-columns:83px 1fr auto; align-items:center; gap:26px; background:#fbfdff; }
.estimate-art { width:83px; height:83px; }
.estimate-box h2 { font-size:22px; margin-top:7px; }
.estimate-box > div > p:last-child { font-size:13px; margin-top:10px; }
.estimate-box .button { font-size:13px; padding-inline:20px; }
.narrow { max-width:920px; }
.faq { background:#fbfdff; border-block:1px solid #eef5fa; padding-block:58px 65px; }
.faq-list { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item summary { display:flex; gap:16px; align-items:center; padding:22px 14px; color:var(--ink); font-size:15px; line-height:1.8; }
.faq-item summary > span:nth-child(2) { flex:1; }
.qa-letter { font:500 19px/1 Arial,sans-serif; color:var(--blue); flex:none; }
.faq-answer { display:flex; align-items:flex-start; gap:18px; padding:4px 14px 25px; font-size:14px; }
.faq-answer .qa-letter { color:#af8c50; margin-top:5px; }
.contact { background:linear-gradient(180deg,#eef9ff,#e5f5ff); padding-block:67px 59px; }
.contact-heading { display:flex; align-items:center; justify-content:center; gap:24px; margin-bottom:30px; }
.contact-heading > img { width:77px; height:auto; }
.contact-heading > div { text-align:center; }
.contact-heading h2 { font-size:28px; margin-top:7px; }
.contact-heading p:last-child { font-size:13px; margin-top:10px; }
.contact-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:1000px; margin:auto; }
.contact-buttons .button { padding:14px 17px; min-height:79px; border-radius:44px; }
.contact-buttons .ui-icon { width:27px; height:27px; }
.contact-buttons strong { display:block; font-size:15px; line-height:1.4; }
.contact-buttons small { display:block; font-size:10px; font-weight:400; line-height:1.6; margin-top:5px; }
.contact-buttons .phone-button strong { font:700 23px/1.2 Arial,sans-serif; white-space:nowrap; }
.small-note { font-size:11px; text-align:center; margin-top:17px; }
/* Footer: no fictitious address or opening hours. */
.site-footer { background:#f5fbff; padding-top:47px; }
.footer-columns { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:52px; padding-bottom:38px; }
.footer-company address { font-style:normal; font-size:12px; line-height:2.05; margin-top:19px; }
.footer-company address strong { color:var(--ink); }
.footer-nav h2 { font-size:13px; margin-top:4px; margin-bottom:17px; }
.footer-nav ul { list-style:none; display:grid; gap:7px; }
.footer-nav a { color:var(--text); font-size:12px; text-decoration:none; display:inline-block; min-height:28px; }
.footer-nav a:hover { color:var(--blue); text-decoration:underline; }
.footer-tail { display:flex; align-items:center; justify-content:space-between; gap:25px; border-top:1px solid var(--line); padding-block:20px; }
.footer-tail > small { font:10px Arial,sans-serif; color:#667c8a; }
.back-top { display:inline-flex; gap:10px; align-items:center; font-size:10px; text-decoration:none; }
.back-top .ui-icon { border-radius:50%; background:var(--blue); color:white; width:34px; height:34px; padding:8px; }
.mobile-contact { display:none; }
/* Tablet: never shrink a complete desktop page as a single image. */
@media (max-width:1240px) {
  .header-inner { gap:16px; }
  .brand-words strong { font-size:17px; }
  .brand-cat { width:44px; }
  .desktop-nav ul { gap:12px; }
  .desktop-nav a { font-size:11px; }
  .header-tel { font-size:22px; }
  .mini-button { font-size:9px; padding-inline:10px; }
}
@media (max-width:1099px) {
  .site-header { position:relative; }
  .header-inner { position:relative; flex-wrap:wrap; padding-block:17px; min-height:80px; row-gap:0; }
  .desktop-nav,.header-contact { display:none; }
  .mobile-menu { display:block; width:100%; flex-basis:100%; }
  .mobile-menu summary { position:absolute; top:13px; right:0; width:50px; min-height:54px; color:var(--blue); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:9px; }
  .mobile-menu summary .ui-icon { width:28px; height:28px; }
  .mobile-menu[open] summary { background:var(--sky); border-radius:12px; }
  .mobile-menu nav { margin-top:18px; padding-block:6px 10px; border-top:1px solid var(--line); }
  .mobile-menu ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 30px; list-style:none; }
  .mobile-menu a { display:block; padding:12px 6px; color:var(--ink); text-decoration:none; border-bottom:1px solid #e9f2f8; font-size:14px; }
  .mobile-menu a[aria-current] { color:var(--blue); }
  .hero-catch { font-size:35px; }
  .hero-copy { max-width:510px; }
  .hero-intro { max-width:440px; }
  .hero-cat { left:59%; }
  .hero-cat img { width:70px; }
  .hero-cat span { display:none; }
  .card-copy h3 { font-size:16px; }
  .card-copy { padding-inline:15px; }
  .service-intro { gap:34px; }
  .service-text h2 { font-size:23px; }
  .service-catch { font-size:16px; }
  .service-description { font-size:13px; }
  .features { gap:20px; }
  .feature+.feature { padding-left:20px; }
  .feature h3 { font-size:16px; }
  .feature p { font-size:12px; }
  .process { padding:26px; }
  .process-steps { gap:20px; }
  .process-art { width:95px; height:95px; }
  .process-label { font-size:12px; }
  .process-steps li:not(:last-child)::after { top:43px; right:-12px; }
  .reason-card { padding-inline:20px; }
  .reason-card h3 { font-size:17px; }
  .flow-steps { gap:20px; }
  .flow-art { width:125px; height:125px; padding:23px 7px 7px; }
  .flow-art > .step-number { width:34px; height:34px; font-size:15px; }
  .flow-text h3 { font-size:14px; }
  .flow-text p { font-size:12px; }
  .flow-step:not(:last-child)::after { top:58px; right:-13px; }
  .estimate-box { grid-template-columns:75px 1fr; gap:20px; }
  .estimate-box > .button { grid-column:2; justify-self:start; }
  .contact-buttons { gap:10px; }
  .contact-buttons .button { gap:8px; padding-inline:12px; }
  .contact-buttons .ui-icon { width:23px; height:23px; }
  .contact-buttons .phone-button strong { font-size:19px; }
  .contact-buttons strong { font-size:13px; }
  .footer-columns { gap:30px; }
}
@media (max-width:767px) {
  html { scroll-padding-top:20px; }
  body { font-size:14px; padding-bottom:calc(74px + env(safe-area-inset-bottom)); }
  .container { width:calc(100% - 40px); }
  .section { padding-block:54px; }
  .header-inner { min-height:76px; padding-block:16px; }
  .brand-words strong { font-size:17px; }
  .brand { gap:7px; }
  .brand-cat { width:42px; }
  .brand-words > img { width:100px; height:13px; }
  .mobile-menu summary { top:10px; }
  .mobile-menu ul { display:block; }
  .hero { min-height:0; }
  .hero-inner { padding-block:17px 46px; }
  .hero-photo { width:100%; height:100%; object-position:64% 50%; }
  .hero-shade { background:linear-gradient(100deg,#eff9fff7,#eff9ffee 45%,#eff9ff99 100%); }
  .breadcrumb { font-size:10px; padding-bottom:26px; }
  .hero-copy { max-width:none; }
  .hero-copy h1 { font-size:16px; }
  .hero-catch { font-size:clamp(24px,6.65vw,35px); letter-spacing:.015em; line-height:1.75; margin-top:16px; margin-bottom:15px; }
  .hero-intro { font-size:13px; max-width:330px; }
  .hero-points { max-width:285px; gap:6px 14px; font-size:11px; margin-top:17px; }
  .hero-button { font-size:12px; margin-top:23px; padding-inline:18px; }
  .hero-cat { bottom:25px; left:auto; right:0; }
  .hero-cat img { width:59px; }
  .heading-row { gap:10px; }
  .heading-row .paw { width:18px; height:18px; }
  .heading-row h2 { font-size:23px; line-height:1.65; }
  .heading-description { font-size:12px; }
  .section-heading { margin-bottom:28px; }
  .eyebrow { font-size:10px; }
  .service-cards { grid-template-columns:1fr; gap:23px; }
  .service-card { border-radius:18px; }
  .card-photo > img { aspect-ratio:1.82; }
  .card-copy { padding:21px 22px 24px; }
  .card-copy h3 { font-size:19px; }
  .card-copy p { font-size:13px; }
  .card-copy .button { width:100%; min-height:43px; }
  .page-links { display:grid; grid-template-columns:1fr 1fr; gap:4px 17px; margin-top:22px; }
  .page-links a { font-size:11px; justify-content:center; min-height:41px; }
  .service-intro { display:flex; flex-direction:column; gap:28px; align-items:stretch; }
  .service-commercial .service-text,.service-washer .service-text { order:0; }
  .service-kicker { margin-bottom:15px; gap:14px; }
  .service-number { font-size:35px; }
  .service-audience { font-size:11px; padding-inline:12px; }
  .service-text h2 { font-size:24px; }
  .service-catch { font-size:16px; margin-top:13px; }
  .service-description { font-size:14px; margin-top:15px; line-height:2.05; }
  .service-photo { padding-bottom:20px; }
  .main-service-photo { aspect-ratio:1.5; border-radius:20px; }
  .inset-photo { right:-4px; border-width:5px; border-radius:13px; }
  .features { grid-template-columns:1fr; gap:24px; margin-top:28px; margin-bottom:29px; }
  .feature,.feature+.feature { display:grid; grid-template-columns:53px minmax(0,1fr); gap:14px; border:0; padding:0; }
  .feature-art { width:53px; height:53px; margin:0; }
  .feature h3 { font-size:16px; margin-bottom:7px; }
  .feature p { font-size:13px; }
  .process { padding:24px 20px 25px; border-radius:20px; }
  .process-header { display:block; }
  .process-header h3 { font-size:20px; }
  .process-header > p { margin-top:13px; font-size:13px; }
  .process-steps { grid-template-columns:1fr; gap:20px; margin-top:28px; }
  .process-steps li { flex-direction:row; text-align:left; gap:19px; min-height:80px; }
  .process-art { flex:none; width:83px; height:83px; margin:0; padding:19px 4px 4px; }
  .step-number { font-size:11px; width:27px; height:27px; top:-4px; }
  .process-label { font-size:14px; line-height:1.8; }
  .process-steps li:not(:last-child)::after { top:auto; bottom:-10px; right:auto; left:39px; width:6px; height:6px; transform:rotate(135deg); border-width:1.5px; }
  .support-note { font-size:11px; margin-top:18px; }
  .certificate-link { font-size:11px; justify-content:flex-start; }
  .service-consult { margin-top:21px; }
  .service-consult > summary { padding:18px 16px; font-size:13px; min-height:64px; }
  .service-consult > summary > span:first-child { gap:9px; }
  .service-consult > summary .ui-icon { width:20px; height:20px; }
  .consult-body { padding:20px 16px; }
  .consult-body > p:first-child { font-size:12px; }
  .certificate-english { font-size:24px; letter-spacing:.01em; }
  .certificate-heading h2 { font-size:22px; }
  .certificate-catch { font-size:24px; letter-spacing:0; margin-top:20px; }
  .certificate-description { text-align:left; font-size:13px; margin-top:17px; }
  .certificate-figure { width:calc(100% - 16px); max-width:350px; margin-top:29px; }
  .certificate-frame { padding:9px; }
  .certificate-paper { padding:24px 20px 23px; }
  .certificate-paper-en { font-size:23px; }
  .certificate-fields { gap:12px; margin-top:22px; }
  .certificate-fields > div { grid-template-columns:76px minmax(0,1fr); gap:5px; font-size:8px; }
  .certificate-fields dd { font-size:8px; }
  .certificate-paper-brand .brand-words strong { font-size:12px; }
  .certificate-paper-brand .brand-cat { width:28px; }
  .certificate-figure figcaption { font-size:9px; }
  .certificate-points { grid-template-columns:1fr; gap:22px; margin-top:29px; }
  .certificate-points .illustration { width:42px; height:42px; }
  .certificate-points p { font-size:13px; }
  .certificate-bottom > p:first-child { font-size:13px; text-align:left; }
  .certificate-issuer { font-size:9px; }
  .reason-cards { grid-template-columns:1fr; gap:22px; }
  .reason-card { padding:26px 27px 28px; }
  .reason-card h3 { min-height:0; font-size:20px; }
  .reason-art { height:106px; width:122px; margin-block:15px 17px; }
  .reason-card p { font-size:14px; }
  .flow { padding-top:24px; }
  .flow .section-heading { margin-bottom:37px; }
  .flow-steps { grid-template-columns:1fr; gap:28px; }
  .flow-step { display:grid; grid-template-columns:108px minmax(0,1fr); gap:19px; align-items:center; }
  .flow-art { width:108px; height:108px; margin:0; padding:23px 4px 5px; }
  .flow-art > .step-number { width:32px; height:32px; font-size:14px; top:-6px; }
  .flow-text h3 { text-align:left; font-size:16px; margin-bottom:7px; }
  .flow-text p { font-size:12px; line-height:1.9; }
  .flow-step:not(:last-child)::after { right:auto; left:51px; top:auto; bottom:-16px; width:6px; height:6px; transform:rotate(135deg); border-width:1.5px; }
  .estimate { padding-top:0; }
  .estimate-box { padding:25px; grid-template-columns:58px minmax(0,1fr); gap:13px; }
  .estimate-art { width:58px; height:65px; align-self:start; }
  .estimate-box h2 { font-size:20px; }
  .estimate-box > div > p:last-child { font-size:13px; }
  .estimate-box > .button { grid-column:1/-1; justify-self:stretch; margin-top:8px; font-size:12px; }
  .faq-item summary { padding:20px 0; gap:12px; font-size:14px; }
  .faq-answer { padding:1px 0 23px; gap:12px; font-size:13px; }
  .qa-letter { font-size:17px; }
  .contact-heading { gap:10px; margin-bottom:26px; }
  .contact-heading > img { width:46px; }
  .contact-heading h2 { font-size:21px; }
  .contact-heading p:last-child { font-size:11px; }
  .contact-buttons { grid-template-columns:1fr; gap:12px; }
  .contact-buttons .button { min-height:71px; padding:12px 19px; gap:16px; }
  .contact-buttons .ui-icon { width:26px; height:26px; }
  .contact-buttons strong { font-size:16px; }
  .contact-buttons .phone-button strong { font-size:24px; }
  .contact-buttons small { font-size:10px; }
  .small-note { font-size:10px; margin-top:15px; }
  .footer-columns { grid-template-columns:1fr 1fr; gap:27px 17px; padding-bottom:29px; }
  .footer-company { grid-column:1/-1; }
  .footer-company address { font-size:12px; }
  .footer-nav h2 { font-size:12px; margin-bottom:12px; }
  .footer-nav a { font-size:11px; line-height:1.9; }
  .footer-tail { align-items:flex-start; gap:12px; }
  .footer-tail > small { max-width:240px; font-size:9px; line-height:1.8; }
  .back-top { font-size:0; }
  .mobile-contact { position:fixed; bottom:0; inset-inline:0; z-index:40; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:9px 10px calc(9px + env(safe-area-inset-bottom)); background:#fffffff8; border-top:1px solid var(--line); box-shadow:0 -4px 14px #1645620b; }
  .mobile-contact a { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:3px; min-height:50px; padding:6px 3px; font-size:10px; line-height:1.6; border:1px solid var(--line); border-radius:12px; text-decoration:none; }
  .mobile-contact .ui-icon { width:19px; height:19px; }
  .mobile-contact .dock-line { color:white; background:var(--green); border-color:var(--green); }
  .mobile-contact .dock-blue { color:white; background:var(--blue); border-color:var(--blue); }
}
@media (max-width:359px) {
  .container { width:calc(100% - 32px); }
  .brand-words strong { font-size:15px; }
  .brand-cat { width:35px; }
  .mobile-menu summary { width:42px; }
  .hero-catch { font-size:23px; }
  .hero-cat img { width:43px; }
  .hero-points { font-size:10px; gap:7px 10px; }
  .heading-row h2 { font-size:21px; }
  .heading-row { gap:7px; }
  .heading-row .paw { width:16px; height:16px; }
  .service-text h2 { font-size:22px; }
  .flow-step { grid-template-columns:93px minmax(0,1fr); gap:15px; }
  .flow-art { width:93px; height:93px; }
  .flow-text h3 { font-size:14px; }
  .flow-text p { font-size:11px; }
  .flow-step:not(:last-child)::after { left:44px; }
  .certificate-paper { padding-inline:14px; }
  .certificate-english { font-size:22px; }
  .certificate-fields > div { grid-template-columns:65px minmax(0,1fr); }
  .certificate-fields dd { font-size:7px; }
  .contact-heading > img { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { transition:none!important; }
}
@media print {
  .site-header { position:static; }
  .mobile-contact,.mobile-menu { display:none!important; }
  body { padding-bottom:0; }
  .section { break-inside:auto; }
  .flow-step,.process-steps li,.service-card { break-inside:avoid; }
}


/* === LEGACY TOKEN NAMES / SOFT BLUE VALUES ===
   Layout, photos, components and functional colors are unchanged.
   Only blue text accents and active-text cues are shifted to a soft orange palette. */
:root{--accent-orange:#6D9FBD;--accent-orange-deep:#3C6E8C;--accent-orange-light:#B9D7E9;--accent-orange-pale:#EFF7FC;--accent-orange-line:#CDE2EF;}

/* Services: text accents */
a{color:var(--accent-orange-deep)}
h1,h2,h3,.eyebrow{color:var(--accent-orange-deep)}
.brand-link,.brand-name,.header-phone,.hero-catch,.detail-index,.detail-intro .catch,.detail-tags li,.work-step__number,.work-step__label,.certificate-catch,.certificate-sample__en,.certificate-sample__title,.certificate-sample__brand,.reason-card__number,.estimate-copy h2{color:var(--accent-orange-deep)}
.desktop-nav a:hover,.desktop-nav a[aria-current]{color:var(--accent-orange-deep);border-color:var(--accent-orange)}
.text-link,.back-to-services,.section-shortcuts a,.page-top,.footer-col a:hover{color:var(--accent-orange-deep)}
.mobile-menu > summary{color:var(--accent-orange-deep)}
.mobile-menu[open] summary{background:var(--accent-orange-pale)}
.service-consult > summary{color:var(--accent-orange-deep);border-color:var(--accent-orange-line)}
.service-consult > summary:hover,.service-consult[open] > summary{background:var(--accent-orange-pale)}
.feature-symbol,.certificate-point-icon,.estimate-symbol{color:var(--accent-orange-deep)}

/* === SOFT BLUE ACCENT THEME / 2026-09-09 ===
   Main accents are warm orange. Functional green stays green.
   A muted teal and gold are retained as secondary accents so the site does not become monochrome.
   Layout, content, photos, cat illustrations and component structure are unchanged. */
:root{
  --brand:#497E9F;
  --blue:#497E9F;
  --blue2:#95BED6;
  --blue-deep:#3C6E8C;
  --accent-orange:#497E9F;
  --accent-orange-deep:#3C6E8C;
  --orange:#E8A05C;
  --gold:#D4A14F;
  --secondary:#4B8D97;
  --secondary-soft:#EEF7F8;
  --warm-soft:#EFF7FC;
}

/* Primary accent */
a{color:var(--blue,var(--brand));}
.eyebrow,.brand-name,.header-phone,.hero-catch,.text-link,
.desktop-nav a[aria-current],.desktop-nav a:hover,
.section-heading h2,.heading h2,.heading.side a,
.number-card strong,.featured-kicker,.record-flow span,.record-flow strong,
.record-note strong,.service-grid span,.service-grid a,.reason-grid span,
.flow-grid strong,.news-list span,.footer-bottom a,
.method-card h3,.side-card h3,.service-mini a span,
.field>label,.field>legend{color:var(--blue,var(--brand));}

/* Primary buttons: orange, LINE stays green */
.btn:not(.btn-line), .header-cta-row .btn:not(.btn-line){
  background:linear-gradient(90deg,#497E9F,#76A5C2);
  border-color:#497E9F;
  color:#fff;
  box-shadow:0 7px 18px rgba(69,118,147,.10);
}
.btn-outline,.btn.outline{
  background:#fff !important;
  color:#3C6E8C !important;
  border-color:#A7C9DE !important;
  box-shadow:none !important;
}
.btn-phone,.phone-btn{
  background:#fff !important;
  color:var(--secondary) !important;
  border-color:#A9CED2 !important;
  box-shadow:none !important;
}
.btn-line{background:linear-gradient(90deg,#169F52,#2AC56A) !important;border-color:#169F52 !important;color:#fff !important;}

/* Navigation and small UI */
.mobile-menu summary{color:#497E9F;}
.mobile-menu summary span{background:#497E9F;}
.category-nav a{color:#3C6E8C;border-color:#B8D4E5;}
.category-nav a.is-active,.category-nav a:hover{background:#497E9F;color:#fff;border-color:#497E9F;}
.breadcrumb a,.case-meta,.number-label,.method-number,.field-help,.method-note,.hero-small-message{color:#647F88;}

/* Secondary accents */
.case-label-washer{background:#4B969E !important;}
.case-label-home{background:#47A685 !important;}
.status-badge{color:#667E85;}
.record-flow li:not(:last-child):after{color:#D4A14F !important;}
.archive-icon,.method-illustration:before{background:var(--secondary-soft) !important;}
.field-required{background:#EFF7FC !important;color:#3C6E8C !important;border-color:#CDE2EF !important;}

/* Tags and soft chips */
.case-points li,.work-tags span,.service-option:has(input:checked),.record-note{
  background:#EFF7FC;
  color:#3C6E8C;
}
.service-option:has(input:checked){border-color:#497E9F;box-shadow:inset 0 0 0 1px #497E9F;}
.service-option input{accent-color:#497E9F;}

/* Keep cool pale blues as structural background; add warm cream in selected areas */
.certificate,.company-hero,.inquiry-hero,.news-hero,.faq-hero{
  background-color:#FFFDF9;
}

/* Mobile fixed contact bar: green / teal / orange */
.mobile-contact a:first-child{background:#18A957 !important;color:#fff !important;}
.mobile-contact a:nth-child(2){background:#4B8D97 !important;color:#fff !important;}
.mobile-contact a:nth-child(3){background:#497E9F !important;color:#fff !important;}

/* Focus states */
a:focus-visible,summary:focus-visible,.service-option input:focus-visible{
  outline-color:#79A9C6 !important;
}