@charset "UTF-8";
/**************************************************************/
/* 投稿記事配置 */
/**************************************************************/
.magazine-flex {
    width:calc(100% - 40px);
    margin:20px auto;
    display:flex;
}

.magazine-main {
    width:calc(100% - 360px);
    font-size:20px;
    margin-right:40px;
    line-height: 1.3em;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.magazine-menu {
    width:320px;
}

@media screen and (max-width: 999px) {
    .magazine-main {
        width:calc(100% - 300px);
        font-size:18px;
        margin-right:20px;
    }

    .magazine-menu {
        width:280px;
    }
}

@media screen and (max-width: 799px) {
    .magazine-flex {
        width:calc(100% - 40px);
        margin:20px auto;
        display:inline;
    }

    .magazine-main {
        width:calc(100% - 30px);
        font-size:18px;
        margin:auto auto 30px;
    }

    .magazine-menu {
        width:calc(100% - 30px);
        margin:auto;
    }
}

@media screen and (max-width: 599px) {
    .magazine-flex {
        width:100%;
    }

    .magazine-main {
        width:100%;
        font-size:14px;
    }

    .magazine-menu {
        width:100%;
    }
}


/**************************************************************/
/* エブリマガジン */
/**************************************************************/
.magazine-list {
    display: flex;
    flex-wrap: wrap;
}

.magazine-box {
    width:47%;
    height:auto;
    background:#fff;
    transition: .2s;
    margin-left:14px;
    margin-top: 0;
    margin-bottom:40px;
    transition: 0.2s;
}

.magazine-box a {
    display: block;
    margin:0;
}

.magazine-box:hover {
    filter: brightness(120%);
}

.top-magazine-list > .magazine-box:nth-last-child(1),
.top-magazine-list > .magazine-box:nth-last-child(2),
.top-magazine-list > .magazine-box:nth-last-child(3) {
    margin-bottom:0;
}

.magazine-ymd {
    font-size:16px;
    color:#888888;
    margin-bottom:5px;
}

.magazine-ymd span {
    color:#ff6666;
    font-weight:bold;
    margin-left:10px;
}

.magazine-thumb {
    width:100%;
    aspect-ratio:128 / 67;
    overflow: hidden;
}

.magazine-thumb img {
    border-radius: 5px;
    width:100%;
}

.magazine-category {
    display: inline-block;
    font-size:14px;
    background:#9ab9d0;
    color:#fff;
    border-radius: 30px;
    padding:2px 10px;
    line-height:1.1em;
    margin:15px 0 10px;
}

.magazine-title {
    font-size:20px;
    font-weight: bold;
    line-height:1.2em;
    padding:3px 3px 0 3px;
    width:100%;
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-box-orient: vertical;display: -webkit-box;
    -webkit-line-clamp:2;
    margin:0;
    letter-spacing: 0;
}

@media screen and (max-width: 999px) {
	 .magazine-box {
        width:47%;
        margin-left:1vw;
    }
	
    .magazine-ymd {
        font-size:14px;
        margin-bottom:4px;
    }

    .magazine-category {
        font-size:12px;
    }

    .magazine-title {
        font-size:18px;
    }
}

@media screen and (max-width: 599px) {
    .magazine-list > .magazine-box:nth-last-child(1),
    .magazine-list > .magazine-box:nth-last-child(2) {
        margin-bottom:0;
    }

	.magazine-box {
        width:48%;
        margin-left:1vw;
    }
	
    .top-magazine-ymd {
        font-size:12px;
        margin-bottom:3px;
    }

    .magazine-category {
        font-size:12px;
    }

    .magazine-title {
        font-size:14px;
        height:37px;
    }
}

/*記事が無い*/
.magazine-noarticles{
    font-size:18px;
}

@media screen and (max-width: 599px) {
    .magazine-noarticles{
        font-size:14px;
    }
}


@media screen and (max-width: 1199px) {
    .magazine-title {
        width:348px;
    }
}

@media screen and (max-width: 1180px) {
    .magazine-title {
        width:328px;
    }
}

@media screen and (max-width: 1140px) {
    .magazine-title {
        width:308px;
    }
}


@media screen and (max-width: 1100px) {
    .magazine-title {
        width:288px;
    }
}

@media screen and (max-width: 1060px) {
    .magazine-title {
        width:268px;
    }
}

@media screen and (max-width: 1020px) {
    .magazine-title {
        width:248px;
    }
}


@media screen and (max-width: 999px) {
    .magazine-title {
        width:278px;
    }
}

@media screen and (max-width: 960px) {
    .magazine-title {
        width:260px;
    }
}

@media screen and (max-width: 922px) {
    .magazine-title {
        width:242px;
    }
}

@media screen and (max-width: 884px) {
    .magazine-title {
        width:224px;
    }
}

@media screen and (max-width: 846px) {
    .magazine-title {
        width:206px;
    }
}

@media screen and (max-width: 808px) {
    .magazine-title {
        width:188px;
    }
}


@media screen and (max-width: 799px) {
    .magazine-title {
        width:330px;
    }
}

@media screen and (max-width: 766px) {
    .magazine-title {
        width:312px;
    }
}

@media screen and (max-width: 724px) {
    .magazine-title {
        width:294px;
    }
}

@media screen and (max-width: 686px) {
    .magazine-title {
        width:276px;
    }
}

@media screen and (max-width: 648px) {
    .magazine-title {
        width:258px;
    }
}

@media screen and (max-width: 610px) {
    .magazine-title {
        width:240px;
    }
}



@media screen and (max-width: 599px) {
    .magazine-title {
        width:272px;
    }
}

@media screen and (max-width: 588px) {
    .magazine-title {
        width:258px;
    }
}

@media screen and (max-width: 558px) {
    .magazine-title {
        width:244px;
    }
}

@media screen and (max-width: 528px) {
    .magazine-title {
        width:230px;
    }
}

@media screen and (max-width: 500px) {
    .magazine-title {
        width:216px;
    }
}

@media screen and (max-width: 470px) {
    .magazine-title {
        width:202px;
    }
}

@media screen and (max-width: 441px) {
    .magazine-title {
        width:188px;
    }
}

@media screen and (max-width: 412px) {
    .magazine-title {
        width:174px;
    }
}

@media screen and (max-width: 383px) {
    .magazine-title {
        width:160px;
    }
}

@media screen and (max-width: 354px) {
    .magazine-title {
        width:146px;
    }
}

@media screen and (max-width: 325px) {
    .magazine-title {
        width:132px;
    }
}

@media screen and (max-width: 296px) {
    .magazine-title {
        width:118px;
    }
}