@charset "UTF-8";

/* --------------------------
reset
--------------------------*/
body,
div,
h3,
h4,
input,
textarea,
p,
button {
  margin: 0;
  padding: 0;
}

button {
  background: none;
  border: none;
}

/* --------------------------
SVGアイコン専用クラス（マピオンブランドカラー対応版）
--------------------------*/
/* 共通ベース */
.svg-icon-blue,
.svg-icon-blue-dark,
.svg-icon-black,
.svg-icon-white,
.svg-icon-gold,
.svg-icon-orange,
.svg-icon-gray,
.svg-icon-mapion-light {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  width: 16px;
  height: 16px;
}

/* 1. リンク用の青色 - マピオンメインブルー (#6B9BD1) */
.svg-icon-blue {
  filter: brightness(0) saturate(100%) invert(61%) sepia(45%) saturate(1234%) hue-rotate(188deg) brightness(95%) contrast(89%);
}

/* 1-2. リンク用の濃い青色 - マピオンリンクブルー (#2E7BD6) */
.svg-icon-blue-dark {
  filter: brightness(0) saturate(100%) invert(42%) sepia(98%) saturate(1234%) hue-rotate(200deg) brightness(95%) contrast(89%);
}

/* 2. 通常表示用の墨黒 */
.svg-icon-black {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(85%);
}

/* 3. ボタン内埋め込み用の白 */
.svg-icon-white {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* 4. ゴールド - そのまま維持 */
.svg-icon-gold {
  filter: brightness(0) saturate(100%) invert(83%) sepia(69%) saturate(2018%) hue-rotate(3deg) brightness(103%) contrast(107%);
}

/* 5. オレンジ - マピオンアクセントオレンジに調整 */
.svg-icon-orange {
  filter: brightness(0) saturate(100%) invert(60%) sepia(100%) saturate(5000%) hue-rotate(30deg) brightness(130%) contrast(120%);
}

/* 6. グレー */
.svg-icon-gray {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(100%);
}

/* 7. マピオンライトブルー - 薄い背景色用 */
.svg-icon-mapion-light {
  filter: brightness(0) saturate(100%) invert(85%) sepia(25%) saturate(456%) hue-rotate(188deg) brightness(98%) contrast(92%);
}

/* --------------------------
変数
--------------------------*/
/* グローバル変数 */
:root {
  --bg-color: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.6);
  --text-color: #333333;
  --primary-color: #6B9BD1;
  --secondary-color: #2E7BD6;
  --border-color: #e0e0e0;
  --card-bg: #f8f8f8;
  --hover-bg: #e0e0e0;
  --hover-color: #007bff;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --ad-bg: #e0e0e0;
  --primary-gradient: linear-gradient(135deg, #6B9BD1 0%, #2E7BD6 100%);
  /* マピオンカラーに変更 */
  --accent-color: #ff6b6b;
  --success-color: #51cf66;
  --warning-color: #ffd43b;
  --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --glass-bg: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.18);
  --font-family: 'Roboto', sans-serif;

  /* ガラス表現の強さ */
  --glass-blur: 10px;
  --glass-saturate: 130%;
  --glass-border-alpha: 0.18;
}

/* --------------------------
ベーススタイル
--------------------------*/
html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  width: 100%;
  /* 動的 vh を最優先で使い、未定義なら 1vh をフォールバック */
  height: calc(var(--vh, 1vh) * 100);
  background-color: var(--bg-color);
  color: var(--text-color);
  background: none;
  overscroll-behavior-y: none;
  overflow: hidden;
}

/* Reactルートまで高さを伝播 */
#root,
.App {
  height: 100%;
  overflow: hidden;
}

body {
  text-size-adjust: 100%;
}

input,
textarea,
select,
button {
  font-family: var(--font-family);
}

/* デフォルトで表示されるattribを非表示にするため */
.maplibregl-ctrl-attrib-inner,
.maplibregl-ctrl-attrib-button,
.maplibregl-ctrl-attrib.maplibregl-compact {
  display: none !important;
}

