
:root{
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6-pc:96px;
  --fs-body:17px;--fs-note:15px;--fs-foot:14px;
  --fs-h1-sp:30px;--fs-h2-sp:23px;--fs-h3:19px;--fs-h1-pc:40px;--fs-h2-pc:28px;
  --lh-body:1.75;--lh-head:1.4;--ls-body:.02em;
  --measure:34em;
  --radius:4px;
  --t-hover:150ms;--t-open:250ms;--t-close:200ms;
  
  --paper:#ffffff;--paper-2:#f4f4f2;--ink:#1a1a1a;--ink-2:#4a4a4a;
  --line:#dcdcd8;--line-strong:#858585;
  --brand:#1f3a5f;--brand-ink:#ffffff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-weight:400;word-break:auto-phrase;overflow-wrap:anywhere}
a{color:inherit}
h1,h2,h3{line-height:var(--lh-head);margin:0;letter-spacing:var(--ls-body);font-weight:700;color:var(--brand)}
h1{letter-spacing:.01em}
p{margin:0}
.nw{display:inline-block}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s2)}
.note{font-size:var(--fs-note);color:var(--ink-2);line-height:1.7}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s3);border-radius:var(--radius);font-weight:700;font-size:var(--fs-body);line-height:1.3;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit;text-align:center;overflow-wrap:normal;transition:filter var(--t-hover) ease-out}
.btn-main{background:var(--brand);color:var(--brand-ink)}
.btn-main:hover{filter:brightness(1.15)}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.btn[disabled]{cursor:wait;filter:grayscale(.4)}
.site-header{border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:68px}
.logo{display:flex;align-items:center;min-height:44px;text-decoration:none;font-size:22px;font-weight:700;color:var(--brand)}
.hd-btn{min-height:44px;padding:0 var(--s2)}
.hero{padding:var(--s5) 0}
.eyebrow{font-size:16px;font-weight:700;color:var(--brand);border-left:4px solid var(--brand);padding-left:var(--s1);margin-bottom:var(--s2)}
.hero h1{font-size:var(--fs-h1-pc);margin-bottom:var(--s2);max-width:var(--measure)}
.lead{font-size:18px;color:var(--ink-2);margin-bottom:var(--s3);max-width:var(--measure)}
.hero-btn{min-height:60px;font-size:18px;min-width:320px}
.hero-note{margin-top:var(--s1)}
.sec{padding:var(--s6-pc) 0}
.sec-alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec h2{font-size:var(--fs-h2-pc);margin-bottom:var(--s3)}
.sec h2::before{content:"";display:block;width:40px;height:4px;background:var(--brand);margin-bottom:var(--s2)}
.work-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.work-list li{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:0 0 var(--radius) var(--radius);padding:var(--s3)}
.work-list b{display:block;font-size:var(--fs-h3);line-height:var(--lh-head);color:var(--ink);margin-bottom:var(--s1)}
.work-list span{display:block;color:var(--ink-2)}
.prep{margin-top:var(--s3);max-width:var(--measure)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s4);align-items:start}
.contact-head{max-width:var(--measure)}
.contact-head h2 + p{margin-bottom:var(--s3)}
.contact-head h3{font-size:var(--fs-h3);margin-bottom:var(--s1)}
.privacy{margin:0;padding-left:1.2em}
.form{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3)}
.field{margin-bottom:var(--s3)}
.field label{display:block;font-weight:700;margin-bottom:var(--s1)}
.req{display:inline-block;font-size:16px;font-weight:700;padding:0 var(--s1);border-radius:var(--radius);margin-left:var(--s1);line-height:1.7;background:var(--brand);color:var(--brand-ink)}
.field input,.field textarea{width:100%;font:inherit;padding:var(--s1) var(--s2);min-height:48px;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;color:var(--ink)}
.field textarea{min-height:160px;resize:vertical}
.field .note{margin-top:var(--s1)}
.send{width:100%;min-height:60px;font-size:18px}
.form-msg{margin-top:var(--s2);padding:var(--s2);border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);color:var(--ink)}
.form-msg[hidden]{display:none}
.site-footer{background:var(--brand);color:var(--brand-ink);padding:var(--s4) 0;font-size:var(--fs-foot)}
.sp-bar{display:none}
@media (max-width:960px){
  .contact-grid{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
}
@media (max-width:640px){
  body{padding-bottom:88px}
  .hd{min-height:56px}
  .logo{font-size:20px}
  .hero{padding:var(--s4) 0}
  .hero h1{font-size:var(--fs-h1-sp)}
  .lead{font-size:var(--fs-body)}
  .hero-btn{width:100%;min-width:0}
  .sec{padding:var(--s5) 0}
  .sec h2{font-size:var(--fs-h2-sp)}
  .work-list{grid-template-columns:minmax(0,1fr)}
  .work-list li{padding:var(--s3) var(--s2)}
  .form{padding:var(--s3) var(--s2)}
  .sp-bar{display:block;position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--line-strong);padding:var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom));z-index:10;transition:transform var(--t-open) ease-out,visibility var(--t-open)}
  .sp-bar .btn{width:100%;min-height:56px}
  .sp-bar.is-hidden{transform:translateY(110%);visibility:hidden;transition-duration:var(--t-close)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}html{scroll-behavior:auto}}
