@charset "utf-8";
/* CSS Document */


.programList li,.programList li a span{ position: relative}
.programList li a{
  background: #cc443f;
color: #fff;
border: solid #8e1c18 1px;
text-align: center;
padding: 14px 0; }


.programList li a:before,
.programList li a span:after{ content: ""; display: block; position: absolute; }

.programList li a:before {
    height: 6px;
    width: 6px;
    right: 6%; top:48%;
  border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

.programList li a span:after{
background: url("../img/externalIcon.svg") right 4px no-repeat;
    background-size: auto;
background-size: 9px 10px;
right: -16px;
bottom: 16%;
height: 20px;
width: 8%;}


.programList li a:hover{ background-color: #8e1c18; color: #ffd9e4; }

.seminarBox { margin-bottom:40px; }

/**/
.seminarTitle{font-size: 1.3em; margin-bottom: 20px; 
    background-color: #ffeeed;
    padding: 10px 20px;
  	line-break:strict;
  }


.moderator { display: flex; margin-left:20px;}
.speaker{ margin:0 0 5px 70px;  line-height: 1.6em;}

.moderator dt{ background: #efefef; padding: 1px 5px;  margin-right: 7px; }


.moderator span, .speaker span{ font-size:0.9em; }


@media screen and (min-width: 751px) {
.programList{ display: flex; justify-content: space-between; margin-bottom:30px;}
.programList li{ width: 31.3%;}
}

@media screen and (max-width: 1059px) {
.seminarTitle span br{ display: none; }

}

@media screen and (max-width: 750px) {
.programList li:not(:last-child){ margin-bottom:15px }
.programList li:last-child{ margin-bottom:30px }
}


@media screen and (max-width: 510px) {
.moderator span, .speaker span{ display: block; font-size:0.85em; }
.moderator br, .speaker br{ display: none; }
.moderator dt{ width: 44px }
}

@media screen and (max-width: 356px) {
    .speaker{ margin-left:76px; }
    .moderator dt{ width: 50px }
  }