/* ============================================================
   BUYMO 都道府県別エリアLP / ハブ 個別スタイル
   （共通は buymo.css を継承）
   ============================================================ */

/* ---- ページヘッダー共通 ---- */
.page-hero{background:linear-gradient(180deg,#fff 0%,var(--green-pale) 100%);padding:48px 0 56px;}
.breadcrumb{font-size:13px;color:#777;margin-bottom:16px;}
.breadcrumb a{color:var(--green-mid);}
.breadcrumb span{margin:0 8px;}
.page-lead{color:#555;font-size:16px;max-width:780px;}

/* ---- エリアヒーロー ---- */
.area-hero .hero-lead{font-size:16px;font-weight:700;color:var(--green-mid);margin-bottom:6px;}
.area-hero h1{font-size:38px;font-weight:900;line-height:1.3;margin-bottom:14px;}
.area-hero .hl{background:linear-gradient(transparent 55%,var(--green-pale) 55%);padding:0 4px;}
.area-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px;}
.btn-tel{background:#fff;border:2px solid var(--green);color:var(--green);height:60px;padding:0 28px;}
.btn-tel:hover{background:var(--green);color:#fff;}

/* ---- 共通テキスト ---- */
.lead-text{max-width:880px;margin:0 auto;font-size:16px;color:#555;line-height:1.9;text-align:center;}
.area-note{color:#666;font-size:14px;}
.area-note.center,.center{text-align:center;}

/* ---- セクション余白 ---- */
.area-intro{background:#fff;padding:64px 0;}
.area-cities{background:var(--green-bg);padding:64px 0;text-align:center;}
.results{background:#fff;padding:64px 0;}
.area-related{background:var(--gray);padding:64px 0;}

/* ---- 都市チップ ---- */
.city-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:18px;}
.city-chips li{background:#fff;border:1px solid var(--border);border-radius:8px;padding:10px 22px;font-weight:700;box-shadow:var(--shadow);}

/* ---- 同地方リンク ---- */
.related-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:28px;}
.related-links a{background:#fff;border-radius:8px;padding:12px 20px;font-weight:700;box-shadow:var(--shadow);transition:transform .2s,color .2s;}
.related-links a:hover{transform:translateY(-3px);color:var(--green-mid);}

/* ---- ボトムCTA ---- */
.area-bottom-cta{text-align:center;color:#fff;}
.area-bottom-cta h2{font-size:30px;font-weight:900;margin-bottom:10px;}
.area-bottom-cta p{margin-bottom:8px;}
.area-bottom-cta .area-cta{justify-content:center;}
.btn-light{background:#fff;color:var(--green);height:60px;padding:0 32px;}
.btn-light:hover{filter:brightness(1.05);}
.btn-tel-light{background:rgba(255,255,255,.15);color:#fff;border:2px solid #fff;height:60px;padding:0 28px;}
.btn-tel-light:hover{background:#fff;color:var(--green);}

/* ============ ハブページ ============ */
.area-list-section{padding:64px 0;background:#fff;}
.region-block{margin-bottom:48px;}
.region-title{font-size:22px;font-weight:900;color:var(--green-dark);border-left:5px solid var(--green-mid);padding-left:14px;margin-bottom:20px;}
.pref-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.pref-grid a{display:block;background:var(--green-bg);border-radius:10px;padding:16px 18px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;border:1px solid var(--border);}
.pref-grid a:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
.pref-name{display:block;font-weight:700;font-size:16px;color:var(--text);}
.pref-cities{display:block;font-size:12px;color:#888;margin-top:4px;}

@media (max-width:991px){
  .pref-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:767px){
  .area-hero h1{font-size:28px;}
  .pref-grid{grid-template-columns:repeat(2,1fr);}
  .area-cta{flex-direction:column;}
  .btn-tel,.btn-light,.btn-tel-light,.area-hero .btn-lg,.area-bottom-cta .btn-lg{width:100%;}
  .area-intro,.area-cities,.results,.area-related,.area-list-section{padding:44px 0;}
}

/* エリアページ ヒーローバナー */
.area-hero {
  background-image: url('../img/area-banner.svg');
  background-size: cover;
  background-position: center top;
  background-blend-mode: luminosity;
}