:root{--green:#0b7c31;--deep:#00551e;--blue:#003f7f;--navy:#003b78;--orange:#f28c00;--red:#e60012;--border:#cfe4cf;--text:#111;--max:1280px;--shadow:0 12px 30px rgba(0,0,0,.08)}
*{box-sizing:border-box}body{margin:0;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-weight:700;line-height:1.65;background:#fff}img{max-width:100%;display:block}.container{width:min(var(--max),calc(100% - 48px));margin-inline:auto}.site-header{background:#fff;border-bottom:1px solid #e5e5e5;position:relative;z-index:10}.header-inner{min-height:118px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:16px;flex:0 0 430px;text-decoration:none}.brand-mark{height:86px;width:86px;object-fit:contain;border-radius:50%;background:#fff}.brand-logo{height:82px;width:auto;max-width:330px;object-fit:contain}.global-nav{display:flex;justify-content:center;align-self:stretch;align-items:center;gap:22px;flex:1 1 auto;min-width:0}.global-nav a{position:relative;color:#111;text-decoration:none;font-size:15px;white-space:nowrap;padding:44px 0 34px}.global-nav a.is-active::after{content:"";position:absolute;left:8px;right:8px;bottom:28px;height:4px;border-radius:999px;background:var(--blue)}.global-nav a.is-active::before{content:"";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);border:10px solid transparent;border-top-color:var(--blue)}.header-contact{flex:0 0 300px;text-align:right;min-width:300px}.business-hour{margin:0;font-size:13px;line-height:1.2;white-space:nowrap}.tel{display:block;color:#111;text-decoration:none;font-size:38px;line-height:1.05;letter-spacing:.02em;white-space:nowrap}.header-buttons{display:flex;gap:10px;justify-content:flex-end;flex-wrap:nowrap;margin-top:8px}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:#fff;text-decoration:none;padding:12px 18px;font-size:14px;line-height:1;white-space:nowrap;min-height:42px}.btn-line{background:#11963d}.btn-estimate{background:var(--orange)}
.hero{overflow:hidden;border-bottom:4px solid #20a7d7}.hero-inner{display:grid;grid-template-columns:42% 58%;min-height:455px;align-items:stretch}.hero-copy{position:relative;padding:58px 34px 28px 0;background:linear-gradient(90deg,#fff 0%,#fff 78%,rgba(255,255,255,.78) 100%)}.hero-copy:before{content:"";position:absolute;left:-40px;top:0;bottom:0;width:120px;background:linear-gradient(90deg,rgba(181,214,137,.35),transparent);border-radius:0 999px 999px 0}.hero-lead{position:relative;margin:0;font-size:34px;letter-spacing:.04em;line-height:1.36}.hero-lead.green{color:var(--green)}.hero-copy h1{position:relative;margin:8px 0 28px;color:var(--green);font-size:66px;line-height:1.05;letter-spacing:.04em}.hero-badges{position:relative;display:flex;gap:18px;flex-wrap:wrap;margin-bottom:20px}.hero-badges span{width:112px;height:112px;border:4px solid #8bc9c2;border-radius:50%;display:grid;place-items:center;color:var(--green);font-size:18px;background:#fff}.hero-checks{position:relative;display:flex;gap:12px;flex-wrap:wrap;padding:0;margin:0;list-style:none}.hero-checks li{border:2px solid #f2bd4a;border-radius:999px;background:#fff;padding:8px 18px;font-size:14px;white-space:nowrap}.hero-checks li:before{content:"✓";color:var(--orange);margin-right:6px}.hero-visual{display:grid;grid-template-columns:62% 38%;gap:6px;min-width:0}.hero-main-photo,.hero-side-photos{min-width:0}.hero-main-photo img{width:100%;height:100%;object-fit:cover}.hero-side-photos{display:grid;grid-template-rows:1fr 1fr;gap:6px}.hero-side-photos img{width:100%;height:100%;object-fit:cover}.section{padding:34px 0}.section-ribbon{display:inline-block;background:var(--green);color:#fff;padding:12px 72px;border-radius:0 0 18px 18px;transform:skewX(-12deg);margin-left:46px;margin-bottom:0;font-size:17px}.section-ribbon{position:relative;top:1px}.section-ribbon::first-letter{ }
.service-cards{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--border);border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}.service-card{display:flex;align-items:center;gap:28px;min-height:162px;padding:34px 44px;border-right:1px solid var(--border)}.service-card:last-child{border-right:0}.service-card img{width:96px;height:96px;object-fit:contain;flex:0 0 auto}.service-card h2{margin:0 0 6px;font-size:32px;line-height:1.25;white-space:nowrap}.service-card p{margin:0;font-size:17px;line-height:1.65}.service-green h2{color:var(--green)}.service-blue h2{color:var(--blue)}.service-orange h2{color:#f26c00}.section-title-row{display:flex;align-items:flex-end;gap:34px;margin-bottom:24px}.section-title-row h2,.section-heading{margin:0;color:var(--blue);font-size:32px;line-height:1.25}.section-title-row p{margin:0 0 4px;font-size:16px}.price-notes{margin:0 0 4px auto;padding:0;list-style:none;display:flex;gap:18px;color:var(--blue);font-size:15px;white-space:nowrap}.price-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}.price-card{border:2px solid var(--border);border-radius:12px;background:#fff;overflow:hidden;box-shadow:var(--shadow);text-align:center}.price-card h3{margin:0;color:#fff;font-size:22px;line-height:1.2;padding:14px 12px}.green-head{background:var(--green)}.blue-head{background:var(--blue)}.price-body{padding:26px 16px 30px}.price-body p{margin:0 0 12px;color:#06551f;font-size:18px;line-height:1.35;min-height:48px}.price-body img{width:96px;height:70px;object-fit:contain;margin:0 auto 14px}.price-body strong{display:block;color:var(--red);font-size:34px;line-height:1.1;white-space:nowrap}.price-body small{display:block;font-size:16px;line-height:1.4}.note{text-align:center;margin:18px 0 0;font-size:14px}.section-heading{margin-bottom:22px}.item-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;border:2px solid var(--border);border-radius:16px;padding:24px 34px;text-align:center}.item-grid img{width:88px;height:88px;object-fit:contain;margin:0 auto 8px}.item-grid p{margin:0;color:var(--blue);font-size:16px}.compact{justify-content:space-between}.small-more{background:var(--green);color:#fff;text-decoration:none;border-radius:999px;padding:9px 22px;font-size:13px;white-space:nowrap}.case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.case-card{text-align:center}.case-card img{width:100%;height:124px;object-fit:cover;border-radius:10px;box-shadow:var(--shadow)}.case-card p{margin:8px 0 0;font-size:15px}.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.support-box{border-radius:14px;overflow:hidden;min-height:230px;display:flex;align-items:stretch;color:#fff;box-shadow:var(--shadow)}.support-navy{background:var(--navy)}.support-green{background:var(--green)}.support-text{padding:26px 24px;flex:1 1 58%;min-width:0}.support-box h2{margin:0 0 12px;font-size:23px;line-height:1.35}.support-box p,.support-box li{font-size:15px;line-height:1.75}.support-box ul{margin:0;padding-left:1.3em}.support-box li::marker{color:#ffc42e}.support-box a{display:inline-block;margin-top:12px;background:#fff;color:var(--green);text-decoration:none;border-radius:999px;padding:10px 18px;font-size:14px;white-space:nowrap}.support-img{width:42%;height:auto;object-fit:cover;min-width:120px}.support-worry .support-img{object-fit:contain;background:#07366f;padding:10px}.support-img.owl{width:38%}.center{text-align:center}.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;border:2px solid var(--border);border-radius:16px;padding:30px 38px}.flow-step{position:relative;text-align:center}.flow-step:not(:last-child):after{content:"→";position:absolute;right:-25px;top:50%;transform:translateY(-50%);font-size:30px;color:var(--green)}.flow-step span{display:grid;place-items:center;width:32px;height:32px;margin:0 auto 8px;border-radius:50%;background:var(--green);color:#fff}.flow-step h3{margin:0 0 8px;color:var(--blue);font-size:18px}.flow-step img{width:70px;height:70px;object-fit:contain;margin:0 auto 8px}.flow-step p{margin:0;font-size:14px;line-height:1.6}.lower-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:24px}.area-content,.faq-box,.voice-box{border:2px solid var(--border);border-radius:16px;padding:24px;background:#fff}.area-content{display:grid;grid-template-columns:1fr 1fr;gap:20px}.area-content img{width:100%;height:260px;object-fit:cover;border-radius:12px;background:#f2f8f2}.area-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-content:start}.area-buttons button{appearance:none;border:2px solid #9cca9c;border-radius:12px;background:#fff;color:var(--green);padding:15px 12px;font:inherit;font-size:16px;cursor:pointer;white-space:nowrap}.area-buttons button:hover{background:#f1fff0;border-color:var(--green)}.area-buttons .wide{grid-column:1/-1}.faq-box details{border:1px solid var(--border);border-radius:8px;margin-bottom:10px;padding:12px 14px}.faq-box summary{cursor:pointer}.voice{display:flex;gap:14px;border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:14px}.voice img{width:74px;height:74px;object-fit:contain;border-radius:50%;background:#f7f7f7}.voice h3{font-size:15px;margin:0 0 6px}.voice p{margin:0;color:#555}.cta{padding:24px 0;background:#fff7e6}.cta-inner{display:flex;align-items:center;gap:22px;border:2px solid #f0bd63;border-radius:14px;background:#fff;padding:20px 28px}.cta-inner img{width:92px;height:92px;object-fit:contain}.cta-inner h2{font-size:24px;margin:0;white-space:nowrap}.cta-inner p{margin:4px 0 0}.cta-tel{margin-left:auto;color:#111;text-decoration:none;font-size:34px;white-space:nowrap}.cta-buttons{display:grid;gap:10px;min-width:180px}.site-footer{background:#003d17;color:#fff;padding:36px 0 20px}.footer-inner{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px}.footer-inner img{width:220px;height:70px;object-fit:contain;filter:brightness(0) invert(1)}.footer-tel{font-size:26px}.copyright{text-align:center;margin:20px 0 0;font-size:12px}.mobile-fixed-cta{display:none}.area-modal{display:none;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;padding:24px}.area-modal.is-open{display:flex}.area-modal-backdrop{position:absolute;inset:0;background:rgba(0,38,15,.6);backdrop-filter:blur(4px)}.area-modal-panel{position:relative;width:min(860px,100%);max-height:82vh;overflow:auto;background:#fff;border:3px solid #d7ecd2;border-radius:24px;padding:34px;box-shadow:0 28px 80px rgba(0,0,0,.28)}.area-modal-close{position:absolute;right:18px;top:14px;width:44px;height:44px;border:0;border-radius:50%;background:var(--green);color:#fff;font-size:30px;cursor:pointer}.area-modal-label{margin:0;color:var(--orange);font-size:14px}.area-modal-panel h2{margin:2px 0 8px;color:var(--blue);font-size:34px}.area-modal-lead{margin:0 0 22px}.area-city-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.area-city-grid span{border:1px solid var(--border);border-radius:999px;text-align:center;padding:10px 14px;color:#075f25;background:#f8fff5;white-space:nowrap}.modal-open{overflow:hidden}
@media(max-width:1240px){.header-inner{gap:16px}.brand{flex-basis:360px}.brand-mark{height:74px;width:74px}.brand-logo{height:74px;max-width:270px}.global-nav{gap:14px}.global-nav a{font-size:13px}.header-contact{flex-basis:270px;min-width:270px}.tel{font-size:32px}.header-buttons .btn{font-size:12px;padding:10px 12px}.hero-copy h1{font-size:58px}.hero-lead{font-size:30px}.price-body strong{font-size:29px}.service-card{padding:28px}.service-card h2{font-size:28px}}
@media(max-width:980px){.container{width:min(100% - 32px,720px)}.header-inner{min-height:92px}.brand{flex:1}.brand-mark{height:64px;width:64px}.brand-logo{height:64px;max-width:230px}.global-nav{display:none}.header-contact{display:none}.hero-inner{grid-template-columns:1fr}.hero-copy{padding:36px 0}.hero-visual{grid-template-columns:1fr}.hero-main-photo img{height:320px}.hero-side-photos{grid-template-columns:1fr 1fr;grid-template-rows:none}.hero-side-photos img{height:180px}.service-cards,.support-grid{grid-template-columns:1fr}.service-card{border-right:0;border-bottom:1px solid var(--border)}.price-grid{grid-template-columns:repeat(2,1fr)}.item-grid{grid-template-columns:repeat(3,1fr)}.case-grid{grid-template-columns:repeat(2,1fr)}.flow-grid{grid-template-columns:1fr;gap:20px}.flow-step:not(:last-child):after{content:"↓";right:auto;left:50%;top:auto;bottom:-27px;transform:translateX(-50%)}.lower-grid{grid-template-columns:1fr}.cta-inner{flex-wrap:wrap}.cta-tel{margin-left:0}.footer-inner{grid-template-columns:1fr 1fr}.mobile-fixed-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr}.mobile-fixed-cta a{color:#fff;text-decoration:none;text-align:center;padding:16px 10px;font-size:16px}.mobile-fixed-cta .btn-line{background:#11963d}.mobile-fixed-cta .btn-estimate{background:var(--orange)}body{padding-bottom:54px}}
@media(max-width:560px){.container{width:calc(100% - 24px)}.brand{gap:8px}.brand-mark{height:54px;width:54px}.brand-logo{height:54px;max-width:185px}.hero-lead{font-size:24px}.hero-copy h1{font-size:44px}.hero-badges{gap:10px}.hero-badges span{width:92px;height:92px;font-size:15px}.hero-checks li{white-space:normal}.hero-side-photos{grid-template-columns:1fr}.service-card{gap:18px;padding:24px 20px}.service-card img{width:74px;height:74px}.service-card h2{font-size:24px}.service-card p{font-size:15px}.section-title-row{display:block}.section-title-row h2,.section-heading{font-size:26px}.price-grid,.case-grid{grid-template-columns:1fr}.item-grid{grid-template-columns:repeat(2,1fr);padding:18px}.support-box{display:block}.support-img,.support-img.owl{width:100%;height:150px}.area-content{grid-template-columns:1fr}.area-buttons{grid-template-columns:1fr}.area-city-grid{grid-template-columns:1fr}.footer-inner{grid-template-columns:1fr}.cta-inner{display:block;text-align:center}.cta-inner img{margin:0 auto 12px}.cta-inner h2{white-space:normal}.cta-tel{display:block;font-size:28px;margin:12px 0}}


/* ===== requested final header/trouble fixes ===== */
.site-header{
  background:#fff;
  border-bottom:1px solid #e5e5e5;
  position:relative;
  z-index:10;
}
.site-header .header-inner{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  width:100% !important;
  max-width:1200px !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
  min-height:86px !important;
  padding:12px 0 !important;
  gap:24px !important;
}
.site-header .brand{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex:0 0 auto !important;
  min-width:260px !important;
  max-width:320px !important;
  overflow:hidden !important;
  text-decoration:none !important;
  font-size:0 !important;
  line-height:0 !important;
}
.site-header .brand-mark{
  height:60px !important;
  width:auto !important;
  max-width:none !important;
  flex:0 0 auto !important;
  object-fit:contain !important;
}
.site-header .brand-logo{
  height:60px !important;
  width:auto !important;
  max-width:230px !important;
  flex:0 1 auto !important;
  object-fit:contain !important;
}
.site-header .global-nav{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:18px !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  align-self:auto !important;
}
.site-header .global-nav a{
  display:inline-flex !important;
  align-items:center !important;
  padding:0 !important;
  color:#111 !important;
  text-decoration:none !important;
  font-size:14px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.site-header .global-nav a.is-active::before,
.site-header .global-nav a.is-active::after{
  display:none !important;
}
.site-header .header-contact{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  min-width:260px !important;
  max-width:300px !important;
  text-align:right !important;
}
.site-header .business-hour{
  margin:0 0 2px !important;
  font-size:12px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}
.site-header .tel{
  display:block !important;
  color:#111 !important;
  text-decoration:none !important;
  font-size:30px !important;
  line-height:1.05 !important;
  letter-spacing:.02em !important;
  white-space:nowrap !important;
}
.site-header .header-buttons{
  display:flex !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  margin-top:7px !important;
}
.site-header .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:38px !important;
  padding:11px 14px !important;
  border-radius:8px !important;
  font-size:12px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.trouble-section{
  padding:38px 0;
  background:#fff;
}
.trouble-section .container{
  max-width:1200px;
}
.trouble-banner{
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}
@media(max-width:1120px){
  .site-header .header-inner{max-width:100% !important;width:calc(100% - 32px) !important;gap:16px !important;}
  .site-header .brand{min-width:220px !important;max-width:260px !important;}
  .site-header .brand-mark,.site-header .brand-logo{height:54px !important;}
  .site-header .brand-logo{max-width:190px !important;}
  .site-header .global-nav{gap:12px !important;}
  .site-header .global-nav a{font-size:12px !important;}
  .site-header .header-contact{min-width:230px !important;max-width:250px !important;}
  .site-header .tel{font-size:26px !important;}
  .site-header .btn{font-size:11px !important;padding:10px 11px !important;}
}
@media(max-width:980px){
  .site-header .header-inner{min-height:78px !important;}
  .site-header .brand{min-width:auto !important;max-width:none !important;}
  .site-header .brand-mark,.site-header .brand-logo{height:52px !important;}
  .site-header .global-nav,.site-header .header-contact{display:none !important;}
}
@media(max-width:560px){
  .site-header .brand-mark,.site-header .brand-logo{height:46px !important;}
  .site-header .brand-logo{max-width:170px !important;}
  .trouble-section{padding:24px 0;}
  .trouble-banner{border-radius:12px;}
}

/* --- お悩みセクションの画像3枚レスポンシブ化 --- */
.worry-responsive-grid {
    display: flex !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.worry-card-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* 💻 パソコン画面のとき：横に3つ並べる */
@media (min-width: 769px) {
    .worry-responsive-grid {
        flex-direction: row !important;
    }
    .worry-card-img {
        flex: 1 !important; /* 3つの画像を同じ幅で均等に並べる */
    }
}

/* 📱 スマホ画面のとき：自動で縦に3つ並べる */
@media (max-width: 768px) {
    .worry-responsive-grid {
        flex-direction: column !important;
    }
    .worry-card-img {
        width: 100% !important; /* スマホの画面幅いっぱいに大きく表示する */
    }
}

/* --- 左上のロゴマーク・ロゴ文字のサイズを適正化する最終修正 --- */

/* ロゴを囲む枠（brand）の制限を解除し、左端に寄せる */
.brand {
    flex: 0 0 auto !important; /* 横幅のガチガチの固定を解除 */
    max-width: none !important;
    padding-left: 0 !important; /* 左側の無駄な余白をリセット */
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* フクロウのロゴマークを大きくする */
.brand-mark {
    height: 120px !important; /* 86pxから120pxに拡大 */
    width: 120px !important;  /* 86pxから120pxに拡大 */
    object-fit: contain !important;
}

/* 「くらしの番人」のロゴ文字を大きくする */
.brand-logo {
    height: 110px !important; /* 82pxから110pxに拡大 */
    width: auto !important;
    max-width: 400px !important; /* 制限幅を広げる */
    object-fit: contain !important;
}

/* ヘッダー全体の高さとロゴのバランスを整える */
.header-inner {
    min-height: 140px !important; /* ロゴが大きくなった分、ヘッダーの高さも少し広げる */
    justify-content: space-between !important; /* ロゴ（左）、ナビ（中）、電話（右）の配置を綺麗に分ける */
}

/*** ハンバーガー ***/

/* ========================================================
   スマホ用ハンバーガーメニュー：位置ズレ・開かないバグを完全破壊
   ======================================================== */

/* 💻 PCサイズ：三本線ボタンを完全に消しておく */
.menu-trigger {
    display: none !important;
}

/* 📱 スマホ画面（768px以下）になった時の完全制御 */
@media (max-width: 768px) {
    /* 1. ヘッダー全体の横並びと高さをカチッと制御する */
    .header-inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-right: 70px !important; /* 👈 右端にボタン用のスペースを絶対に確保する */
        padding-left: 16px !important;
        position: relative !important;
        min-height: 100px !important;
    }

    /* 2. ロゴが右側のボタンエリアを侵略しないように強制制限 */
    .brand {
        max-width: calc(100% - 60px) !important; /* ボタンの邪魔をさせない */
        flex: 0 1 auto !important;
    }
    .brand-logo {
        height: 55px !important; /* スマホ用にすっきり収まるサイズ */
        min-height: 55px !important;
        width: auto !important;
    }
    .brand-mark {
        height: 50px !important;
        width: 50px !important;
    }

    /* 3. 三本線ボタン：あらゆる親要素の枠を無視して「画面の右端」に強制ピン留め */
    button#js-menu-trigger.menu-trigger {
        display: block !important;
        position: fixed !important; /* 👈 absolute（相対位置）から fixed（絶対画面固定）に変更！ */
        right: 16px !important;    /* スマホ画面の右端から16pxの位置に強制配置 */
        top: 30px !important;     /* ヘッダーの白い帯の中央付近（上から30px）に強制配置 */
        width: 44px !important;
        height: 44px !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        cursor: pointer !important;
        z-index: 999999 !important; /* 👈 レイヤーの最前面（神の領域）に引き上げてクリックを100%通す */
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 4. 三本線の「緑色の線」を描画 */
    button#js-menu-trigger.menu-trigger span {
        display: block !important;
        position: absolute !important;
        left: 7px !important;
        width: 30px !important;
        height: 4px !important;
        background-color: #0b7c31 !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }
    button#js-menu-trigger.menu-trigger span:nth-child(1) { top: 12px !important; }
    button#js-menu-trigger.menu-trigger span:nth-child(2) { top: 20px !important; }
    button#js-menu-trigger.menu-trigger span:nth-child(3) { top: 28px !important; }

    /* 5. ボタンを押して「×」になった時のアニメーション */
    button#js-menu-trigger.menu-trigger.is-active span:nth-child(1) { transform: translateY(8px) rotate(-45deg) !important; }
    button#js-menu-trigger.menu-trigger.is-active span:nth-child(2) { opacity: 0 !important; }
    button#js-menu-trigger.menu-trigger.is-active span:nth-child(3) { transform: translateY(-8px) rotate(45deg) !important; }
}

/* ========================================================
   ハンバーガーメニュー：開かないバグをJavaScriptと完全連動させる
   ======================================================== */
@media (max-width: 768px) {
    /* 1. スマホのときは、最初メニューを画面の上に完全に隠しておく */
    nav#js-global-nav.global-nav {
        display: flex !important;
        position: fixed !important;
        top: -100% !important; /* 👈 普段は画面の外（上空）に隠す */
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
        flex-direction: column !important;
        padding: 100px 20px 40px !important;
        gap: 0 !important;
        transition: all 0.4s ease !important; /* スッと降りてくるアニメーション */
        z-index: 999998 !important; /* ボタンのすぐ後ろに配置 */
    }

    /* 2. スマホ用メニュー内のリンクの見た目 */
    nav#js-global-nav.global-nav a {
        width: 100% !important;
        text-align: center !important;
        padding: 18px 0 !important;
        border-bottom: 1px solid #eee !important;
        font-size: 18px !important;
        color: #111 !important;
    }

    /* 3. 【超重要】ボタンが押されたとき、最優先でメニューを下におろす */
    nav#js-global-nav.global-nav.is-open {
        top: 0 !important; /* 👈 JavaScriptで .is-open がついたら画面内に引き出す */
    }
}

@media (max-width: 768px) {
  /* 1. ヒーローエリア全体の横幅をリセットし、左右の余白を均等にする */
  .hero {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden; /* 画面からはみ出るのを防ぐ */
  }

  /* 2. 中身を包むコンテナを完全に画面中央に配置する */
  .hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* 左右に「20px」の均等な余白を作り、中身を中央に寄せます */
    padding: 30px 20px !important; 
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 子要素を中央揃えに */
  }

  /* 3. テキストブロック自体も中央に揃える */
  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: left; /* 文字のスタート位置は左揃えを維持（もし文字自体も中央寄せがよければ center に） */
  }

  /* 4. 3つの丸いバッジを画面の横幅に合わせて中央にバランスよく配置 */
  .hero-badges {
    display: flex !important;
    justify-content: space-between !important; /* 3つの丸を均等に広げる */
    gap: 10px !important;
    width: 100% !important;
    max-width: 400px; /* 広がりすぎないように制限 */
    margin: 20px auto !important; /* 上下に余白を作り、左右は中央揃え */
  }

  /* 5. チェックリストも中央に寄せる */
  .hero-checks {
    width: 100% !important;
    max-width: 400px;
    margin: 0 auto !important; /* 左右中央揃え */
    padding-left: 0 !important;
  }
}

/*** ヒーロー PC ***/
/* PC版のヒーローエリア設定 */
.hero {
  width: 100% !important;
  background-color: #ffffff;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important; /* 下の余白を強制ゼロに */
  height: auto !important;       /* 高さを自動にして固定値をリセット */
}

/* --- PC版ヒーローエリアの完全上書き設定 --- */

/* 1. 左右並び（Flex）を完全に解除して1枚画像専用の箱にする */
.hero-inner {
  display: block !important;       /* 横並び（flex）を解除 */
  width: 100% !important;
  max-width: 1200px !important;    /* ヘッダーのロゴやナビと同じ最大幅にする */
  margin: 0 auto !important;       /* 画面の中央に配置 */
  padding: 0 !important;           /* 余計な余白をゼロにする */
}

/* 2. 画像が潰れる原因となる古い枠の設定をすべて無効化する */
.hero-visual, 
.hero-copy {
  display: none !important;        /* 古いパーツ用の枠はすべて非表示にする */
}

/* 3. 新しく追加した1枚画像の表示設定 */
.hero-pc-img {
  display: block !important;    /* blockにすることで下の隙間が消えます */
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  vertical-align: bottom !important; /* 念のため隙間を消すおまじない */
}

/* 📱スマホのときはPC用画像を消す設定（これは維持） */
@media (max-width: 768px) {
  .hero-pc-img {
    display: none !important;
  }
}

/* 1. 外枠（section.hero）の不要な高さを強制リセット */
section.hero {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* 2. 下にあるセクション（サービス内容）の上の余白をゼロにする */
section.hero + section,
#service,
.section.service-summary {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 3. 「サービス内容」の緑色の見出し（リボン）の上余白も詰める */
.service-summary-title,
section.hero + section .container > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 元の設定の grid や min-height を完全に上書きして無効化します */
.hero-inner {
  display: block !important;       /* grid から 1枚画像用の block に変更 */
  grid-template-columns: none !important; /* ２列に分ける設定を解除 */
  min-height: 0 !important;        /* ⚠️原因だった 455px をゼロにリセット！ */
  height: auto !important;         /* 高さを画像に自動連動させる */
  padding: 0 !important;           /* 内側の余白を完全にゼロにする */
}

/* --- 📱 スマホ・PC画像自動切り替え設定 --- */

/* 1. 通常（PC版）のときは、スマホ用の画像を非表示にする */
.hero-sp-img {
  display: none !important;
}

/* 2. 画面幅が768px以下（スマホサイズ）になったときの切り替え */
@media (max-width: 768px) {
  /* PC用の画像を消す */
  .hero-pc-img {
    display: none !important;
  }

  /* スマホ用の画像を表示する */
  .hero-sp-img {
    display: block !important;
    width: 100% !important;
    height: auto !important; /* 縦横比を維持して潰れを防ぐ */
    margin: 0 auto !important;
  }

  /* スマホ版ヒーローの外枠の余白をリセット（隙間対策） */
  .hero, .hero-inner {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ===================================================
   💰 パック料金セクション デザインデータ100%再現
   =================================================== */

/* 1. 見出しエリア：横幅が狭い時は自動で2段に逃がして改行を絶対防ぐ */
.section-title-row {
  display: flex !important;
  flex-wrap: wrap;                 /* はみ出そうなら自動で下に折り返す */
  align-items: center !important;   /* 上下中央で綺麗に揃える */
  justify-content: flex-start !important;
  gap: 12px 30px !important;       /* 要素間のゆったりとした隙間 */
  margin-bottom: 34px !important;
  width: 100% !important;
}

/* メイン見出し：絶対に途中で改行させない */
.section-title-row h2 {
  margin: 0 !important;
  color: var(--blue) !important;
  font-size: 32px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;  /* 絶対に改行させないおまじない */
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 説明テキスト */
.section-title-row p {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111 !important;
  white-space: nowrap !important;
}

/* 2. チェックリスト：見出しの右端に綺麗に寄せる */
.price-notes {
  margin: 0 0 0 auto !important;   /* 左側に余白を作って一番右端に寄せる */
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  gap: 18px !important;
  color: var(--blue) !important;
  font-size: 15px !important;
  white-space: nowrap !important;
}

.price-notes li {
  position: relative !important;
  padding-left: 16px !important;
}

.price-notes li::before {
  content: "✓" !important;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue);
  font-weight: 900;
  font-size: 14px;
}

/* 3. カードのグリッド配置（横幅いっぱい、均等に） */
.price-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;            /* カード同士の間隔を少し詰めて全体の圧迫感を減らす */
  width: 100% !important;
}

.price-card {
  border: 2px solid var(--border) !important;
  border-radius: 12px !important;
  background: #fff !important;
  overflow: hidden !important;
  box-shadow: var(--shadow) !important;
  text-align: center !important;
}

.price-card h3 {
  margin: 0 !important;
  color: #fff !important;
  font-size: 18px !important;       /* カード幅に合わせて少し文字を小さく */
  padding: 12px 8px !important;
}

/* 4. カードの中身（金額を品よく、メリハリをつける） */
.price-body {
  padding: 24px 10px 24px !important; /* 上下のゆとりを持たせる */
}

.price-body p {
  margin: 0 0 16px !important;
  color: #06551f !important;
  font-size: 15px !important;       /* 枠に収まるよう一回り小さく */
  min-height: 44px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.price-body img {
  width: 80px !important;           /* トラックを少しコンパクトにして余白を作る */
  height: auto !important;
  margin: 0 auto 16px !important;
}

/* 赤い金額テキスト全体のスタイル */
.price-body strong {
  display: block !important;
  color: var(--red) !important;
  font-size: 26px !important;       /* 全体の文字サイズを落として枠内での窮屈感を解消 */
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.03em !important;
}

/* 💡 HTMLで追加した「円〜」のspanだけを狙い撃ちして小さく・細くする（デザインの完全再現） */
.price-body strong .unit {
  font-size: 15px !important;       /* 数字より一回り小さく */
  font-weight: 700 !important;     /* 少しだけ細く */
  margin-left: 1px;
}

/* 税込価格 */
.price-body small {
  display: block !important;
  font-size: 13px !important;       /* 小さくスッキリと */
  color: #555 !important;
  font-weight: 500 !important;
}

/* ===================================================
   📱 パック料金セクション スマホ用（レスポンシブ）設定
   =================================================== */
@media (max-width: 768px) {
  
  /* 1. 見出しエリアを縦並びにして中央揃えにする */
  .section-title-row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
  }

  .section-title-row h2 {
    font-size: 26px !important;       /* スマホに合わせて見出しを少し小さく */
    justify-content: center;
  }

  .section-title-row p {
    font-size: 15px !important;
  }

  /* 2. 「出張費・人件費…」のリストを中央に、収まらない場合は折り返す */
  .price-notes {
    margin: 4px auto 0 !important;   /* 右寄せを解除して中央に配置 */
    justify-content: center !important;
    flex-wrap: wrap !important;      /* 💡画面幅が狭くても自動で2段に折り返す */
    gap: 8px 14px !important;        /* 縦横の適切な隙間 */
    width: 100% !important;
    padding-left: 0 !important;
  }

  /* 3. 5枚のカードをスマホでは「縦1列」に並び替える */
  .price-grid {
    grid-template-columns: 1fr !important; /* 💡1列にする設定（もし2列にしたい場合は 1fr 1fr; に変更してください） */
    gap: 18px !important;            /* カード同士の上下の隙間 */
  }

  /* 4. カードの中身のサイズ感をスマホ用に最適化 */
  .price-card {
    max-width: 400px;                /* 横に広がりすぎないように制限 */
    margin: 0 auto;                  /* 中央に寄せる */
    width: 100%;
  }

  .price-card h3 {
    font-size: 19px !important;
    padding: 14px 10px !important;
  }

  .price-body {
    padding: 20px 16px 24px !important;
  }

  .price-body p {
    font-size: 16px !important;
    min-height: auto !important;     /* スマホでは高さを自動に戻す */
    margin-bottom: 12px !important;
  }

  .price-body img {
    width: 90px !important;          /* トラックを少し見やすく大きく */
    margin-bottom: 12px !important;
  }

  .price-body strong {
    font-size: 32px !important;      /* スマホ画面では金額をしっかり目立たせる */
  }

  .price-body strong .unit {
    font-size: 16px !important;
  }
}

/* ===================================================
   📦 回収できるもの＆回収事例 セクション美化CSS
   =================================================== */

/* --- 1. 回収できるもの（アイテムグリッド）の修正 --- */
.item-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important; /* 横に6個綺麗に並べる */
  gap: 20px !important;
  border: 2px solid var(--border) !important;
  border-radius: 12px !important; /* 角丸の調整 */
  padding: 30px 24px !important;   /* 内側の余白を広げてゆとりを出す */
  background: #fff !important;
}

/* アイテム画像が四角い枠からはみ出ないように調整 */
.item-grid img {
  width: 100% !important;
  max-width: 88px !important;
  height: auto !important;
  margin: 0 auto 12px !important;
}

/* --- 2. 回収事例（ケースグリッド）の修正 --- */
.case-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important; /* 横に4個綺麗に並べる */
  gap: 24px !important;
  width: 100% !important;
}

/* 事例カード内の調整 */
.case-card {
  text-align: center !important;
}

/* 前後（Before/After）の画像スタイル */
.case-card img {
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 12px !important;
}

.case-card p {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700;
  color: #111;
}

/* --- 📱 スマホ時の表示設定 --- */
@media (max-width: 768px) {
  /* スマホでは回収できるものを3列（または2列）にする */
  .item-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px 12px !important;
    padding: 20px 14px !important;
  }
  
  /* スマホでは回収事例を1列（または2列）にする */
  .case-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* --- 緑色のリボン見出し（CSSでキラキラと斜めの光を再現） --- */
.section-ribbon {
  display: inline-block !important;
  /* 💡 1. 背景を単色グリーンから「斜めの光のグラデーション」に変更 */
  background: linear-gradient(
    115deg, 
    #0b7c31 0%, 
    #0b7c31 40%, 
    #23bd5a 50%, /* ここが中央の明るい光の筋 */
    #0b7c31 60%, 
    #0b7c31 100%
  ) !important;
  
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  padding: 12px 64px !important;
  border-radius: 0 0 16px 16px !important;
  transform: skewX(-14deg) !important;
  margin-left: 12px !important;
  margin-bottom: -2px !important;
  position: relative !important;
  z-index: 2 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important; /* 少し立体感を出す影 */
}

/* 💡 2. 文字の左右に擬似要素（::before / ::after）を使って、金色のキラキラ星「✦」を自動配置 */
.section-ribbon::before {
  content: "✦" !important;
  position: absolute !important;
  left: 24px !important;
  top: 48% !important;
  transform: translateY(-50%) skewX(14deg) !important; /* 傾きを戻す */
  color: #fff59d !important; /* 薄い金色（黄色） */
  font-size: 16px !important;
}

.section-ribbon::after {
  content: "✦" !important;
  position: absolute !important;
  right: 24px !important;
  top: 52% !important;
  transform: translateY(-50%) skewX(14deg) !important; /* 傾きを戻す */
  color: #fff59d !important; /* 薄い金色（黄色） */
  font-size: 12px !important; /* 左右で少しサイズを変えてランダム感を出す */
}

/* リボンの中の文字の傾きを戻す */
.section-ribbon span,
.section-ribbon::first-letter {
  display: inline-block;
  transform: skewX(14deg);
}

@media (max-width: 768px) {
  /* 📱 スマホ表示の時はリボンを画面の中央に配置する */
  .section-ribbon {
    display: table !important;       /* 中央揃え（margin: 0 auto）を効かせるための設定 */
    margin-left: auto !important;    /* 💡左右の余白をautoにすることで */
    margin-right: auto !important;   /*   完全に画面の真ん中へ配置されます */
    margin-bottom: 12px !important;  /* 下の白い枠線との間に少しだけ上品な隙間を作る */
    
    padding: 10px 46px !important;   /* 左右の長さは維持 */
    font-size: 16px !important;
    transform: skewX(-12deg) !important; /* 斜めカットの傾き */
  }

  /* キラキラ星の位置を中央の文字に合わせて微調整 */
  .section-ribbon::before {
    left: 16px !important;
  }
  .section-ribbon::after {
    right: 16px !important;
  }
}

/* ===================================================
   📦 回収できるもの（アイテムグリッド）文字バランス微調整
   =================================================== */

/* 1. 各アイテム（画像と文字のセット）を縦並びのflexにする */
.item-grid > div,
.item-grid article,
.item-grid li,
.item-grid p {
  /* クラス名が不明なため、直下の子要素全般に効くように指定しています */
}

/* 2. 💡品目名テキストのスタイルをデザインデータに完全一致させる */
.item-grid p {
  margin: 0 !important;
  color: #111111 !important;       /* 💡文字色を青から「黒色」に変更 */
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;      /* 2行になったときの行間を少し詰める */
  
  /* 💡縦方向の中央揃えを実現するための設定 */
  display: flex !important;
  align-items: center !important;   /* 上下中央揃え */
  justify-content: center !important; /* 左右中央揃え */
  min-height: 44px !important;      /* 2行分の高さをベースとして確保する */
  text-align: center !important;
}

/* 3. アイコン画像の下の余白を少し調整 */
.item-grid img {
  margin: 0 auto 8px !important;    /* 画像と文字の間の隙間 */
}

/* --- 📱 スマホ表示の時だけヘッダーの丸いフクロウロゴマークを非表示にする --- */
@media (max-width: 768px) {
  /* 1. 丸いロゴマーク（フクロウ）を非表示にする */
  .site-header .brand .brand-mark,
  .brand-mark {
    display: none !important;
  }

  /* 2. ロゴマークが消えた分、文字ロゴが左に寄りすぎないよう全体のバランスを調整 */
  .site-header .brand {
    gap: 0 !important;              /* マークとの隙間をゼロにする */
    padding-left: 10px !important;   /* 画面左端に少し上品な余白を作る */
  }

  /* 3. 文字ロゴ自体の位置や大きさをスマホ用に微調整（必要に応じて） */
  .brand-logo {
    margin-left: 0 !important;      /* マイナスマージンなどの古いズレをリセット */
  }
}
/* 📱 スマホ表示の時だけヘッダーの丸いフクロウマークを消す */
@media (max-width: 768px) {
  .site-header .brand .brand-mark,
  .brand-mark {
    display: none !important;
  }
  .site-header .brand {
    gap: 0 !important;
    padding-left: 10px !important;
  }
  .brand-logo { 
    margin-left: 0 !important; 
  }
}
@media (max-width: 768px) {
  /* 1. ロゴ文字を包むエリア（.brand）の左側の余白を広げて窮屈さを解消 */
  .site-header .brand {
    gap: 0 !important;
    padding-left: 20px !important;   /* 💡10pxから20pxに広げて、左端から品よく離します */
    justify-content: flex-start !important; /* もし中央寄せにしたい場合は center に変更してください */
  }

  /* 2. HTMLのstyle属性に書かれている「左マイナス10px」の引っ張りをリセット */
  .brand-logo {
    margin-left: 0 !important;       /* 💡左への引っ張りを強制解除します */
    max-width: 280px !important;     /* スマホ画面からはみ出さないように安全な最大幅を設定 */
    height: auto !important;
  }
}
@media (max-width: 768px) {
  .site-header .brand {
    gap: 0 !important;
    padding-left: 20px !important;   /* 画面左端から品よく離す余白 */
  }

  .brand-logo {
    margin-left: 0 !important;       /* HTML側の引っ張りが消えたので、これで安全にリセットされます */
    max-width: 240px !important;     /* スマホ画面に合わせてロゴの大きさを一回りコンパクトに調整 */
    height: auto !important;
    min-height: 0 !important;        /* PC用の巨大な高さをスマホでは解除 */
  }
}

@media (max-width: 768px) {
  /* 1. ロゴ文字を包むエリアの余白を適切に設定 */
  .site-header .brand {
    gap: 0 !important;
    padding-left: 16px !important;    /* 左端から少し離して品よく配置 */
    flex: 0 0 auto !important;        /* 横幅を固定せず中身に合わせる */
    width: auto !important;
  }

  /* 2. 💡 小さくなりすぎたロゴの大きさをスマホ用に最適化 */
  .brand-logo {
    display: block !important;
    width: 220px !important;          /* 💡ロゴ文字の横幅を220pxに固定してしっかり見せる */
    max-width: 220px !important;
    height: auto !important;          /* 縦横比を完全に維持 */
    min-height: 0 !important;         /* PC用の巨大な高さをリセット */
    margin: 0 !important;             /* 余計な余白を完全にゼロに */
    object-fit: contain !important;
  }
}

/* ===================================================
   📱 スマホ時ロゴサイズ完全復活（割り込み上書き）
   =================================================== */
@media (max-width: 768px) {
  /* 1. 外側の箱（a.brand）が横幅を潰してしまっているのを強制解除 */
  .site-header .brand,
  .brand,
  header .brand {
    flex: 1 1 auto !important;        /* 固定幅をリセット */
    width: 70% !important;            /* ボタンとぶつからない安全な幅 */
    max-width: 70% !important;
    gap: 0 !important;
    padding: 10px 0 10px 16px !important; /* 左端に品の良い余白を作る */
    display: flex !important;
    align-items: center !important;
  }

  /* 2. 💡 小さくなっている「くらしの番人」ロゴを強制的に大きく復活 */
  .site-header .brand .brand-logo,
  .brand-logo,
  img.brand-logo {
    display: block !important;
    width: 240px !important;          /* 💡ロゴ文字の横幅を240pxに固定してハッキリ大きくします */
    max-width: 100% !important;
    height: auto !important;          /* 縦横比を完全に維持 */
    min-height: 0 !important;         /* PC用の巨大な高さを完全リセット */
    margin: 0 !important;
    object-fit: contain !important;
  }
}

/* ===================================================
   📱 スマホ時ロゴ完全中央揃え（差し替え用）
   =================================================== */
@media (max-width: 768px) {
  /* 1. 外側の箱（a.brand）をヘッダーの横幅いっぱいに広げて中央配置の土台にする */
  .site-header .brand,
  .brand,
  header .brand {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    padding: 10px 0 !important;       /* 💡左側の余白を無くして完全な中央へ */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* 💡中身の画像をど真ん中に寄せる */
    position: absolute !important;     /* 💡ハンバーガーボタンの裏側に回り込んで中央を取る設定 */
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
  }

  /* 2. ロゴ文字自体のサイズと余白の調整 */
  .site-header .brand .brand-logo,
  .brand-logo,
  img.brand-logo {
    display: block !important;
    width: 220px !important;          /* 大きさを綺麗に維持 */
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;        /* 💡左右対称に中央揃え */
    object-fit: contain !important;
  }

  /* 3. 右側にあるハンバーガーボタン（三本線）がロゴと被らず一番手前に来るように調整 */
  .menu-trigger,
  #js-menu-trigger {
    position: relative !important;
    z-index: 5 !important;            /* ロゴよりも手前に表示させてクリックできるようにする */
    margin-left: auto !important;     /* 右端に固定 */
  }
}
/* ===================================================
   🖥️ PC版ヘッダーのサイズ・配置を完全に元通りにする設定（最新版）
   =================================================== */
@media (min-width: 769px) {
  /* 1. 外枠をPC用の元のサイズに強制固定 */
  .site-header .brand,
  .brand,
  header .brand,
  a.brand {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 450px !important;           /* 💡少し広めの幅を確保して押し潰しを防ぐ */
    max-width: 450px !important;
    flex: 0 0 450px !important;
    gap: 16px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* 2. 丸いフクロウマークの大きさをキープ */
  .brand-mark,
  .site-header .brand .brand-mark,
  img.brand-mark {
    display: block !important;
    height: 95px !important;           /* 💡元のHTMLに書いてあった95pxに合わせました */
    width: 95px !important;
    max-width: 95px !important;
    min-width: 95px !important;
  }

  /* 3. 💡小さくなっている「くらしの番人」ロゴ文字を強制的に大きく引き伸ばす */
  .site-header .brand .brand-logo,
  .brand-logo,
  header .brand img.brand-logo,
  img.brand-logo {
    display: block !important;
    height: 140px !important;          /* 💡元のHTMLに書いてあった本来の高さ140pxに強制固定 */
    width: auto !important;
    max-width: 330px !important;       /* 文字が横に広がりすぎないように制限 */
    min-height: 140px !important;
    margin: 0 0 0 -10px !important;    /* マークとの絶妙な重なりを復元 */
    object-fit: contain !important;
  }
}

/* ===================================================
   🖥️ PC版ヘッダー：全体の重なり・文字崩れを完全解消
   =================================================== */
@media (min-width: 769px) {
  /* 1. ヘッダー全体の包み（header-inner）を正しく横に並べ直す */
  .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* 💡左・中・右に綺麗に振り分ける */
    width: 100% !important;
    gap: 16px !important;
  }

  /* 2. ロゴエリア（brand）：幅を固定せず、中身の画像サイズにぴったり合わせる */
  .site-header .brand,
  .brand,
  header .brand,
  a.brand {
    flex: 0 0 auto !important;         /* 💡450pxの固定幅をリセット */
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;               /* 画像同士の隙間を元の4pxに戻す */
  }

  /* 文字ロゴを本来の正しい大きさで見せる */
  .site-header .brand .brand-logo,
  .brand-logo,
  img.brand-logo {
    width: auto !important;
    max-width: 300px !important;       /* 押し潰されないように最大幅を確保 */
    height: 100px !important;          /* 💡縦横比が綺麗に保たれるベストな高さに調整 */
    min-height: 0 !important;
    margin: 0 0 0 -10px !important;    /* 元のマイナス余白を復元 */
  }

  /* 3. 真ん中のナビゲーション：右に押し出されないよう自動で余白を確保 */
  .global-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;              /* メニュー同士の間隔 */
    flex: 1 1 auto !important;         /* 💡左右の要素の余ったスペースに柔軟に収まる設定 */
    margin: 0 20px !important;         /* 左右の衝突を防ぐ安全なクッション */
  }

  /* 小さく潰れていたメニューの文字サイズを元に戻す */
  .global-nav a {
    font-size: 15px !important;        /* 💡元の読みやすい大きさに固定 */
    font-weight: 700 !important;
    color: #111111 !important;
    white-space: nowrap !important;    /* 途中で変に改行されるのを防ぐ */
  }

  /* 4. 右側の電話番号・ボタンエリア：絶対に左からのメニューとぶつからないように固定 */
  .header-contact {
    flex: 0 0 300px !important;        /* 💡300pxの幅を絶対に死守して崩れを防ぐ */
    min-width: 300px !important;
    text-align: right !important;
  }
}

