/* ============================================
   八重山地区宅地建物取引業者会
   Editorial Coastal Design System
   ============================================ */

/* Web フォントは base.html の <link rel="stylesheet"> で読み込む
   (CSS の @import はレンダーブロッキングになるため使わない) */

:root {
    /* Palette — Yaeyama Ocean (ヒーロー画像の海・水色基調) */
    --c-deep:    #0a3a5e;   /* 深海 */
    --c-ocean:   #1d6f9c;   /* 石垣ブルー */
    --c-aqua:    #5fbed4;   /* 浅瀬・水色アクセント */
    --c-aqua-pale: #c9e6f5; /* 淡水色(チップ等の背景) */
    --c-mist:    #5e7989;   /* 海霞 */
    --c-coral:   #c8533c;   /* 珊瑚赤（小さなアクセント用) */
    --c-deigo:   #a83a2a;   /* 梯梧(警告・件数 0 等) */
    --c-sand:    #e6eff4;   /* 水辺の砂底(青味を加味した薄い水色) */
    --c-cream:   #f5fafc;   /* 海面に映る白(青寄りオフホワイト) */
    --c-rule:    #b8ccd6;   /* 罫線(青味のシルバーグレー) */
    --c-ink:     #0f1419;   /* 漆黒 */
    --c-sub:     #2d3942;   /* 副本文 */

    /* Typography — 読みやすさ重視 */
    --f-display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", sans-serif;
    --f-body:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", sans-serif;
    --f-mono:    "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

    /* Spacing scale */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
    --s-9: 96px; --s-10: 128px;

    /* Layout */
    --max-w: 1240px;
    --gutter: clamp(20px, 4vw, 48px);
    --rule: 1px solid var(--c-rule);
}
/* スマホ系の幅では gutter を更に詰めてコンテンツ領域を確保 */
@media (max-width: 480px) {
    :root { --gutter: 12px; }
}
@media (max-width: 360px) {
    :root { --gutter: 10px; }
}

/* Reset & base ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--f-body);
    font-weight: 500;
    color: var(--c-ink);
    background: var(--c-cream);
    /* 安全策: 何があっても横スクロールを許さない。
       overflow-x: clip は position:sticky を壊さないので hidden より安全。 */
    overflow-x: clip;
    background-image:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(29, 111, 156, 0.10), transparent 60%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(95, 190, 212, 0.10), transparent 60%);
    background-attachment: fixed;
    line-height: 1.85;
    font-size: 17px;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s ease, opacity .25s ease; }
a:hover { color: var(--c-ocean); }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.divider {
    height: 1px; background: var(--c-rule); border: 0; margin: var(--s-7) 0;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
    /* 透過ロゴが綺麗にのるよう純白寄りに */
    background: #ffffff;
    border-bottom: var(--rule);
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(10px);
    transition: transform .25s ease;
}
/* 下方向スクロール時のみ隠す(JS で .is-hidden を付ける) */
.site-header.is-hidden { transform: translateY(-100%); }
.site-header > .container {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--s-6);
    padding-top: var(--s-4);
    padding-bottom: var(--s-4);
}
.site-brand {
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.site-brand-logo {
    display: block;
    height: clamp(36px, 4.2vw, 52px);
    width: auto;
    /* 透過 PNG なので背景は素通し。ヘッダーの白がそのまま見える */
}
/* 旧テキストブランド(残置用) */
.brand-jp {
    display: block;
    font-family: var(--f-display);
    font-weight: 900;
    font-size: clamp(18px, 1.9vw, 23px);
    color: var(--c-deep);
    letter-spacing: 0.04em;
    line-height: 1.4;
}
.site-nav ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: clamp(16px, 2.2vw, 32px);
    justify-content: flex-end; flex-wrap: wrap;
    align-items: center;
}
.site-nav a {
    font-size: 16px; font-weight: 700;
    font-family: var(--f-display);
    color: var(--c-ink);
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    transition: border-color .25s ease, color .25s ease;
}
.site-nav a:hover { color: var(--c-deep); border-bottom-color: var(--c-ocean); }

/* スマホでナビを 1 行に収める(font / gap / padding 圧縮) */
@media (max-width: 720px) {
    .site-header > .container {
        padding-top: var(--s-3);
        padding-bottom: var(--s-3);
        gap: var(--s-3);
    }
    .site-nav ul {
        gap: 10px 14px;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .site-nav a {
        font-size: 13px;
        padding: 4px 0;
        letter-spacing: -0.01em;
    }
    .site-brand-logo { height: 32px; }
}
@media (max-width: 380px) {
    .site-nav a { font-size: 12px; }
    .site-nav ul { gap: 8px 11px; }
}

/* ============================================
   MAIN
   ============================================ */
.site-main { padding: var(--s-7) 0 var(--s-9); }

/* ============================================
   HERO
   ============================================ */
.hero {
    position: relative;
    padding: var(--s-9) 0 var(--s-8);
    border-bottom: var(--rule);
    margin-bottom: var(--s-8);
    overflow: hidden;
}

/* 背景画像つきヒーロー(トップページ)
   元画像 4031×1176 の縦横比をそのまま使ってスリムなパノラマに見せる。
   モバイル等で極端に細くならないよう min-height だけ確保。 */
.hero--with-bg {
    aspect-ratio: 4031 / 1176;
    min-height: 240px;
    max-height: 460px;
    padding: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 0;
    display: flex;
    align-items: center;
}
.hero--with-bg::before {
    /* 写真本体は素のままで見せたいので、画面全体のオーバーレイは
       上下にうっすら効かせるだけ。色味は奪わず、コントラストだけ少し整える。 */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(0, 0, 0, 0.00) 35%,
        rgba(0, 0, 0, 0.00) 75%,
        rgba(10, 58, 94, 0.18) 100%
    );
    pointer-events: none;
    border-radius: inherit;
}
.hero--with-bg .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 var(--s-3);
    padding: clamp(18px, 2.4vw, 28px) clamp(22px, 2.8vw, 32px);
    /* 写真の海・空を活かすため、テキストだけフロストガラス調のカードで囲む。
       カードは半透明白でブラー、左に珊瑚赤のアクセントライン。 */
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    border-left: 5px solid var(--c-coral);
    border-radius: 4px;
    box-shadow: 0 24px 60px -28px rgba(10, 58, 94, 0.55);
}

.hero-title {
    font-family: var(--f-display);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--c-deep);
    margin: 0 0 var(--s-4);
    /* 14字タイトルがデスクトップで 1 行収まるサイズに調整。
       モバイルでは自然折り返し可。 */
    font-size: clamp(19px, 2.9vw, 34px);
    white-space: nowrap;
}
@media (max-width: 640px) {
    .hero-title { white-space: normal; font-size: clamp(19px, 5vw, 28px); }
}
.hero--with-bg .hero-title {
    /* 写真側を見せたいので、カードの上で深紺の太字。テキスト影は無し。 */
    color: var(--c-deep);
    text-shadow: none;
}

.hero-lead {
    max-width: 720px;
    font-size: clamp(13px, 1.15vw, 15px);
    line-height: 1.8;
    font-weight: 500;
    color: var(--c-ink);
    margin: 0;
}
.hero--with-bg .hero-lead {
    color: var(--c-ink);
    font-weight: 600;
    text-shadow: none;
}

