/* --------- Seminar Top --------- */
#seminar .btn-live{font-size: 25px; line-height: 1.5; font-weight: bold; color: #fff; background-image: linear-gradient(to bottom, #ab2d2d, #561717); padding: 21px 0; text-align: center; display: block; border-radius: 5px; margin: 0 0 70px; opacity: 1 !important; transition: all 0s linear;}
#seminar .btn-live:hover{background: #ab2d2d;}

#seminar .group{display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 13px; line-height: 1.5;}
#seminar .box-child{width: 49.48%;}
#seminar h2{font-size: 20px; color: #fff; text-align: center; font-weight: bold; padding: 10px 0;}
#seminar .rows{width: calc(100% - 20px); margin: 0 auto; padding: 20px 27px;}
#seminar .rows:last-of-type{border-bottom: none !important;}
#seminar .note{color: #fff; background: #bc0000; font-weight: bold; padding: 5px; margin: 0 0 5px; text-align: center;}
#seminar .list-tit{font-size: 18px; font-weight: bold; margin: 0 0 15px;}
#seminar .tit1{margin: 0 0 10px;}
#seminar .tit2{font-size: 20px; color: #00b0cc;}
#seminar .tit2 .small{font-size: 17px;}
#seminar .name{font-size: 20px; font-weight: bold;}
#seminar .name span{font-size: 13px; font-weight: normal;}
#seminar .btn-profile{max-width: 180px; text-align: center; border: 2px solid #00b0cc; border-radius: 19px; font-size: 12px; color: #00b0cc; padding: 7px 0 7px 10px; cursor: pointer; font-weight: bold;}
#seminar .btn-profile:after{content: ''; display: inline-block; width: 0; height: 0; border-top: 4px solid transparent; border-left: 4px solid #00b0cc; border-bottom: 4px solid transparent; margin: 0 0 0 1.5em;}
#seminar .list1{display: flex; align-items: flex-end; justify-content: space-between; margin: 10px 0 0 0;}
#seminar .list1 .photo{width: 170px;}
#seminar .list1 .info{width: calc(100% - 190px);}
#seminar .list1 .name{margin: 0 0 10px;}
#seminar .list2{display: flex; flex-wrap: wrap;}
#seminar .item{margin: 20px 30px 0 0; padding: 0 0 45px; position: relative; width: 170px;}
#seminar .item .photo{margin: 0 0 8px;}
#seminar .item .btn-profile{position: absolute; bottom: 0; left: 0; width: 100%;}
#seminar .btn-profile:hover{background: #00b0cc; color: #fff;}
#seminar .btn-profile:hover:after{border-top: 4px solid transparent; border-left: 8px solid #fff; border-bottom: 4px solid transparent;}
#seminar .item.not-profile{padding: 0;}

#seminar .video a{position: relative; display: block;}
#seminar .video a:before{content: ''; position: absolute; width: 74px; height: 74px; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); border: 5px solid #fff; border-radius: 50%; box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.5);}
#seminar .video a:after{content: '▶'; position: absolute; top: 50%; left: 50%; font-size: 35px; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); color: #fff; text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000;}
#seminar .tit2 a:hover,
#seminar .video a:hover{opacity: 1;}

#planning{background: #e5f7fa;}
#planning h2{background: #2e86cd;}
#planning .rows{border-bottom: 2px solid #bae3ea;}
#planning .tit1{margin: 0;}

#presentation{background: #e7f7eb;}
#presentation h2{background: #207827;}
#presentation .rows{border-bottom: 2px solid #bae0c4;}
#presentation .tit2{color: #2ba24d;}

@media only screen and (max-width: 1000px) {
    #seminar .video img{width: 100%;}
    #seminar .box-child{width: 100%;}
    
    #planning{margin: 0 0 50px;}
}

@media only screen and (max-width: 480px) {
    #seminar h2 br{display: none;}
    #seminar .rows{padding: 20px 5px;}
    #seminar .tit2 br{display: none;}
    #seminar .item{margin: 20px 4% 0 0; max-width: 170px; width: 48%;}
    #seminar .item:nth-of-type(2n){margin-right: 0;}
    #seminar .video a:before{width: 12vw; height: 12vw; border: 2px solid #fff;}
    #seminar .video a:after{font-size: 5vw;}
}


