/* =================================
  SAKASUMU TOWN PAGE - A (Hero + Cards)
================================= */

body.single-town .p-entry__body{
  max-width: 980px;
  margin: 0 auto;
}

/* ===== Typography (メリハリ) ===== */
body.single-town .p-entry__body{ color: #374151; }
body.single-town .p-entry__body p{ color: #374151; }
body.single-town .town-hero .p-entry__title{ color: #111827; }
body.single-town .town-hero-lead{ color: rgba(17,24,39,.72); }
body.single-town .custom_h2{ color: #111827; }
body.single-town .custom_h3{ color: #111827; }
body.single-town .p-entry__sub{ color: rgba(17,24,39,.62); }
body.single-town .p-entry__body strong{ font-weight: 900; background: linear-gradient(transparent 62%, rgba(255, 230, 0, .35) 0); padding: 0 2px; }

/* ===== Hero ===== */
.town-hero{
  padding: 36px 0 28px;
  background: linear-gradient(180deg,#f7f7f7,#fff);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.town-hero-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}
.town-badge{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  padding:6px 12px;
  border-radius:999px;
  background:#111;
  color:#fff;
  margin-bottom:10px;
}
.town-hero-title{
  font-size: 28px;
  line-height: 1.35;
  margin: 0;
}
.town-hero-lead{
  margin-top: 10px;
  font-size: 15px;
  color: rgba(0,0,0,.68);
  line-height: 1.8;
}

/* ===== Section Cards (統一トーン) ===== */
body.single-town .ss-town-block,
body.single-town .ss-town-price{
  margin: 22px 0;
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 26px rgba(0,0,0,.05);
}

/* custom_h2の見え方を揃える（既存トーンに寄せる） */
body.single-town .custom_h2{
  margin: 0 0 14px;
}

/* ===== Price Cards ===== */
.ss-town-price-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 14px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.ss-town-price-cards li{
  padding: 14px 14px;
  border-radius: 14px;
  background: #f7f7f7;
  border: 1px solid rgba(0,0,0,.06);
}
.ss-town-price-cards span{
  display:block;
  font-size: 12px;
  color: rgba(0,0,0,.65);
}
.ss-town-price-cards strong{
  display:block;
  margin-top: 4px;
  font-size: 20px;
  letter-spacing: .2px;
}

/* 免責 */
body.single-town .ss-town-price__note,
body.single-town .ss-ai-disclaimer{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(0,0,0,.60);
  line-height: 1.8;
}

/* シミュ導線ボタン（黒ボタンで統一） */
body.single-town .ss-town-link{
  display: inline-block;
  margin-top: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #111;
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
  transition: .2s ease;
}
body.single-town .ss-town-link:hover{
  transform: translateY(-1px);
  opacity: .9;
}

/* 同区町名一覧（カードリンク） */
body.single-town .ss-town-list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 14px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
body.single-town .ss-town-list a{
  display: block;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fafafa;
  font-weight: 800;
  text-decoration: none;
  transition: .15s ease;
}
body.single-town .ss-town-list a:hover{
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* LINE CTA（既存の緑ボタンと揃える） */
body.single-town a.ss-ai-line-btn{
  display: inline-block;
  padding: 16px 26px;
  border-radius: 999px;
  background: #06C755;
  color: #fff !important;
  font-weight: 900;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(6,199,85,.35);
  transition: .2s ease;
}
body.single-town a.ss-ai-line-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(6,199,85,.45);
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .town-hero-title{ font-size: 24px; }
  .ss-town-price-cards,
  body.single-town .ss-town-list{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px){
  .town-hero{ padding: 28px 0 18px; }
  .town-hero-title{ font-size: 22px; }
  body.single-town .ss-town-block,
  body.single-town .ss-town-price{
    padding: 16px;
    border-radius: 14px;
  }
  .ss-town-price-cards,
  body.single-town .ss-town-list{
    grid-template-columns: 1fr;
  }
}
.sakasumu-prop-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:12px;
}
@media (max-width: 960px){
  .sakasumu-prop-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 600px){
  .sakasumu-prop-grid{grid-template-columns:1fr;}
}
.sakasumu-prop-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.sakasumu-prop-link{display:block; text-decoration:none;}
.sakasumu-prop-thumb img{width:100%; height:auto; display:block;}
.sakasumu-prop-noimg{height:160px; background:rgba(0,0,0,.06);}
.sakasumu-prop-body{padding:12px;}
.sakasumu-prop-title{margin:0 0 6px;}
.sakasumu-prop-meta{font-size:.9em; opacity:.85;}
.sakasumu-town-list{
  columns:3;
  column-gap:24px;
  padding-left:18px;
}
@media(max-width:960px){.sakasumu-town-list{columns:2;}}
@media(max-width:600px){.sakasumu-town-list{columns:1;}}
.sakasumu-town-list li{break-inside:avoid; margin:0 0 6px;}
/* MLIT 相場カード */
.ss-mlit-card{
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #e5e5e5;
  background: #fff;
  border-radius: 10px;
}
.ss-mlit-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.ss-mlit-title{ margin:0; }
.ss-mlit-badge{
  display:inline-block;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid #ddd;
  white-space: nowrap;
}
.ss-mlit-badge--town{ }
.ss-mlit-badge--ward{ opacity:.9; }
.ss-mlit-badge--none{ opacity:.6; }

.ss-mlit-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin: 10px 0 12px;
}
@media (max-width: 640px){
  .ss-mlit-grid{ grid-template-columns: 1fr; }
}
.ss-mlit-item{
  padding: 10px 12px;
  border: 1px solid #eee;
  border-radius: 10px;
}
.ss-mlit-k{ font-size: 12px; opacity:.7; }
.ss-mlit-v{ font-size: 18px; font-weight: 700; margin-top: 4px; }

.ss-mlit-note{
  margin: 0 0 6px;
  font-size: 13px;
  opacity: .9;
}
.ss-mlit-updated{
  margin: 0 0 12px;
  font-size: 12px;
  opacity: .7;
}

.ss-mlit-cta{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ss-mlit-btn{
  display:inline-block;
  text-align:center;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
  text-decoration:none;
}
.ss-mlit-cta-sub{
  font-size:12px;
  opacity:.7;
}



/* --- MLIT cards: note / polish --- */
.ss-mlit__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.ss-mlit__title{
  font-weight:700;
}

.ss-mlit-note{
  margin:10px 0 0;
  font-size:13px;
  line-height:1.6;
  opacity:.9;
}

.ss-mlit__cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}

@media (max-width: 640px){
  .ss-mlit__cards{
    grid-template-columns: 1fr;
  }
}

/* badge tweaks */
.ss-mlit-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 10px;
  font-size:12px;
  border-radius:999px;
  white-space:nowrap;
}


/* ============================================================
 * MLIT（公式データ）表示（重複対策 v5）
 * ============================================================ */
.ss-mlit-official{
  margin: 18px 0 26px;
  padding: 18px 18px 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
}
.ss-mlit-official__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}
.ss-mlit-official__title{
  font-weight: 700;
  letter-spacing: .02em;
}
.ss-mlit-official__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 700px){
  .ss-mlit-official__grid{ grid-template-columns: 1fr; }
}
.ss-mlit-metric{
  padding: 12px 12px 10px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  background: rgba(0,0,0,.02);
}
.ss-mlit-metric__label{
  font-size: 12px;
  opacity: .75;
  margin-bottom: 4px;
}
.ss-mlit-metric__value{
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.ss-mlit-official__foot{
  display:flex;
  flex-wrap:wrap;
  gap: 8px 14px;
  margin-top: 12px;
  font-size: 12px;
  opacity: .85;
}


/* MLIT official: status line + scope badge colors */
.ss-mlit-official__status{
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.7;
  opacity: .9;
}

.ss-mlit-badge--town{
  background: rgba(6,199,85,.10);
  border-color: rgba(6,199,85,.35);
}
.ss-mlit-badge--ward{
  background: rgba(255,193,7,.12);
  border-color: rgba(255,193,7,.40);
}
.ss-mlit-badge--none{
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.12);
  opacity: .85;
}


/* =================================
  Readability upgrades (Typography + TOC)
  - 既存の構造( ss-town-block / ss-town-price / custom_h2 )は維持したまま、
    “黒い文章の塊”に見えないように余白と装飾を追加
================================= */

body.single-town .p-entry__body{
  padding-bottom: 26px;
  font-size: 15px;
  line-height: 1.95;
  color: rgba(0,0,0,.86);
}

/* 本文の段落/リストの余白 */
body.single-town .p-entry__body p{ margin: 0 0 12px; }
body.single-town .p-entry__body ul,
body.single-town .p-entry__body ol{
  margin: 8px 0 14px 1.2em;
  padding: 0;
}
body.single-town .p-entry__body li{ margin: 6px 0; }

/* リンクを見やすく（下線 + hover） */
body.single-town .p-entry__body a{
  color: #0f172a;
  text-decoration: none;
  font-weight: 700;
}
body.single-town .p-entry__body a:hover{
  opacity: .92;
  background: linear-gradient(transparent 70%, rgba(17,24,39,.10) 0);
}

/* 強調は “うっすらマーカー” */
body.single-town .p-entry__body strong{
  font-weight: 900;
  background: linear-gradient(transparent 62%, rgba(255,230,0,.32) 0);
  padding: 0 2px;
}

/* 見出し（custom_h2）を “見出しっぽく” */
body.single-town .custom_h2{
  font-size: 18px;
  line-height: 1.45;
  font-weight: 900;
  letter-spacing: .01em;
  padding-left: 10px;
  border-left: 4px solid rgba(0,0,0,.85);
}
body.single-town .custom_h2 + p{ margin-top: 4px; }

/* 目次（TOC） */
body.single-town .ss-town-toc{
  margin: 16px 0 18px;
  padding: 14px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 26px rgba(0,0,0,.05);
}
body.single-town .ss-town-toc__title{
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .02em;
}
body.single-town .ss-town-toc__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}
body.single-town .ss-town-toc__list a{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7f7f7;
  border: 1px solid rgba(0,0,0,.06);
  text-decoration: none;
  font-weight: 800;
}
body.single-town .ss-town-toc__list a:hover{
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* アンカーずれ対策（固定ヘッダがある場合に便利） */
body.single-town .ss-anchor{ scroll-margin-top: 80px; }
body.single-town section[id]{ scroll-margin-top: 80px; }

@media (max-width: 700px){
  body.single-town .ss-town-toc__list{ grid-template-columns: 1fr; }
}

/* ========== 町名一覧（区ごと） ========== */
.ss-town-index{ margin: 16px 0; }

.ss-town-index__lead{
  padding: 14px 16px;
  border: 1px solid var(--ss-line, #e5e7eb);
  border-radius: var(--ss-radius, 16px);
  background: var(--ss-card, #fff);
}

.ss-town-index__h2{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 900;
  color: var(--ss-text, #111827);
  letter-spacing: -0.01em;
}

.ss-town-index__sub{
  margin: 0;
  color: var(--ss-muted, #6b7280);
  font-size: 13px;
  line-height: 1.7;
}

.ss-town-index__ward{
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--ss-line, #e5e7eb);
  border-radius: var(--ss-radius, 16px);
  background: var(--ss-card, #fff);
}

.ss-town-index__h3{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
  color: var(--ss-text, #111827);
}

.ss-town-index__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}

@media (min-width: 900px){
  .ss-town-index__grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

.ss-town-index__item{
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #eef2f7;
  background: #fafafa;
  color: var(--ss-text, #111827);
  text-decoration: none; /* underline無し */
  font-weight: 800;
  font-size: 13px;
  line-height: 1.4;
}

.ss-town-index__item:hover{
  background: #ffffff;
  border-color: var(--ss-line, #e5e7eb);
}

.ss-town-index__item.is-draft{
  color: var(--ss-muted, #6b7280);
  background: #f3f4f6;
}

.ss-town-index__item small{
  font-weight: 800;
  font-size: 11px;
  opacity: .85;
}


/* ============================================================
 * Town Index（町名一覧）: 区別表示 + ジャンプ
 * ============================================================ */
.ss-town-index__nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.ss-town-index__navlink{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--ss-line, #e5e7eb);
  background: rgba(0,0,0,.02);
  color: var(--ss-text, #111827);
  text-decoration:none;
  font-size:12px;
  font-weight:700;
}
.ss-town-index__navlink:hover{
  background: rgba(0,0,0,.04);
}

.ss-town-index__wardtitle{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
  color: var(--ss-text, #111827);
}

.ss-town-index__list{
  columns: 3;
  column-gap: 22px;
  padding-left: 18px;
  margin: 0;
}
@media (max-width: 960px){ .ss-town-index__list{ columns: 2; } }
@media (max-width: 600px){ .ss-town-index__list{ columns: 1; } }

.ss-town-index__item{ break-inside: avoid; margin: 0 0 6px; }

.ss-town-index__link{
  color: var(--ss-text, #111827);
  text-decoration: none;
}
.ss-town-index__link:hover{ text-decoration: underline; }

.ss-town-index__nolink{
  color: var(--ss-muted, #6b7280);
}



/* ============================================================
 * 町名一覧（/sakai-towns/）：ボタン枠＋横並び（公開=リンク / 下書き=テキスト）
 * ============================================================ */

/* 余白リセット（テーマ側のulスタイルを打ち消し） */
.ss-town-index__list{
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobile */
  gap: 10px;
}

@media (min-width: 768px){
  .ss-town-index__list{
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* tablet */
  }
}
@media (min-width: 1200px){
  .ss-town-index__list{
    grid-template-columns: repeat(6, minmax(0, 1fr)); /* desktop */
  }
}

.ss-town-index__item{
  margin: 0; /* liの余白が入るテーマがあるため */
}

/* ボタン（pill） */
.ss-town-index__link,
.ss-town-index__nolink{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  min-height: 40px;
  padding: 10px 10px;

  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;

  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: #111827;

  text-decoration: none !important; /* underline無し */
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* hover（リンクのみ） */
.ss-town-index__link:hover{
  background: #111827;
  color: #fff;
  border-color: #111827;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
}

/* 下書き（リンクなし） */
.ss-town-index__nolink{
  background: #f3f4f6;
  color: #6b7280;
  border-style: dashed;
  box-shadow: none;
}

/* 区ジャンプもボタン化（任意） */
.ss-town-index__nav{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.ss-town-index__navlink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fafafa;
  color: #111827;
  font-weight: 800;
  font-size: 12px;
  text-decoration: none !important;
}
.ss-town-index__navlink:hover{
  background: #fff;
  border-color: #d1d5db;
}

/* 区見出し */
.ss-town-index__wardtitle{
  margin: 18px 0 8px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.4;
}