/* === 総登録数バッジ (海の背景に重ねる赤いバースト) === */
.hero-badge {
    position: absolute;
    z-index: 2;                 /* 写真オーバーレイ(::before)より前面 */
    top: clamp(10px, 2.2vw, 24px);
    right: clamp(12px, 3.5vw, 48px);
    width: clamp(100px, 20vw, 190px);
    aspect-ratio: 1 / 1;
    transform: rotate(-5deg);   /* 少し傾けて“貼った”感 */
    filter: drop-shadow(0 6px 14px rgba(10, 58, 94, 0.35));
    pointer-events: none;       /* クリックの邪魔をしない */
}
.hero-badge-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.hero-badge-num {
    position: absolute;
    left: 0;
    right: 0;
    top: 63%;                   /* 空いた赤スペースの中央付近 */
    transform: translateY(-50%);
    text-align: center;
    color: #fff;
    font-family: var(--f-display);
    font-weight: 900;
    line-height: 1;
    font-size: clamp(24px, 5vw, 50px);
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.hero-badge-num small {
    font-size: 0.42em;
    font-weight: 900;
    margin-left: 2px;
    vertical-align: 0.12em;
}
@media (prefers-reduced-motion: reduce) {
    .hero-badge { transform: none; }
}
/* スマホでは写真帯(高さ=画面幅×約29%)を下にはみ出さないよう小さくする */
@media (max-width: 720px) {
    .hero-badge {
        width: clamp(66px, 22vw, 96px);
        top: clamp(6px, 2vw, 12px);
        right: clamp(10px, 3vw, 14px);
    }
    .hero-badge-num {
        font-size: clamp(15px, 4.4vw, 22px);
    }
}

/* === 登録件数アピール (ヒーロー内) === */
/* 総登録数を「見出し行」として独立させ、売買・賃貸は必ず横並びのペアにする。
   (3バッジ横並びだとスマホで賃貸だけ改行され浮くため) */
.hero-stats {
    margin: var(--s-4) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--s-3);
}
.hero-stat-cats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--s-3);
}
.hero-stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: var(--s-3) var(--s-4);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(10, 58, 94, 0.12);
    border-top: 3px solid var(--c-coral);
    border-radius: 4px;
    box-shadow: 0 6px 16px -12px rgba(10, 58, 94, 0.4);
}
.hero-stat-label {
    font-size: clamp(12px, 1vw, 13px);
    font-weight: 700;
    color: var(--c-deep);
    letter-spacing: 0.02em;
}
.hero-stat-num {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1;
    color: var(--c-coral);
    font-variant-numeric: tabular-nums;
}
.hero-stat-unit {
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 700;
    color: var(--c-deep);
}
/* 総登録数は主役として塗りつぶしで強調 */
.hero-stat--total {
    background: var(--c-deep);
    border-color: var(--c-deep);
    border-top-color: var(--c-coral);
}
.hero-stat--total .hero-stat-label,
.hero-stat--total .hero-stat-unit {
    color: rgba(255, 255, 255, 0.9);
}
.hero-stat--total .hero-stat-num {
    color: #ffffff;
}
@media (max-width: 640px) {
    .hero-stats { gap: var(--s-2); }
    .hero-stat { padding: var(--s-2) var(--s-3); }
    /* 総登録数は単独で1行(見出し扱い・中央寄せ) */
    .hero-stat--total {
        flex: 1 1 100%;
        justify-content: center;
    }
    /* 売買・賃貸は下の行で常に2列を等分(賃貸が浮かない) */
    .hero-stat-cats {
        flex: 1 1 100%;
        gap: var(--s-2);
    }
    .hero-stat-cats .hero-stat {
        flex: 1 1 0;
        justify-content: center;
    }
}

/* === スマホ専用: 横長パノラマをそのまま全幅表示 + カードを下にスタック === */
@media (max-width: 720px) {
    .hero--with-bg {
        /* 画像本体のアスペクトで自動的に高さが決まるので min/max は解除 */
        aspect-ratio: auto;
        min-height: auto;
        max-height: none;
        /* 背景は 100% 幅 / 自然な高さでパノラマ全体を表示 */
        background-size: 100% auto;
        background-position: center top;
        background-color: var(--c-aqua-pale);
        /* 上部に画像分のスペースを確保。画像比 4031/1176 = 約 29.2% を使う */
        padding-top: calc(100vw * 1176 / 4031);
        padding-bottom: var(--s-4);
        display: block;            /* flex 解除して通常フロー */
    }
    .hero--with-bg::before {
        display: none;             /* 全幅で見せたい画像にオーバーレイは不要 */
    }
    .hero--with-bg .hero-inner {
        /* 他のカードと幅を揃える(container パディング基準で 0 margin) */
        margin: var(--s-3) 0 0;
        max-width: none;
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 8px 18px -10px rgba(10, 58, 94, 0.25);
        padding: var(--s-4);
        border-radius: 4px;
    }
}

/* ============================================
   SEARCH
   ============================================ */
.search-bar {
    background: #fff;
    border: var(--rule);
    padding: var(--s-5) var(--s-6);
    margin-bottom: var(--s-8);
    box-shadow: 0 20px 50px -30px rgba(10,58,94,0.25);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--s-5);
}
.search-bar .label {
    font-family: var(--f-display); font-size: 16px; font-weight: 900;
    letter-spacing: 0.2em; color: var(--c-ocean);
    border-right: var(--rule); padding-right: var(--s-5);
}
.search-fields {
    display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5);
    align-items: center;
}
.search-fields label {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 13px; color: var(--c-sub); font-weight: 700;
    font-family: var(--f-display);
}
.search-fields select,
.search-fields input {
    font-family: var(--f-body);
    font-size: 16px; font-weight: 500;
    padding: 10px 6px;
    border: 0; border-bottom: 2px solid var(--c-rule);
    background: transparent; color: var(--c-ink);
    min-width: 150px;
    transition: border-color .25s ease;
}
.search-fields label > span em {
    /* 「任意」ラベルを小さく薄く */
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    color: var(--c-mist);
    margin-left: 4px;
    letter-spacing: 0.1em;
    padding: 1px 5px;
    border: 1px solid var(--c-rule);
    border-radius: 2px;
    vertical-align: 2px;
}
.search-fields .search-field-sub select { min-width: 170px; }
.search-fields select:focus,
.search-fields input:focus { outline: none; border-bottom-color: var(--c-deep); }
.search-fields input { min-width: 240px; }

