@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Bitter);

body{
    margin: 0px;
    padding: 0px;
    font-size: 18px;
    line-height: 28px;
    font-family: Verdana, Arial,"メイリオ","ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック",sans-serif;
    background-color:#DDD;
}

#container {
    width: 1000px;
    color: #333333;
    margin: 0 auto;
    background: transparent;
    text-align: center;
}

/*メニュー
---------------------------------------------------------------------------*/
/*メニュー全体を囲むブロック*/
#menubar {
    text-align: center;
    font-size: 18px;
    margin-bottom: 40px;
}
/*メニュー１個あたりの設定*/
#menubar li {
    display: inline;
}

#menubar li a {
    text-decoration: none;
    padding: 15px 30px; 
}
/*マウスオン時、現在表示中、の設定*/
#menubar li a:hover,
#menubar li.current a {
    color: #d08047;
    border-bottom: 4px solid #d08047;
}

/* よく使うもの */

.boxHorizon {
    width: 980px;
    margin: 10px 0px;
    padding: 10px;
    background-color: #EEE;
    border-radius: 3px 3px 3px 3px;
    border: 1px rgb(123, 185, 123) solid;
}

.boxR {
    width: 490px;
    float: right;
}

.btn {
    font-size:24px;
    margin:5px;
    padding:5px 10px;
}

h1 {
    font-size: 24px;
    color: chocolate;
}

img{
    border:none;
}

.imgBoxL {
    width:490px;
    float:left;
    margin:10px 0px;
}

.imgBoxR {
    width:490px;
    float:right;
    margin:10px 0px;
}

.imgLSize{
    width:490px;
}

/* グーグルマップ */
.map {
    margin: 10px 0px;
    padding: 5px;
    border-radius: 3px 3px 3px 3px;
    border: solid 2px #AAA;
}

/* テーブル */
.tbl {
    width: 100%;
    border-collapse: collapse;
}

.tbl th, .tbl td {
    border: 1px solid #ccc;
    background-color: #eee;
    padding: 10px;
}

.tbl th {
    background-color: #ddd;
}

.txarea {
    height: 100px;
    width: 400px;
}

/* 在庫表 */
.zaiko {
    width: 100%;
    margin:5px 0px;
    padding:0px;
    border-collapse: collapse;
}

.zaiko td {
    border: 1px solid #ccc;
    background-color: #eee;
    text-align:right;
    padding: 2px;
}


/* 小さい画面での表示 */
@media all and (max-width: 568px) {

    #container {
        width: 98%;
        /*color: #de3333;*/
        background: transparent;
        text-align:center;
    }

    /*メニュー
---------------------------------------------------------------------------*/
    /*メニュー全体を囲むブロック*/
    #menubar {
        text-align: center; /*文字をセンタリング*/
        font-size: 14px; /*文字サイズ*/
        margin-bottom: 20px; /*メニューの下に空けるスペース*/
    }
    /*メニュー１個あたりの設定*/
    #menubar li {
        display: inline; /*横並びにする設定*/
    }

    #menubar li a {
        text-decoration: none;
        padding: 5px 10px; 
    }
    /*マウスオン時、現在表示中、の設定*/
    #menubar li a:hover,
    #menubar li.current a {
        color: #d08047; /*文字色*/
        border-bottom: 4px solid #d08047; /*下線の幅、線種、色*/
    }

    .boxHorizon {
        width: 100%;
        padding:0;
    }

    .imgBoxL, .imgBoxR {
        width: 100%;
        text-align: center;
        float: left;
        margin: 0px;
    }

    .imgLSize {
        width: 100%;
    }
    
    .boxR {
        width: 100%;
        float: left;
    }

    .tbl th, .tbl td {
        display:block;
        width:100%;
        text-align:left;
        border: 1px solid #ccc;
        background-color: #eee;
        padding: 1px;
    }

    .txarea {
        height: 100px;
        width: 95%;
    }

}