@charset "UTF-8";

/* ============================================================ */
/*  max-width: 480px */
/* ============================================================ */

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

    #contentBox {
        width: 90%;
        padding: 30px 0;
    }

    .spVis {
        display: block;
    }

    #spMenu {
        display: block;
        position: fixed;
        right: 10px;
        /*width: 36px;
        height: 36px;*/
        margin: -136px 0 88px 0;
        text-align: right;
    }

        #spMenu a {
            /*width: 36px;
            height: 36px;*/
            background-image: url("../img/icon_menu2.png");
            background-repeat: no-repeat;
            background-position: 70% 46%;
            color: transparent;
            line-height: 36px;
        }

    .textCenter {
        width: 100%;
    }

    /* ---------- logIn ---------- */

    #logIn {
        width: 100%;
    }

        #logIn th {
            white-space: nowrap;
        }

    .idForm th {
        display: block;
        width: 100%;
        text-align: left;
    }

    .idForm td {
        display: block;
        width: 100%;
    }


    /* ---------- nav ---------- */

    nav {
        display: none;
        position: absolute;
        overflow: visible;
        top: 40px;
        width: 100%;
        margin: 0 0 0 -20px;
        z-index: 100;
    }

        nav li {
            display: block;
            position: relative;
            width: 100%;
            height: 20px;
            margin: 0;
            padding: 14px 0 2px;
        }

            nav li a:link,
            nav li a:visited {
                padding: 10px 0 2px 35px;
                border-bottom: 1px solid #ffffff;
                border-radius: 0;
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                text-align: left;
            }

            nav li a::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 20px;
                transform: translateY(-50%);
                border: 5px solid transparent;
                border-left: 8px solid #ffffff;
            }


    /* ---------- newsArea useArea ---------- */

    #newsArea {
        width: 100%;
    }

    #useArea {
        width: 100%;
    }


    /* ---------- subMit ---------- */

    .subMit li {
        width: 45%;
        padding: 10px 0;
    }


    /* ---------- detailTable ---------- */

    table.detailTable {
        width: 100%;
        margin: 0 auto;
        border-top: 1px solid #666666;
        border-left: 1px solid #666666;
    }
}