/* 表示制御 */
@media screen and (min-width: 641px) {
    /*  PC  */
    #web-magazine ._hidePC{
        display: none;
    }
}

@media screen and (max-width: 640px) {
    /*  SP  */
    #web-magazine ._hideSP{
        display: none;
    }
}


#web-magazine{
    font-family: '小塚ゴシック Pro L','Kozuka Gothic Pro Light','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
    text-align: center;
}

@media screen and (min-width: 641px) {
    /*  PC  */
    #web-magazine{
        padding: 52px 0 60px;
    }
}

@media screen and (max-width: 640px) {
    /*  SP  */
    #web-magazine{
        padding: 6.933% 0 8%;
    }
}


#web-magazine p{
    margin: 0;
    padding: 0;
}

#web-magazine h1{
    margin: 20px 0 0;
    line-height: 1 !important;
    font-weight: normal;
}

#web-magazine ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

#web-magazine ul li{
    margin: 0;
    padding: 0;
}

#web-magazine.mgn5{ margin: 5px 0; }
#web-magazine.mgn10{ margin: 10px 0; }
#web-magazine.mgn15{ margin: 15px 0; }
#web-magazine.mgn20{ margin: 20px 0; }
#web-magazine.mgn25{ margin: 25px 0; }
#web-magazine.mgn30{ margin: 30px 0; }
#web-magazine.mgn35{ margin: 35px 0; }
#web-magazine.mgn40{ margin: 40px 0; }
#web-magazine.mgn45{ margin: 45px 0; }
#web-magazine.mgn50{ margin: 50px 0; }

@media screen and (min-width: 641px) {
    /*  PC  */
    #web-magazine h1{
        padding: 20px 0;
        font-size: 25px !important;
    }
}

@media screen and (max-width: 640px) {
    /*  SP  */
    #web-magazine h1{
        padding: 15px 0;
        font-size: 3.999vw !important;
    }
}

#web-magazine .lead{
    position: relative;
    margin-top: 20px;
    width: 100% !important;
    line-height: 1.8 !important;
}

@media screen and (min-width: 641px) {
    /*  PC  */
    #web-magazine .lead{
        font-size: 19px !important;
        padding-bottom: 0.8em;
    }
}

@media screen and (max-width: 640px) {
    /*  SP  */
    #web-magazine .lead{
        font-size: 3.733vw !important;
        line-height: 1.6 !important;
        padding-bottom: 1em;
    }
}

#web-magazine .lead:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    border-radius: 1px;
}

@media screen and (min-width: 641px) {
    /*  PC  */
    #web-magazine .magazine-wrapper{
        max-width: 1200px;
        margin: 0 auto;
    }
}

#web-magazine .magazine-wrapper ul{
    font-size: 0;
}

#web-magazine .magazine-wrapper ul li{
    box-sizing: border-box;
    position: relative;
}


#web-magazine .magazine-wrapper ul li a{
    box-sizing: border-box;
    display: block;
    overflow: hidden;
}

#web-magazine .magazine-wrapper ul li .item-image{
    position: relative;
}

#web-magazine .magazine-wrapper ul li .item-image img{
    width: 100%;
    height: auto;
}

#web-magazine .magazine-wrapper ul li .item-image.new:after{
    content: "";
    width: 17.85%;
    height: 0;
    padding-top:17.85%;
    position: absolute;
    top: 0;
    right: 0;
    background: url(../images/freespace/icon_new.png) no-repeat;
    background-size: contain;
}

@media screen and (min-width: 641px) {
    /*  PC  */
    #web-magazine .magazine-wrapper ul{
        margin-top: 2%;
    }

    #web-magazine .magazine-wrapper ul li{
        display: inline-block;
        vertical-align: top;
        width: 25%;
        padding:0 0.928%;
        margin-top: 2%;
    }

    #web-magazine .magazine-wrapper ul.large li{
        width: 40%;
    }

    #web-magazine .magazine-wrapper ul li a{
        background: #ffffff;
        border: solid 1px #000000;
    }

    #web-magazine .magazine-wrapper ul li .item-image{
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    #web-magazine .magazine-wrapper ul li .item-image img{
        transition: transform 0.2s linear;
    }

    #web-magazine .magazine-wrapper ul li a:hover .item-image img{
        transform: scale(1.1);
    }

    #web-magazine .magazine-wrapper ul li.default .radiru span{
        display: block;
        background: url(../images/freespace/radiru.png) no-repeat 96% 96%;
    }
}

