@charset "utf-8";
@import url('/sp/css/base.css') screen and (max-width: 768px);

@media screen and (min-width: 769px) {

    #header_sp,
    #footer_sp {
        display: none;
    }
}

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

    /*LAYOUT*/
    #header,
    #topBanner,
    #sidebar,
    #footerMagazine,
    #sitemapWrapper,
    #footer {
        display: none;
    }

    #header_sp,
    #footer_sp {
        display: block;
    }

    div#wrapper {
        min-width: 100%;
        clear: both;
    }

    div#main {
        width: 100%;
        clear: both;
        margin: 0 auto;
    }

    div#contentWrap {
        width: 100%;
        clear: both;
        margin: 0;
    }

    div#contentWrap div#content {
        margin: 0 0 20px;
        padding: 0 10px;
        width: 100%;
        box-sizing: border-box;
    }

    div#main div.categoryHead p.topicPath {
        font-size: 10px;
        padding: 5px 0 5px 5px;
        margin-bottom: 0;
        box-sizing: border-box;
    }

    div#main div.categoryHead h2 {
        box-sizing: border-box;
        width: 100%;
    }

    #footer_sp #footer {
        display: block;
        box-sizing: border-box;
        padding: 20px 10px 10px;
        background: none;
    }

    div.social_icons {
        box-sizing: border-box;
        width: 100%;
        margin: 0 0 10px;
    }

    div#footer ul {
        box-sizing: border-box;
    }

    div#footer ul li {
        padding: 0;
        width: 18%;
        display: inline-block;
    }

    div#footer ul li img {
        width: 100%;
    }

    div#footer ul.partner li img {
        height: 35px;
        width: auto;
    }

    hr.pLine {
        display: none;
    }

    p.pcsite {
        display: none;
    }

    /* module */

    /* padding */
    .p0 {
        padding: 0px;
    }

    .p5 {
        padding: 5px;
    }

    .p10 {
        padding: 10px;
    }

    .p15 {
        padding: 15px;
    }

    .p20 {
        padding: 20px;
    }

    .p25 {
        padding: 25px;
    }

    .p30 {
        padding: 30px;
    }

    .pt5 {
        padding-top: 5px;
    }

    .pt10 {
        padding-top: 10px;
    }

    .pt15 {
        padding-top: 15px;
    }

    .pt20 {
        padding-top: 20px;
    }

    .pt25 {
        padding-top: 25px;
    }

    .pt30 {
        padding-top: 30px;
    }

    .pl5 {
        padding-left: 5px;
    }

    .pl10 {
        padding-left: 10px;
    }

    .pl15 {
        padding-left: 15px;
    }

    .pl20 {
        padding-left: 20px;
    }

    .pl25 {
        padding-left: 25px;
    }

    .pl30 {
        padding-left: 30px;
    }

    .pb5 {
        padding-bottom: 5px;
    }

    .pb10 {
        padding-bottom: 10px;
    }

    .pb15 {
        padding-bottom: 15px;
    }

    .pb20 {
        padding-bottom: 20px;
    }

    .pb25 {
        padding-bottom: 25px;
    }

    .pb30 {
        padding-bottom: 30px;
    }

    .pr5 {
        padding-right: 5px;
    }

    .pr10 {
        padding-right: 10px;
    }

    .pr15 {
        padding-right: 15px;
    }

    .pr20 {
        padding-right: 20px;
    }

    .pr25 {
        padding-right: 25px;
    }

    .pr30 {
        padding-right: 30px;
    }

    /* margin */
    .m0 {
        margin: 0px;
    }

    .m5 {
        margin: 5px;
    }

    .m10 {
        margin: 10px;
    }

    .m15 {
        margin: 15px;
    }

    .m20 {
        margin: 20px;
    }

    .m25 {
        margin: 25px;
    }

    .m30 {
        margin: 30px;
    }

    .mt0 {
        margin-top: 0px;
    }

    .mt5 {
        margin-top: 5px;
    }

    .mt10 {
        margin-top: 10px;
    }

    .mt15 {
        margin-top: 15px;
    }

    .mt20 {
        margin-top: 20px;
    }

    .mt25 {
        margin-top: 25px;
    }

    .mt30 {
        margin-top: 30px;
    }

    .mt40 {
        margin-top: 40px;
    }

    .ml0 {
        margin-left: 0px;
    }

    .ml5 {
        margin-left: 5px;
    }

    .ml10 {
        margin-left: 10px;
    }

    .ml15 {
        margin-left: 15px;
    }

    .ml20 {
        margin-left: 20px;
    }

    .ml25 {
        margin-left: 25px;
    }

    .ml30 {
        margin-left: 30px;
    }

    .mb0 {
        margin-bottom: 0px;
    }

    .mb5 {
        margin-bottom: 5px;
    }

    .mb10 {
        margin-bottom: 10px;
    }

    .mb15 {
        margin-bottom: 15px;
    }

    .mb20 {
        margin-bottom: 20px;
    }

    .mb25 {
        margin-bottom: 25px;
    }

    .mb30 {
        margin-bottom: 30px;
    }

    .mr0 {
        margin-right: 0px;
    }

    .mr5 {
        margin-right: 5px;
    }

    .mr10 {
        margin-right: 10px;
    }

    .mr15 {
        margin-right: 15px;
    }

    .mr20 {
        margin-right: 20px;
    }

    .mr25 {
        margin-right: 25px;
    }

    .mr30 {
        margin-right: 30px;
    }

    .font8 {
        font-size: 8px;
    }

    .font10 {
        font-size: 10px;
    }

    .font12 {
        font-size: 12px;
    }

    .font13 {
        font-size: 12px;
    }

    .font14 {
        font-size: 14px;
    }

    .font16 {
        font-size: 16px;
    }

    .font18 {
        font-size: 18px;
    }

    .font20 {
        font-size: 20px;
    }

    .font22 {
        font-size: 22px;
    }

    .font24 {
        font-size: 24px;
    }

    .font26 {
        font-size: 26px;
    }

    .font28 {
        font-size: 28px;
    }

    .font30 {
        font-size: 30px;
    }

    .font32 {
        font-size: 32px;
    }

    .font34 {
        font-size: 34px;
    }

    .font36 {
        font-size: 36px;
    }

    .font38 {
        font-size: 38px;
    }

    .font40 {
        font-size: 40px;
    }

    /* text-align */
    .left {
        text-align: left;
    }

    .right {
        text-align: right;
    }

    .center {
        text-align: center;
    }

    /* float */
    .fl {
        float: left;
    }

    .fr {
        float: right;
    }

    .clear {
        clear: both;
    }

    /* clearfix */
    .clearfix:after {
        content: '.';
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }

    .clearfix {
        display: block;
    }

    .clearfix {
        > display: inline-block;
    }

    /* font */
    .bold {
        font-weight: bold;
    }

    .sf {
        font-size: 10px;
    }

    .lf {
        font-size: 14px;
    }

    /* line-height */
    .lh1 {
        line-height: 1em;
    }

    .lh12 {
        line-height: 1.2em;
    }

    .lh15 {
        line-height: 1.5em;
    }
}