:root{
  --ink:#15181c;
  --ink-soft:#3a4149;
  --steel:#5b6570;
  --steel-line:#d7dbdf;
  --paper:#ffffff;
  --paper-warm:#f5f3ef;
  --panel-dark:#1b1e22;
  --panel-dark-2:#242830;
  --accent:#a8402a;
  --accent-deep:#7c2e1e;
  --accent-pale:#f2ded6;
  --ok:#2f7d4f;

  --font-display:'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-body:'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-util:'Barlow Condensed', 'Zen Kaku Gothic New', sans-serif;
  --font-logo:'Oswald', 'Barlow Condensed', sans-serif;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
.container{max-width:1120px;margin:0 auto;padding:0 24px;}
.eyebrow{
  font-family:var(--font-util);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  font-size:13px;
  display:flex;align-items:center;gap:8px;
  margin:0 0 12px;
}
.eyebrow::before{content:"";width:16px;height:2px;background:var(--accent);display:inline-block;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:900;
  line-height:1.3;
  margin:0;
  text-wrap:balance;
  letter-spacing:.01em;
}
h2{font-size:clamp(24px,3.6vw,34px);}
h3{font-size:19px;font-weight:700;}
p{margin:0;}
.lead{color:var(--ink-soft);font-size:15.5px;max-width:62ch;}
.tag{
  font-family:var(--font-util);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--paper-warm);border:1px solid var(--steel-line);
  color:var(--ink-soft);
  padding:3px 9px;
  display:inline-block;
}
.section{padding:72px 0;border-bottom:1px solid var(--steel-line);}
.section.alt{background:var(--paper-warm);}
.section.dark{background:var(--panel-dark);color:#f2efe9;border-bottom:none;}
.section.dark .eyebrow{color:var(--accent);}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:36px;}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:50;background:var(--paper);color:var(--ink);
  border-bottom:1px solid var(--steel-line);
}
.header-inner{
  max-width:1120px;margin:0 auto;padding:0 24px;
  height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;flex-direction:column;line-height:1;gap:4px;}
