/****** カウンセリング期間 ******/
.counseling-range{
    padding:0.5em;
}
.counseling-range .date-num{
    display:flex;
}
.counseling-range .date-num > p{
    flex:1;
    padding:0;
    margin:0;
}


.counseling-range .start{
    text-align:left;
}
.counseling-range .now{
    text-align:center;
}
.counseling-range .end{
    text-align:right;
}

.counseling-homework{
    display:flex;
    padding:0.5em;
}
.counseling-homework .days{
    position:relative;
    padding:0.5em;
    flex:1;
    background-color:#8ed3ff;
    flex-grow:1;
    text-align:center;
    font-weight: 600;
    color:#000;
}
.counseling-homework .days.new::before{
    content:'';
    position:absolute;
    top:-0.5em;
    left:-0.5em;
    
    width:2.2em;
    height:1.8em;

    background-image:url(../../img/icon_new01.png);
    background-size:contain;
    background-repeat: no-repeat;
    z-index:1;
}
.counseling-homework .title{
    position:relative;
    padding:0.5em;
    flex:1;
    background-color:#FFF;
    flex-grow:4;
    font-weight: 600;
}
.counseling-homework .title::after{
    content:'';
    position:absolute;
    top:0.7em;
    right:0.5em;
    
    width:4em;
    height:4em;
    
    background-image:url(../../img/btn_check.png);
    background-size:contain;
    background-repeat: no-repeat;
}


.mokuhyo{
    display:flex;
    padding:0.5em;
}
.mokuhyo > .left{
    display:flex;
    align-items:center;
    flex: 7;
    font-size:1.2rem;
}

.mokuhyo > .left > .mark-img{
    flex:1;
    width:3.7em;
}
.mokuhyo > .left > .text{
    flex:5;
    padding:0.5em;
}

.mokuhyo > .right{
    display:flex;
    flex: 2;
    align-items: center;
    justify-content:flex-end;
}
.mokuhyo > .right > a{
    padding:1.3em 1.8em;
    font-weight: 400;

}




.today-graph{
    padding:0.5rem;
    display:flex;
}
.today-graph .meal{
    text-align: center;
    flex:1;
}
.today-graph .meal > img{
    width:10rem;
}
.today-graph .checklist{
    text-align: center;
    flex:1;
}
.today-graph .checklist > img{
    width:10rem;
}
/***** トータル成績 *****/
.total-graph{
    padding:0.5rem;
    display:flex;
    flex-direction:column;
}
.total-graph .title-img{
    padding:1rem 0;
}
.total-graph .meal{
    padding:0.2em;
    display:flex;
    flex:1;
    align-items: center;
    justify-content: center;
}
.total-graph .meal .text{
    flex:2;
}
.total-graph .meal .graph{
    flex:6; 
}
.total-graph .meal .graph > img{
    width:20em;
}

.total-graph .checklist{
    padding:0.2em;
    display:flex;
    flex:1;
    align-items: center;
    justify-content: center;
}
.total-graph .checklist .text{
    flex:2;
}
.total-graph .checklist .graph{
    flex:6; 
}
.total-graph .checklist .graph > img{
    width:20em;
}
/****** カウンセラー一言 ******/
.counseler-hitokoto{
    padding:0.5em;
    display:flex;
    align-items: center;
    justify-content: center;
}
.counseler-hitokoto .icon > img{
    width:3.5em;
}
.counseler-hitokoto .icon > p{
    font-size:0.6rem;
}
.counseler-hitokoto .comment{
    flex:3;
}

/****** メインメニュー ******/

.main-menu01{
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.main-menu01 > li{
    position:relative;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color:#FFF;
    width:43vw;
    height:30vw;
    margin:0.25em;
}
.main-menu01 > li .btn{
    position:relative;
    text-align:center;
}
.main-menu01 > li .btn > p{
    text-align:center;
    font-size:0.7rem;
    font-weight:600;
    margin-top:0.9em;

}
.main-menu01 > li .btn > img{
    width:3em;
    

}
/* .main-menu01 > li [data-target="#bls_modal_menu"]{
    position:relative;
}
.main-menu01 > li [data-target="#bls_modal_menu"]::before{
    content:'ビフォー途中';
    position:absolute;
    top:-1em;
    left:50%;
    width:88px;
    transform: translateX(-50%);
    text-align:center;
    line-height: 0;
    font-size:0.9rem;
    font-weight:100;
    color:#FFF;
    background-color:#e93737;
    padding:0.8rem 1rem;
    border-radius: 30px 30px 30px 30px;

} */
/****** おすすめ動画 ******/
.recommend-movie-list{
    padding:0.5em;
}
.recommend-movie-list .head{
    margin:0.5em;
}
.recommend-movie-list .head > h2{
    float:left;
}
.recommend-movie-list .head > button{
    float:right;
}
.recommend-movie-list .body{
    display:flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}
.recommend-movie-list .body > a{
    position:relative;
    
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
    align-self:flex-start;
    /*background-color:#FFF;*/
    width:42vw;
    height:auto;
    margin:0.25em;
    vertical-align: top;
}
.recommend-movie-list .body > a > img{
    /* width:100%; */
    max-width:100%;
    height: auto;
}
.recommend-movie-list .body > a > p{
    width:100%;
    margin-top:0.2em;
    text-align:left;

    /* font-weight:600; */
}
.recommend-movie-list .body > a.new::after{
    content:'';
    position:absolute;
    top:-0.5em;
    right:-0.5em;
    
    width:3em;
    height:2.5em;

    background-image:url(../../img/icon_new01.png);
    background-size:contain;
    background-repeat: no-repeat;
    z-index:1;
}

/****** おすすめコンテンツ ******/

.recommend-content-list{
    padding:0.5em;
}
.recommend-content-list .head{
    margin:0.5em;
}
.recommend-content-list .head > h2{
    float:left;
}
.recommend-content-list .head > button{
    float:right;
}
.recommend-content-list .body{
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}
.recommend-content-list .body > a{
    position:relative;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    flex-direction:row;


}
.recommend-content-list .body > a:not(:last-of-type){
    width:100%;
    border-bottom:1px #DDD solid;
    margin-bottom:0.8em;
    padding-bottom:0.8em;
}

.recommend-content-list .body > a .thumb{
    position:relative;
    width:5.5em;
    height:5.5em;
    margin:0.5em;
}
.recommend-content-list .body > a .thumb.new::after{
    content:'';
    position:absolute;
    top:-0.5em;
    right:-0.5em;
    
    width:2.2em;
    height:1.8em;

    background-image:url(../../img/icon_new01.png);
    background-size:contain;
    background-repeat: no-repeat;
    z-index:1;
}
.recommend-content-list .body > a .thumb img{
    width:100%;
    height:100%;
    object-fit: cover;
}
.recommend-content-list .body > a .title{
    flex:1;
    margin:0.5em;
}

.recommend-content-list .body > a .title .datetime{
    /**/
}

@media only screen and (max-width:476px) {
    html{
        font-size:14px;
    }
}
@media only screen and (max-width:380px) {
    html{
        font-size:12px;
    }
}