/* === キーワード入力例のヘルプ（丸い「?」アイコン → ホバー/タップで吹き出し） === */
.kw-hint {
    /* button のデフォルト装飾をリセット(interactive要素なので label のクリック転送を受けない) */
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    position: relative;
    display: inline-flex;
    align-items: center;
    /* タップ領域を広げる(視覚は16pxのまま、余白で当たり判定を確保) */
    padding: 6px;
    margin: -6px -6px -6px -2px;
    vertical-align: 2px;
    cursor: help;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.kw-hint-icon {
    display: block;
    width: 16px; height: 16px;
    opacity: 0.85;
    transition: opacity .2s ease, transform .2s ease;
}
.kw-hint:hover .kw-hint-icon,
.kw-hint:focus .kw-hint-icon,
.kw-hint:focus-within .kw-hint-icon {
    opacity: 1;
    transform: scale(1.12);
}
.kw-hint:focus-visible {
    outline: 2px solid var(--c-coral);
    outline-offset: 3px;
    border-radius: 50%;
}
.kw-hint-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    z-index: 20;
    width: max-content;
    max-width: 240px;
    /* 既定は非表示。ホバー/フォーカスでフェードイン */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--c-rule);
    border-radius: 6px;
    box-shadow: 0 10px 28px -12px rgba(10, 58, 94, 0.45);
    font-family: var(--f-body);
    font-weight: 500;
    text-align: left;
    white-space: normal;
}
.kw-hint:hover .kw-hint-pop,
.kw-hint:focus .kw-hint-pop,
.kw-hint:focus-within .kw-hint-pop {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.kw-hint-pop::before {
    /* 吹き出しの三角 */
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #fff;
    filter: drop-shadow(0 -1px 0 var(--c-rule));
}
.kw-hint-pop strong {
    font-family: var(--f-display);
    font-size: 11px; font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--c-deep);
}
.kw-hint-pop span {
    font-size: 13px;
    color: var(--c-ink);
}
.kw-hint-pop small {
    font-size: 11px;
    color: var(--c-sub);
    line-height: 1.5;
}
@media (max-width: 640px) {
    /* 画面端で切れないよう左寄せに(X方向の中央寄せを解除) */
    .kw-hint-pop { left: 0; transform: translateY(-4px); }
    .kw-hint:hover .kw-hint-pop,
    .kw-hint:focus .kw-hint-pop,
    .kw-hint:focus-within .kw-hint-pop { transform: translateY(0); }
    .kw-hint-pop::before { left: 8px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .kw-hint-icon,
    .kw-hint-pop { transition: opacity .01s; transform: none !important; }
}
.search-submit {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 16px; letter-spacing: 0.15em;
    background: var(--c-deep); color: var(--c-cream);
    border: 0; padding: 16px 36px;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}
.search-submit:hover { background: var(--c-ocean); transform: translateX(2px); }

/* ============================================
   キーワード検索アシスト
   - .kw-helper      : サジェスト + 件数 (フォーム下段)
   - .kw-live-count  : 大きな赤字で件数を表示
   - .kw-suggest     : 入力中の補完候補(インライン横並びテキスト)
   ============================================ */
.kw-helper {
    flex-basis: 100%;
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

/* 件数バッジ: 大きな赤字 */
.kw-live-count {
    text-align: right;
    font-family: var(--f-display);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--c-deigo);
    line-height: 1;
}
.kw-live-num {
    display: inline-block;
    font-size: 44px;
    font-weight: 900;
    letter-spacing: -0.01em;
    margin: 0 6px 0 10px;
    vertical-align: -6px;
    color: var(--c-deigo);
}
.kw-live-count.is-zero { color: var(--c-mist); }
.kw-live-count.is-zero .kw-live-num { color: var(--c-mist); }

/* サジェスト: インラインで横並び表示（リスト記号なし、ボタンの枠装飾なし） */
.kw-suggest {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 14px;
    row-gap: 4px;
    font-family: var(--f-display);
}
.kw-suggest-prefix {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--c-sub);
}
.kw-suggest-item {
    display: inline-block;
    margin: 0;
    padding: 4px 11px;
    border: 0;
    border-radius: 3px;
    background: #c9e6f5;
    color: var(--c-deep);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.kw-suggest-item:hover {
    background: var(--c-ocean);
    color: #fff;
}
.kw-suggest-item .kw-hash {
    color: var(--c-coral);
    font-weight: 900;
}
.kw-suggest-item:hover .kw-hash {
    color: #ffd7ce;
}
.kw-suggest-count {
    font-weight: 700;
    color: var(--c-sub);
    font-size: 12px;
}
.kw-suggest-item:hover .kw-suggest-count {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 720px) {
    .kw-live-count { text-align: center; }
}

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-5);
    margin-bottom: var(--s-6);
    padding-bottom: var(--s-4);
    border-bottom: 2px solid var(--c-deep);
    flex-wrap: wrap;
}
.section-title {
    font-family: var(--f-display); font-weight: 900;
    font-size: clamp(26px, 2.8vw, 34px);
    color: var(--c-deep);
    margin: 0;
    line-height: 1.3;
    letter-spacing: 0.04em;
}
.section-more {
    font-family: var(--f-display); font-size: 16px;
    letter-spacing: 0.05em; font-weight: 700;
    color: var(--c-deep);
    border-bottom: 2px solid var(--c-deep);
    padding-bottom: 4px;
}
.section-more:hover { color: var(--c-ocean); border-bottom-color: var(--c-ocean); }

.property-section { margin-bottom: var(--s-9); }

/* ============================================
   PROPERTY GRID & CARDS
   ============================================ */
.property-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--s-6) var(--s-5);
}
.property-card {
    --card-accent: var(--c-deep);
    background: #fff;
    border: var(--rule);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.property-card[data-cat="rent"]  { --card-accent: var(--c-ocean); }
.property-card[data-cat="sale"]  { --card-accent: var(--c-coral); }
/* 売買の種別ラベルは白文字とのコントラストが 4.41 で WCAG AA (4.5) に僅かに届かないため、
   ラベルの背景だけ少し濃いコーラルにする (サイト全体の --c-coral は変えない) */
.property-card[data-cat="sale"] .card-tag { background: #bf4d37; }
.property-card[data-cat="shop"]  { --card-accent: var(--c-deigo); }

.property-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--card-accent);
    transition: width .35s ease;
}
.property-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -30px rgba(10,58,94,0.3);
    border-color: var(--card-accent);
}
.property-card:hover::before { width: 6px; }

.property-card a { display: block; color: inherit; }

.card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--c-sand);
    overflow: hidden;
}
.card-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.property-card:hover .card-media img { transform: scale(1.05); }
.no-image {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-sub); font-weight: 700;
    font-family: var(--f-display); font-size: 16px;
    background:
        repeating-linear-gradient(45deg, transparent 0 12px, rgba(136,164,184,0.05) 12px 13px);
}
.card-tag {
    position: absolute; bottom: 12px; right: 12px;
    font-family: var(--f-display);
    font-size: 14px; font-weight: 700;
    color: #fff;
    background: var(--card-accent);
    padding: 6px 14px;
    letter-spacing: 0.08em;
}

.card-body {
    padding: var(--s-5) var(--s-5) var(--s-5);
}
.card-area {
    font-family: var(--f-display); font-size: 13px;
    letter-spacing: 0.05em; font-weight: 700;
    color: var(--c-ocean);
    margin: 0 0 10px;
}
.card-title {
    font-family: var(--f-display); font-weight: 700;
    font-size: 19px; line-height: 1.5;
    color: var(--c-ink);
    margin: 0 0 var(--s-3);
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-price {
    font-family: var(--f-display); font-weight: 900;
    font-size: 26px;
    color: var(--card-accent);
    margin: 0 0 var(--s-3);
    letter-spacing: 0.02em;
}
.card-price .unit {
    font-family: var(--f-body); font-weight: 700;
    font-size: 14px; color: var(--c-sub);
    margin-left: 4px; letter-spacing: 0.05em;
}
.card-addr {
    font-size: 15px; color: var(--c-sub); font-weight: 500;
    margin: 0;
    border-top: 1px dotted var(--c-rule);
    padding-top: var(--s-3);
    line-height: 1.6;
}

.empty {
    padding: var(--s-7);
    text-align: center;
    color: var(--c-sub); font-weight: 500;
    font-family: var(--f-display); font-size: 16px;
    letter-spacing: 0.05em;
    border: 1px dashed var(--c-rule);
    background: #fff;
}
.result-count {
    font-family: var(--f-display); font-size: 15px; font-weight: 700;
    color: var(--c-deep); letter-spacing: 0.05em;
    margin-bottom: var(--s-5);
}

/* ============================================
   PAGE TITLE
   ============================================ */
.page-title {
    margin: 0 0 var(--s-6);
    padding-bottom: var(--s-4);
    border-bottom: 2px solid var(--c-deep);
}
.page-title h1, .page-title h2 {
    font-family: var(--f-display); font-weight: 900;
    font-size: clamp(32px, 4.5vw, 46px);
    color: var(--c-deep);
    margin: 0;
    border: 0; padding: 0;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

/* ============================================
   PROPERTY DETAIL
   ============================================ */
.detail {
    padding-top: var(--s-5);
}

/* main + sidebar layout */
.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--s-7);
    align-items: start;
}
@media (max-width: 980px) {
    .detail-layout { grid-template-columns: 1fr; }
}
.detail-main { min-width: 0; }

