:root{--blue:#075da8;--deep:#073b70;--sky:#eaf7ff;--line:#d7e8f5;--text:#17324a;--muted:#617487;--accent:#e7142c;--green:#0aa44b;--gold:#d5a42b;--shadow:0 18px 45px rgba(14,70,115,.13)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;color:var(--text);background:#fff;line-height:1.7}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 36px));margin:auto}.topbar{background:#f4f9fd;border-bottom:1px solid var(--line);font-size:13px}.topbar .container{display:flex;justify-content:space-between;align-items:center;padding:7px 0;color:#3a566f}.sitehead{background:#fff;position:sticky;top:0;z-index:30;box-shadow:0 2px 12px rgba(2,56,95,.08)}.headrow{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0}.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--deep)}.logo-mark{width:46px;height:46px;border-radius:12px;background:linear-gradient(145deg,#0b7dca,#034a89);display:grid;place-items:center;color:#fff;font-weight:900;letter-spacing:.5px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}.brand strong{font-size:28px;line-height:1}.brand small{display:block;font-weight:600;color:#58738c;margin-top:6px}.contact-strip{display:flex;align-items:center;gap:10px}.hours{background:#eaf6ff;border:1px solid #b9d9f1;color:#075da8;border-radius:10px;padding:9px 12px;font-weight:800;text-align:center;line-height:1.25}.tel{background:linear-gradient(135deg,#0b6cb8,#075297);color:#fff;padding:10px 18px;border-radius:12px;font-size:24px;font-weight:900;box-shadow:var(--shadow)}.tel small{display:block;font-size:11px;font-weight:700;opacity:.9}.mailbtn{padding:11px 16px;border-radius:10px;border:1px solid #aacdea;background:#fff;color:#0b5ea0;font-weight:800}.nav{border-top:1px solid #edf4f8;background:#fff}.nav .container{display:flex;gap:4px;justify-content:space-between}.nav a{padding:13px 10px;font-size:14px;font-weight:800;color:#21445e;border-bottom:3px solid transparent}.nav a:hover,.nav a.active{color:#0871bd;border-color:#0871bd}.hero{background:#dff3ff;overflow:hidden}.hero img{width:100%;height:auto}.hero-note{background:linear-gradient(90deg,#effaff,#fff,#effaff);border-bottom:1px solid var(--line)}.hero-note .container{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;padding:12px}.pill{padding:7px 14px;background:#fff;border:1px solid #bcdcf1;border-radius:999px;font-weight:800;color:#0d629f}.section{padding:70px 0}.section.soft{background:linear-gradient(180deg,#f7fcff,#eef8ff)}.section.wave{background:linear-gradient(rgba(244,251,255,.92),rgba(255,255,255,.96)),url('hakodate.webp') center/cover}.titlebox{text-align:center;margin-bottom:34px}.eyebrow{display:inline-block;color:#0b70b8;font-size:14px;font-weight:900;letter-spacing:.12em;margin-bottom:6px}.titlebox h2{margin:0;font-size:34px;color:var(--deep);line-height:1.35}.titlebox p{margin:10px auto 0;max-width:760px;color:var(--muted)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{background:#fff;border:1px solid #d7eaf7;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:.2s}.card:hover{transform:translateY(-4px)}.card .pic{aspect-ratio:16/9;overflow:hidden;background:#dceef8}.card .pic img{width:100%;height:100%;object-fit:cover}.card .body{padding:20px}.card h3{margin:0 0 8px;font-size:21px;color:#0a558f}.card p{margin:0;color:#637588;font-size:14px}.card .more{display:inline-flex;margin-top:14px;font-weight:800;color:#0b72ba}.reform{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch}.reform-main{border-radius:22px;overflow:hidden;min-height:420px;position:relative;background:url('service2.webp') center/cover;box-shadow:var(--shadow)}.reform-main:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,48,86,.78),rgba(2,48,86,.18))}.reform-copy{position:absolute;z-index:2;left:32px;bottom:30px;color:#fff;max-width:540px}.reform-copy h2{font-size:38px;margin:0 0 10px}.reform-copy p{margin:0 0 16px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:10px;background:#0b6eb8;color:#fff;font-weight:800;border:0}.btn.red{background:#e51b2d}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.mini{position:relative;border-radius:16px;overflow:hidden;min-height:198px;background:#dbeef7;box-shadow:var(--shadow)}.mini img{width:100%;height:100%;object-fit:cover}.mini span{position:absolute;left:0;right:0;bottom:0;padding:14px;color:#fff;font-weight:900;background:linear-gradient(transparent,rgba(0,42,78,.9))}.strengths{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.strength{background:#fff;border:1px solid #d8e9f5;border-radius:16px;padding:22px;text-align:center;box-shadow:var(--shadow)}.num{width:48px;height:48px;border-radius:50%;background:#e9f6ff;display:grid;place-items:center;margin:0 auto 12px;color:#0871b9;font-weight:900}.strength h3{margin:0 0 6px;color:#0a568e}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:26px}.feature{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:28px;border:1px solid #d7eaf7}.feature h3{margin:0 0 8px;color:#0a568e;font-size:24px}.feature strong{color:#e31e32}.cta{background:linear-gradient(135deg,#07477f,#0c7fc8);color:#fff}.cta .container{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding-top:48px;padding-bottom:48px}.cta h2{font-size:34px;margin:0 0 10px}.cta .bigphone{font-size:42px;font-weight:900;color:#ffe56d;line-height:1.2}.cta .actions{display:flex;flex-wrap:wrap;gap:12px}.cta .btn{background:#fff;color:#085e9d}.footer{background:#062e52;color:#dbeaf4;padding:40px 0 20px}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:24px}.footer h4{color:#fff;margin:0 0 10px}.footer a{display:block;font-size:14px;margin:5px 0;color:#d8e7f2}.copy{border-top:1px solid rgba(255,255,255,.13);margin-top:28px;padding-top:16px;font-size:12px;text-align:center}.pagehero{padding:68px 0;background:linear-gradient(135deg,#e4f6ff,#f9fdff);border-bottom:1px solid var(--line)}.pagehero h1{font-size:40px;margin:0;color:var(--deep)}.pagehero p{color:#55728a;max-width:760px}.content{padding:60px 0}.box{background:#fff;border:1px solid #d9eaf5;border-radius:18px;padding:28px;box-shadow:var(--shadow);margin-bottom:20px}.box h2,.box h3{color:#0a5a95}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:13px;border-bottom:1px solid #e6f0f6;text-align:left}.table th{width:28%;color:#0b5e9b;background:#f6fbff}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field input,.field textarea,.field select{padding:12px;border:1px solid #cbdde9;border-radius:10px;font:inherit}.notice{padding:16px;border-radius:12px;background:#fff6d9;border:1px solid #f1db92;color:#6e5515}.mobile-cta{display:none}@media(max-width:900px){.contact-strip{display:none}.nav .container{overflow-x:auto;justify-content:flex-start}.nav a{white-space:nowrap}.service-grid,.strengths{grid-template-columns:repeat(2,1fr)}.reform,.two-col,.cta .container,.footer-grid{grid-template-columns:1fr}.brand strong{font-size:24px}.reform-main{min-height:360px}.mobile-cta{position:fixed;display:grid;grid-template-columns:1fr 1fr 1fr;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid #cfe2ef}.mobile-cta a{padding:10px 4px;text-align:center;font-size:12px;font-weight:900;color:#075f9e}.footer{padding-bottom:80px}}@media(max-width:620px){.container{width:min(100% - 24px,1180px)}.topbar{display:none}.headrow{padding:11px 0}.logo-mark{width:40px;height:40px}.brand strong{font-size:20px}.brand small{font-size:10px}.titlebox h2,.pagehero h1{font-size:28px}.service-grid,.strengths,.mini-grid,.formgrid{grid-template-columns:1fr}.section{padding:48px 0}.reform-copy{left:20px;right:20px}.reform-copy h2{font-size:30px}.cta .bigphone{font-size:30px}}

/* v4 enhancements */
.issue-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.issue{min-height:150px;border-radius:18px;padding:22px;position:relative;overflow:hidden;color:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:flex-end;background:#0866aa}.issue:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,45,80,.04),rgba(1,45,80,.88));z-index:1}.issue>*{position:relative;z-index:2}.issue h3{margin:0;font-size:20px}.issue p{margin:3px 0 0;font-size:13px;opacity:.92}.issue img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.flow-wrap{background:linear-gradient(180deg,#f7fcff,#eaf7ff);border:1px solid #cce5f5;border-radius:24px;padding:26px;box-shadow:var(--shadow)}.flow-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.flow-card{background:#fff;border:1px solid #c7e1f2;border-radius:14px;overflow:hidden;position:relative}.flow-photo{aspect-ratio:16/9;overflow:hidden}.flow-photo img{width:100%;height:100%;object-fit:cover}.flow-body{padding:14px 12px}.flow-step{display:inline-block;background:#0866ad;color:#fff;font-weight:900;font-size:12px;border-radius:999px;padding:3px 9px;margin-bottom:7px}.flow-card h3{font-size:17px;margin:0 0 5px;color:#075b98}.flow-card p{font-size:12px;margin:0;color:#5c7387}.flow-arrow{display:none}.payment-layout{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}.payment-visual{background:#fff;border-radius:24px;padding:18px;box-shadow:var(--shadow);border:1px solid #d8eaf5}.payment-visual img{width:100%;height:auto}.pay-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.pay-option{border:2px solid #b8daf0;background:#fff;border-radius:16px;padding:16px;text-align:center;font-weight:900;color:#075c98}.warning-box{background:#fff3f3;border:2px solid #efb7bd;border-left:7px solid #dc2238;border-radius:14px;padding:18px}.warning-box strong{color:#c41c2f}.service-grid .card{display:flex;flex-direction:column;min-width:0}.service-grid .card .pic{width:100%;height:205px;aspect-ratio:auto}.service-grid .card .body{display:flex;flex-direction:column;flex:1}.service-grid .card .more{margin-top:auto;padding-top:14px}.section.bg-water{background:linear-gradient(rgba(245,252,255,.94),rgba(255,255,255,.96)),url('hakodate.webp') center/cover fixed}.section-title-ribbon{display:inline-flex;align-items:center;gap:10px;background:#075da8;color:#fff;padding:7px 14px;border-radius:999px;font-weight:900;font-size:13px}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.detail-item{background:#fff;border:1px solid #d7eaf7;border-radius:16px;padding:20px;box-shadow:var(--shadow)}.detail-item h3{margin:0 0 8px;color:#0a568e}.detail-hero{min-height:330px;display:flex;align-items:end;background-size:cover;background-position:center;position:relative;color:#fff}.detail-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,45,79,.86),rgba(2,45,79,.18))}.detail-hero .container{position:relative;z-index:2;padding-top:64px;padding-bottom:56px}.detail-hero h1{font-size:44px;margin:0 0 10px}.detail-hero p{max-width:700px}.footer{margin-top:0}
@media(max-width:1100px){.flow-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.issue-grid{grid-template-columns:repeat(2,1fr)}.flow-grid{grid-template-columns:repeat(2,1fr)}.payment-layout,.detail-grid{grid-template-columns:1fr}.service-grid .card .pic{height:190px}.detail-hero h1{font-size:36px}}
@media(max-width:620px){.issue-grid,.flow-grid{grid-template-columns:1fr}.service-grid .card .pic{height:210px}.pay-options{grid-template-columns:1fr}.flow-card{display:grid;grid-template-columns:150px 1fr}.flow-photo{height:100%;aspect-ratio:auto}.detail-hero h1{font-size:30px}}

/* v5: exact top visual supplied by user */
.top-visual-shell{position:relative;background:#fff;line-height:0;overflow:hidden}.top-visual-shell>img{width:100%;height:auto;display:block}.top-hotspots{position:absolute;inset:0;pointer-events:none}.top-hotspots .hot{position:absolute;display:block;pointer-events:auto;background:transparent;border-radius:8px}.top-hotspots .hot:focus-visible{outline:3px solid #ffcc00;outline-offset:2px}
/* navigation hotspots based on the supplied 1735x906 visual */
.top-hotspots .home{left:6.5%;top:13.1%;width:7.2%;height:5.2%}.top-hotspots .company{left:14.3%;top:13.1%;width:8%;height:5.2%}.top-hotspots .services{left:23.1%;top:13.1%;width:10.5%;height:5.2%}.top-hotspots .works{left:34%;top:13.1%;width:8.8%;height:5.2%}.top-hotspots .faq{left:50.8%;top:13.1%;width:8.2%;height:5.2%}.top-hotspots .blog{left:60.6%;top:13.1%;width:6%;height:5.2%}.top-hotspots .area{left:66.8%;top:13.1%;width:8.7%;height:5.2%}.top-hotspots .contact{left:84.5%;top:13.1%;width:10%;height:5.2%}.top-hotspots .phone{left:53.2%;top:1.9%;width:24.5%;height:10%}.top-hotspots .mail{left:81%;top:1.7%;width:15%;height:9.7%}
/* service tiles */
.top-hotspots .s1{left:2.2%;top:63.2%;width:12.8%;height:14.8%}.top-hotspots .s2{left:15.2%;top:63.2%;width:13.6%;height:14.8%}.top-hotspots .s3{left:29.2%;top:63.2%;width:13.6%;height:14.8%}.top-hotspots .s4{left:43.3%;top:63.2%;width:13.5%;height:14.8%}.top-hotspots .s5{left:57.2%;top:63.2%;width:13.5%;height:14.8%}.top-hotspots .s6{left:71.5%;top:63.2%;width:13.2%;height:14.8%}.top-hotspots .s7{left:85.1%;top:63.2%;width:12.7%;height:14.8%}
/* lower reform thumbnails */
.top-hotspots .r1{left:29.2%;top:81.5%;width:9.6%;height:15%}.top-hotspots .r2{left:39.2%;top:81.5%;width:9.6%;height:15%}.top-hotspots .r3{left:49.2%;top:81.5%;width:9.6%;height:15%}.top-hotspots .r4{left:59.2%;top:81.5%;width:11.2%;height:15%}
.below-visual-nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid #d8eaf5;box-shadow:0 4px 12px rgba(4,70,113,.08)}.below-visual-nav .container{display:flex;justify-content:center;gap:4px;overflow-x:auto}.below-visual-nav a{white-space:nowrap;padding:12px 13px;font-size:14px;font-weight:900;color:#17445f;border-bottom:3px solid transparent}.below-visual-nav a:hover{color:#0871bd;border-color:#0871bd}
@media(max-width:900px){.top-hotspots{display:none}.below-visual-nav .container{justify-content:flex-start}.below-visual-nav a{padding:11px 12px;font-size:13px}}
/* v7: 症状カード画像の見え方を改善。拡大トリミングをやめ、写真全体を見せる */
.issue-grid{gap:22px}
.issue{min-height:0;padding:0;background:#fff;color:var(--text);display:block;border:1px solid #cfe4f2;border-radius:18px;overflow:hidden;box-shadow:0 14px 34px rgba(14,70,115,.12)}
.issue:before{display:none}
.issue>*{position:relative;z-index:auto}
.issue img{position:relative;inset:auto;width:100%;height:190px;object-fit:contain;object-position:center;background:linear-gradient(135deg,#eef8ff,#fff);padding:7px;border-bottom:4px solid #0a69ad}
.issue h3{margin:0;padding:17px 20px 2px;color:#07558f;font-size:20px;line-height:1.35}
.issue p{margin:0;padding:0 20px 18px;color:#617487;font-size:13px;opacity:1}
.issue:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(14,70,115,.18)}
/* サービス一覧も画像の過度な拡大を防止 */
.service-grid .card .pic{height:220px;background:linear-gradient(135deg,#eef8ff,#fff);padding:8px}
.service-grid .card .pic img{object-fit:contain;object-position:center;border-radius:10px}
@media(max-width:900px){.issue img{height:200px}.service-grid .card .pic{height:210px}}
@media(max-width:620px){.issue img{height:auto;aspect-ratio:16/9;object-fit:contain}.service-grid .card .pic{height:auto;aspect-ratio:16/9}}

/* v8: WordPress風の円形写真メニュー */
.circle-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:46px 54px;max-width:1080px;margin:40px auto 0;align-items:start}.circle-item{text-align:center;color:var(--text);display:block;min-width:0}.circle-photo{width:210px;height:210px;margin:0 auto 20px;border-radius:50%;overflow:hidden;background:#f2f7fb;box-shadow:0 10px 28px rgba(12,76,119,.12);border:1px solid #dbeaf3;transition:.25s ease}.circle-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}.circle-item h3{font-size:20px;line-height:1.45;margin:0 0 4px;color:#0b2f4a}.circle-item p{font-size:13px;line-height:1.75;color:#4f6577;max-width:300px;margin:10px auto 0}.circle-link{display:inline-block;font-size:12px;color:#0a68ab;text-decoration:underline;text-underline-offset:3px}.circle-item:hover .circle-photo{transform:translateY(-5px);box-shadow:0 16px 34px rgba(12,76,119,.18)}.circle-item:hover h3,.circle-item:hover .circle-link{color:#0872bc}.service-page-menu{max-width:1120px}.service-page-menu .circle-photo{width:225px;height:225px}.service-page-menu .circle-item p{max-width:320px}.circle-menu-issues .circle-photo{border:5px solid #fff;outline:1px solid #d9e7ef}
@media(min-width:1050px){.circle-menu-issues,.circle-menu-services{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.circle-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 28px}.circle-photo,.service-page-menu .circle-photo{width:190px;height:190px}.circle-item h3{font-size:18px}}
@media(max-width:540px){.circle-menu{grid-template-columns:1fr;gap:34px}.circle-photo,.service-page-menu .circle-photo{width:210px;height:210px}.circle-item p{max-width:280px}.circle-menu{margin-top:30px}}
/* v9: pulled-back, high-resolution service photography */
.circle-photo{background:#f7fbfe;padding:0}
.circle-photo img{object-fit:cover;object-position:center center;transform:none!important}
.circle-item:hover .circle-photo img{transform:none!important}

/* v10: 円形写真は余白・白枠なしで全面表示 */
.circle-photo,
.circle-menu-issues .circle-photo,
.circle-menu-services .circle-photo,
.service-page-menu .circle-photo{
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:0 10px 28px rgba(12,76,119,.12);
}
.circle-photo img,
.circle-menu-issues .circle-photo img,
.circle-menu-services .circle-photo img,
.service-page-menu .circle-photo img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
}

/* v12: 「どのようなことでお困りですか？」をPCで4列×2段に */
@media(min-width:1050px){
  .circle-menu-issues-8{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    max-width:1280px;
    gap:46px 34px;
  }
  .circle-menu-issues-8 .circle-photo{
    width:205px;
    height:205px;
  }
  .circle-menu-issues-8 .circle-item p{
    max-width:270px;
  }
}

/* v15 payment guide image */
.payment-guide-section{padding-top:64px;padding-bottom:64px}
.payment-guide-image{width:100%;margin:24px auto 0;overflow:hidden;border-radius:18px;box-shadow:0 14px 34px rgba(0,76,132,.12);background:#eef8ff}
.payment-guide-image img{display:block;width:100%;height:auto;margin:0;padding:0}
@media (max-width:760px){.payment-guide-section{padding-top:44px;padding-bottom:44px}.payment-guide-image{border-radius:12px;margin-top:18px}}

/* company page visual hero */
.company-hero-image{
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#dff3ff;
  border-bottom:1px solid rgba(12,102,173,.12);
}
.company-hero-image img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  padding:0;
}
@media (max-width: 768px){
  .company-hero-image{overflow:hidden;}
  .company-hero-image img{
    width:150%;
    max-width:none;
    transform:translateX(-8%);
  }
}

/* Company representative / career */
.company-content{background:linear-gradient(180deg,#fff 0%,#f6fbff 100%)}
.rep-profile{display:grid;grid-template-columns:minmax(300px,.82fr) 1.35fr;gap:42px;align-items:center;background:#fff;border:1px solid #d7eaf7;border-radius:24px;padding:30px;box-shadow:var(--shadow);margin-bottom:28px}
.rep-photo{border-radius:20px;overflow:hidden;background:#eaf5fb;max-height:620px}
.rep-photo img{width:100%;height:100%;object-fit:cover;object-position:center 24%}
.rep-label,.career-head span{display:inline-block;color:#0871bd;font-weight:900;letter-spacing:.15em;font-size:13px;margin-bottom:7px}
.rep-copy h2{font-size:34px;line-height:1.35;color:var(--deep);margin:0 0 12px}
.rep-lead{font-size:18px;font-weight:700;color:#31566f}
.rep-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.rep-facts span{background:#eef8ff;border:1px solid #cfe6f5;border-radius:14px;padding:14px;text-align:center}
.rep-facts strong{display:block;color:#075d9f;font-size:17px}.rep-facts small{display:block;color:#60778a;margin-top:4px;line-height:1.45}
.rep-sign{text-align:right;margin-top:18px;color:#526d82}.rep-sign strong{font-size:22px;color:#073b70;margin-left:8px}
.philosophy-panel{position:relative;overflow:hidden;border-radius:24px;padding:36px 38px;margin-bottom:28px;color:#fff;background:linear-gradient(120deg,rgba(3,56,98,.96),rgba(7,117,184,.88)),url('hakodate.webp') center/cover;box-shadow:var(--shadow)}
.philosophy-panel span{font-weight:900;letter-spacing:.12em;color:#bde7ff}.philosophy-panel h2{font-size:38px;margin:4px 0 12px}.philosophy-panel p{max-width:920px;margin:8px 0;color:#f2f9ff}
.career-section{margin-top:36px}.career-head{text-align:center;max-width:820px;margin:0 auto 28px}.career-head h2{font-size:32px;color:var(--deep);margin:0 0 8px}.career-head p{color:#617487}
.career-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.career-grid article{position:relative;background:#fff;border:1px solid #d7eaf7;border-radius:18px;padding:24px;box-shadow:var(--shadow)}.career-grid b{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#e8f6ff;color:#0871bd;font-size:14px}.career-grid h3{margin:12px 0 7px;color:#075a96;font-size:21px}.career-grid p{margin:0;color:#5e7487;font-size:14px}
@media(max-width:900px){.rep-profile{grid-template-columns:1fr}.rep-photo{max-height:560px}.rep-facts,.career-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.rep-profile{padding:18px;gap:22px}.rep-copy h2,.philosophy-panel h2{font-size:27px}.rep-facts,.career-grid{grid-template-columns:1fr}.philosophy-panel{padding:26px 22px}}

/* v20: サービス案内をPCで5列×2段に */
@media(min-width:1200px){
  .service-page-menu-10{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    max-width:1500px!important;
    gap:44px 24px!important;
  }
  .service-page-menu-10 .circle-photo{width:205px!important;height:205px!important;}
  .service-page-menu-10 .circle-item h3{font-size:19px;}
  .service-page-menu-10 .circle-item p{max-width:235px!important;font-size:13px;}
}
@media(min-width:900px) and (max-width:1199px){
  .service-page-menu-10{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:980px!important;}
}

/* Company information */
.company-info-section{margin-top:28px}.company-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid #d8e8f3;margin-top:18px}.company-info-grid>div{display:grid;grid-template-columns:150px 1fr;border-bottom:1px solid #d8e8f3;padding:16px 10px;align-items:start}.company-info-grid strong{color:#075a96}.company-info-grid span{line-height:1.75}.company-info-grid a{color:#006fbd;font-weight:700}@media(max-width:700px){.company-info-grid{grid-template-columns:1fr}.company-info-grid>div{grid-template-columns:110px 1fr}}

/* services page hero image */
.services-hero-image{width:100%;overflow:hidden;background:#eefaff;border-bottom:1px solid #d8edf8}
.services-hero-image img{display:block;width:100%;height:auto;object-fit:cover}
@media(max-width:760px){.services-hero-image img{min-height:210px;object-fit:cover;object-position:center}}


/* v24 FAQ page */
.faq-hero{background:linear-gradient(120deg,rgba(235,248,255,.97),rgba(255,255,255,.95)),url('hakodate.webp') center/cover}
.faq-page{background:linear-gradient(180deg,#fff,#f5fbff)}
.faq-intro{max-width:900px;margin:0 auto 34px;text-align:center}.faq-intro h2{font-size:30px;color:var(--deep);margin:0 0 8px}.faq-intro p{margin:0;color:#617487}
.faq-category{margin:46px 0 16px;padding-bottom:10px;border-bottom:2px solid #d7eaf7}.faq-category span{display:block;color:#0a75bd;font-size:12px;font-weight:900;letter-spacing:.16em}.faq-category h2{margin:2px 0 0;color:#074c83;font-size:26px}
.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}.faq-list details{background:#fff;border:1px solid #d6e9f6;border-radius:16px;box-shadow:0 10px 28px rgba(12,76,119,.08);overflow:hidden}.faq-list summary{list-style:none;cursor:pointer;padding:19px 52px 19px 20px;font-weight:900;color:#075990;position:relative}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'＋';position:absolute;right:18px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#eaf7ff;color:#0871bd;font-size:19px}.faq-list details[open] summary:after{content:'−';background:#0871bd;color:#fff}.faq-list details>div{padding:0 20px 20px;border-top:1px solid #edf4f8;color:#50697e}.faq-list details>div p{margin:13px 0 0}.faq-list details>div a{color:#0871bd;font-weight:800;text-decoration:underline;text-underline-offset:3px}.faq-list strong{color:#0a5e9d}.faq-bottom-cta{margin-top:50px;background:linear-gradient(135deg,#e8f7ff,#fff);border:1px solid #cfe6f5;border-radius:22px;padding:34px;text-align:center;box-shadow:var(--shadow)}.faq-bottom-cta h2{margin:0 0 8px;color:#064a81}.faq-bottom-cta p{margin:0 0 20px;color:#617487}.faq-bottom-cta>div{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(max-width:800px){.faq-list{grid-template-columns:1fr}.faq-category{margin-top:36px}.faq-intro h2{font-size:25px}.faq-category h2{font-size:22px}.faq-bottom-cta{padding:26px 18px}}

/* v26: FAQ hero image background */
.faq-hero{
  background:url('faq-hero.webp') center center/cover no-repeat;
  min-height:302px;
  padding:0;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.faq-hero>.container{opacity:0;pointer-events:none}
@media(max-width:800px){
  .faq-hero{
    min-height:270px;
    padding:42px 0;
    background-position:center center;
    position:relative;
    isolation:isolate;
  }
  .faq-hero:before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(239,249,255,.78);
    z-index:-1;
  }
  .faq-hero>.container{opacity:1;pointer-events:auto}
}

/* v27: Emergency page hero + contact guidance */
.emergency-hero{
  background:url('emergency-hero.webp') center center/cover no-repeat;
  min-height:329px;
  padding:0;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.emergency-hero>.container{opacity:0;pointer-events:none}
.emergency-content .box{position:relative}
.emergency-primary{border-top:4px solid #0b6eb8}
.emergency-phone{font-size:36px;font-weight:900;color:#e31b30;line-height:1.2;margin:8px 0}
.direct-phone{font-size:32px;font-weight:900;color:#0b5e9c;line-height:1.2;margin:12px 0 2px}
.contractor-notice{background:linear-gradient(135deg,#f5fbff,#fff);border-left:5px solid #0871bd}
.contractor-notice strong{color:#075a96}
.contractor-example{padding:13px 15px;border-radius:10px;background:#eef8ff;color:#3b607a;font-size:14px}
.contractor-mail{margin-top:8px}
.sales-notice{background:#fff8f8;border-left:5px solid #e31b30}
.sales-notice h2,.sales-notice strong{color:#b41324}
@media(max-width:800px){
  .emergency-hero{
    min-height:270px;
    padding:42px 0;
    background-position:center center;
    position:relative;
    isolation:isolate;
  }
  .emergency-hero:before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(239,249,255,.80);
    z-index:-1;
  }
  .emergency-hero>.container{opacity:1;pointer-events:auto}
  .emergency-phone{font-size:31px}
  .direct-phone{font-size:28px}
}


/* v29: 対応エリアページ ヒーロー背景 */
.area-hero{
  background:url('area-hero.webp') center center/cover no-repeat;
  min-height:360px;
  padding:0;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.area-hero>.container{opacity:0;pointer-events:none}
@media(max-width:900px){
  .area-hero{
    position:relative;
    min-height:320px;
    padding:55px 0;
    background-position:center center;
  }
  .area-hero:before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(240,250,255,.94),rgba(255,255,255,.42));
  }
  .area-hero>.container{
    position:relative;
    z-index:1;
    opacity:1;
    pointer-events:auto;
  }
}


/* v30: 対応エリアページ 本文カード */
.area-content{padding-top:54px;padding-bottom:62px}
.area-intro{text-align:center;margin:0 auto 28px;max-width:980px}
.area-intro h2{font-size:34px;line-height:1.35;color:#064a83;margin:0 0 14px;font-weight:800;letter-spacing:.02em}
.area-intro h2:after{content:'';display:block;width:62px;height:3px;background:#38a4e6;border-radius:9px;margin:12px auto 0}
.area-intro p{margin:0;color:#2a4052;line-height:1.9;font-size:16px}
.area-region-panel{background:linear-gradient(180deg,#eef9ff 0%,#e8f6fd 100%);border:1px solid #d7ebf7;border-radius:13px;padding:22px 20px 18px;box-shadow:0 6px 18px rgba(8,83,132,.05)}
.area-region-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
.area-region-card{min-height:76px;background:#fff;border:1px solid #e4eff6;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 8px;color:#07518d;font-size:18px;box-shadow:0 3px 10px rgba(12,75,117,.035);white-space:nowrap}
.area-pin{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:#0863a5;font-size:15px;position:relative}
.area-pin:after{content:'';position:absolute;width:6px;height:6px;background:#fff;border-radius:50%;top:8px;left:8px}
.area-region-note{text-align:center;margin:20px 8px 0;color:#465766;font-size:14px;line-height:1.8}
.area-distance-panel{margin-top:28px;background:linear-gradient(90deg,#fffaf0,#fffdf8);border:1px solid #f4ead2;border-radius:12px;padding:24px 36px;display:flex;align-items:center;gap:24px}
.area-truck{font-size:48px;line-height:1;flex:0 0 auto}
.area-distance-panel h3{margin:0 0 7px;color:#064a83;font-size:22px}
.area-distance-panel p{margin:0;color:#31495a;line-height:1.8;font-size:15px}
.area-promise{text-align:center;color:#07518d;font-size:20px;font-weight:700;margin:30px 0 0;letter-spacing:.03em}
.area-promise:after{content:'';display:block;width:62px;height:2px;background:#2ca5e9;margin:14px auto 0}
@media(max-width:1100px){.area-region-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){
  .area-content{padding-top:38px;padding-bottom:45px}
  .area-intro h2{font-size:28px}
  .area-intro p{font-size:15px;text-align:left}
  .area-region-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .area-region-card{font-size:16px;min-height:64px}
  .area-distance-panel{padding:20px 18px;gap:14px;align-items:flex-start}
  .area-truck{font-size:34px}
  .area-distance-panel h3{font-size:20px}
  .area-distance-panel p{font-size:14px}
  .area-promise{font-size:18px}
}


/* v31: 施工事例ページ */
.works-hero{background:url('works-hero.webp') center center/100% 100% no-repeat;aspect-ratio:1312/400;min-height:0;padding:0;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.works-hero>.container{opacity:0;pointer-events:none}
.works-content{padding:46px 0 64px;background:#fff}
.works-intro{text-align:center;max-width:900px;margin:0 auto 28px}
.works-intro h2{font-size:34px;color:#07518d;margin:0 0 10px;line-height:1.35}.works-intro h2:after{content:'';display:block;width:60px;height:3px;background:#2ca5e9;border-radius:4px;margin:12px auto 0}
.works-intro p{margin:0;color:#536f84;line-height:1.9}
.works-filter{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:8px;margin:28px 0 32px}
.works-filter a{min-height:58px;display:flex;align-items:center;justify-content:center;border:1px solid #bcdcf1;border-radius:9px;background:#fff;color:#075a96;font-weight:900;padding:8px;text-align:center;transition:.2s}
.works-filter a:hover,.works-filter a.active{background:#0871bd;color:#fff;border-color:#0871bd;transform:translateY(-2px)}
.works-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 14px}
.work-card{display:block;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #d8eaf5;box-shadow:0 8px 24px rgba(12,76,119,.08);transition:.2s}
.work-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(12,76,119,.14)}
.work-photo{aspect-ratio:16/10;background:#edf7fc;overflow:hidden}.work-photo img{width:100%;height:100%;object-fit:cover}
.work-body{padding:16px 16px 18px;position:relative}.work-body>span{display:inline-block;background:#0b8ed5;color:#fff;font-size:12px;font-weight:800;border-radius:6px;padding:3px 9px;margin-bottom:7px}.work-body h3{margin:0 0 5px;color:#07518d;font-size:19px;line-height:1.5}.work-body p{margin:0;color:#5c7487;font-size:13px;line-height:1.7;min-height:44px}.work-body b{display:inline-block;margin-top:10px;color:#0871bd;font-size:13px}
.works-contact-panel{margin-top:44px;background:linear-gradient(135deg,#e8f7ff,#f9fdff);border:1px solid #cde6f5;border-radius:18px;padding:28px 34px;display:grid;grid-template-columns:1.35fr .65fr;gap:24px;align-items:center}.works-contact-panel span{color:#0871bd;font-weight:900;letter-spacing:.12em;font-size:12px}.works-contact-panel h2{margin:4px 0 8px;color:#07518d;font-size:26px}.works-contact-panel p{margin:0;color:#557084}.works-contact-panel .btn{min-height:54px;border-radius:999px;text-align:center}
.works-category-hero{padding:58px 0;background:linear-gradient(135deg,#e7f6ff,#fff);border-bottom:1px solid #d8eaf5}.works-category-hero h1{margin:0;color:#073b70;font-size:38px}.works-category-hero p{max-width:800px;color:#557084}
.works-category-content{padding:48px 0 64px;background:#fff}.category-back{margin-bottom:18px}.category-back a{color:#0871bd;font-weight:800}.category-feature{display:grid;grid-template-columns:320px 1fr;gap:34px;align-items:center;border:1px solid #d8eaf5;border-radius:20px;padding:26px;box-shadow:var(--shadow);background:#fff}.category-feature img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px}.category-feature span{color:#0871bd;font-weight:900;letter-spacing:.12em;font-size:12px}.category-feature h2{font-size:30px;color:#07518d;margin:4px 0 8px}.category-feature p{color:#587287}.category-note{background:#eef8ff;border-radius:10px;padding:14px 16px}.category-placeholder{margin-top:24px;padding:28px;border-radius:18px;background:linear-gradient(135deg,#f7fcff,#eef8ff);border:1px dashed #b7d9ee;text-align:center}.category-placeholder h3{margin:0 0 8px;color:#07518d}.category-placeholder p{margin:0;color:#60788b}
@media(max-width:1250px){.works-filter{grid-template-columns:repeat(7,1fr)}.works-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1050px){.works-filter{grid-template-columns:repeat(4,1fr)}.works-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.works-hero{aspect-ratio:auto;min-height:290px;position:relative;isolation:isolate;background-position:center;background-size:cover}.works-hero:before{content:'';position:absolute;inset:0;background:rgba(239,249,255,.78);z-index:-1}.works-hero>.container{opacity:1;pointer-events:auto}.works-hero h1{font-size:31px;margin:0;color:#073b70}.works-hero p{max-width:620px;color:#315c78;font-weight:700}.works-filter{grid-template-columns:repeat(2,1fr);gap:8px}.works-grid{grid-template-columns:1fr}.works-contact-panel{grid-template-columns:1fr;padding:24px 20px}.works-contact-panel h2{font-size:23px}.category-feature{grid-template-columns:1fr;padding:18px}.works-category-hero h1{font-size:30px}}

/* v34: ブログページ ヒーロー背景 */
.blog-hero{
  background:url('blog-hero.webp') center center/100% 100% no-repeat;
  aspect-ratio:2172/724;
  min-height:0;
  padding:0;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.blog-hero>.container{opacity:0;pointer-events:none}
@media(max-width:800px){
  .blog-hero{
    aspect-ratio:auto;
    min-height:300px;
    padding:44px 0;
    background-size:cover;
    background-position:center center;
    position:relative;
    isolation:isolate;
  }
  .blog-hero:before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(239,249,255,.80);
    z-index:-1;
  }
  .blog-hero>.container{opacity:1;pointer-events:auto}
}
/* v35 AI無料相談 hero */
.pagehero.ai-visual{
  background-image:url('ai-hero.webp');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  min-height:390px;
  padding:0;
}
@media (max-width: 900px){
  .pagehero.ai-visual{
    min-height:300px;
    background-size:cover;
    background-position:center center;
  }
}
@media (max-width: 600px){
  .pagehero.ai-visual{
    min-height:240px;
    background-size:cover;
    background-position:center center;
  }
}

/* v36 AI無料相談 hero: show the approved banner in full without top/bottom cropping */
.pagehero.ai-visual{
  width:100%;
  aspect-ratio:2172 / 724;
  min-height:0;
  padding:0;
  background-image:url('ai-hero.webp');
  background-size:100% 100%;
  background-position:center center;
  background-repeat:no-repeat;
}
@media (max-width:900px){
  .pagehero.ai-visual{
    aspect-ratio:2172 / 724;
    min-height:0;
    background-size:100% 100%;
    background-position:center center;
  }
}
@media (max-width:600px){
  .pagehero.ai-visual{
    aspect-ratio:2172 / 724;
    min-height:0;
    background-size:100% 100%;
    background-position:center center;
  }
}

.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}