/* ==== service-areas.css (対応エリアページ専用) ==== */

/* Hero（対応エリアページ用） */
.hero{
  background:
    radial-gradient(1200px 500px at 20% -50%, var(--hero-from), transparent 70%),
    radial-gradient(1200px 500px at 100% 0%, var(--hero-to), transparent 60%),
    #fff;
  border-top:1px solid var(--line);
  padding:0 16px;
}
.hero__wrap{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:48px 0; /* 少しだけ圧縮 */
}
.hero h1{
  font-size:clamp(28px, 4vw, 36px);
  margin-bottom:12px;
}
.hero .lead{
  max-width:42rem;
}
@media (max-width: 768px){
  .hero{
    background:#fff;
    padding:0 16px;
  }
  .hero__wrap{
    padding:40px 0;
  }
}

/* 旧 Area カード用の最低限 */
.pref.card{ padding:16px; }
.pref .thumb{
  aspect-ratio:4/3;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:6px;
}
.pref-thumb-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}
.pref .list{
  margin-top:10px;
  font-size:14px;
  color:var(--muted);
}

/* ▼ 市区町村ラッパー（アコーディオン） */
.cities-wrap{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:
    max-height .35s ease,
    opacity .25s ease;
  margin-top:0;
}
.pref--open .cities-wrap{
  max-height:600px;
  opacity:1;
  margin-top:8px;
}

/* 市区町村チップ群 */
.cities{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.cities .chip{
  background:#eef2ff;
  border-color:#e5e7eb;
  font-size:12px;
  padding:4px 10px;
  line-height:1.3;
  border-radius:999px;
  display:inline-block;
  white-space:nowrap;
  opacity:0;
  transform:translateY(3px);
  transition:opacity .2s ease, transform .2s ease;
}
.pref--open .cities .chip{
  opacity:1;
  transform:translateY(0);
}
.pref--open .cities .chip:nth-child(1){ transition-delay:.02s; }
.pref--open .cities .chip:nth-child(2){ transition-delay:.04s; }
.pref--open .cities .chip:nth-child(3){ transition-delay:.06s; }
.pref--open .cities .chip:nth-child(4){ transition-delay:.08s; }
.pref--open .cities .chip:nth-child(5){ transition-delay:.10s; }
.pref--open .cities .chip:nth-child(6){ transition-delay:.12s; }
.pref--open .cities .chip:nth-child(7){ transition-delay:.14s; }
.pref--open .cities .chip:nth-child(8){ transition-delay:.16s; }
.pref--open .cities .chip:nth-child(9){ transition-delay:.18s; }
.pref--open .cities .chip:nth-child(10){ transition-delay:.20s; }
.pref--open .cities .chip:nth-child(11){ transition-delay:.22s; }
.pref--open .cities .chip:nth-child(12){ transition-delay:.24s; }

/* 下部CTA */
.cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:10px;
}

/* 簡易版エリアのグリッド */
.area-grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.area-grid .pref--open{
  grid-column:1 / -1;
}

/* タブレット以下は2列、スマホは1列 */
@media(max-width:1024px){
  .area-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:640px){
  .area-grid{
    grid-template-columns:1fr;
  }
}

/* ヒーローとエリアの間隔 */
#area.section{
  padding-top:32px;
}

/* 地方ごとの枠レイアウト */
.area-frame{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.area-region-title{
  font-size:18px;
  font-weight:700;
  margin:0 0 16px;
}

/* カードのベース */
.area-grid .area-item{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:12px 16px;  /* ← 上下12px / 左右16px にして少しコンパクト＆上下同じ */
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  transition:box-shadow .15s ease, border-color .15s ease, transform .1s ease;
}

.area-grid .area-item:hover{
  box-shadow:0 10px 30px rgba(15,23,42,.08);
  transform:translateY(-1px);
}
.area-grid .area-item.pref--open{
  grid-column:1 / -1;
}

/* ▼ 新しく追加したヘッダーラッパー */
.area-header{
  margin-bottom:2px;  /* ← 4px から 2px にして少し詰める */
}

/* 都道府県名＋リード文（PC共通） */
.area-pref{
  font-weight:700;
  margin-bottom:4px;
}
.area-cities{
  font-size:14px;
  color:var(--muted);
}

/* 開いているときは「○○市など」を非表示（共通） */
.pref--open .area-cities{
  display:none;
}

/* ピル（chips） */
.area-item .cities-wrap{
  margin-top:6px;   /* ← 10px から 6px にしてコンパクトに */
}
.area-item .cities{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}


/* ボタン（「詳細」）基礎スタイル */
.area-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid var(--brand-soft, var(--brand));
  color:var(--brand);
  background:#fff;
  padding:8px 14px;
  border-radius:12px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.area-toggle:hover{
  background:rgba(37,99,235,0.04);
}
.area-toggle:active{
  transform:translateY(1px);
}

/* PC/タブレット：ボタンは地区テキストの下に少し余白をつけて表示 */
.area-header .area-toggle{
  margin-top:8px;
}

/* スマホ専用レイアウト
   「県名｜○○市など｜詳細」を1行に並べる */
@media (max-width:640px){
  .area-grid{
    grid-template-columns:1fr;
  }
  .hero{
    background:#fff;
  }

  .area-item{
    padding:10px 12px;   /* ← 上下10px / 左右12px。PCより一段コンパクト */
  }

  /* 県名｜○○市など｜詳細 を1行に */
  .area-header{
    display:flex;
    align-items:center;
  }

  .area-pref{
    margin-bottom:0;
    flex-shrink:0;
    position:relative;
  }

  /* 県名と「○○市など」の間に ｜ を入れる */
  .area-pref::after{
    content:"｜";
    margin:0 4px;
    color:var(--muted);
  }

  .area-cities{
    flex:1 1 auto;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis; /* 長い場合は … で省略 */
  }

  .area-header .area-toggle{
    margin-top:0;
    margin-left:8px;
    flex-shrink:0;
    white-space:nowrap;
  }
}


/* 開いているときのボタンは青背景＋白文字 */
.area-item.pref--open .area-toggle{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}
.area-item.pref--open .area-toggle:hover{
  background:var(--brand-dark, #1d4ed8);
}

@media (max-width:640px){

  /* カード同士の間隔を狭くする */
  .area-grid{
    grid-template-columns:1fr; /* これは既にあればそのままでOK */
    gap:12px;                  /* 20px → 12px に */
  }
}