@charset "utf-8";
/* CSS Document */
.icon-external::before{ font-size: 0.75em;  top: 18px; position: absolute; margin-left: 8px; }

#programMenu { margin:0 auto 5%; }
#programMenu a{ color:#121212; display: block; }
#programMenu a:hover{ color:#c23c3c;}
#programMenu li{ margin-bottom:10px; position: relative; padding:0 20px;}
#programMenu li:before,
#programMenu li a:after, .detail:before{  position: absolute; }

#programMenu li:before, .detail:before{ content:"・"; left:0; top:0; color:#ef9284; }
#programMenu li a:after{ content:""; right:0;  bottom: 50%;
  border-right: 2px solid #ef9284;
  border-bottom: 2px solid #ef9284;
  height: 7px;
  width: 7px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}



.cost{ display:flex; margin: 0 auto 0; }
.cost:not(:last-child){ border-bottom:2px solid #fff; }
.cost dt, .cost dd{ vertical-align: top: }
.cost dt{  width:60% }
.cost dt span{ font-size: 0.9em; }
.cost dd{  width:40% }


.programBox { margin-bottom:70px } 
.programTitle{ font-size:1.4em; margin-bottom:20px;
  color:#c23c3c;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 10px;
}
.programTitle span{ background:#fdf7f6; color:#db5f53; padding:3px 9px; margin-right:10px; font-size: 0.7em; }

.school{ font-size:0.9em; }

.moderator{ display: flex; margin-bottom:20px }
.mc{ background:#eee; padding:1px 7px;width:50px; display: inline-block; }
.word{ text-indent: 1em; position: relative; padding: 10px 15px;
  line-height: 1.8em;
}

.mcword{ padding-top:15px; margin-bottom:15px; text-align: center; font-size: 1.1em; }

.word:before, .word:after{ position:absolute; content:"";  border-style: solid; border-color:#ddd;
  width: 15px;
  height: 15px;
}
.word:before{ border-width:2px 0 0 2px; top:0; left:0 }
.word:after{  border-width: 0 2px 2px 0;bottom: 0; right:0  }

 .scheduleWrap dl:nth-child(even){ background:#fefbf9; }
 .scheduleWrap dl dl:nth-child(even){ background: inherit; }
 .scheduleBox{ padding: 15px 20px; line-height:1.8em; }
 .scheduleBox p{ line-height: 1.6em; margin-bottom: 10px; }
 .scheduleBox dd a{ text-decoration: none;  position: relative; }
 .scheduleBox dd a .icon-external::before{ top:5px }
 .scheduleBox dd .btn a .icon-external::before{ top:15px }
 .scheduleBox a,
#linktxt a{ color:#db5f53; text-decoration: underline;}
.scheduleBox a:hover,
#linktxt a:hover{ color:#c23c3c; }

 .scheduleTitle{ color:#db5f53; width: 120px; }



 
.lecture{ color: #db5f53; margin-right: 8px; }
.programList li{ margin-bottom:10px; }
/*#programList li:nth-child(2n){ margin-bottom:20px; padding-top:5px }*/

.redTxt{ font-weight: 700; color:#c23c3c; }

.due{ margin-top: 10px; }
.due dd{ background: #fff; }
.due dt{ background:#f5f5f5 }
.due dt, .due dd{ padding: 5px 14px; }

.scheduleBox .externalIcon i::before,
.scheduleWrap .externalIcon i::before{ height: 8px; }

.detail{ position: relative; padding-left: 20px; }

#workshop{ width:100% }
#workshopCont li{ margin-bottom: 5px; }

#special{ margin-top: 30px; }

#diploma{ margin-top:20px }


@media screen and (min-width: 1060px) {
.btn a{ width: 80%; margin: 20px auto 10px; }

#program3 .btn a{ margin-left:0; margin-right: 0; margin-bottom: 20px; }
}

@media screen and (max-width: 1059px) {
 #program3 .scheduleBox dd .btn a .icon-external::before{margin-left: 30px;  }
 .btn a{ margin:20px auto; width: 98%;}
 #formbtn .icon-external::before{ margin-left: 32px; }
 .scheduleBox dd a span{ display: inline-flex; }
}


@media screen and (min-width: 751px) {
  #programMenu { width:80%; }
 .scheduleBox{ display:flex; }
 .scheduleBox dd{ width: 80%; }
 .scheduleBox dd dd{ width: 20%; }
.due dt br{ display: none;  }
}


@media screen and (min-width: 581px) {
#special li .lecture{width: 20%; display: inline-block;}
}

@media screen and (min-width: 441px) {
.mc{  margin-right:20px;  }
#diploma br{ display: none; }
}


@media screen and (min-width: 481px) {
.due dl{ display: flex; margin-bottom: 2px;}
.due dt{ width: 55%; }
}


@media screen and (min-width: 391px) {
#pageTitle br{ display: none; }
}

/*pc--------------------------------------------*/
#linktxt .brnone{ display: none; }


@media screen and (max-width: 580px) {
#special li .lecture{display: block;}
}
@media screen and (max-width: 480px) {
  .due dt br{ display: none;  }
  }

@media screen and (max-width: 470px) {
#program2 .mc,
#program3 .mc{  width: 70px; }
}

@media screen and (max-width: 440px) {
  #pageTitle{ letter-spacing: 0.05em; }
.mc{ margin-right: 10px; }

#diploma.externalIcon i::before{ right: -49px; }
#diploma.externalIcon i::after { right: -50px; }

}