/* ===================================================
   💰 パック料金：見出し横リストを絵文字アイコンに変更
   =================================================== */

/* 1. 以前CSSで作った「✓」マークを完全に非表示にする */
.price-notes li::before {
  content: none !important;
}

/* 2. アイコンと文字を横並びにして、上下中央に綺麗に揃える */
.price-notes li {
  padding-left: 0 !important;      /* 以前のチェック用余白をリセット */
  display: inline-flex !important;
  align-items: center !important;   /* アイコンと文字の縦の中心をピタッと揃える */
  gap: 6px !important;              /* アイコンと文字の間の隙間 */
  font-size: 15px !important;
  color: var(--blue) !important;
  font-weight: 700 !important;
}

/* 3. 絵文字アイコン自体のサイズと見た目の微調整 */
.price-notes .note-icon {
  font-size: 16px !important;       /* 文字よりほんの少しだけ大きくして見やすく */
  display: inline-block !important;
  line-height: 1 !important;
  /* 💡 デバイスごとの絵文字の見た目のバラつきを抑え、少しスッキリ見せるおまじない */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

/* ===================================================
   📱 スマホ版：すべてのセクションタイトルを中央揃えに
   =================================================== */
@media (max-width: 768px) {
  
  /* 1. 見出し（h2やsection-heading）を丸ごと中央へ寄せる */
  .section h2,
  .section-heading,
  h2.section-heading,
  .container > h2 {
    display: flex !important;
    justify-content: center !important; /* 💡中身の文字や葉っぱマークを真ん中に */
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 16px !important;    /* 下の文章との間に少しゆとりを作る */
    font-size: 26px !important;         /* スマホで見やすい文字サイズに統一 */
  }

  /* 見出しの後ろについている葉っぱ（🌿）やマークの隙間調整 */
  .section h2 span,
  .section-heading span {
    margin-left: 6px !important;
    display: inline-block;
  }

  /* 2. 見出しのすぐ下にある説明テキスト（もしあれば）も真ん中に */
  .section-title-row + p,
  .section-heading + p,
  .container > h2 + p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 24px !important;
    font-size: 15px !important;
  }
}

