@charset "UTF-8";

/*
===========================================================================
|           site common style
===========================================================================
*/

/*----------------------------------------------------------------------
/   about
/----------------------------------------------------------------------*/
#shopIndex{

}
#shopIndex #introduction {
    background-color: #fff;
    background-color:#000;
    background-image: url("/shop/images/index/top_image.png");
    background-position: right 0 !important;
    background-repeat: no-repeat;
    background-size: auto 100%;
    color: #333;
    color:#ccc;
    height: 200px;
}
#shopIndex #introduction div.copy {
    float: left;
    width: 35%;
    padding: 0 0 0 20px;
}
#shopIndex #introduction div.copy p{
    font-size:100%;
}
#shopIndex #introduction div.copy h1 {
    color: #333;
    color:#fff;
    margin-bottom: 20px;
}
#shopIndex table.grid td.shop{
    font-weight:bold;
}
iframe.gmap{
    width:100%;
    height:450px;
    border:1px solid #ddd;
    margin-top:10px;
}
p.shopComment{
    font-size:110%;
}
table.grid td.website,
table.grid td.tel{
    text-align: center;
}
table.grid td.website{
    vertical-align: middle;
}
table.grid td.website img{
    display: block;
    width:12px;
    margin:0 auto;
}

/*=====================================================
    device
=======================================================*/

/*
    TAB
    */
@media screen and (max-width: 991px) {

}


/*
    SPHONE
    */
@media screen and (max-width: 479px) {
    #shopIndex #introduction{
        padding: 100px 0 0 0;
        background-size: auto 100px
    }
    #shopIndex #introduction div.copy{
        padding: 4% 0 ;
        width:auto;
        float: none;
        margin: 0 0;
        background: #000;
    }
    #shopIndex table.grid tr th{
        display: none;
        border-left:none;
        border-right:none;
    }
    #shopIndex table.grid tr td{
        display: block;
        border-left:none;
        border-right:none;
        width:auto;
        text-align: left;
        border-bottom:1px dotted #ccc;
    }
    #shopIndex table.grid td.website a:after{
        content: 'web site ';
        margin-left:10px;
    }
    #shopIndex table.grid td.website img{
        margin:0;
        display: inline-block;
        vertical-align: middle;
    }
    #shopIndex table.grid tr td.shop{
        background: #efefef;
        color:#000;
    }
    #shopIndex table.grid{
        border-top:none;
        border-left:none;
    }
    #shopDetail table.grid th,
    #shopDetail table.grid td{
        display: block;
        text-align: left;
    }
    #shopDetail iframe.gmap{
        height: 250px;
    }
}

table.grid img {
    max-width: 100%;
    height:auto;
}