.brand .name{font-family:var(--font-logo);font-weight:400;font-size:24px;letter-spacing:.01em;color:var(--ink);}
.brand .name .tec{color:var(--accent);}
.brand .sub{font-family:var(--font-util);font-size:11px;letter-spacing:.16em;color:var(--steel);text-transform:uppercase;}
footer.site .brand .name{color:#f4f2ee;}
nav.main{display:flex;align-items:center;gap:2px;}
nav.main a{
  font-size:14px;padding:10px 12px;color:var(--ink-soft);border-bottom:2px solid transparent;
  font-weight:500;white-space:nowrap;
}
nav.main a:hover{color:var(--ink);}
nav.main a.active{color:var(--ink);border-color:var(--accent);}
.header-actions{display:flex;align-items:center;gap:10px;}
.phone-pill{
  display:flex;align-items:center;gap:8px;color:var(--ink);font-family:var(--font-util);
  font-size:15px;font-weight:600;border:1px solid var(--steel-line);padding:7px 12px;
  flex-shrink:0;white-space:nowrap;
}
.phone-pill .num{font-size:17px;letter-spacing:.02em;white-space:nowrap;}
.phone-pill small{display:block;font-size:10px;color:var(--steel);font-weight:500;letter-spacing:.04em;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-util);font-weight:600;font-size:15px;letter-spacing:.03em;
  padding:11px 20px;border:1px solid var(--accent);background:var(--accent);color:#fff;
  transition:background .15s, color .15s, border-color .15s;
}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);}
.btn.ghost{background:transparent;color:#fff;border-color:#4a525b;}
.btn.ghost:hover{border-color:#fff;}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff;}
.btn.dark:hover{background:#000;border-color:#000;}
.btn.block{width:100%;}
.hamburger{display:none;background:none;border:1px solid var(--steel-line);width:44px;height:44px;color:var(--ink);align-items:center;justify-content:center;}
.hamburger span{display:block;width:20px;height:2px;background:var(--ink);position:relative;}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);}
.hamburger span::before{top:-6px;}
.hamburger span::after{top:6px;}

.mobile-drawer{
  display:none;position:fixed;inset:0;z-index:70;background:rgba(10,11,13,.6);
}
.mobile-drawer.open{display:block;}
.mobile-drawer .panel{
  position:absolute;top:0;right:0;width:82%;max-width:340px;height:100%;background:var(--ink);
  padding:20px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;
}
.mobile-drawer a{color:#e7eaed;font-size:16px;padding:13px 6px;border-bottom:1px solid #2a2f35;font-weight:500;}
.mobile-drawer .close{align-self:flex-end;background:none;border:none;color:#fff;font-size:26px;line-height:1;padding:6px;}

/* ---------- Mobile sticky CTA ---------- */
.mobile-cta{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:55;
  background:#fff;border-top:1px solid var(--steel-line);
  padding:10px 12px;gap:10px;box-shadow:0 -6px 18px rgba(0,0,0,.08);
}
.mobile-cta a{flex:1;}
.mobile-cta .btn{width:100%;padding:13px 10px;font-size:14px;}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:var(--paper-warm);color:var(--ink);overflow:hidden;
  border-bottom:1px solid var(--steel-line);
}
.hero-grid{
  display:grid;grid-template-columns:.92fr 1.18fr;gap:44px;align-items:center;
  padding:56px 0 40px;position:relative;z-index:2;
}
.hero h1{font-size:clamp(22px,4vw,42px);color:var(--ink);margin-bottom:18px;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero .lead{color:var(--ink-soft);font-size:16.5px;max-width:44ch;margin-bottom:28px;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px;}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px;}
.hero-facts .tag{background:#fff;border-color:var(--steel-line);color:var(--ink-soft);}
.hero-photo{position:relative;}
.hero-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:40px;}
.hero-strip .photo{--ar:1/1;}
.hero-strip .cap{font-size:11.5px;left:12px;right:12px;bottom:10px;}
.hero-strip .ph-tag{font-size:9px;padding:2px 6px;}

/* ---------- Photo placeholder ---------- */
.photo{
  position:relative;aspect-ratio: var(--ar, 4/3);
  background:
    repeating-linear-gradient(135deg, #2b3138 0 2px, #333a42 2px 14px),
    linear-gradient(160deg,#3a4149,#20242a);
  overflow:hidden;
}
.photo::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(to top, rgba(8,9,11,.82), rgba(8,9,11,0));
  pointer-events:none;z-index:1;
}
.photo::after{
  content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.18);pointer-events:none;z-index:2;
}
.photo .corner{position:absolute;width:16px;height:16px;border:2px solid var(--accent);pointer-events:none;z-index:2;}
.photo .corner.tl{top:6px;left:6px;border-right:none;border-bottom:none;}
.photo .corner.tr{top:6px;right:6px;border-left:none;border-bottom:none;}
.photo .corner.bl{bottom:6px;left:6px;border-right:none;border-top:none;}
.photo .corner.br{bottom:6px;right:6px;border-left:none;border-top:none;}
.map-embed{position:relative;aspect-ratio:var(--ar,16/9);overflow:hidden;border:1px solid var(--steel-line);}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.modal-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px;}
.modal-gallery .g-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background-color:var(--paper-warm);background-size:contain;background-position:center;background-repeat:no-repeat;}
.modal-gallery .g-photo .ph-tag{position:absolute;top:10px;right:10px;}
.modal-gallery .g-photo{cursor:zoom-in;}
.lightbox{display:none;position:fixed;inset:0;background:rgba(8,9,11,.92);z-index:200;align-items:center;justify-content:center;padding:32px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;}
.lightbox .close-x{position:absolute;top:14px;right:14px;}
.photo .cap{
  position:absolute;left:16px;bottom:14px;right:16px;z-index:3;
  font-family:var(--font-util);font-size:13px;letter-spacing:.03em;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  display:flex;align-items:center;gap:8px;
}
.photo .cap::before{content:"📷";font-size:13px;filter:grayscale(1) brightness(1.6);opacity:.85;}
.photo .ph-tag{
  position:absolute;top:10px;right:10px;background:var(--accent);color:#fff;
  font-family:var(--font-util);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;font-weight:600;z-index:3;
}
.photo.light{background:
    repeating-linear-gradient(135deg, #e4e1da 0 2px, #ece9e2 2px 14px),
    linear-gradient(160deg,#dedad2,#c9c4ba);}
.photo.light::after{border-color:rgba(20,20,20,.15);}

/* ---------- Trust bar ---------- */
.trustbar{background:#fff;border-bottom:1px solid var(--steel-line);}
.trustbar .row{display:flex;flex-wrap:wrap;gap:0;}
.trustbar .item{
  flex:1 1 220px;padding:24px 22px;border-right:1px solid var(--steel-line);
  display:flex;align-items:center;gap:14px;
}
.trustbar .item:last-child{border-right:none;}
.trustbar .icon{flex-shrink:0;width:30px;height:30px;color:var(--accent);}
.trustbar .icon svg{width:100%;height:100%;}
.trustbar .txt h4{font-family:var(--font-body);font-weight:600;font-size:14.5px;color:var(--ink);margin:0 0 3px;}
.trustbar .txt p{font-size:12.5px;color:var(--steel);line-height:1.4;margin:0;}

/* ---------- Grids / cards ---------- */
.grid{display:grid;gap:20px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-6{grid-template-columns:repeat(6,1fr);}
.card{
  background:#fff;border:1px solid var(--steel-line);padding:24px;
  display:flex;flex-direction:column;gap:10px;
}
.card .num{font-family:var(--font-util);font-size:13px;color:var(--accent);font-weight:700;letter-spacing:.06em;}
.card p{color:var(--ink-soft);font-size:14.5px;}
.card.strength{border-left:3px solid var(--accent);}

.service-card{background:#fff;border:1px solid var(--steel-line);overflow:hidden;display:flex;flex-direction:column;}
.service-card .photo{--ar:16/10;}
.service-card .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1;}
.service-card .body p{color:var(--ink-soft);font-size:14px;flex:1;}
.service-card .link{font-family:var(--font-util);font-size:13.5px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:6px;}

/* ---------- Spec table ---------- */
.spec-wrap{overflow-x:auto;border:1px solid var(--steel-line);}
table.spec{width:100%;border-collapse:collapse;min-width:560px;background:#fff;}
table.spec th,table.spec td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--steel-line);font-size:14.5px;}
table.spec th{
  background:var(--ink);color:#fff;font-family:var(--font-util);font-weight:600;
  letter-spacing:.04em;font-size:13px;text-transform:uppercase;
}
table.spec tr:last-child td{border-bottom:none;}
table.spec td.value{font-family:var(--font-util);font-variant-numeric:tabular-nums;font-size:16px;font-weight:600;}
table.spec tr.flag td{background:var(--accent-pale);}
.flagnote{
  display:inline-flex;gap:6px;align-items:flex-start;font-family:var(--font-body);
  font-size:12.5px;color:var(--accent-deep);margin-top:4px;font-weight:600;
}

/* ---------- Case cards ---------- */
.case-card{background:#fff;border:1px solid var(--steel-line);cursor:pointer;display:flex;flex-direction:column;transition:box-shadow .15s, transform .15s;}
.case-card:hover{box-shadow:0 10px 24px rgba(20,22,25,.1);transform:translateY(-2px);}
.case-card .photo{--ar:4/3;}
.case-card .body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;}
.case-card .tags{display:flex;gap:6px;flex-wrap:wrap;}
.case-card h4{font-size:15.5px;font-weight:700;font-family:var(--font-display);}
.case-card .meta{font-size:13px;color:var(--steel);font-family:var(--font-util);}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;counter-reset:step;}
.step{background:#fff;border:1px solid var(--steel-line);padding:18px 16px;position:relative;}
.step .n{font-family:var(--font-util);font-size:28px;font-weight:700;color:var(--accent-pale);-webkit-text-stroke:1.5px var(--accent);color:transparent;line-height:1;margin-bottom:10px;}
.step h4{font-size:14.5px;}
.step p{font-size:12.5px;color:var(--ink-soft);margin-top:6px;}

/* ---------- FAQ ---------- */
.faq-cat{font-family:var(--font-util);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:28px 0 10px;font-weight:600;}
.faq-cat:first-child{margin-top:0;}
details.qa{border-bottom:1px solid var(--steel-line);padding:16px 0;}
details.qa summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-weight:600;font-size:15.5px;font-family:var(--font-display);
}
details.qa summary::-webkit-details-marker{display:none;}
details.qa summary::after{content:"+";font-family:var(--font-util);font-size:22px;color:var(--accent);flex-shrink:0;transition:transform .15s;}
details.qa[open] summary::after{transform:rotate(45deg);}
details.qa .a{padding-top:12px;color:var(--ink-soft);font-size:14.5px;max-width:70ch;}

/* ---------- Footer ---------- */
footer.site{background:var(--panel-dark);color:#c7cdd3;padding:56px 0 24px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:36px;border-bottom:1px solid #33383f;}
.foot-grid h5{font-family:var(--font-util);color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;font-weight:600;}
.foot-grid a{display:block;font-size:14px;padding:5px 0;color:#a9b0b8;}
.foot-grid a:hover{color:#fff;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;font-size:12.5px;color:#7b828a;flex-wrap:wrap;gap:10px;}

/* ---------- Pages (SPA sections) ---------- */
.page{display:none;}
.page.active{display:block;}
.page-hero{background:var(--ink);color:#fff;padding:44px 0;}
.page-hero .eyebrow{color:var(--accent);}
.page-hero h1{color:#fff;font-size:clamp(26px,3.6vw,36px);}
.breadcrumb{font-family:var(--font-util);font-size:12.5px;color:#9aa2ab;margin-bottom:14px;letter-spacing:.03em;}
.breadcrumb a:hover{color:#fff;}

/* ---------- Two column ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
.compare{width:100%;border-collapse:collapse;}
.compare th,.compare td{border:1px solid var(--steel-line);padding:12px 14px;font-size:14px;text-align:left;}
.compare th{background:var(--paper-warm);font-family:var(--font-util);font-weight:600;font-size:13px;letter-spacing:.03em;}
.compare td.pow{background:#fbf3ec;}

/* ---------- Form ---------- */
.form-shell{background:#fff;border:1px solid var(--steel-line);padding:36px;max-width:760px;margin:0 auto;}
.f-group{margin-bottom:22px;}
.f-group label{display:block;font-family:var(--font-util);font-size:13.5px;font-weight:600;letter-spacing:.02em;margin-bottom:7px;color:var(--ink);}
.f-group label .req{color:var(--accent);margin-left:4px;}
.f-group .hint{font-size:12.5px;color:var(--steel);margin-top:6px;}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{
  width:100%;border:1px solid var(--steel-line);background:#fff;padding:11px 13px;font-size:15px;
  font-family:var(--font-body);color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
textarea{resize:vertical;min-height:100px;}
.radio-row,.check-row{display:flex;flex-wrap:wrap;gap:10px 20px;}
.radio-opt,.check-opt{display:flex;align-items:center;gap:7px;font-size:14.5px;}
fieldset{border:none;padding:0;margin:0;}
legend{font-family:var(--font-util);font-size:13.5px;font-weight:600;margin-bottom:9px;padding:0;}
.dropzone{
  border:2px dashed var(--steel-line);padding:26px;text-align:center;color:var(--steel);font-size:13.5px;
  background:var(--paper-warm);
}
.dropzone b{color:var(--ink);display:block;font-size:14.5px;margin-bottom:4px;font-family:var(--font-display);}
.section-title-sm{font-family:var(--font-util);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;font-weight:600;border-bottom:2px solid var(--ink);padding-bottom:10px;}
.confirm-panel{text-align:center;padding:64px 20px;max-width:560px;margin:0 auto;}
.confirm-panel .check{
  width:64px;height:64px;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:30px;margin:0 auto 20px;
}

/* ---------- Company table ---------- */
.kv{width:100%;border-collapse:collapse;}
.kv th,.kv td{padding:13px 0;border-bottom:1px solid var(--steel-line);text-align:left;vertical-align:top;font-size:14.5px;}
.kv th{width:160px;color:var(--steel);font-weight:600;font-family:var(--font-util);letter-spacing:.02em;font-size:13.5px;}
.kv td.flag{background:var(--accent-pale);padding:13px 12px;}

/* ---------- Modal (case detail) ---------- */
.modal-back{display:none;position:fixed;inset:0;background:rgba(10,11,13,.7);z-index:80;padding:24px;overflow-y:auto;}
.modal-back.open{display:flex;align-items:flex-start;justify-content:center;}
.modal{background:#fff;max-width:820px;width:100%;margin-top:24px;}
.modal .photo{--ar:16/9;}
.modal-body{padding:28px 32px 36px;}
.modal .close-x{position:absolute;top:14px;right:14px;background:var(--ink);color:#fff;border:none;width:36px;height:36px;font-size:20px;z-index:2;}
.modal-head{position:relative;}
.modal .kv th{width:130px;}

/* ---------- Misc ---------- */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.checklist li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-soft);}
.checklist li::before{content:"—";color:var(--accent);font-weight:700;flex-shrink:0;}
.center-cta{text-align:center;padding:56px 0;}
.center-cta h2{color:#fff;margin-bottom:14px;}
.center-cta .lead{color:#d3d8dc;margin:0 auto 28px;}

@media (max-width:920px){
  nav.main{display:none;}
  .hamburger{display:flex;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-strip{grid-template-columns:repeat(2,1fr);}
  .trustbar .item{flex:1 1 45%;border-bottom:1px solid var(--steel-line);}
  .grid.cols-3{grid-template-columns:repeat(2,1fr);}
  .grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .grid.cols-6{grid-template-columns:repeat(3,1fr);}
  .steps{grid-template-columns:repeat(3,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .two-col{grid-template-columns:1fr;}
  .f-row{grid-template-columns:1fr;}
  .mobile-cta{display:flex;}
  body{padding-bottom:64px;}
}
@media (max-width:640px){
  .grid.cols-3{grid-template-columns:1fr;}
  .grid.cols-4{grid-template-columns:1fr;}
  .grid.cols-6{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr;gap:24px;}
  .section{padding:52px 0;}
  .phone-pill{display:none;}
}

/* ---------- Print (A4 confirmation export) ---------- */
.print-cover{display:none;}
@media print{
  @page{size:A4 landscape;margin:12mm;}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  html{scroll-behavior:auto;}
  .demo-bar,header.site,.mobile-cta,.mobile-drawer,.modal-back{display:none !important;}
  body{padding-bottom:0;}
  .print-cover{
    display:flex;flex-direction:column;justify-content:center;gap:14px;
    min-height:180mm;page-break-after:always;
  }
  .print-cover .eyebrow{justify-content:flex-start;}
  .print-cover h1{font-family:var(--font-logo);font-size:40px;color:var(--ink);}
  .print-cover p{font-size:14px;color:var(--ink-soft);max-width:60ch;}
  .print-cover .meta{margin-top:24px;font-family:var(--font-util);font-size:13px;color:var(--steel);display:grid;gap:6px;}
  .page{display:block !important;page-break-after:always;}
  .page:last-of-type{page-break-after:auto;}
  .section{padding:28px 0;}
  .hero{padding-top:0;}
  a[href]{color:inherit;text-decoration:none;}
  .btn{box-shadow:none;}
  details.qa .a{display:block !important;}
  .photo,.card,.service-card,.case-card,.step,.spec-wrap,.form-shell,.trustbar .item,.hero-grid,.hero-photo,.modal,table.kv tr{
    page-break-inside:avoid;break-inside:avoid;
  }
}