/* ===================================================
   🖥️📱 PC・スマホ共通：流れ（FLOW）線付きの太いグラデーション矢印
   =================================================== */

/* --- 1. 【PC版】横線（シャフト）付きの横向き矢印 --- */
@media (min-width: 769px) {
  /* 以前の矢印設定を一度リセット */
  .flow-step:not(:last-child)::before {
    display: none !important;
  }

  /* 矢印を綺麗に配置するための親要素の設定 */
  .flow-step:not(:last-child) {
    position: relative !important;
  }

  /* 💡 矢印の「先端（＞）」と「横線（─）」を組み合わせて表示 */
  .flow-step:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    right: -45px !important;         /* 配置場所の調整 */
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: block !important;
    
    /* 💡 矢印の先端（＞）を作る */
    width: 14px !important;
    height: 14px !important;
    border-top: 6px solid #23bd5a !important;
    border-right: 6px solid #0b7c31 !important;
    border-image: linear-gradient(135deg, #23bd5a, #0b7c31) 1 !important;
    transform: translateY(-50%) rotate(45deg) !important;
    z-index: 2;
  }

  /* 💡 矢印の「横線（シャフト）」を作る */
  .flow-step:not(:last-child)::before {
    content: "" !important;
    position: absolute !important;
    right: -42px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: block !important;
    
    /* 💡 太い横線にするためのサイズとグラデーション指定 */
    width: 25px !important;          /* 横線の長さ */
    height: 6px !important;           /* 矢印の先端と合わせた太さ */
    background: linear-gradient(90deg, #23bd5a, #0b7c31) !important;
    z-index: 1;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.15)) !important;
  }
}

