@charset "utf-8";
/* CSS Document */

    .app { min-height: 100%; font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;}

    /* PC最大幅 1170px */
    .container{
      max-width: 1170px;
      margin: 0 auto;
      padding: 12px;
      box-sizing: border-box;
		  font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    }

    /* ===== タブ（2段・センター / 206px / 四角 / #b2a68c / hover明るく / active明るいまま） ===== */
    #tabbar{
      display: grid;
      grid-template-columns: repeat(4, 206px);
      justify-content: center;
      gap: 10px 10px;
		margin-bottom: 20px;
    }
    .tabBtn{
      width: 206px;
      height: 44px;
      border: none;
      border-radius: 0;
      background: #b2a68c;
      color: #111;
      font-size: 16px;
      cursor: pointer;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      transition: filter .15s ease, transform .05s ease;
		margin-right: 12px !important;
		font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    }
    .tabBtn:hover{ filter: brightness(1.15); }
    .tabBtn:active{ transform: translateY(1px); }
    .tabBtn--active{ filter: brightness(1.25); }

    @media (max-width: 980px){
      #tabbar{ grid-template-columns: repeat(3, 206px); }
    }
    @media (max-width: 720px){
      #tabbar{ grid-template-columns: repeat(2, minmax(0, 206px)); }
      .tabBtn{ width: 100%; }
    }

    /* ===== MAP + リスト ===== */
    .wrap{
      display: flex;
      min-height: 70vh;
      background: transparent;
    }

    /* PC：MAP 650px固定 */
    #map{
      width: 650px;
      flex: 0 0 650px;
      min-width: 0;
      background: #111;
		  font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    }

    /* リスト（右） */
    #sidebar{
      flex: 1;
      min-width: 0;
      overflow: auto;
      padding: 12px 0 12px 16px;
      box-sizing: border-box;
      background: transparent;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
    }

#sidebar h3{font-size: 16px;font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;}

    /* スマホ：上下 */
    @media (max-width: 900px){
      .wrap{ flex-direction: column; }
      #map{
        width: 100%;
        flex: 0 0 auto;
        height: 55vh;
      }
      #sidebar{
        height: 45vh;
        padding: 12px 0 0;
      }
    }

    /* ===== リスト（罫線/影なし、背景変えない） ===== */
    .item{
      display:block;
      width:100%;
      text-align:left;
      padding:10px 0;
      margin:0 0 8px;
      border:none;
      background: transparent;
      cursor:pointer;
      color: #fff;
		  font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    }
    .item:hover{ background: transparent; }

    /* 選択（左線：色はJSでstyle付与） */
    .item--selected{
      border-left: 3px solid #fff; /* JSで上書き */
      padding-left: 10px;
    }

    .itemHeader{ display:flex; align-items:center; gap:10px; }
    .itemTitle{ font-weight:700; }
    .itemDesc{ margin-top:6px; font-size:12px; color: rgba(255,255,255,.65); line-height:1.4; }

    /* リストの丸（色はJSで付与） */
    .badge{
      width:22px; height:22px; border-radius:999px;
      display:inline-flex; align-items:center; justify-content:center;
      background: #fff; /* JSで上書き */
      color: #111;
      font-weight:900; font-size:12px;
      flex:0 0 auto;
    }

    /* ===== マンションプロット：白い吹き出し（あなたのCSSをクラス化） ===== */
    .mansionBubble{
      align-items: center;
      background-color: #ffffff;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
      display: flex !important;
      flex-direction: column;
      font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
      height: 62px;
      justify-content: center;
      overflow: visible !important;
      padding: 15px 20px;
      text-align: center;

      /* ★ズームでズレないよう transform は使わない（位置は labelAnchor で固定） */
      transform: none;

      position: relative;
      pointer-events: none;

      /* ★アンカー計算を安定させるため固定幅を推奨（好みで調整OK） */
      width: 220px;
      box-sizing: border-box;
    }
    .mansionBubble::after{
      background: linear-gradient(45deg, white 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 100%) #ffffff;
      bottom: -4px;
      content: '';
      height: 15px;
      left: 50%;
      position: absolute;
      transform: translate(-50%, 0) rotate(-45deg);
      width: 15px;
    }
    .mansionBubble img{
      display: block;
      height: 28px; /* 好みで調整 */
      width: auto;
    }

    /* InfoWindow内（白ベース） */
    .iwBtnRow{ display:flex; gap:8px; margin-top:10px; }
    .iwBtn{
      padding:6px 10px;
      border:1px solid #ddd;
      border-radius:10px;
      background:#fff;
      cursor:pointer;
      font-size:12px;
    }
    .iwBtn:hover{ background:#f4f4f4; }
    .iwBtn--primary{
      border-color:#111;
      background:#111;
      color:#fff;
    }
    .iwBtn--primary:hover{ background:#000; }

    textarea.iwTextarea{
      width:100%;
      box-sizing:border-box;
      resize:vertical;
      font-size:12px;
      padding:8px;
      border-radius:10px;
      border:1px solid #ddd;
      outline:none;
    }
    textarea.iwTextarea:focus{ border-color:#111; }

    .empty{
      padding: 18px 0;
      color: rgba(255,255,255,.65);
      font-size: 12px;
      line-height: 1.5;
    }