@media screen and (max-width: 640px) {
    /*  SP  */
    #web-magazine .magazine-wrapper ul{
        margin: 5% 3.2% 0;
    }

    #web-magazine .magazine-wrapper ul li{
        width: 100%;
        border-bottom: 1px solid #fff;
        padding: 10px 0;
    }

    #web-magazine .magazine-wrapper ul li a{
        background: none !important;
    }

    #web-magazine .magazine-wrapper ul li:first-child{
        border-top: 1px solid #fff;
    }

    #web-magazine .magazine-wrapper ul li .item-image{
        float: right;
        width: 35%;
    }

    #web-magazine .magazine-wrapper ul li.default{
        display: none;
    }
}

#web-magazine .magazine-wrapper ul li .item-data .item-data-title{
    font-weight: bold;
    text-align: left;
}

#web-magazine .magazine-wrapper ul li .item-data .item-data-category{
    line-height: 1.5;
    text-align: right;
    position: absolute;
}

#web-magazine .magazine-wrapper ul li .item-data .item-data-category .cate{
    display: inline-block;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.03em;
}

#web-magazine .magazine-wrapper ul li .item-data .item-data-category .date{
    line-height: 1;
    font-weight: bold;
    letter-spacing: 0.03em;
    padding: 0.3em 0;
}

#web-magazine .magazine-wrapper ul li.noitem{
    width: 100%;
    padding: 3em 0;
}

@media screen and (min-width: 641px) {
    /*  PC  */
    #web-magazine .magazine-wrapper ul li.noitem{
        font-size: 20px !important;
    }

    #web-magazine .magazine-wrapper ul li .item-data{
        position: relative;
        font-size: 16px !important;
        margin: 0.6em;
    }

    #web-magazine .magazine-wrapper ul li .item-data .item-data-title{
        font-size: 16px !important;
        line-height: 1.35;
    }

    #web-magazine .magazine-wrapper ul li .item-data .item-data-category{
        right: 0;
        bottom: 0;
    }

    #web-magazine .magazine-wrapper ul li .item-data .item-data-category .cate{
        font-size: 12px !important;
        padding: 0 0.6em;
        margin-right: 0.5em;
    }

    #web-magazine .magazine-wrapper ul li .item-data .item-data-category .date{
        font-size: 12px !important;
    }
}

@media screen and (max-width: 640px) {
    /*  SP  */
    #web-magazine .magazine-wrapper ul li.noitem{
        font-size: 3.733vw !important;
        border: none;
    }

    #web-magazine .magazine-wrapper ul li .item-data{
        width: 62%;
        font-size: 3.733vw !important;
        line-height: 1.2;
    }

    #web-magazine .magazine-wrapper ul li .item-data .item-data-title{
        font-size: 3.733vw !important;
    }

    #web-magazine .magazine-wrapper ul li .item-data .item-data-category{
        right: 38%;
        bottom: 10px;
    }

    #web-magazine .magazine-wrapper ul li .item-data .item-data-category .cate{
        font-size: 2.933vw !important;
        padding: 0 0.6em;
        margin-right: 0.5em;
    }

    #web-magazine .magazine-wrapper ul li .item-data .item-data-category .date{
        font-size: 2.933vw !important;
    }
}

#web-magazine .wm-more{
    margin: 35px 10px 0;
}

#web-magazine .wm-more a{
    display: inline-block;
    box-sizing: border-box;
    border-radius: 40px;
    max-width: 700px;
    width: 100%;
    padding: 16px;
    box-shadow: 4px 4px rgba(0, 0, 0, .2);
}

#web-magazine .wm-more span{
    display: inline-block;
    padding-left: 30px;
    font-size: 20px !important;
    background: url(../images/freespace/icon_more_01.png) no-repeat left;
    line-height: 1.8 !important;
}

@media screen and (min-width: 641px) {
    /*  PC  */
    #web-magazine .wm-more a{
        transition: opacity 0.4s;
    }

    #web-magazine .wm-more a:hover{
        opacity: 0.7;
    }
}

@media screen and (max-width: 640px) {
    /*  SP  */
    #web-magazine .wm-more a{
        padding: 8px;
    }
    #web-magazine .wm-more span{
        font-size: 3.733vw !important;
        padding-left: 10%;
        background-size: contain;
    }
}





/* ----------------------------- */
/*             色設定             */
/* ----------------------------- */