/* --- 2. 【スマホ版】縦線（シャフト）付きの下向き矢印 --- */
@media (max-width: 768px) {
  /* 以前のスマホ用矢印設定を上書きクリア */
  .flow-step:not(:last-child)::before,
  .flow-step:not(:last-child)::after {
    display: none !important;
  }

  /* 矢印が入るスペースを少しだけ広げる（50px ➔ 60px） */
  .flow-step:not(:last-child) {
    position: relative !important;
    margin-bottom: 60px !important; 
  }

  /* 💡 矢印の「先端（∨）」を配置 */
  .flow-step:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    bottom: -35px !important;         /* ステップの真下に配置 */
    left: 50% !important;
    transform: translateX(-50%) rotate(45deg) !important;
    display: block !important;
    
    width: 14px !important;
    height: 14px !important;
    border-bottom: 6px solid #0b7c31 !important;
    border-right: 6px solid #0b7c31 !important;
    border-image: linear-gradient(135deg, #23bd5a, #00551e) 1 !important;
    z-index: 2;
  }

  /* 💡 【ご要望】矢印の「縦線（シャフト）」を追加合体！ */
  .flow-step:not(:last-child)::before {
    content: "" !important;
    position: absolute !important;
    bottom: -43px !important;         /* 先端のパーツとピタッと繋がる位置 */
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: block !important;
    
    /* 💡 太い縦線にするためのサイズとグラデーション指定 */
    width: 6px !important;            /* 矢印の先端と合わせた太さ */
    height: 25px !important;          /* 縦線の長さ */
    background: linear-gradient(180deg, #23bd5a, #0b7c31) !important;
    z-index: 1;
    filter: drop-shadow(0px 3px 4px rgba(0,0,0,0.15)) !important;
  }
}
/* ===================================================
   📱 スマホ版：矢印の縦線突き抜けを完全に修正
   =================================================== */
@media (max-width: 768px) {
  /* 💡 矢印の「先端（∨）」の位置を微調整 */
  .flow-step:not(:last-child)::after {
    bottom: -40px !important;         /* 少し下にずらして結合部分を綺麗にします */
  }

  /* 💡 矢印の「縦線（シャフト）」の突き抜けをリセット */
  .flow-step:not(:last-child)::before {
    bottom: -32px !important;         /* 💡数値を上にあげて、V字の先端の中に綺麗に隠します */
    height: 18px !important;          /* 縦線の長さを絶妙な長さに調整 */
  }
}

/* ===================================================
   🏡 下部セクション（対応エリア・FAQ・お客様の声）完全分離CSS
   =================================================== */

/* 1. 3つのセクションを無理やり横並びにしている古い枠組みを完全に解除 */
.lower-grid {
  display: block !important;          /* 💡横並び（flex/grid）を完全に解除して縦並びに */
  width: 100% !important;
  max-width: var(--max) !important;
  margin: 0 auto !important;
}

/* 2. 横並びのせいで極端に狭くなっていた各ブロックの横幅を100%に広げる */
.area-content,
.faq-box,
.voice-box,
.lower-grid > div,
.lower-grid > section {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  /* 💡セクション同士が縦にベタッとくっつかないよう、デザインデータに合わせたゆとりを作る */
  margin-bottom: 58px !important;    
  border: none !important;           /* もし外側に余計な線がついていたら消す */
  box-shadow: none !important;       /* 外枠の不要な影をリセット */
  padding: 0 !important;
}

/* 3. 各セクション内のカード（よくある質問の質問リストやお客様の声のカード）の横幅も最適化 */
.faq-box > div,
.voice-box > div,
.voice-card {
  width: 100% !important;
  max-width: 100% !important;
}

/* 4. お客様の声の画像（ice-womなどのリンク切れ文字）が潰れるのを防ぐ */
.voice-box img,
.case-card img {
  height: auto !important;
  object-fit: contain !important;
}

/* ===================================================
   🌿 対応エリアセクション デザイン完全再現CSS
   =================================================== */

/* 1. 地図とボタンの親要素を、デザイン通りの綺麗な2カラム（左右並び）にする */
.area-content {
  display: flex !important;
  align-items: center !important;   /* 上下を中央で揃える */
  justify-content: space-between !important;
  gap: 40px !important;             /* 地図とボタンの間の心地よい余白 */
  max-width: 1000px !important;     /* 広がりすぎないように制限 */
  margin: 30px auto !important;     /* 画面中央に配置 */
  width: 100% !important;
}

/* 2. 大きすぎて不格好だった地図画像を、適切なサイズに調整 */
.area-content img:first-child,
.area-content picture,
.area-content .map-image { /* クラス名が不明なため複数指定 */
  flex: 0 1 45% !important;         /* 💡全体の約45%の幅に抑える */
  max-width: 420px !important;      /* 地図が大きくなりすぎるのを防止 */
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* 3. 💡横いっぱいに間伸びしていた県名ボタンを、デザイン通り「2列」に綺麗に並べる */
.area-content > div:last-child,
.area-content .area-buttons { /* ボタン全体を包む箱 */
  flex: 0 1 50% !important;         /* 全体の50%の幅を確保 */
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* 💡これでボタンが綺麗な2列になります */
  gap: 16px 20px !important;        /* ボタン同士の上下左右の隙間 */
  width: 100% !important;
}

/* 各県名ボタン自体の装飾を上品に仕上げる */
.area-content a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  border: 2px solid var(--border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111111 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
  transition: all 0.2s ease;
}

/* 💡「すべてのエリアを見る」ボタンだけを、一番下で1本にしてドカンと目立たせる設定 */
.area-content a:last-child {
  grid-column: 1 / -1 !important;  /* 💡2列分をぶち抜いて横いっぱいの1本にする命令 */
  background: #fff !important;
  border-color: var(--green) !important; /* 緑の線にして目立たせる */
  color: var(--green) !important;
  margin-top: 8px !important;
}

/* --- 📱 スマホ版（縦1列に戻して地図を上、ボタンを下にする設定） --- */
@media (max-width: 768px) {
  .area-content {
    flex-direction: column !important; /* スマホでは縦並び */
    gap: 24px !important;
    padding: 0 16px !important;
  }
  .area-content img:first-child {
    max-width: 300px !important;     /* スマホでは地図を小さく可愛く */
  }
  .area-content > div:last-child {
    grid-template-columns: repeat(2, 1fr) !important; /* スマホでもボタンは2列を維持 */
    gap: 12px !important;
  }
}

/* ===================================================
   🌿 対応エリアセクション：左右幅の偏りを完全修正
   =================================================== */

/* 1. 💡1000pxの制限を解除し、コンテナの右端まで目一杯に広げる */
.area-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* 左に地図、右にボタンをピタッと振り分け */
  gap: 48px !important;             /* 地図とボタンの間のゆったりとした隙間 */
  width: 100% !important;
  max-width: 100% !important;       /* 💡制限を解除して1280pxいっぱいまで広げます */
  margin: 34px 0 !important;        /* 左右は広がりきるためautoは不要になります */
}

/* 2. 左右に広がった枠に合わせて、左側の地図ブロックのサイズを最適化 */
.area-content img:first-child,
.area-content picture,
.area-content .map-image {
  flex: 0 1 45% !important;         /* 全体の45%の幅をきれいに使う */
  max-width: 520px !important;      /* 地図が小さく見えないよう最大幅を少しアップ */
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* 3. 💡右側のボタンブロックも、右端のラインまでグッと引っ張って広げる */
.area-content > div:last-child,
.area-content .area-buttons {
  flex: 0 1 50% !important;         /* 全体の50%の幅を使って右側を完全に埋める */
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* きれいな2列を維持 */
  gap: 18px 24px !important;        /* ボタン同士の間隔にゆとりを持たせる */
  width: 100% !important;
}

/* 各ボタンの横幅も、広がった枠に合わせて自動で伸びるようにする */
.area-content a {
  width: 100% !important;           /* 💡びろーんと間伸びしない絶妙な幅まで自動拡張 */
}

/* --- 📱 スマホ版（スマホの時は中央寄せの縦並びにする設定は維持） --- */
@media (max-width: 768px) {
  .area-content {
    flex-direction: column !important;
    gap: 28px !important;
    padding: 0 16px !important;
    margin: 24px 0 !important;
  }
  .area-content img:first-child {
    max-width: 320px !important;
  }
  .area-content > div:last-child {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ===================================================
   🌿 下部セクション（対応エリア以降）デザインカンプ完全再現
   =================================================== */

/* 1. 3つの内容を横並びに潰していた古い枠組みを完全に解除（縦の3段に分ける） */
.lower-grid {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* 各セクションごとの縦のゆったりとした余白を確保 */
.area-box, .faq-box, .voice-box {
  width: 100% !important;
  margin-bottom: 58px !important;
}

/* タイトルの左端へのペタッと張り付きを防止（コンテナの正しいラインへ戻す） */
.section-heading {
  margin: 0 0 24px 0 !important;
  color: var(--blue);
  font-size: 32px;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 2. 【対応エリア】をサイトの横幅いっぱい（1280px）の左右2カラムに配置 */
.area-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 48px !important;
  width: 100% !important;
}

/* 左側の日本地図画像を適切なサイズに固定 */
.area-content .map-image {
  flex: 0 1 45% !important;
  max-width: 480px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* 右側の県名ボタンを綺麗な「2列」に並べる設定 */
.area-buttons {
  flex: 0 1 50% !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px 20px !important;
  width: 100% !important;
}

/* 各県名ボタン自体の装飾（button要素へ対応） */
.area-buttons button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  width: 100% !important;
  border: 2px solid var(--border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111111 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
}

/* 「すべてのエリアを見る」ボタンだけを、一番下で2列ぶち抜きの1本にする命令 */
.area-buttons button.wide {
  grid-column: 1 / -1 !important;
  background: #fff !important;
  border-color: var(--green) !important;
  color: var(--green) !important;
  margin-top: 8px !important;
}

/* --- 📱 スマホ表示の時の調整 --- */
@media (max-width: 768px) {
  /* タイトルをスマホ画面のど真ん中にピタッと整列 */
  .section-heading {
    justify-content: center !important;
    text-align: center !important;
    font-size: 26px !important;
    margin-bottom: 18px !important;
  }

  /* スマホでは対応エリアを中央寄せの縦並びにする */
  .area-content {
    flex-direction: column !important;
    gap: 24px !important;
    padding: 0 16px !important;
  }

  .area-content .map-image {
    max-width: 320px !important;
  }

  /* ボタンはスマホでも見やすい2列のグリッドをキープ */
  .area-buttons {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ===================================================
   🌿 対応エリア：コンテナの横幅と左右余白を強制修復
   =================================================== */

/* 💡原因だった「横幅100%」を解除し、元のコンテナの正しい最大幅（1280px）と中央揃えに戻します */
.container.lower-grid,
div.container.lower-grid,
.lower-grid {
  display: block !important;
  width: min(var(--max), calc(100% - 48px)) !important; /* 💡元の美しいコンテナ幅を強制適用 */
  max-width: 1280px !important;    /* 画面が大きくても1280pxでブレーキをかける */
  margin-inline: auto !important;  /* 💡これで完全に画面の真ん中に戻ります */
}

/* 横並びの地図とボタンエリアを、中央に戻ったコンテナの幅（100%）に綺麗に合わせる */
.area-content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 34px 0 !important;
}
/* ===================================================
   🌿 対応エリア：ボタン内の市区町村数を2段組みで装飾
   =================================================== */

/* 1. ボタンを縦並び（Flex column）にして、県名と市区町村数を上下に並べる */
.area-buttons button {
  display: flex !important;
  flex-direction: column !important; /* 💡中身を縦並びにする */
  justify-content: center !important;
  align-items: center !important;
  padding: 10px 8px !important;       /* 上下に少しゆとりを作る */
  min-height: 58px !important;       /* 2段になるためボタンの高さを少しアップ */
}

/* 丸数字の位置を「県名の左」で固定するための微調整 */
.area-buttons button::before {
  position: absolute !important;
  left: 12px !important;             /* 丸数字をボタンの左端に寄せる */
  margin-right: 0 !important;
}

/* 2. 💡新しく追加した「全〇〇市区町村」のテキストのスタイル */
.area-buttons button small {
  display: block !important;
  font-size: 12px !important;        /* 一回り小さく品の良いサイズに */
  color: #777777 !important;         /* 上品なグレー */
  font-weight: 500 !important;       /* 少し細めにしてメリハリをつける */
  margin-top: 2px !important;        /* 県名との間の小さな隙間 */
  line-height: 1 !important;
}

/* 3. 「すべてのエリアを見る」ボタンは縦並びの影響を受けないようにリセット */
.area-buttons button.wide {
  flex-direction: row !important;
  min-height: 48px !important;
}

/* --- 📱 スマホ表示の調整（スマホの時も綺麗に収まるように枠を維持） --- */
@media (max-width: 768px) {
  .area-buttons button {
    padding: 8px 4px !important;
    min-height: 54px !important;
  }
  .area-buttons button::before {
    display: none !important;        /* スマホ画面では窮屈になるため丸数字を非表示に */
  }
  .area-buttons button small {
    font-size: 11px !important;      /* スマホ用にさらに一回り小さく */
  }
}

/* ===================================================
   📥 対応エリア：ポップアップ（モーダル）完全再現スタイル
   =================================================== */

/* メイン画面の「詳しい対応エリアを見る」誘導ボタンの装飾 */
.area-main-trigger {
  text-align: center !important;
  margin: 20px auto 40px !important;
  max-width: 680px !important;
}
.area-intro-text {
  font-size: 16px !important;
  color: #333 !important;
  margin-bottom: 20px !important;
  line-height: 1.6 !important;
}
.btn-open-area {
  background: var(--green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important; /* 丸カプセル型 */
  padding: 14px 48px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(11, 124, 49, 0.25) !important;
  transition: all 0.3s ease !important;
}
.btn-open-area:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(11, 124, 49, 0.35) !important;
}

/* 🔒 ポップアップの背景黒マスク（初期状態は非表示） */
.area-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.6) !important; /* 背景を暗く暗転 */
  z-index: 1000 !important; /* 一番手前に出す */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  pointer-events: none !important; /* クリックできないようにする */
  transition: opacity 0.3s ease !important;
}

/* 💡 JavaScriptで「is-open」がついたらふわっと出現させる */
.area-modal-overlay.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 📄 浮き上がる白い中身のウィンドウ本体 */
.area-modal-window {
  background: #ffffff !important;
  width: min(1100px, 92%) !important; /* 画面幅に合わせた可変大サイズ */
  max-height: 90vh !important;       /* 画面からはみ出さない縦幅の上限 */
  overflow-y: auto !important;        /* 中身が長ければスクロールできるように */
  border-radius: 16px !important;
  padding: 44px 34px !important;
  position: relative !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
  transform: scale(0.9) !important;
  transition: transform 0.3s ease !important;
}
.area-modal-overlay.is-open .area-modal-window {
  transform: scale(1) !important; /* 開く時に少し大きくなるアニメーション */
}

/* 閉じるボタン（×） */
.area-modal-close {
  position: absolute !important;
  right: 20px !important;
  top: 16px !important;
  background: none !important;
  border: none !important;
  font-size: 38px !important;
  color: #999 !important;
  cursor: pointer !important;
  line-height: 1 !important;
}
.area-modal-close:hover { color: #333 !important; }

.modal-title {
  text-align: center !important;
  color: var(--blue) !important;
  font-size: 26px !important;
  margin: 0 0 30px 0 !important;
}

/* ポップアップ内の一覧レイアウト（これまでの美しいグリッドや丸数字をそのまま移植） */
.area-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px !important;
  width: 100% !important;
}
.area-content .map-image {
  flex: 0 1 45% !important;
  max-width: 440px !important;
  height: auto !important;
}
.area-buttons {
  flex: 0 1 50% !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px 18px !important;
  counter-reset: area-number !important;
}
.area-buttons button {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 8px !important;
  min-height: 56px !important;
  border: 2px solid var(--border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  position: relative !important;
  cursor: pointer;
}
.area-buttons button::before {
  counter-increment: area-number !important;
  content: counter(area-number) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 1px solid var(--green) !important;
  color: var(--green) !important;
  font-size: 12px !important;
  position: absolute !important;
  left: 10px !important;
}
.area-buttons button small {
  display: block !important;
  font-size: 11px !important;
  color: #777 !important;
  margin-top: 2px !important;
}
.area-buttons button.wide { flex-direction: row !important; min-height: 46px !important; grid-column: 1 / -1 !important; border-color: var(--green) !important; color: var(--green) !important; }
.area-buttons button.wide::before { display: none !important; }

/* 📱 スマホ表示の時はポップアップ内を縦スクロールの1列に最適化 */
@media (max-width: 768px) {
  .area-modal-window { padding: 34px 16px !important; }
  .area-content { flex-direction: column !important; gap: 20px !important; }
  .area-content .map-image { max-width: 280px !important; }
  .area-buttons { width: 100% !important; gap: 10px !important; }
  .area-buttons button::before { display: none !important; }
}

/* ===================================================
   📥 対応エリア：ポップアップ表示・非表示バグ完全修正
   =================================================== */

/* 1. 通常時はポップアップ全体を画面から完全に消し去る（干渉を防ぐ） */
.area-modal-overlay {
  display: none !important;          /* 初期状態は完全に非表示 */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.6) !important; /* 背景を暗く */
  z-index: 9999 !important;          /* サイトの全要素の一番手前に出す */
}

/* 2. 💡 JavaScriptで「active」クラスがついたら、最前面にドカンと表示する */
.area-modal-overlay.active {
  display: flex !important;          /* ボタンが押されたら表示！ */
  align-items: center !important;
  justify-content: center !important;
}

/* 3. ポップアップ内の白いウィンドウ本体の基本設定 */
.area-modal-window {
  background: #ffffff !important;
  width: min(1000px, 92%) !important; /* 画面に合わせた可変大サイズ */
  max-height: 85vh !important;       /* 画面からはみ出さない縦幅 */
  overflow-y: auto !important;        /* 中身が長ければスクロール可能に */
  border-radius: 16px !important;
  padding: 40px 30px !important;
  position: relative !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
}

/* 閉じるボタン（×）の装飾 */
.area-modal-close {
  position: absolute !important;
  right: 20px !important;
  top: 10px !important;
  background: none !important;
  border: none !important;
  font-size: 40px !important;
  color: #999 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  z-index: 10 !important;
}
.area-modal-close:hover { color: #333 !important; }

{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 58px !important;
}

/* ===================================================
   📥 対応エリア：ポップアップ（モーダル）完全連動スタイル
   =================================================== */
.area-main-trigger {
  text-align: center !important;
  margin: 0 auto 40px !important;
  max-width: 680px !important;
  width: 100% !important;
}
.area-intro-text {
  font-size: 16px !important;
  color: #333333 !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}
.btn-open-area {
  background: var(--green) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 48px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(11, 124, 49, 0.2) !important;
  display: inline-block !important;
}

/* 🔒 ポップアップの背景黒マスク（初期状態は非表示） */
.area-modal-overlay {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  z-index: 9999 !important;
}

/* 💡 JavaScriptで「active」クラスがついたら大出現 */
.area-modal-overlay.active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 📄 白いウィンドウ本体 */
.area-modal-window {
  background: #ffffff !important;
  width: min(1000px, 92%) !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  border-radius: 16px !important;
  padding: 40px 30px !important;
  position: relative !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
  z-index: 10001 !important;
}

.area-modal-close {
  position: absolute !important;
  right: 20px !important;
  top: 10px !important;
  background: none !important;
  border: none !important;
  font-size: 40px !important;
  color: #999 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  z-index: 10 !important;
}
.area-modal-close:hover { color: #333 !important; }
.modal-title { text-align: center !important; color: var(--blue) !important; font-size: 26px !important; margin: 0 0 30px 0 !important; }

/* ポップアップ内の地図とボタン配置 */
.area-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 48px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 34px 0 !important;
}
.area-content .map-image {
  flex: 0 1 45% !important;
  max-width: 480px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
.area-buttons {
  flex: 0 1 50% !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px 20px !important;
  width: 100% !important;
  counter-reset: area-number !important;
}
.area-buttons button {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 10px 8px !important;
  min-height: 58px !important;
  border: 2px solid var(--border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111111 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
  position: relative !important;
}
.area-buttons button::before {
  counter-increment: area-number !important;
  content: counter(area-number) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 1px solid var(--green) !important;
  color: var(--green) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  position: absolute !important;
  left: 12px !important;
}
.area-buttons button small {
  display: block !important;
  font-size: 12px !important;
  color: #777777 !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
  line-height: 1 !important;
}
.area-buttons button.wide {
  grid-column: 1 / -1 !important;
  background: #fff !important;
  border-color: var(--green) !important;
  color: var(--green) !important;
  margin-top: 8px !important;
  flex-direction: row !important;
  min-height: 48px !important;
}
.area-buttons button.wide::before { display: none !important; }

/* 📱 スマホ表示の時のポップアップ内レイアウト */
@media (max-width: 768px) {
  .area-modal-window { padding: 34px 16px !important; }
  .area-content { flex-direction: column !important; gap: 20px !important; }
  .area-content .map-image { max-width: 280px !important; }
  .area-buttons { width: 100% !important; gap: 10px !important; }
  .area-buttons button::before { display: none !important; }
}

{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 58px !important;
}

/* ===================================================
   📥 対応エリア：ポップアップ（モーダル）完全連動スタイル
   =================================================== */
.area-main-trigger {
  text-align: center !important;
  margin: 0 auto 40px !important;
  max-width: 680px !important;
  width: 100% !important;
}
.area-intro-text {
  font-size: 16px !important;
  color: #333333 !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}
.btn-open-area {
  background: var(--green) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 48px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(11, 124, 49, 0.2) !important;
  display: inline-block !important;
}

/* 🔒 ポップアップの背景黒マスク（初期状態は非表示） */
.area-modal-overlay {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  z-index: 9999 !important;
}

/* 💡 JavaScriptで「active」クラスがついたら大出現 */
.area-modal-overlay.active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 📄 白いウィンドウ本体 */
.area-modal-window {
  background: #ffffff !important;
  width: min(1000px, 92%) !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  border-radius: 16px !important;
  padding: 40px 30px !important;
  position: relative !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
  z-index: 10001 !important;
}

.area-modal-close {
  position: absolute !important;
  right: 20px !important;
  top: 10px !important;
  background: none !important;
  border: none !important;
  font-size: 40px !important;
  color: #999 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  z-index: 10 !important;
}
.area-modal-close:hover { color: #333 !important; }
.modal-title { text-align: center !important; color: var(--blue) !important; font-size: 26px !important; margin: 0 0 30px 0 !important; }

/* ポップアップ内の地図とボタン配置 */
.area-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 48px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 34px 0 !important;
}
.area-content .map-image {
  flex: 0 1 45% !important;
  max-width: 480px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
.area-buttons {
  flex: 0 1 50% !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px 20px !important;
  width: 100% !important;
  counter-reset: area-number !important;
}
.area-buttons button {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 10px 8px !important;
  min-height: 58px !important;
  border: 2px solid var(--border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111111 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
  position: relative !important;
}
.area-buttons button::before {
  counter-increment: area-number !important;
  content: counter(area-number) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 1px solid var(--green) !important;
  color: var(--green) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  position: absolute !important;
  left: 12px !important;
}
.area-buttons button small {
  display: block !important;
  font-size: 12px !important;
  color: #777777 !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
  line-height: 1 !important;
}
.area-buttons button.wide {
  grid-column: 1 / -1 !important;
  background: #fff !important;
  border-color: var(--green) !important;
  color: var(--green) !important;
  margin-top: 8px !important;
  flex-direction: row !important;
  min-height: 48px !important;
}
.area-buttons button.wide::before { display: none !important; }

/* 📱 スマホ表示の時のポップアップ内レイアウト */
@media (max-width: 768px) {
  .area-modal-window { padding: 34px 16px !important; }
  .area-content { flex-direction: column !important; gap: 20px !important; }
  .area-content .map-image { max-width: 280px !important; }
  .area-buttons { width: 100% !important; gap: 10px !important; }
  .area-buttons button::before { display: none !important; }
}

{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 58px !important;
}

/* 💡 はみ出して崩れていた一番下のCTAブロックを強制修復 */
.cta-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  gap: 20px !important;
  padding: 30px 24px !important;
}
.cta-buttons {
  display: flex !important;
  gap: 12px !important;
  flex-direction: row !important;
  flex: 0 0 auto !important;
}

/* 💡 ポップアップを開くための強力なスイッチ設定 */
.area-modal-overlay.active {
  display: flex !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  z-index: 99999 !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===================================================
   🚨 緊急修復：消滅していた地図とボタンを100%出現させる
   =================================================== */

/* 1. 💡サイズが0pxになって消滅していた地図とボタンの「外枠」を強制的に画面に広げる */
.area-modal-window .area-content,
#js-area-modal .area-content,
.area-content {
  display: flex !important;          /* 💡 display:none や 0px を上書きして強制出現 */
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px !important;
  margin: 20px 0 !important;
}

/* 2. 💡消滅していた「日本地図の画像」に、正しい横幅（45%）を強制的に与えて出現させる */
.area-content img.map-image,
.area-content .map-image,
.area-content img[alt*="地図"] {
  display: block !important;         /* 💡これで絶対に地図の姿が現れます */
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 1 45% !important;
  width: 100% !important;
  max-width: 450px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* 3. 💡消滅していた「都道府県ボタンの並び（グリッド）」を強制的に2列で出現させる */
.area-buttons,
.area-content .area-buttons {
  display: grid !important;          /* 💡これでボタンのエリアが強制的に出現 */
  visibility: visible !important;
  opacity: 1 !important;
  grid-template-columns: repeat(2, 1fr) !important; /* 綺麗な2列 */
  gap: 14px 18px !important;
  width: 100% !important;
  flex: 0 1 50% !important;
}

/* 各都道府県ボタン自体の形と大きさを強制適用 */
.area-buttons button {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 56px !important;
  padding: 10px 8px !important;
  background: #ffffff !important;
  border: 2px solid #cfe4cf !important;
  border-radius: 8px !important;
  color: #111111 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* ===================================================
   🚨 【最優先】消滅していた地図とボタンを絶対に強制出現させる
   =================================================== */

/* 1. 💡 非表示にしていた外枠（黒マスクなど）の呪いを完全に破壊し、最初から画面に露出させる */
.area-modal-overlay,
#js-area-modal,
div.area-modal-overlay {
  display: block !important;         /* 💡 none（非表示）を完全に上書きして強制的に表に出します */
  position: static !important;       /* 画面全体の固定を解除し、通常のセクションとして配置 */
  width: 100% !important;
  height: auto !important;
  background: none !important;       /* 暗い背景を一度透明にします */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* 2. 白いウィンドウの枠も、ただの通常の四角い箱として画面に表示させる */
.area-modal-window {
  background: #ffffff !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;             /* 余計な余白をカット */
  box-shadow: none !important;
  position: static !important;
}

/* 3. 閉じるボタン（×）と「詳しい対応エリア一覧」のタイトルは、邪魔になるので一度完全に消去します */
.area-modal-close,
.modal-title {
  display: none !important;
}

/* 4. 💡 0pxになって消えていた「地図とボタンの並び（横幅）」を強制的に引っ張り出す */
.area-content {
  display: flex !important;          /* 💡 これで絶対に中身の描画が始まります */
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 1280px !important;      /* 横幅をパック料金などと同じ1280pxに合わせる */
  margin: 34px auto !important;      /* 画面の真ん中に配置 */
  align-items: center !important;
  justify-content: space-between !important;
  gap: 48px !important;
}

/* 5. 🗺️ 【日本地図の画像】に正しいサイズを与えて確実に強制出現させる */
.area-content img.map-image,
.area-content .map-image,
.area-content img {
  display: block !important;         /* 💡 これで絶対に地図の姿が画面に現れます */
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 1 45% !important;
  width: 100% !important;
  max-width: 480px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* 6. 🎛️ 【都道府県ボタンのグリッド】を強制的に出現させる */
.area-buttons,
.area-content .area-buttons {
  display: grid !important;          /* 💡 これでボタンのエリアが強制出現します */
  visibility: visible !important;
  opacity: 1 !important;
  grid-template-columns: repeat(2, 1fr) !important; /* きれいな2列 */
  gap: 16px 20px !important;
  width: 100% !important;
  flex: 0 1 50% !important;
}

/* 各ボタンの形と文字色（黒）を強制適用 */
.area-buttons button {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 10px 8px !important;
  background: #ffffff !important;
  border: 2px solid #cfe4cf !important;
  border-radius: 8px !important;
  color: #111111 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* ===================================================
   📥 対応エリア：ポップアップ（モーダル）デザイン超美化設定
   =================================================== */

/* 1. 🔒 画面全体を覆う黒マスクに上品な透明感を与える */
[id^="pop-"] {
  background-color: rgba(0, 0, 0, 0.55) !important; /* 💡ほんのり透ける美しい暗転 */
  backdrop-filter: blur(4px) !important;             /* 💡背景をふわっと品よくぼかす最新技術 */
}

/* 2. 📄 浮き上がる白いウィンドウ本体を「ゆったりと高級感あるサイズ」に修正 */
[id^="pop-"] > div {
  background: #ffffff !important;
  width: min(720px, 92%) !important;      /* 💡横幅を広げて窮屈感を一発解消 */
  max-height: 80vh !important;
  border-radius: 20px !important;         /* 💡角丸を少し滑らかにして今風のデザインに */
  padding: 48px 40px !important;          /* 💡内側の上下左右の余白を贅沢に広げる */
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25) !important; /* 💡ドッシリとした高級感ある立体的な影 */
  animation: modalFadeIn 0.3s ease forwards !important; /* ふわっと浮き出るアニメーション */
}

/* 3. 🏷️ タイトル（〇〇県の対応エリア詳細）を力強く洗練された見た目に */
[id^="pop-"] h3 {
  color: var(--blue) !important;          /* コーポレートカラーの深い青 */
  font-size: 24px !important;             /* 文字をパッと見やすく大きく */
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  margin: 0 0 24px 0 !important;          /* 下の文章との間に心地よいゆとり */
  border-bottom: 2px solid var(--border) !important; /* 💡下に品の良い薄緑の区切り線を敷く */
  padding-bottom: 14px !important;
}

/* 4. 📝 中の市区町村テキストをゆったりと読みやすく整理 */
[id^="pop-"] p {
  font-size: 16px !important;             /* 文字を読みやすい適正サイズに */
  color: #333333 !important;              /* 濃いグレーで高級感を */
  line-height: 1.85 !important;           /* 💡行間を広げて、詰まった印象を完全に消去 */
  font-weight: 500 !important;
}

/* 強調されている「**〇〇県内すべての〜**」の部分をさらに目立たせる */
[id^="pop-"] p strong {
  color: var(--green) !important;         /* 強調文字をメインの緑色に */
  font-weight: 800 !important;
  display: block !important;
  margin-top: 16px !important;
  font-size: 15px !important;
}

/* 5. ❌ 閉じるボタン（×）をカプセル風の上品なデザインに変更 */
[id^="pop-"] button {
  position: absolute !important;
  right: 20px !important;
  top: 20px !important;
  width: 36px !important;                 /* 💡ボタン自体を綺麗な正方形のクリックしやすいサイズに */
  height: 36px !important;
  background: #f4f5f4 !important;         /* 薄いグレーの背景 */
  border: none !important;
  border-radius: 50% !important;          /* 綺麗な丸型ボタン */
  font-size: 24px !important;             /* ×印の大きさ */
  color: #777777 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
}
[id^="pop-"] button:hover {
  background: #e1e3e1 !important;         /* カーソルを乗せた時に少し濃く */
  color: #111111 !important;
}

/* 🎬 ポップアップが下からふわっと浮き上がるアニメーションの魔法 */
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 📱 スマホ画面の時は余白をスマートに自動調整 */
@media (max-width: 768px) {
  [id^="pop-"] > div {
    padding: 38px 20px 30px !important;
  }
  [id^="pop-"] h3 {
    font-size: 20px !important;
  }
  [id^="pop-"] p {
    font-size: 14px !important;
  }
}

/* ===================================================
   🚨 最終修正：一番下に飛び出した重複（裏画面）を完全に隠す
   =================================================== */

/* 💡 JavaScriptでクリックされる前のポップアップの裏画面（pop-から始まる要素）を、最初から完全に画面から消去（非表示）にします */
[id^="pop-"],
div[id^="pop-"],
#pop-kanagawa,
#pop-tokyo,
#pop-chiba,
#pop-saitama,
#pop-shizuoka {
  display: none !important;          /* 💡通常時は絶対に非表示にします */
  position: fixed !important;        /* 画面全体の固定に戻す */
  top: 0 !important; left: 0 !important;
  width: 100vw !important; height: 100vh !important;
  background: rgba(0,0,0,0.6) !important;
  z-index: 999999 !important;
}

/* 💡 ただし、ボタンが押されてJavaScriptから表示命令（flex）が出た時だけは、最前面にドカンと出現させる設定 */
[id^="pop-"][style*="display: flex"],
[id^="pop-"][style*="flex"] {
  display: flex !important;          /* 💡クリックされた時だけ表に出す */
}

/* 💡 エリア一覧ページバナーから「⑥」の丸数字を安全に消去する設定 */
.area-buttons button.btn-all-areas-trigger::before {
  display: none !important;
  content: none !important;
}
/* ===================================================
   🌿 お客様の声（VOICE）セクション デザインカンプ完全再現
   =================================================== */

/* 1. 💡 2人縦並びになっていた構成を、デザイン通りの綺麗な横3列（グリッド）にする */
.voice-box .voice-list-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* 💡これで3人が横並びになります */
  gap: 24px !important;                             /* カード同士の間の心地よい隙間 */
  width: 100% !important;
  max-width: 1280px !important;
  margin-top: 30px !important;
}

/* 2. レビューカード自体の装飾（カンプ風の洗練された白カード） */
.voice-card {
  background: #ffffff !important;
  border: 2px solid #cfe4cf !important; /* 品の良い薄緑の境界線 */
  border-radius: 16px !important;       /* 滑らかな角丸 */
  padding: 24px !important;             /* 内側のゆったりとした余白 */
  box-shadow: 0 4px 16px rgba(0,0,0,0.02) !important;
  display: flex !important;
  flex-direction: column !important;    /* 中身を上から下に整列 */
  height: 100% !important;              /* 3つのカードの高さを綺麗に揃える */
}

/* ユーザー情報エリア（顔写真と年齢・星マーク） */
.voice-user-info {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px dashed #cfe4cf !important; /* 写真の下に可愛い点線を敷く */
  padding-bottom: 12px !important;
}

/* 顔写真のサイズと丸型化 */
.voice-avatar {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover !important;
  border-radius: 50% !important;        /* 綺麗な丸型写真に */
  background: #f4f5f4 !important;
  flex: 0 0 60px !important;
}
.voice-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* 年齢バッジ（30代女性など） */
.voice-badge {
  font-size: 13px !important;
  color: #555555 !important;
  font-weight: 700 !important;
}

/* 💡 金色の評価の星（★）マーク */
.voice-stars {
  color: #f28c00 !important;           /* 鮮やかなオレンジゴールド */
  font-size: 14px !important;
  letter-spacing: 2px !important;
}

/* 3. 📝 増量した感想テキストの読みやすさ調整 */
.voice-content h3 {
  font-size: 16px !important;
  color: var(--blue) !important;        /* 深い青色で見出しを目立たせる */
  font-weight: 800 !important;
  line-height: 1.4 !important;
  margin: 0 0 12px 0 !important;
  text-align: left !important;
}
.voice-content p {
  font-size: 14px !important;
  color: #333333 !important;            /* 読みやすいグレーブラック */
  line-height: 1.65 !important;         /* 行間をゆったり広げる */
  font-weight: 500 !important;
  text-align: left !important;
  margin: 0 !important;
}

/* --- 📱 スマホ表示の時のレスポンシブ調整 --- */
@media (max-width: 768px) {
  /* スマホ画面では無理に横並びにせず、縦1列にゆったり並べる */
  .voice-box .voice-list-wrapper {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }
  .voice-card {
    padding: 20px !important;
  }
}

/* ===================================================
   📱 スマホ版：お客様の声を中央に ＆ 対応エリアのはみ出しを完全修正
   =================================================== */
@media (max-width: 768px) {
  
  /* 1. 💡 左に寄っていた「お客様の声（voice-box）」全体を画面の真ん中に修正 */
  .voice-box,
  div.voice-box {
    display: block !important;
    width: min(1000px, calc(100% - 32px)) !important; /* 左右に安全な余白を作る */
    margin-inline: auto !important; /* 💡これで確実にど真ん中に戻ります */
    float: none !important;
    clear: both !important;
  }

  /* 中の3人のカードの横幅も、画面幅に合わせて100%ぴったりに広げる */
  .voice-list-wrapper,
  .voice-box .voice-list-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
  .voice-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. 💡 右側にはみ出していた「対応エリア」のボタンを画面内に綺麗に収める */
  .area-box .area-content {
    flex-direction: column !important; /* 縦並びにして衝突を防ぐ */
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 24px !important;
  }

  /* 都道府県ボタンのグリッドを、スマホ画面の横幅いっぱいにフィットさせる */
  .area-box .area-buttons {
    flex: 1 1 100% !important;       /* 50%という制限を解除して100%に広げる */
    width: min(480px, calc(100% - 32px)) !important; /* スマホで見やすい最大幅に制限しつつ中央へ */
    margin-inline: auto !important;   /* 💡右寄りを強制解除してど真ん中に整列 */
    grid-template-columns: repeat(2, 1fr) !important; /* きれいな2列を維持 */
    gap: 12px 16px !important;        /* スマホ用に隙間を少しコンパクトに */
  }

  /* 各ボタン自体の横幅も、広がった枠に合わせて自動で伸びるようにする */
  .area-box .area-buttons button,
  .area-box .area-buttons a {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* ===================================================
   📱 スマホ版：対応エリアの左右カード幅を完全に等幅化
   =================================================== */
@media (max-width: 768px) {
  
  /* 1. 💡 右列を押し広げていた古い命令を完全に上書きし、綺麗な2列（50%ずつ）に固定します */
  .area-box .area-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 💡 1対1の等倍で2列に割ります */
    width: min(480px, calc(100% - 32px)) !important; /* 画面端から少し引いた安全な幅 */
    margin-inline: auto !important; /* 完全に画面の真ん中へ */
    gap: 12px 14px !important; /* 左右・上下の隙間を綺麗に統一 */
  }

  /* 2. 💡 中にあるボタンやカードが、外枠の等幅（50%）からはみ出すのを強制防止 */
  .area-box .area-buttons button,
  .area-box .area-buttons a,
  .area-buttons a.btn-wide-banner,
  a.btn-wide-banner {
    grid-column: auto !important;     /* 💡 2列ぶち抜き設定が残っていたら強制解除 */
    width: 100% !important;           /* 割り当てられた幅（50%）いっぱいにピッタリ合わせる */
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}
/* ===================================================
   📱 スマホ版：エリア一覧カード内の文字サイズ微調整
   =================================================== */
@media (max-width: 768px) {
  
  /* 💡 スマホの時だけ、説明文の文字サイズを13pxから「11px」へ一回り小さくします */
  .area-box .area-buttons button small,
  .area-buttons a.btn-wide-banner small,
  a.btn-wide-banner small {
    font-size: 11px !important;       /* 💡これで文字が小さくなり、枠内に綺麗に収まります */
    line-height: 1.3 !important;      /* 行間も少しだけタイトにしてスマートに */
    margin-bottom: 6px !important;    /* 下のオレンジボタンとの隙間を微調整 */
    white-space: nowrap !important;   /* 💡変なところで3行にガタガタ改行されるのを防ぐおまじない */
  }

  /* オレンジ色の「すべてのエリアを見る」ボタン自体も、スマホの幅に合わせて少しだけきれいに縮小 */
  .area-buttons a.btn-wide-banner span:last-child {
    width: 100% !important;           /* カードの幅（50%）いっぱいにぴったりフィット */
    max-width: 140px !important;      /* 💡横幅を少しシャープにして文字がはみ出さないように */
    font-size: 11px !important;       /* ボタンの中の文字も一回り小さく */
    height: 28px !important;
  }
}
/* ===================================================
   📱 スマホ版：エリア一覧カード内の文字はみ出し最終修正
   =================================================== */
@media (max-width: 768px) {
  
  /* 💡 改行禁止（nowrap）を完全に解除し、枠の幅に合わせて綺麗に自動折り返しさせます */
  .area-box .area-buttons button small,
  .area-buttons a.btn-wide-banner small,
  a.btn-wide-banner small {
    white-space: normal !important;   /* 💡改行禁止を解除して、自然な折り返しに戻します */
    display: block !important;
    text-align: center !important;    /* 文字を中央揃えに */
    font-size: 11px !important;       /* 小さいサイズを維持 */
    line-height: 1.4 !important;      /* 2行になっても窮屈じゃない少しゆったりした行間 */
    width: 100% !important;
    padding: 0 4px !important;        /* 左右にほんの少しだけ安全な隙間を作る */
  }

  /* 下のオレンジ色の「すべてのエリアを見る」ボタンがはみ出さないように自動幅に微調整 */
  .area-buttons button.btn-all-areas-trigger span:last-child {
    width: 90% !important;            /* 💡固定幅（140pxなど）を解除し、枠に合わせて綺麗に収まるようにします */
    max-width: 150px !important;
    font-size: 11px !important;
    height: 28px !important;
  }
}
/* ===================================================
   🖥️ PC版：CTAセクションのボタン漏れ・はみ出しを完全修正
   =================================================== */
@media (min-width: 769px) {
  /* 💡 枠線の外に飛び出していたボタンを、親要素の箱（cta-inner）の中に強制的に引き戻します */
  .cta-inner,
  div.cta-inner,
  section.cta .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* 左から「フクロウ・文字・電話番号・ボタン」を均等に綺麗に配置 */
    width: min(1280px, calc(100% - 48px)) !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    gap: 20px !important;
    box-sizing: border-box !important;
  }

  /* 電話番号とボタンのエリアが右側に押し出されないようにブレーキをかける */
  .cta-buttons {
    display: flex !important;
    gap: 12px !important;
    flex-direction: row !important; /* ボタンが縦に崩れたり外に漏れたりするのを防ぐ */
    flex: 0 0 auto !important;
    margin-left: auto !important;   /* 右端のラインに綺麗に吸着させる */
  }

  /* 各ボタンが潰れたり変な幅にならないように固定 */
  .cta-buttons .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 12px 20px !important;
  }
}

/* ===================================================
   🖥️ PC版：CTAエリアのボタンはみ出しバグ完全粉砕
   =================================================== */
@media (min-width: 769px) {
  
  /* 1. 💡 全体の箱をFlexboxの綺麗な横並び、かつ左右均等に強制配置します */
  section.cta .container,
  .container.cta-inner,
  .cta-inner {
    display: flex !important;
    flex-direction: row !important;   /* 💡 確実に横並びに固定 */
    align-items: center !important;   /* 上下を中央揃えに */
    justify-content: space-between !important; /* 左端から右端まで綺麗に振り分ける */
    width: min(1280px, calc(100% - 48px)) !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  /* 2. 💡 はみ出しの原因だった「inline-flex」を打ち消し、2つのボタンを安全に横に並べます */
  .cta-buttons,
  div.cta-buttons {
    display: flex !important;         /* 💡 inline-flex から flex に強制上書き */
    flex-direction: row !important;   /* 2つのボタンを確実に横並びにする */
    gap: 12px !important;             /* ボタン同士の間の隙間 */
    flex: 0 0 auto !important;        /* 押し潰されるのを防止 */
    margin-left: auto !important;     /* 右端のラインにピタッと吸着 */
  }

  /* 各ボタンが枠内で綺麗に見えるようにサイズを調整 */
  .cta-buttons .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 12px 20px !important;
    width: auto !important;
  }
}

/* ===================================================
   🖥️ PC版：CTAエリアの電話番号とボタンを正しい2段組みに修正
   =================================================== */
@media (min-width: 769px) {
  
  /* 1. 💡 右側のブロック（電話番号とボタンの塊）を、縦並び（2段組み）に強制変形させます */
  .cta-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important; /* 左側（ロゴ・文章）と、右側（連絡先）を綺麗に振り分け */
    width: min(1280px, calc(100% - 48px)) !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
  }

  /* 2. 💡 電話番号のリンク（.cta-tel）の「真下」にボタンが来るように、配置の土台を整えます */
  /* ※貼っていただいたHTMLをもとに、右側で縦に積むための専用の箱の動きを強制リセットします */
  .site-header .header-contact,
  .cta-inner {
    position: relative !important;
  }

  /* 大きな電話番号自体の位置調整（上に配置して、下にスペースをあける） */
  a.cta-tel {
    display: block !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    text-decoration: none !important;
    text-align: right !important; /* 💡 右寄せにする */
    margin-bottom: 8px !important; /* 下のボタンとの間の程よい隙間 */
  }

  /* 3. 💡 はみ出していた原因のボタンエリア（.cta-buttons）を、電話番号の「真下」にピタッと回り込ませます */
  .cta-buttons,
  div.cta-buttons {
    display: flex !important;
    flex-direction: row !important;   /* LINEと見積ボタン自体は横に2つ並べる */
    gap: 12px !important;             /* ボタン同士の間の隙間 */
    justify-content: flex-end !important; /* 💡 右端のラインにピシッと綺麗に揃える */
    width: auto !important;
    margin-left: auto !important;     /* 自動で右側に寄せる */
    clear: both !important;           /* 💡 上の要素（電話番号）の下へ確実に回り込ませる命令 */
  }

  /* 各ボタンが潰れないようにサイズを最適化 */
  .cta-buttons .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 12px 24px !important;    /* 押しやすい上品なサイズに */
    font-size: 14px !important;
    white-space: nowrap !important;
  }
}

/* ===================================================
   📱 スマホ版：CTAセクションのデザイン超美化設定
   =================================================== */
@media (max-width: 768px) {
  
  /* 1. 💡 全体を包む箱（背景）を少し優しくすっきりとした見た目に調整 */
  section.cta {
    background: #fffdf5 !important;   /* ほんのり温かみのある上品な薄黄背景 */
    padding: 34px 0 !important;       /* 上下の無駄な隙間をカット */
  }
  
  .container.cta-inner {
    flex-direction: column !important; /* 縦並びをキープ */
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;              /* パーツ同士の間隔をスマートに */
    padding: 0 20px !important;
  }

  /* フクロウのイラストアイコンをスマホに最適な可愛いサイズに固定 */
  .container.cta-inner img {
    width: 80px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* 2. 📝 大きすぎてガタガタだった見出し文章の文字サイズを最適化 */
  .container cta-inner h2,
  .container.cta-inner div h2,
  .container.cta-inner h2 {
    font-size: 20px !important;       /* 💡一回り小さくして、スマホでも2行で綺麗に収まるように */
    color: var(--blue) !important;    /* 信頼感のある深い青色 */
    font-weight: 800 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.02em !important;
    margin: 0 0 6px 0 !important;
  }

  /* 見出しの下の補足テキストもすっきりコンパクトに */
  .container.cta-inner p {
    font-size: 13px !important;       /* 💡品の良い注記サイズ（13px）に落とす */
    color: #444444 !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }

  /* 3. 📞 右側エリアの箱（連絡先まとめ）をスマホ用の中央寄せにリセット */
  .cta-right-content {
    align-items: center !important;   /* 💡右寄せになっていたのを「中央揃え」に強制上書き */
    justify-content: center !important;
    width: 100% !important;
    gap: 14px !important;
    margin-top: 4px !important;
  }

  /* スマホの電話番号をハッキリ見やすく調整 */
  a.cta-tel {
    font-size: 32px !important;       /* スマホの横幅を突き抜けないベストな大きさ */
    color: #111111 !important;
    text-align: center !important;     /* 文字を中央揃えに */
    letter-spacing: 0.03em !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* 4. 🎛️ 2つのボタンをスマホの画面幅に合わせて「等幅で綺麗に横並び」にする */
  .cta-buttons {
    display: grid !important;         /* 💡Gridを使って横並びの幅を完璧にコントロール */
    grid-template-columns: repeat(2, 1fr) !important; /* 💡1対1の均等な2列に割る */
    gap: 10px !important;             /* ボタン同士の隙間 */
    width: 100% !important;
    max-width: 340px !important;      /* ボタンが広がりすぎないように程よく制限 */
    margin: 0 auto !important;
  }

  /* ボタン自体のデザインもスマホ用に少し上品に微調整 */
  .cta-buttons .btn {
    width: 100% !important;           /* 割り当てられた幅（50%）にぴったりフィット */
    min-height: 42px !important;      /* 高さをスマホ用に少しスマートに */
    padding: 10px 4px !important;     /* 内側の文字の窮屈感を無くす */
    font-size: 12px !important;       /* 💡文字サイズを一回り小さくして、ボタン内での改行を防止 */
    font-weight: 800 !important;
    border-radius: 6px !important;    /* すっきりした角丸 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.06) !important; /* ほんのり上品な影 */
    white-space: nowrap !important;   /* 絶対にボタン内で変な改行をさせない */
  }
}

/* ===================================================
   📱 スマホ版：CTA全体の底面に美しい余白を追加
   =================================================== */
@media (max-width: 768px) {
  
  /* 💡 ボタンの下が詰まっていた全体の箱（cta-inner）の底に、24pxの上品な余白を強制追加します */
  .container.cta-inner,
  div.container.cta-inner,
  section.cta .container {
    padding-bottom: 24px !important;  /* 💡 これでボタンの下に綺麗な空き地が生まれます */
    box-sizing: border-box !important;
  }
}

/* ===================================================
   🖥️📱 フッター：消滅していたロゴ画像を確実に強制表示
   =================================================== */

/* 1. 💡 0pxに押し潰されたり非表示にされていたフッターロゴ画像を強制的に出現させます */
.site-footer .footer-logo img,
.site-footer img[src*="logo"],
footer img {
  display: block !important;          /* 💡非表示命令（none）を完全に上書きして出現させます */
  visibility: visible !important;
  opacity: 1 !important;
  
  /* 💡 デザインデータに合わせた、フラーで読みやすい美しいサイズに固定します */
  width: auto !important;
  max-width: 220px !important;        /* 横幅が広がりすぎないように安全なブレーキ */
  height: 54px !important;            /* 縦の大きさをビシッとキープ */
  object-fit: contain !important;
  margin: 0 0 16px 0 !important;      /* 下の住所やテキストとの間に心地よい余白を作る */
}

/* 2. 【スマホ版】スマホの狭い画面の時は、フラーのロゴも綺麗に中央揃えにする設定 */
@media (max-width: 768px) {
  .site-footer .footer-logo img,
  .site-footer img[src*="logo"],
  footer img {
    max-width: 180px !important;      /* スマホ用に一回りコンパクトに */
    height: 44px !important;
    margin: 0 auto 16px !important;   /* 💡スマホではロゴをど真ん中に整列 */
  }
}

/* ===================================================
   🖥️📱 フッター：スマホ対応 ＆ ロゴ表示強制バグ修正
   =================================================== */
.footer-logo-img,
.site-footer img.footer-logo-img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 60px !important;
  width: auto !important;
}

@media (max-width: 768px) {
  /* スマホの時は各メニューを縦1列に並べ直して中央揃えにします */
  .site-footer .footer-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 30px !important;
    padding: 0 16px !important;
  }
  .site-footer .footer-inner > div {
    width: 100% !important;
    text-align: center !important;
  }
  .footer-logo-img,
  .site-footer img.footer-logo-img {
    margin: 0 auto 14px !important;
    height: 48px !important; /* スマホ用に少しコンパクトに */
  }
  .site-footer h3 {
    display: inline-block !important;
    border-bottom: 2px solid rgba(255,255,255,0.2) !important;
    padding-bottom: 4px !important;
    margin-bottom: 10px !important;
  }
}

/* ===================================================
   📱 スマホ版：フッターデザイン大幅美化＆最適化
   =================================================== */
@media (max-width: 768px) {
  /* 1. 💡 スマホの時は縦並び、かつ上品な間隔（gap）に調整 */
  .site-footer {
    padding: 40px 0 20px !important; /* 上下の無駄な余白をカット */
  }
  .site-footer .footer-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 24px !important;             /* ブロック同士の間の詰まりすぎ・伸びすぎを防止 */
    padding: 0 16px !important;
  }
  
  /* 2. 各パーツの横幅をスマホ幅にフィットさせ、すべて中央揃えにする */
  .site-footer .footer-brand-text,
  .site-footer .footer-nav-block {
    width: 100% !important;
    max-width: 280px !important;      /* 横に広がりすぎないよう中央にキュッと集める */
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* 「暮らしのお困りごとは〜」の文字をスマホで見やすい14px中央揃えに */
  .site-footer .footer-brand-text p {
    font-size: 14px !important;
    text-align: center !important;
    line-height: 1.5 !important;
  }

  /* 3. 🏷️ 「サービス一覧」などの各見出しの下線を、スマホに合わせた中央の短い線に変更 */
  .site-footer h3 {
    font-size: 15px !important;
    display: inline-block !important; /* 💡横幅いっぱいの線を無くし、文字の長さだけにします */
    border-bottom: 2px solid rgba(255,255,255,0.2) !important; /* 上品な白い半透明の線 */
    padding-bottom: 4px !important;
    margin: 0 auto 8px !important;
  }

  /* 見出しの下のメニュー文字を一回り小さくしてスッキリ見せる */
  .site-footer p {
    font-size: 13px !important;
    color: rgba(255,255,255,0.85) !important;
    line-height: 1.7 !important;
  }

  /* 4. 📞 スマホの大きな電話番号も中央にビシッと整列 */
  .site-footer p.footer-tel {
    font-size: 26px !important;       /* スマホの画面幅にジャストフィットする大きさ */
    margin-bottom: 2px !important;
    text-align: center !important;
  }
}

/* ===================================================
   📱 スマホ版フッター：4列の縦伸びを2列グリッドに完全修復
   =================================================== */
@media (max-width: 768px) {
  
  /* 1. 全体を包む箱（footer-inner）を、スマホ用の2列グリッドへ強制組み替え */
  .site-footer .footer-inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 💡これで4つの要素を綺麗な2列に割ります */
    gap: 24px 16px !important;       /* 上下左右の心地よい隙間 */
    padding: 0 20px !important;
    max-width: 480px !important;      /* スマホにちょうどいい幅にキュッと絞る */
    margin: 0 auto !important;
  }

  /* 2. 1段目：「暮らしのお困りごとは〜」を2列ぶち抜きの1本線にして、一番上にど真ん中配置 */
  .site-footer .footer-brand-text,
  .site-footer .footer-inner > div:first-child {
    grid-column: 1 / -1 !important;  /* 💡2列分を贅沢に使って、一番上で横に広げます */
    text-align: center !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important; /* キャッチコピーの下に薄い区切り線を敷く */
    padding-bottom: 16px !important;
  }
  .site-footer .footer-brand-text p {
    font-size: 15px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  /* 3. 2段目：「サービス一覧」と「対応エリア」を左と右に1つずつ綺麗に並べる */
  .site-footer .footer-nav-block,
  .site-footer .footer-inner > div:nth-child(2),
  .site-footer .footer-inner > div:nth-child(3) {
    grid-column: auto !important;
    text-align: center !important;
    display: block !important;
  }

  /* 4. 3段目：「お問い合わせ（電話番号）」をもう一度2列ぶち抜きにして、一番下にドカンと配置 */
  .site-footer .footer-inner > div:last-child {
    grid-column: 1 / -1 !important;  /* 💡2列分をぶち抜いて一番下に大きく配置 */
    text-align: center !important;
    margin-top: 8px !important;
    border-top: 1px solid rgba(255,255,255,0.15) !important; /* お問い合わせの上にも上品な線を敷く */
    padding-top: 16px !important;
    width: 100% !important;
  }

  /* 5. 🏷️ 各見出しの線も、スマホ用の短い中央線に統一 */
  .site-footer h3 {
    font-size: 14px !important;
    display: inline-block !important; /* 線の長さを文字ぴったりに縮める */
    border-bottom: 2px solid rgba(255,255,255,0.2) !important;
    padding-bottom: 4px !important;
    margin: 0 auto 8px !important;
  }
  .site-footer p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,0.85) !important;
  }
  .site-footer p.footer-tel {
    font-size: 28px !important;       /* スマホの横幅を突き抜けない迫力サイズ */
    font-weight: 800 !important;
    text-align: center !important;
    margin-bottom: 4px !important;
  }
}

/* ===================================================
   🌿 不用品回収ページ：画像サイズバグ修正＆体験談美化
   =================================================== */

/* 1. 💡 リンク切れで0pxに潰れていた3箇所の紹介画像に、正しいプロのサイズ（40%幅）を強制適用 */
.disposal-image-block {
  flex: 0 1 40% !important;
  min-width: 320px !important;       /* スマホでも潰れない最低横幅 */
}
.disposal-image-block img {
  display: block !important;
  width: 100% !important;
  height: 240px !important;          /* 💡縦幅を240pxに固定して、画像がなくても綺麗なダミー箱を作ります */
  object-fit: cover !important;
  background: #f0f2f0 !important;    /* 💡画像がない間は、品の良い薄グレーの背景色で埋める */
  border: 2px solid #cfe4cf !important;
  border-radius: 14px !important;
}

/* 2. 💡 寂しかった「実際の作業例・体験談」の箱を、トップと同じ豪華なカードデザインに大改造 */
.disposal-case-box {
  background: #ffffff !important;   /* 寂しい薄黄色をやめて、洗練された白カードに */
  border: 2px solid #cfe4cf !important;
  border-radius: 16px !important;
  padding: 30px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.04) !important; /* トップと同じ高級な浮き出る影 */
  max-width: 800px !important;       /* 読みやすいように中央に少し窄める */
  margin: 34px auto 0 !important;
  position: relative !important;
  text-align: left !important;
}

/* 体験談のヘッダー（神奈川県横浜市 / 男性 / 40代）の見た目をバッジ風に */
.disposal-case-meta {
  display: inline-block !important;
  font-size: 13px !important;
  color: #555555 !important;
  background: #fffcf0 !important;    /* 優しい薄黄色のバッジ背景 */
  border: 1px solid #f2be54 !important;
  padding: 4px 14px !important;
  border-radius: 99px !important;    /* 丸カプセル型バッジ */
  margin-bottom: 16px !important;
}

/* 💡 トップページと同じ「金色の評価の星（★）」をCSSで自動出現させるプロの演出 */
.disposal-case-box h3::before {
  content: "★★★★★\A" !important;  /* 💡見出しの上に金色の星を5個強制出現させます */
  display: block !important;
  color: #f28c00 !important;         /* 鮮やかなゴールドオレンジ */
  font-size: 15px !important;
  letter-spacing: 2px !important;
  margin-bottom: 6px !important;
}

/* 体験談の見出しタイトルを深い青色で力強く強調 */
.disposal-case-box h3 {
  color: var(--blue) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  margin: 0 0 14px 0 !important;
  border-bottom: 1px dashed #cfe4cf !important; /* タイトルの下に上品な点線を敷く */
  padding-bottom: 10px !important;
}

/* 体験談の詳しい感想テキストの行間をゆったり広げる */
.disposal-case-box p {
  font-size: 15px !important;
  color: #333333 !important;
  line-height: 1.8 !important;       /* 💡ギチギチだった行間を広げて圧倒的に読みやすく */
  font-weight: 500 !important;
  margin: 0 !important;
}

/* --- 📱 スマホ用のレスポンシブ微調整 --- */
@media (max-width: 768px) {
  .disposal-image-block {
    width: 100% !important;
    min-width: 0 !important;
  }
  .disposal-image-block img {
    height: 180px !important;        /* スマホ用には少しコンパクトな高さに */
  }
  .disposal-case-box {
    padding: 24px 16px !important;
    margin-inline: 16px !important;
  }
}

/* ===================================================
   📱 スマホ版：お客様の声（体験談）の上下の隙間を狭く修正
   =================================================== */
@media (max-width: 768px) {
  
  /* 1. 💡 広がりすぎていたカード同士の「上下の隙間（gap）」を12pxに強制引き締め */
  .voice-box .voice-list-wrapper,
  div[style*="margin-top: 80px"] .disposal-cases-wrapper,
  .disposal-cases-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;            /* 💡 28pxや広い隙間を12pxに縮めて間伸びを解消 */
    margin-top: 20px !important;     /* 見出しリボンとの間の隙間も程よく調整 */
    padding: 0 16px !important;
  }

  /* 2. 💡 各口コミカード自体の上下の無駄な外余白（margin）もすべて0にしてリセット */
  .voice-card,
  .disposal-case-box,
  div.disposal-case-box {
    margin-top: 0 !important;
    margin-bottom: 0 !important;     /* 余計な押し出しを完全にカット */
    padding: 20px 16px !important;   /* カードの内側の余白をスマホ用にスマートに */
  }

  /* 見出し（H3）の上の星マークの隙間も少しコンパクトにして引き締める */
  .disposal-case-box h3::before {
    margin-bottom: 4px !important;
  }
}