:root{--ink:#1E2A22;--brand:#2F5D45;--accent:#E8AC2E;--ground:#EEF1EC;--muted:#3F4B43;--line:#D6DDD3;--blue:#0065A3;--red:#DA423A}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;line-height:1.8;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--brand)}a:hover{color:var(--ink)}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
h1,h2,h3,h4,p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.sec{padding:88px 0}
.white{background:#fff}
.dark{background:var(--ink);color:#fff}
.h2{font-size:clamp(26px,3.6vw,42px);line-height:1.35;font-weight:900}
.h2.blue{color:var(--blue)}
.hl{color:var(--blue)}
.dark .hl{color:#8FD0F5}
section[id],main[id]{scroll-margin-top:110px}
.hl-big{font-size:1.25em;font-weight:900}
.lead{color:var(--muted);font-size:16px}
.eyebrow{font-size:15px;font-weight:700;color:var(--brand)}
.stack{display:flex;flex-direction:column}
.grid{display:grid;gap:24px}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g-fill{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:40px 64px;align-items:start}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 40px}
.ph{background:repeating-linear-gradient(135deg,#DCE3D8 0 14px,#D3DBCE 14px 28px);border-radius:14px;width:100%;object-fit:cover}
.btn-call{display:inline-flex;flex-direction:column;text-decoration:none;background:var(--accent);color:var(--ink);padding:12px 26px;border-radius:12px;line-height:1.4}
.btn-call:hover{color:var(--ink);background:#dda124}
.btn-call small{font-size:13px;font-weight:500}
.btn-call b{font-size:24px;font-weight:900}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:12px 24px;border-radius:12px;font-weight:700;font-size:16px;min-height:48px}
.btn-brand{background:var(--brand);color:#fff}.btn-brand:hover{color:#fff;background:#244a37}
.btn-line{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none;min-height:44px}
.more span{font-size:1.3em;line-height:1}
.more.light{color:#fff}.more.light:hover{color:var(--accent)}
/* header */
header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top,0px)}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 32px;padding-top:12px;padding-bottom:12px}
.logo{text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:12px;line-height:1.3}
.logo:hover{color:var(--ink)}
.logo-mark{width:76px;height:76px;flex-shrink:0;object-fit:contain}
.logo-text{display:flex;flex-direction:column}
.logo b{font-family:"Zilla Slab",Georgia,serif;font-size:30px;font-weight:700;letter-spacing:0.01em;line-height:1.1}.logo-text span{font-size:12px;color:#4F5B53}
nav.menu{display:flex;flex-wrap:wrap;gap:0 22px;font-weight:500;font-size:15px}
nav.menu a{color:var(--ink);text-decoration:none;padding:8px 0}
.head-tel{display:flex;align-items:center;gap:8px;text-decoration:none;background:var(--accent);color:var(--ink);padding:10px 18px;border-radius:999px;font-weight:700;min-height:44px}
@media (max-width:860px){nav.menu{display:none}.logo b{font-size:25px}.logo-mark{width:56px;height:56px}.logo{gap:10px}.head-tel{padding:8px 14px;font-size:14px}}
/* hero */
.hero{background:#fff;padding:48px 0 56px}
.hero-band{background-color:#fff;background-image:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)),var(--hero-bg,none);background-size:cover;background-position:center 62%}
.hero-frame{display:flex;align-items:center;justify-content:center;min-height:clamp(260px,32vw,440px);padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.hero-band h1{font-family:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(32px,5vw,58px);line-height:1.35;font-weight:900;letter-spacing:0.03em;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;text-shadow:0 0 12px rgba(255,255,255,.9),0 0 3px rgba(255,255,255,.9)}
.hero-band h1 .h1-main{color:var(--red)}
.hero-band h1 .h1-sub{font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;letter-spacing:0.01em;font-size:clamp(22px,3.4vw,40px);line-height:1.4}
.hero .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:40px 56px;align-items:center}
.checks{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;font-weight:700}
.checks span{display:flex;align-items:center;gap:6px}
.photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.photos .main{grid-column:span 2;aspect-ratio:16/10;border-radius:20px}
.photos .main:only-child{grid-column:span 2}
.photos .sub{aspect-ratio:4/3}
/* pains */
.pain{display:flex;gap:12px;align-items:flex-start;background:#fff;padding:18px 20px;border-radius:12px;font-weight:500}
.pain svg{flex-shrink:0;margin-top:4px}
.pain-note{font-size:18px;font-weight:700;max-width:40em}
/* service */
.cat{font-size:22px;font-weight:900;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:28px}
.svc .ph{aspect-ratio:3/2;border-radius:12px}
.svc h4{font-size:20px;margin-top:6px}
.svc p{font-size:15px;color:var(--muted)}
.svc .price{color:var(--brand);font-weight:700}
/* works */
.case{gap:14px}
.case .pic{position:relative}
.case .pic .ph{aspect-ratio:4/3}
.case .pic [hidden]{display:none}
.tag{position:absolute;top:12px;left:12px;background:var(--ink);color:#fff;font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px}
.toggle{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#33433A;padding:5px;border-radius:999px}
.toggle button{border:none;border-radius:999px;padding:10px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;min-height:44px;background:transparent;color:#E3ECE5}
.toggle button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.case h3{font-size:19px;margin-top:4px}
.case h3 a{color:inherit;text-decoration:none}.case h3 a:hover{text-decoration:underline}
.case .meta{color:#C9D3C6;font-size:14px}
.case .case-sum{color:#E3ECE5;font-size:15px}
.dark .case .more{color:var(--accent)}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters a{color:#E3ECE5;text-decoration:none;border:1.5px solid #4B5C51;border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px}
.filters a[aria-current]{background:#fff;color:var(--ink);border-color:#fff}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted)}
.crumbs a{color:inherit}
.crumbs.light{color:#C9D3C6}
.page-top{padding-top:48px}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.facts div{background:var(--ground);border-radius:10px;padding:8px 14px}
.facts dt{font-size:12px;color:var(--muted);font-weight:700}
.facts dd{margin:0;font-weight:700}
.ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.ba figure,.gallery figure{margin:0;position:relative}
.ba img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.ba figcaption{position:absolute;top:12px;left:12px;background:var(--ink);color:#fff;font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px}
.ba figcaption.after{background:var(--brand)}
.work-sum{font-size:19px;font-weight:700;line-height:1.7}
.work-body{font-size:16px;color:var(--muted);max-width:44em}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.gallery figcaption{font-size:14px;color:var(--muted);margin-top:6px}
.cta-box{background:var(--ground);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px}
.cta-title{font-weight:900;font-size:18px}
.preview-bar{background:var(--accent);color:var(--ink);text-align:center;font-weight:700;padding:10px 16px}
/* compare */
.tbl{overflow-x:auto;background:#fff;border-radius:16px}
table{border-collapse:collapse;width:100%;min-width:640px}
th,td{text-align:left;padding:18px 24px}
tbody tr{border-top:1px solid #E1E6DE}
thead th{color:#4F5B53}
thead th.us{background:var(--brand);color:#fff;font-weight:900;font-size:18px}
td.us{font-weight:700;background:#E5EEE7}
td.them{color:#4F5B53}
@media (max-width:700px){
  .tbl{overflow:visible;background:transparent;border-radius:0}
  .tbl table{min-width:0}
  .tbl thead{display:none}
  .tbl tbody{display:flex;flex-direction:column;gap:12px}
  .tbl tr{display:block;background:#fff;border:none;border-radius:14px;padding:18px}
  .tbl th[scope=row]{display:block;padding:0 0 10px;font-size:18px}
  .tbl td{display:block;padding:10px 14px;border-radius:10px;font-size:15px}
  .tbl td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;margin-bottom:2px}
  .tbl td.them{background:#F3F5F2;margin-bottom:8px}
  .tbl td.us{background:#E5EEE7}
  .tbl td.us::before{color:var(--brand)}
}
/* price */
.price-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:17px}
.price-row span:last-child{color:var(--brand)}
/* flow */
ol.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
ol.flow li{background:#fff;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px}
ol.flow .n{font-size:44px;font-weight:900;line-height:1;color:var(--brand)}
ol.flow h3{font-size:19px}
ol.flow p{color:var(--muted);font-size:15px}
/* staff & voice */
.staff{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:32px 56px;align-items:center}
.staff-photo{aspect-ratio:4/5;border-radius:20px;max-width:420px}
.staff-msg{font-size:clamp(18px,2vw,21px);font-weight:500;line-height:1.9}
.voice{margin:0;background:var(--ground);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px}
.voice blockquote{margin:0}
.voice figcaption{font-size:14px;color:#4F5B53;font-weight:700}
/* faq */
.faq{background:#fff;border-radius:12px}
.faq button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:none;padding:20px 24px;font:inherit;font-size:17px;font-weight:700;color:var(--ink);text-align:left;cursor:pointer}
.faq .sign{font-size:24px;line-height:1;color:var(--brand)}
.faq p{padding:0 24px 22px;color:var(--muted)}
/* contact */
.contact{background:var(--brand);color:#fff}
.contact .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:40px 64px;align-items:start}
form{background:#fff;color:var(--ink);border-radius:20px;padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:15px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:18px}
input,select,textarea{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid #B9C3B6;border-radius:8px;padding:12px 14px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(47,93,69,.2)}
.photo-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.photo-preview img{aspect-ratio:1;object-fit:cover;border-radius:8px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit{background:var(--accent);color:var(--ink);border:none;border-radius:12px;padding:16px;font:inherit;font-size:18px;font-weight:900;cursor:pointer;min-height:52px}
.submit[disabled]{opacity:.6;cursor:wait}
.note{font-size:13px;color:#4F5B53}
.optin{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:500;cursor:pointer}
.optin input{width:22px;height:22px;flex-shrink:0;margin-top:2px;accent-color:var(--brand)}
.copy a{color:inherit}
.msg{display:none;background:#FBEAE8;color:#8A231C;border-radius:8px;padding:12px 14px;font-size:14px;font-weight:700}
.thanks{background:#fff;color:var(--ink);border-radius:20px;padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:10px}
.thanks h3{font-size:22px;color:var(--brand)}
.line-box{display:flex;gap:20px;align-items:center;background:#fff;color:var(--ink);border-radius:16px;padding:18px;max-width:440px}
.line-qr{width:132px;height:132px;flex-shrink:0;border-radius:8px}
.line-hint{font-size:14px;color:var(--muted);line-height:1.6}
.line-add{background:#06C755;color:#fff;align-self:flex-start;padding:10px 20px}.line-add:hover{color:#fff;background:#05a648}
@media (max-width:700px){.line-qr,.line-hint{display:none}.line-add{align-self:stretch}}
/* footer */
footer{background:var(--ink);color:#E3ECE5;padding:64px 0 40px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:32px 64px}
.foot-brand{display:flex;align-items:center;gap:20px}
.foot-logo{width:120px;height:120px;border-radius:16px;background:#fff;flex-shrink:0;object-fit:contain}
.foot-name{font-family:"Zilla Slab",Georgia,serif;font-size:34px;font-weight:700;line-height:1.1;color:#fff}
dl.info{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 24px;font-size:15px}
dl.info dt{font-weight:700;color:#fff}dl.info dd{margin:0}
dl.info a{color:#fff}
.copy{font-size:13px;color:#A9B5AC}
/* mobile call bar */
.callbar{display:none}
@media (max-width:700px){
  .callbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}
  .callbar a{display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:10px;font-weight:900;text-decoration:none;font-size:16px}
  .callbar .c1{background:var(--accent);color:var(--ink)}
  .callbar .c2{background:var(--brand);color:#fff}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  .sec{padding:64px 0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}