/* v02: company blue, readable type, shared alignment and original equipment photography. */
:root {
  --ink: #17324d; --ink-2: #425971; --ink-3: #536478;
  --brand: #173b60; --brand-2: #1c446d;
  --accent: #2c6baf; --accent-2: #20558d;
  --bg: #f2f5f8; --bg-2: #e9eff5; --paper: #fff;
  --line: #d9e2ec; --line-2: #eaf0f6;
  --display: var(--font); --container-w: 1280px; --sec-py: 100px;
  --card-radius: 10px;
}
body { letter-spacing: -.015em; }
html[data-layout] :is(.container,.wrap) { max-width: 1280px; margin-inline: auto; padding-inline: 28px; }
html[data-layout] .nav { background: rgb(255 255 255 / 97%) !important; border-bottom: 1px solid #d9e2ec !important; backdrop-filter: blur(12px); }
html[data-layout] .nav.scrolled { background: rgb(255 255 255 / 98%) !important; }
html[data-layout] .nav :is(.menu a,.nav-tel,.logo-text) { color: #173b60; }
html[data-layout] .nav .menu a { font-size: 14px; padding: 12px 10px; }
html[data-layout] .nav .menu a:hover { color: #20558d; background: #edf3f9; }
html[data-layout] .nav .nav-cta { background: #2c6baf; color: #fff; border-radius: 6px; animation: none; padding: 12px 20px; }
html[data-layout] .nav .nav-cta:hover { background: #20558d; color: #fff; }
html[data-layout] :is(.btn,.open-support-cta,.submit,.cf-submit) { border-radius: 6px; min-height: 52px; animation: none; font-family: var(--font); }
html[data-layout] :is(.btn-dark,.btn-primary) { background: #2c6baf; color: #fff; }
html[data-layout] :is(.btn-dark,.btn-primary):hover { background: #20558d; color: #fff; }
html[data-layout] :is(.sec-title,.h2,.cta-left h2) { font-family: var(--font); font-weight: 700; line-height: 1.28; letter-spacing: -.035em; white-space: normal; overflow-wrap: anywhere; word-break: keep-all; }
html[data-layout] :is(.sec-title,.h2,.cta-left h2) em { font-style: normal; font-weight: inherit; color: inherit; }
html[data-layout] :is(.sec-tag,.tag) { letter-spacing: .12em; font-size: 11px; }
html[data-layout] .sec-head > * { min-width: 0; }
html[data-layout=pc] :is(#equip,#branch,#multi,#guide) .sec-title { width: auto !important; max-width: 100% !important; flex: initial !important; }
html[data-layout] :is(.sec-sub,.lead,.equip-desc-m,.sup-d,.multi-d) { line-height: 1.8; word-break: keep-all; }
html[data-layout] .slide-play { border-radius: 5px; font-size: 12px; padding: 8px 13px; }

/* First screen: a calm left-aligned title over the existing store photography. */
html[data-layout=pc] .hero { padding: 122px 0 54px; min-height: 760px; }
html[data-layout=pc] .hero::after { background: linear-gradient(90deg, rgb(10 30 50 / 88%) 0%, rgb(10 30 50 / 68%) 45%, rgb(10 30 50 / 20%) 100%); }
html[data-layout=pc] .hero-top { grid-template-columns: minmax(0,1fr); margin-bottom: 28px; }
html[data-layout=pc] .hero h1 { font-size: clamp(44px,5vw,72px); line-height: 1.22; font-weight: 700; letter-spacing: -.045em; text-shadow: none; }
html[data-layout] .hero h1 :is(.ital,em) { color: #fff; font-style: normal; font-weight: inherit; }
html[data-layout=pc] .hero-eyebrow { color: #c8e4f3; margin-bottom: 24px; font-size: 12px; letter-spacing: .2em; text-shadow: none; }
html[data-layout=pc] .hero-eyebrow::before { background: #a4d1e0; }
html[data-layout=pc] .hero-mid { grid-template-columns: minmax(0,1fr); max-width: 650px; gap: 24px; padding-bottom: 24px; border-bottom-color: rgb(255 255 255 / 22%); }
html[data-layout=pc] .hero-lead { color: #e3edf5; font-size: 17px; line-height: 1.85; max-width: 580px; text-shadow: none; word-break: keep-all; overflow-wrap: normal; }
html[data-layout=pc] .hero-ctas-4 { justify-content: flex-start; }
html[data-layout=pc] .hero-dots { justify-content: flex-start; margin-top: 16px; }
html[data-layout=pc] .hero .slide-play { border-color: rgb(255 255 255 / 35%); }
html[data-layout=pc] .hero-meta:empty { display: none; }
html[data-layout] .hero-dot { box-shadow: none; }
html[data-layout] .hero-dot[aria-pressed=true]::before { background: #a4d1e0 !important; }

/* The supplied opening-support section establishes the light-blue editorial rhythm. */
html[data-layout] .open-support { padding: 80px 28px; background: #f3f7fb; border-bottom: 1px solid #d9e2ec; }
html[data-layout] .open-support-inner { max-width: 1224px; }
html[data-layout] .open-support-head h2 { font-weight: 700; color: #173b60; }
html[data-layout] .open-support-group > h3 { color: #20558d; }
html[data-layout] .open-support-icon { stroke: #2c6baf; }
html[data-layout] .open-support-cta { background: #2c6baf; }
html[data-layout] .open-support-row:hover { background: rgb(255 255 255 / 65%); }

/* Equipment: original photos, equal tabs and a clear specification column. */
html[data-layout=pc] .sec-head { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 60px; align-items: end; margin-bottom: 42px; }
html[data-layout=pc] .sec-title { font-size: clamp(32px,3.3vw,46px); }
html[data-layout=pc] .sec-sub { font-size: 16px; max-width: 440px; margin-bottom: 4px; }
html[data-layout] .equip { background: #fff; }
html[data-layout=pc] .equip-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; border: 0; margin-bottom: 12px; }
html[data-layout=pc] .equip-tab { border: 1px solid #d9e2ec; border-radius: 6px; padding: 16px 12px; font-size: 14px; color: #425971; white-space: normal; }
html[data-layout=pc] .equip-tab.on { background: #173b60; border-color: #173b60; color: #fff; }
html[data-layout=pc] .equip-tab .dot { display: none; }
html[data-layout=pc] .equip-panel { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 52px; align-items: center; margin-top: 18px; }
html[data-layout=pc] .equip-visual:has(.equip-photo) { display: grid; place-items: center; min-height: 440px; background: #f3f6f9; border: 1px solid #e1e8f0; border-radius: 10px; }
html[data-layout=pc] .equip-visual:has(.equip-photo)::before { content: none; }
html[data-layout=pc] .equip-visual .equip-photo { position: relative; width: 100%; height: 430px; object-fit: contain; padding: 24px; outline: none; }
html[data-layout=pc] .equip-info h3 { font-family: var(--font); font-size: 30px; font-weight: 700; line-height: 1.4; letter-spacing: -.035em; }
html[data-layout=pc] .equip-info h3 em { font-style: normal; color: inherit; font-weight: inherit; }
html[data-layout=pc] .equip-info > p { font-size: 16px; line-height: 1.85; color: #425971; }
html[data-layout=pc] .equip-specs { margin-block: 26px; background: #f3f7fb; border-color: #d9e2ec; border-radius: 6px; }
html[data-layout=pc] .equip-bullets li { font-size: 14px; line-height: 1.75; }

/* Existing content gets consistent spacing, restrained borders and legible surfaces. */
html[data-layout] :is(.sup,.guide) { background: #fff; }
html[data-layout] :is(.branch,.multi) { background: #f2f5f8; }
html[data-layout] .iot { background: #173b60; }
html[data-layout] .iot :is(.sec-title,.h2) { color: #fff; }
html[data-layout] .iot :is(.sec-sub,.lead) { color: #d6e4f1; }
html[data-layout] .iot :is(.sec-tag,.tag) { color: #a4d1e0; }
html[data-layout] .iot-diagram { border: 1px solid rgb(255 255 255 / 16%); border-radius: 12px; background: rgb(0 0 0 / 8%); }
html[data-layout] .o1-side { background: rgb(255 255 255 / 7%); border-color: rgb(255 255 255 / 18%); border-radius: 10px; }
html[data-layout] .iot :is(.o1-node-k,.o1-card-n,.iot-feat-n) { color: #a4d1e0; }
html[data-layout] .iot .o1-node-d { color: #d6eaff; font-size: 16px; font-style: normal; line-height: 1.45; }
html[data-layout] .o1-line { stroke: #a4d1e0; }
html[data-layout] .o1-pulse { fill: #a4d1e0; }
html[data-layout] :is(.sup-card,.multi-card,.review-card,.gs,.cost-box,.faq-wrap,.branch-detail) { border-radius: 10px; box-shadow: none; }
html[data-layout] :is(.sup-card,.multi-card) { background: #fff; border: 1px solid #d9e2ec; }
html[data-layout] .sup-card:hover { transform: none; box-shadow: 0 8px 24px rgb(23 59 96 / 8%); border-color: #8daecc; }
html[data-layout=pc] .sup-grid { gap: 24px; }
html[data-layout=pc] .sup-img { aspect-ratio: 3/2; }
html[data-layout=pc] .sup-card > .sup-n { margin: 26px 26px 16px; }
html[data-layout=pc] .sup-card > .sup-d { margin-inline: 26px; font-size: 15px; }
html[data-layout=pc] .sup-card > .sup-list { margin: 20px 26px 28px; }
html[data-layout] .sup-list li { font-size: 14px; }
html[data-layout] .branch-card { border-radius: 8px; border: 1px solid #cbd9e7; }
html[data-layout] .branch-card.on { background: #173b60; border-color: #173b60; }
html[data-layout] .branch-detail { background: #fff; border: 1px solid #d9e2ec; }
html[data-layout] .multi-card { padding: 30px; }
html[data-layout] .multi-t { font-weight: 700; }
html[data-layout] .gs { border: 1px solid #d9e2ec; background: #f7f9fc; }
html[data-layout] .guide::before { content: none; }
html[data-layout] .guide :is(.sec-title,.h2,.gs-t) { color: #173b60; }
html[data-layout] .guide :is(.sec-sub,.gs-d) { color: #425971; }
html[data-layout] .gs-d { font-size: 12px; }
html[data-layout] :is(.cost-tag,.ctag,.cost-total .val) { color: #a4d1e0; }
html[data-layout] .cost-box { background: #173b60; }
html[data-layout] .cta::before { content: none; }
html[data-layout=pc] .cta { background: #eaf1f8; padding: 100px 0; }
html[data-layout=pc] .cta-wrap { gap: 64px; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
html[data-layout=pc] .cta-form { background: #fff; color: #17324d; border: 1px solid #cbd9e7; border-radius: 12px; box-shadow: 0 16px 40px rgb(23 59 96 / 7%); padding: 36px; }
html[data-layout=pc] .cta-form :is(.fld label,.agree,.agree b) { color: #17324d; }
html[data-layout=pc] .cta-form .fld :is(input,select,textarea) { background: #f7f9fc; color: #17324d; border-color: #b7c8da; }
html[data-layout=pc] .cta-form .fld :is(input,textarea)::placeholder { color: #65768a; }
html[data-layout=pc] .cta-form :is(.chip,.rad) { background: #f7f9fc; color: #425971; border-color: #b7c8da; }
html[data-layout=pc] .cta-form :is(.chip,.rad).on { background: #eaf1f8; color: #174e85; border-color: #2c6baf; }
html[data-layout=pc] .cta-form .agr-box { background: #edf3f9; border-color: #8daecc; }
html[data-layout=pc] .cta-form .submit { background: #2c6baf; color: #fff; }
html[data-layout=pc] .cf-head .gift { background: #eaf1f8; color: #20558d; border-radius: 4px; }
html[data-layout] .ft { background: #102a43; }
html[data-layout] .cbar { box-shadow: 0 -4px 20px rgb(16 42 67 / 12%); }
html[data-layout] .cbar-toggle { background: #2c6baf; color: #fff; }
html[data-layout] .cbar-label { letter-spacing: .13em; }
html[data-layout] #wc-promo-window { border-color: #cbd9e7; }

/* Match text to its final surface, including the native mobile variants. */
html[data-layout] :is(.branch,.multi) :is(.sec-title,.h2,.multi-t) { color: #173b60; }
html[data-layout] :is(.branch,.multi) :is(.sec-sub,.lead,.multi-d,.multi-meta .k,.slide-play) { color: #425971; }
html[data-layout] :is(.branch,.multi) .slide-play { border-color: #64758a; }
html[data-layout] .iot :is(.o1-card-no,.iot-feat-d) { color: #d6eaff; }
html[data-layout] :is(.review-tag,.review-avatar) { color: #e3f1ff; }
html[data-layout] .reviews :is(.num,.review-store) { color: #e3f1ff; }
html[data-layout=pc] .review-stars span { color: #806024; }
html[data-layout] .branch .bt-k { color: #425971; }
html[data-layout] .branch .bt-pct { color: #536478; }
html[data-layout] .branch-tape-m { color: #fff; background: #20558d; }
html[data-layout] .cost-total .label { color: #d6eaff; }
html[data-layout=mobile] .cost-panel { --ink-3: #d6eaff; }
html[data-layout=mobile] .cost-panel :is(small,.cost-note) { color: #d6eaff; }
html[data-layout] .cta-tel-ico { color: #fff; }
html[data-layout] .ft :is(h5,.ft-pc) { color: #d6eaff; }
html[data-layout] .ft-bot, html[data-layout] .ft-bot a { color: #c5d5e5; }
html[data-layout] .cbar :is(.cbar-tag,.cbar-tag-k,.cbar-tel-icon) { color: #c5e0f1; }
html[data-layout=mobile] .cbar-tel { color: #c5e0f1; }
html[data-layout] :is(.cbar-submit,.cbar-submit-m) { color: #fff; background: #2c6baf; animation: none; }
html[data-layout] :is(.cbar-submit,.cbar-submit-m):hover:not(:disabled) { color: #fff; background: #20558d; }

/* Native mobile documents keep their original galleries and touch controls. */
html[data-layout=mobile] .sec { padding-block: 60px; }
html[data-layout=mobile] .h2 { font-size: 30px; }
html[data-layout=mobile] .hero-photo { aspect-ratio: 4/5; min-height: 470px; }
html[data-layout=mobile] .hero { background: #173b60; }
html[data-layout=mobile] .hero > .slide-play { margin: 0 24px 24px; }
html[data-layout=mobile] .hero-bg-image { top: 0; bottom: 0; }
html[data-layout=mobile] .hero-tint { background: linear-gradient(180deg,rgb(12 35 58 / 15%),rgb(12 35 58 / 80%)); }
html[data-layout=mobile] .hero-photo-copy { bottom: 20%; padding-inline: 24px; }
html[data-layout=mobile] .hero h1 { font-size: 36px; font-weight: 700; line-height: 1.3; }
html[data-layout=mobile] .hero-photo-eyebrow { color: #d6e4f1; font-size: 11px; }
html[data-layout=mobile] .hero-inner { padding: 28px 24px 32px; background: #173b60; }
html[data-layout=mobile] .hero-lead { font-size: 15px; line-height: 1.85; }
html[data-layout=mobile] .hero-lead b { color: #fff; }
html[data-layout=mobile] .equip-tab-m { font-family: var(--font); font-size: 12px; letter-spacing: 0; }
html[data-layout=mobile] .equip-photo-m { height: 310px; object-fit: contain; padding: 18px; background: #f3f6f9; }
html[data-layout=mobile] .equip-body-m { padding: 24px 22px; }
html[data-layout=mobile] .equip-h3-m { font-size: 24px; line-height: 1.35; }
html[data-layout=mobile] .equip-h3-m em { font-style: normal; color: inherit; font-weight: inherit; }
html[data-layout=mobile] :is(.equip-desc-m,.equip-bullets-m li,.sup-d,.sup-li li,.multi-d) { font-size: 14px; line-height: 1.8; }
html[data-layout=mobile] .review-card { border-width: 1px; border-color: #6e96bb; }
html[data-layout=mobile] .reviews :is(.tag,.review-tag) { color: #e3f1ff; }
html[data-layout=mobile] .cta { background: #173b60; padding: 64px 24px; }
html[data-layout=mobile] .cta .tag { color: #a4d1e0; }
html[data-layout=mobile] .cta-form { background: #fff; padding: 26px 22px; }
html[data-layout=mobile] .cf-field label { font-family: var(--font); font-size: 13px; letter-spacing: 0; color: #425971; }
html[data-layout=mobile] .cf :is(input,select,textarea) { background: #f7f9fc; border-color: #b7c8da; }
html[data-layout=mobile] .cf-submit { background: #2c6baf; }

@media(max-width:1100px) {
  html[data-layout=pc] .nav .menu { display: none; }
  html[data-layout=pc] .sec-head { gap: 28px; }
  html[data-layout=pc] .equip-panel { gap: 30px; }
}
@media(max-width:900px) {
  html[data-layout=pc] :is(.sec-head,.equip-panel,.cta-wrap) { grid-template-columns: minmax(0,1fr); }
  html[data-layout=pc] .sec-sub { margin-inline: 0; max-width: 640px; }
  html[data-layout=pc] .sec { padding-block: 72px; }
  html[data-layout=pc] .hero { min-height: 0; padding-top: 110px; }
  html[data-layout=pc] .hero h1 { font-size: 48px; }
  html[data-layout=pc] .sup-grid { grid-template-columns: minmax(0,1fr); }
  html[data-layout=pc] .equip-visual:has(.equip-photo) { min-height: 0; }
  html[data-layout=pc] .equip-visual .equip-photo { height: 360px; }
  html[data-layout=pc] .iot-diagram { grid-template-columns: minmax(0,1fr) !important; }
  html[data-layout=pc] .o1-radial { width: 100%; max-width: 600px; margin-inline: auto; }
  html[data-layout=pc] :is(.o1-radial,.o1-side) { min-width: 0; }
}
@media(max-width:700px) {
  html[data-layout] :is(.container,.wrap) { padding-inline: 20px; }
  html[data-layout] .open-support { padding: 48px 20px; }
  html[data-layout] .open-support-head h2 { font-size: 29px; }
  html[data-layout=pc] .hero h1 { font-size: 38px !important; line-height: 1.3; }
  html[data-layout=pc] .hero-lead { font-size: 15px; }
  html[data-layout=pc] .hero-top { gap: 0; }
  html[data-layout=pc] .equip-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-layout=pc] .equip-tab { padding: 12px 8px; font-size: 12px; }
  html[data-layout=pc] .sec-title { font-size: 30px !important; }
  html[data-layout=pc] .equip-info h3 { font-size: 26px; }
  html[data-layout=pc] .equip-visual .equip-photo { height: 300px; padding: 14px; }
  html[data-layout=pc] .o1-phone { max-width: 100%; }
  html[data-layout=pc] .o1-phone-img { max-width: 100%; }
  html[data-layout=pc] #iot .o1-node { width: 100% !important; max-width: 100% !important; flex: initial !important; }
  html[data-layout=pc] .iot .o1-node-d { font-size: 14px; overflow-wrap: anywhere; }
  html[data-layout=pc] .branch-chart { flex-direction: column; align-items: stretch; padding: 16px; }
  html[data-layout=pc] .branch-chart-legend { min-width: 0; }
  html[data-layout=pc] .branch-detail-meta { white-space: normal; }
  html[data-layout=pc] .cta { padding-block: 64px; }
  html[data-layout=pc] .cta-wrap { gap: 32px; }
  html[data-layout=pc] .cta-form { padding: 24px 18px; }
  html[data-layout=pc] .cta-left h2 { font-size: 32px; }
  html[data-layout] .multi-card { padding: 24px; }
  html[data-layout] .nav .nav-cta { padding: 10px 14px; }
  html[data-layout=mobile] .hero h1 { font-size: 32px; }
  html[data-layout=mobile] .hero-photo { min-height: 440px; }
}