@charset "utf-8";
/* Step */
.step{margin: 0 0 80px;}
.step-item{border-radius: 10px; border: 3px solid #D9D9D9; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: relative; padding: 28px;}

.step-item:not(:last-of-type){margin: 0 0 52px;}
.step-item:not(:last-of-type)::after{content: ""; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 18px solid #0075C2; display: block; position: absolute; bottom: -38px; left: 0; right: 0; margin: 0 auto;
opacity: 0; transform: translateY(-10px); transition: .3s linear .5s;}

.step-item:not(:last-of-type).is-view::after{opacity: 1; transform: translateY(0);}

.step-item .img{width: 242px;}
.step-item .inner{width: calc(100% - 290px);}

.step-item .head{display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 10px;}
.step-item .txt{width: 4.15em; height: 1.55em; border-radius: 30px; background: #0075C2; color: #fff; font-size: 2rem; line-height: 1.5; font-weight: 400; font-family: "Changa One", sans-serif; text-align: center;}
.step-item .num{font-size: 4.8rem; line-height: 0.8; color: #0075C2; margin: 0 30px 0 10px; font-weight: 400; font-family: "Changa One", sans-serif;}
.step-item .m-title4{margin: 0;}

.step-item .btn{background: #003F68; border: 2px solid #003F68; color: #fff; font-weight: 600; max-width: 300px; width: 100%; height: 44px; margin: 15px 0 0 0; display: flex; justify-content: center; align-items: center; border-radius: 44px; transition: .3s;}
.step-item .btn::after{content: ""; width: 0; height: 0; border-top: 6px solid transparent; border-left: 12px solid #fff; border-bottom: 6px solid transparent; margin: 0 0 0 0.5em; position: relative; top: 1px;}
.step-item .btn:hover{background: #fff; color: #003F68;}
.step-item .btn:hover::after{border-top: 7px solid transparent; border-left: 12px solid #003F68; border-bottom: 7px solid transparent;}

@media screen and (max-width: 768px){
    .step{margin: 0 0 60px;}
    .step-item{padding: 20px; border: 2px solid #D9D9D9;}
    .step-item .img{width: 242px; margin: 0 auto 20px;}
    .step-item .inner{width: 100%;}
    
    .step-item .head{justify-content: center;}
    .step-item .txt{font-size: 1.8rem;}
    .step-item .num{margin: 0 0 0 10px; font-size: 4rem;}
    .step-item .m-title4{width: 100%; text-align: center; margin: 5px 0 0 0;}
}

/* Video */
.video{position: relative; line-height: 1;}
.video::after{content: ""; padding-bottom: 56.25%; display: block;}
.video iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media screen and (min-width: 769px){
    .video{max-width: 800px; width: 100%; margin: 0 auto 20px;}  
}

@media screen and (max-width: 768px){
    .video{margin: 0 0 20px;}    
}

/* Course */
.course-btn{max-width: 800px; margin: 0 auto;}
.course-btn a{width: 100%; margin: 0 0 10px; height: 2.9167em; color: #fff; font-size: 2.4rem; line-height: 1.5; font-weight: 600; display: flex; justify-content: center; align-items: center; border-radius: 70px; transition: .3s;}
.course-btn a:last-of-type{margin: 0;}
.course-btn a::after{content: ""; width: 0; height: 0; display: block; border-top: 7px solid transparent; border-left: 12px solid #fff; border-bottom: 7px solid transparent; margin: 0 0 0 0.6em; position: relative; top: 0.1em; transition: .3s;}

.course-btn a.btn1{background: #003F68; border: 2px solid #003F68;}
.course-btn a.btn1:hover{background: #fff; color: #003F68;}
.course-btn a.btn1:hover::after{border-top: 7px solid transparent; border-left: 12px solid #003F68; border-bottom: 7px solid transparent;}

.course-btn a.btn2{background: #DA7800; border: 2px solid #DA7800;}
.course-btn a.btn2:hover{background: #fff; color: #DA7800;}
.course-btn a.btn2:hover::after{border-top: 7px solid transparent; border-left: 12px solid #DA7800; border-bottom: 7px solid transparent;}

@media screen and (max-width: 768px){
    .course-btn a{font-size: min(5.5vw,2rem);}
}

/* training */
.training .m-desc {
    margin: 0 0 2rem;
}
.training .video + .m-desc {
    margin: 0 0 8rem;
}

.training .listVideo {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.training .listVideo li {
    width: 48%;
    margin: 0 4% 4% 0;
}

.training .listVideo li:nth-of-type(2n) {
    margin-right: 0;
}

.training .listVideo li p {
    text-align: center;
    margin: 1rem 0 0;
}

.training .listVideo li .videoWrap {
    position: relative;
    /*padding-bottom: 56.25%;*/
}

.training .listVideo li .videoWrap iframe {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
}

.training .listVideo li .videoWrap p {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    font-style: italic;
}

@media screen and (max-width: 768px){
    .training .listVideo li {
        width: 100%;
        margin: 0 auto 3rem !important;
    }
    .training .listVideo li p {
        margin: 0;
    }

}