/* 電気工事サポートセンター デンサポ LP
   型は solar-center-v2/css/renewal.css（見本LP）。青系を紺＋電気の黄色へ置き換え、
   WEB相談・フォーム関連のスタイルは持ち込まない（電話のみ）。 */

:root{
  --navy:#0e2f66;      /* ブランド紺 */
  --blue:#1b4a9e;      /* 紺の明るい版（帯・枠線） */
  --yellow:#f5b400;    /* 電話ボタン・強調の黄 */
  --lemon:#ffe55c;     /* 紺地の上で使う明るい黄 */
  --cream:#fff8d6;     /* 淡い黄の背景 */
  --pale:#eef3fb;      /* 淡い紺の背景 */
  --line:#c9d6ea;      /* 淡い枠線 */
  --ink:#111b30;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;background:#e9eef6}
body{margin:0;color:var(--ink);font-family:'Noto Sans JP',sans-serif;font-size:16px;line-height:1.75}
h1,h2,h3,h4,p,figure{margin:0}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.header,.main,.footer{max-width:650px;margin:auto}
.main{background:#fff;box-shadow:0 0 36px #10285a1a}
.image-note,.note,.small{font-size:12px;line-height:1.7}
.image-note{padding:5px 12px;text-align:right}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:fixed;left:12px;top:-70px;z-index:40;background:#fff;padding:10px}
.skip-link:focus{top:8px}
a:focus-visible{outline:4px solid #ed9500;outline-offset:4px}
section[id]{scroll-margin-top:90px}

/* ヘッダー */
.header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:3px solid var(--navy)}
.header_nav{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;gap:14px}
.header_logo{min-width:0;flex:1}
.header_logo img{width:210px;max-width:100%;height:auto}
.header_right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.header_tel{display:flex;flex-direction:column;justify-content:center;text-align:center;text-decoration:none;border-radius:7px;line-height:1.5;padding:7px 10px;background:linear-gradient(#ffd54a,#f5b400);color:var(--navy);box-shadow:0 3px 0 #b27d00;font-weight:900}
.header_tel span{font-size:12px}
.header_tel strong{font-size:21px;white-space:nowrap}
.header_tel small{font-size:11px;font-weight:700;line-height:1.3;white-space:nowrap}

/* FV */
.hero-image{width:100%;height:auto}
.hero-note{background:var(--navy);color:#fff}

/* 電話CTA */
.sec_cta{padding:25px 22px 20px;background:#fff;text-align:center}
.tel_btn{display:block;padding:11px 12px;background:linear-gradient(#ffd54a,#f5b400);border:3px solid #fff;outline:1px solid #e5c66b;border-radius:12px;box-shadow:0 6px 0 #b27d00;text-decoration:none;color:var(--navy);line-height:1.6}
.tel_btn>span{display:block;font-size:21px;font-weight:900}
.tel_btn strong{display:block;font-size:clamp(26px,7.6vw,48px);font-weight:900;white-space:nowrap}
.tel_btn small{display:block;font-size:13px;font-weight:700}
.tel_btn i{font-style:normal}
.tel_btn:hover{filter:brightness(1.04)}
.scroll_yaji{margin-top:18px;color:var(--navy);font-size:12px;font-weight:900;line-height:1}
.scroll_yaji:after{content:'⌄';display:block;font-size:32px}

/* 見出し帯 */
.banner-title{text-align:center;padding:28px 12px 30px;font-family:'M PLUS Rounded 1c',sans-serif;font-weight:900;line-height:1.4}
.banner-title small{display:block;font-size:clamp(17px,4.6vw,28px);margin-bottom:7px}
.banner-title strong{display:block;font-size:clamp(28px,6.6vw,43px);font-weight:900}
.inverse{color:#fff;text-shadow:2px 3px 0 var(--navy);padding-top:28px}
.inverse strong{color:var(--lemon);paint-order:stroke fill;-webkit-text-stroke:2px var(--navy)}

/* 悩み */
.trouble-title{background:repeating-conic-gradient(from -10deg at 50% 100%,#fff1b8 0deg 10deg,#fff8dc 10deg 20deg);border-bottom:12px solid var(--yellow);color:var(--navy)}
.trouble-title strong{color:var(--navy);paint-order:stroke fill;-webkit-text-stroke:6px #fff;filter:drop-shadow(2px 3px 0 var(--yellow))}
.nayami_inner{padding:25px 16px}
.nayami_grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nayami_grid figure{border:2px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.nayami_grid figcaption{font-weight:900;font-size:clamp(16px,3.9vw,24px);text-align:center;background:var(--pale);color:var(--navy);padding:7px 2px}
.nayami_grid img{width:100%;aspect-ratio:1;object-fit:contain}
.omakase{background:var(--pale);text-align:center;color:var(--navy);font-weight:900;padding:0}
.omakase img{width:100%}
.omakase .image-note{font-size:12px;font-weight:400;padding:5px 12px;text-align:right}
.ansin{background:var(--cream);padding:22px 18px}
.ribbon-title{background:var(--navy);color:#fff;text-align:center;border:3px solid #fff;font-size:clamp(23px,5.8vw,36px);font-weight:900;padding:8px;box-shadow:4px 4px 0 var(--yellow)}
.ansin-body{display:flex;align-items:center;gap:18px;padding:20px 0 8px}
.ansin-body img{width:28%;flex-shrink:0}
.ansin-body p{font-weight:700;font-size:18px}
.ansin .note{margin-top:12px}

/* 相談できる工事 */
.sec_02{background:var(--blue);padding-bottom:12px}
.sec_02 .banner-title{font-size:clamp(25px,5.7vw,38px)}
.sec_lead{color:#fff;text-align:center;font-weight:700;font-size:15px;padding:0 20px;margin-top:-14px}
.jirei_inner{padding:25px 14px 0}
.jirei_box{position:relative;background:#fff;border:3px solid #111;border-radius:18px;padding:48px 20px 24px;margin:22px 0 64px;box-shadow:5px 5px 0 var(--navy)}
.jirei_box:last-of-type{margin-bottom:18px}
.jirei_icon{position:absolute;left:calc(50% - 44px);top:-44px;border:3px solid #111;background:var(--yellow);color:var(--navy);border-radius:50%;width:88px;height:88px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-weight:900;box-shadow:3px 4px 0 #fff;line-height:1}
.jirei_icon span{font-size:15px}
.jirei_icon strong{font-size:40px;margin-top:3px}
.jirei_subtitle{text-align:center;font-size:clamp(26px,6.4vw,40px);font-weight:900;color:var(--navy);margin:3px 0 14px;line-height:1.3}
.jirei_main_img{width:100%;border:2px solid var(--navy);border-radius:8px}
.jirei_box p{font-weight:600;font-size:17px}
.jirei_box .image-note{font-size:12px;font-weight:400;margin-bottom:16px}
.label-title{font-size:18px;display:inline-block;background:var(--lemon);padding:3px 14px;border:2px solid #142130;box-shadow:2px 2px 0 #142130;margin-bottom:9px}
.jirei_koe{width:36%;max-height:160px;object-fit:contain;margin:17px auto}
.other-services{margin:0 0 16px;padding:20px;background:#fff;border:3px solid var(--navy);border-radius:14px}
.other-services h3{text-align:center;color:var(--navy);font-size:24px}
.other-services ul{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.other-services li{padding:7px 9px;background:var(--pale);font-weight:700;font-size:16px}
.other-services .small{margin-top:12px;color:#425b6c}
.works-list h3{font-size:clamp(19px,5.2vw,24px)}
.works-lead{text-align:center;font-weight:700;color:var(--navy);margin-top:6px}
.works-list ol{list-style:none;counter-reset:w;padding:0;margin:14px 0 0;display:grid;gap:10px}
.works-list li{counter-increment:w;position:relative;padding:10px 12px 10px 48px;background:var(--pale);border:2px solid var(--line);border-radius:10px;line-height:1.5}
.works-list li::before{content:counter(w,decimal-leading-zero);position:absolute;left:10px;top:10px;width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--lemon);font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center}
.works-list li strong{display:block;font-size:17px;color:var(--navy)}
.works-list li span{display:block;font-size:13px;color:#33465e;margin-top:2px}

/* 理由 */
.sec_03{background:var(--cream);padding-bottom:15px}
.reason-board{text-align:center;background:var(--yellow);padding:28px 10px 24px;border-bottom:4px solid var(--ink);font-family:'M PLUS Rounded 1c',sans-serif;line-height:1.3;margin-bottom:25px;color:var(--navy)}
.reason-board span{display:block;font-size:clamp(20px,4.8vw,30px);font-weight:900}
.reason-board strong{display:block;font-size:clamp(34px,8vw,52px);font-weight:900;paint-order:stroke fill;-webkit-text-stroke:5px #fff}
.reason_inner{padding:0 16px}
.reason_box{background:#fff;border:3px solid #17202e;border-radius:16px;padding:15px;margin-bottom:19px;box-shadow:4px 4px 0 var(--yellow)}
.reason_box h3{font-size:clamp(19px,4.4vw,26px);font-weight:900;color:var(--navy);display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--navy);padding-bottom:12px;line-height:1.4}
.reason_box h3 b{font-size:35px;color:var(--blue);font-style:italic}
.reason_box>div{display:flex;gap:15px;align-items:center;padding-top:15px}
.reason_box img{width:28%;max-height:145px;object-fit:contain}
.reason_box p{font-size:17px;font-weight:600}

/* 流れ */
.sec_04{background:var(--pale);padding-bottom:30px}
.sec_04 .banner-title{font-size:clamp(28px,6.2vw,40px);font-weight:900}
.sec_04 .inverse{color:var(--navy);text-shadow:none}
.sec_04 .inverse strong{color:#fff;-webkit-text-stroke:3px var(--navy);filter:drop-shadow(2px 3px 0 #fff)}
.step_inner{padding:18px 16px 0}
.step_box{position:relative;display:grid;grid-template-columns:31% minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 16px;background:#fff;border:3px solid var(--blue);border-radius:16px;padding:36px 18px 22px}
.step_number{position:absolute;left:20px;top:-23px;background:var(--blue);border:3px solid #fff;border-radius:5px;padding:2px 12px;color:var(--lemon);font-size:22px;font-weight:900;font-style:italic;line-height:1.4}
.step_box img{width:100%;grid-row:1/3;object-fit:contain;align-self:center;max-height:145px}
.step_box h3{font-size:clamp(20px,4.5vw,28px);color:var(--blue);font-weight:900;line-height:1.4;margin-bottom:7px}
.step_box p{font-weight:600;font-size:16px}
.step_arrow{width:0;height:0;border-left:24px solid transparent;border-right:24px solid transparent;border-top:20px solid var(--blue);margin:14px auto 28px}

/* 準備 */
.sec_05 .banner-title{color:var(--navy);font-size:clamp(26px,6vw,38px);border-bottom:8px solid var(--yellow)}
.area_inner{padding:22px;text-align:center}
.area_inner>img{width:58%;max-height:440px;object-fit:contain;margin:20px auto}
.area_inner .note{font-size:14px;text-align:left;margin-top:15px}
.prep-inner{text-align:left}
.prep-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.prep-list li{border:2px solid var(--line);border-radius:7px;background:#f3f7fd;padding:10px 12px;font-weight:700;font-size:17px}
.prep-list li:before{content:'✓';color:var(--blue);margin-right:10px;font-size:23px;font-weight:900}

/* Q&A */
.sec_06{background:radial-gradient(var(--line) 1.5px,transparent 1.5px) 0 0/12px 12px;padding-bottom:12px}
.sec_06_h2{background:var(--navy);text-align:center;color:#fff;padding:18px 10px;margin-bottom:23px;line-height:1.3}
.sec_06_h2 strong{display:block;font-size:50px;font-weight:900;color:var(--lemon);font-family:'M PLUS Rounded 1c',sans-serif}
.sec_06_h2 span{font-size:27px;font-weight:900}
.qa_inner{padding:0 16px}
.qa_contents{border:3px solid var(--navy);border-radius:14px;overflow:hidden;margin-bottom:18px;background:#fff}
.q_box{background:var(--navy);color:#fff;display:flex;gap:12px;padding:12px 14px;font-size:18px;font-weight:700;line-height:1.6}
.a_box{display:flex;gap:12px;padding:16px 14px;font-size:16px}
.q_box b,.a_box b{font-size:27px;line-height:1.3;flex-shrink:0}
.q_box b{color:var(--lemon)}
.a_box b{color:var(--blue)}

/* お問い合わせ（電話のみ） */
.sec_07{background:var(--cream);padding-bottom:28px}
.contact-title{background:var(--navy);color:#fff;padding:19px 12px;text-align:center;font-size:clamp(26px,6vw,38px);font-weight:900;font-family:'M PLUS Rounded 1c',sans-serif;line-height:1.35}
.contact_lead{text-align:center;padding:20px 14px 4px;font-size:17px;font-weight:700;color:var(--navy)}
.sec_07 .sec_cta{background:transparent}

/* 下固定の電話ボタン */
.bottom_btn_area{position:fixed;bottom:0;left:0;right:0;margin:auto;width:100%;max-width:650px;display:flex;padding:9px 12px max(10px,env(safe-area-inset-bottom));background:#fffffff2;border-top:1px solid var(--line);z-index:30;box-shadow:0 -3px 15px #10285a15}
.bottom_btn_area a{display:flex;flex-direction:column;justify-content:center;text-align:center;text-decoration:none;border-radius:7px;line-height:1.5;font-weight:900}
.bottom_tel{width:100%;background:linear-gradient(#ffd54a,#f5b400);color:var(--navy);padding:4px 10px;box-shadow:0 3px 0 #b27d00}
.bottom_tel span{font-size:12px}
.bottom_tel strong{font-size:clamp(20px,5.4vw,30px)}

/* フッター */
.footer{text-align:center;color:#fff;background:var(--navy);padding:28px 16px 125px}
.footer-logo{width:80%;max-width:350px;margin:0 auto 16px;background:#fff;padding:12px;border-radius:8px}
.footer p{font-size:14px;margin-top:8px}
.footer small{font-size:12px;color:#d1e1f3}

@media(max-width:480px){
  .header_nav{gap:8px;padding:8px}
  .header_logo img{width:160px}
  .header_tel{padding:6px 8px}
  .header_tel strong{font-size:18px}
  .header_tel small{font-size:10px}
  .tel_btn>span{font-size:18px}
  .tel_btn small{font-size:12px}
  .other-services{padding:15px}
  .other-services li{font-size:14px}
  .works-list li{padding-left:44px}
  .works-list li strong{font-size:15px}
  .works-list li span{font-size:12px}
  .area_inner{padding:18px}
}
@media(max-width:420px){
  .sec_cta{padding:20px 15px}
  .jirei_box{padding-left:15px;padding-right:15px}
  .ansin-body{gap:10px}
  .ansin-body p{font-size:16px}
  .reason_box{padding:12px}
  .reason_box>div{gap:10px}
  .reason_box p{font-size:16px}
  .step_box{gap:0 10px;padding-left:12px;padding-right:12px}
  .bottom_btn_area{padding:8px 9px 12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}