@charset "utf-8";
/* CSS Document */
#recommendBox dt{ background: #efefef;
    padding: 5px 20px; 
margin-bottom:7px;}

#recommendBox{ position: relative; margin-bottom:20px }
#recommendBox dd li{ line-height: 1.6em;
        margin-bottom: 5px;
        margin-left:20px
    }
    
#recommendBox dd li:before{ 
        position: absolute;
        content:"・";
        left: 0; }
    
.seminar{ margin-top:2% ; background:#ffeeed; font-size:1.2em;  }

.streamBox{ justify-content: center; }
.venue:not(:last-child){ margin-bottom:30px; }
.venue dt{ color: #cc443f; font-size: 1.05em; margin-right: 10px; }
.venue li:not(:last-child){ margin-bottom:11px; }


.venue li span{ display: inline-block; margin: 0 20px 0 14px;
    padding: 3px 8px; background: #d66965; color: #fff; font-size: 0.9em; }

.venue li {display: flex; align-items: center;}

.webiner{ padding: 3px 15px;
    margin-left: 13px;
    justify-content: end;
    font-size: 0.91em; }

.venue li.webiner:not(:last-child){ border-bottom: 1px dotted #ccc;  margin-bottom:22px!important}
.venue li.webiner span{ margin:0; background: none; color:inherit; padding: inherit; font-size:1em; }


.contentBox{ clear:both;}

.entryBtn2 a{ background:#cc443f; color:#fff; border: solid #8e1c18 1px; text-align: center; padding:14px 0}
.entryBtn2 a:hover { background-color: #8e1c18; color: #ffd9e4; }
.entryBtn2 li { width: 100%; margin: 0 2% 4%;}
.entryBtn2 li a:before{
border-top: 2px solid #fff;
top: 38px;
}


.entryBtn2 li a:before{
content:"";
display: block;
height: 6px;
width: 6px;
position: absolute;
right: 6%;
border-right: 2px solid #fff;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}

.watchbtnsub a,
.watchbtnsub2 a{  font-size: 0.9em;}
.watchbtnsub a:after,
.watchbtnsub2 a:after{ width: 6px; height: 6px; }
.watchbtn i,.watchbtnsub i,.watchbtnsub2 i{ background:url(../img/externalIcon.svg) 2px 0 no-repeat; width:16px ; height: 9px;
	position: absolute; }
.watchbtnsub i.watchbtnsub2 i{ top:14px; }

.watchbtn.nolink a{ background:#999 }


.txtUnd{ margin-bottom:20px; }

.mail a{ color:#111; }
.mail a:hover,.redTxt{ color:#a52e2a; }


@media screen and (min-width: 1061px) {
.venue dt{ font-weight: 700;}
}
@media screen and (min-width: 765px) {
.venue.broad dt{  padding-top: 5px; }
}

@media screen and (min-width: 780px) {
.seminar{  padding:20px 5%; }
}
@media screen and (min-width: 641px) {
.streamBox{ display: flex; }
.handson{ font-size:1.2em }
.entryBtn2 li{ width: 80%; margin: 0 auto;}
}

@media screen and (min-width: 561px) {
.venue.broad li:not(:last-child){ margin-bottom:6px; }
.watchbtnsub a{ padding:9px 0; width: 220px; margin-left:20px}
.watchbtnsub2 a{ padding:9px 0; width: 320px; margin-left:20px}
}



@media screen and (max-width: 779px) {
  .seminar{  padding:20px 2%; }
}
@media screen and (max-width: 764px) {
.venue.broad { display: inherit; }
.venue.broad dt{ text-align: center; margin-bottom: 10px; }
.venue.broad li{justify-content: center; }
.venue li span{ margin-left:0 }
}

@media screen and (max-width: 640px) {
.streamBox dt{ text-align: center; margin-bottom:15px }
.entryBtn2{max-width: 320px; margin: 0 auto; }
.venue{ justify-content: center; }

}

@media screen and (max-width: 560px) {
.venue.broad li:not(:last-child){ margin-bottom:8px; }
.venue.broad li{ display: inherit; text-align: center;}
.watchbtnsub a{ padding:12px 0; width: 260px; margin-top: 5px; }
.venue.broad li span{ color: inherit; background: inherit; padding: 0; }
.watchbtnsub i, .watchbtnsub2 i { top: 17px;}
  .venue.broad dt{margin-right: 0 }
.watchbtnsub2 a{ padding:12px 0; width: 280px; margin-top: 5px; font-size: 0.85em; }
}

@media screen and (min-width: 484px) {
.venue{ display: flex; justify-content: center; }

}

@media screen and (max-width: 499px) {
.venue li{ display: flex; justify-content: center; }
#realtime dt{ margin-bottom:5px }
}

@media screen and (min-width: 361px) and (max-width: 499px) {
.venue li, #realtime .venue{ display: flex; justify-content: center; }
}

@media screen and (max-width: 458px) {
#schedule.education{ padding:20px 10px }
#schedule.education dt{ width: 100px; }
}

@media screen and (max-width: 399px) {
.venue li.webiner span{ display: block;  }
}