@charset "UTF-8";
/* --- おすすめ記事ら --- */
#related{
    width:920px;
    margin:0 auto 70px auto;
    padding:0;
    font-size:15px;
    line-height:1.4;
}
#related .ttl01{
    font-size:30px;
    text-align:center;
    font-weight:550;
    margin:0 0 1em 0;
}
#related .ttl01 b{
    font-size:16px;
    font-weight:normal;
}
#related .relatedWrapper{
    width:100%;
    overflow:hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    box-sizing: border-box;
}
#related a{
    display:block;
    width:calc(50% - 11px);
    height:125px;
    margin:0 0 20px 0;
    border:1px solid #ccc;
    border-radius: 10px;
    overflow:hidden;
    box-sizing: border-box;
}
#related .eachBox{
    width:100%;
    height:100%;
    display: flex;
}
#related .thumb{
    width:55%;
    text-align:center;
    overflow:hidden;
}
#related .midasi{
    width:45%;
}
#related .eachBox img{
    height:100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
#related .midasi b{
    display:block;
    font-weight:550;
    font-size:16px;
    margin:0.8em;
}
#related .midasi .upDateTm{
    font-size:13px;
    color:#111;
    margin:0 1em;
    opacity: 0.5;
}
#related a:link{color:#111;text-decoration:none;}
#related a:visited{color:#111;text-decoration:none;}
#related a:hover{color:#111;text-decoration:none;opacity: 0.8;}
#related a:active{color:#f70;text-decoration:none;}

/* --- スマホ --- */
@media screen and (max-width:767px){    
    #related{
        width:92vw;
        margin:0 auto 10vh auto;
        padding:0;
        font-size:4vw;
        line-height:1.4;
    }
    #related .ttl01{
        font-size:6.5vw;
        text-align:center;
        font-weight:550;
        margin:0 0 1em 0;
    }
    #related .ttl01 b{
        font-size:4vw;
    }
    #related .relatedWrapper{
        width:100%;
        overflow:hidden;
        display: block;
        flex-wrap: nowrap;
        justify-content: left; 
    }
    #related a{
        display:block;
        width:100%;
        height:125px;
        margin:0 0 20px 0;
        border:1px solid #ccc;
        border-radius: 10px;
        overflow:hidden;
    }
    #related .eachBox{
        width:100%;
        height:100%;
        display: flex;
    }
    #related .thumb{
        width:45%;
        text-align:center;
        overflow:hidden;
    }
    #related .midasi{
        width:55%;
    }
    #related .midasi b{
        display:block;
        font-weight:550;
        font-size:4.4vw;
        margin:0.7em;
    }
    #related .midasi .upDateTm{
        font-size:3.5vw;
        color:#999;
        margin:0 1em;
    }

}
/* --- おすすめ記事ここまで --- */