@charset "utf-8";

/* m_tit */
.m_tit{text-align: center; color: #222222; margin-bottom: 35px;}
.m_tit h3{font-weight: 400; opacity: 0.9; font-size: 3.8rem;}
.m_tit h3 span{font-weight: 600; color: #3d538c;}
.m_tit p{font-size: 1.5rem; color: #333; margin-top: 15px; word-break: keep-all;}

@media all and (max-width:978px){
    .m_tit{margin-bottom: 30px;}
    .m_tit h3{font-size: 3.4rem;}
}
@media all and (max-width:640px){
    .m_tit{margin-bottom: 25px;}
    .m_tit h3{font-size: 2.8rem;}
}
@media all and (max-width:500px){
    .m_tit h3{font-size: 2.5rem;}
}

/*.sound_only{position: absolute; text-indent: -9999px; left: -9999px; top: -99999px; overflow: hidden; visibility: hidden; opacity: 0; height: 0; width: 0;}*/

/* #mVisual */
#mVisual {width: 100%; height: 450px; max-width: 1920px; margin: 0 auto;}
#mVisual .mv {height: 100%; background-image: url(/images/main/mv1.jpg); width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center;}

@media all and (max-width:978px){
    #mVisual{height: 40vh;}
}
@media all and (max-width:640px){
    #mVisual{height: 35vh;}        
}
@media all and (max-width:500px){
    #mVisual{height: 29vh;}        
}

/* section2 */
.section2{padding: 50px 0 60px;}
.section2 .inner{}
.section2 .inner .title{font-family: 'Montserrat', sans-serif; font-size: 2rem; color: #3d538c; font-weight: 700; margin-bottom: 35px;}
.section2 .inner .list{display: flex; width: 100%;justify-content: space-between;}
.section2 .inner .list li{margin: 0 10px; width: 120px; height: 120px; border:1px solid #dedede; border-radius: 100%;}
.section2 .inner .list li a{font-size: 1.6rem; font-weight: 600;  display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}

@media all and (max-width:1600px){
    .section2 .inner .list{flex-wrap: wrap; justify-content: center;}
}
@media all and (max-width:978px){
    .section2 .inner .title{text-align: center; margin-bottom: 30px;}
    .section2 .inner .list{justify-content: flex-start;}
    .section2 .inner .list li{margin: 0px; width: 25%; height: auto; border-radius: 0; margin-top: -1px; margin-left: -1px;}
    .section2 .inner .list li a{padding: 12px 5px;}
}
@media all and (max-width:640px){
    .section2 .inner .title{margin-bottom: 25px;}
    .section2 .inner .list li a{font-size: 1.5rem;}
}

/* section3 */
.section3{background-color: #f9fafd; padding: 100px 0 75px;}
.section3 .inner{}
.section3 .inner .list{display: flex; justify-content: space-between;}
.section3 .inner .list li{width: calc(100% / 4 - 60px / 4);}
.section3 .inner .list li a{height: 100%;display: inline-block; width: 100%;}
.section3 .inner .list li .img{border-radius: 10px 10px 0 0; overflow: hidden;}
.section3 .inner .list li .img img{max-width: 100%;}
.section3 .inner .list li .txt{background-color: #fff; padding: 30px 20px; border-radius: 0 0 10px 10px; }
.section3 .inner .list li .txt > p{color: #686868; font-size: 1.6rem; word-break: keep-all; line-height: 1.6em; margin-bottom: 20px;}
.section3 .inner .list li .txt .score{display: flex;width: 100%; align-items: center;}
.section3 .inner .list li .txt .score img{max-width: 100%; margin-right: 10px;}
.section3 .inner .list li .txt .score p{font-family: 'Jost', sans-serif; color: #686868; font-size: 1.6rem;}
.section3 .inner .list li .txt .score p b{color: #222222;}
.section3 .inner .more{display: flex; justify-content: flex-end; margin-top: 35px;}
.section3 .inner .more a{color: #686868; font-size: 1.6rem; font-weight: 500;}

@media all and (max-width:978px){
    .section3{padding: 80px 0 60px;}
    .section3 .inner .list{flex-wrap: wrap;}
    .section3 .inner .list li{width: calc(100% / 2 - 20px / 2); margin-bottom: 20px;}
    .section3 .inner .list li .img img{width: 100%;}
    .section3 .inner .more{margin-top: 30px;}
}
@media all and (max-width:640px){
    .section3 .inner .more{margin-top: 25px;}
    .section3{padding: 70px 0 50px;}
    .section3 .inner .list li .txt > p{font-size: 1.5rem; margin-bottom: 10px; display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
    .section3 .inner .list li .txt{padding: 25px 15px;}
    .section3 .inner .list li .txt .score img{max-width: 76px;}
}
@media all and (max-width:500px){
    .section3 .inner .more{margin-top: 20px;}
    .section3{padding: 55px 0 55px;}
    .section3 .inner .more a{font-size: 1.5rem;}
}

/* section4 */
.section4{padding: 100px 0 70px;}
.section4 .inner{}
.section4 .inner .m_tit{margin-bottom: 50px;}
.section4 .inner .list{display: flex; flex-wrap: wrap; justify-content: space-between;}
.section4 .inner .list li{width: calc(100% / 4 - 60px / 4); margin-bottom: 40px;}
.section4 .inner .list li .img{border-radius: 10px 10px 0 0; overflow: hidden;}
.section4 .inner .list li .img img{max-width: 100%;}
.section4 .inner .list li .txt{padding: 30px 20px 25px; border: 1px solid #e4e4e4; border-top: 0; border-radius: 0 0 10px 10px;}
.section4 .inner .list li .txt h3{font-size: 2rem; font-weight: 500; color: #222222;}
.section4 .inner .list li .txt p{font-size: 1.6rem; color: #000; margin-top: 5px; margin-bottom: 15px;}
.section4 .inner .list li .txt dl{display: flex; flex-wrap: wrap;}
.section4 .inner .list li .txt dl dd{background-color: #f4f6fc; font-size: 1.2rem; color: #1e252b; padding: 12px 10px; border-radius: 20px; margin-right: 5px; margin-bottom: 5px;}
.section4 .inner .more{display: flex; justify-content: flex-end; margin-top: -10px;}
.section4 .inner .more a{color: #686868; font-size: 1.6rem; font-weight: 500;}

@media all and (max-width:978px){
    .section4 .inner .m_tit{margin-bottom: 40px;}
    .section4{padding: 80px 0 60px;}
    .section4 .inner .list{}
    .section4 .inner .list li{width: calc(100% / 2 - 20px / 2); margin-bottom: 20px;}
}
@media all and (max-width:640px){
    .section4 .inner .m_tit{margin-bottom: 35px;}
    .section4{padding: 70px 0 60px;}
    .section4 .inner .list li .txt{padding: 25px 15px 20px;}
    .section4 .inner .list li .txt h3{font-size: 1.8rem;}
    .section4 .inner .list li .txt p{font-size: 1.5rem;}
    .section4 .inner .list li .txt dl dd{padding: 6px 8px;}
}
@media all and (max-width:500px){
    .section4 .inner .m_tit{margin-bottom: 30px;}
    .section4{padding: 60px 0 50px;}
    .section4 .inner .more a{font-size: 1.5rem; margin-top: 25px;}
}