/* 黒 */
#web-magazine.black{
    background: url(../images/freespace/bg01.png);
}
#web-magazine.black h1{
    color: #ee2d2e;
    background: #fff;
}
#web-magazine.black .lead{
    color: #fff;
}
#web-magazine.black .noitem{
    color: #fff;
}
#web-magazine .lead:after{
    background: #fff;
}
#web-magazine.black .magazine-wrapper ul li a{
    background: none;
    border-color: #fff;
    color: #fff;
}
#web-magazine.black .magazine-wrapper ul li.default .radiru{
    background-color: #e5e5e5;
}
#web-magazine.black .wm-more a{
    background:#fff;
}
#web-magazine.black .wm-more span{
    color:#ee2d2e;
    background-image: url(../images/freespace/icon_more_01.png);
}

/* ベージュ */
#web-magazine.beige{
    background: #ebdeca;
}
#web-magazine.beige h1{
    color: #fff;
    background: #ee2d2e;
}
#web-magazine.beige .lead{
    color: #ee2d2e;
}
#web-magazine.beige .noitem{
    color: #ee2d2e;
}
#web-magazine.beige .lead:after{
    background: #ee2d2e;
}
#web-magazine.beige .magazine-wrapper ul li a{
    background: #fff;
    border: none;
    color: #434343;
}
#web-magazine.beige .magazine-wrapper ul li.default .radiru{
    background: url(../images/freespace/radiru_bg_01.png);
}
#web-magazine.beige .wm-more a{
    background:#ee2d2e;
}
#web-magazine.beige .wm-more span{
    color:#fff;
    background-image: url(../images/freespace/icon_more_02.png);
}

/* 黄色 */
#web-magazine.yellow{
    background: url(../images/freespace/bg02.png);
}
#web-magazine.yellow h1{
    color: #000;
    background: #ffb400;
}
#web-magazine.yellow .lead{
    color: #000;
}
#web-magazine.yellow .noitem{
    color: #000;
}
#web-magazine.yellow .lead:after{
    background: #ffb400;
}
#web-magazine.yellow .magazine-wrapper ul li a{
    background: #fff;
    border: none;
    color: #000;
}
#web-magazine.yellow .magazine-wrapper ul li.default .radiru{
    background: url(../images/freespace/radiru_bg_02.png);
}
#web-magazine.yellow .wm-more a{
    background:#ffb400;
}
#web-magazine.yellow .wm-more span{
    color:#000;
    background-image: url(../images/freespace/icon_more_02.png);
}

/* 緑色 */
#web-magazine.green{
    background: url(../images/freespace/bg03.png);
}
#web-magazine.green h1{
    color: #13b5b1;
    background: #fff;
}
#web-magazine.green .lead{
    color: #fff;
}
#web-magazine.green .noitem{
    color: #fff;
}
#web-magazine.green .lead:after{
    background: #fff;
}
#web-magazine.green .magazine-wrapper ul li a{
    background: #fff;
    border: none;
    color: #000;
}
@media screen and (max-width: 640px) {
    /*  SP  */
    #web-magazine.green .magazine-wrapper ul li a{
        color: #fff;
    }
}
#web-magazine.green .magazine-wrapper ul li.default .radiru{
    background: url(../images/freespace/radiru_bg_03.png);
}
#web-magazine.green .wm-more a{
    background:#fff;
}
#web-magazine.green .wm-more span{
    color:#13b5b1;
    background-image: url(../images/freespace/icon_more_03.png);
}

/* 青色 */
#web-magazine.blue{
    background: url(../images/freespace/bg04.png);
}
#web-magazine.blue h1{
    color: #8fe1ff;
    background: #000;
}
#web-magazine.blue .lead{
    color: #000;
}
#web-magazine.blue .noitem{
    color: #000;
}
#web-magazine.blue .lead:after{
    background: #000;
}
#web-magazine.blue .magazine-wrapper ul li a{
    background: #fff;
    border: none;
    color: #000;
}
#web-magazine.blue .magazine-wrapper ul li.default .radiru{
    background: url(../images/freespace/radiru_bg_04.png);
}
#web-magazine.blue .wm-more a{
    background:#000;
}
#web-magazine.blue .wm-more span{
    color:#8fe1ff;
    background-image: url(../images/freespace/icon_more_04.png);
}

