/* atlas SEO 静的ページ専用 CSS（JS 不使用・軽量）
   色トークンは tpl_head.html から色だけを写した（インラインCSSは使い回さない）。 */
:root{
  --ground:#f4f6f9; --surface:#ffffff; --ink:#1b1d21; --ink-3:#5b6577;
  --rule:#dde3ec; --navy:#10305c; --navy-mid:#1b4c8a; --orange:#f2870d;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Meiryo,"MS Pゴシック","Hiragino Kaku Gothic Pro",sans-serif;
  line-height:1.7; font-size:16px;
  overflow-x:hidden; /* スマホ幅で横スクロールを出さない保険 */
}
table{max-width:100%}
td, th{word-break:break-word}
.wrap{max-width:1040px; margin:0 auto; padding:0 16px}
a{color:var(--navy-mid)}
a:hover{color:var(--orange)}
img{max-width:100%; display:block}

/* ---- header ---- */
.seo-header{background:var(--surface); border-bottom:1px solid var(--rule)}
.seo-headerin{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px}
.seo-brand{display:flex; align-items:center; gap:8px; text-decoration:none}
.seo-brand img{height:28px; width:auto}
.seo-brand span{color:var(--ink-3); font-size:13px}
.seo-cta{
  display:inline-block; background:var(--navy); color:#fff; text-decoration:none;
  padding:9px 16px; border-radius:6px; font-size:14px; white-space:nowrap;
}
.seo-cta:hover{background:var(--navy-mid); color:#fff}

/* ---- breadcrumb ---- */
.crumb{font-size:13px; color:var(--ink-3); padding:12px 16px 0}
.crumb ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px}
.crumb li:not(:last-child)::after{content:"›"; margin-left:4px; color:var(--ink-3)}
.crumb a{color:var(--ink-3); text-decoration:none}
.crumb a:hover{color:var(--navy-mid)}

/* ---- main ---- */
main{padding:20px 16px 48px}
h1{font-size:22px; line-height:1.4; margin:4px 0 14px; color:var(--navy)}
h2{font-size:17px; margin:32px 0 10px; padding-top:8px; border-top:1px solid var(--rule); color:var(--navy)}
.lead{font-size:15px; color:var(--ink-3); margin:0 0 18px}

