@charset "utf-8";

@media screen and (max-width: 979px) {
    /* !header layout
    ---------------------------------------------------------- */
    #header {
        padding-top: 0;
        min-width: 320px;
        border-bottom: 1px solid #ccc;
    }
}

@media screen and (max-width: 979px) {
    /* !headerContent
    ---------------------------------------------------------- */
    #headerContent {
        padding: 0;
        width: 100%;
        position: relative;
    }
    #headerContentIn {
        margin: 0 auto;
        width: 768px;
    }
    #headerLogo {
        float: none;
        padding: 19px 19px 18px;
    }
    #headerMenuBtn {
        display: block;
        padding-top: 26px;
        width: 76px;
        height: 50px;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        text-indent: -9999px;
        background: url(../images/header/btn_dropmenu_open01.png) no-repeat center center;
        background-size: 23px 24px;
    }
    #headerMenuBtn.open {
        background-color: #444;
        background-image: url(../images/header/btn_dropmenu_close01.png);
    }

    #headerLinks {
        display: none;
    }
}
@media screen and (max-width: 767px) {
    #headerContentIn {
        width: 100%;
    }
    #headerLogo {
        padding: 9px 7px 11px;
    }
    #headerLogo img {
        width: auto;
        height: 25px;
    }
    #headerMenuBtn {
        padding-top: 10px;
        width: 45px;
        height: 35px;
    }
    #headerMenuBtn img {
        width: 23px;
        height: auto;
    }
}

@media screen and (max-width: 979px) {
    #headerSearch {
        display: none;
        float: none;
        margin: 0 auto;
        padding: 15px 0;
        width: 100%;
        position: absolute;
        left: 0;
        top: 75px;
        z-index: 10001;
        background-color: #444;
    }
    #headerSearch.show {
        display: block;
    }
    #headerSearch form {
        display: block;
        margin: 0 auto;
        width: 363px;
        position: relative;
    }
    #headerSearch input {
        -webkit-appearance: none;
        border-radius: 0;
    }
    #headerSearch input[type=text],
    #header.white #headerSearch input[type=text]  {
        width: 340px;
        background-color: #666;
        color: #fff;
    }
    #headerSearch input[type=submit],
    #header.white #headerSearch input[type=submit] {
        left: 350px;
        background-image: url(../images/header/btn_header_search02.gif);
    }
    @media (-webkit-min-device-pixel-ratio: 2) {
        #headerSearch input[type=submit],
        #header.white #headerSearch input[type=submit] {
            background-image: url(../images/header/btn_header_search02_2x.gif);
            background-size: 35px 35px;
        }
    }

}
@media screen and (max-width: 767px) {
    #headerSearch {
        top: 45px;
    }
    #headerSearch form {
        width: 300px;
    }
    #headerSearch input[type=text],
    #header.white #headerSearch input[type=text] {
        width: 255px;
    }
    #headerSearch input[type=submit],
    #header.white #headerSearch input[type=submit] {
        left: 265px;
    }
}
@media screen and (max-width: 979px) {
    #dropMenuWrap_sp {
        display: none;
        width: 100%;
        position: absolute;
        left: 0;
        top: 140px;
        z-index: 10001;
        overflow: hidden;
    }
    #dropMenuWrap_sp #headerLinks_sp {
        display: none;
        min-height: 1%;
        float: none;
        margin-top: -1px;
        width: 100%;
        height: auto;
        border-top: 1px solid #777;
        background-color: #555;
        overflow: hidden;
        position:relative;
        z-index: 10001;
    }
    #dropMenuWrap_sp.open #headerLinks_sp {
        display: block;
    }
    #headerLinks_sp:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
    }
    #headerLinks_sp ul {
    }
    #header.white #headerLinks_sp li,
    #headerLinks_sp li {
        display: table;
        float: left;
        position: static;
        padding: 0;
        width: 50%;
        height: 47px;
        border-bottom: 1px solid #777;
        border-right: 1px solid #777;
        background: none;
        box-sizing: border-box;
    }
    #header.white #headerLinks_sp li a,
    #headerLinks_sp li a {
        display: table-cell;
        vertical-align: middle;
        padding-left: 21px;
        height: 47px;
        background-image: url(../images/header/ico_header_arrow_l01.png);
        background-repeat: no-repeat;
        background-position: 92.44% center !important;
        text-indent: 0;
        color: #fff;
        font-size: 100%;
        font-weight: bold;
        text-decoration: none;
    }
    #headerLinks_sp li a:focus,
    #headerLinks_sp li a:hover {
        text-decoration: none;
    }
    #header.white #headerLinks_sp li a.external,
    #headerLinks_sp li a.external {
        background: url(../images/header/ico_header_external02.png) no-repeat 92.44% center !important;
    }
    @media (-webkit-min-device-pixel-ratio: 2) {
        #header.white #headerLinks_sp li a,
        #headerLinks_sp li a {
            background: url(../images/header/ico_header_arrow_l01_2x.png)  6px 12px no-repeat;
        }
        #header.white #headerLinks_sp li a.external,
        #headerLinks_sp li a.external {
            background: url(../images/header/ico_header_external02_2x.png) 11px 10px no-repeat;
        }
    }
}
@media screen and (max-width: 767px) {
    #dropMenuWrap_sp {
        top: 110px;
    }
    #header.white #headerLinks_sp li a,
    #headerLinks_sp li a {
        padding: 0 26px 0 10px;
        height: 50px;
        background-position: 89.87% center !important;
        font-size: 85.71%;
    }
    #header.white #headerLinks_sp li a.external,
    #headerLinks_sp li a.external { background-position: 89.87% center !important; }
}

