.height-50-prec{
    height: 50%;
    background-image: url(../img/shoplist_revit_pc.jpg);
    background-size: cover;
    background-position: center;
    margin-bottom: 30px;
}
h2{
    font-size: 34px;
    font-weight: bold;
    margin: 60px 0px 50px;
}
.map {
    width: 100%;
    height: 350px;
    margin-bottom: 20px;
    border: 1px solid #000;
}
#js-btnGetPosition{
    border: 1px solid #777;
    padding: 5px;
    box-sizing: border-box;
    margin: 0px 0px 20px;
}
table tr td{
    text-align: left;
    padding: 5px 10px;
}
.js-other{
    margin-bottom: 20px;
}
.js-other tr th.nameth{
    width: 30%;
}
.js-other tr th.telth{
    width: 20%;
}
.js-other tbody tr {
    cursor: pointer;
    transition: 0.7s;
}
.js-other tbody tr:hover {
    background-color: #777;
    color: #fff;
}
.map a:hover, .map a:focus{
    color: blue;
}
@media (max-width: 680px) {
    .js-other thead{
        display: none;
    }
    .js-other, .js-other tbody, 
    .js-other caption, 
    .js-other tr, 
    .js-other td {
        display: block;
        width: 100%;
    }
    .js-other tr {
        margin-bottom: 1em;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 8px;
        background: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .js-other .tdname::before {
        content: "店舗名: ";
        font-weight: bold;
    }
    .js-other tr td:nth-child(2)::before {
        content: "住所: ";
        font-weight: bold;
    }
    .js-other tr td:nth-child(3)::before {
        content: "TEL: ";
        font-weight: bold;
    }
    .js-other td {
        border: 0;
        padding: 2px 6px;
    }
}
@media screen and (max-width: 480px){   
    .height-50-prec{
        background-image: url(../img/shoplist_revit_sp.jpg);
        height: 40%;
    }
    .map{
        height: 350px;
    }
}