/*
Theme Name: HHS - 北越ホームサポート
Theme URI: https://example.com/
Author: 北越ホームサポート
Description: 北越ホームサポート専用のシングルページテーマ。施工事例・お客様の声・料金・FAQを管理画面から編集できます。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: hhs
Tags: one-column, custom-logo, custom-colors
*/


  :root{
    --navy:#16215F;
    --navy-deep:#061E60;
    --green:#398638;
    --green-deep:#36803C;
    --cream:#F2F4E9;
    --cream-alt:#F7F8F2;
    --paper:#FBFCF8;
    --tint:#EAF3E9;
    --accent:#E8622A;
    --accent-deep:#C94E1B;
    --accent-soft:#FDEDE4;
    --ink:#1f2a45;
    --muted:#4c5a72;
    --white:#ffffff;
    --line:#06C755;
    --shadow:0 8px 30px rgba(6,30,96,.10);
    --radius:14px;
    --display:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
    --body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  }
  :root{color-scheme:light;}
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;background:#FBFCF8}
  body{
    font-family:var(--body);
    color:var(--ink);
    background:var(--paper);
    line-height:1.9;
    font-size:17px;
    -webkit-font-smoothing:antialiased;
    padding-bottom:72px; /* room for mobile action bar */
  }
  @media(min-width:820px){ body{padding-bottom:0} }
  h1,h2,h3{font-family:var(--display);line-height:1.4;letter-spacing:.01em}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:1080px;margin:0 auto;padding:0 20px}

  /* ---------- Header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(1.2) blur(8px);
    border-bottom:1px solid rgba(22,33,95,.10);
  }
  .bar{display:flex;align-items:center;justify-content:space-between;height:72px}
  .brand{display:flex;align-items:center;gap:12px}
  .brand img.mark{height:46px;width:auto;flex:none}
  .brand .name{font-family:var(--display);font-weight:900;color:var(--navy);font-size:19px;letter-spacing:.02em}
  .brand .name small{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.08em}
  .head-cta{display:none;gap:10px;align-items:center}
  @media(min-width:820px){ .head-cta{display:flex} }
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--display);font-weight:700;font-size:15px;
    padding:11px 20px;border-radius:999px;white-space:nowrap;transition:.15s;
    border:2px solid transparent;
  }
  .btn:hover{transform:translateY(-1px)}
  .btn-tel{background:var(--accent);color:#fff}
  .btn-tel:hover{background:var(--accent-deep)}
  .btn-line{background:var(--line);color:#fff}
  .btn-ghost{background:var(--accent-soft);color:var(--accent-deep);border-color:var(--accent)}
  .btn-big{font-size:18px;padding:16px 30px}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;overflow:hidden;
    background:
      radial-gradient(900px 420px at 88% -20%, rgba(57,134,56,.16), transparent 62%),
      linear-gradient(168deg,#ffffff 0%, var(--cream) 100%);
    color:var(--ink);
    border-bottom:1px solid rgba(22,33,95,.06);
  }
  .hero .wrap{padding-top:64px;padding-bottom:80px;position:relative;z-index:2}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.14em;
    color:var(--green-deep);background:#fff;
    padding:7px 14px;border-radius:999px;border:1px solid rgba(57,134,56,.35);
    box-shadow:0 2px 10px rgba(22,33,95,.06);
  }
  .hero h1{
    font-size:clamp(30px,6.4vw,52px);font-weight:900;margin:22px 0 18px;
    letter-spacing:.02em;color:var(--navy);
  }
  .hero h1 .accent{color:var(--green-deep)}
  .hero p.lead{font-size:clamp(15px,2.4vw,18px);color:#3a465f;max-width:38em;font-weight:400}
  .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
  .hero-note{margin-top:14px;font-size:13px;color:var(--muted)}
  .hero-note b{color:var(--accent-deep)}
  .areachips{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
  .chip{
    font-size:13px;font-family:var(--display);font-weight:500;
    background:#fff;border:1px solid rgba(22,33,95,.16);
    color:var(--navy);padding:6px 13px;border-radius:8px;
  }
  /* roofline divider */
  .roofline{display:block;width:100%;height:22px;margin-top:-1px}

  /* ---------- Section base ---------- */
  section{padding:72px 0;background:var(--paper)}
  .sec-head{text-align:center;max-width:40em;margin:0 auto 40px}
  .sec-head .kicker{
    font-family:var(--display);font-weight:700;color:var(--green-deep);
    font-size:13px;letter-spacing:.16em;display:block;margin-bottom:10px;
  }
  .sec-head h2{font-size:clamp(24px,4.4vw,34px);color:var(--navy);font-weight:900}
  .sec-head h2::after{content:"";display:block;width:52px;height:4px;border-radius:2px;
    background:var(--green);margin:14px auto 0}
  .sec-head p{color:var(--muted);margin-top:14px;font-size:16px}

  /* ---------- Pain cards ---------- */
  .pain{background:var(--cream-alt)}
  .grid{display:grid;gap:16px}
  .pain .grid{grid-template-columns:1fr}
  @media(min-width:620px){ .pain .grid{grid-template-columns:1fr 1fr} }
  @media(min-width:900px){ .pain .grid{grid-template-columns:1fr 1fr 1fr} }
  .pain-card{
    background:#fff;border-radius:var(--radius);padding:22px 22px;
    box-shadow:var(--shadow);border:1px solid rgba(22,33,95,.06);
    display:flex;gap:14px;align-items:flex-start;
  }
  .pain-card .tick{
    flex:none;width:30px;height:30px;border-radius:8px;
    background:var(--cream);color:var(--green-deep);
    display:grid;place-items:center;font-weight:900;font-size:17px;
  }
  .pain-card p{font-size:15px;font-weight:500}
  .pain-lead{
    text-align:center;margin-top:36px;font-family:var(--display);
    font-weight:700;font-size:clamp(18px,3vw,22px);color:var(--navy);
  }
  .pain-lead .hl{
    background:linear-gradient(transparent 62%,#c8e6c0 62%);padding:0 4px;
  }

  /* ---------- Services ---------- */
  .services{background:var(--paper)}
  .works{background:var(--paper)}
  .price{background:var(--paper)}
  .services .grid{grid-template-columns:1fr}
  @media(min-width:620px){ .services .grid{grid-template-columns:1fr 1fr} }
  @media(min-width:900px){ .services .grid{grid-template-columns:1fr 1fr 1fr} }
  .svc-group{margin-top:44px}
  .svc-group:first-of-type{margin-top:0}
  .svc-group-label{
    display:flex;align-items:center;gap:14px;margin-bottom:20px;
  }
  .svc-group-label .gl-txt{
    font-family:var(--display);font-weight:900;font-size:clamp(18px,3vw,22px);
    color:var(--navy);white-space:nowrap;
  }
  .svc-group-label .gl-en{
    font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em;
    color:var(--green-deep);
  }
  .svc-group-label .gl-line{flex:1;height:2px;background:linear-gradient(90deg,rgba(57,134,56,.4),transparent)}
  .svc{
    background:#fff;border-radius:var(--radius);padding:26px 24px;
    border:1px solid rgba(22,33,95,.08);box-shadow:var(--shadow);
    transition:.18s;position:relative;overflow:hidden;
  }
  .svc:hover{transform:translateY(-3px)}
  .svc::before{content:"";position:absolute;left:0;top:0;width:100%;height:5px;background:var(--green)}
  .svc .ico{width:44px;height:44px;margin-bottom:14px}
  .svc h3{font-size:19px;color:var(--navy);margin-bottom:8px}
  .svc p{font-size:15px;color:var(--muted)}

  /* ---------- Reasons ---------- */
  .reasons{background:var(--tint)}
  .reasons .grid{grid-template-columns:1fr}
  @media(min-width:760px){ .reasons .grid{grid-template-columns:1fr 1fr} }
  .reason{
    display:flex;gap:18px;align-items:flex-start;
    background:#fff;border:1px solid rgba(22,33,95,.07);
    border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);
  }
  .reason .num{
    flex:none;font-family:var(--display);font-weight:900;font-size:26px;
    color:var(--green);line-height:1;
  }
  .reason h3{font-size:19px;margin-bottom:6px;color:var(--navy)}
  .reason p{font-size:15px;color:var(--muted)}

  /* ---------- Works (before/after) ---------- */
  .works .grid{grid-template-columns:1fr}
  @media(min-width:720px){ .works .grid{grid-template-columns:1fr 1fr} }
  @media(min-width:1000px){ .works .grid{grid-template-columns:1fr 1fr 1fr} }
  .work{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(22,33,95,.06)}
  .ba{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#dfe1d8}
  .ba .ph{
    aspect-ratio:4/3;background:var(--cream-alt);
    display:grid;place-items:center;position:relative;
    color:var(--muted);font-size:13px;text-align:center;padding:10px;
    border:2px dashed rgba(22,33,95,.18);
  }
  .ba .ph span.tag{
    position:absolute;top:8px;left:8px;font-family:var(--display);font-weight:700;
    font-size:11px;color:#fff;background:var(--navy);padding:3px 9px;border-radius:6px;
  }
  .ba .ph.after span.tag{background:var(--green-deep)}
  .work .cap{padding:16px 18px}
  .work .cap h3{font-size:16px;color:var(--navy);margin-bottom:4px}
  .work .cap p{font-size:13px;color:var(--muted)}

  /* ---------- Voice ---------- */
  .voice{background:var(--tint)}
  .voice .grid{grid-template-columns:1fr}
  @media(min-width:760px){ .voice .grid{grid-template-columns:1fr 1fr 1fr} }
  .qt{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border:1px solid rgba(22,33,95,.06)}
  .qt .stars{color:#e8b84b;font-size:15px;letter-spacing:2px;margin-bottom:10px}
  .qt p{font-size:16px}
  .qt .who{margin-top:14px;font-size:13px;color:var(--muted);font-weight:500}
  .voice-note{text-align:center;color:var(--muted);font-size:12px;margin-top:24px}

  /* ---------- Price ---------- */
  .price .box{
    background:#fff;border-radius:18px;box-shadow:var(--shadow);
    border:1px solid rgba(22,33,95,.08);overflow:hidden;max-width:760px;margin:0 auto;
  }
  .price .row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid rgba(22,33,95,.08)}
  .price .row:last-child{border-bottom:none}
  .price .row .lbl{font-family:var(--display);font-weight:700;color:var(--navy);font-size:15px}
  .price .row .val{color:var(--green-deep);font-weight:700;font-family:var(--display);white-space:nowrap}
  .price .free{
    text-align:center;background:var(--green);color:#fff;padding:20px;
    font-family:var(--display);font-weight:700;font-size:clamp(17px,3vw,21px);
  }
  .price small.disc{display:block;text-align:center;color:var(--muted);font-size:12px;margin-top:16px}

  /* ---------- Area ---------- */
  .area{background:var(--tint);text-align:center}
  .area-list{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
  .area-list .a{
    font-family:var(--display);font-weight:700;font-size:clamp(16px,3vw,20px);
    background:#fff;border:1px solid rgba(57,134,56,.25);color:var(--navy);
    border-radius:12px;padding:14px 22px;box-shadow:0 2px 10px rgba(22,33,95,.05);
  }
  .area .more{margin-top:22px;color:var(--muted);font-size:14px}

  /* ---------- Contact ---------- */
  .contact{background:var(--cream)}
  .contact-grid{display:grid;gap:22px;grid-template-columns:1fr;max-width:900px;margin:0 auto}
  @media(min-width:780px){ .contact-grid{grid-template-columns:1fr 1fr} }
  .cc{
    background:#fff;border-radius:18px;padding:30px 26px;text-align:center;
    box-shadow:var(--shadow);border:1px solid rgba(22,33,95,.08);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  }
  .cc .cico{width:46px;height:46px;margin-bottom:4px}
  .cc h3{font-size:18px;color:var(--navy)}
  .cc .tel-num{font-family:var(--display);font-weight:900;font-size:clamp(26px,6vw,34px);color:var(--accent-deep);letter-spacing:.02em;line-height:1.2}
  .cc .hours{font-size:13px;color:var(--muted)}
  .cc .qr{width:132px;height:132px;background:var(--cream-alt);border:2px dashed rgba(22,33,95,.25);border-radius:12px;display:grid;place-items:center;color:var(--muted);font-size:11px;text-align:center;padding:8px;margin:6px 0}
  .cc .lineid{font-size:13px;color:var(--muted)}
  .cc .lineid b{color:var(--green-deep)}

  /* ---------- Footer ---------- */
  footer{background:var(--navy);color:#cdd5ea;padding:40px 0 30px;text-align:center}
  footer .fbrand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px}
  footer .fbrand .name{font-family:var(--display);font-weight:900;color:#fff;font-size:18px}
  footer .fmeta{font-size:13px;line-height:2}
  footer .copy{margin-top:18px;font-size:11px;color:#8b96ba}

  footer .flogo{display:inline-block;background:#fff;border-radius:16px;padding:16px 22px 12px}
  footer .flogo img{width:210px;display:block}

  /* ---------- Hero trust badges ---------- */
  .hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
  .hero-badges .b{
    display:inline-flex;align-items:center;gap:7px;
    font-family:var(--display);font-weight:700;font-size:13px;color:var(--navy);
    background:#fff;border:1px solid rgba(57,134,56,.30);
    padding:8px 14px;border-radius:999px;box-shadow:0 2px 10px rgba(22,33,95,.05);
  }
  .hero-badges .b svg{width:15px;height:15px;flex:none}

  /* ---------- Flow (process) ---------- */
  .flow{background:var(--paper)}
  .flow-list{max-width:760px;margin:0 auto;position:relative}
  .flow-step{position:relative;display:flex;gap:18px;padding:0 0 30px 0}
  .flow-step:last-child{padding-bottom:0}
  .flow-step .n{
    flex:none;width:52px;height:52px;border-radius:50%;
    background:var(--navy);color:#fff;display:grid;place-items:center;
    font-family:var(--display);font-weight:900;font-size:20px;z-index:2;
  }
  .flow-step::before{content:"";position:absolute;left:25px;top:52px;bottom:0;width:2px;background:rgba(57,134,56,.35)}
  .flow-step:last-child::before{display:none}
  .flow-step .body{padding-top:4px}
  .flow-step .body h3{font-size:18px;color:var(--navy);margin-bottom:4px}
  .flow-step .body .free-tag{display:inline-block;font-family:var(--display);font-weight:700;font-size:12px;color:#fff;background:var(--accent);border-radius:6px;padding:2px 9px;margin-left:8px}
  .flow-step .body p{font-size:15px;color:var(--muted)}

  /* ---------- FAQ ---------- */
  .faq{background:var(--tint)}
  .faq-list{max-width:760px;margin:0 auto}
  .faq-item{background:#fff;border:1px solid rgba(22,33,95,.08);border-radius:12px;margin-bottom:12px;box-shadow:var(--shadow);overflow:hidden}
  .faq-item summary{
    list-style:none;cursor:pointer;padding:18px 22px;
    font-family:var(--display);font-weight:700;font-size:16px;color:var(--navy);
    display:flex;align-items:flex-start;gap:12px;
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary .q{flex:none;color:var(--green-deep);font-weight:900}
  .faq-item summary .mk{margin-left:auto;flex:none;transition:transform .2s;color:var(--green-deep);font-weight:900}
  .faq-item[open] summary .mk{transform:rotate(45deg)}
  .faq-item .a{padding:0 22px 20px 50px;font-size:15px;color:var(--muted)}
  .faq-item .a .note{display:block;margin-top:8px;font-size:12.5px;color:#8790a6}

  /* ---------- CTA band ---------- */
  .ctaband{
    background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);
    color:#fff;text-align:center;padding:48px 0;
  }
  .ctaband .t{font-family:var(--display);font-weight:900;font-size:clamp(20px,4.4vw,28px)}
  .ctaband .s{color:#d6ddf0;margin-top:10px;font-size:15px}
  .ctaband .btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:24px}
  .btn-white{background:var(--accent);color:#fff;border-color:var(--accent)}
  .btn-white:hover{background:var(--accent-deep)}

  /* ---------- Mobile sticky action bar ---------- */
  .mobilebar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
    box-shadow:0 -4px 20px rgba(6,30,96,.18);
  }
  .mobilebar a{
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--display);font-weight:700;font-size:15px;color:#fff;padding:16px 8px;
  }
  .mobilebar .m-tel{background:var(--accent)}
  .mobilebar .m-line{background:var(--line)}
  @media(min-width:820px){ .mobilebar{display:none} }

  .icn{width:20px;height:20px;flex:none}

  /* ---------- 緊急対応バンド ---------- */
  .urgent{
    background:linear-gradient(135deg,var(--accent) 0%, var(--accent-deep) 100%);
    color:#fff;padding:34px 0;
  }
  .urgent .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px;text-align:center}
  .urgent .u-txt{font-family:var(--display);font-weight:900;font-size:clamp(17px,3.4vw,23px);line-height:1.5}
  .urgent .u-sub{display:block;font-size:14px;font-weight:500;color:#ffe6da;margin-top:6px}
  .urgent .btn{background:#fff;color:var(--accent-deep);border-color:#fff}
  .urgent .btn:hover{background:#fff4ee}

  /* ---------- 施工事例：準備中の見せ方 ---------- */
  .works-empty{
    max-width:680px;margin:0 auto;text-align:center;
    background:#fff;border:1px solid rgba(22,33,95,.08);border-radius:var(--radius);
    padding:38px 26px;box-shadow:var(--shadow);
  }
  .works-empty .ico{width:52px;height:52px;margin:0 auto 14px}
  .works-empty h3{font-size:19px;color:var(--navy);margin-bottom:10px}
  .works-empty p{font-size:15px;color:var(--muted)}

  /* ---------- お問い合わせフォーム ---------- */
  .formwrap{max-width:720px;margin:34px auto 0;background:#fff;border:1px solid rgba(22,33,95,.08);
    border-radius:18px;padding:30px 26px;box-shadow:var(--shadow)}
  .formwrap h3{font-size:19px;color:var(--navy);text-align:center;margin-bottom:6px}
  .formwrap .fsub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:22px}
  .fld{margin-bottom:16px}
  .fld label{display:block;font-family:var(--display);font-weight:700;font-size:14px;color:var(--navy);margin-bottom:6px}
  .fld label .req{color:#fff;background:var(--accent);font-size:11px;border-radius:4px;padding:2px 7px;margin-left:6px}
  .fld input[type=text],.fld input[type=tel],.fld input[type=email],.fld select,.fld textarea{
    width:100%;padding:13px 14px;font-size:16px;font-family:var(--body);color:var(--ink);
    border:1.5px solid rgba(22,33,95,.18);border-radius:10px;background:#fff;
  }
  .fld textarea{min-height:120px;resize:vertical}
  .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(57,134,56,.12)}
  .fld .hint{font-size:12.5px;color:var(--muted);margin-top:5px}
  .fhp{position:absolute;left:-9999px}
  .fsubmit{width:100%;padding:17px;font-size:17px;margin-top:6px;cursor:pointer;border:none}
  .fnote{text-align:center;font-size:12.5px;color:var(--muted);margin-top:14px}
  .fmsg{padding:14px 16px;border-radius:10px;margin-bottom:18px;font-size:15px;font-weight:500}
  .fmsg.ok{background:#e7f5e6;color:#1f6b28;border:1px solid rgba(57,134,56,.3)}
  .fmsg.ng{background:#fdecea;color:#b3261e;border:1px solid rgba(179,38,30,.25)}