/* !gNavi
---------------------------------------------------------- */
@media screen and (max-width: 979px) {
    #dropMenuWrap_sp.open #gNavi {
        display: block;
    }
    #gNavi {
        display: none;
        margin: 0;
        background-color: #444;
        position: relative;
        z-index: 10000;
    }
    #gNavi ul {
        margin: 0 auto;
        width: 100%;
        height: auto;
        border-top: 1px solid #777;
        overflow: hidden;
        display: block;
        min-height: 1%;
    }
    #gNavi ul:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
    }
    #gNavi li {
        display: table;
        float: left;
        position: static;
        padding: 0;
        width: 50%;
        height: 47px;
        border-bottom: 1px solid #777;
        border-right: 1px solid #777;
        box-sizing: border-box;
    }
    #gNavi li#gNav03 { display: none; }
    #gNavi li#gNav03_sp { display: table; }
    #header.white #gNavi li a,
    #gNavi li a {
        display: table-cell;
        vertical-align: middle;
        padding: 0 48px 0 21px;
        height: 47px;
        background: url(../images/header/ico_header_arrow_l01.png) no-repeat 92.44% center !important;
        text-indent: 0;
        color: #fff;
        font-weight: bold;
        text-decoration: none;
    }
    #header.white #gNavi li a.external,
    #gNavi li a.external {
        background: url(../images/header/ico_header_external02.png) no-repeat 92.44% center !important;
    }
    @media (-webkit-min-device-pixel-ratio: 2) {
        #header.white #gNavi li a,
        #gNavi li a {
            background-image: url(../images/header/ico_header_arrow_l01_2x.png);
            background-size: 6px 12px;
        }
        #header.white #gNavi li a.external,
        #gNavi li a.external {
            background-image: url(../images/header/ico_header_external02_2x.png);
            background-size: 11px 10px;
        }
    }

    .gNav01BrandListTitle{
        border: 1px solid #777;
        background: #777;
        margin-top: 10px;
        line-height: 2em;
    }
    .gNav01brandListWrap{
        color:#fff;
        margin-bottom:30px;
    }
}
@media screen and (max-width: 767px) {
    #header.white #gNavi li a,
    #gNavi li a {
        padding: 0 26px 0 10px;
        height: 50px;
        background-position: 89.87% center !important;
        font-size: 85.71%;
    }
    #header.white #gNavi li a.external,
    #gNavi li a.external { background-position: 89.87% center !important; }
}

/* !dropMenu
---------------------------------------------------------- */
@media screen and (max-width: 979px) {
    #dropMenuWrap {
        display: none;
    }
}