.detail-header {
    margin-bottom: var(--s-6);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--c-deep);
}
.detail-eyebrow {
    font-family: var(--f-display); font-size: 16px; font-weight: 700;
    letter-spacing: 0.04em; color: var(--c-coral);
    margin: 0 0 var(--s-3);
}
.detail-eyebrow .sep { color: var(--c-rule); margin: 0 10px; font-weight: 500; }
.detail-title {
    font-family: var(--f-display); font-weight: 900;
    font-size: clamp(22px, 4.8vw, 50px);
    line-height: 1.35;
    color: var(--c-deep);
    margin: 0 0 var(--s-4);
    word-break: break-all;
    overflow-wrap: anywhere;
}
.detail-intro {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--c-rule);
    border-radius: 10px;
    padding: 26px 28px 22px;
    margin: 18px 0 var(--s-5);
    font-size: 16px;
    line-height: 1.9;
    color: var(--c-ink);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
/* 左上に貼り付けるラベル(ピル) */
.detail-intro::before {
    content: '物件のご紹介';
    position: absolute;
    top: -1px;
    left: -1px;
    background: var(--c-coral);
    color: #fff;
    font-family: var(--f-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 6px 14px 7px;
    border-radius: 10px 0 12px 0;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.06);
}
/* 開始位置をラベル分下げる */
.detail-intro {
    padding-top: 40px;
}
/* 引用符のさりげない装飾 */
.detail-intro::after {
    content: '”';
    position: absolute;
    right: 14px;
    bottom: -22px;
    font-family: var(--f-display);
    font-size: 96px;
    color: var(--c-coral);
    opacity: 0.10;
    line-height: 1;
    pointer-events: none;
}
.detail-address {
    font-size: 17px; color: var(--c-ink); font-weight: 500;
    margin: 0;
}
.detail-address::before {
    content: '所在地：';
    color: var(--c-coral);
    font-weight: 700;
    margin-right: 4px;
}

/* ----- Gallery: 大きいメイン画像 + 横並びサムネイル ----- */
.gallery-hero { margin-bottom: var(--s-6); }
.gallery-main {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--c-sand);
    overflow: hidden;
    border: var(--rule);
}
.gallery-main img {
    width: 100%; height: 100%;
    /* 図面・地図・正方形写真などが切り取られないよう contain で全体を表示。
       余白は --c-sand の水色で自然に埋める。 */
    object-fit: contain;
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
@media (max-width: 720px) {
    /* スマホでは縦長な余白が間延びしないよう、フレームの縦横比を緩める */
    .gallery-main { aspect-ratio: 4 / 3; }
}
.gallery-main:hover img { transform: scale(1.02); }
.gallery-zoom {
    position: absolute; right: 14px; bottom: 14px;
    background: rgba(10,58,94,0.85); color: #fff;
    font-family: var(--f-display); font-weight: 700;
    font-size: 13px; letter-spacing: 0.08em;
    padding: 8px 14px;
    backdrop-filter: blur(4px);
}
@media (max-width: 720px) {
    /* スマホでは右端余白を詰め、文字も若干小さくして確実に画面内に収める */
    .gallery-zoom {
        right: 6px; bottom: 6px;
        font-size: 11px;
        padding: 5px 10px;
        letter-spacing: 0.05em;
    }
}
.gallery-thumbs {
    list-style: none; padding: 0;
    margin: var(--s-3) 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}
.gallery-thumbs a {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: var(--rule);
    background: var(--c-sand);
    transition: border-color .2s ease, transform .2s ease;
}
.gallery-thumbs a:hover {
    border-color: var(--c-coral);
    transform: translateY(-2px);
}
.gallery-thumbs img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* ----- 間取り図の専用セクション ----- */
.floor-plan-section { margin-bottom: var(--s-6); }
.floor-plan-heading {
    font-family: var(--f-display); font-weight: 900; font-size: 17px;
    color: var(--c-deep); margin: 0 0 var(--s-3);
    padding-left: 10px; border-left: 4px solid var(--c-coral);
}
.floor-plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.floor-plan-item {
    display: block; border: 1px solid var(--c-rule); border-radius: 6px;
    background: #fff; padding: 10px; text-align: center;
}
.floor-plan-item img {
    /* 間取り図は切り取らず全体を見せる(白地に線画) */
    max-width: 100%; max-height: 560px; width: auto; height: auto;
    object-fit: contain; margin: 0 auto;
}

/* ----- Lightbox（CSSのみ・:targetで開閉） ----- */
.lightbox {
    position: fixed; inset: 0; z-index: 9000;
    display: none;
    align-items: center; justify-content: center;
    padding: var(--s-5);
}
.lightbox:target { display: flex; }
.lightbox-overlay {
    position: absolute; inset: 0;
    background: rgba(10, 20, 35, 0.92);
    cursor: zoom-out;
}
.lightbox-figure {
    position: relative;
    margin: 0;
    max-width: min(1200px, 95vw);
    max-height: 92vh;
    z-index: 1;
}
.lightbox-figure img {
    display: block;
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.lightbox-figure figcaption {
    margin-top: 10px;
    color: var(--c-cream);
    font-family: var(--f-display); font-size: 14px;
    text-align: center;
    letter-spacing: 0.05em;
}
.lightbox-close {
    position: absolute; top: -42px; right: -8px;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-cream);
    font-size: 28px; line-height: 1;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    transition: background .2s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,0.25); color: #fff; }

/* ----- Spec block ----- */
.spec-block {
    background: #fff;
    border: var(--rule);
    padding: var(--s-6);
    margin-bottom: var(--s-6);
}
@media (max-width: 720px) {
    /* スマホでは内側余白を抑えてコンテンツ幅を確保。他のカードと揃える */
    .spec-block { padding: var(--s-4); border-radius: 4px; }
    .spec-table { font-size: 14px; }
    .spec-table th { width: 6em; padding-right: var(--s-3); font-size: 13px; }
    .spec-table td { font-size: 14px; }
    .spec-price .value { font-size: clamp(26px, 9vw, 34px); }
}
.spec-price {
    margin: 0 0 var(--s-5);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--c-deep);
}
.spec-price .label {
    display: block;
    font-family: var(--f-display); font-size: 15px; font-weight: 700;
    letter-spacing: 0.1em; color: var(--c-sub);
    margin-bottom: 8px;
}
.spec-price .value {
    font-family: var(--f-display); font-weight: 900;
    font-size: clamp(34px, 3.6vw, 44px);
    color: var(--c-coral); line-height: 1.1;
}
.spec-price .value .unit {
    font-size: 0.5em; font-weight: 700; margin-left: 8px;
    color: var(--c-sub);
}
.spec-price .note {
    display: block;
    margin-top: 8px;
    font-size: 14px; color: var(--c-sub); font-weight: 500;
}

.spec-table {
    width: 100%; border-collapse: collapse;
    font-size: 16px;
}
.spec-table tr { border-bottom: 1px dotted var(--c-rule); }
.spec-table tr:last-child { border-bottom: 0; }
.spec-table th, .spec-table td {
    padding: var(--s-4) 0;
    text-align: left; vertical-align: top;
}
.spec-table th {
    font-weight: 700; color: var(--c-deep);
    font-family: var(--f-display); font-size: 15px;
    letter-spacing: 0.05em;
    width: 38%; padding-right: var(--s-4);
}
.spec-table td { color: var(--c-ink); font-weight: 500; line-height: 1.7; }

