/* 湾岸タワマンレーダー 公開サイト v6 — 実務的なエディトリアル調（本文19px基準） */

:root {
  --ink: #18242f; --muted: #45596b;   /* 高齢の読者を想定しコントラスト強め */
  --bg: #f4f6f8; --card: #ffffff; --line: #d9e2e9;
  --navy: #14395c; --sea: #19648e; --sea-pale: #eaf3f9;
  --red: #c9463d; --red-pale: #faeceb;
  --green: #2c7a3f; --green-pale: #e8f3ea;
  --r-lg: 6px; --r-md: 4px; --r-sm: 2px;
  --shadow: 0 2px 8px rgba(20, 57, 92, .08);
  --dur: 150ms;
}

* { box-sizing: border-box; }
body { margin: 0;
       font-family: "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", "Meiryo", sans-serif;
       color: var(--ink); background: var(--bg);
       font-size: 19px; line-height: 1.85; }
a { color: #155a82; text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.site-header nav a, .chip, .btn, .btn-out, .hot-card, .tower-card, .article-card,
.town-jump a, .crumb a, .footer-cols a { text-decoration: none; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; z-index: 100; background: #fff;
                   padding: 12px 20px; border: 3px solid var(--sea); }
[id] { scroll-margin-top: 155px; }   /* 追従ヘッダー＋町域バーの高さぶん逃がす */
main { max-width: 1440px; margin: 0 auto; padding: 24px 24px 60px; }
h1 { font-size: 32px; line-height: 1.4; }
h1, h2, h3, h4, .site-header .logo .name { font-feature-settings: "palt" 1;
       letter-spacing: .02em; }
strong, td, .num, .u-price { font-variant-numeric: tabular-nums; }
.meta { color: var(--muted); font-size: 17px; }
.page-lead { color: var(--muted); margin-top: -6px; }

/* セクション見出し */
h2.sec { display: flex; align-items: center; gap: 12px; font-size: 25px;
         margin: 56px 0 22px; padding-bottom: 12px;
         border-bottom: 2px solid var(--line); }
h2.sec::before { content: ""; flex: none; width: 7px; height: 27px;
                 background: var(--sea); border-radius: var(--r-sm); }
h2.sec .h-count { margin-left: auto; font-size: 16px; font-weight: 400;
                  color: var(--muted); white-space: nowrap; }

/* パンくず */
.crumb { font-size: 15.5px; color: var(--muted); margin: 0 0 18px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb i { font-style: normal; margin: 0 7px; color: #7d8f9d; }
.crumb [aria-current] { color: var(--ink); }

/* ヘッダー（2段・中央揃え） */
.header-top { background: var(--navy); color: #cfe0ee; font-size: 15px; }
.hdr-inner { max-width: 1440px; margin: 0 auto; padding: 16px 24px;
             display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hdr-inner.slim { padding: 7px 20px; justify-content: space-between; gap: 8px; }
/* メニューはスクロールしても画面上部に追従（帯部分=header-topは流れる） */
.site-header { background: #fff; border-bottom: 1px solid var(--line);
               position: sticky; top: 0; z-index: 60;
               box-shadow: 0 1px 6px rgba(20, 57, 92, .06); }
.site-header .logo { text-decoration: none; }
.site-header .logo .name { display: block; color: var(--navy); font-weight: 800;
                           font-size: 26px; line-height: 1.3; }
.site-header .logo .tag { display: block; color: var(--muted); font-size: 15px; }
.site-header nav { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; }
.site-header nav a { color: var(--ink); text-decoration: none; font-size: 18px;
                     font-weight: 600; padding: 12px 17px;
                     transition: background var(--dur), color var(--dur); }
.site-header nav a:hover { background: var(--sea-pale); color: var(--sea); }
.site-header nav a.is-current { color: var(--navy);
                     box-shadow: inset 0 -3px 0 var(--sea); }

/* 狭幅用ハンバーガーメニュー（広幅では非表示） */
.nav-drawer { display: none; margin-left: auto; position: relative; }
.nav-drawer summary { list-style: none; cursor: pointer; user-select: none;
      display: flex; align-items: center; gap: 8px;
      font-size: 17px; font-weight: 700; color: var(--navy);
      border: 2px solid var(--line); border-radius: var(--r-md);
      padding: 10px 16px; min-height: 44px; }
.nav-drawer summary::-webkit-details-marker { display: none; }
.nav-drawer summary .bars { font-size: 20px; line-height: 1; }
.nav-drawer[open] summary { background: var(--sea-pale); border-color: var(--sea); }
.nav-drawer nav { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
      min-width: 240px; background: #fff; border: 1px solid var(--line);
      border-radius: var(--r-md); box-shadow: 0 8px 28px rgba(20, 57, 92, .18);
      display: flex; flex-direction: column; padding: 8px; }
.nav-drawer nav a { display: block; padding: 13px 18px; font-size: 18px;
      font-weight: 600; color: var(--ink); border-radius: var(--r-sm); }
.nav-drawer nav a:hover { background: var(--sea-pale); color: var(--sea); }
.nav-drawer nav a.is-current { color: var(--navy); background: var(--sea-pale); }
/* ナビが1行に収まらない幅ではハンバーガーに切替 */
@media (max-width: 1010px) {
  .site-header .main-nav { display: none; }
  .nav-drawer { display: block; }
}

/* フッター（3カラム） */
.site-footer { border-top: 3px solid var(--navy); margin-top: 68px;
               background: #fff; font-size: 17px; }
.footer-cols { max-width: 1440px; margin: 0 auto; padding: 38px 24px;
               display: flex; gap: 44px; flex-wrap: wrap; }
.footer-cols .col { flex: 1; min-width: 240px; }
.footer-cols h4 { margin: 0 0 12px; font-size: 17.5px; color: var(--navy);
                  border-bottom: 1px solid var(--line); padding-bottom: 9px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { padding: 5px 0; }
.footer-cols a { text-decoration: none; }
.footer-cols a:hover { text-decoration: underline; }
.footer-cols .about-text { color: var(--muted); font-size: 16.5px; }
.footer-bottom { border-top: 1px solid var(--line); padding: 16px 22px;
                 text-align: center; color: var(--muted); font-size: 15px; }

/* トップのビジュアルヒーロー（写真＋白抜きタイトル） */
.top-hero { position: relative; border-radius: var(--r-lg); overflow: hidden;
            border: 1px solid var(--line); background: var(--navy);
            margin-bottom: 18px; min-height: 240px; }
.top-hero img { width: 100%; height: 400px; object-fit: cover; display: block; }
.top-hero-text { position: absolute; left: 0; right: 0; bottom: 0;
                 padding: 96px 38px 28px; color: #fff;
                 background: linear-gradient(180deg, rgba(10, 25, 40, 0) 0%,
                             rgba(10, 25, 40, .78) 100%); }
.top-hero-text h1 { margin: 0 0 8px; font-size: 44px; letter-spacing: .05em;
                    color: #fff; line-height: 1.3;
                    text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
.top-hero-text p { margin: 0; font-size: 17.5px; color: rgba(255, 255, 255, .95);
                   font-variant-numeric: tabular-nums;
                   text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.hero-credit { position: absolute; top: 12px; right: 14px; font-size: 12.5px;
               color: rgba(255, 255, 255, .92); background: rgba(0, 0, 0, .42);
               border-radius: var(--r-sm); padding: 3px 10px; }
.hero-credit a { color: rgba(255, 255, 255, .92); }

/* ヒーロー（トップ・数値ストリップ） */
.hero { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
        padding: 34px 32px 30px; }
.hero h1 { margin: 0 0 2px; font-size: 32px; color: var(--navy);
           border-left: 5px solid var(--sea); padding-left: 16px; }
.hero .hero-sub { margin: 0 0 14px; padding-left: 21px; color: var(--muted);
                  font-size: 17px; font-variant-numeric: tabular-nums; }
.hero .lead { color: var(--muted); margin: 0 0 24px; max-width: 44em; font-size: 18px; }
.hero-stats { display: flex; border: 1px solid var(--line);
              border-radius: var(--r-md); overflow: hidden; background: #fff; }
.hero-stats .stat { flex: 1; min-width: 0; padding: 14px 22px;
                    border-left: 1px solid var(--line); }
.hero-stats .stat:first-child { border-left: 0; }
.hero-stats .stat span { display: block; font-size: 15.5px; color: var(--muted); }
.hero-stats .stat strong { font-size: 34px; color: var(--navy); line-height: 1.25; }
.hero-stats .stat strong small { font-size: 17px; font-weight: 600; }
.hero-stats .stat strong.hot { color: var(--red); }
.grade-bar { display: flex; height: 14px; border-radius: var(--r-sm);
             overflow: hidden; margin: 18px 0 8px; }
.grade-bar .seg { min-width: 3px; box-shadow: inset -2px 0 0 #fff; }
.grade-bar .seg.g-vcheap { background: #c9463d; }
.grade-bar .seg.g-cheap { background: #e2a09a; }
.grade-bar .seg.g-fair { background: #dfe7ed; }
.grade-bar .seg.g-exp { background: #9fb3c2; }
.grade-bar .seg.g-vexp { background: #5b6a76; }
.grade-bar-legend { margin: 0; font-size: 15.5px; color: var(--muted);
                    display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.grade-bar-legend .dot { display: inline-block; width: 14px; height: 14px;
                         border-radius: var(--r-sm); margin-right: 5px;
                         vertical-align: -2px; border: 1px solid rgba(0,0,0,.2); }
.grade-bar-legend .dot.g-vcheap { background: #c9463d; }
.grade-bar-legend .dot.g-cheap { background: #e2a09a; }
.grade-bar-legend .dot.g-fair { background: #dfe7ed; }
.grade-bar-legend .dot.g-exp { background: #9fb3c2; }
.grade-bar-legend .dot.g-vexp { background: #5b6a76; }

/* カード共通 */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.hot-card, .tower-card { display: block; background: var(--card);
            border: 1px solid var(--line); border-radius: var(--r-md);
            padding: 18px 20px; text-decoration: none; color: inherit;
            transition: box-shadow var(--dur), border-color var(--dur); }
.hot-card:hover, .tower-card:hover { box-shadow: var(--shadow); border-color: #b9cbd8; }
.hot-card h3, .tower-card h3 { margin: 0 0 6px; font-size: 20px; color: var(--sea);
                               text-decoration: underline; text-underline-offset: 3px;
                               word-break: keep-all; overflow-wrap: break-word;
                               min-height: 3.7em; /* 棟名2行分（20px×lh1.85×2）を常に確保 */ }
.card-more { display: block; margin-top: 10px; color: var(--sea);
             font-weight: 700; font-size: 16.5px; }
.count { color: var(--red); font-weight: 700; white-space: nowrap; }
.nw { white-space: nowrap; }
.tower-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }

.chip { display: inline-block; background: #fff; border: 1px solid var(--line);
        border-radius: var(--r-md); padding: 10px 24px; margin: 5px 9px 5px 0;
        text-decoration: none; font-size: 18px; color: var(--navy); font-weight: 600;
        transition: background var(--dur); }
.chip:hover { background: var(--sea-pale); }

/* 町域ジャンプバー（棟一覧・いま割安）。追従ヘッダーの直下に段積みで固定 */
.town-jump { position: sticky; top: 94px; z-index: 50;
             background: rgba(255,255,255,.96);
             border-bottom: 1px solid var(--line); padding: 9px 0; margin: 16px 0 8px;
             display: flex; gap: 4px; overflow-x: auto; }
.town-jump a { flex: none; font-size: 17px; padding: 7px 16px; text-decoration: none;
               color: var(--navy); border-radius: var(--r-md); font-weight: 600; }
.town-jump a:hover { background: var(--sea-pale); }

/* 出典・凡例 */
.src-note { font-size: 15.5px; color: var(--muted); background: #f7fafc;
            border-left: 3px solid var(--line); padding: 12px 16px; margin: 0 0 16px; }

/* 棟ページ */
.tower-head { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
.tower-head .t-icon { flex: none; width: 230px; background: #eaf3fa;
                      border-radius: var(--r-md); border: 1px solid var(--line);
                      overflow: hidden; }
.tower-head .t-icon svg, .tower-head .t-icon img { width: 100%; height: 150px;
                      display: block; object-fit: cover; }
.tower-head .t-body { flex: 1; min-width: 280px; }
.tower-head h1 { margin: 0 0 4px; }
.photo-credit { color: var(--muted); font-size: 14px; }
.stat-chips { display: flex; gap: 14px; flex-wrap: wrap; margin: 20px 0 24px; }
.chip-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
            padding: 14px 22px; text-align: center; flex: 1; min-width: 165px; }
.chip-box span { display: block; font-size: 15.5px; color: var(--muted); }
.chip-box strong { font-size: 28px; color: var(--navy); }
.chip-box strong small { font-size: 15px; font-weight: 600; }
.chip-box strong.cheap { color: var(--red); }
.chip-box .alt { display: block; font-size: 13.5px; color: var(--muted); }
.cheap { color: var(--red); }
.chart { background: var(--card); border: 1px solid var(--line);
         border-radius: var(--r-md); padding: 18px; }
.chart svg { width: 100%; height: auto; }

/* 表（分布・ランキング・定義） */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             gap: 16px; align-items: start; }  /* 表の高さを引き伸ばさない */
.def-table.overview { margin: 22px 0 6px; }
.def-table.overview th { width: 6.5em; }
.dist-table, .rank-table, .def-table { border-collapse: collapse; width: 100%;
            background: #fff; font-size: 18px; border: 1px solid var(--line); }
.dist-table th, .rank-table th { background: #eef3f7; color: #3d5165;
            font-size: 15.5px; text-align: left; padding: 11px 16px;
            border-bottom: 1px solid var(--line); white-space: nowrap; }
.dist-table td, .rank-table td { padding: 11px 16px; border-bottom: 1px solid #edf1f4;
            white-space: nowrap; }
.dist-table tbody tr:nth-child(even), .rank-table tbody tr:nth-child(even) { background: #fafcfd; }
.rank-table tbody tr:hover { background: #f2f8fc; }
.num { text-align: right; }
.rank-table td.name { white-space: normal; min-width: 12em;
                      word-break: keep-all; overflow-wrap: break-word; }
.rank-table th small { font-weight: 400; font-size: 12.5px; }
@media (max-width: 1020px) { .hide-md { display: none; } }
.rank-table .rank { color: var(--muted); }
.rank-table .price, .dist-table .price { font-weight: 700; }
.rank-table small, .dist-table small { font-size: 14px; color: var(--muted); }
.def-table th { background: #eef3f7; color: #3d5165; text-align: left;
                padding: 12px 18px; width: 9em; border-bottom: 1px solid var(--line);
                vertical-align: top; white-space: nowrap; }
.def-table td { padding: 12px 18px; border-bottom: 1px solid #edf1f4; }

/* 物件カード（1物件1行） */
.group-h { margin: 30px 0 14px; font-size: 22px; }
.unit-cards { display: flex; flex-direction: column; gap: 12px; }
.unit-card { background: var(--card); border: 1px solid var(--line);
             border-left-width: 5px; border-radius: var(--r-md);
             padding: 16px 20px; display: grid; align-items: center;
             grid-template-columns: 200px 1fr 230px;
             grid-template-areas: "judge main act"; gap: 8px 26px; }
.unit-card.b-vcheap { border-left-color: #b3372b; }
.unit-card.b-cheap  { border-left-color: #d98a2b; }
.unit-card.b-fair   { border-left-color: #c3d0da; }
.unit-card.b-exp    { border-left-color: #8ba2b5; }
.unit-card.b-vexp   { border-left-color: #4a5a67; }
.unit-card .u-judge { grid-area: judge; }
.unit-card .u-main  { grid-area: main; min-width: 0; }
.unit-card .u-act   { grid-area: act; text-align: right; }
/* 棟サムネイル付き（横断リスト用）。棟の外観写真＝自前素材のみ使用 */
.unit-card.with-thumb { grid-template-columns: 96px 200px 1fr 230px;
                        grid-template-areas: "thumb judge main act"; }
.unit-card .u-thumb { grid-area: thumb; display: block; width: 96px; height: 88px;
                      border-radius: var(--r-md); overflow: hidden;
                      background: #eaf3fa; border: 1px solid var(--line); }
.unit-card .u-thumb img, .unit-card .u-thumb svg { width: 100%; height: 100%;
                      object-fit: cover; display: block; }
/* 中間幅: ボタンは内容の下に左揃えで整列（バラけ防止） */
@media (max-width: 1150px) {
  .unit-card { grid-template-columns: 200px 1fr;
               grid-template-areas: "judge main" "judge act"; }
  .unit-card.with-thumb { grid-template-columns: 96px 200px 1fr;
               grid-template-areas: "thumb judge main" "thumb judge act"; }
  .unit-card .u-act { text-align: left; }
}
.unit-card .u-dev { color: var(--muted); font-size: 15px; font-weight: 600; margin-top: 4px; }
.unit-card .u-dev.is-cheap { color: var(--red); font-weight: 700; }
/* 価格欄は最大値（35,000万円台）が入る幅を確保し、スペックの開始位置を全カードで揃える
   （入れば同行・入らなければ折返しのばらつきを無くす） */
.unit-card .u-line1 { display: grid; grid-template-columns: 190px 1fr;
                      align-items: baseline; gap: 4px 14px; }
.unit-card .u-price { font-size: 25px; font-weight: 800; color: var(--navy); }
.unit-card .u-spec { font-size: 18px; }
.unit-card .u-bldg { font-size: 17px; margin-top: 2px;
                     word-break: keep-all; overflow-wrap: break-word; }
.unit-card .u-sub { font-size: 15.5px; color: var(--muted); margin-top: 4px;
                    display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.lnote { color: #8a6d1a; font-size: 14px; }
.dev-scale + .u-dev .bnote, .bnote { color: var(--muted); font-weight: 400; font-size: 13.5px; }
.conf-warn { margin-top: 8px; background: #fdf4e6; border: 1px solid #e3cf96;
             border-radius: var(--r-sm); padding: 6px 12px;
             color: #7a5a14; font-size: 15px; font-weight: 600; }
.btn-out { display: block; text-align: center; background: var(--sea); color: #fff;
           border-radius: var(--r-md); padding: 12px 10px; font-weight: 700;
           font-size: 17px; line-height: 1.4; transition: background var(--dur); }
/* 中間幅ではボタンが本文列いっぱいに伸びないよう幅を固定（全カード同じ大きさに） */
@media (max-width: 1150px) and (min-width: 721px) {
  .unit-card .u-act .btn-out { max-width: 280px; }
}
.btn-out:hover { background: var(--navy); }
.btn-out .u-note { display: block; font-size: 12.5px; font-weight: 400;
                   color: rgba(255,255,255,.85); }

/* 判定スケール（グラデーションバー） */
.scale { margin: 0 0 22px; }
/* 帯の色分けは判定境界（-15/-10/+10/+20% を 10/20/60/80% 位置に写像）に合わせる */
.scale-bar { height: 16px; border-radius: var(--r-sm);
             background: linear-gradient(90deg, #c9463d 0%, #c9463d 8%, #e2a09a 12%,
                         #e2a09a 18%, #dfe7ed 22%, #dfe7ed 58%, #9fb3c2 62%,
                         #9fb3c2 78%, #5b6a76 82%);
             border: 1px solid #c3d0da; }
.scale-labels { display: flex;
                font-size: 14.5px; color: var(--ink); font-weight: 600; margin-top: 4px; }
/* ラベル幅は判定境界の位置（10/20/60/80%）に一致させる */
.scale-labels span { text-align: center; }
.scale-labels span:nth-child(1) { width: 10%; text-align: left; }
.scale-labels span:nth-child(2) { width: 10%; }
.scale-labels span:nth-child(3) { width: 40%; }
.scale-labels span:nth-child(4) { width: 20%; }
.scale-labels span:nth-child(5) { width: 20%; text-align: right; }
.scale-note { margin: 4px 0 0; font-size: 15px; color: var(--muted); }
.dev-scale { position: relative; height: 12px; border-radius: var(--r-sm);
             margin-top: 8px;
             background: linear-gradient(90deg, #c9463d 0%, #c9463d 8%, #e2a09a 12%,
                         #e2a09a 18%, #dfe7ed 22%, #dfe7ed 58%, #9fb3c2 62%,
                         #9fb3c2 78%, #5b6a76 82%); }
.dev-scale .dev-dot { position: absolute; top: -4px; width: 8px; height: 20px;
                      transform: translateX(-50%); background: var(--navy);
                      border: 2px solid #fff; border-radius: 3px;
                      box-shadow: 0 1px 3px rgba(0,0,0,.35); }

.row-group { margin: 20px 0; }
.row-group summary { cursor: pointer; background: #fff; border: 1px solid var(--line);
                     border-radius: var(--r-md); padding: 14px 20px; font-weight: 700;
                     color: var(--navy); font-size: 18.5px; list-style: none;
                     display: flex; align-items: center; gap: 14px; }
.row-group summary::-webkit-details-marker { display: none; }
.row-group summary::before { content: "＋"; font-size: 22px; line-height: 1;
      width: 38px; height: 38px; flex: none; display: grid; place-items: center;
      border: 2px solid var(--sea); border-radius: var(--r-md); color: var(--sea); }
.row-group[open] summary::before { content: "−"; }
.row-group summary::after { content: "（押すと開きます）"; font-size: 15px;
      font-weight: 400; color: var(--muted); }
.row-group[open] summary::after { content: "（押すと閉じます）"; }
.row-group summary:hover { background: var(--sea-pale); }
.row-group[open] summary { margin-bottom: 14px; }

/* 判定ピル（強調は割安側。割高側も読める濃さを確保） */
.grade-pill { display: inline-block; border-radius: var(--r-sm); padding: 3px 12px;
              font-size: 15.5px; font-weight: 700; white-space: nowrap;
              border: 1px solid transparent; }
.g-vcheap { background: #c9463d; color: #fff; }
.g-cheap  { background: #fdeceb; color: #a5342c; border-color: #eec0bb; }
.g-fair   { background: #fff; color: #51606f; border-color: #b9c6d1; }
.g-exp    { background: #eef2f5; color: #4a5a67; border-color: #b9c6d1; }
.g-vexp   { background: #5b6a76; color: #fff; }

.badge { border-radius: var(--r-sm); padding: 3px 11px; font-size: 15px; font-weight: 700; }
.badge.new { background: var(--green-pale); color: var(--green); }
.badge.down { background: var(--red-pale); color: #b83c33; }
.badge.oc { background: #f0ecdf; color: #6b5c2a; }

/* 掲載終了リスト */
.gone-list { list-style: none; padding: 0; }
.gone-list li { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
                padding: 12px 18px; margin-bottom: 9px; font-size: 17px; }

/* PRカード */
.pr-card { background: #fdf8ec; border: 1px solid #e3cf96; border-left: 5px solid #cfa43a;
           border-radius: var(--r-md); padding: 22px 24px; margin-bottom: 18px; }
.pr-badge { background: #96690a; color: #fff; border-radius: var(--r-sm);
            padding: 3px 11px; font-size: 15.5px; font-weight: 700; margin-right: 9px; }
.pr-card img { max-width: 400px; width: 100%; border-radius: var(--r-md);
               display: block; margin: 12px 0; }
.btn { display: inline-block; background: var(--sea); color: #fff; border-radius: var(--r-md);
       padding: 12px 32px; text-decoration: none; font-weight: 700; font-size: 18px;
       transition: background var(--dur); }
.btn:hover { background: var(--navy); }

/* 記事カード */
.article-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.article-card { background: var(--card); border: 1px solid var(--line);
                border-radius: var(--r-md); overflow: hidden; text-decoration: none;
                color: inherit; display: flex; flex-direction: column;
                transition: box-shadow var(--dur), border-color var(--dur); }
.article-card:hover { box-shadow: var(--shadow); border-color: #b9cbd8; }
.article-card .eyecatch svg, .article-card .eyecatch img { width: 100%; height: auto; display: block; }
.article-card .body { padding: 17px 19px 20px; }
.article-card h2, .article-card h3 { margin: 10px 0 7px; font-size: 19.5px;
                  color: var(--ink); line-height: 1.55; }
.cat-badge { display: inline-block; border-radius: var(--r-sm); padding: 3px 12px;
             font-size: 15px; font-weight: 700; background: var(--sea-pale); color: var(--sea); }

/* 棟イラスト・写真 */
.card-icon { background: #eaf3fa; border-radius: var(--r-md); margin-bottom: 13px; overflow: hidden; }
.card-icon svg, .card-icon img { width: 100%; height: 150px; display: block; object-fit: cover; }
/* 縦長写真は中央でなくタワー上部寄りを見せる（胴体だけの切り抜きを避ける） */
.card-icon img, .tower-head .t-icon img { object-position: center 28%; }

/* 記事本文 */
.article-hero { max-width: 80ch; border-radius: var(--r-lg); overflow: hidden;
                margin-bottom: 22px; border: 1px solid var(--line); }
.article-hero svg, .article-hero img { width: 100%; height: auto; display: block; }
.article-body { background: var(--card); border: 1px solid var(--line);
                border-radius: var(--r-lg); padding: 34px 38px; max-width: 80ch;
                font-size: 19px; line-height: 1.95; }
.article-body h1 { margin-top: 0; font-size: 28px; }
.article-body h2 { display: flex; align-items: center; gap: 11px; font-size: 23px;
                   margin-top: 2em; padding-bottom: 10px;
                   border-bottom: 1px solid var(--line); }
.article-body h2::before { content: ""; flex: none; width: 6px; height: 24px;
                           background: var(--sea); border-radius: var(--r-sm); }
.article-body .table-wrap { overflow-x: auto; margin: 1.2em 0; }
.article-body table { border-collapse: collapse; width: 100%; font-size: 17.5px; }
.article-body th { background: var(--sea-pale); }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 10px 17px; }
.article-body code { background: #eef4f9; border-radius: var(--r-sm); padding: 1px 7px; font-size: .92em; }
.article-body pre { background: #f0f5fa; border-radius: var(--r-md); padding: 18px; overflow-x: auto; }
.article-body blockquote { border-left: 4px solid var(--line); margin: 1em 0;
                           padding: 2px 20px; color: var(--muted); }
.article-body ul, .article-body ol { padding-left: 1.5em; }
.back-link { display: inline-block; margin-top: 24px; font-size: 17.5px; }

/* 2カラムレイアウト */
.layout { display: flex; gap: 30px; align-items: flex-start; }
.layout > .content { flex: 1; min-width: 0; }
.side-nav { width: 304px; flex: none; position: sticky; top: 110px;
            max-height: calc(100vh - 126px); overflow-y: auto;
            overscroll-behavior: contain; }
.side-box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
            padding: 17px 19px; margin-bottom: 16px; }
.side-box h3 { margin: 0 0 9px; font-size: 17.5px; color: var(--navy);
               border-bottom: 1px solid var(--line); padding-bottom: 9px; }
.side-box ul { list-style: none; margin: 0; padding: 0; }
.side-box li { display: flex; justify-content: space-between; align-items: baseline;
               gap: 10px; padding: 8px 0; font-size: 17px;
               border-bottom: 1px dashed #e7eef3; }
.side-box li:last-child { border-bottom: none; }
/* 棟名はゼロ幅スペース（wbrフィルタ）の単語境界だけで折り返す。
   1文字ずつの縦積みや「ス」だけの折り返しを防ぐ */
.side-box li a { text-decoration: none; min-width: 0;
                 word-break: keep-all; overflow-wrap: break-word; }
.side-box li a:hover { text-decoration: underline; }
.side-box .meta { flex: none; font-size: 15px; }
/* 説明文つきの行（ほかのエリアも見る等）だけ、名前を潰さず説明側を省略する。
   件数（17件 など）は .clamp を付けないので絶対に切れない */
.side-box .meta.clamp { flex: 1 1 0; min-width: 0; text-align: right;
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 物件アンカーへの遷移時ハイライト */
.unit-card:target { outline: 3px solid #f0a92e; outline-offset: 2px; }

/* コラムカルーセル（トップ・大きめ表示＋左右ボタン） */
.carousel { position: relative; }
/* mandatoryだと末尾スライドのスナップ位置が可動域外になりボタンで動かなくなる */
.car-track { display: flex; gap: 18px; overflow-x: auto;
             scroll-snap-type: x proximity; padding: 4px 2px 10px;
             -webkit-overflow-scrolling: touch; }
.car-track:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.car-slide { flex: 0 0 min(660px, 86%); scroll-snap-align: start;
             background: var(--card); border: 1px solid var(--line);
             border-radius: var(--r-md); overflow: hidden;
             text-decoration: none; color: inherit;
             transition: box-shadow var(--dur), border-color var(--dur); }
.car-slide:hover { box-shadow: var(--shadow); border-color: #b9cbd8; }
.car-slide .eyecatch svg, .car-slide .eyecatch img { width: 100%; height: auto; display: block; }
.car-slide .body { padding: 16px 22px 20px; }
.car-slide h3 { margin: 10px 0 4px; font-size: 22px; line-height: 1.5; color: var(--ink); }
.car-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
           width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
           background: #fff; border: 2px solid var(--sea); color: var(--sea);
           font-size: 30px; line-height: 1; box-shadow: var(--shadow);
           transition: background var(--dur), color var(--dur); }
.car-btn:hover { background: var(--sea); color: #fff; }
.car-btn.prev { left: -14px; }
.car-btn.next { right: -14px; }

/* エリアカード（トップ・エリア一覧） */
.area-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.area-card { display: flex; flex-direction: column; background: var(--card);
             border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
             text-decoration: none; color: inherit;
             transition: box-shadow var(--dur), border-color var(--dur); }
.area-card:hover { box-shadow: var(--shadow); border-color: #b9cbd8; }
.area-card-photo { height: 172px; background: #eaf3fa; }
.area-card-photo img { width: 100%; height: 100%; object-fit: cover;
                       object-position: center 28%; display: block; }
.area-ph { width: 100%; height: 100%;
           background: linear-gradient(180deg, #dfeaf3 0%, #c9dcea 100%); }
.area-card .body { padding: 15px 20px 18px; }
.area-card h2, .area-card h3 { margin: 0 0 6px; font-size: 22px; color: var(--sea);
             text-decoration: underline; text-underline-offset: 3px; }
.area-card .area-catch { min-height: 3.7em; }  /* キャッチ2行分を確保して件数行を揃える */
.area-catch { margin: 0 0 6px; font-weight: 600; }
.area-card .meta { margin: 0; }

/* エリア個別ページ */
.area-hero { background: var(--card); border: 1px solid var(--line);
             border-radius: var(--r-lg); overflow: hidden; margin-bottom: 26px; }
.area-photo img { width: 100%; height: 300px; object-fit: cover;
                  object-position: center 30%; display: block; }
.area-head { padding: 24px 30px 26px; }
.area-head h1 { margin: 0 0 6px; color: var(--navy); }
.area-head .area-catch { font-size: 19px; margin: 0; }
.area-body { margin-bottom: 10px; }
.range-sm { font-size: 21px; }

/* 棟プロフィール（このマンションについて） */
.bprofile p:first-child { margin-top: 0; }
.bprofile h3 { font-size: 20px; margin: 1.4em 0 .5em; }
.bprofile .src-list { font-size: 14.5px; color: var(--muted); }

.hero-today { margin: 12px 0 0; font-size: 17px; }

/* 問い合わせフォーム */
.contact-form { background: var(--card); border: 1px solid var(--line);
                border-radius: var(--r-lg); padding: 28px 32px; max-width: 46em; }
.contact-form .form-row { margin: 0 0 18px; }
.contact-form label { display: block; font-weight: 700; margin-bottom: 6px; }
.contact-form label .opt { font-weight: 400; color: var(--muted); font-size: 16px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; font: inherit; color: inherit; background: #fff;
  border: 2px solid #b9c6d1; border-radius: var(--r-md);
  padding: 11px 14px; min-height: 48px; }
.contact-form textarea { min-height: 180px; resize: vertical; }
.contact-form input:focus-visible, .contact-form select:focus-visible,
.contact-form textarea:focus-visible { outline: 3px solid var(--sea); outline-offset: 1px; }
.contact-form .cat-note { margin: -8px 0 18px; color: #7a5a14;
  background: #fdf4e6; border: 1px solid #e3cf96; border-radius: var(--r-sm);
  padding: 9px 14px; font-size: 16px; }
.contact-form .cat-note:empty { display: none; }
@media (max-width: 720px) {
  .contact-form { padding: 20px 16px; }
}

/* 広告枠・注記 */
.ad { margin: 30px 0; text-align: center; }
.note { color: var(--muted); font-size: 16px; }

/* ノートPC（〜1280px）: サイドバーを少し細く */
@media (max-width: 1280px) {
  .side-nav { width: 264px; }
}
/* タブレット縦・小型（〜960px）: 1カラム化 */
@media (max-width: 960px) {
  .layout { flex-direction: column; }
  .side-nav { width: 100%; position: static; max-height: none; }
}
@media (max-width: 720px) {
  main { padding: 14px 12px 44px; }
  h2.sec { flex-wrap: wrap; }                       /* 見出し＋件数の潰れ防止 */
  .unit-card .u-line1 { grid-template-columns: 1fr; }  /* 狭幅は価格とスペックを縦積み */
  .hero { padding: 24px 18px 22px; }
  .hero h1 { font-size: 25px; }
  .hero-stats { flex-wrap: wrap; }
  .hero-stats .stat { flex: 1 1 50%; border-top: 1px solid var(--line); padding: 11px 15px; }
  .hero-stats .stat:nth-child(-n+2) { border-top: 0; }
  .hero-stats .stat strong { font-size: 28px; }
  .ht-lead { display: none; }              /* 狭幅ではSEO向けの帯文を出さない */
  .site-header .logo .name { font-size: 21px; }
  .site-header .logo .tag { display: none; }
  .town-jump { top: 65px; }   /* 狭幅ヘッダーの高さに合わせる */
  .hdr-inner { padding: 10px 14px; gap: 8px; }
  .article-body { padding: 22px 17px; }
  .tower-head .t-icon { width: 140px; }
  .tower-head .t-icon svg, .tower-head .t-icon img { height: 92px; }
  .src-note, .crumb, .note, .scale-note { font-size: 16.5px; }
  .unit-card .u-sub, .badge, .grade-bar-legend, .grade-pill { font-size: 16px; }
  .unit-card, .unit-card.with-thumb { grid-template-columns: 1fr;
               grid-template-areas: "judge" "main" "act"; }
  .unit-card .u-thumb { display: none; }
  .unit-card .u-act { text-align: left; }
  .btn-out { display: block; text-align: center; }
  .pr-card img { aspect-ratio: 4 / 3; object-fit: cover; }
  .top-hero img { height: 230px; }
  .top-hero-text { padding: 56px 18px 16px; }
  .top-hero-text h1 { font-size: 27px; }
  .top-hero-text p { font-size: 15px; }
  .car-btn { display: none; }              /* スマホは指でスワイプ */
  .car-slide { flex-basis: 92%; }
  .area-photo img { height: 190px; }
  .area-head { padding: 18px 16px 20px; }
}