/* ---- summary table ---- */
.summary{width:100%; border-collapse:collapse; margin:0 0 20px; font-size:14px; background:var(--surface); border:1px solid var(--rule)}
.summary th,.summary td{padding:9px 12px; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top}
.summary th{width:38%; color:var(--ink-3); font-weight:500; background:#f8f9fb}
.summary tr:last-child th,.summary tr:last-child td{border-bottom:none}

/* ---- property cards ---- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin:0 0 12px}
.card{background:var(--surface); border:1px solid var(--rule); border-radius:8px; overflow:hidden; text-decoration:none; color:var(--ink); display:flex; flex-direction:column}
.card:hover{border-color:var(--navy-mid)}
.card img{width:100%; height:160px; object-fit:cover; background:#e8ebf0}
.card .noimg{width:100%; height:160px; background:#e8ebf0; display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:13px}
.card-body{padding:10px 12px 14px; flex:1}
.card-price{font-size:17px; font-weight:700; color:var(--navy)}
.card-name{font-size:13px; color:var(--ink-3); margin:2px 0 8px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.card-meta{font-size:12.5px; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:4px 10px}
.more-link{display:inline-block; margin:6px 0 20px; font-size:14px}

/* ---- risk flags ---- */
.rflags{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px}
.rflag{display:inline-block; padding:6px 12px; border-radius:5px; font-size:13px; font-weight:700}
.rflag.warn{background:#fff3d6; color:#8a5a00}
.rflag.stop{background:#fde3e3; color:#a11212}

/* ---- buildable ---- */
.buildbox{background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:16px; margin:0 0 20px}
.buildbox p{margin:0 0 10px; font-size:14px}
.buse-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin:10px 0}
.buse{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:7px 10px; border-radius:5px; font-size:13px; border:1px solid var(--rule)}
.buse.ok{background:#eaf6ee; border-color:#bfe4c9}
.buse.cond{background:#fff8e1; border-color:#f0dfa0}
.buse.no{background:#f2f3f5; color:var(--ink-3)}
.buse.unk{background:#f2f3f5; color:var(--ink-3)}
.buse .mk{font-weight:700}
.alertbox{padding:12px 14px; border-radius:6px; font-size:14px; margin:0 0 12px}
.alertbox.warn{background:#fff3d6; color:#5c3d00}
.alertbox.stop{background:#fde3e3; color:#7a0d0d}
.zonelist{margin:0; padding-left:0; list-style:none}
.zonelist li{padding:10px 0; border-bottom:1px solid var(--rule)}
.zonelist li:last-child{border-bottom:none}
.zonelist .zn{font-weight:700; margin-right:8px}
.zonelist .zc{color:var(--ink-3); font-size:13.5px}
.zn-note{color:var(--ink-3); font-size:13px; margin:2px 0 0}

/* ---- risk-check summary (city page #5) ---- */
.checklist{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:0 0 20px}
.checkitem{background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:10px 12px; font-size:13.5px}
.checkitem b{display:block; font-size:20px; color:var(--navy)}

/* ---- photos (property detail) ---- */
.photogrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin:0 0 20px}
.photogrid img{width:100%; height:120px; object-fit:cover; border-radius:5px; border:1px solid var(--rule)}

/* ---- internal links ---- */
.linklist{display:flex; flex-wrap:wrap; gap:8px 16px; font-size:14px; margin:0}
.linklist a{white-space:nowrap}

/* ---- ATLAS Pro 導線（事業用地ページの本文末尾・常設）----
   色は atlas 本体の .toolpro/.probiz と同じ（濃紺＋金の縁）。新しい配色は持ち込まない */
.probox{margin:26px 0 4px; background:var(--navy); color:#fff; border-radius:8px;
  border-top:3px solid #b8873d; text-align:center}
.probox .pb-in{padding:26px 24px}
.probox .pb-logo{display:block; width:170px; max-width:55%; height:auto; margin:0 auto 14px}
.probox h3{margin:0 0 8px; font-size:17px; font-weight:700; line-height:1.5; color:#fff}
.probox p{margin:0 auto 16px; max-width:560px; font-size:14px; line-height:1.8; color:#d8e2f0}
/* 宅建業法まわりの注記。本文より一段落とすが、読めない濃さにはしない */
.probox p.pb-note{margin:14px auto 0; max-width:560px; font-size:12px; line-height:1.7; color:#9fb0c8}
.probox .pb-btns{display:flex; flex-direction:column; align-items:center; gap:10px}
.probox .btn{display:inline-block; background:#b8873d; color:#fff; text-decoration:none;
  font-size:14px; font-weight:700; padding:12px 26px; border-radius:6px}
.probox .btn:hover{background:#a2762f; color:#fff}
.probox .pb-sub{color:#c9d6e8; font-size:12.5px; text-decoration:underline}
.probox .pb-sub:hover{color:#fff}

/* ---- town compare table (tsmc) ---- */
.townlinks{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:0 0 20px}
.towncard{background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:16px}
.towncard h3{margin:0 0 8px; font-size:16px; color:var(--navy)}
.towncard ul{margin:10px 0 0; padding-left:0; list-style:none; font-size:14px}
.towncard li{margin:4px 0}

/* ---- footer ---- */
.seo-footer{background:var(--surface); border-top:1px solid var(--rule); margin-top:24px}
.seo-footer .wrap{padding:20px 16px}
.seo-footer .note{font-size:12.5px; color:var(--ink-3); margin:0 0 14px}
.seo-footer .flinks{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; margin:0 0 10px}
.seo-footer .fcorp{font-size:12.5px; color:var(--ink-3)}

/* ---- disclaimer note ---- */
.geo-note{font-size:12.5px; color:var(--ink-3); margin:0 0 16px}

/* ---- 残り物件のテキストリンク ----
   カードは60件まで。それを超えた分をここで全件並べる。
   カードで出すとページが重くなるが、リンクを落とすと**どこからも辿れない物件**が出る。 */
.restlinks{list-style:none; margin:8px 0 20px; padding:0;
  columns:2; column-gap:24px; font-size:13.5px}
.restlinks li{margin:0 0 6px; break-inside:avoid; line-height:1.55}
.restlinks a{display:block; padding:3px 0; border-bottom:1px solid var(--rule)}

@media (max-width:600px){
  h1{font-size:19px}
  .restlinks{columns:1}
  .seo-brand img{height:22px}
  .card img,.card .noimg{height:140px}
}

/* ---- エリアの地図 ----
   地理院タイルを grid に並べ、物件の点を % で重ねる。**JSは使わない。**
   タイルは閲覧者のブラウザが地理院から直接読む（出典の明示だけで申請不要）。 */
.areamap{margin:18px 0 22px}
.areamap .tiles{position:relative; aspect-ratio:1; max-width:560px; isolation:isolate;
  border:1px solid var(--rule); border-radius:6px; overflow:hidden; background:#f2f5f9}
/* タイルは1枚多く並べ、はみ出しぶんをずらして隠す（中心をきっちり合わせるため）。
   航空写真の上に淡色地図を multiply で重ねる＝白い紙の部分が抜けて、
   地名と道路の線だけが写真の上に乗る */
.areamap .gsi{position:absolute; display:grid}
.areamap .gsi img{display:block; width:100%; height:auto}
/* 航空写真はそのままだと暗く、淡色地図の黒い文字が埋もれて地名が読めない。
   写真の上に白を薄く敷いてから地名を multiply する＝写真は残したまま字が立つ */
.areamap .tiles::before{content:''; position:absolute; inset:0; z-index:1;
  background:rgba(255,255,255,.20); pointer-events:none}
.areamap .gsi.photo img{filter:brightness(1.12) saturate(1.02)}
.areamap .gsi.label{mix-blend-mode:multiply; opacity:1; z-index:2}
.areamap .pin{z-index:3}
.areamap .pin{position:absolute; width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  border-radius:50%; background:var(--orange); border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.45)}
.areamap figcaption{font-size:12px; color:var(--ink-3); line-height:1.6; margin-top:7px;
  max-width:560px}

/* ---- エリアページの主要な数字 ----
   地図はやめた（打った目印の位置を確かめられなかった）。数字を横に並べて上部を締める。
   **枠で浮かせない**（AIっぽく見える）。上罫線で仕切るだけ。 */
.areafacts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0 28px; margin:18px 0 26px; border-top:2px solid var(--navy)}
.areafacts dt{font-size:12.5px; color:var(--ink-3); padding:13px 0 0}
.areafacts dd{margin:0 0 13px; padding:0 0 13px; border-bottom:1px solid var(--rule);
  font-size:19px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums;
  line-height:1.35}
@media (max-width:760px){
  .areafacts{grid-template-columns:1fr 1fr; gap:0 20px}
  .areafacts dd{font-size:17px}
}

}

/* 地図の目印（工場など）。物件の点とは形を変える */
.areamap .lm{position:absolute; z-index:4; width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
  background:var(--navy); border:2px solid #fff; border-radius:3px;
  box-shadow:0 1px 5px rgba(0,0,0,.5)}
.areamap .lm b{position:absolute; top:50%; transform:translateY(-50%);
  white-space:nowrap; font-size:11.5px; font-weight:700; color:#fff;
  background:rgba(16,48,92,.92); padding:3px 7px; border-radius:3px; line-height:1.3}
.areamap .lm.right b{left:18px}
.areamap .lm.left b{right:18px}

/* ---- エリア紹介ページ ----
   読み物なので**行を長くしない**。1440px の枠いっぱいに文を流すと、
   目が次の行頭に戻れず読みにくい。表とカードは広いままにする。 */
.pg-area main > h2,
.pg-area main > p,
.pg-area main > ul,
.pg-area main > .lead{max-width:46em}
.pg-area main > h2{margin:34px 0 10px; font-size:19px; color:var(--navy);
  padding-bottom:8px; border-bottom:1px solid var(--rule)}
.pg-area main > p{margin:0 0 14px; line-height:1.85}
.pg-area main > ul{margin:0 0 14px; padding-left:1.2em; line-height:1.85}
.pg-area main > ul li{margin:0 0 7px}
.pg-area .lead{font-size:15.5px; line-height:1.9; margin:0 0 4px}
.pg-area .alertbox,.pg-area .buildbox,.pg-area .zonelist{max-width:46em}

/* エリアページの主要な数字。一覧・物件詳細と同じ縦2列の表。
   値だけ少し大きく太くして、拾い読みできるようにする */
.pg-area .areafacts{max-width:46em; margin:20px 0 30px}
.pg-area .areafacts th{width:11em; white-space:nowrap}
.pg-area .areafacts td{font-size:16px; font-weight:700; color:var(--navy);
  font-variant-numeric:tabular-nums}
@media (max-width:600px){
  .pg-area .areafacts th{width:auto}
}

}

/* ---- 繁体字（台湾向け）の書体 ----
   メイリオ等の和文フォントで繁体字を組むと、日本の字形（說・爲・產 など）が混ざり、
   台湾の読者には一目で「自分向けではない」と分かる。tw ページだけ Noto Sans TC 系にする
   （build_deploy.py が zh-Hant の SPA に当てているのと同じ考え方）。 */
body.lang-tw{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}

/* フッターの「本頁以日文為準」断り書き（tw のみ）。footer_ja_authoritative が空のときは
   このdiv自体が出ないので、日本語ページの見た目には影響しない。 */
.ja-authoritative{font-size:12px; color:var(--ink-3); margin:8px 0 0}

/* ---- 市町村から探す（県ページ）----
   40行を1列に流すと縦に伸びるだけで幅が死ぬ。多列に並べ、名前と件数を左右に振る。
   黒丸は消す（リンクの一覧であって、箇条書きではない）。 */
.citylist{list-style:none; padding:0; margin:14px 0 30px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:0 28px}
.citylist li{border-bottom:1px solid var(--rule)}
.citylist a,.citylist .nolink{display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; padding:10px 3px; font-size:14px; line-height:1.5}
.citylist a{text-decoration:none}
.citylist a:hover{background:var(--surface-2)}
.citylist .nolink{color:var(--ink-4)}          /* 10件未満でページを作っていない市町村 */
.citylist .n{font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* 県ページ。本文は読み物なので行長を抑え、一覧と表は広いまま使う */
.pg-pref_category main > h2{margin:34px 0 10px; font-size:19px; color:var(--navy);
  padding-bottom:8px; border-bottom:1px solid var(--rule)}
.pg-pref_category main > .lead{max-width:46em; font-size:15.5px; line-height:1.9}
.pg-pref_category .areafacts{max-width:46em}
@media (max-width:600px){
  .citylist{grid-template-columns:1fr}
}

/* 価格が掲載中の売出価格であることの断り。表の直下に小さく置く */
.pricebasis{margin:8px 0 0; font-size:12px; line-height:1.7; color:#6b7a8d}