/* ----- Contact CTA: 業者連絡先（目立つボタン） ----- */
.contact-cta {
    background: linear-gradient(135deg, var(--c-deep) 0%, var(--c-ocean) 100%);
    color: var(--c-cream);
    padding: var(--s-6) var(--s-6) var(--s-7);
    margin-bottom: var(--s-6);
    position: relative;
    overflow: hidden;
}
.contact-cta::before {
    content: '';
    position: absolute; right: -40px; top: -40px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(200,83,60,0.25), transparent 65%);
    pointer-events: none;
}
.contact-cta-eyebrow {
    font-family: var(--f-display); font-size: 14px; font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--c-cream); opacity: 0.9;
    margin: 0 0 var(--s-3);
}
.contact-cta-name {
    font-family: var(--f-display); font-weight: 900;
    font-size: clamp(24px, 2.6vw, 30px);
    color: #fff;
    margin: 0 0 var(--s-2);
    line-height: 1.3;
    letter-spacing: 0.03em;
}
.contact-cta-addr {
    font-size: 15px; color: var(--c-cream);
    opacity: 0.85;
    margin: 0 0 var(--s-5);
}
.contact-cta-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--s-3);
    position: relative; z-index: 1;
}
@media (max-width: 720px) {
    .contact-cta { padding: var(--s-4); border-radius: 4px; }
    .cta-btn { padding: var(--s-3) var(--s-4); }
    .cta-btn .cta-value { font-size: 16px; }
    .cta-mail .cta-value, .cta-web .cta-value { font-size: 13px; }
}
.cta-btn {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    background: rgba(255,255,255,0.95);
    color: var(--c-ink) !important;
    border-left: 4px solid var(--c-coral);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.cta-btn:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -10px rgba(0,0,0,0.4);
}
.cta-btn .cta-icon {
    font-size: 28px; line-height: 1;
    color: var(--c-coral); flex-shrink: 0;
}
.cta-btn .cta-text { display: flex; flex-direction: column; min-width: 0; }
.cta-btn .cta-label {
    font-family: var(--f-display); font-size: 12px; font-weight: 700;
    letter-spacing: 0.1em; color: var(--c-deep);
}
.cta-btn .cta-value {
    font-family: var(--f-display); font-size: 18px; font-weight: 900;
    color: var(--c-ink);
    line-height: 1.3; word-break: break-all;
}
.cta-mail .cta-value, .cta-web .cta-value { font-size: 14px; font-weight: 700; }

/* ----- Sidebar (検索のみ) ----- */
.site-sidebar {
    position: sticky;
    top: calc(var(--s-7) + 60px);
    background: #fff;
    border: var(--rule);
    padding: var(--s-5);
}
@media (max-width: 980px) {
    .site-sidebar { position: static; }
}
@media (max-width: 720px) {
    /* スマホでは他のカードと幅・余白を揃える */
    .site-sidebar { padding: var(--s-4); border-radius: 4px; }
}
.sidebar-heading {
    font-family: var(--f-display); font-weight: 900;
    font-size: 16px; letter-spacing: 0.08em;
    color: var(--c-deep);
    margin: 0 0 var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 2px solid var(--c-coral);
}
.sidebar-search-form {
    display: flex; gap: 6px;
}
.sidebar-search-form input {
    flex: 1; min-width: 0;
    font-family: var(--f-body); font-size: 15px;
    padding: 10px 12px;
    border: 1px solid var(--c-rule);
    background: var(--c-cream);
    color: var(--c-ink);
}
.sidebar-search-form input:focus { outline: 2px solid var(--c-deep); outline-offset: -2px; }
.sidebar-search-form button {
    background: var(--c-deep); color: #fff;
    border: 0; padding: 0 16px;
    font-family: var(--f-display); font-weight: 700;
    cursor: pointer;
    transition: background .2s ease;
}
.sidebar-search-form button:hover { background: var(--c-coral); }
.sidebar-note {
    margin: var(--s-3) 0 0;
    font-size: 13px; font-weight: 700;
    font-family: var(--f-display);
}
.sidebar-note a {
    color: var(--c-deep);
    border-bottom: 1px solid var(--c-rule);
    padding-bottom: 1px;
}
.sidebar-note a:hover { color: var(--c-coral); border-bottom-color: var(--c-coral); }

.detail-description {
    background: #fff;
    border: var(--rule); border-left: 4px solid var(--c-deep);
    padding: var(--s-6);
    margin-top: var(--s-6);
}
.detail-description h3 {
    font-family: var(--f-display); font-weight: 900;
    font-size: 22px; color: var(--c-deep);
    margin: 0 0 var(--s-4);
    border: 0; padding: 0;
}
.detail-description p {
    margin: 0; line-height: 2;
    font-size: 17px;
    color: var(--c-ink); font-weight: 500;
}

.detail-pano {
    background: #fff;
    border: var(--rule); border-left: 4px solid var(--c-coral);
    padding: var(--s-6);
    margin-top: var(--s-6);
}
.detail-pano h3 {
    font-family: var(--f-display); font-weight: 900;
    font-size: 22px; color: var(--c-deep);
    margin: 0 0 var(--s-4);
    border: 0; padding: 0;
}
.detail-pano h3::after {
    content: ' 🔄';
    font-size: 16px;
}
.pano-block {
    margin-bottom: var(--s-5);
}
.pano-block:last-child { margin-bottom: 0; }
.pano-caption {
    margin: 0 0 8px;
    font-weight: 600;
    color: var(--c-ink);
}
.pano-viewer {
    width: 100%;
    height: 480px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--c-rule);
    background: #1a1a1a; /* ローディング中も浮かないように暗背景 */
    touch-action: none;  /* スマホでビューア内のスワイプを縦スクロールにしない */
}
@media (max-width: 768px) {
    .pano-viewer { height: 360px; }
}

/* 操作ヒント */
.pano-hint {
    margin: 0 0 var(--s-4);
    font-size: 14px;
    color: var(--c-ink); opacity: 0.8;
    background: #f5f0e6;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid var(--c-coral);
}
.pano-hint .hint-pc { display: inline; }
.pano-hint .hint-sp { display: none; }
@media (hover: none), (max-width: 768px) {
    .pano-hint .hint-pc { display: none; }
    .pano-hint .hint-sp { display: inline; }
}


.detail-map {
    background: #fff;
    border: var(--rule); border-left: 4px solid var(--c-deep);
    padding: var(--s-6);
    margin-top: var(--s-6);
}
.detail-map h3 {
    font-family: var(--f-display); font-weight: 900;
    font-size: 22px; color: var(--c-deep);
    margin: 0 0 var(--s-4);
    border: 0; padding: 0;
}
.detail-map-frame {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--c-rule);
    background: #f3f5f7;
}
.detail-map-frame iframe {
    display: block;
    width: 100%;
    height: 380px;
    border: 0;
}
.detail-map-link {
    margin: 12px 0 0;
    font-size: 14px;
}
.detail-map-link a {
    color: var(--c-deep);
    border-bottom: 1px solid var(--c-deep);
    padding-bottom: 2px;
    font-weight: 600;
}
.detail-map-link a:hover { color: var(--c-coral); border-bottom-color: var(--c-coral); }

.back-link {
    margin-top: var(--s-7);
    font-family: var(--f-display); font-size: 16px; font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--c-deep);
}
.back-link a { border-bottom: 1px solid var(--c-deep); padding-bottom: 2px; }
.back-link a::before { content: '← '; }

/* ============================================
   BROKER LIST
   ============================================ */
.broker-list-wrap {
    background: #fff;
    border: var(--rule);
    overflow: hidden;
}
.broker-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}
.broker-table thead {
    background: var(--c-deep); color: var(--c-cream);
}
.broker-table thead th {
    font-family: var(--f-display); font-weight: 700;
    font-size: 15px; letter-spacing: 0.1em;
    padding: var(--s-4) var(--s-5);
    text-align: left;
}
.broker-table tbody tr {
    border-bottom: 1px solid var(--c-rule);
    transition: background .2s ease;
}
.broker-table tbody tr:last-child { border-bottom: 0; }
.broker-table tbody tr:hover { background: var(--c-sand); }
.broker-table tbody td {
    padding: var(--s-5) var(--s-5);
    vertical-align: middle;
}
.broker-table .num {
    font-family: var(--f-display); font-size: 16px; font-weight: 700;
    color: var(--c-coral); width: 72px;
}
.broker-table .name {
    font-family: var(--f-display); font-weight: 900;
    color: var(--c-deep); font-size: 18px;
}
.broker-table .phone { font-family: var(--f-display); font-size: 16px; font-weight: 700; letter-spacing: 0.03em; }
.broker-table .site a {
    font-family: var(--f-display); font-size: 15px; font-weight: 700;
    letter-spacing: 0.04em; color: var(--c-coral);
    border-bottom: 2px solid currentColor; padding-bottom: 2px;
}

