/*
    areamap.css
----------------------------------------------------------------------------*/
* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "メイリオ", sans-serif;
    font-feature-settings : "palt";
    font-size: 1em;
}

li {
    list-style-type: none;
}

#map {
    position: relative;
    width: 100%;
    height: 0;
    overflow: auto;
}

#openMenu {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

#iconCrear img {
    width: 40px;
    height: 40px;
}

#watch, #stop {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: none;
}

#current {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: none;
}

#pin {
    position: absolute;
    width: 32px;
    height: 32px;
    z-index: 10;
    display: none;
}

#cover, #detail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(3, 3, 3, 0.90);
    color: #e0e0e0;
    z-index: 90;
    overflow: auto;
}

#detailWrap {
    margin: 0 1em;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 1.5em;
    line-height: 2.0;
}

.dTitle {
    margin-top: -10px;
    margin-bottom: 1.5em;
    font-size: 110%;
    padding: 0.5em;
}

.dTitle > img {
    height: 40px;
    margin-right: 1em;
    vertical-align: middle;
}

.dContents {
    margin-bottom: 1.5em;
}

.dAttach {
    margin-bottom: 1.5em;
    width: 100%;
    text-align: center;
}

.dAttach img {
    width: 600px;
    max-width: 90%;
}

.dContact {
    margin-bottom: 1.5em;
}

.dContact img {
    width: 1em;
}

#cover a:link    { text-decoration: underline; color: #c0c0f0; }
#cover a:visited { text-decoration: underline; color: #c0c0f0; }
#cover a:hover   { text-decoration: underline; color: #c0c0f0; }
#cover a:active  { text-decoration: underline; color: #c0c0f0; }

#detail a:link    { text-decoration: underline; color: #c0c0f0; }
#detail a:visited { text-decoration: underline; color: #c0c0f0; }
#detail a:hover   { text-decoration: underline; color: #c0c0f0; }
#detail a:active  { text-decoration: underline; color: #c0c0f0; }

.btnClose {
    border: 0px;
    cursor: default;
    margin: 0;
    padding: 19px 0 13px 20px;
}

#closeMenu {
    width: 40px;
    height: 40px;
    cursor: pointer;
}


/* リストカバー */
.listItem {
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    margin: 0 0.5em 4px 0.5em;
    padding: 0.5em;
    background-color: #fff;
}

.listTitle {
    display: inline-block;
    padding: 0 0.5em;
    width: calc(100% - 1.5em);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis; /* Safari */
    -o-text-overflow: ellipsis; /* Opera */
    vertical-align: middle;
}

.listTitle img {
    width: 40px;
    height: 40px;
    margin-right: 0.5em;
    vertical-align: middle;
}

.listContents {
    padding: 0.5em;
    display: none;
}

.listContents img[src="./img/tel.png"] {
    width: 1em;
}

.listContents img[src="./img/mail.png"] {
    width: 1em;
}

.listContents img[src="./img/url.png"] {
    width: 1em;
}

.listPict {
    width: 100%;
    text-align: center;
    margin: 1.5em 0;
}

.listPict img {
    width: 540px;
    max-width: 90%;
}


/* グリッドカバー */
.gridCover {
    width: 95%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.gridItem {
    display: inline-block;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    vertical-align: middle;
    padding: 6px 6px 0px 6px;
    margin-bottom: 6px;
}

.gridItem img {
    width: 64px;
    height: 64px;
}


.buttons {
    margin-top:0.5em;
}

.btn {
    padding: 4px 8px;
    background-color: #ddd;
    border: 1px solid #999;
    border-radius: 5px;
}

.btn img {
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: middle;
}


/* 詳細画面 */
#dialog {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    max-width: 300px;
    padding: 1em 1em;
    text-align: center;

    background-color: #fff;
    border: 1px solid #eee;

    z-index: 100;
}

#dialog .dMessage {
    text-align: center;
    margin-bottom: 1em;
}

#dialog .dButtons {
    text-align: center;
}

#closeDialog {
    background-color: #3a75fa;
    border: 1px solid #3a75ff;
    width: 80px;
    height: 3em;
    vertical-align: middle;
    text-align: center;
    color: #fff;
}