/* =========================
   喫茶ビオラ 共通CSS
   ========================= */

body{
    margin:20px;
    background:#fffdf5;
    color:#000000;
    font-family:"MS PGothic","ＭＳ Ｐゴシック",sans-serif;
    font-size:14px;
    line-height:1.6;
}

#wrapper{
    width:900px;
    margin:0 auto;
}

#sidebar{
    float:left;
    width:180px;
}

#content{
    margin-left:220px;
}

a{
    color:#0000EE;
}

a:visited{
    color:#551A8B;
}

a:hover{
    color:#FF0000;
}

h1{
    text-align:center;
    font-size:32px;
    margin-bottom:5px;
}

h2{
    margin-top:0;
}

.subtitle{
    text-align:center;
    font-size:12px;
    color:#666666;
    margin-bottom:20px;
}

.news-title{
    font-weight:bold;
}

.shopphoto,
.mapimg{
    width:100%;
    max-width:650px;
    border:1px solid #999999;
}

.menu-photo{
    width:220px;
    border:1px solid #999999;
}

.caption{
    text-align:center;
    font-size:12px;
    margin-top:5px;
}

.counter{
    text-align:center;
    font-size:13px;
}

.update{
    font-size:12px;
}

.footer{
    clear:both;
    margin-top:30px;
    font-size:12px;
    text-align:center;
}

.progress{
    position:fixed;
    right:18px;
    bottom:12px;
    z-index:20;
    padding:3px 8px;
    background:rgba(255,253,245,.86);
    border:1px solid #dddddd;
    color:#777777;
    font-size:11px;
}

/* =========================
   スマホ対応
   ========================= */

@media screen and (max-width: 768px){

body{
    margin:10px;
}

#wrapper{
    width:100%;
}

#sidebar{
    float:none;
    width:100%;
    margin-bottom:20px;
}

#content{
    margin-left:0;
}

table{
    max-width:100%;
}

.menu-photo{
    width:100%;
    max-width:220px;
    display:block;
    margin:0 auto;
}

.shopphoto,
.mapimg{
    width:100%;
    max-width:100%;
}

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

h1{
    font-size:28px;
}

table[width="170"]{
    width:100%;
}

}