/* ----- ブローカー一覧: モバイルではテーブルをカード型に切り替え ----- */
@media (max-width: 720px) {
    .broker-list-wrap { background: transparent; border: 0; }
    .broker-table thead { display: none; }
    .broker-table, .broker-table tbody { display: block; width: 100%; }
    .broker-table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 14px;
        row-gap: 4px;
        align-items: baseline;
        padding: 14px 16px 16px;
        margin-bottom: 12px;
        background: #fff;
        border: var(--rule);
        border-radius: 4px;
    }
    .broker-table tbody tr:hover { background: #fff; }
    .broker-table tbody td {
        display: block;
        padding: 0;
        font-size: 15px;
    }
    .broker-table tbody td.num {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        font-size: 14px;
        color: var(--c-mist);
    }
    .broker-table tbody td.name {
        grid-column: 2;
        grid-row: 1;
        font-size: 17px;
        font-weight: 900;
        color: var(--c-deep);
    }
    /* 住所・電話・サイトはラベル付きで全幅 */
    .broker-table tbody td:nth-child(3),
    .broker-table tbody td:nth-child(4),
    .broker-table tbody td:nth-child(5) {
        grid-column: 1 / -1;
    }
    .broker-table tbody td:nth-child(3)::before { content: '住所: '; color: var(--c-mist); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }
    .broker-table tbody td.phone::before { content: '電話: '; color: var(--c-mist); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }
    .broker-table tbody td.phone { font-size: 16px; }
    .broker-table tbody td.site:empty,
    .broker-table tbody td:nth-child(3):empty,
    .broker-table tbody td.phone:empty { display: none; }
    .broker-table tbody td.site a {
        display: inline-block;
        padding: 8px 14px;
        background: var(--c-deep);
        color: #fff;
        border: 0;
        border-radius: 4px;
        font-size: 13px;
        margin-top: 4px;
    }
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    margin-top: var(--s-10);
    background: var(--c-deep);
    color: var(--c-mist);
    padding: var(--s-9) 0 var(--s-6);
    position: relative;
}
.site-footer::before {
    /* Top wave-like rule */
    content: '';
    display: block;
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--c-coral) 0%, var(--c-coral) 12%,
        transparent 12%, transparent 100%);
}
.footer-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--s-7);
    align-items: end;
}
@media (max-width: 720px) {
    .footer-inner { grid-template-columns: 1fr; }
}
.footer-brand .jp {
    font-family: var(--f-display); font-weight: 900;
    color: var(--c-cream); font-size: 26px;
    margin: 0 0 var(--s-4);
    letter-spacing: 0.04em;
}
.footer-brand .tagline {
    font-size: 16px; color: var(--c-cream); margin: 0; font-weight: 500;
    max-width: 520px; line-height: 1.9;
    opacity: 0.9;
}
.footer-meta {
    text-align: right;
    font-family: var(--f-display); font-size: 15px; font-weight: 500;
    color: var(--c-cream);
    line-height: 2;
    opacity: 0.9;
}
@media (max-width: 720px) { .footer-meta { text-align: left; } }
.footer-rule {
    margin: var(--s-7) 0 var(--s-4);
    border: 0; border-top: 1px solid rgba(214,201,176,0.25);
}
.footer-base {
    display: flex; justify-content: space-between; flex-wrap: wrap;
    gap: var(--s-3);
    font-family: var(--f-display); font-size: 14px; font-weight: 500;
    color: var(--c-cream);
    opacity: 0.9;
}

/* ----- Footer: 登録業者ロゴ ----- */
.footer-partners { margin-bottom: var(--s-7); }
.footer-partners-heading {
    font-family: var(--f-display); font-weight: 900;
    font-size: 18px; letter-spacing: 0.1em;
    color: var(--c-cream);
    margin: 0 0 var(--s-4);
    padding-bottom: var(--s-2);
    border-bottom: 2px solid var(--c-coral);
    display: inline-block;
    padding-right: var(--s-5);
}
.footer-partner-logos {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
}
@media (max-width: 720px) {
    .footer-partner-logos { grid-template-columns: repeat(2, 1fr); }
}
.footer-partner-logos a {
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    padding: 14px 18px;
    aspect-ratio: 16 / 6;
    transition: transform .2s ease, box-shadow .2s ease;
    border-radius: 4px;
}
.footer-partner-logos a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(0,0,0,0.5);
}
.footer-partner-logos img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
}
.footer-partners-note {
    margin: var(--s-4) 0 0;
    font-family: var(--f-display); font-size: 14px; font-weight: 700;
    letter-spacing: 0.05em;
}
.footer-partners-note a {
    color: var(--c-cream);
    border-bottom: 1px solid var(--c-coral);
    padding-bottom: 2px;
}
.footer-partners-note a:hover { color: var(--c-coral); }

/* ============================================
   ENTRANCE ANIMATIONS
   ============================================ */
