@charset "UTF-8";

/* ########### 350px以下 ########### */
@media screen and (max-width: 350px) {
    .headerLogo a {
        width: 200px;
        height: 40px;
        background-size: 200px;
    }
    .headerExtra {
        margin: 0;
        padding: 0;
    }
    .headerExtra p {
        font-size: 75%;
    }
    #tmenu ul {
        font-size: 70%;
    }
    #contact {
        width: 100%;
    }
    #contact dt {
        float: none;
    }
    #contact dd {
        padding-left: 40px;
    }
}

/* ########### 351px～480px ########### */
@media screen and (min-width: 351px) and (max-width: 480px) {
    .headerLogo a {
        width: 200px;
        height: 40px;
        background-size: 200px;
    }
    .headerExtra {
        margin: 0;
        padding: 0;
    }
    .headerExtra p {
        font-size: 75%;
    }
    #tmenu ul {
        font-size: 70%;
    }
    #contact {
        width: 100%;
    }
    #contact dt {
        float: none;
    }
    #contact dd {
        padding-left: 40px;
    }
}

/* ########### 481px～500px ########### */
@media screen and (min-width: 481px) and (max-width: 500px) {

    #contact {
        width: 100%;
    }
}

/* ########### 501px～650px ########### */
@media screen and (min-width: 501px) and (max-width: 650px) {

    #contact {
        width: 100%;
    }
}

/* ##### 800px以下　##### */
@media screen and (max-width: 800px) {
    .headerLogo a, .headerExtra {
        float: none;
    }
    #main {
        margin: 0 10px;
    }
    .shopinfo {
        width: 100%;
        text-align: center;
    }
    /* btn */

    html {
        width: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    #btn {
        overflow: hidden;
        position: relative;
        top: 0;
        z-index: 0;
        width: 100%;
        height: 40px;
    }

    .left_open {
        position: absolute;
        top: 0;
        z-index: 1;
        cursor: pointer;
        width: 100%;
        height: 40px;
        text-indent: -9999px;
        background: url(../../img/btn.png) no-repeat left center;
    }

    .left_close {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        cursor: pointer;
        width: 100%;
        height: 40px;
        text-indent: -9999px;
        background: url(../../img/btn2.png) no-repeat left center;
    }


    #header, #wrap {
        overflow: hidden;
        position: relative;
        z-index: 2;
    }

    #fmenu {
        position: absolute;
        top: 0;
        left: -200px;
        z-index: 2;
        width: 200px;
        background: #ccc;
    }
    #fmenu li {
        margin: 0;
        padding: 10px;
    }
    #fmenu li a {
        display: block;
    }
    .menu1, .menu2, .menu3 {
        float: none;
        width: 100%;
        margin: 0;
    }
    .menu1 h2 {
        margin-top: 40px;
        padding: 10px;
    }
    #fmenu h2 a {
        display: block;
    }
    .menu3 li {
        margin: 0;
        padding: 10px;
        border-top: 1px solid #fff;
    }
}

/* ##### 801px以上　##### */
@media screen and (min-width: 801px) {
    #header, #tmenu ul, #content, #fbox {
        width: 900px;
        margin: 0 auto;
    }
    #tmenu li a {
        padding: 15px;
    }
    #btn, #btn2 {
        display: none;
    }
}