@charset "utf-8";

.view-box{padding: 5rem 3rem; border-top: 0.3rem solid #f5f5f5; box-sizing: border-box}
.view-box .flex{flex-direction: row-reverse}
.view-box .left{width: 75%;}
.view-box .right{width: 20%; margin-right: 5%; border: 0.1rem solid #ddd; box-sizing: border-box}

.view-box .left .subject{font-size: 2.6rem; font-weight: 600; margin-bottom: 3rem;}
.view-box .left dl{display: flex;}
.view-box .left dl dt{width: max-content; margin-right: 1rem;}
.view-box .left .view-content{margin: 2rem 0}

.view-list{display: flex; flex-wrap: wrap; margin-top: 3rem;}
.view-list .box{font-size: 1.4rem; padding: 3rem; border: 0.3rem solid #f5f5f5; box-sizing: border-box; border-radius: 0.9rem; width: calc(96% / 3); margin-right: 2%; margin-bottom: 1%;}
.view-list .box:nth-child(3n){margin-right: 0}
.view-list .box dl{display: flex;}
.view-list .box dl dt{width: max-content; margin-right: 1rem;}
.view-list .box p{margin-bottom: 1rem;}
.view-list .box p span{display: inline-block; padding: 0.5rem 1rem; background: #f5f5f5; border-radius: 3rem; font-size: 1.2rem;}
.view-list .box .view-list-content{padding-top: 1rem; margin-top: 1rem; border-top: 0.3rem solid #f5f5f5;}
.view-list .box .btn-area{margin-top: 2rem;}
.view-list .box .btn-area .btn{width: 100%;}

@media screen and (max-width:839px){

    .all-program-list .gallery-list.col5 > div,
    .program-list .gallery-list.col5 > div{width: calc(96% / 2); margin-right: 4%;}
    .all-program-list .gallery-list.col5 > div:nth-child(3n),
    .all-program-list .gallery-list.col5 > div:nth-child(5n),
    .program-list .gallery-list.col5 > div:nth-child(3n),
    .program-list .gallery-list.col5 > div:nth-child(5n){margin-right: 4%;}
    .all-program-list .gallery-list.col5 > div:nth-child(2n),
    .program-list .gallery-list.col5 > div:nth-child(2n){margin-right: 0}

    .view-box{padding: 2.5rem 0; box-sizing: border-box}
    .view-box .right{width: 32%; margin-right: 3%;}
    .view-box .left .view-content{padding-top: 2rem; min-height: auto}
    .view-list .box{width: 100%; margin-right: 0;}
    .view-list .box:last-child{margin-bottom: 0;}

}
@media screen and (max-width:599px){

    .view-box > .flex{flex-wrap: wrap; flex-direction:column-reverse}
    .view-box .left,
    .view-box .right{width: 100%; margin-right: 0%;}
    .view-box .right{margin-bottom: 2rem;}
}
@media screen and (max-width:300px){

    .view-box .left dl{display: block; margin-top: 0.5rem;}
}