@media (prefers-reduced-motion: no-preference) {
    .hero > * { animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
    .hero-title { animation-delay: .05s; }
    .hero-lead  { animation-delay: .25s; }

    .property-card { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
    .property-grid > :nth-child(1) { animation-delay: .05s; }
    .property-grid > :nth-child(2) { animation-delay: .1s; }
    .property-grid > :nth-child(3) { animation-delay: .15s; }
    .property-grid > :nth-child(4) { animation-delay: .2s; }
    .property-grid > :nth-child(5) { animation-delay: .25s; }
    .property-grid > :nth-child(6) { animation-delay: .3s; }
    .property-grid > :nth-child(7) { animation-delay: .35s; }
    .property-grid > :nth-child(8) { animation-delay: .4s; }
}
@keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 880px) {
    .site-header > .container { grid-template-columns: 1fr; gap: var(--s-3); }
    .site-nav ul { justify-content: flex-start; }
    .search-bar {
        grid-template-columns: 1fr;
        padding: var(--s-4);
        border-radius: 4px;
    }
    .search-bar .label { border-right: 0; border-bottom: var(--rule); padding-right: 0; padding-bottom: var(--s-3); }
    .section-head { grid-template-columns: 1fr; gap: var(--s-2); align-items: start; }
}

/* ============================================
   MOBILE POLISH (≤720px)
   - 縦方向の余白圧縮・検索フォームのグリッド化・
     物件カードの横型化でスマホの一覧性を上げる。
   - PC 表示には影響しない。
   ============================================ */
@media (max-width: 720px) {
    body { font-size: 16px; line-height: 1.75; }

    /* --- 全体の縦リズムを詰める --- */
    .site-main { padding: var(--s-4) 0 var(--s-6); }
    .property-section { margin-bottom: var(--s-7); }
    .section-head { margin-bottom: var(--s-4); padding-bottom: var(--s-3); }
    .section-title { font-size: 22px; }
    .section-more { font-size: 14px; }
    .page-title { margin-bottom: var(--s-5); }
    .page-title h1, .page-title h2 { font-size: 28px; }
    .result-count { margin-bottom: var(--s-4); }

    /* --- ヒーロー: カードを写真に少し重ねて一体感を出す --- */
    .hero { margin-bottom: var(--s-6); }
    .hero--with-bg { padding-bottom: var(--s-3); }
    .hero--with-bg .hero-inner {
        margin-top: -30px;
        padding: var(--s-4) var(--s-4) var(--s-4);
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 6px;
    }
    .hero-title { margin-bottom: var(--s-2); }
    .hero-lead { font-size: 13px; line-height: 1.75; }

    /* --- 検索フォーム: 2カラムのグリッドでコンパクトに --- */
    .search-bar { margin-bottom: var(--s-6); gap: var(--s-3); }
    .search-bar .label {
        font-size: 14px;
        padding-bottom: var(--s-2);
        letter-spacing: 0.18em;
    }
    .search-fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--s-3) var(--s-4);
        align-items: end;
    }
    .search-fields label { font-size: 12px; gap: 3px; }
    .search-fields select,
    .search-fields input {
        /* 16px 未満にすると iOS がフォーカス時に拡大するので維持 */
        font-size: 16px;
        min-width: 0;
        width: 100%;
        padding: 8px 4px;
    }
    .search-fields .search-field-sub select { min-width: 0; }
    .search-fields .search-field-q { grid-column: 1 / -1; }
    .search-submit {
        grid-column: 1 / -1;
        width: 100%;
        padding: 14px;
        margin-top: var(--s-1);
    }
    .kw-helper { grid-column: 1 / -1; margin-top: 2px; }
    .kw-live-num { font-size: 32px; }

    /* --- フッター: 本文前後の大きな空白を圧縮 --- */
    .site-footer { margin-top: var(--s-5); padding: var(--s-6) 0 var(--s-5); }
    .footer-partners { margin-bottom: var(--s-5); }
    .footer-partners-heading { font-size: 16px; }
    .footer-inner { gap: var(--s-5); }
    .footer-brand .jp { font-size: 20px; margin-bottom: var(--s-3); }
    .footer-brand .tagline { font-size: 14px; line-height: 1.8; }
    .footer-meta { font-size: 14px; line-height: 1.8; }
    .footer-rule { margin: var(--s-5) 0 var(--s-3); }
    .footer-base { font-size: 12px; }

    /* --- 物件詳細: カード内余白と文字サイズを最適化 --- */
    .detail-header { margin-bottom: var(--s-5); padding-bottom: var(--s-4); }
    .detail-eyebrow { font-size: 13px; }
    .detail-eyebrow .sep { margin: 0 6px; }
    .detail-intro {
        padding: 36px var(--s-4) var(--s-4);
        font-size: 15px;
        line-height: 1.85;
        margin: 14px 0 var(--s-4);
    }
    .detail-intro::after { font-size: 64px; bottom: -14px; right: 10px; }
    .detail-address { font-size: 15px; }
    .detail-layout { gap: var(--s-5); }
    .gallery-hero { margin-bottom: var(--s-5); }
    .gallery-thumbs {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    .detail-description, .detail-pano, .detail-map {
        padding: var(--s-4);
        margin-top: var(--s-5);
    }
    .detail-description h3, .detail-pano h3, .detail-map h3 { font-size: 18px; }
    .detail-description p { font-size: 15px; line-height: 1.85; }
    .detail-map-frame iframe { height: 300px; }
    .back-link { margin-top: var(--s-5); }

    /* スペック表の行間を詰めて表全体を短く */
    .spec-table th, .spec-table td { padding: 10px 0; }
    .spec-table th { padding-right: var(--s-3); }
    .spec-price { margin-bottom: var(--s-4); padding-bottom: var(--s-4); }

    /* ナビのタップ領域を広げる(見た目は変えず) */
    .site-nav a { padding: 10px 2px; }
}

/* --- 物件カード: スマホは横型(写真左・情報右)で一覧性を優先 --- */
@media (max-width: 600px) {
    .property-grid {
        grid-template-columns: 1fr;
        gap: var(--s-3);
    }
    .property-card a {
        display: grid;
        grid-template-columns: 38% 1fr;
        align-items: stretch;
    }
    .card-media {
        aspect-ratio: auto;
        height: 100%;
        min-height: 128px;
    }
    .card-tag {
        left: 0; right: auto; bottom: 8px;
        font-size: 11px;
        padding: 3px 9px;
        letter-spacing: 0.06em;
    }
    .card-body {
        padding: var(--s-3) var(--s-4);
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .card-area { font-size: 11px; margin-bottom: 4px; }
    .card-title {
        font-size: 15px;
        line-height: 1.45;
        min-height: 0;
        margin-bottom: 6px;
    }
    .card-price { font-size: 20px; margin-bottom: 6px; }
    .card-price .unit { font-size: 12px; }
    .card-addr {
        font-size: 12px;
        line-height: 1.5;
        padding-top: 6px;
        margin-top: auto;
    }
}

/* ============================================
   類似の物件 (詳細ページのレコメンド)
   ============================================ */
.detail-similar {
    margin-top: var(--s-7);
}
.detail-similar h3 {
    font-family: var(--f-display); font-weight: 900;
    font-size: 22px; color: var(--c-deep);
    margin: 0 0 var(--s-5);
    padding-left: var(--s-3);
    border-left: 4px solid var(--c-deep);
}
/* Amazon 風カルーセル: 3枚表示 + 左右矢印 (最大20件をスクロール) */
.similar-carousel {
    position: relative;
}
.similar-track {
    list-style: none; padding: 4px 2px; margin: 0;
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    /* mandatory はボタンの smooth スクロールと衝突してスナップバックするため
       proximity にする (スワイプ時はカード境界に吸着、ボタン操作は JS が境界へ) */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;           /* Firefox */
}
.similar-track::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
.similar-track > .property-card {
    flex: 0 0 calc((100% - 2 * var(--s-4)) / 3);  /* PC: 3枚ぴったり */
    scroll-snap-align: start;
    min-width: 0;
}
.sc-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5;
    width: 44px; height: 64px;
    border: 1px solid #d5d5d5; border-radius: 8px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    font-size: 30px; line-height: 1; color: #333;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .15s ease, box-shadow .15s ease;
}
.sc-btn:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(0, 0, 0, .28); }
.sc-btn:disabled { opacity: .25; cursor: default; }
.sc-prev { left: -14px; }
.sc-next { right: -14px; }
@media (max-width: 768px) {
    /* スマホ: 1.3枚見せて「続きがある」ことを示す。スワイプ操作が主 */
    .similar-track > .property-card {
        flex: 0 0 76%;
    }
    .sc-btn { width: 36px; height: 52px; font-size: 24px; }
    .sc-prev { left: -8px; }
    .sc-next { right: -8px; }
}

/* ============================================
   物件一覧のページ送り (50件超で表示)
   ============================================ */
