/* ==========================
   全体
========================== */

html,
body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    font-family:
        "Yu Gothic",
        "Hiragino Sans",
        sans-serif;
}

body{
    display:flex;
}

/* ==========================
   レイアウト
========================== */

#container{
    display:flex;
    width:100%;
    height:100vh;
}

/* ==========================
   サイドバー
========================== */

#sidebar{

    width:340px;
    min-width:340px;

    height:100vh;

    overflow-y:auto;

    background:white;

    border-right:1px solid #ddd;

    box-sizing:border-box;

    padding:18px;

}

/* ==========================
   地図
========================== */

#map{

    flex:1;

    height:100vh;

}

/* ==========================
   タイトル
========================== */

#sidebar h1{

    margin:0;

    font-size:21px;

    color:#0D47A1;

    white-space:nowrap;

    font-weight:bold;

}

#sidebar h2{

    margin-top:2px;

    margin-bottom:16px;

    font-size:21px;

    color:#0D47A1;

    font-weight:normal;

}

/* ==========================
   フッター
========================== */

#footer{

    margin-top:16px;

    text-align:center;

    font-size:11px;

    color:#888;

}

/* ==========================
   個体一覧
========================== */

#bird-list{

    display:flex;

    flex-direction:column;

    gap:8px;

}

/* ==========================
   個体カード
========================== */

.bird-card{

    padding:8px 10px;

    border:1px solid #ddd;

    border-radius:8px;

    background:#fafafa;

    cursor:pointer;

    transition:.2s;

}

.bird-card:hover{

    background:#f1f8ff;

    border-color:#90CAF9;

}

/* ==========================
   名前
========================== */

.bird-name{

    font-size:16px;

    font-weight:bold;

    margin-bottom:3px;

}

/* ==========================
   情報
========================== */

.bird-info{

    font-size:12px;

    color:#666;

    line-height:1.35;

}

/* ==========================
   Popup
========================== */

.leaflet-popup-content{

    font-size:14px;

    line-height:1.5;

}

.leaflet-popup-content b{

    font-size:17px;

    color:#1565C0;

}

/* ==========================
   ハンバーガー
========================== */

#menu-button{

    display:none;

    position:fixed;

    top:15px;

    left:15px;

    width:48px;

    height:48px;

    border:none;

    border-radius:10px;

    background:#1565C0;

    color:white;

    font-size:28px;

    cursor:pointer;

    z-index:2000;

    box-shadow:0 2px 8px rgba(0,0,0,.3);

}

/* ==========================
   スマホ
========================== */

@media (max-width:768px){

    body{

        display:block;

    }

    #container{

        display:block;

        height:100vh;

    }

    /* ボタン表示 */

    #menu-button{

        display:block;

    }

    /* サイドバー */

    #sidebar{

        position:fixed;

        top:0;

        left:-340px;

        width:320px;

        min-width:320px;

        height:100vh;

        background:white;

        overflow-y:auto;

        transition:left .25s;

        z-index:5000;

    }

    #sidebar.open{

        left:0;

    }

    /* 地図 */

    #map{

        width:100%;

        height:100vh;

    }

    #sidebar h1{

        text-align:center;

        font-size:20px;

    }

    #sidebar h2{

        text-align:center;

        font-size:17px;

    }

    .bird-card{

        padding:12px;

    }

    .bird-name{

        font-size:17px;

    }

    .bird-info{

        font-size:13px;

    }

}