/* --------- Seminar Sub --------- */
#sub1{max-width: 900px; margin: 0 auto;}
#sub1 .sub-tit{margin: 0 0 30px; display: flex; align-items: flex-start; background: #2e86cd; color: #fff; padding: 12px 20px; font-weight: bold;}
#sub1 .sub-tit1{font-size: 15px; line-height: 1; padding: 6px; color: #2e86cd; background: #fff; margin: 0 15px 0 0;}
#sub1 .sub-tit2{font-size: 20px; line-height: 1.3;}
#sub1 .sub-video{margin: 0 0 50px;}

@media only screen and (max-width: 1000px) {
    #sub1 .sub-tit{flex-wrap: wrap;}
    #sub1 .sub-tit1{margin: 0 0 10px;}
    #sub1 .sub-tit2{width: 100%;}
}

@media only screen and (max-width: 767px) {
    #sub1 .sub-tit{padding: 10px;}
    #sub1 iframe{height: 56.25vw;}
}


#sub2{max-width: 900px; margin: 0 auto;}
#sub2 .sub-tit{font-size: 20px; line-height: 1.5;text-align: center; font-weight: bold; color: #fff; background: #207827; padding: 10px 10px; margin: 0 0 20px;}
#sub2 .sub-note{font-size: 25px; padding: 20px 0 0 0; line-height: 1.5;}

@media only screen and (max-width: 767px) {
    #sub2 iframe{height: 56.25vw;}
}


/* --------- Seminar Sub 02 --------- */
#sub02{max-width: 900px;}
.sub02-group{margin: 0 0 120px;}
.sub02-group:last-of-type{margin: 0;}

