@charset "utf-8";

#cmnHeader {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0
}

#cmnHeader img {
    vertical-align: bottom;
    border: 0
}

#cmnHeader #cmnHeaderContainer {
    position: relative;
    z-index: 2999;
    clear: both;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    font-size: 12px
}

#cmnHeader #cmnHeaderContainer #cmnHeaderBox {
    clear: both;
    height: 57px;
    padding: 5px 10px 3px 53px;
    margin: auto
}

#cmnHeader #cmnHeaderContainer #cmnHeaderBox h1.logo {
    float: left;
    width: 150px;
    height: 30px;
    padding: 13px 0 0
}

#cmnHeader #cmnHeaderContainer #cmnHeaderBox h1.logo img {
    height: 100%
}

#cmnFooter {
    margin: 20px 0 0;
    background: 0 0
}

#cmnFooterContainer {
    background: #f3f3f5
}

#cmnFooterContainer #cmnFooterBox {
    position: relative;
    clear: both;
    max-width: 1000px;
    padding: 10px;
    margin: 0 auto;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.4
}

#cmnFooterContainer #cmnFooterBox a:link,
#cmnFooterContainer #cmnFooterBox a:visited {
    color: #333;
    text-decoration: none
}

#cmnFooterContainer #cmnFooterBox a:hover {
    color: #f90;
    text-decoration: underline
}

.cmnFooterContents {
    margin: 10px 0;
    border-bottom: 1px solid #666
}

.cmnFooterContents ul {
    margin: 0;
    overflow: hidden
}

.cmnFooterContents ul li {
    float: left
}

.cmnFooterContents ul li ul {
    margin-bottom: 30px
}

.cmnFooterContents ul li ul li {
    float: none;
    padding-left: 1.5em;
    margin-bottom: 10px;
    font-size: 110%;
    background: url("../img/icon_dot.webp") no-repeat 0 0
}

.cmnFooterContents .cmnFooterBlock01,
.cmnFooterContents .cmnFooterBlock02,
.cmnFooterContents .cmnFooterBlock03,
.cmnFooterContents .cmnFooterBlock04 {
    width: 23%;
    padding-left: 2%
}

.cmnFooterContents .cmnFooterTitle {
    margin-bottom: 15px;
    font-size: 130%;
    font-weight: 700
}

.cmnFooterContents02 {
    overflow: hidden
}

.cmnFooterContents02 .cmnFooterLink {
    float: left;
    width: 50%
}

.cmnFooterLink ul li {
    display: inline-block;
    padding-left: 1.2em;
    margin: 10px 10px 10px 0;
    background: url("../img/icon_gray_arrow.webp") no-repeat 0 0
}

.cmnFooterContents02 .cmnFooterCopyright {
    float: right;
    width: 50%;
    margin: 10px 0;
    text-align: right
}

#locHeader {
    z-index: 999;
    width: 100%;
    height: 62px;
    background-color: #fff;
    border-top: #0c3f98 solid 3px
}

#locHeader img {
    width: 150px;
    height: 30px;
    padding: 13px 0 0;
    margin: 0 0 20px
}

#locHeader .inner {
    width: 960px;
    height: 100%;
    overflow: hidden
}

#areaFooter {
    width: 100%;
    background: #f3f3f5
}

#areaFooter .fieldFooter {
    width: 960px;
    padding: 10px;
    margin: 0 auto;
    overflow: hidden;
    font-family: 'メイリオ', 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', sans-serif;
    line-height: 1.4;
    background: #f3f3f5
}

.locFooterContents02 {
    overflow: hidden
}

.locFooterLink {
    float: left;
    width: 50%
}

#areaFooter .locFooterLink li {
    display: inline-block;
    padding-left: 1.2em;
    margin: 10px 10px 10px 0;
    background: url("/products/ad/container/ver.6/img/footer/icon_gray_arrow.jpg") no-repeat 0 0
}

#areaFooter .fieldFooter a {
    font-size: 11px;
    color: #333;
    letter-spacing: 0;
    text-decoration: none
}

#areaFooter .locFooterContents02 .locCopyright {
    float: right;
    width: 50%;
    margin: 10px 0;
    font-size: 11px;
    text-align: right;
    letter-spacing: 0
}

@media only screen and (width <=640px) {

    #areaHeader #fieldHeader #containerMainHeader,
    #areaOption,
    #cmnHeader #cmnHeaderContainer,
    #containerSubHeaderAll #containerSubHeader,
    h1.smpSptitle {
        float: none;
        width: 94%;
        height: auto;
        padding: 2% 3%
    }

    #cmnHeader #cmnHeaderContainer {
        position: static;
        background: #fff
    }

    #cmnHeader #cmnHeaderContainer #cmnHeaderBox {
        clear: both;
        width: 100%;
        height: auto;
        padding: 0
    }

    #areaHeader #fieldHeader {
        width: 100%;
        padding: 0;
        margin: 0
    }

    #areaHeader #fieldHeader #containerSubHeader #containerSubHeaderBlock h1 a {
        display: inline-block
    }

    h1.smpSptitle {
        display: block;
        padding: 2% 0;
        font-size: 1.8rem;
        font-weight: 400
    }

    #cmnFooter {
        margin-top: 0;
        background: 0 0
    }

    #cmnFooterContainer #cmnFooterBox {
        position: relative;
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
        line-height: 1;
        background-color: #f3f3f5
    }

    .cmnFooterContents {
        margin: 0;
        border-bottom: 1px solid #fff
    }

    .cmnFooterContents .cmnFooterTitle {
        font-weight: 400
    }

    .cmnFooterContents ul {
        width: 100%;
        padding: 0;
        margin: 0;
        background: url("../img/bg_line_sp.webp") repeat-y 50% 0
    }

    .cmnFooterContents ul li {
        float: none
    }

    .cmnFooterContents ul li ul {
        margin-bottom: 0
    }

    .cmnFooterContents02 {
        margin: 10px 0
    }

    .cmnFooterContents02 .cmnFooterLink {
        float: none;
        width: 100%
    }

    .cmnFooterContents02 .cmnFooterLink ul li {
        padding-left: 1.2em;
        margin: 10px;
        background: url("../img/icon_gray_arrow_sp.webp") no-repeat 0 0;
        background-size: contain
    }

    .cmnFooterContents02 .cmnFooterCopyright {
        float: none;
        box-sizing: border-box;
        width: 100%;
        margin: 5px 0 10px 12px;
        color: #333;
        text-align: left
    }

    .fieldFooter {
        width: 100% !important;
        padding: 0 10px !important
    }

    .locFooterContents02 {
        margin: 10px 0 !important
    }

    .locFooterContents02 .locFooterLink {
        float: none;
        width: 100%
    }

    .locFooterContents02 .locCopyright {
        float: none;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 5px 0 10px 12px !important;
        text-align: left !important
    }
}