/* タワマン本音「夜景の資料館」共通デザインシステム（2026-08-18）
   prefix: --tw- / .tw-  ※他サイトのトークン名・クラス名は使わない（サイト間指紋の禁止）
   使い方: /db/ 全ページ・WP子テーマの両方から同じ語彙で組む */

:root {
  --tw-night: #0b1526;
  --tw-night-2: #132540;
  --tw-night-3: #1c3358;
  --tw-gold: #d8a94e;
  --tw-gold-soft: #f1d9a0;
  --tw-paper: #f7f3ea;
  --tw-paper-2: #efe8d9;
  --tw-line: #dcd3c0;
  --tw-ink: #1b2230;
  --tw-muted: #5f6b7a;
  --tw-faint: #8b95a3;
  --tw-h60: #7fb2e5;
  --tw-h100: #4d8fd0;
  --tw-h150: #d8a94e;
  --tw-h200: #e0653a;
  --tw-focus: #2f6fae;
  --tw-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Hiragino Sans", serif;
  --tw-sans: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", sans-serif;
  --tw-radius: 10px;
  --tw-radius-sm: 6px;
  --tw-shadow: 0 14px 40px rgba(11, 21, 38, .18);
  --tw-shadow-sm: 0 2px 8px rgba(11, 21, 38, .10);
  --tw-width: 1240px;
  --tw-tap: 44px;
}

/* ---------- ベース ---------- */
.tw-body { margin: 0; background: var(--tw-paper); color: var(--tw-ink); font-family: var(--tw-sans); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.tw-body * { box-sizing: border-box; }
.tw-body a { color: var(--tw-night-3); text-decoration-color: rgba(28, 51, 88, .35); text-underline-offset: .15em; }
.tw-body a:hover { color: var(--tw-night); text-decoration-color: var(--tw-gold); }
.tw-body :focus-visible { outline: 2px solid var(--tw-focus); outline-offset: 2px; }
.tw-num { font-variant-numeric: tabular-nums; }
.tw-serif { font-family: var(--tw-serif); }
.tw-wrap { max-width: var(--tw-width); margin: 0 auto; padding: 0 20px; }
.tw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 夜の帯（ヘッダー・ヒーロー） ---------- */
.tw-band { position: relative; background: linear-gradient(180deg, var(--tw-night) 0%, var(--tw-night-2) 70%, var(--tw-night-3) 100%); color: #f4efe3; overflow: hidden; }
.tw-band a { color: #f4efe3; text-decoration: none; }
.tw-band a:hover { color: var(--tw-gold-soft); }
.tw-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--tw-gold) 30%, var(--tw-gold) 70%, transparent); opacity: .85; }
.tw-band .tw-skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; }
.tw-band-inner { position: relative; z-index: 1; }

