* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Meiryo', sans-serif; }
#map { width: 100%; height: calc(100vh - 52px); margin-top: 52px; }

/* GPU アクセラレーション: 描画のちらつき・破れ防止 */
#map {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.leaflet-tile-pane,
.leaflet-overlay-pane {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.leaflet-tile {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.leaflet-fade-anim .leaflet-tile,
.leaflet-fade-anim .leaflet-popup {
    will-change: opacity;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
    will-change: transform;
}

/* ===== Header Bar ===== */
.app-header {
    position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 1200;
    background: rgba(15,23,42,0.88);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 14px; gap: 12px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.25);
}
.app-header-left {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.app-header-logo {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 8px;
    background: white; transition: opacity 0.2s; overflow: hidden;
}
.app-header-logo:hover { opacity: 0.85; }
.app-header-logo img { width: 36px; height: 36px; object-fit: contain; }
.app-header-title { display: flex; flex-direction: column; line-height: 1.2; }
.app-header-name {
    font-size: 14px; font-weight: bold; color: #fff; white-space: nowrap;
    letter-spacing: 0.3px;
}
.app-header-sub {
    font-size: 10px; color: rgba(255,255,255,0.85); white-space: nowrap;
}

/* Header Search */
.app-header-search {
    position: relative; flex: 1; max-width: 340px;
}
.app-header-search input {
    width: 100%; height: 34px; padding: 0 36px 0 12px;
    border: 1.5px solid rgba(255,255,255,0.2); border-radius: 8px;
    background: rgba(255,255,255,0.1); color: #fff;
    font-size: 13px; font-family: inherit; outline: none;
    transition: border-color 0.2s, background 0.2s;
}
.app-header-search input::placeholder { color: rgba(255,255,255,0.45); }
.app-header-search input:focus {
    border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.15);
}
.app-header-search button {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border: none; border-radius: 6px;
    background: transparent; color: rgba(255,255,255,0.7); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: 0.2s;
}
.app-header-search button:hover { background: rgba(255,255,255,0.15); color: #fff; }
.header-search-results {
    display: none; position: absolute; top: 40px; left: 0; right: 0;
    background: white; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    max-height: 260px; overflow-y: auto; z-index: 1300;
}
.header-search-results.open { display: block; }
.header-search-results .hsr-item {
    padding: 10px 14px; font-size: 13px; color: #333; cursor: pointer;
    border-bottom: 1px solid #f0f0f0; transition: background 0.15s;
}
.header-search-results .hsr-item:hover { background: #e8f0fe; }
.header-search-results .hsr-item:last-child { border-bottom: none; }
.header-search-results .hsr-msg {
    padding: 12px 14px; font-size: 12px; color: #999; text-align: center;
}

/* ===== アクセシビリティ ===== */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* キーボードフォーカス可視化（マウスクリック時は非表示） */
:focus-visible {
    outline: 3px solid #2980b9; outline-offset: 2px; border-radius: 4px;
}
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #2980b9; outline-offset: 2px;
}
/* チェックボックスのフォーカス */
input[type="checkbox"]:focus-visible { outline: 3px solid #2980b9; outline-offset: 1px; }
/* スライダーのフォーカス */
input[type="range"]:focus-visible { outline: 3px solid #2980b9; outline-offset: 2px; }
/* スキップリンク */
.skip-link {
    position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
    background: #1a3a6a; color: white; padding: 8px 20px; border-radius: 0 0 8px 8px;
    z-index: 9999; font-size: 14px; text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ===== Panels ===== */
.panel {
    position: absolute; z-index: 1000;
    background: rgba(255,255,255,0.97); border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    font-size: 13px; line-height: 1.6;
}

/* Info Panel — デスクトップではドロワー式 */
.info-panel {
    top: 52px; right: 0; bottom: 0; padding: 14px 18px 18px;
    width: 340px; max-width: 340px;
    border-radius: 0; overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 1050;
}
.info-panel.desktop-open { transform: translateX(0); }
.info-panel h1 { font-size: 15px; margin: 0 0 4px; color: #1a3a6a; font-weight: bold; line-height: 1.4; }
.info-panel p { color: #444; margin-bottom: 4px; }
.stats-badge {
    display: inline-block; background: #e8f0fe; color: #1a3a6a;
    padding: 2px 7px; border-radius: 4px; font-size: 11px; margin: 1px;
}
.area-btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin: 2px; padding: 6px 12px; min-height: 44px;
    background: #1a3a6a; color: white; border: none; border-radius: 6px;
    font-size: 11px; cursor: pointer; font-family: inherit; transition: 0.2s;
}
.area-btn:hover { background: #2a5a9a; }
.section-title { font-size: 12px; font-weight: bold; color: #1a3a6a; margin: 6px 0 3px; }

/* Layer Control — デスクトップでは折りたたみ式 */
.layer-panel {
    top: 52px; left: 0; bottom: 0; padding: 12px 16px 16px;
    width: 280px; max-width: 280px; max-height: none;
    border-radius: 0; overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 1050;
}
.layer-panel.desktop-open { transform: translateX(0); }
.layer-panel h3 { font-size: 13px; margin-bottom: 4px; color: #1a3a6a; }
.layer-group { margin-bottom: 4px; border-bottom: none; padding-bottom: 0; border-left: 3px solid transparent; border-radius: 4px; }
.layer-group:last-child { border-bottom: none; }
/* カテゴリ別カラーボーダー */
.layer-group.cat-analysis { border-left-color: #3b82f6; }
.layer-group.cat-official  { border-left-color: #22c55e; }
.layer-group.cat-info      { border-left-color: #94a3b8; }
/* カテゴリ区切りラベル */
.layer-section-label {
    font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: #8a9ab5; padding: 8px 6px 2px; margin-top: 4px;
    display: flex; align-items: center; gap: 6px;
}
.layer-section-label::after {
    content: ''; flex: 1; height: 1px; background: #e2e8f0;
}
.layer-section-label.sec-analysis { color: #3b82f6; }
.layer-section-label.sec-analysis::after { background: rgba(59,130,246,0.2); }
.layer-section-label.sec-official { color: #22c55e; }
.layer-section-label.sec-official::after { background: rgba(34,197,94,0.2); }
.layer-section-label.sec-info { color: #94a3b8; }
.layer-section-label.sec-info::after { background: rgba(148,163,184,0.2); }
/* アコーディオン見出し */
.layer-group-title {
    font-size: 12px; font-weight: 700; color: #1a3a6a;
    letter-spacing: 0.3px; margin-bottom: 0;
    padding: 9px 10px; border-radius: 0 8px 8px 0;
    background: #f0f4fa; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    user-select: none; -webkit-user-select: none;
    transition: background 0.2s;
    min-height: 44px;
}
.layer-group-title:hover { background: #e3ebf6; }
.layer-group-title::after {
    content: '▾'; font-size: 13px; color: #8a9ab5;
    transition: transform 0.25s;
}
.layer-group.collapsed .layer-group-title::after { transform: rotate(-90deg); }
.layer-group.collapsed .layer-group-title { background: #f7f8fa; color: #666; }
/* カテゴリ別のタイトルホバー色 */
.layer-group.cat-analysis .layer-group-title { background: #eff6ff; }
.layer-group.cat-analysis .layer-group-title:hover { background: #dbeafe; }
.layer-group.cat-analysis.collapsed .layer-group-title { background: #f8fafc; }
.layer-group.cat-official .layer-group-title { background: #f0fdf4; }
.layer-group.cat-official .layer-group-title:hover { background: #dcfce7; }
.layer-group.cat-official.collapsed .layer-group-title { background: #f8fdfb; }
.layer-group.cat-info .layer-group-title { background: #f8fafc; }
.layer-group.cat-info .layer-group-title:hover { background: #f1f5f9; }
.layer-group.cat-info.collapsed .layer-group-title { background: #fafbfc; }
/* アコーディオン中身 */
.layer-group-body {
    padding: 6px 4px 4px;
    max-height: 500px; overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.25s;
    opacity: 1;
}
.layer-group.collapsed .layer-group-body {
    max-height: 0; padding: 0 4px; opacity: 0;
}
/* ON数バッジ */
.layer-group-count {
    font-size: 10px; font-weight: 800; color: #fff;
    background: #1a3a6a; border-radius: 10px;
    padding: 1px 7px; margin-left: auto; margin-right: 8px;
    min-width: 14px; text-align: center;
    display: none;
}
.layer-group-count.has-count { display: inline-block; }
/* カテゴリ別バッジ色 */
.cat-analysis .layer-group-count { background: #3b82f6; }
.cat-official .layer-group-count  { background: #22c55e; }
.cat-info .layer-group-count      { background: #64748b; }
/* 常時展開（背景地図・プリセット）*/
.layer-group.always-open .layer-group-title::after { display: none; }
.layer-group.always-open .layer-group-title { cursor: default; background: transparent; padding: 4px 2px; color: #888; font-size: 11px; }
.layer-group.always-open .layer-group-title:hover { background: transparent; }
.layer-panel label { display: flex; align-items: center; margin-bottom: 0; cursor: pointer; color: #333; font-size: 12px; gap: 6px; min-height: 44px; padding: 10px 12px; border-radius: 6px; transition: background 0.15s; }
.layer-panel label:hover { background: rgba(26,58,106,0.04); }
.layer-panel label:active { background: rgba(26,58,106,0.08); }
.layer-panel input[type=checkbox] { margin: 0; flex-shrink: 0; width: 18px; height: 18px; }
.layer-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* レイヤー読込フィードバック */
.layer-status {
    width: 16px; height: 16px; flex-shrink: 0; margin-left: auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; line-height: 1;
}
.layer-spinner {
    width: 14px; height: 14px; border: 2px solid #ddd;
    border-top-color: #1a3a6a; border-radius: 50%;
    animation: layerSpin 0.6s linear infinite;
}
@keyframes layerSpin { to { transform: rotate(360deg); } }
.layer-check {
    color: #2e7d32; font-weight: bold; opacity: 0;
    animation: layerCheckIn 0.3s ease forwards;
}
@keyframes layerCheckIn {
    0% { opacity: 0; transform: scale(0.5); }
    60% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}
.layer-check.fade-out {
    animation: layerCheckOut 0.4s ease forwards;
}
@keyframes layerCheckOut {
    to { opacity: 0; transform: scale(0.5); }
}

/* レイヤートースト（地図上通知） */
.layer-toast {
    position: absolute; top: 58px; left: 50%; transform: translateX(-50%) translateY(-8px);
    z-index: 1100; background: rgba(26,58,106,0.92); color: #fff;
    padding: 7px 18px; border-radius: 20px; font-size: 12px; font-weight: bold;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25); opacity: 0;
    transition: opacity 0.25s, transform 0.25s; pointer-events: none;
    white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis;
}
.layer-toast.show {
    opacity: 1; transform: translateX(-50%) translateY(0);
}

/* デスクトップ用パネルトグルボタン（右側ボタン群に統合済み） */
.desktop-toggle-btn {
    display: none !important;
    position: absolute; top: 64px; z-index: 1060;
    width: 44px; height: 44px; border-radius: 10px;
    background: rgba(26,58,106,0.95); color: white; border: none;
    font-size: 18px; cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s;
}
.desktop-toggle-btn:hover { background: rgba(42,90,154,0.95); transform: scale(1.05); }
#toggleLayerBtn { left: 12px; }
#toggleInfoBtn { right: 12px; }
/* パネル展開時にボタンを移動 */
#toggleLayerBtn.shifted { left: 292px; }
#toggleInfoBtn.shifted { right: 352px; }
/* デスクトップ用閉じるボタン */
.desktop-close-btn {
    position: absolute; top: 8px; right: 8px;
    width: 44px; height: 44px; border-radius: 10px;
    background: #eee; border: none; color: #666; font-size: 16px;
    cursor: pointer; display: none; align-items: center; justify-content: center;
    z-index: 10;
}
.desktop-close-btn:hover { background: #ddd; color: #333; }
/* ハーフモーダル要素：デスクトップでは非表示 */
.half-modal-handle { display: none; }
.half-modal-overlay { display: none; }

/* レイヤー補足ヒント */
.layer-hint {
    font-size: 10px; color: #999; margin: -2px 0 4px 22px; line-height: 1.4;
}

/* プリセットボタン */
.preset-group { border-bottom: 2px solid #1a3a6a !important; padding-bottom: 10px !important; }
.preset-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 4px;
}
.preset-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #f7f7f7; border: 2px solid #e0e0e0; border-radius: 8px;
    padding: 8px 4px 6px; cursor: pointer; transition: all 0.2s; text-align: center;
    min-height: 44px;
}
.preset-btn:hover { border-color: #bbb; background: #f0f0f0; }
.preset-btn.preset-active {
    border-color: #1a3a6a; background: #e8f0fe;
    box-shadow: 0 0 0 1px #1a3a6a;
}
.preset-icon { font-size: 22px; line-height: 1; margin-bottom: 2px; }
.preset-label { font-size: 10px; color: #555; line-height: 1.3; }
.preset-btn.preset-active .preset-label { color: #1a3a6a; }

/* 背景地図セレクタ */
.basemap-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; margin-top: 2px;
}
.basemap-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #f5f5f5; border: 2px solid transparent; border-radius: 6px;
    padding: 6px 2px 5px; cursor: pointer; transition: all 0.15s;
    min-height: 44px; min-width: 44px;
}
.basemap-btn:hover { background: #e8f0fe; }
.basemap-btn.active {
    border-color: #1a3a6a; background: #e8f0fe;
}
.basemap-icon { font-size: 18px; line-height: 1; }
.basemap-label { font-size: 9px; color: #555; margin-top: 2px; font-weight: bold; white-space: nowrap; }
.basemap-btn.active .basemap-label { color: #1a3a6a; }

/* Legend - コンパクトアコーディオン */
.legend { position: absolute; bottom: 35px; left: 10px; z-index: 1000;
    background: rgba(255,255,255,0.97); border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18); font-size: 11px;
    max-width: 300px; width: auto; overflow: hidden;
    display: none; /* デフォルト非表示 — ボタンで展開 */ }
.legend.panel-open { display: block; }
.legend-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; cursor: pointer; user-select: none;
    background: #1a3a6a; color: white; font-size: 12px; font-weight: bold;
    min-height: 44px;
}
.legend-header:hover { background: #24497a; }
.legend-toggle-icon {
    font-size: 10px; transition: transform 0.2s; margin-left: 8px;
}
.legend.collapsed .legend-toggle-icon { transform: rotate(180deg); }
.legend-body {
    padding: 8px 12px 6px; max-height: 50vh; overflow-y: auto;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.legend.collapsed .legend-body {
    max-height: 0; padding: 0 12px; overflow: hidden;
}
.legend-count {
    background: rgba(255,255,255,0.25); padding: 1px 7px; border-radius: 10px;
    font-size: 10px; font-weight: normal; margin-left: 6px;
}
/* アコーディオン内セクション */
.legend-section { margin-bottom: 6px; border-bottom: 1px solid #eee; padding-bottom: 4px; }
.legend-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.legend-section-head {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; padding: 6px 4px; user-select: none; min-height: 44px;
    border-radius: 4px; transition: background 0.15s;
}
.legend-section-title {
    font-size: 11px; font-weight: bold; color: #1a3a6a; margin: 0;
}
.legend-section-arrow {
    font-size: 9px; color: #999; transition: transform 0.2s;
}
.legend-section.sec-collapsed .legend-section-arrow { transform: rotate(-90deg); }
.legend-section-body {
    overflow: hidden; max-height: 200px; transition: max-height 0.25s ease;
    padding-top: 2px;
}
.legend-section.sec-collapsed .legend-section-body {
    max-height: 0; padding-top: 0;
}
.legend-item { display: flex; align-items: center; margin-bottom: 2px; }
.legend-color { width: 22px; height: 12px; border-radius: 2px; margin-right: 6px;
    flex-shrink: 0; border: 1px solid rgba(0,0,0,0.1); }

/* Opacity */
.opacity-control { position: absolute; bottom: 35px; right: 60px; z-index: 1000;
    background: rgba(255,255,255,0.97); border-radius: 10px;
    padding: 10px 14px; box-shadow: 0 4px 24px rgba(0,0,0,0.18); font-size: 12px;
    display: none; /* デフォルト非表示 — ボタンで展開 */ }
.opacity-control.panel-open { display: block; }
.opacity-panel-title {
    font-size: 12px; font-weight: bold; color: #1a3a6a; margin-bottom: 6px;
    display: flex; align-items: center; gap: 5px;
}
.opacity-panel-hint {
    font-size: 9px; color: #999; font-weight: normal;
}
.opacity-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; min-height: 44px; }
.opacity-row label { font-size: 11px; color: #555; white-space: nowrap; min-width: 110px; }
.opacity-row input[type=range] { width: 100px; accent-color: #1a3a6a; height: 6px; cursor: pointer; }
/* 段階プリセットボタン */
.opacity-presets {
    display: none; /* デスクトップでは非表示 */
}
.opacity-preset-btn {
    border: 1px solid #ccc; background: #f5f5f5; color: #555;
    border-radius: 6px; padding: 4px 0; font-size: 10px; font-family: inherit;
    cursor: pointer; transition: 0.15s; flex: 1; text-align: center;
    min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.opacity-preset-btn.preset-active {
    background: #1a3a6a; color: #fff; border-color: #1a3a6a;
}
.opacity-preset-btn:active { transform: scale(0.95); }

/* Aikaku Logo */
.aikaku-logo {
    font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', sans-serif;
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ===== Marker Cluster Icons ===== */
/* クラスター: 物件=青系、写真=オレンジ系で明確に分離 */
.cluster-photo, .cluster-property {
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: bold;
    font-size: 14px; border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.cluster-photo { border-radius: 8px; } /* 写真クラスター: 角丸四角 */
.cluster-property { border-radius: 50%; } /* 物件クラスター: 丸 */
.cluster-photo.cluster-small   { width: 38px; height: 38px; background: #e67e22; }
.cluster-photo.cluster-medium  { width: 46px; height: 46px; background: #d35400; font-size: 15px; }
.cluster-photo.cluster-large   { width: 54px; height: 54px; background: #a04000; font-size: 16px; }
.cluster-property.cluster-small  { width: 40px; height: 40px; background: #1565c0; }
.cluster-property.cluster-medium { width: 48px; height: 48px; background: #0d47a1; font-size: 15px; }
.cluster-property.cluster-large  { width: 56px; height: 56px; background: #0a3275; font-size: 16px; }
/* デフォルトの MarkerCluster スタイルを上書き */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: none !important; }
.marker-cluster div { background: none !important; }

/* ===== カード型 物件マーカー (SUUMO/at home風) ===== */
.prop-card-marker {
    display: flex; flex-direction: column; align-items: center; cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.prop-card-marker:hover {
    opacity: 1;
}
/* ハザードレイヤーON時は物件マーカーを縮小して控えめに */
.hazard-active .prop-card-marker {
    transform: scale(0.85);
    opacity: 0.65;
}
.hazard-active .prop-card-marker:hover {
    opacity: 1;
    transform: scale(1);
}
/* ズーム15以下では価格ラベルを非表示（ピンのみ） */
.zoom-wide .prop-card-price {
    display: none;
}
.zoom-wide .prop-card-body {
    border-radius: 50%;
    width: 22px; height: 22px;
    justify-content: center;
}
.zoom-wide .prop-card-type {
    border-radius: 50%;
    padding: 0;
    width: 100%; height: 100%;
    font-size: 8px;
}
.zoom-wide .prop-card-arrow {
    border-left-width: 4px; border-right-width: 4px;
    border-top-width: 6px;
}
.prop-card-body {
    display: flex; align-items: center; gap: 0;
    background: #fff; border: 2px solid #1565c0; border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    height: 28px; white-space: nowrap; overflow: hidden;
    transition: border-radius 0.2s, width 0.2s, height 0.2s;
}
.prop-card-type {
    display: flex; align-items: center; justify-content: center;
    background: #1565c0; color: #fff;
    font-size: 9px; font-weight: bold; padding: 0 5px;
    height: 100%; letter-spacing: 0.3px;
    transition: border-radius 0.2s, padding 0.2s;
}
.prop-card-price {
    font-size: 11px; font-weight: bold; color: #333;
    padding: 0 6px; line-height: 1;
}
.prop-card-arrow {
    width: 0; height: 0; margin-top: -1px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #1565c0;
    transition: border-width 0.2s;
}

/* ===== 写真ピンマーカー (オレンジ角丸) ===== */
.photo-pin-marker {
    display: flex; flex-direction: column; align-items: center; cursor: pointer;
}
.photo-pin-body {
    width: 32px; height: 32px; border-radius: 8px;
    border: 2.5px solid #fff; background: #e67e22;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.photo-pin-arrow {
    width: 0; height: 0; margin-top: -3px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #e67e22;
}

/* Photo Popup */
.photo-popup { max-width: 320px; }
.photo-popup img { width: 100%; max-height: 220px; object-fit: cover;
    border-radius: 8px; margin-bottom: 8px; cursor: pointer; }
.photo-popup .photo-title { font-weight: bold; font-size: 14px; color: #1a3a6a; margin-bottom: 4px; }
.photo-popup .photo-date { font-size: 11px; color: #888; margin-bottom: 4px; }
.photo-popup .photo-desc { font-size: 12px; color: #444; line-height: 1.5; }
.photo-popup .photo-depth { display: inline-block; background: #1a3a6a; color: white;
    padding: 2px 8px; border-radius: 4px; font-size: 11px; margin-top: 4px; }

/* 写真ギャラリー（ポップアップ内） */
.pin-gallery {
    position: relative; width: 100%; margin-bottom: 8px;
}
.pin-gallery-slide img {
    width: 100%; max-height: 220px; object-fit: cover;
    border-radius: 8px; cursor: pointer;
}
.pin-gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border: none; border-radius: 50%;
    background: rgba(0,0,0,0.5); color: white; font-size: 16px; line-height: 28px;
    text-align: center; cursor: pointer; z-index: 10; padding: 0;
    transition: background 0.2s;
}
.pin-gallery-nav:hover { background: rgba(0,0,0,0.75); }
.pin-gallery-prev { left: 6px; }
.pin-gallery-next { right: 6px; }
.pin-gallery-counter {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.55); color: white; font-size: 11px; font-weight: 600;
    padding: 2px 10px; border-radius: 12px;
}

/* 複数写真入力UI（パネル内） */
.pin-photos-container {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px;
    min-height: 36px; padding: 6px; border: 1px dashed #ccc; border-radius: 8px;
    background: #fafafa;
}
.pin-photos-empty {
    width: 100%; text-align: center; color: #aaa; font-size: 11px; padding: 8px 0;
}
.pin-photo-thumb {
    position: relative; width: 64px; height: 64px; border-radius: 6px; overflow: hidden;
    border: 2px solid #e0e0e0; flex-shrink: 0;
}
.pin-photo-thumb img {
    width: 100%; height: 100%; object-fit: cover; cursor: pointer;
}
.pin-photo-remove {
    position: absolute; top: 1px; right: 1px; width: 18px; height: 18px;
    background: rgba(231,76,60,0.85); color: white; border: none; border-radius: 50%;
    font-size: 10px; line-height: 18px; text-align: center; cursor: pointer; padding: 0;
}
.pin-photo-remove:hover { background: #c0392b; }
.pin-photo-move {
    position: absolute; bottom: 1px; left: 1px; width: 18px; height: 18px;
    background: rgba(0,0,0,0.5); color: white; border: none; border-radius: 50%;
    font-size: 9px; line-height: 18px; text-align: center; cursor: pointer; padding: 0;
}
.pin-photo-move:hover { background: rgba(0,0,0,0.75); }
.pin-photo-move-right { left: auto; right: 1px; }
.pin-photo-add-row {
    display: flex; gap: 6px; align-items: center;
}
.btn-photo-add {
    padding: 6px 12px; background: #1a3a6a; color: white; border: none;
    border-radius: 6px; font-size: 12px; font-weight: bold; cursor: pointer;
    white-space: nowrap; font-family: inherit;
}
.btn-photo-add:hover { background: #2a5a9a; }

/* Add Photo Panel */
.add-photo-panel {
    position: absolute; top: 50%; left: 50%; z-index: 2000; transform: translate(-50%, -50%);
    background: white; border-radius: 16px; padding: 24px 28px; max-width: 420px; width: 90%;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3); display: none;
}
.add-photo-panel h3 { font-size: 16px; color: #1a3a6a; margin-bottom: 12px; }
.add-photo-panel label { display: block; font-size: 12px; color: #555; margin: 6px 0 2px; }
.add-photo-panel input[type=text], .add-photo-panel input[type=date],
.add-photo-panel input[type=number], .add-photo-panel textarea, .add-photo-panel select {
    width: 100%; padding: 7px 9px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px; font-family: inherit;
}
.add-photo-panel textarea { height: 55px; resize: vertical; }
.add-photo-panel .btn-row { display: flex; gap: 8px; margin-top: 12px; }
.btn { flex: 1; padding: 9px; border: none; border-radius: 8px; font-size: 13px; cursor: pointer; font-family: inherit; font-weight: bold; }
.btn-primary { background: #1a3a6a; color: white; }
.btn-primary:hover { background: #2a5a9a; }
.btn-secondary { background: #e0e0e0; color: #333; }
.btn-danger { background: #e74c3c; color: white; font-size: 12px !important; padding: 6px 10px !important; }
/* 位置変更ボタン */
.relocate-btn {
    display: none; padding: 4px 10px; font-size: 11px; font-weight: bold;
    background: #fff3e0; color: #e65100; border: 1.5px solid #e65100;
    border-radius: 6px; cursor: pointer; white-space: nowrap;
    transition: 0.2s; font-family: inherit; min-height: 32px;
}
.relocate-btn:hover { background: #e65100; color: white; }
/* 位置変更モード時のヒントバナー */
#clickHint.relocate-mode {
    background: linear-gradient(135deg, #e65100, #f57c00) !important;
    animation: relocatePulse 2s ease infinite;
}
@keyframes relocatePulse {
    0%,100% { box-shadow: 0 2px 12px rgba(230,81,0,0.3); }
    50% { box-shadow: 0 2px 24px rgba(230,81,0,0.6); }
}
.overlay-bg { position: fixed; top:0;left:0;width:100%;height:100%; background:rgba(0,0,0,0.4); z-index:1999; display:none; }

/* Fullscreen */
.fullscreen-overlay { position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);
    z-index:3000;display:none;align-items:center;justify-content:center;cursor:pointer; }
.fullscreen-overlay img { max-width:95%;max-height:95%;object-fit:contain;border-radius:8px; }

/* Export */
.export-panel { position:absolute;top:50%;left:50%;z-index:2000;transform:translate(-50%,-50%);
    background:white;border-radius:16px;padding:24px 28px;max-width:500px;width:90%;
    box-shadow:0 8px 40px rgba(0,0,0,0.3);display:none; }
.export-panel h3 { font-size:16px;color:#1a3a6a;margin-bottom:12px; }
.export-panel pre { background:#f5f5f5;border:1px solid #ddd;border-radius:8px;
    padding:12px;font-size:11px;max-height:300px;overflow:auto;white-space:pre-wrap;word-break:break-all; }

/* Click Hint */
#clickHint { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1500;
    background:rgba(231,76,60,0.92);color:white;padding:16px 28px;border-radius:12px;
    font-size:15px;font-weight:bold;box-shadow:0 4px 20px rgba(0,0,0,0.3);display:none;
    pointer-events:none;text-align:center; }

/* ===== Tutorial Overlay ===== */
.tutorial-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5000; display: none;
}
.tutorial-overlay.active { display: flex; align-items: center; justify-content: center; }
.tutorial-backdrop {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10,20,40,0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    transition: opacity 0.3s;
}
.tutorial-card {
    position: relative; z-index: 5001;
    background: white; border-radius: 24px; padding: 0;
    max-width: 440px; width: 92%; box-shadow: 0 16px 70px rgba(0,0,0,0.35);
    animation: tutSlideUp 0.4s cubic-bezier(.22,.68,0,1.1);
    max-height: 88vh; overflow-y: auto; overflow-x: hidden;
}
@keyframes tutSlideUp {
    from { opacity: 0; transform: translateY(40px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Card header area with gradient */
.tut-header {
    background: linear-gradient(135deg, #1a3a6a 0%, #2980b9 60%, #5dade2 100%);
    padding: 28px 24px 20px; text-align: center; position: relative;
    border-radius: 24px 24px 0 0;
}
.tut-header .tut-icon { font-size: 52px; line-height: 1; margin-bottom: 8px; }
.tut-header h2 { font-size: 19px; color: white; font-weight: 900; margin: 0; }
.tut-header .tut-step-label {
    display: inline-block; margin-top: 6px; background: rgba(255,255,255,0.2);
    padding: 2px 14px; border-radius: 12px; font-size: 11px; color: rgba(255,255,255,0.85);
}
.tut-close-btn {
    position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
    border-radius: 50%; border: none; background: rgba(255,255,255,0.2);
    color: white; font-size: 18px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; transition: 0.2s;
}
.tut-close-btn:hover { background: rgba(255,255,255,0.35); }

/* Card body */
.tut-body { padding: 20px 24px 10px; }
.tut-body .tut-desc {
    font-size: 13px; color: #444; line-height: 1.85; margin-bottom: 14px;
}
.tut-body .tut-desc .tut-key {
    display: inline-block; background: #e8f0fe; color: #1a3a6a;
    padding: 2px 10px; border-radius: 6px; font-size: 12px; font-weight: bold;
    margin: 1px 2px; white-space: nowrap;
}

/* Visual illustration boxes */
.tut-illust {
    background: #f5f8fc; border-radius: 14px; border: 1px solid #e4eaf2;
    padding: 16px; margin: 12px 0 14px; text-align: center;
}
.tut-color-bar {
    display: flex; border-radius: 8px; overflow: hidden; height: 30px; margin: 8px 0;
}
.tut-color-bar div {
    flex: 1; display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: white; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.tut-pin-row {
    display: flex; justify-content: center; gap: 20px; margin: 8px 0;
}
.tut-pin-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tut-pin-circle {
    width: 38px; height: 38px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 18px;
    border: 2px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.tut-pin-label { font-size: 11px; font-weight: 700; }
.tut-layer-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0;
}
.tut-layer-item {
    display: flex; align-items: center; gap: 8px; background: white;
    border: 1px solid #e4eaf2; padding: 8px 10px; border-radius: 10px; font-size: 12px;
}
.tut-layer-item .tl-icon { font-size: 20px; }
.tut-mobile-tip {
    background: linear-gradient(135deg, #f0f4ff, #e8f0fe); border-radius: 10px;
    padding: 10px 14px; margin: 10px 0; border-left: 3px solid #5dade2;
    font-size: 12px; color: #1a3a6a;
}
.tut-mobile-tip strong { display: block; margin-bottom: 2px; font-size: 11px; }

/* Progress bar */
.tut-progress-wrap { padding: 0 24px; }
.tut-progress-bar {
    width: 100%; height: 5px; background: #e8edf2; border-radius: 3px;
    overflow: hidden; margin-bottom: 4px;
}
.tut-progress-fill {
    height: 100%; background: linear-gradient(90deg, #1a3a6a, #5dade2);
    border-radius: 3px; transition: width 0.4s ease;
}
.tut-progress-label {
    font-size: 10px; color: #999; text-align: right;
}

/* Buttons */
.tut-footer { padding: 12px 24px 22px; display: flex; gap: 10px; justify-content: center; }
.tut-footer button {
    padding: 11px 28px; border: none; border-radius: 12px;
    font-size: 14px; font-family: inherit; font-weight: bold;
    cursor: pointer; transition: all 0.2s;
}
.tut-btn-next { background: #1a3a6a; color: white; }
.tut-btn-next:hover { background: #2a5a9a; transform: translateY(-1px); }
.tut-btn-skip { background: transparent; color: #999; border: 1.5px solid #ddd !important; }
.tut-btn-skip:hover { background: #f5f5f5; color: #555; }
.tut-btn-start {
    background: linear-gradient(135deg, #2e7d32, #43a047); color: white;
    font-size: 16px !important; padding: 13px 40px !important;
    border-radius: 30px !important; box-shadow: 0 4px 16px rgba(46,125,50,0.3);
}
.tut-btn-start:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(46,125,50,0.4); }

/* ===== Map Action Buttons (右下丸ボタン群) ===== */
.map-action-btns {
    position: absolute; top: 64px; right: 12px; z-index: 1000;
    display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.map-action-btn {
    width: 44px; height: 44px; border-radius: 50%;
    background: white; border: none; cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.22);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; color: #1a3a6a; position: relative;
}
.map-action-btn:hover { background: #e8f0fe; transform: scale(1.08); }
.map-action-btn:active { transform: scale(0.95); }
/* 第3層ボタン: やや小さく、やや控えめ */
.map-action-btn.map-action-tertiary {
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 1px 6px rgba(0,0,0,0.18);
    color: #446;
}
.map-action-btn.map-action-tertiary:hover { background: #e8f0fe; color: #1a3a6a; }
.map-action-btn.map-action-tertiary.active {
    background: #1a3a6a; color: white;
    box-shadow: 0 2px 10px rgba(26,58,106,0.35);
}
/* セパレーター */
.map-action-sep {
    width: 24px; height: 1px; background: rgba(0,0,0,0.12); margin: 2px 0;
}
/* ホバーラベル（デスクトップ）: Google Maps風スライドイン */
.map-action-btn .btn-label {
    position: absolute; right: calc(100% + 10px); top: 50%;
    background: rgba(15,23,42,0.92); color: #fff;
    font-size: 11px; font-weight: 600; white-space: nowrap;
    padding: 6px 12px; border-radius: 6px;
    pointer-events: none; opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.4,0,0.2,1), transform 0.25s cubic-bezier(0.4,0,0.2,1);
    transform: translateY(-50%) translateX(8px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    letter-spacing: 0.02em;
}
/* 三角矢印（右向き） */
.map-action-btn .btn-label::after {
    content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
    border: 5px solid transparent; border-left-color: rgba(15,23,42,0.92);
}
.map-action-btn:hover .btn-label,
.map-action-btn:focus-visible .btn-label {
    opacity: 1; transform: translateY(-50%) translateX(0);
}
/* active状態（パネルオープン時）もラベル色を合わせる */
.map-action-btn.active .btn-label {
    background: rgba(26,58,106,0.95);
}
.map-action-btn.active .btn-label::after {
    border-left-color: rgba(26,58,106,0.95);
}
/* 初回ツールチップアニメーション — 全ボタン段階表示 */
.map-action-btn .btn-label.first-visit-hint {
    opacity: 1; transform: translateY(-50%) translateX(0);
    animation: hintSlideInOut 4s ease forwards;
}
@keyframes hintSlideInOut {
    0% { opacity: 0; transform: translateY(-50%) translateX(8px); }
    10% { opacity: 1; transform: translateY(-50%) translateX(0); }
    70% { opacity: 1; transform: translateY(-50%) translateX(0); }
    100% { opacity: 0; transform: translateY(-50%) translateX(8px); pointer-events: none; }
}
.map-action-btn.locating { animation: locatePulse 1.2s ease-in-out infinite; }
@keyframes locatePulse {
    0%,100% { box-shadow: 0 2px 10px rgba(0,0,0,0.22); }
    50% { box-shadow: 0 0 0 8px rgba(26,58,106,0.15), 0 2px 10px rgba(0,0,0,0.22); }
}

/* Share toast */
.share-toast {
    position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: rgba(26,58,106,0.95); color: white; padding: 10px 24px;
    border-radius: 24px; font-size: 13px; font-weight: bold; z-index: 6000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3); opacity: 0; transition: all 0.3s;
    pointer-events: none; white-space: nowrap;
}
.share-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== シェアモーダル（Web Share API非対応環境用）===== */
.share-modal-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 8000; align-items: flex-end; justify-content: center;
}
.share-modal-overlay.open { display: flex; }
.share-modal-backdrop {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(2px);
}
.share-modal-card {
    position: relative; background: white; border-radius: 16px 16px 0 0;
    width: 100%; max-width: 400px;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.2);
    animation: shareSlideUp 0.25s ease-out;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
@keyframes shareSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.share-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 8px; font-size: 15px; font-weight: bold; color: #1a3a6a;
}
.share-modal-close {
    background: none; border: none; font-size: 18px; color: #888;
    cursor: pointer; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.share-modal-close:hover { background: #f0f0f0; }
.share-modal-body {
    display: flex; flex-direction: column; gap: 4px; padding: 8px 16px 20px;
}
.share-modal-option {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border: none; background: #f8f9fa;
    border-radius: 12px; cursor: pointer; transition: background 0.15s;
    font-family: inherit; font-size: 14px; color: #333; min-height: 52px;
}
.share-modal-option:hover { background: #e8f0fe; }
.share-modal-option:active { background: #d0e0f8; }
.share-opt-icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0; font-size: 22px;
}
.share-opt-label { font-weight: 600; }
@media (min-width: 769px) {
    /* デスクトップ: シェアボタン横にポップオーバー表示（丸みデザイン） */
    .share-modal-overlay {
        display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        z-index: 8000;
    }
    .share-modal-overlay.open { display: block; }
    .share-modal-backdrop {
        background: transparent; backdrop-filter: none;
    }
    .share-modal-card {
        position: absolute; border-radius: 20px;
        width: 220px; max-width: 220px;
        background: white;
        box-shadow: 0 2px 10px rgba(0,0,0,0.22);
        animation: sharePopIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        padding: 0; padding-bottom: 0;
        overflow: hidden;
    }
    .share-modal-card::after {
        content: ''; position: absolute;
        top: 16px; right: -7px;
        width: 14px; height: 14px;
        background: white;
        border-radius: 2px;
        transform: rotate(45deg);
        box-shadow: 2px -2px 4px rgba(0,0,0,0.06);
    }
    @keyframes sharePopIn {
        from { opacity: 0; transform: scale(0.85) translateX(8px); }
        to   { opacity: 1; transform: scale(1) translateX(0); }
    }
    .share-modal-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 16px 10px; font-size: 12px;
        font-weight: 700; color: #1a3a6a;
        letter-spacing: 0.03em;
        border-bottom: none;
    }
    .share-modal-close {
        width: 26px; height: 26px; font-size: 13px;
        border-radius: 50%; color: #8899aa;
        background: none; border: none;
        display: flex; align-items: center; justify-content: center;
        transition: background 0.15s, color 0.15s;
    }
    .share-modal-close:hover { background: #f0f4f8; color: #1a3a6a; }
    .share-modal-body {
        display: flex; flex-direction: column;
        gap: 6px; padding: 2px 10px 14px;
    }
    .share-modal-option {
        display: flex; align-items: center; gap: 12px;
        padding: 10px 14px; border: none;
        background: #f4f7fa;
        border-radius: 14px;
        cursor: pointer; transition: all 0.15s;
        font-family: inherit; font-size: 13px;
        color: #1a3a6a; min-height: auto;
        font-weight: 600;
    }
    .share-modal-option:hover {
        background: #e8f0fe;
        transform: scale(1.02);
    }
    .share-modal-option:active {
        transform: scale(0.97);
        background: #d4e4fc;
    }
    .share-opt-icon {
        width: 30px; height: 30px;
        display: flex; align-items: center; justify-content: center;
        background: white; border-radius: 50%;
        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        flex-shrink: 0; font-size: 16px;
        color: #1a3a6a;
    }
    .share-opt-icon svg { width: 16px; height: 16px; }
    .share-opt-label { font-weight: 600; font-size: 13px; }
}

.locate-accuracy {
    border: 2px solid rgba(26,58,106,0.4);
    background: rgba(26,58,106,0.08);
}

/* Locate result popup */
.locate-popup { min-width: 200px; }
.locate-popup .lp-title { font-size: 14px; font-weight: bold; color: #1a3a6a; margin-bottom: 6px; }
.locate-popup .lp-coord { font-size: 11px; color: #888; margin-bottom: 8px; }
.locate-popup .lp-risk-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0; border-bottom: 1px solid #f0f0f0; font-size: 12px;
}
.locate-popup .lp-risk-item:last-child { border-bottom: none; }
.locate-popup .lp-risk-icon { font-size: 16px; flex-shrink: 0; }
.locate-popup .lp-risk-label { color: #555; flex: 1; }
.locate-popup .lp-risk-badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: bold; color: white;
}

/* 検索結果ピンマーカー */
.search-pin-wrapper { overflow: visible !important; }
.search-pin-drop {
    display: flex; flex-direction: column; align-items: center;
    animation: searchPinDrop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: bottom center;
}
.search-pin {
    width: 44px; height: 44px; border-radius: 50% 50% 50% 0;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    display: flex; align-items: center; justify-content: center;
    transform: rotate(-45deg);
    box-shadow: 0 4px 16px rgba(231,76,60,0.5), 0 2px 6px rgba(0,0,0,0.2);
    border: 3px solid white;
    position: relative;
}
.search-pin-head {
    font-size: 20px; transform: rotate(45deg); line-height: 1;
}
.search-pin-label {
    margin-top: 6px; background: #1a3a6a; color: white;
    padding: 4px 12px; border-radius: 12px; font-size: 12px;
    font-weight: bold; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25); border: 2px solid white;
    max-width: 200px; overflow: hidden; text-overflow: ellipsis;
}
@keyframes searchPinDrop {
    0% { transform: translateY(-60px) scale(0.5); opacity: 0; }
    60% { transform: translateY(4px) scale(1.05); opacity: 1; }
    80% { transform: translateY(-2px) scale(0.98); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.search-pulse-ring {
    animation: searchPulse 1.8s ease-out infinite;
    transform-origin: center;
}
@keyframes searchPulse {
    0%   { stroke-opacity: 0.8; fill-opacity: 0.25; transform: scale(0.6); }
    70%  { stroke-opacity: 0.15; fill-opacity: 0.03; transform: scale(2.2); }
    100% { stroke-opacity: 0;   fill-opacity: 0;    transform: scale(2.5); }
}

@media (max-width: 768px) {
    .map-action-btns { top: 60px; right: 8px; }
    .map-action-btn { width: 44px; height: 44px; }
    /* ターシャリボタンはモバイルタブバーに集約済みのため非表示 */
    .map-action-btn.map-action-tertiary { display: none; }
    .map-action-sep { display: none; }
    /* モバイルではホバーラベルは非表示、長押しで表示 */
    .map-action-btn .btn-label {
        opacity: 0; pointer-events: none;
        right: calc(100% + 10px);
        transform: translateY(-50%) translateX(8px);
    }
    .map-action-btn .btn-label.longpress-show {
        opacity: 1; transform: translateY(-50%) translateX(0);
        animation: mobileTipFade 2s ease 0.8s forwards;
    }
    @keyframes mobileTipFade {
        0% { opacity: 1; }
        80% { opacity: 1; }
        100% { opacity: 0; }
    }
}

/* Tutorial Start Button (floating) */
.tutorial-start-btn {
    position: absolute; top: 62px; left: 12px;
    z-index: 1000; background: white; color: #1a3a6a;
    border: none; border-radius: 20px; padding: 6px 14px;
    font-size: 11px; font-family: inherit; font-weight: bold;
    cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.22);
    display: flex; align-items: center; gap: 5px; transition: 0.3s;
    white-space: nowrap;
}
.tutorial-start-btn:hover { background: #e8f0fe; box-shadow: 0 2px 12px rgba(0,0,0,0.18); }
@media (max-width: 768px) {
    .tutorial-start-btn {
        top: 60px; bottom: auto; left: 10px; right: auto;
        font-size: 10px; padding: 5px 10px;
    }
    .tutorial-start-btn:hover { transform: none; }
    .tutorial-card { max-width: 96%; }
    .tut-header { padding: 22px 18px 16px; }
    .tut-header h2 { font-size: 17px; }
    .tut-body { padding: 16px 18px 8px; }
    .tut-body .tut-desc { font-size: 12px; }
    .tut-footer { padding: 10px 18px 18px; }
    .tut-layer-grid { grid-template-columns: 1fr; }
}

/* Photo list */
.photo-list-item { display:flex;align-items:center;gap:6px;padding:8px 4px;font-size:11px;color:#333;border-bottom:1px solid #eee;cursor:pointer;min-height:44px; }
.photo-list-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }

/* Address Search */
.search-box { margin-bottom: 8px; }
.search-box .search-input-wrap {
    display: flex; gap: 4px; margin-bottom: 4px;
}
.search-box input[type=text] {
    flex: 1; padding: 7px 10px; border: 1.5px solid #cbd5e1; border-radius: 8px;
    font-size: 13px; font-family: inherit; outline: none; transition: border 0.2s;
    min-height: 44px;
}
.search-box input[type=text]:focus { border-color: #1a3a6a; }
.search-box .search-btn {
    padding: 7px 14px; background: #1a3a6a; color: white; border: none;
    border-radius: 8px; font-size: 12px; cursor: pointer; font-family: inherit;
    white-space: nowrap; transition: 0.2s; min-height: 44px;
}
.search-box .search-btn:hover { background: #2a5a9a; }
.search-results {
    max-height: 150px; overflow-y: auto; font-size: 11px;
}
.search-result-item {
    padding: 8px 10px; cursor: pointer; border-radius: 6px; color: #333;
    border-bottom: 1px solid #f0f0f0; transition: background 0.15s;
    min-height: 44px; display: flex; align-items: center;
}
.search-result-item:hover { background: #e8f0fe; }
.search-result-item:last-child { border-bottom: none; }
.search-msg { font-size: 11px; color: #888; padding: 4px 0; }

/* Property Popup */
.property-popup { max-width: 340px; }
.property-popup img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; cursor: pointer; }
.property-popup .prop-specs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px;
    background: #f8f9fa; border-radius: 6px; padding: 6px 8px;
    margin-bottom: 6px; font-size: 11px; color: #444;
}
.property-popup .prop-specs dt { color: #888; font-weight: normal; }
.property-popup .prop-specs dd { margin: 0; font-weight: bold; color: #333; }
.property-popup .prop-type {
    display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px;
    font-weight: bold; color: white; margin-bottom: 4px;
}
.property-popup .prop-type.land { background: #2e7d32; }
.property-popup .prop-type.house { background: #1565c0; }
.property-popup .prop-price { font-size: 14px; font-weight: bold; color: #c62828; margin-bottom: 2px; }
.property-popup .prop-address { font-size: 12px; color: #555; margin-bottom: 4px; }
.property-popup .prop-quick-summary {
    font-size: 12px; color: #1a3a6a; font-weight: 600;
    background: linear-gradient(135deg, #e8f0fe, #f0f4ff); border-left: 3px solid #1a3a6a;
    padding: 5px 8px; margin: 4px 0 6px; border-radius: 0 6px 6px 0;
    line-height: 1.5; letter-spacing: 0.01em;
}
.property-popup .prop-quick-summary .qs-sep { color: #aab; font-weight: normal; }
.property-popup .prop-info { font-size: 11px; color: #666; margin-bottom: 4px; }
.property-popup .prop-detail-link {
    display: flex; align-items: center; justify-content: center;
    padding: 7px; margin-top: 6px; min-height: 44px;
    background: #1a3a6a; color: white; text-decoration: none;
    border-radius: 6px; font-size: 12px; font-weight: bold; transition: 0.2s;
}
.property-popup .prop-detail-link:hover { background: #2a5a9a; }
/* ===== ピン内リスクバッジ ===== */
.pin-risk-section {
    margin-top: 8px; padding-top: 8px;
    border-top: 2px solid #e8f0fe;
}
.pin-risk-title {
    font-size: 11px; font-weight: bold; color: #1a3a6a;
    margin-bottom: 4px; display: flex; align-items: center; gap: 4px;
}
.pin-risk-grid {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.pin-risk-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 8px; border-radius: 20px;
    font-size: 10px; font-weight: bold; line-height: 1.3;
    white-space: nowrap;
}
.badge-safe { background: #e8f5e9; color: #2e7d32; }
.badge-low  { background: #fff8e1; color: #f57f17; }
.badge-mid  { background: #fff3e0; color: #e65100; }
.badge-high { background: #fce4ec; color: #c62828; }
.badge-info { background: #e3f2fd; color: #1565c0; }
.badge-na   { background: #f5f5f5; color: #999; }
.pin-risk-advice {
    width: 100%; font-size: 10px; color: #555; line-height: 1.4;
    padding: 2px 4px 4px; margin-top: -2px;
    border-bottom: 1px dashed #e0e0e0;
}

/* ===== 公式ハザードバッジ（物件ポップアップ内省略形） ===== */
.pin-hz-section {
    margin-top: 6px; padding-top: 6px;
    border-top: 1px solid #e0e0e0;
}
.pin-hz-label {
    font-size: 10px; font-weight: bold; color: #1a3a6a; margin-bottom: 4px;
}
.pin-hz-badges {
    display: flex; flex-wrap: wrap; gap: 3px;
}
.pin-hz-badge {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 2px 6px; border-radius: 10px;
    font-size: 9px; font-weight: 600; line-height: 1.3;
    white-space: nowrap;
}
.pin-hz-badge small { font-weight: normal; opacity: 0.8; margin-left: 2px; }
.pin-hz-on { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.pin-hz-off { background: #f5f5f5; color: #999; border: 1px solid #e0e0e0; }

/* ===== もっと詳しくトグル ===== */
.pin-detail-toggle-wrap {
    margin-top: 6px; text-align: center;
}
.pin-detail-toggle {
    background: #f0f4ff; color: #1a3a6a; border: 1px solid #c5cae9;
    border-radius: 6px; padding: 5px 14px; font-size: 11px; font-weight: bold;
    cursor: pointer; width: 100%; transition: background 0.2s;
}
.pin-detail-toggle:hover { background: #e3eaff; }
.pin-detail-expand {
    margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed #c5cae9;
}
.pin-detail-row { font-size: 11px; padding: 3px 0; }
.pin-detail-row .rp-label { font-size: 11px; }
.pin-detail-row .rp-value { font-size: 11px; }
.pin-detail-advice { font-size: 10px; padding: 1px 0 3px 20px; }
.pin-detail-hz-title {
    font-size: 11px; font-weight: bold; color: #1a3a6a;
    margin: 6px 0 4px; padding-top: 4px;
    border-top: 1px solid #e0e0e0;
}
.pin-detail-bulk {
    font-size: 11px !important; padding: 5px 10px !important;
    margin: 6px 0 !important;
}
.pin-detail-report {
    font-size: 11px !important; padding: 6px 10px !important;
    margin: 4px 0 !important; width: 100%;
}
.pin-detail-note {
    font-size: 9px; color: #999; line-height: 1.4; margin-top: 4px;
}

/* ===== 物件リスクフィルタ ===== */
.prop-filter-section {
    margin-top: 6px; padding: 8px 10px; background: #f8faf8; border-radius: 8px;
    border: 1px solid #e0e8e0;
}
.prop-filter-title {
    font-size: 11px; font-weight: bold; color: #2e7d32; margin-bottom: 6px;
    display: flex; align-items: center; gap: 4px;
}
.prop-filter-row {
    display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.prop-filter-row label {
    font-size: 12px; color: #333; display: flex; align-items: center; gap: 4px; cursor: pointer;
}
.prop-filter-row select {
    font-size: 11px; padding: 2px 6px; border: 1px solid #ccc; border-radius: 4px;
    background: white; font-family: inherit;
}
.prop-filter-count {
    font-size: 11px; color: #666; margin-top: 4px;
}

/* ===== 物件一覧パネル ===== */
.prop-list-panel {
    margin-top: 8px;
}
.prop-list-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.prop-list-sort {
    display: flex; gap: 4px;
}
.prop-list-sort button {
    font-size: 10px; padding: 2px 8px; border: 1px solid #ccc; border-radius: 4px;
    background: white; cursor: pointer; font-family: inherit; transition: 0.2s;
}
.prop-list-sort button.active-sort {
    background: #1a3a6a; color: white; border-color: #1a3a6a;
}
.prop-list-items {
    max-height: 300px; overflow-y: auto;
}
.prop-list-card {
    display: flex; gap: 8px; padding: 8px; margin-bottom: 6px;
    background: white; border-radius: 8px; border: 1px solid #e8e8e8;
    cursor: pointer; transition: 0.2s; align-items: flex-start;
}
.prop-list-card:hover { border-color: #1a3a6a; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.prop-list-thumb {
    width: 60px; height: 50px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
    background: #eee;
}
.prop-list-info { flex: 1; min-width: 0; }
.prop-list-name {
    font-size: 12px; font-weight: bold; color: #1a3a6a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prop-list-price { font-size: 12px; color: #c62828; font-weight: bold; }
.prop-list-area { font-size: 10px; color: #666; }
.prop-list-badges { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.prop-list-badges .pin-risk-badge { font-size: 9px; padding: 1px 5px; }
.prop-list-empty {
    text-align: center; padding: 16px; color: #999; font-size: 12px;
}

/* Property Add Panel */
.add-property-panel {
    position: absolute; top: 50%; left: 50%; z-index: 2000; transform: translate(-50%, -50%);
    background: white; border-radius: 16px; padding: 24px 28px; max-width: 420px; width: 90%;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3); display: none;
}
.add-property-panel h3 { font-size: 16px; color: #1a3a6a; margin-bottom: 12px; }
.add-property-panel label { display: block; font-size: 12px; color: #555; margin: 6px 0 2px; }
.add-property-panel input[type=text], .add-property-panel input[type=number],
.add-property-panel textarea, .add-property-panel select {
    width: 100%; padding: 7px 9px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px; font-family: inherit;
}
.add-property-panel textarea { height: 50px; resize: vertical; }
.prop-type-btns { display: flex; gap: 8px; margin-bottom: 8px; }
.prop-type-btn {
    flex: 1; padding: 10px; border: 3px solid #ccc; border-radius: 10px;
    background: white; cursor: pointer; text-align: center; font-size: 13px;
    font-family: inherit; font-weight: bold; transition: 0.2s;
}
.prop-type-btn.active-land { border-color: #2e7d32; background: #e8f5e9; }
.prop-type-btn.active-house { border-color: #1565c0; background: #e3f2fd; }

/* ===== Mobile Tab Bar ===== */
/* ===== モバイルタブバー（iOSセグメンテッドコントロール風） ===== */
.mobile-tab-bar {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1100;
    background: #0f2847;
    padding: 0; margin: 0;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.4);
}
.mobile-tab-bar .tab-row {
    display: flex; align-items: stretch;
    padding: 6px 6px 8px;
    gap: 4px;
}
/* === OFF状態（デフォルト）: フラット・アウトライン風 === */
.mobile-tab-bar .tab-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; position: relative;
    min-height: 48px; min-width: 48px; /* タッチターゲット確保 */
    padding: 7px 2px 6px;
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,0.38);
    font-size: 10px; font-weight: 600; font-family: inherit;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}
.mobile-tab-bar .tab-item .tab-icon { font-size: 18px; line-height: 1; }
/* 状態ラベル — 全タブ統一表示 */
.mobile-tab-bar .tab-item .tab-state {
    display: block; font-size: 8px; font-weight: 800; letter-spacing: 0.8px;
    text-transform: uppercase; margin-top: 0;
    transition: color 0.25s;
}
.mobile-tab-bar .tab-item .tab-state::before { content: 'OFF'; }
.mobile-tab-bar .tab-item .tab-state { color: rgba(255,255,255,0.25); }

/* === ON状態: 塗りつぶし＋浮き上がり＋白文字＋やや幅広 === */
.mobile-tab-bar .tab-item.tab-on {
    flex: 1.25; /* ON状態はやや幅広でラベルを完全表示 */
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08) inset;
    transform: translateY(-1px);
}
.mobile-tab-bar .tab-item.tab-on .tab-state::before { content: '\2713 ON'; }
.mobile-tab-bar .tab-item.tab-on .tab-state { color: rgba(255,255,255,0.9); }

/* カテゴリ別のON背景 */
#tab_flood.tab-on    { background: linear-gradient(135deg, #2980b9, #3498db); }
#tab_sediment.tab-on { background: linear-gradient(135deg, #c0392b, #e74c3c); }
#tab_gake.tab-on     { background: linear-gradient(135deg, #d68910, #f39c12); }
#tab_hazard.tab-on   { background: linear-gradient(135deg, #8e44ad, #a855f7); }

/* タップ中フィードバック */
.mobile-tab-bar .tab-item:active {
    transform: scale(0.93); opacity: 0.85;
}
.mobile-tab-bar .tab-item.tab-on:active {
    transform: translateY(-1px) scale(0.93);
}

/* 詳細ボタン（トグルではない） */
.mobile-tab-bar .tab-item#tab_more {
    color: rgba(255,255,255,0.55);
    border-style: dashed;
}
.mobile-tab-bar .tab-item#tab_more .tab-state { display: none; }
.mobile-tab-bar .tab-item#tab_more:active {
    color: #fff; background: rgba(255,255,255,0.1);
}

/* Mobile Menu Button (☰ for info/settings) */
.mobile-menu-btn {
    display: none;
    position: absolute; top: 10px; right: 10px; z-index: 1100;
    width: 44px; height: 44px; border-radius: 10px;
    background: rgba(26,58,106,0.95); color: white; border: none;
    font-size: 22px; cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    align-items: center; justify-content: center;
}

/* Hide old mobile buttons */
.mobile-legend-btn, .mobile-opacity-btn { display: none !important; }

/* ===== Mobile Responsive ===== */
@media (max-width: 768px) {
    .mobile-tab-bar { display: block; }
    .mobile-menu-btn { display: none !important; /* 右側ボタン群のinfoボタンに統合 */ }

    /* ヘッダー52px + タブバー70px を除いた地図高さ */
    #map { height: calc(100vh - 52px - 70px); margin-top: 52px; }

    /* ズームコントロールをタブバーの上に十分な余白で配置 */
    .leaflet-bottom.leaflet-right { bottom: 10px; }

    /* ヘッダーのモバイル調整 */
    .app-header { padding: 0 10px; gap: 8px; }
    .app-header-sub { display: none; }
    .app-header-name { font-size: 13px; }
    .app-header-logo { width: 30px; height: 30px; }
    .app-header-logo img { width: 24px; height: 24px; }
    .app-header-search { max-width: none; }
    .app-header-search input { height: 32px; font-size: 16px; /* iOS自動ズーム防止: 16px未満だとSafariがページを拡大する */ }
    .search-box input[type=text] { font-size: 16px; /* iOS自動ズーム防止 */ }

    /* パネルをデフォルトで非表示 */
    .info-panel {
        top: 52px; right: 0; left: 0; bottom: 56px;
        max-width: 100%; width: 100%; height: auto;
        border-radius: 0; padding: 16px 18px 18px;
        overflow-y: auto; display: none;
        z-index: 1050;
    }
    .info-panel.mobile-open { display: block; }

    .layer-panel {
        top: auto; left: 0; right: 0; bottom: 56px;
        max-width: 100%; width: 100%; max-height: 55vh;
        border-radius: 16px 16px 0 0; padding: 0 16px 16px;
        overflow-y: auto;
        z-index: 1050;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        box-shadow: 0 -4px 24px rgba(0,0,0,0.2);
        pointer-events: none; visibility: hidden;
    }
    .layer-panel.mobile-open {
        transform: translateY(0);
        pointer-events: auto; visibility: visible;
    }
    /* ハーフモーダルのドラッグハンドル */
    .layer-panel .half-modal-handle {
        display: flex; justify-content: center; padding: 10px 0 6px;
        position: sticky; top: 0; background: rgba(255,255,255,0.97);
        z-index: 2; border-radius: 16px 16px 0 0;
    }
    .layer-panel .half-modal-handle::before {
        content: ''; width: 36px; height: 4px; border-radius: 4px;
        background: #ccc;
    }
    .layer-panel .half-modal-handle-title {
        font-size: 13px; font-weight: bold; color: #1a3a6a;
        margin-left: 12px; flex: 1; text-align: left;
    }

    .legend {
        bottom: 60px; left: 6px; right: auto;
        max-width: 220px; border-radius: 10px;
        display: none; /* モバイルでもデフォルト非表示 — panel-openで展開 */
    }
    /* モバイルではデフォルト折りたたみ — 展開時の高さを制限 */
    .legend .legend-body {
        max-height: 35vh;
    }
    .legend.panel-open { display: block; z-index: 1050; }
    .legend.mobile-open { display: block; z-index: 1050; }
    .legend .mobile-close-btn { display: none !important; }

    .opacity-control {
        bottom: 60px; right: 8px; left: auto;
        border-radius: 12px;
        display: none; padding: 14px 18px;
        max-width: 280px;
    }
    .opacity-control.panel-open { display: block; z-index: 1050; }
    .opacity-control.mobile-open { display: block; z-index: 1050; }
    .opacity-row { flex-wrap: wrap; gap: 4px 8px; margin-bottom: 10px; }
    .opacity-row label { min-width: 100%; font-size: 12px; }
    .opacity-row input[type=range] { width: 100%; height: 8px; }
    .opacity-presets {
        display: flex; gap: 6px; width: 100%; margin-top: 2px;
    }
    .opacity-preset-btn { padding: 6px 0; font-size: 11px; }

    /* ハーフモーダル背景オーバーレイ */
    .half-modal-overlay {
        display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 56px;
        background: rgba(0,0,0,0.3); z-index: 1040;
    }
    .half-modal-overlay.show { display: block; }

    /* 閉じるボタン（モバイルパネル内） */
    .mobile-close-btn {
        position: absolute; top: 10px; right: 10px;
        width: 44px; height: 44px; border-radius: 10px;
        background: #e74c3c; color: white; border: none;
        font-size: 18px; cursor: pointer; z-index: 1060;
        display: flex; align-items: center; justify-content: center;
    }
    /* ハーフモーダル内は閉じるボタンを非表示（ハンドルで閉じる） */
    .layer-panel .mobile-close-btn { display: none !important; }
    /* モバイルではハンドルを表示、デスクトップ用h3を非表示 */
    .layer-panel .half-modal-handle { display: flex; }
    .layer-panel .layer-panel-h3-desktop { display: none; }

    /* エリアボタンを大きく */
    .area-btn { padding: 8px 14px; font-size: 13px; min-height: 44px; }

    /* Leafletコントロールを調整（モバイルメニューボタンとの干渉回避） */
    .leaflet-top.leaflet-left { top: 10px; }
    .leaflet-bottom { bottom: 84px; }
    .leaflet-bottom .leaflet-control-attribution {
        font-size: 8px; max-width: 55vw; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis;
        background: rgba(255,255,255,0.7) !important;
        padding: 1px 5px;
    }

    /* デスクトップ用UIをモバイルでは非表示 */
    .desktop-toggle-btn { display: none !important; }
    .desktop-close-btn { display: none !important; }

    /* モバイルではinfo-panelのtransformをリセット */
    .info-panel {
        transform: none !important;
        transition: none !important;
    }
    .info-panel.desktop-open { transform: none !important; }

    /* モバイルではlayer-panelのleft方向transformをリセット（Y方向はハーフモーダル用） */
    .layer-panel {
        width: 100% !important; max-width: 100% !important;
    }
    .layer-panel.desktop-open { transform: translateY(100%) !important; }
}

/* リスクサマリーポップアップ */
.risk-popup { min-width: 220px; max-width: 280px; }
.risk-popup .rp-title {
    font-size: 13px; font-weight: bold; color: #1a3a6a;
    margin-bottom: 6px; padding-bottom: 4px; border-bottom: 2px solid #e8f0fe;
}
.risk-popup .rp-coord { font-size: 10px; color: #999; margin-bottom: 8px; }
.risk-popup .rp-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0; border-bottom: 1px solid #f0f0f0;
}
.risk-popup .rp-row:last-child { border-bottom: none; }
.risk-popup .rp-icon { font-size: 16px; flex-shrink: 0; width: 22px; text-align: center; }
.risk-popup .rp-label { font-size: 11px; color: #555; flex: 1; }
.risk-popup .rp-value {
    font-size: 11px; font-weight: bold; padding: 2px 8px;
    border-radius: 4px; white-space: nowrap;
}
.rp-level-high { background: #ffebee; color: #c62828; }
.rp-level-mid  { background: #fff3e0; color: #e65100; }
.rp-level-low  { background: #e8f5e9; color: #2e7d32; }
.rp-level-off  { background: #f5f5f5; color: #999; }
.rp-level-info { background: #e3f2fd; color: #1565c0; }
.rp-level-na   { background: #f5f5f5; color: #aaa; font-weight: normal; }
.risk-popup .rp-off-hint {
    font-size: 9px; color: #bbb; background: #f0f0f0;
    padding: 1px 5px; border-radius: 3px; margin-left: 2px;
    flex-shrink: 0;
}
.risk-popup .rp-divider {
    height: 1px; background: #e0e0e0; margin: 6px 0;
}
.risk-popup .rp-section-head { border-bottom: none; padding-bottom: 2px; }
.risk-popup .rp-sub-row { padding: 3px 0 3px 8px; }
.risk-popup .rp-advice {
    font-size: 10.5px; color: #555; line-height: 1.4;
    padding: 2px 0 5px 24px; margin-top: -2px;
    border-bottom: 1px dashed #e8e8e8;
}
.risk-popup .rp-note {
    font-size: 10px; color: #999; margin-top: 6px; padding-top: 4px;
    border-top: 1px solid #eee; line-height: 1.4;
}
.risk-popup .rp-report-btn {
    display: block; width: 100%; margin-top: 8px; padding: 8px;
    background: linear-gradient(135deg, #1a3a6a, #2a5a9a); color: white;
    border: none; border-radius: 6px; font-size: 12px; font-weight: bold;
    cursor: pointer; text-align: center; transition: 0.2s;
}
.risk-popup .rp-report-btn:hover { background: linear-gradient(135deg, #2a5a9a, #3a6aba); }
/* 問い合わせCTA（リスクポップアップ） */
.risk-popup .rp-cta-contact {
    display: flex; align-items: center; gap: 10px;
    width: 100%; margin-top: 6px; padding: 10px 12px;
    background: linear-gradient(135deg, #e65100, #f57c00); color: white;
    border: none; border-radius: 8px; font-size: 12px;
    cursor: pointer; text-decoration: none; transition: 0.2s;
    min-height: 44px;
}
.risk-popup .rp-cta-contact:hover { background: linear-gradient(135deg, #f57c00, #ff9800); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(230,81,0,0.3); }
.risk-popup .rp-cta-icon { font-size: 20px; flex-shrink: 0; }
.risk-popup .rp-cta-text { display: flex; flex-direction: column; line-height: 1.3; }
.risk-popup .rp-cta-text strong { font-size: 13px; }
.risk-popup .rp-cta-sub { font-size: 9px; opacity: 0.85; margin-top: 1px; }
/* 問い合わせCTA（物件ポップアップ） */
.property-popup .prop-cta-contact {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; margin-top: 6px; padding: 8px 10px;
    background: #fff; color: #e65100; border: 1.5px solid #e65100;
    border-radius: 6px; font-size: 12px; font-weight: bold;
    cursor: pointer; text-decoration: none; transition: 0.2s;
    min-height: 44px; text-align: center;
}
.property-popup .prop-cta-contact:hover { background: #fff3e0; border-color: #f57c00; color: #f57c00; }
/* レイヤーON誘導リンク */
.risk-popup .rp-turn-on {
    font-size: 10px; color: #1565c0; cursor: pointer;
    background: none; border: none; padding: 8px 6px;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    transition: color 0.15s; min-height: 44px;
    display: inline-flex; align-items: center;
}
.risk-popup .rp-turn-on:hover { color: #0d47a1; text-decoration: underline; }
/* 一括ONボタン */
.risk-popup .rp-bulk-on {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    width: 100%; margin-top: 4px; padding: 8px 10px; min-height: 44px;
    background: #f0fdf4; color: #16a34a; border: 1.5px solid #bbf7d0;
    border-radius: 6px; font-size: 11px; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
}
.risk-popup .rp-bulk-on:hover { background: #dcfce7; border-color: #86efac; }
.risk-popup .rp-bulk-on.rp-all-on {
    background: #f0f9ff; color: #0284c7; border-color: #bae6fd;
}
.risk-popup .rp-bulk-on.rp-all-on:hover { background: #e0f2fe; border-color: #7dd3fc; }

/* ===== 物件ポップアップ内展開セクション（.risk-popup スタイル流用） ===== */
.pin-detail-expand .rp-row {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 0; border-bottom: 1px solid #f0f0f0;
}
.pin-detail-expand .rp-row:last-child { border-bottom: none; }
.pin-detail-expand .rp-icon { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; }
.pin-detail-expand .rp-label { font-size: 11px; color: #555; flex: 1; }
.pin-detail-expand .rp-value {
    font-size: 10px; font-weight: bold; padding: 2px 6px;
    border-radius: 4px; white-space: nowrap;
}
.pin-detail-expand .rp-sub-row { padding: 3px 0 3px 6px; }
.pin-detail-expand .rp-advice {
    font-size: 10px; color: #555; line-height: 1.3;
    padding: 1px 0 3px 20px; margin-top: -1px;
    border-bottom: 1px dashed #e8e8e8;
}
.pin-detail-expand .rp-turn-on {
    font-size: 10px; color: #1565c0; cursor: pointer;
    background: none; border: none; padding: 4px 4px;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    min-height: 36px; display: inline-flex; align-items: center;
}
.pin-detail-expand .rp-turn-on:hover { color: #0d47a1; text-decoration: underline; }
.pin-detail-expand .rp-bulk-on {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    width: 100%; margin-top: 4px; padding: 6px 8px; min-height: 36px;
    background: #f0fdf4; color: #16a34a; border: 1.5px solid #bbf7d0;
    border-radius: 6px; font-size: 10px; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
}
.pin-detail-expand .rp-bulk-on:hover { background: #dcfce7; border-color: #86efac; }
.pin-detail-expand .rp-bulk-on.rp-all-on {
    background: #f0f9ff; color: #0284c7; border-color: #bae6fd;
}
.pin-detail-expand .rp-report-btn {
    display: block; width: 100%; margin-top: 6px; padding: 7px;
    background: linear-gradient(135deg, #1a3a6a, #2a5a9a); color: white;
    border: none; border-radius: 6px; font-size: 11px; font-weight: bold;
    cursor: pointer; text-align: center; transition: 0.2s;
}
.pin-detail-expand .rp-report-btn:hover { background: linear-gradient(135deg, #2a5a9a, #3a6aba); }

/* ===== SEO静的コンテンツ ===== */
.seo-content {
    position: relative; z-index: 1;
    background: #f8f9fa; border-top: 3px solid #1a3a6a;
    font-size: 14px; line-height: 1.8; color: #333;
}
.seo-content-inner {
    max-width: 800px; margin: 0 auto; padding: 20px 24px;
}
.seo-details summary {
    cursor: pointer; font-size: 16px; font-weight: bold; color: #1a3a6a;
    padding: 10px 0; list-style: none; display: flex; align-items: center; gap: 8px;
}
.seo-details summary::before { content: '▶'; font-size: 12px; transition: 0.2s; }
.seo-details[open] summary::before { content: '▼'; }
.seo-details summary::-webkit-details-marker { display: none; }
.seo-content h2 {
    font-size: 16px; color: #1a3a6a; border-left: 4px solid #1a3a6a;
    padding-left: 10px; margin: 20px 0 8px;
}
.seo-content section { margin-bottom: 12px; }
.seo-content p { margin: 6px 0; }
.seo-content dl { margin: 8px 0 8px 8px; }
.seo-content dt { font-weight: bold; color: #1a3a6a; margin-top: 6px; }
.seo-content dd { margin: 2px 0 0 16px; color: #555; }
.seo-content ol, .seo-content ul { margin: 8px 0 8px 20px; }
.seo-content li { margin-bottom: 4px; }
.seo-content a { color: #1565c0; }
.seo-footer {
    margin-top: 16px; padding-top: 12px; border-top: 2px solid #e0e0e0;
    font-size: 12px; color: #666;
}
@media (max-width: 768px) {
    .seo-content-inner { padding: 16px; }
    .seo-content h2 { font-size: 14px; }
}

/* ===== ウェルカムモーダル ===== */
.welcome-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9000; align-items: center; justify-content: center;
}
.welcome-overlay.active { display: flex; }
.welcome-backdrop {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
}
.welcome-card {
    position: relative; background: white; border-radius: 20px;
    width: 90%; max-width: 400px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    overflow: hidden;
    animation: welcomeFadeIn 0.5s cubic-bezier(.22,.68,0,1.1);
}
@keyframes welcomeFadeIn {
    0% { opacity: 0; transform: scale(0.9) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.welcome-slide {
    display: none; flex-direction: column;
}
.welcome-slide.active { display: flex; }
.welcome-slide-visual {
    padding: 32px 24px 16px; text-align: center;
    background: linear-gradient(135deg, #1a3a6a 0%, #2d6cb4 100%);
    color: white;
}
.welcome-slide-visual .ws-icon { font-size: 56px; margin-bottom: 8px; }
.welcome-slide-visual h2 {
    font-size: 20px; margin: 0 0 4px; font-weight: 900;
}
.welcome-slide-visual p {
    font-size: 13px; opacity: 0.85; margin: 0; line-height: 1.5;
}
.welcome-slide-body {
    padding: 20px 24px 12px; text-align: center;
}
.welcome-slide-body p {
    font-size: 13px; color: #444; line-height: 1.7; margin: 0;
}
/* ステップイラスト */
.ws-demo {
    display: inline-flex; align-items: center; gap: 8px;
    background: #f0f4fa; border-radius: 12px; padding: 12px 20px;
    margin: 12px 0; border: 2px solid #dde6f0;
}
.ws-arrow { font-size: 18px; color: #1a3a6a; }
.ws-color-bar {
    display: flex; gap: 2px; justify-content: center; margin: 10px 0;
}
.ws-color-bar span {
    width: 40px; height: 16px; border-radius: 3px; display: inline-block;
}
.ws-color-label {
    display: flex; justify-content: space-between; font-size: 10px; color: #888;
    padding: 0 4px;
}
/* フッター */
.welcome-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 24px 20px; gap: 12px;
}
.welcome-dots {
    display: flex; gap: 6px;
}
.welcome-dots span {
    width: 8px; height: 8px; border-radius: 50%; background: #ddd;
    transition: all 0.3s;
}
.welcome-dots span.active {
    background: #1a3a6a; width: 20px; border-radius: 4px;
}
.welcome-btn-skip {
    background: none; border: none; color: #999; font-size: 12px;
    cursor: pointer; padding: 6px 0; font-family: inherit;
}
.welcome-btn-skip:hover { color: #555; }
.welcome-btn-next {
    background: #1a3a6a; color: white; border: none; border-radius: 10px;
    padding: 10px 24px; font-size: 13px; font-weight: bold; cursor: pointer;
    font-family: inherit; transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(26,58,106,0.3);
}
.welcome-btn-next:hover { background: #24497a; transform: scale(1.03); }
.welcome-btn-start {
    background: linear-gradient(135deg, #2e7d32, #43a047); color: white;
    border: none; border-radius: 10px; padding: 10px 24px; font-size: 14px;
    font-weight: bold; cursor: pointer; font-family: inherit;
    box-shadow: 0 2px 12px rgba(46,125,50,0.3); transition: all 0.2s;
    flex: 1;
}
.welcome-btn-start:hover { transform: scale(1.03); }

/* マップ読み込みプログレスバー */
.map-loading-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    z-index: 2000; pointer-events: none; opacity: 0;
    transition: opacity 0.3s;
}
.map-loading-bar.active { opacity: 1; }
.map-loading-bar-fill {
    height: 100%; width: 0%; background: linear-gradient(90deg, #5dade2, #1a3a6a, #5dade2);
    background-size: 200% 100%;
    animation: loadingShimmer 1.2s linear infinite;
    transition: width 0.2s;
    border-radius: 0 2px 2px 0;
}
@keyframes loadingShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* パネルスライド・トーストは即座に表示 */
    .info-panel, .layer-panel { transition: none !important; }
    .layer-toast { transition: none !important; }
    /* パルスリング・ドロップアニメーション無効化 */
    .search-pulse-ring { animation: none !important; }
    .search-pin-drop { animation: none !important; }
    /* Leaflet タイルフェード無効化 */
    .leaflet-fade-anim .leaflet-tile,
    .leaflet-fade-anim .leaflet-popup { transition: none !important; }
    .leaflet-zoom-anim .leaflet-zoom-animated { transition: none !important; }
}

/* ===== モバイル: Bottom Sheet 使用のためポップアップ調整 ===== */
@media (max-width: 768px) {
    /* Bottom Sheet 内のコンパクト表示 */
    .bottom-sheet-body .pin-risk-badge {
        font-size: 9px;
        padding: 2px 6px;
    }
    .bottom-sheet-body .pin-risk-advice {
        font-size: 9px;
    }
    .bottom-sheet-body .pin-hz-badge {
        font-size: 8px;
        padding: 1px 4px;
    }
    .bottom-sheet-body .pin-detail-toggle {
        font-size: 10px;
        padding: 4px 10px;
    }
    .bottom-sheet-body .pin-detail-row { font-size: 10px; }
    .bottom-sheet-body .pin-detail-row .rp-label { font-size: 10px; }
    .bottom-sheet-body .pin-detail-row .rp-value { font-size: 10px; }
}

/* ===== Mobile Bottom Sheet ===== */
.bottom-sheet-overlay {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 7000;
}
.bottom-sheet-overlay.open {
    display: block;
}
.bottom-sheet-backdrop {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.bottom-sheet-overlay.open .bottom-sheet-backdrop {
    animation: bsFadeIn 0.2s ease;
}
.bottom-sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
    max-height: 50vh;
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}
.bottom-sheet-overlay.open .bottom-sheet {
    transform: translateY(0);
}
.bottom-sheet-handle {
    display: flex; justify-content: center; padding: 10px 0 4px;
    cursor: grab; flex-shrink: 0;
}
.bottom-sheet-handle span {
    width: 36px; height: 4px;
    background: #d0d0d0; border-radius: 2px;
}
.bottom-sheet-close {
    position: absolute; top: 8px; right: 12px;
    width: 32px; height: 32px;
    background: #f5f5f5; border: none; border-radius: 50%;
    font-size: 16px; color: #666; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    z-index: 1;
}
.bottom-sheet-close:hover { background: #e0e0e0; }
.bottom-sheet-body {
    flex: 1; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 20px;
    overscroll-behavior: contain;
}
/* Bottom Sheet 内のポップアップコンテンツ幅を全幅に */
.bottom-sheet-body .property-popup,
.bottom-sheet-body .photo-popup,
.bottom-sheet-body .risk-popup {
    max-width: 100%; width: 100%;
}
.bottom-sheet-body .risk-popup {
    padding: 4px 0;
}
/* Bottom Sheet 内の画像サイズ最適化 */
.bottom-sheet-body img {
    max-width: 100%; height: auto;
    border-radius: 8px;
}
.bottom-sheet-body .property-popup img {
    max-height: 160px; object-fit: cover; width: 100%;
}
.bottom-sheet-body .pin-gallery-slide img {
    max-height: 180px;
}
@keyframes bsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* モバイル: Bottom Sheet 使用時は Leaflet ポップアップを非表示 */
@media (max-width: 768px) {
    .leaflet-popup { display: none !important; }
}

/* ===== WCAG 2.5.8: Leaflet zoom ボタン最小ターゲットサイズ 44×44px ===== */
.leaflet-control-zoom a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 20px !important;
}