.pagination {
    display: flex; align-items: center; justify-content: center;
    gap: var(--s-5);
    margin: var(--s-7) 0 var(--s-5);
}
.pagination .page-btn {
    display: inline-block;
    padding: 10px 22px;
    border: 1px solid var(--c-deep);
    border-radius: 6px;
    color: var(--c-deep);
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.pagination a.page-btn:hover {
    background: var(--c-deep); color: #fff;
}
.pagination .page-btn.is-disabled {
    opacity: .3; border-color: #999; color: #666; cursor: default;
}
.pagination .page-status {
    font-weight: 700; color: var(--c-deep);
    font-variant-numeric: tabular-nums;
}
.result-page { color: #666; font-size: 13px; margin-left: 8px; }

/* ============================================
   物件の印刷 (A4横1枚: 間取り + 地図を大きく)
   ============================================ */
/* 画面上の「印刷する」ボタン */
.detail-actions { margin-top: var(--s-4); }
.print-btn {
    -webkit-appearance: none; appearance: none;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--f-display); font-weight: 900; font-size: 14px;
    color: #fff; background: var(--c-deep);
    border: 0; border-radius: 6px; padding: 10px 16px;
    cursor: pointer; letter-spacing: .02em;
    box-shadow: 0 6px 16px -10px rgba(10,58,94,.6);
    transition: background .2s ease, transform .1s ease;
}
.print-btn:hover { background: var(--c-coral); }
.print-btn:active { transform: translateY(1px); }
.print-btn-ico { font-size: 16px; }

/* 印刷シート: 画面では画面外(left:-10000px)に置くが、印刷時と同じ寸法 (A4横の
   印刷可能領域 = @page の余白を除いた 297-30 × 210-16 = 267×194mm。高さは少し小さく 190mm) で組んでおく。
   こうすると画像が実寸で先読みされ、JS (detail.html の fitSheet) が画面外で計算した
   パネル高さ・文字サイズがそのまま印刷にも当てはまる。 */
.print-sheet {
    --ps-fs: 11px;               /* 詳細情報の基準文字サイズ (収まらない時は JS が縮める) */
    position: absolute;
    left: -10000px;
    top: 0;
    width: 267mm;
    height: 190mm;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;            /* あふれても2ページ目に流さない */
    display: flex;
    flex-direction: column;
    gap: 3mm;
    background: #fff;
    color: #111;
    pointer-events: none;
}
.ps-intro { margin: 0; font-size: 11px; line-height: 1.5; color: #333; }
.ps-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8mm;
           border-bottom: 2px solid var(--c-deep); padding-bottom: 3mm; }
.ps-eyebrow { margin: 0 0 1mm; font-size: 10px; color: #555; letter-spacing: .04em; }
.ps-title { margin: 0; font-family: var(--f-display); font-weight: 900;
            font-size: 20px; line-height: 1.2; color: var(--c-deep); }
.ps-addr { margin: 1.5mm 0 0; font-size: 12px; color: #333; }
.ps-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2mm; flex: none; }
.ps-price { text-align: right; white-space: nowrap; }
.ps-price-label { display: block; font-size: 10px; color: #555; }
.ps-price-val { font-family: var(--f-display); font-weight: 900; font-size: 22px; color: var(--c-coral); }
.ps-price-val small { font-size: 12px; color: #333; margin-left: 1px; }
/* 物件番号を太字で目立たせるバッジ */
.ps-idbox { display: flex; align-items: baseline; gap: 4px; white-space: nowrap;
            border: 1.5px solid var(--c-deep); border-radius: 2mm; padding: 1mm 2.5mm; }
.ps-idbox span { font-size: 9px; font-weight: 700; color: #555; }
.ps-idbox strong { font-family: var(--f-display); font-size: 15px; font-weight: 900;
                   color: var(--c-deep); letter-spacing: .02em; }
/* 間取り図・外観写真・地図を横一列。各パネルの幅は画像の縦横比に比例 (JS が flex-grow と
   行の高さを設定: 全パネルが同じ高さで幅いっぱいに並び、上下左右に余白が出ない)。
   JS 前の初期値は等分 + 高さ 95mm。 */
.ps-panels { flex: none; display: flex; align-items: stretch; gap: 1.5mm; height: 95mm; }
.ps-panel { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 0;
            border: 1px solid #bbb; border-radius: 2mm; overflow: hidden; background: #fff; }
/* 見出し帯 (高さは JS がパネル高さの計算に足し込む) */
.ps-panel figcaption { flex: none; font-size: 10px; font-weight: 700; color: #fff;
                       background: var(--c-deep); padding: 1.2mm 3mm; letter-spacing: .06em; }
.ps-panel img, .ps-panel iframe {
    flex: 1; width: 100%; height: 100%; min-height: 0;
    object-fit: contain; border: 0; background: #fff; display: block;
}
.ps-panel img { padding: 1mm; box-sizing: border-box; }
/* 全詳細情報: 残りの高さを使う。項目は 3 列の表 (ラベル | 値)、長文は全幅の行。
   極端に長い入力で JS の縮小 (文字 8.5px・冒頭文省略・パネル 40mm) でも収まらない場合のみ末尾が切れる。
   文字サイズは --ps-fs (既定 11px。収まらない物件は JS が 8.5px まで段階的に縮める) */
.ps-info { flex: 1; min-height: 0; overflow: hidden; padding-top: 2mm; border-top: 1px solid #ccc;
           font-size: var(--ps-fs); }
.ps-info-inner { display: flex; flex-direction: column; gap: 1.5mm; }
.ps-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5mm 6mm; list-style: none;
            margin: 0; padding: 0; }
.ps-specs li { display: flex; gap: 2mm; align-items: baseline; font-size: 1em; line-height: 1.45; color: #111;
               border-bottom: 1px dotted #cfcfcf; padding-bottom: 0.4mm; }
.ps-specs li span { flex: none; width: 24mm; font-weight: 700; color: #555; font-size: .92em; }
.ps-notes { display: flex; flex-direction: column; gap: 0.6mm; }
.ps-notes p { display: flex; gap: 2mm; align-items: baseline; margin: 0; font-size: 1em; line-height: 1.45; color: #111; }
.ps-notes p span { flex: none; width: 24mm; font-weight: 700; color: #555; font-size: .92em; }
/* 地図パネル: iframe を埋め、中心に自前ピンを重ねる(印刷でピンが消えない) */
.ps-map-body { position: relative; flex: 1; min-height: 0; display: flex; }
.ps-map-pin {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -100%);   /* ピン先端を中心(=物件位置)に合わせる */
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
}
.ps-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 2mm; color: #666; font-size: 12px; text-align: center; padding: 4mm; }
.ps-empty-addr { margin: 0; font-weight: 700; color: #333; font-size: 14px; }
.ps-empty-note { margin: 0; font-size: 11px; }
.ps-foot { flex: none; display: flex; justify-content: space-between; gap: 6mm;
           border-top: 1px solid #ccc; padding-top: 2mm; font-size: 10.5px; color: #444; }
.ps-broker { font-weight: 700; color: #222; }

/* 余白はページ側で確保し、シート本体は印刷可能領域(210-16=194mm)に収める */
/* 上下8mm・左右15mm。左右をやや広めにして端の切れ/詰まりを防ぐ */
@page { size: A4 landscape; margin: 8mm 15mm; }

@media print {
    /* サイトの装飾・通常本文はすべて隠し、印刷シートだけを本来の位置に出す */
    .site-header, .site-footer, .detail-header, .detail-layout,
    .detail-similar, .back-link, .lightbox, .no-print { display: none !important; }
    .site-main { padding: 0 !important; margin: 0 !important; }
    .container { max-width: none !important; padding: 0 !important; margin: 0 !important; }
    .detail { margin: 0 !important; padding: 0 !important; }
    body { background: #fff !important; margin: 0 !important; }
    html { margin: 0 !important; }
    /* シートはページ余白の内側にぴったり収める(全高だと端数で2ページ目に溢れる) */
    .print-sheet {
        position: static !important;
        left: auto !important;
        width: 100% !important;
        height: 190mm !important;      /* 印刷可能高さ194mmより気持ち小さく=1ページ厳守 */
        padding: 0 !important;         /* 余白は @page 側で確保済み */
        overflow: hidden !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
}

/* 404 ページ (templates/404.html) */
.error-page { max-width: 720px; margin: 48px auto 72px; padding: 0 20px; text-align: center; }
.error-code { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: 64px; line-height: 1; color: var(--c-deep); }
.error-title { margin: 12px 0 8px; font-family: var(--f-display); font-size: 24px; color: var(--c-deep); }
.error-lead { margin: 0 0 24px; line-height: 1.8; color: #444; }
.error-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.error-links a { display: inline-block; padding: 10px 18px; border: 1.5px solid var(--c-deep); border-radius: 999px;
                 color: var(--c-deep); font-weight: 700; text-decoration: none; }
.error-links a:hover { background: var(--c-deep); color: #fff; }