/* ヘッダー行（サイト名＋ナビ） */
.tw-nav { display: flex; align-items: center; gap: 18px; min-height: 56px; padding: 6px 0; }
.tw-brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--tw-serif); font-size: 18px; letter-spacing: .06em; font-weight: 700; }
.tw-brand .tw-mark { width: 26px; height: 26px; border: 1.5px solid var(--tw-gold); border-radius: 6px; display: inline-grid; place-items: center; color: var(--tw-gold); font-family: var(--tw-serif); font-size: 15px; line-height: 1; }
.tw-nav-links { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.tw-nav-links a { padding: 8px 12px; border-radius: var(--tw-radius-sm); font-size: 14px; min-height: var(--tw-tap); display: inline-flex; align-items: center; }
.tw-nav-links a[aria-current="page"], .tw-nav-links a:hover { background: rgba(216, 169, 78, .14); color: var(--tw-gold-soft); }

/* ヒーロー文字 */
.tw-hero { padding: 28px 0 44px; position: relative; }
.tw-hero::before { content: ""; position: absolute; left: -60px; right: 30%; top: -24px; bottom: -30px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 22% 55%, rgba(11, 21, 38, .92) 0%, rgba(11, 21, 38, .72) 42%, rgba(11, 21, 38, 0) 78%); }
.tw-hero h1, .tw-hero .tw-h1 { font-family: var(--tw-serif); font-weight: 700; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.35; margin: 0 0 10px; letter-spacing: .02em; text-shadow: 0 2px 18px rgba(11, 21, 38, .6); }
.tw-hero p { margin: 0 0 16px; color: #d9d2c2; max-width: 46em; }
.tw-eyebrow { display: inline-block; font-size: 12px; letter-spacing: .18em; color: var(--tw-gold); border-bottom: 1px solid rgba(216, 169, 78, .5); padding-bottom: 2px; margin-bottom: 12px; }
.tw-crumbs { font-size: 13px; color: #cfc6b3; margin: 0 0 8px; }
.tw-crumbs a { color: #cfc6b3; }
.tw-crumbs span { margin: 0 6px; color: var(--tw-gold); }

/* 数字の帯 */
.tw-stats { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 8px; }
.tw-stat { display: flex; flex-direction: column; }
.tw-stat b { font-family: var(--tw-serif); font-size: 26px; line-height: 1.1; color: var(--tw-gold-soft); font-variant-numeric: tabular-nums; }
.tw-stat span { font-size: 12px; color: #cfc6b3; letter-spacing: .06em; }
.tw-progress { height: 6px; background: rgba(255, 255, 255, .12); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.tw-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--tw-gold), var(--tw-gold-soft)); }

/* ---------- ボタン・チップ・バッジ ---------- */
.tw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tw-tap); padding: 0 18px; border-radius: var(--tw-radius-sm); font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .15s ease, color .15s ease, transform .1s ease; }
.tw-btn:active { transform: translateY(1px); }
.tw-btn-gold, .tw-body a.tw-btn-gold { background: var(--tw-gold); color: var(--tw-night); }
.tw-btn-gold:hover, .tw-body a.tw-btn-gold:hover { background: var(--tw-gold-soft); color: var(--tw-night); }
.tw-btn-ghost, .tw-body a.tw-btn-ghost { background: rgba(255, 255, 255, .06); color: #f4efe3; border-color: rgba(241, 217, 160, .45); }
.tw-btn-ghost:hover, .tw-body a.tw-btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.tw-btn-night, .tw-body a.tw-btn-night { background: var(--tw-night-2); color: #f4efe3; }
.tw-btn-night:hover, .tw-body a.tw-btn-night:hover { background: var(--tw-night-3); color: #fff; }
.tw-btn-line, .tw-body a.tw-btn-line { background: #fff; color: var(--tw-night-2); border-color: var(--tw-line); }
.tw-btn-line:hover, .tw-body a.tw-btn-line:hover { border-color: var(--tw-gold); }
.tw-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--tw-line); font-size: 13px; color: var(--tw-ink); }
.tw-chip[aria-pressed="true"], .tw-chip.is-on { background: var(--tw-night-2); color: #f4efe3; border-color: var(--tw-night-2); }
.tw-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; line-height: 1.5; letter-spacing: .02em; border: 1px solid var(--tw-line); background: var(--tw-paper-2); color: var(--tw-muted); white-space: nowrap; }
.tw-badge-official { background: #eaf3ea; border-color: #bcd6bf; color: #23613a; }
.tw-badge-public { background: #e9f0f8; border-color: #bccde3; color: #24466f; }
.tw-badge-pending { background: #fbf1df; border-color: #ecd6a6; color: #7a5410; }
.tw-badge-gold { background: rgba(216, 169, 78, .18); border-color: var(--tw-gold); color: #6d5013; }

/* 高さバッジ（地図凡例と共通） */
.tw-hdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 6px; }
.tw-h-60 { background: var(--tw-h60); } .tw-h-100 { background: var(--tw-h100); } .tw-h-150 { background: var(--tw-h150); } .tw-h-200 { background: var(--tw-h200); }

/* ---------- 紙（コンテンツ） ---------- */
.tw-section { padding: 36px 0 8px; }
.tw-section h2, .tw-h2 { font-family: var(--tw-serif); font-size: 22px; letter-spacing: .04em; margin: 0 0 14px; padding-left: 14px; border-left: 3px solid var(--tw-gold); line-height: 1.3; }
.tw-section h2 small, .tw-h2 small { font-family: var(--tw-sans); font-size: 13px; color: var(--tw-muted); margin-left: 10px; font-weight: 400; }
.tw-lead { color: var(--tw-muted); margin: -4px 0 18px; }
.tw-card { background: #fff; border: 1px solid var(--tw-line); border-radius: var(--tw-radius); box-shadow: var(--tw-shadow-sm); }
.tw-panel { background: #fff; border: 1px solid var(--tw-line); border-radius: var(--tw-radius); padding: 18px 20px; }
.tw-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tw-grid-3 { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tw-note { font-size: 13px; color: var(--tw-muted); }
.tw-hr { border: 0; border-top: 1px solid var(--tw-line); margin: 24px 0; }

/* 棟カード */
.tw-tower { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 14px 16px; text-decoration: none; color: inherit; position: relative; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.tw-tower:hover { transform: translateY(-2px); box-shadow: var(--tw-shadow); border-color: var(--tw-gold); }
.tw-tower .tw-glyph { align-self: end; }
.tw-tower h3, .tw-tower .tw-name { font-family: var(--tw-serif); font-size: 16px; margin: 0 0 2px; line-height: 1.4; color: var(--tw-night); }
.tw-tower .tw-name a { color: inherit; text-decoration: none; }
.tw-tower .tw-name a::after { content: ""; position: absolute; inset: 0; }
.tw-tower .tw-place { font-size: 12.5px; color: var(--tw-muted); margin: 0 0 6px; }
.tw-tower .tw-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.tw-tower .tw-facts b { font-family: var(--tw-serif); font-size: 15px; font-variant-numeric: tabular-nums; }
.tw-tower .tw-facts small { color: var(--tw-faint); margin-left: 2px; }
.tw-tower .tw-src { position: absolute; top: 12px; right: 12px; }
.tw-unnamed { color: var(--tw-muted); font-weight: 400; }

/* 都市カード */
.tw-city, .tw-body a.tw-city { display: block; text-decoration: none; color: #f4efe3; background: var(--tw-night); border-radius: var(--tw-radius); overflow: hidden; border: 1px solid rgba(216, 169, 78, .35); position: relative; min-height: 150px; box-shadow: var(--tw-shadow-sm); transition: transform .12s ease, box-shadow .12s ease; }
.tw-city:hover { transform: translateY(-2px); box-shadow: var(--tw-shadow); }
.tw-city .tw-skyline { position: absolute; inset: 0; width: 100%; height: 100%; }
.tw-city .tw-city-txt { position: relative; z-index: 1; padding: 14px 16px; }
.tw-city .tw-city-name { font-family: var(--tw-serif); font-size: 18px; margin: 0; color: #f4efe3; text-shadow: 0 1px 10px rgba(11,21,38,.9); }
.tw-city .tw-city-meta { font-size: 12.5px; color: #cfc6b3; margin: 2px 0 0; text-shadow: 0 1px 8px rgba(11,21,38,.9); }
.tw-city .tw-city-meta b { color: var(--tw-gold-soft); font-family: var(--tw-serif); font-size: 15px; }

/* ファクトグリッド（棟ページ） */
.tw-factgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tw-fact { background: #fff; border: 1px solid var(--tw-line); border-radius: var(--tw-radius); padding: 14px 16px; }
.tw-fact dt { font-size: 12px; color: var(--tw-muted); letter-spacing: .06em; margin: 0 0 4px; }
.tw-fact dd { margin: 0; font-family: var(--tw-serif); font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tw-fact dd small { font-family: var(--tw-sans); font-size: 12px; color: var(--tw-faint); margin-left: 4px; }
.tw-fact.is-unknown dd { font-family: var(--tw-sans); font-size: 15px; color: var(--tw-faint); }

/* 表 */
.tw-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
.tw-table th, .tw-table td { padding: 10px 12px; border-bottom: 1px solid var(--tw-line); text-align: left; vertical-align: top; }
.tw-table th { background: var(--tw-paper-2); font-weight: 700; font-size: 12.5px; letter-spacing: .04em; color: var(--tw-muted); position: sticky; top: 0; }
.tw-table td.tw-num, .tw-table th.tw-num { text-align: right; }
.tw-table tr:hover td { background: rgba(216, 169, 78, .07); }

/* 入力 */
.tw-input, .tw-select { min-height: var(--tw-tap); border: 1px solid var(--tw-line); border-radius: var(--tw-radius-sm); background: #fff; padding: 0 12px; font: inherit; color: var(--tw-ink); width: 100%; }
.tw-input:focus, .tw-select:focus { border-color: var(--tw-gold); box-shadow: 0 0 0 3px rgba(216, 169, 78, .22); outline: none; }
.tw-label { display: block; font-size: 12px; color: var(--tw-muted); letter-spacing: .06em; margin-bottom: 4px; }

/* フッター */
.tw-footer { margin-top: 48px; background: var(--tw-night); color: #cfc6b3; font-size: 13px; padding: 28px 0 36px; }
.tw-footer a { color: #f4efe3; }
.tw-footer .tw-footer-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.tw-footer .tw-brand { color: var(--tw-gold-soft); }

/* ---------- レスポンシブ ---------- */
@media (max-width: 720px) {
  .tw-body { font-size: 14.5px; }
  .tw-wrap { padding: 0 14px; }
  .tw-nav { gap: 8px; }
  .tw-nav-links a { padding: 8px 9px; font-size: 13px; }
  .tw-hero { padding: 18px 0 30px; }
  .tw-stat b { font-size: 21px; }
  .tw-grid-3 { grid-template-columns: 1fr; }
  .tw-fact dd { font-size: 20px; }
  .tw-table { font-size: 13px; }
  .tw-table th, .tw-table td { padding: 8px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .tw-tower, .tw-city, .tw-btn { transition: none; }
}

/* 棟ページ・市区ページ（2026-08-18 追記・既存セレクタは変更していない） */
.tw-map { height: 340px; border-radius: var(--tw-radius-sm); border: 1px solid var(--tw-line); background: var(--tw-paper-2); }
.tw-map .leaflet-container { border-radius: var(--tw-radius-sm); }
.tw-scroll { overflow-x: auto; padding: 0; }
.tw-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.tw-srclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.tw-srclist li { padding-left: 14px; border-left: 3px solid var(--tw-line); }
.tw-srclist b { font-family: var(--tw-serif); margin-right: 6px; }
.tw-place .tw-badge { margin-left: 8px; }
.tw-bars { display: grid; gap: 8px; }
.tw-bar { display: grid; grid-template-columns: 92px 1fr 56px; align-items: center; gap: 10px; font-size: 13px; }
.tw-bar-track { display: block; height: 12px; background: var(--tw-paper-2); border-radius: 999px; overflow: hidden; }
.tw-bar-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--tw-night-3), var(--tw-gold)); }
.tw-bar-num { text-align: right; color: var(--tw-muted); }
.tw-hero h1 small { display: block; font-family: var(--tw-sans); font-size: 13px; letter-spacing: .08em; color: #cfc6b3; margin-top: 4px; }
@media (max-width: 720px) {
  .tw-map { height: 260px; }
  .tw-bar { grid-template-columns: 76px 1fr 46px; font-size: 12.5px; }
}