@charset "UTF-8";
/* CSS Document */

/*************************************************************************************************************************
* 画面幅：680px 以下
*************************************************************************************************************************/
.pc{
    display: none;
}
.sp{
    display: initial;
}
#monthly-mvp .card-title strong{
    font-size: 20px;
}

.card-contents p.active{
    background: #ddd;
    margin-left: -5px;
    padding-left: 5px;
    margin-right: -5px;
    padding-right: 5px;
}

.mvp-news{
    margin-left:10%;
    padding:0% 10%;
    border: 10%; 
    position: relative ;
    top: -10%; 
    background-color: rgb(255, 255, 255); 
    width: 80%;
}

/* nav-list
**********************************************************************/
.contents{
    -webkit-box-shadow: 0 0 10px rgb(128 128 128 / 40%);
    box-shadow: 0 0 10px rgb(128 128 128 / 40%);
    border-radius: 5px;
}
.item-card{
    display: table;
    width: 100%;
    height: 100%;
}
.item-card .card-title{
    border-radius: 0 5px 0 0;
    text-align: center;
    line-height: 70px;
    background: #2c59a0;
    color: #ffffff;
}
.item-card .card-contents{
    width: 100%;
    margin: auto;
    line-height: 35px;
    padding: 20px 10px;
    letter-spacing: -0.4px;
}
.mvp-item .mvp-img{
    width:80%;
    margin: 0 auto;
}
.mvp-item .mvp-img img{
    width:100%;
}
.mvp-item .mvp-text{
    width: 100%; padding: 0 15px;
}
.mvp-item .mvp-text{
    width: 100%; padding: 0 15px;
}
#monthly-mvp .card-contents .mvp-text-title strong{
    font-size: 20px;
}
#monthly-mvp .card-contents .mvp-text-content strong{
    font-size: initial;
}

/*************************************************************************************************************************
* 画面幅：681px 以上
*************************************************************************************************************************/
@media print, screen and (min-width:681px){
    .pc{
        display: initial;
    }
    .sp{
        display: none;
    }
    .contents{
        width: 80%;
        max-width: 1140px;
        margin: 60px auto;
        padding: 0 !important;
        display: flex;
    }
    .nav-list{
        min-width: 160px;
    }
    .nav-list .item-card{
        border-right: 1px solid  #00000021;
    }
    .mvp-contents{
    }
    .mvp-item{
        display: flex;
    }
    .mvp-item .mvp-img{
        width:260px;
    }
    .mvp-text-content{
        padding: 0 10px;
    }
    .mvp-news{
        margin-left:20%;
        padding:0% 10%;
        border: 10%; 
        position: relative ;
        top: -20%; 
        background-color: rgb(255, 255, 255); 
        width: 60%;
    }   
}