/* iOS Safariの100vhズレ対策 */
/* 100dvh対応ブラウザでは動的ビューポートを使う */
/* 旧Safari向けに-webkit-fill-availableを併用 */
@supports (-webkit-touch-callout: none) {
  html {
    height: -webkit-fill-available;
  }

  body {
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }
}

/* モバイル版 スマホ版のスタイル */
@media (max-width: 768px),
(hover: none) and (pointer: coarse) {

  html,
  body {
    /* --vh が未定義でも 1vh がフォールバックになる */
    min-height: calc(var(--vh, 1vh) * 100);
  }
}

/* ---------------------
z-index
---------------------*/

/* ベース要素：地図 */
.map-container {
  z-index: 1;
}

/* map-area以下 */

/* 地図画面上に配備されるもの。干渉しない */
#map-center-indicator {
  z-index: 100;
}

#kntr-map-center-indicator {
  z-index: 100;
}

/* コントロール関連 */
.map-controls,
.map-bottom-left-container {
  z-index: 1000;
}

.scale-bar {
  z-index: 1000;
}

.copyright-notice {
  z-index: 1000;
}

.view-in-app-container {
  z-index: 300;
}

/* マーカー */
.maplibregl-marker,
.maplibregl-marker-anchor-center,
.marker,
.custom-marker {
  z-index: 400;
}

.marker.marker--hovered {
  z-index: 450;
}

.marker.marker--selected {
  z-index: 480;
}

/* マーカーのポップアップ */
.maplibregl-popup,
.maplibregl-popup-tip,
.maplibregl-popup-content {
  z-index: 500;
}

/* 表示形態が可変のパネルなど */

/* 検索コンテナ（画面左上固定表示） */
.search-container {
  z-index: 1500;
}

.search-modal-overlay {
  z-index: 1900;
}

.search-modal {
  z-index: 2000;
}

/* 長押しポップアップ */
.location-detail-panel {
  z-index: 2100;
}

/* 右クリックポップアップ */
.maplibregl-popup.custom-popup {
  z-index: 2200;
}

/* カテゴリ検索モーダル 一時的に開くタイプのモーダルは優先度高めに設定 */
.category-search-modal {
  z-index: 3500;
}

.category-search-modal-overlay {
  z-index: 3499;
}

/* デスクトップ検索結果 */
.desktop-search-result-panel,
.desktop-search-result-single-panel {
  z-index: 3000;
}

/* 検索結果 */
.search-result-panel,
.search-result-single-panel {
  z-index: 3000;
}

/* 検索以外 */

/* レイヤーポップアップ */
.layer-popup {
  z-index: 2800;
}

/* 印刷ポップアップオーバレイ */
.print-modal-overlay {
  z-index: 3000;
}

#print-settings-modal {
  z-index: 2100;
}

/* 印刷時の著作権 */
.print-map-attribution {
  z-index: 1000;
}

/* デスクトップ広告は、一時的な設定用ポップアップよりは下でも良い */
.desktop-ad-panel {
  z-index: 2000;
}

/* 画面上部のメッセージなど */
.loading-bar {
  z-index: 3000;
}

.notification {
  z-index: 3000;
}

.research-here-container {
  z-index: 3100;
}

/* キーボードショートカット */
.shortcut-content {
  z-index: 5000;
}

.shortcut-content-overlay {
  z-index: 4999;
}

/* 画面下部の住所などの情報表示 */
.location-info {
  z-index: 1000;
}

/* スナップショットのフラッシュは装飾だけなので、ベースの地図より大きければ良い */
.snapshot-flash {
  z-index: 2;
}

/* map-container外 */

/* メニューエリア */
.setting-menu {
  z-index: 4000;
}

.menu-header {
  z-index: 4001;
}

.menu-overlay {
  z-index: 3999;
}

/* モバイル広告が覆われる状況は想定していないが端末によってそうなる可能性があるので優先度を高めに設定 */
.mobile-ad-banner {
  z-index: 10000;
}