/* === サンプル電気 Standard 共通CSS（LP版V4から流用・新規デザイン創作なし）=== */

/* ===== サンプル電気 LP ===== */
:root{
  --sky:#7cb8e3; --sky-deep:#4f95cf; --sky-mid:#6aa9da; --sky-soft:#bfe0f4;
  --ink:#5e7280; --ink-strong:#465763; --ink-soft:#8499a6;
  --cream:#fdf7e6; --cream-deep:#fbeecb;
  --green:#16bf5b; --green-deep:#0fa64d;
  --orange:#f3a23c; --orange-deep:#e6912a;
  --bolt:#ffce3a;
  --card:#ffffff; --tile:#f3f8fd; --tile-line:#e3eef8;
  --shadow-sm:0 6px 18px rgba(96,150,200,.12);
  --shadow-md:0 14px 34px rgba(96,150,200,.16);
  --shadow-lg:0 22px 50px rgba(86,140,190,.20);
  --r:18px; --r-lg:26px; --r-xl:34px;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  font-family:"Zen Kaku Gothic New",system-ui,sans-serif;
  font-weight:500; line-height:1.85; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    linear-gradient(180deg,
      #dceffb 0%, #e7f4fc 9%, #eef7fb 16%,
      #fbf6e9 34%, #fdf9ef 44%, #f5f6ee 52%,
      #eaf5fc 64%, #e4f2fc 78%, #def0fc 92%, #d8edfb 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
.zen{font-family:"Zen Maru Gothic",serif;}
h1,h2,h3,h4{font-family:"Zen Maru Gothic",serif; font-weight:700; color:var(--ink-strong); margin:0; line-height:1.4;}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

/* ---------- clouds / decoration ---------- */
.cloud-blob{position:absolute; border-radius:50%; background:#fff; filter:blur(6px); opacity:.85; pointer-events:none; z-index:0;}
.section{position:relative; z-index:1;}

/* fluffy cloud divider (top edge of a band) */
.clouddiv{position:absolute; left:0; right:0; width:100%; line-height:0; z-index:2; pointer-events:none;}
.clouddiv svg{width:100%; height:auto; display:block;}
.clouddiv.top{top:-1px;}
.clouddiv.bottom{bottom:-1px; transform:rotate(180deg);}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); box-shadow:0 2px 18px rgba(120,170,210,.14);}
.hdr-in{display:flex; align-items:center; gap:20px; height:78px;}
.brand{display:flex; align-items:center; gap:11px; flex:0 0 auto;}
.brand img{width:46px;height:46px;object-fit:contain}
.brand .bt{font-family:"Zen Maru Gothic",serif; font-weight:700; font-size:21px; color:var(--sky-deep); line-height:1.15; letter-spacing:.04em;}
.brand .bs{font-size:11px; color:var(--ink-soft); font-weight:500; letter-spacing:.02em;}
.nav{display:flex; gap:18px; margin-left:14px;}
.nav a{font-size:14px; color:var(--ink); font-weight:500; padding:6px 2px; position:relative; transition:color .2s; white-space:nowrap;}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--sky); border-radius:2px; transition:right .25s;}
.nav a:hover{color:var(--sky-deep)}
.nav a:hover::after{right:0}
.hdr-cta{margin-left:auto; display:flex; align-items:center; gap:12px;}
.hdr-phone{display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; padding:7px 16px; background:#f1f8fd; border-radius:14px; border:1px solid #e1eef8;}
.hdr-phone .num{font-family:"Zen Maru Gothic",serif; font-weight:700; font-size:20px; color:var(--ink-strong); display:flex; align-items:center; gap:7px;}
.hdr-phone .num::before{content:""; width:16px;height:16px; background:url("677bebdd-4df5-492f-82ce-568987b48bb9.png") center/contain no-repeat;}
.hdr-phone .sub{font-size:10.5px; color:var(--ink-soft); margin-top:1px;}
.hbtn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:62px; height:58px; border-radius:14px; color:#fff; font-size:10px; font-weight:700; box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s;}
.hbtn img{width:22px;height:22px;object-fit:contain; filter:brightness(0) invert(1);}
.hbtn:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.hbtn.line{background:var(--green)}
.hbtn.quote{background:var(--orange)}
.hbtn .t{font-size:10px; line-height:1.1; text-align:center}
.menu-btn{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:14px; border-radius:16px; padding:16px 26px; color:#fff; box-shadow:var(--shadow-md); transition:transform .16s, box-shadow .16s; cursor:pointer;}
.btn:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.btn .ic{width:42px;height:42px; border-radius:50%; background:rgba(255,255,255,.22); display:flex;align-items:center;justify-content:center; flex:0 0 auto;}
.btn .ic img{width:24px;height:24px;object-fit:contain; filter:brightness(0) invert(1);}
.btn .tx{display:flex; flex-direction:column; line-height:1.2; text-align:left;}
.btn .tx b{font-family:"Zen Maru Gothic",serif; font-size:21px; font-weight:700;}
.btn .tx small{font-size:11.5px; opacity:.92; font-weight:500;}
.btn.phone{background:linear-gradient(135deg,#7cbbe6,#5b9ed5)}
.btn.line{background:linear-gradient(135deg,#26c768,#12b052)}
.btn.quote{background:linear-gradient(135deg,#f7ad48,#ef9326)}

.pill-link{display:inline-flex;align-items:center;gap:8px; padding:11px 22px; border-radius:999px; background:#eef6fc; color:var(--sky-deep); font-weight:700; font-size:14px; border:1.5px solid #d7e9f7; transition:background .2s, transform .15s;}
.pill-link:hover{background:#e2f0fb; transform:translateX(3px)}
.pill-link::after{content:"›"; font-size:18px; line-height:1}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:54px 0 60px;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center;}
.hero h1{font-size:30px; color:var(--ink-strong); margin-bottom:6px; letter-spacing:.02em;}
.hero .big{font-size:58px; line-height:1.28; letter-spacing:.01em; margin:2px 0;}
.hero .big .b{color:var(--sky-deep)}
.hero-lead{margin:22px 0 28px; font-size:16px; color:var(--ink); line-height:2;}
.hero-btns{display:flex; flex-wrap:wrap; gap:14px;}
.hero-photo{position:relative;}
.hero-photo .hero-img{width:100%; height:430px; object-fit:cover; box-shadow:var(--shadow-lg); border:5px solid #fff; border-radius:30px; display:block;}
.bubble{position:absolute; left:-26px; top:36px; background:#fff; color:var(--sky-deep); font-family:"Zen Maru Gothic",serif; font-weight:700; font-size:15px; padding:13px 20px; border-radius:18px; box-shadow:var(--shadow-md); z-index:3; line-height:1.4;}
.bubble::after{content:""; position:absolute; right:26px; bottom:-12px; border:9px solid transparent; border-top-color:#fff; border-bottom:0;}

.badges{display:flex; justify-content:center; gap:0; margin:34px auto 0; background:#fff; border-radius:999px; box-shadow:var(--shadow-sm); padding:12px 10px; max-width:760px;}
.badge{display:flex; align-items:center; gap:9px; padding:4px 24px; font-size:14px; font-weight:700; color:var(--ink-strong);}
.badge+.badge{border-left:1.5px solid #eaf1f7}
.badge img{width:26px;height:26px;object-fit:contain}

/* ---------- generic section ---------- */
.band{padding:64px 0; position:relative;}
.sec-head{text-align:center; margin-bottom:42px;}
.sec-head .ttl{display:inline-flex; align-items:center; gap:12px; font-size:30px; color:var(--sky-deep); justify-content:center;}
.sec-head .ttl img{width:38px;height:30px;object-fit:contain}
.sec-head .en{display:block; font-size:12px; letter-spacing:.25em; color:var(--ink-soft); font-weight:700; margin-top:8px; text-transform:uppercase}

/* trouble cards */
.trouble-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:18px;}
.tcard{background:#fff; border-radius:var(--r); padding:24px 12px 20px; text-align:center; box-shadow:var(--shadow-sm); border:1px solid #eef4fa; transition:transform .2s, box-shadow .2s;}
.tcard:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
.tcard .ph{width:74px;height:74px; margin:0 auto 12px; border-radius:18px; background:var(--tile); display:flex;align-items:center;justify-content:center;}
.tcard .ph img{width:48px;height:48px;object-fit:contain}
.tcard p{margin:0; font-size:14px; font-weight:700; color:var(--ink-strong); line-height:1.5;}

/* services */
.serv-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
.scard{background:#fff; border-radius:var(--r); padding:22px 10px; text-align:center; box-shadow:var(--shadow-sm); border:1px solid #eef4fa; transition:transform .2s, box-shadow .2s;}
.scard:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
.scard .ph{width:84px;height:84px; margin:0 auto 12px; border-radius:20px; background:var(--tile); display:flex;align-items:center;justify-content:center;}
.scard .ph img{width:54px;height:54px;object-fit:contain}
.scard p{margin:0;font-size:14.5px;font-weight:700;color:var(--ink-strong);line-height:1.4}
.serv-banner{margin:26px auto 0; max-width:430px; display:flex; align-items:center; justify-content:center; gap:12px; background:#fff; border:1.5px dashed #f0cf8a; border-radius:999px; padding:14px 28px; box-shadow:var(--shadow-sm); font-family:"Zen Maru Gothic",serif; font-weight:700; color:var(--ink-strong); font-size:16px;}
.serv-banner img{width:30px;height:30px;object-fit:contain}

/* reasons */
.reason-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.rcard{background:#fff; border-radius:var(--r); padding:26px 22px; box-shadow:var(--shadow-sm); border:1px solid #eef4fa;}
.rcard .rt{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.rcard .rt .ri{width:48px;height:48px; flex:0 0 auto; display:flex;align-items:center;justify-content:center;}
.rcard .rt .ri img{width:42px;height:42px;object-fit:contain}
.rcard .rt .ri svg{width:40px;height:40px}
.rcard h3{font-size:16.5px; color:var(--sky-deep); line-height:1.4}
.rcard p{margin:0; font-size:14px; color:var(--ink); line-height:1.85}

/* price + cases */
.pc-grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:24px; align-items:start;}
.panel{background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); border:1px solid #eef4fa; padding:30px 28px;}
.panel .ph{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:6px;}
.panel .ph img{width:30px;height:24px;object-fit:contain}
.panel h3{font-size:22px; color:var(--sky-deep)}
.price-note{text-align:center; font-size:11.5px; color:var(--ink-soft); margin:0 0 18px}
.price-row{display:flex; align-items:baseline; gap:8px; padding:11px 4px; border-bottom:1px dashed #e6eef5;}
.price-row .nm{font-size:14.5px; font-weight:700; color:var(--ink-strong); white-space:nowrap}
.price-row .dot{flex:1; border-bottom:2px dotted #d6e2ec; transform:translateY(-4px)}
.price-row .pr{font-family:"Zen Maru Gothic",serif; font-weight:700; font-size:17px; color:var(--sky-deep); white-space:nowrap}
.panel .center{text-align:center; margin-top:22px}

.cases-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
.cases-head .mid{flex:1; display:flex; align-items:center; gap:14px; justify-content:center;}
.cases-head .mid::before,.cases-head .mid::after{content:""; height:2px; flex:1; max-width:90px; background:repeating-linear-gradient(90deg,#cfe0ee 0 6px,transparent 6px 12px)}
.cases-head h3{font-size:22px;color:var(--sky-deep)}
.case-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.ccard .case-img{width:100%; height:150px; object-fit:cover; border-radius:14px; display:block;}
.ccard .ct{font-size:14.5px; font-weight:700; color:var(--ink-strong); margin:12px 0 5px}
.ccard .cl{font-size:12px; color:var(--ink-soft); margin:0}
.ccard .cd{font-size:11px; color:#aebcc7; margin:3px 0 0}

/* testimonials */
.voice-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.vcard{background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); border:1px solid #eef4fa; padding:26px 24px;}
.vcard h4{font-size:17px; color:var(--ink-strong); margin-bottom:10px; line-height:1.5}
.vcard p{margin:0 0 16px; font-size:14px; color:var(--ink); line-height:1.85}
.vmeta{display:flex; align-items:center; gap:12px; border-top:1px solid #eef4fa; padding-top:14px;}
.vmeta .av{width:46px;height:46px; border-radius:50%; background:#eef6fc; overflow:hidden; flex:0 0 auto; display:flex;align-items:flex-end;justify-content:center}
.vmeta .av img{width:42px;height:auto;object-position:top}
.vmeta .who{font-size:13px; font-weight:700; color:var(--ink-strong)}
.vmeta .who span{display:block; font-weight:500; color:var(--ink-soft); font-size:11.5px}
.stars{margin-left:auto; color:#ffc83d; font-size:15px; letter-spacing:1px}

/* info trio */
.info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.icard{background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); border:1px solid #eef4fa; padding:28px 26px; position:relative; overflow:hidden; min-height:230px;}
.icard h3{font-size:19px; color:var(--sky-deep); margin-bottom:16px; display:flex; align-items:center; gap:9px}
.icard h3::before{content:""; width:22px;height:18px; background:url("de577aa8-af2b-47a2-9fa7-06c289303fe7.png") center/contain no-repeat; flex:0 0 auto}
.qlist{list-style:none; margin:0; padding:0;}
.qlist li{position:relative; padding:5px 0 5px 18px; font-size:14px; font-weight:600; color:var(--ink-strong)}
.qlist li::before{content:""; position:absolute; left:0; top:13px; width:7px;height:7px; border-radius:50%; background:var(--sky)}
.icard .deco{position:absolute; right:14px; bottom:10px; width:96px; opacity:.95}
.icard p{font-size:14px; color:var(--ink); line-height:1.9; margin:0 0 16px}
.crow{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:14px}
.crow dt{color:var(--ink-soft); font-weight:700}
.crow dd{margin:0; color:var(--ink-strong); font-weight:600}

/* CTA banner */
.ctaband{position:relative; padding:50px 0; z-index:1}
.cta-card{position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(180deg,#bfe2f6,#d7eefb 60%,#e9f6fd);
  box-shadow:var(--shadow-md); padding:44px 48px;}
.cta-card h2{font-size:30px; color:var(--ink-strong); text-align:center; line-height:1.5}
.cta-card h2 .o{color:var(--orange-deep)}
.cta-card h2 .b{color:var(--sky-deep)}
.cta-sub{text-align:center; font-size:15px; color:var(--ink); margin:8px 0 26px}
.cta-btns{display:flex; justify-content:center; flex-wrap:wrap; gap:16px; position:relative; z-index:2}
.cta-card .sun{position:absolute; left:34px; top:24px; width:74px; opacity:.95}
.cta-card .bird{position:absolute; width:40px; opacity:.9}
.cta-card .house{position:absolute; right:30px; bottom:0; width:170px; opacity:.97}

/* footer */
.foot{background:linear-gradient(180deg,#f3f9fd,#eaf4fb); padding:46px 0 22px; position:relative}
.foot-in{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr auto; gap:30px;}
.foot-brand .fb{display:flex; align-items:center; gap:11px; margin-bottom:12px}
.foot-brand .fb img{width:44px;height:44px;object-fit:contain}
.foot-brand .fb b{font-family:"Zen Maru Gothic",serif; font-size:20px; color:var(--sky-deep); letter-spacing:.04em}
.foot-brand p{font-size:12.5px; color:var(--ink-soft); margin:0 0 18px; line-height:1.7}
.foot-brand .cp{font-size:11px; color:#a7b6c2}
.fcol h4{font-size:14px; color:var(--ink-strong); margin-bottom:14px}
.fcol ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.fcol a{font-size:13px; color:var(--ink); position:relative; padding-left:14px; transition:color .2s}
.fcol a::before{content:"›"; position:absolute; left:0; color:var(--sky)}
.fcol a:hover{color:var(--sky-deep)}
.totop{align-self:start; display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px; background:#fff; box-shadow:var(--shadow-sm); font-size:13px; font-weight:700; color:var(--ink-strong); border:1px solid #e6eef5; cursor:pointer}
.totop:hover{transform:translateY(-2px)}
.totop::before{content:"↑"; color:var(--sky-deep)}

/* reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .nav{display:none}
  .menu-btn{display:flex}
}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:24px}
  .hero-photo{order:-1}
  .hero .big{font-size:46px}
  .pc-grid{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr; gap:26px}
  .trouble-grid{grid-template-columns:repeat(3,1fr)}
  .serv-grid{grid-template-columns:repeat(3,1fr)}
  .reason-grid{grid-template-columns:repeat(2,1fr)}
  .case-grid{grid-template-columns:repeat(2,1fr)}
  .voice-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .hdr-in{height:64px}
  .brand .bs{display:none}
  .hdr-phone{display:none}
  .hero .big{font-size:36px}
  .hero h1{font-size:22px}
  .badges{flex-wrap:wrap; border-radius:24px; padding:14px}
  .badge{flex:1 1 45%; justify-content:center}
  .badge+.badge{border-left:0}
  .trouble-grid{grid-template-columns:repeat(2,1fr)}
  .serv-grid{grid-template-columns:repeat(2,1fr)}
  .reason-grid{grid-template-columns:1fr}
  .case-grid{grid-template-columns:1fr 1fr}
  .foot-in{grid-template-columns:1fr 1fr}
  .sec-head .ttl{font-size:23px}
  .cta-card{padding:34px 20px}
  .cta-card h2{font-size:22px}
  .btn{flex:1 1 100%}
  .cta-card .house{width:110px}
}

/* ===== additions ===== */
/* service card descriptions */
.scard .st{margin:0;font-size:15px;font-weight:700;color:var(--ink-strong);line-height:1.4}
.scard .sd{margin:7px 4px 0;font-size:12px;font-weight:500;color:var(--ink-soft);line-height:1.65}

/* flow / 工事の流れ */
.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.step{position:relative;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border:1px solid #eef4fa;padding:30px 20px 26px;text-align:center}
.step .no{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#7cbbe6,#5b9ed5);color:#fff;font-family:"Zen Maru Gothic",serif;font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(91,158,213,.35)}
.step .ph{width:80px;height:80px;margin:10px auto 14px;border-radius:50%;background:var(--tile);display:flex;align-items:center;justify-content:center}
.step .ph img{width:46px;height:46px;object-fit:contain}
.step h3{font-size:16px;color:var(--sky-deep);margin-bottom:8px;line-height:1.4}
.step p{margin:0;font-size:13px;color:var(--ink);line-height:1.8}
.step:not(:last-child)::after{content:"";position:absolute;right:-13px;top:50%;transform:translateY(-50%);width:24px;height:24px;background:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%237cb8e3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>');z-index:3}

/* single centered price band */
.price-solo{max-width:680px;margin:0 auto}

/* case comment */
.ccard .cc{font-size:12px;color:var(--ink);line-height:1.7;margin:7px 0 0;border-top:1px dashed #eaf1f7;padding-top:8px}
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* care / アフターサポート */
.care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.care-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border:1px solid #eef4fa;padding:30px 26px;text-align:center}
.care-card .ph{width:74px;height:74px;margin:0 auto 14px;border-radius:50%;background:var(--tile);display:flex;align-items:center;justify-content:center}
.care-card .ph img{width:44px;height:44px;object-fit:contain}
.care-card .ph svg{width:42px;height:42px}
.care-card h3{font-size:17px;color:var(--sky-deep);margin-bottom:10px}
.care-card p{margin:0;font-size:14px;color:var(--ink);line-height:1.85}
.care-lead{text-align:center;max-width:680px;margin:-22px auto 38px;font-size:15px;color:var(--ink);line-height:1.9}

/* FAQ */
.faq-list{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-sm);border:1px solid #eef4fa;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:20px 24px;font-family:"Zen Maru Gothic",serif;font-weight:700;font-size:16px;color:var(--ink-strong)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#eef6fc;color:var(--sky-deep);display:flex;align-items:center;justify-content:center;font-size:17px}
.faq summary .mk{margin-left:auto;flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--sky);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;transition:transform .25s}
.faq[open] summary .mk{transform:rotate(45deg)}
.faq .a{padding:0 24px 22px 72px;font-size:14px;color:var(--ink);line-height:1.9}
.faq .a::before{content:"A.";color:var(--orange);font-weight:700;margin-right:6px}

@media(max-width:980px){
  .flow-grid{grid-template-columns:repeat(2,1fr);gap:34px 18px}
  .step:not(:last-child)::after{display:none}
  .works-grid{grid-template-columns:repeat(2,1fr)}
  .care-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .flow-grid{grid-template-columns:1fr;gap:32px}
  .works-grid{grid-template-columns:1fr}
  .faq summary{font-size:15px;padding:16px 18px;gap:10px}
  .faq .a{padding:0 18px 18px 18px}
}

/* ===== 電気V4 — enhancements: polish, micro-interactions, hero variants, interactive UI ===== */

:root{
  --line:#06c755; --line-deep:#05a648;
  --ease-soft:cubic-bezier(.22,1,.36,1);
  --accent:var(--orange); --accent-deep:var(--orange-deep);
}

/* respect reduced motion globally for our decorative bits */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important}
}

/* ---------------- scroll progress + sticky header shrink ---------------- */
.scrollbar{position:fixed; top:0; left:0; height:3px; width:0; z-index:60;
  background:linear-gradient(90deg,var(--sky),var(--sky-deep)); border-radius:0 3px 3px 0;
  box-shadow:0 0 10px rgba(79,149,207,.5); transition:width .1s linear;}
.hdr{transition:height .25s var(--ease-soft), box-shadow .25s, background .25s;}
.hdr.shrink{box-shadow:0 4px 22px rgba(120,170,210,.20)}
.hdr.shrink .hdr-in{height:62px}
.hdr-in{transition:height .25s var(--ease-soft)}
.brand img{transition:transform .4s var(--ease-soft)}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}

/* ---------------- richer button micro-interactions ---------------- */
.btn{position:relative; overflow:hidden; isolation:isolate;}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(120px 120px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.35), transparent 60%);
  transition:opacity .3s;}
.btn:hover::before{opacity:1}
.btn::after{content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg);}
.btn:hover::after{animation:sheen .9s var(--ease-soft)}
@keyframes sheen{to{left:160%}}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn .ic img{transition:transform .35s var(--ease-soft)}
.btn:hover .ic img{transform:scale(1.12)}
.btn.line .ic{animation:pulse-ring 2.4s ease-in-out infinite}
@keyframes pulse-ring{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 0 7px rgba(255,255,255,.18)}}

.hbtn{position:relative; overflow:hidden}
.hbtn::after{content:""; position:absolute; top:0; left:-130%; width:50%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg);}
.hbtn:hover::after{animation:sheen .8s var(--ease-soft)}

.pill-link{position:relative; overflow:hidden}
.pill-link:hover{box-shadow:0 8px 20px rgba(96,150,200,.18)}

/* ---------------- card hover polish (icon tiles bounce) ---------------- */
.tcard .ph, .scard .ph, .step .ph, .care-card .ph{transition:transform .35s var(--ease-soft), background .3s;}
.tcard:hover .ph, .scard:hover .ph{transform:translateY(-3px) rotate(-3deg); background:#e9f4fd}
.tcard:hover .ph img, .scard:hover .ph img{animation:wiggle .5s var(--ease-soft)}
@keyframes wiggle{25%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
.scard{position:relative; overflow:hidden}
.scard::before{content:""; position:absolute; left:0; right:0; bottom:0; height:0; background:linear-gradient(180deg,transparent,rgba(124,184,227,.10)); transition:height .3s;}
.scard:hover::before{height:60%}
.vcard{transition:transform .25s var(--ease-soft), box-shadow .25s; }
.vcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.rcard{transition:transform .25s var(--ease-soft), box-shadow .25s}
.rcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.ccard{transition:transform .25s var(--ease-soft), box-shadow .25s; overflow:hidden}
.ccard:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
.ccard .case-img{transition:transform .5s var(--ease-soft)}
.ccard:hover .case-img{transform:scale(1.07)}

/* staggered reveal children */
.reveal .trouble-grid > *, .reveal .serv-grid > *, .reveal .reason-grid > *,
.reveal .works-grid > *, .reveal .voice-grid > *, .reveal .care-grid > *,
.reveal .flow-grid > *, .reveal .info-grid > *{
  opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease-soft), transform .55s var(--ease-soft);}
.reveal.in .trouble-grid > *, .reveal.in .serv-grid > *, .reveal.in .reason-grid > *,
.reveal.in .works-grid > *, .reveal.in .voice-grid > *, .reveal.in .care-grid > *,
.reveal.in .flow-grid > *, .reveal.in .info-grid > *{opacity:1; transform:none}
.reveal.in .trouble-grid > *:nth-child(2),.reveal.in .serv-grid > *:nth-child(2),.reveal.in [class$="-grid"] > *:nth-child(2){transition-delay:.05s}
.reveal.in [class$="-grid"] > *:nth-child(3){transition-delay:.10s}
.reveal.in [class$="-grid"] > *:nth-child(4){transition-delay:.15s}
.reveal.in [class$="-grid"] > *:nth-child(5){transition-delay:.20s}
.reveal.in [class$="-grid"] > *:nth-child(6){transition-delay:.25s}
.reveal.in [class$="-grid"] > *:nth-child(n+7){transition-delay:.30s}

/* ---------------- floating clouds drift (hero) ---------------- */
@media (prefers-reduced-motion: no-preference){
  .cloud-blob{animation:drift 16s ease-in-out infinite alternate}
  .cloud-blob:nth-of-type(2){animation-duration:22s; animation-delay:-4s}
  .cloud-blob:nth-of-type(3){animation-duration:19s; animation-delay:-8s}
}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(26px)}}

/* =========================================================
   HERO VARIANT SYSTEM
   ========================================================= */
.hero-variant{display:none}
.hero[data-hero="a"] .hv-a{display:block}
.hero[data-hero="b"] .hv-b{display:block}
.hero[data-hero="c"] .hv-c{display:block}

/* entrance animation for hero content */
@media (prefers-reduced-motion: no-preference){
  .hero-variant.is-live .anim{opacity:0; transform:translateY(22px); animation:rise .8s var(--ease-soft) forwards}
  .hero-variant.is-live .anim.d1{animation-delay:.06s}
  .hero-variant.is-live .anim.d2{animation-delay:.14s}
  .hero-variant.is-live .anim.d3{animation-delay:.22s}
  .hero-variant.is-live .anim.d4{animation-delay:.30s}
  .hero-variant.is-live .anim.d5{animation-delay:.40s}
}
@keyframes rise{to{opacity:1; transform:none}}

/* shared hero photo polish + floating bubble bob */
.hero-photo .hero-img{transition:transform .5s var(--ease-soft)}
.hero-photo:hover .hero-img{transform:scale(1.02)}
@media (prefers-reduced-motion: no-preference){
  .bubble{animation:bob 3.4s ease-in-out infinite}
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* gradient bolt chip used in headlines */
.bolt-chip{display:inline-flex; align-items:center; justify-content:center; width:.9em; height:.9em; vertical-align:-.05em; margin:0 .04em}
.hl-underline{background:linear-gradient(180deg,transparent 62%, rgba(255,206,58,.55) 62%); padding:0 .08em; border-radius:4px}

/* ---- Variant B: bold centered ---- */
.hv-b{text-align:center; position:relative}
.hv-b .kicker{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1.5px solid #dbeaf7;
  color:var(--sky-deep); font-weight:700; font-size:13.5px; padding:8px 18px; border-radius:999px; box-shadow:var(--shadow-sm); margin-bottom:22px}
.hv-b .kicker img{width:20px;height:16px;object-fit:contain}
.hv-b h1{font-size:26px; color:var(--ink-strong); margin-bottom:8px}
.hv-b .big{font-size:62px; line-height:1.22; color:var(--ink-strong)}
.hv-b .big .b{color:var(--sky-deep)}
.hv-b .hero-lead{max-width:640px; margin:22px auto 30px; font-size:16.5px}
.hv-b .hero-btns{justify-content:center}
.hv-b .hero-strip{margin:40px auto 0; max-width:1000px; position:relative}
.hv-b .strip-photos{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:14px; height:230px}
.hv-b .strip-photos img{width:100%; height:100%; object-fit:cover; border-radius:22px; border:4px solid #fff; box-shadow:var(--shadow-md)}
.hv-b .strip-photos > *:nth-child(1){grid-row:span 1}

/* ---- Variant C: estimator-forward split ---- */
.hv-c .hero-grid{grid-template-columns:1fr 1fr; gap:36px}
.hv-c h1{font-size:28px; color:var(--ink-strong); margin-bottom:6px}
.hv-c .big{font-size:50px; line-height:1.26}
.hv-c .big .b{color:var(--sky-deep)}
.hv-c .hero-lead{margin:18px 0 22px; font-size:15.5px}
.hv-c .mini-cta{display:flex; gap:12px; flex-wrap:wrap}
.hv-c .mini-cta a{flex:0 0 auto}

/* =========================================================
   QUOTE ESTIMATOR
   ========================================================= */
.estimator{background:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); border:1px solid #eef4fa; overflow:hidden;}
.est-compact{box-shadow:var(--shadow-md)}
.est-head{display:flex; align-items:center; gap:12px; padding:20px 24px; background:linear-gradient(135deg,#eaf5fd,#f4fafe); border-bottom:1px solid #eaf2f9}
.est-head .ei{width:42px; height:42px; border-radius:13px; background:#fff; box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.est-head .ei img{width:26px; height:26px; object-fit:contain}
.est-head h3{font-size:19px; color:var(--sky-deep); line-height:1.3}
.est-head p{margin:2px 0 0; font-size:11.5px; color:var(--ink-soft); font-weight:600}
.est-body{padding:20px 24px}
.est-q{font-family:"Zen Maru Gothic",serif; font-weight:700; font-size:14.5px; color:var(--ink-strong); margin:0 0 12px; display:flex; align-items:center; gap:8px}
.est-q .qno{width:22px;height:22px;border-radius:50%;background:var(--sky);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.est-chips{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.est-compact .est-chips{grid-template-columns:1fr}
.chip{display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:14px; border:1.5px solid var(--tile-line);
  background:var(--tile); cursor:pointer; transition:border-color .18s, background .18s, transform .12s; user-select:none}
.chip:hover{border-color:#bcdcf3; background:#eef7fd}
.chip:active{transform:scale(.98)}
.chip .ci{width:38px;height:38px;border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:var(--shadow-sm)}
.chip .ci img{width:26px;height:26px;object-fit:contain}
.chip .cn{font-size:13.5px; font-weight:700; color:var(--ink-strong); line-height:1.3}
.chip .cp{display:block; font-size:11px; font-weight:600; color:var(--ink-soft); margin-top:2px}
.chip .ck{margin-left:auto; width:24px;height:24px;border-radius:50%; border:2px solid #cfe0ee; flex:0 0 auto; position:relative; transition:border-color .18s, background .18s}
.chip.on{border-color:var(--sky-deep); background:#e7f3fd; box-shadow:inset 0 0 0 1px var(--sky-deep)}
.chip.on .ck{background:var(--sky-deep); border-color:var(--sky-deep)}
.chip.on .ck::after{content:"✓"; position:absolute; inset:0; color:#fff; font-size:14px; display:flex; align-items:center; justify-content:center}

.est-foot{padding:18px 24px 22px; border-top:1px dashed #e6eef5; background:#fbfdff}
.est-total{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px}
.est-total .lbl{font-size:13px; font-weight:700; color:var(--ink-strong)}
.est-total .amt{font-family:"Zen Maru Gothic",serif; font-weight:700; font-size:30px; color:var(--sky-deep); line-height:1; font-variant-numeric:tabular-nums; transition:color .2s}
.est-total .amt small{font-size:14px; color:var(--ink-soft)}
.est-total .amt.bump{animation:bump .4s var(--ease-soft)}
@keyframes bump{40%{transform:scale(1.1)}}
.est-disc{font-size:11px; color:var(--ink-soft); margin:0 0 16px; line-height:1.6}
.est-go{width:100%; justify-content:center}
.est-go[disabled]{opacity:.5; pointer-events:none; filter:saturate(.4)}
.est-selected-list{font-size:12px; color:var(--ink-soft); margin:0 0 14px; line-height:1.7; min-height:1.2em}
.est-selected-list b{color:var(--ink-strong); font-weight:700}

/* =========================================================
   LINE CONSULTATION FLOW (chat modal)
   ========================================================= */
.modal-scrim{position:fixed; inset:0; z-index:120; background:rgba(70,100,130,.45); backdrop-filter:blur(4px);
  display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s}
.modal-scrim.open{opacity:1; pointer-events:auto}
@media(min-width:640px){.modal-scrim{align-items:center}}
.line-sheet{width:100%; max-width:430px; max-height:90vh; background:#a3c6e0; border-radius:22px 22px 0 0; overflow:hidden;
  display:flex; flex-direction:column; transform:translateY(30px) scale(.98); opacity:0; transition:transform .35s var(--ease-soft), opacity .35s;
  box-shadow:0 -10px 60px rgba(40,70,100,.4)}
@media(min-width:640px){.line-sheet{border-radius:24px; max-height:84vh}}
.modal-scrim.open .line-sheet{transform:none; opacity:1}
.line-top{display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--line); color:#fff}
.line-top .lavatar{width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden}
.line-top .lavatar img{width:34px;height:34px;object-fit:contain}
.line-top .lt-name{font-family:"Zen Maru Gothic",serif; font-weight:700; font-size:15px; line-height:1.2}
.line-top .lt-stat{font-size:11px; opacity:.9; display:flex; align-items:center; gap:5px}
.line-top .lt-stat::before{content:""; width:7px;height:7px;border-radius:50%;background:#bdffce; box-shadow:0 0 0 0 #bdffce; animation:pulse-ring 2s infinite}
.line-x{margin-left:auto; width:32px;height:32px;border-radius:50%; background:rgba(255,255,255,.2); border:0; color:#fff; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center}
.line-x:hover{background:rgba(255,255,255,.32)}
.line-progress{height:4px; background:rgba(255,255,255,.4)}
.line-progress > i{display:block; height:100%; width:20%; background:var(--line-deep); transition:width .4s var(--ease-soft)}

.line-chat{flex:1; overflow-y:auto; padding:18px 16px 8px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth;
  background-image:radial-gradient(rgba(255,255,255,.4) 1px, transparent 1px); background-size:18px 18px}
.msg{max-width:78%; font-size:13.5px; line-height:1.7; padding:11px 14px; border-radius:16px; opacity:0; transform:translateY(8px); animation:rise .35s var(--ease-soft) forwards; position:relative; word-break:break-word}
.msg.op{align-self:flex-start; background:#fff; color:var(--ink-strong); border-top-left-radius:5px; box-shadow:0 2px 6px rgba(60,90,120,.12)}
.msg.me{align-self:flex-end; background:var(--line); color:#fff; border-top-right-radius:5px; box-shadow:0 2px 6px rgba(6,160,72,.25)}
.msg.op b{color:var(--sky-deep)}
.msg-time{font-size:9.5px; opacity:.7; margin-top:3px; text-align:right}
.typing{align-self:flex-start; background:#fff; border-radius:16px; border-top-left-radius:5px; padding:13px 16px; display:flex; gap:5px; box-shadow:0 2px 6px rgba(60,90,120,.12)}
.typing i{width:7px;height:7px;border-radius:50%;background:#b8c8d4; animation:typing 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

.line-input{padding:12px 14px 16px; background:#cfe0ec; border-top:1px solid rgba(255,255,255,.5)}
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opt{background:#fff; border:1.5px solid #fff; color:var(--line-deep); font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:13px;
  padding:10px 16px; border-radius:999px; cursor:pointer; transition:transform .12s, box-shadow .15s; box-shadow:0 2px 6px rgba(60,90,120,.14)}
.opt:hover{transform:translateY(-2px); box-shadow:0 6px 14px rgba(60,90,120,.2)}
.opt:active{transform:scale(.97)}
.opt.ghost{background:transparent; border-color:rgba(255,255,255,.8); color:var(--ink-strong); box-shadow:none}
.line-form{display:flex; gap:8px}
.line-form input{flex:1; border:0; border-radius:999px; padding:12px 16px; font-size:14px; font-family:inherit; color:var(--ink-strong); box-shadow:inset 0 0 0 1px #d6e2ec}
.line-form input:focus{outline:none; box-shadow:inset 0 0 0 2px var(--line)}
.line-form button{border:0; background:var(--line); color:#fff; width:46px; border-radius:50%; cursor:pointer; font-size:18px; flex:0 0 auto; transition:transform .12s}
.line-form button:hover{transform:scale(1.06)}
.line-form button:disabled{opacity:.4; pointer-events:none}
.line-photo-slot{margin-bottom:10px}
.line-photo-slot image-slot{width:100%; height:120px; border-radius:14px; display:block}
.line-done{text-align:center; padding:8px 6px 4px}
.line-done .check{width:64px;height:64px;border-radius:50%;background:var(--line);margin:6px auto 12px;display:flex;align-items:center;justify-content:center; color:#fff; font-size:32px; box-shadow:0 8px 22px rgba(6,160,72,.35); animation:pop .5s var(--ease-soft)}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.line-done h4{font-size:18px; color:var(--ink-strong); margin-bottom:6px}
.line-done p{font-size:13px; color:var(--ink); margin:0 0 16px; line-height:1.8}

/* ---------------- floating mobile CTA + back to top FAB ---------------- */
.fab-top{position:fixed; right:18px; bottom:84px; z-index:55; width:48px; height:48px; border-radius:50%; border:0;
  background:#fff; box-shadow:var(--shadow-md); color:var(--sky-deep); font-size:20px; cursor:pointer; opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .3s, transform .3s, background .2s}
.fab-top.show{opacity:1; transform:none; pointer-events:auto}
.fab-top:hover{background:#eef6fc; transform:translateY(-2px)}

.mcta{position:fixed; left:0; right:0; bottom:0; z-index:54; display:none; gap:8px; padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px); box-shadow:0 -6px 24px rgba(96,150,200,.18)}
.mcta a{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:9px 4px; border-radius:14px; color:#fff; font-size:12px; font-weight:700; box-shadow:var(--shadow-sm)}
.mcta a img{width:20px;height:20px;object-fit:contain; filter:brightness(0) invert(1)}
.mcta a.phone{background:linear-gradient(135deg,#7cbbe6,#5b9ed5)}
.mcta a.line{background:linear-gradient(135deg,#26c768,#12b052)}
.mcta a.quote{background:linear-gradient(135deg,#f7ad48,#ef9326)}
@media(max-width:780px){
  .mcta{display:flex}
  body{padding-bottom:70px}
  .fab-top{bottom:90px}
}

/* mobile drawer nav */
.drawer-scrim{position:fixed; inset:0; z-index:100; background:rgba(70,100,130,.4); opacity:0; pointer-events:none; transition:opacity .3s}
.drawer-scrim.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:78%; max-width:320px; z-index:101; background:#fff; box-shadow:-10px 0 40px rgba(60,100,140,.25);
  transform:translateX(100%); transition:transform .32s var(--ease-soft); display:flex; flex-direction:column; padding:22px 22px calc(22px + env(safe-area-inset-bottom)); overflow-y:auto}
.drawer.open{transform:none}
.drawer .dhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.drawer .dhead b{font-family:"Zen Maru Gothic",serif; color:var(--sky-deep); font-size:18px}
.drawer .dx{width:34px;height:34px;border-radius:50%;background:#eef6fc;border:0;color:var(--sky-deep);font-size:20px;cursor:pointer}
.drawer nav{display:flex; flex-direction:column; gap:2px}
.drawer nav a{padding:13px 12px; border-radius:12px; font-weight:700; color:var(--ink-strong); font-size:15px; transition:background .15s; display:flex; align-items:center; gap:10px}
.drawer nav a:hover{background:#f1f8fd}
.drawer nav a::before{content:""; width:7px;height:7px;border-radius:50%;background:var(--sky)}
.drawer .dcta{margin-top:auto; padding-top:18px; display:flex; flex-direction:column; gap:10px}

/* ---------------- tweaks panel mount isolation ---------------- */
#tweaks-root{position:fixed; z-index:130}

/* trust counter strip (added under hero) */
.proof{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px; margin:30px auto 0; max-width:820px}
.proof .pi{display:flex; flex-direction:column; align-items:center; line-height:1.1}
.proof .pn{font-family:"Zen Maru Gothic",serif; font-weight:700; font-size:34px; color:var(--sky-deep); font-variant-numeric:tabular-nums}
.proof .pn .u{font-size:16px; color:var(--ink-soft); margin-left:2px}
.proof .pl{font-size:12px; color:var(--ink-soft); font-weight:600; margin-top:3px}
.proof .pdiv{width:1px; background:#dbe7f1; align-self:stretch}
@media(max-width:560px){.proof .pdiv{display:none} .proof{gap:18px 26px}}

/* section entrance for the heading icon */
.sec-head .ttl img{transition:transform .4s var(--ease-soft)}
.reveal.in .sec-head .ttl img{animation:bob 3s ease-in-out infinite}

/* =========================================================
   TWEAK-DRIVEN OVERRIDES
   ========================================================= */
/* accent-driven quote/estimate buttons + banners */
.btn.quote{background:linear-gradient(135deg, var(--accent), var(--accent-deep))}
.hbtn.quote{background:var(--accent)}
.mcta a.quote{background:linear-gradient(135deg, var(--accent), var(--accent-deep))}
.serv-banner{border-color:color-mix(in srgb, var(--accent) 55%, #fff)}
.faq .a::before{color:var(--accent)}

/* card style: outline (flatter, bordered) */
body[data-cards="outline"] .tcard,
body[data-cards="outline"] .scard,
body[data-cards="outline"] .rcard,
body[data-cards="outline"] .vcard,
body[data-cards="outline"] .care-card,
body[data-cards="outline"] .icard,
body[data-cards="outline"] .step,
body[data-cards="outline"] .panel,
body[data-cards="outline"] .estimator,
body[data-cards="outline"] .faq{
  box-shadow:none; border:2px solid #d9e7f3;
}
body[data-cards="outline"] .tcard:hover,
body[data-cards="outline"] .scard:hover,
body[data-cards="outline"] .rcard:hover,
body[data-cards="outline"] .vcard:hover,
body[data-cards="outline"] .ccard:hover{
  box-shadow:none; border-color:var(--sky); transform:translateY(-4px);
}
body[data-cards="outline"] .estimator{border-color:#cfe2f2}

/* motion off: kill decorative loops + entrance transforms */
body[data-motion="off"] .cloud-blob,
body[data-motion="off"] .bubble,
body[data-motion="off"] .reveal.in .sec-head .ttl img,
body[data-motion="off"] .btn.line .ic{animation:none !important}
body[data-motion="off"] .hero-variant.is-live .anim{animation:none !important; opacity:1 !important; transform:none !important}
body[data-motion="off"] .btn:hover::after,
body[data-motion="off"] .hbtn:hover::after{animation:none !important}
body[data-motion="off"] .reveal{transition-duration:.25s}

/* ===== スクロール追従 固定お問い合わせCTA ===== */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:95; display:flex; gap:8px; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 -4px 18px rgba(31,90,130,.14); transform:translateY(115%); transition:transform .35s ease;}
.sticky-cta.show{transform:translateY(0);}
.sticky-item{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:9px 4px; border-radius:14px; font-size:12px; font-weight:700; text-decoration:none; line-height:1.2; color:#fff;}
.sticky-item img{width:22px; height:22px; object-fit:contain;}
.sticky-item.phone{background:var(--sky-deep);}
.sticky-item.line{background:#06c755;}
.sticky-item.quote{background:var(--accent);}
@media(min-width:769px){
  .sticky-cta{left:auto; right:22px; bottom:22px; flex-direction:column; width:auto; gap:10px; padding:0; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;}
  .sticky-item{flex:none; flex-direction:row; gap:9px; padding:13px 22px; border-radius:50px; font-size:14.5px; box-shadow:0 8px 22px rgba(31,90,130,.24);}
  .sticky-item img{width:20px; height:20px;}
}
@media(max-width:768px){ body{padding-bottom:78px;} }

/* ===== Standard版 追加（複数ページ運用・新規パーツのみ。配色/角丸/影は既存変数を流用） ===== */
.nav a[aria-current="page"]{color:var(--sky-deep)}
.nav a[aria-current="page"]::after{right:0}
.drawer nav a[aria-current="page"]{background:#eef6fc;color:var(--sky-deep)}
.page-lead{text-align:center;max-width:740px;margin:16px auto 0;font-size:15px;color:var(--ink);line-height:1.95}
.sample-note{text-align:center;font-size:12px;color:#9bb3c4;margin:14px 0 0;letter-spacing:.02em}
.lead-wrap{max-width:780px;margin:0 auto 34px;text-align:center;font-size:15px;color:var(--ink);line-height:1.95}

/* 会社概要テーブル */
.spec-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid #eef4fa}
.spec-table th,.spec-table td{text-align:left;padding:15px 20px;font-size:14.5px;border-bottom:1px solid #eef4fa;vertical-align:top;line-height:1.8}
.spec-table th{width:32%;background:#f5fafe;color:var(--ink-strong);font-weight:700;font-family:"Zen Maru Gothic",serif;white-space:nowrap}
.spec-table td{color:var(--ink-strong)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
@media(max-width:560px){.spec-table th,.spec-table td{display:block;width:auto}.spec-table th{border-bottom:0;padding-bottom:2px}.spec-table td{padding-top:4px}}

/* ごあいさつ */
.greet{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border:1px solid #eef4fa;padding:34px 34px;max-width:880px;margin:0 auto}
.greet p{font-size:15px;color:var(--ink);line-height:2.05;margin:0 0 16px}
.greet p:last-child{margin-bottom:0}
.greet .sign{text-align:right;font-family:"Zen Maru Gothic",serif;font-weight:700;color:var(--ink-strong);font-size:16px;margin-top:8px}

/* 料金カテゴリ見出し */
.price-cat{font-family:"Zen Maru Gothic",serif;font-weight:700;color:var(--sky-deep);font-size:16px;margin:24px 0 4px;display:flex;align-items:center;gap:9px}
.price-cat::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sky)}
.price-cat:first-of-type{margin-top:4px}
.price-row .pr small{font-size:12px;color:var(--ink-soft);font-weight:600}

/* 問い合わせ 導線カード */
.route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 auto 34px;max-width:980px}
@media(max-width:780px){.route-grid{grid-template-columns:1fr}}
.route{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border:1px solid #eef4fa;padding:26px 22px;text-align:center}
.route .ph{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;background:var(--tile);display:flex;align-items:center;justify-content:center}
.route .ph img{width:34px;height:34px;object-fit:contain}
.route h3{font-size:17px;color:var(--sky-deep);margin-bottom:6px}
.route p{font-size:13px;color:var(--ink);line-height:1.8;margin:0 0 14px}
.route .big-num{font-family:"Zen Maru Gothic",serif;font-weight:700;font-size:24px;color:var(--ink-strong);line-height:1.2}

/* 問い合わせフォーム */
.form-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border:1px solid #eef4fa;padding:32px 30px;max-width:740px;margin:0 auto}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:700;color:var(--ink-strong);margin-bottom:7px;font-family:"Zen Maru Gothic",serif}
.field label .req{color:#e8743c;font-size:11.5px;margin-left:7px;font-weight:700}
.field input,.field select,.field textarea{width:100%;border:1.5px solid #dce8f2;border-radius:12px;padding:13px 15px;font-size:15px;font-family:inherit;color:var(--ink-strong);background:#fbfdff;transition:border-color .18s,box-shadow .18s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(124,184,227,.18)}
.field textarea{min-height:130px;resize:vertical}
.form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:560px){.form-grid2{grid-template-columns:1fr}}
.form-note{font-size:12px;color:var(--ink-soft);line-height:1.75;margin:2px 0 18px}
.form-ok{display:none;text-align:center;background:#eaf7ef;border:1.5px solid #b9e6cc;border-radius:16px;padding:24px;color:#1c8a4e;font-weight:700;line-height:1.9;font-family:"Zen Maru Gothic",serif}

/* ===== 連絡先アイコンを実色ではっきり見せる（代表FB 2026-06-09：LINE/電話マークが白潰れ）===== */
/* ヘッダー小ボタン：白塗りフィルタ解除＋白チップで実色アイコンを表示 */
.hbtn img{filter:none; background:#fff; border-radius:8px; padding:2px; width:27px; height:27px;}
.hbtn{gap:3px;}
/* 大ボタン（ヒーロー/CTA/見積り/ドロワー）：アイコン丸を白地に・実色アイコン */
.btn .ic{background:#fff;}
.btn .ic img{filter:none;}
/* モバイル下部バー・スクロール追従CTA：白チップ＋実色 */
.mcta a img{filter:none; background:#fff; border-radius:7px; padding:2px; width:25px; height:25px;}
.sticky-item img{filter:none; background:#fff; border-radius:7px; padding:2px; width:26px; height:26px;}
/* ヘッダー電話番号の前の受話器マークをはっきり（青丸アイコン）*/
.hdr-phone .num{gap:8px;}
.hdr-phone .num::before{width:19px; height:19px;}