.sub02-tit1{font-size: 20px; line-height: 1.3; font-weight: bold; text-align: center; color: #fff; background: #bc0000; padding: 7px 10px; margin: 0 0 2px;}

.sub02-tit2{margin: 0 0 30px; display: flex; align-items: flex-start; background: #2e86cd; color: #fff; padding: 12px 20px; font-weight: bold;}
.sub02-tit2 .tit1{font-size: 15px; line-height: 1; padding: 6px; color: #2e86cd; background: #fff; margin: 0 15px 0 0;}
.sub02-tit2 .tit2{font-size: 20px; line-height: 1.3;}
.sub02-video{margin: 0 0 40px;}
.sub02-list{display: flex; flex-wrap: wrap;}
.sub02-item{width: 206px; margin: 0 25px 40px 0; font-size: 15px; line-height: 1.6; position: relative;}
.sub02-item:nth-of-type(4n){margin-right: 0;}
.sub02-photo{margin: 0 0 8px;}
.sub02-name{font-size: 30px; line-height: 1.4; font-weight: bold;}
.sub02-item.profile{padding: 0 0 45px;}

.sub02-list2{display: flex; flex-wrap: wrap;}
.sub02-item2{width: 445px; margin: 0 10px 40px 0; font-size: 13px; display: flex; align-items: flex-end; justify-content: space-between;}
.sub02-item2:nth-of-type(2n){margin-right: 0;}
.sub02-name2{font-size: 25px; line-height: 1.4; font-weight: bold;}
.sub02-photo2{width: 206px;}
.sub02-cont{width: calc(100% - 216px);}

#sub02 .btn-profile{position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; border: 2px solid #00b0cc; border-radius: 19px; font-size: 12px; color: #00b0cc; padding: 7px 0 7px 10px; cursor: pointer; font-weight: bold;}
#sub02 .btn-profile:after{content: ''; display: inline-block; width: 0; height: 0; border-top: 4px solid transparent; border-left: 4px solid #00b0cc; border-bottom: 4px solid transparent; margin: 0 0 0 1.5em;}
#sub02 .btn-profile:hover{background: #00b0cc; color: #fff;}
#sub02 .btn-profile:hover:after{border-top: 4px solid transparent; border-left: 8px solid #fff; border-bottom: 4px solid transparent;}

.sub2-link{max-width: 400px; width: 100%; margin: 0 auto 50px; display: block; font-size: 18px; color: #fff; text-align: center; padding: 10px 0; background: #2e86cd; border-radius: 4px; position: relative;}
.sub2-link:after{content: ''; width: 0; height: 0; border-top: 5px solid transparent; border-left: 5px solid #fff; border-bottom: 5px solid transparent; position: absolute; top: calc(50% - 5px); right: 20px;}


@media only screen and (max-width: 1000px) {
    .sub02-tit2{flex-wrap: wrap;}
    .sub02-tit2 .tit1{margin: 0 0 10px;}
    .sub02-tit2 .tit2{width: 100%;}
}

@media only screen and (max-width: 767px) {
    .sub02-tit2{padding: 10px;}
    .sub02-video{height: 56.25vw;}
    .sub02-item2{width: 100%; margin: 0 0 40px;}
}

@media only screen and (max-width: 480px) {
    .sub02-group{margin: 0 0 70px;}
    .sub02-item{width: 48%; max-width: 206px; margin: 0 4% 30px 0; font-size: 13px;}
    .sub02-item:nth-of-type(2n){margin: 0 0 30px;}
    .sub02-name{font-size: 25px;}
    .sub02-item2{margin: 0 0 30px; font-size: 12px;}
    .sub02-photo2{width: 48%;}
    .sub02-cont{width: 50%;}
    .sub02-name2{font-size: 20px;}
    
}


/* --------- Popup Common --------- */
.mb20{margin-bottom: 20px;}

.popup-bg{display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.8); z-index: 9999;}
.popup-content.active{display: block;}
.popup-content{display: none; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-height: 95vh; background-color: #fff; z-index: 99999; width: 94%; max-width: 960px; padding: 30px 30px 40px 30px; overflow-y: scroll;}
.popup-close{width: 170px; text-align: center; border: 2px solid #00b0cc; border-radius: 18px; color: #00b0cc; font-size: 12px; padding: 5px 0 5px 10px; margin: 40px auto 0; cursor: pointer;}
.popup-close:after{content: ''; width: 9px; height: 9px; display: inline-block; margin: 0 0 0 20px; background: url("../../images/top/pop_close.png") no-repeat top left/100% auto;}
.popup-close:hover{opacity: .8;}

.popup-box{display: flex; flex-wrap: wrap;}
.popup-left{width: calc(100% - 206px);}
.popup-right{width: 206px;}
.popup-top{border-bottom: 1px solid #ccc; font-size: 13px; line-height: 1.5; padding: 0 10px 20px 0; margin: 0 0 30px;}
.popup-name{font-size: 25px; line-height: 1.2; font-weight: bold; margin: 10px 0 0 0;}
.popup-name span{font-size: 13px; font-weight: normal;}
.popup-bottom{font-size: 15px; line-height: 1.6; padding: 0 10px 0 0;}
.popup-event{display: flex; flex-wrap: wrap;}
.popup-event dt{width: 5em;}
.popup-event dd{width: calc(100% - 5em);}

.popup-event3{display: flex; flex-wrap: wrap;}
.popup-event3 dt{width: 11em; margin-bottom: 20px;}
.popup-event3 dd{width: calc(100% - 11em); margin-bottom: 20px;}

.popup-list li{margin-top: 20px;}
.popup-list .popup-event{margin-left: 1em;}
.popup-list .popup-event2{margin-left: 1em;}

@media only screen and (max-width: 767px) {
    .popup-left{width: 100%;}
    .popup-right{margin: 0 auto 20px; order: -1;}
    .popup-top{padding: 0 0 20px;}
    .popup-bottom{padding: 0;}
    
    .popup-event3 dt{width: 100%; margin-bottom: 0;}
    .popup-event3 dd{width: 100%;}
}

@media only screen and (max-width: 480px) {
    .popup-content {padding: 15px;}
}