/* 赤色 */
#web-magazine.red{
    background: #ee2d2e;
}
#web-magazine.red h1{
    color: #fff;
    background: #000;
}
#web-magazine.red .lead{
    color: #fff;
}
#web-magazine.red .noitem{
    color: #fff;
}
#web-magazine.red .lead:after{
    background: #fff;
}
#web-magazine.red .magazine-wrapper ul li a{
    background: #fff;
    border: none;
    color: #000;
}
@media screen and (max-width: 640px) {
    /*  SP  */
    #web-magazine.red .magazine-wrapper ul li a{
        color: #fff;
    }
}
#web-magazine.red .magazine-wrapper ul li.default .radiru{
    background: url(../images/freespace/radiru_bg_05.png);
}
#web-magazine.red .wm-more a{
    background:#000;
}
#web-magazine.red .wm-more span{
    color:#fff;
    background-image: url(../images/freespace/icon_more_05.png);
}

/* ピンク色 */
#web-magazine.pink{
    background: url(../images/freespace/bg05.png);
}
#web-magazine.pink h1{
    color: #fff;
    background: #fe8383;
}
#web-magazine.pink .lead{
    color: #010101;
}
#web-magazine.pink .noitem{
    color: #010101;
}
#web-magazine.pink .lead:after{
    background: #fe8383;
}
#web-magazine.pink .magazine-wrapper ul li a{
    background: #fff;
    border: none;
    color: #000;
}
#web-magazine.pink .magazine-wrapper ul li.default .radiru{
    background: url(../images/freespace/radiru_bg_06.png);
}
#web-magazine.pink .wm-more a{
    background:#fe8383;
}
#web-magazine.pink .wm-more span{
    color:#fff;
    background-image: url(../images/freespace/icon_more_02.png);
}

/* 白色 */
#web-magazine.white{
    background: #fff;
}
#web-magazine.white h1{
    color: #fff;
    background: #ee2d2e;
}
#web-magazine.white .lead{
    color: #010101;
}
#web-magazine.white .noitem{
    color: #010101;
}
#web-magazine.white .lead:after{
    background: #ee2d2e;
}
@media screen and (max-width: 640px) {
    /*  SP  */
   #web-magazine.white .magazine-wrapper ul li{
       border-color: #e5e5e5;
    }
}

#web-magazine.white .magazine-wrapper ul li a{
    background: #e5e5e5;
    border: none;
    color: #000;
}
#web-magazine.white .magazine-wrapper ul li.default .radiru{
    background: #e5e5e5;
}
#web-magazine.white .wm-more a{
    background:#ee2d2e;
}
#web-magazine.white .wm-more span{
    color:#fff;
    background-image: url(../images/freespace/icon_more_02.png);
}

/* 大理石 */
#web-magazine.marble{
    background: url(../images/freespace/bg06.jpg);
}
#web-magazine.marble h1{
    color: #fff;
    background: #2f160d;
}
#web-magazine.marble .lead{
    color: #010101;
}
#web-magazine.marble .noitem{
    color: #010101;
}
#web-magazine.marble .lead:after{
    background: #2f160d;
}
#web-magazine.marble .magazine-wrapper ul li a{
    background: #e5e5e5;
    border: none;
    color: #000;
}
#web-magazine.marble .magazine-wrapper ul li.default .radiru{
    background: url(../images/freespace/radiru_bg_07.png);
}
#web-magazine.marble .wm-more a{
    background:#2f160d;
}
#web-magazine.marble .wm-more span{
    color:#fff;
    background-image: url(../images/freespace/icon_more_02.png);
}

/* 芝生 */
#web-magazine.lawn{
    background: url(../images/freespace/bg07.jpg);
}
#web-magazine.lawn h1{
    color: #313131;
    background: #fff;
}
#web-magazine.lawn .lead{
    color: #fff;
}
#web-magazine.lawn .noitem{
    color: #fff;
}
#web-magazine.lawn .lead:after{
    background: #fff;
}
#web-magazine.lawn .magazine-wrapper ul li a{
    background: #fff;
    border: none;
    color: #000;
}
@media screen and (max-width: 640px) {
    /*  SP  */
    #web-magazine.lawn .magazine-wrapper ul li a{
        color: #fff;
    }
}
#web-magazine.lawn .magazine-wrapper ul li.default .radiru{
    background: url(../images/freespace/radiru_bg_08.png);
}
#web-magazine.lawn .wm-more a{
    background:#fff;
}
#web-magazine.lawn .wm-more span{
    color:#000;
    background-image: url(../images/freespace/icon_more_06.png);
}

/* 背景透明 */
#web-magazine.trans{
    background: none !important;
}