@charset 'utf-8';
/* =======================================

	ContentsElements

======================================= */
section {
  text-align: left;
}
section > h2,
.overview h2,
.overview h3 {
  padding: 10px 1em;
  border-left: 5px solid #bdcccc;
  background: #ecf0f0;
  font-weight: 500;
  font-size: 1.6rem;
}

/* ------------------------------------
	header
------------------------------------ */
body > header {
  box-shadow: 0 1px 1px rgba(0,39,92,.16);
}
body > header::after {
  position: absolute;
  top: 75px;
  left: 0;
  width: 100%;
  height: 0;
  border-top: 1px solid #e2e2e2;
  content: '';
}
body > header h1 {
  position: relative;
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  padding: .5em 1em;
  min-height: 75px;
  height: auto;
  text-align: left;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: initial;
}
body > header h1::before {
  position: absolute;
  top: 12px;
  left: -1px;
  width: 0;
  height: 50px;
  border-left: 1px solid #e2e2e2;
  content: '';
}
body > header h1 small {
  padding: 0 1em 0 0;
  font-weight: 400;
  font-size: 1.8rem;
}
@media only screen and (max-width: 768px) {
  body > header::after {
    top: 65px;
  }
  body > header h1 {
    padding: 12px 20px;
    width: 100%;
    height: auto;
    font-size: 1.6rem;
    line-height: 1.6;
  }
  body > header h1 small {
    display: block;
    width: 100%;
    font-size: 1.4rem;
  }
}

/* ------------------------------------
	player
------------------------------------ */
.playerwrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.playerwrap .player {
  position: relative;
  overflow: hidden;
  flex-basis: 73%;
  /*	padding-top: 56.25%;	*/
  padding-top: 41.0625%;	/* 73% x 56.25% */
  height: 0;
}
.playerwrap .player iframe,
.playerwrap .player .jstream-eqPlayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
.playerwrap .overview {
  position: relative;
  flex-basis: 27%;
  padding-top: 41.0625%;
  height: 0;
}
.playerwrap .overview .inner {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100% !important;
  height: 100% !important;
}

@media only screen and (max-width: 768px) {
  .playerwrap {
    display: block;
  }
  .playerwrap .player {
    padding-top: 56.25%;
    width: 100%;
  }
  .playerwrap .overview {
    padding-top: 0;
    width: 100%;
    height: auto;
  }
  .playerwrap .overview .inner {
    position: relative;
    height: auto !important;
  }
}

/* overview */
.overview h2 {
  padding: 10px 1em 10px 45px;
  border-bottom: 1px solid #ccc;
  background-image: url(../img/ico_mic.png);
  background-position: 18px 13px;
  background-size: 14.5px;
  background-repeat: no-repeat;
}
.overview h2 span {
  display: block;
  font-weight: 400;
}
.overview h3 {
  position: relative;
  padding: 10px 1em 10px 45px;
  border-bottom: 3px solid #ccc;
  background-image: url(../img/ico_agenda.png);
  background-position: 18px 17px;
  background-size: 15px;
  background-repeat: no-repeat;
}

.overview .agenda {
  position: relative;
}
.overview .agenda ul {
  overflow-y: auto;
  height: 100%;
}
.overview .agenda li a {
  display: block;
  padding: 20px 20px 20px 50px;
  border-bottom: 1px solid #e2e2e2;
  background: transparent url(../img/ico_play.png) 20px center no-repeat;
  background-size: 18px;
}
.overview .agenda li a.current {
  background-color: #d1f1ff;
  background-image: url(../img/ico_active.png);
}
@media only screen and (max-width: 768px) {
  .overview h3::after {
    position: absolute;
    top: 50%;
    right: 20px;
    display: block;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    content: '';
    transform: rotate(135deg);
  }
  .overview h3.open::after {
    margin-top: 0;
    transform: rotate(-45deg);
  }
  .overview .agenda {
    display: none;
    max-height: 250px;
  }
  .overview .agenda::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    display: block;
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 70%,rgba(255,255,255,1) 100%);
    content: '';
    pointer-events: none;
  }
}
/* participation  logout*/
.participation_btn {
  position: relative;
  display: block;
  margin: 10px 16px 10px auto;
  width: max-content;
}
.participation_btn .logout {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  min-width: 64px;
  border: solid 1px #008ae0;
  border-radius: 2px;
  box-shadow: none;
  color: #008ae0;
  text-align: center;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity, background-color .1s ease-in-out;
}
.participation_btn .logout:active {
  background-color: #008ae0;
  box-shadow: none;
  color: #fff;
}
.participation_btn .logout:disabled:hover {
  border: 1px solid #aaa;
  background-color: #f2f2f2;
  box-shadow: none;
  color: #bbb;
  cursor: not-allowed;
}
@media only screen and (min-width: 768px) {
  .participation_btn .logout:hover {
    background-color: #d3edff;
    box-shadow: none;
  }
}

/* ------------------------------------
	.info
------------------------------------ */
.info {
  display: flex;
}
.info section {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 200px;
  height: 100%;
}
.info .content {
  overflow-y: auto;
  flex: 1;
  padding: 20px;
}
.info section + section .content {
  border-left: 1px solid #e2e2e2;
}

.info .document {
  padding-right: 0;
  letter-spacing: -1em;
}
.info .document li {
  display: inline-block;
  padding: 0 0 .5em;
  letter-spacing: 0;
}
.info .document li a {
  display: inline-block;
  overflow: hidden;
  margin-right: 1em;
  padding: 0 1em 0 24px;
  border-right: 1px solid #e2e2e2;
  background: transparent url(../img/ico_link.png) left 6px no-repeat;
  background-size: 13px;
  line-height: 1.4;
}
.info .document li:last-child a {
  border-right: none;
}
.info .document li a span {
  padding: 0 0 0 .5em;
  font-size: 1.4rem;
  opacity: .7;
}
.info .document li a[href$='.pdf'] {
  background-image: url(../img/ico_pdf.png);
  background-position: left 4px;
}

@media only screen and (max-width: 768px) {
  .info {
    padding-bottom: 60px;
  }
  .info,
  .info .document li {
    display: block;
  }
  .info .document li a {
    display: inline-block;
    border-right: none;
  }
  .info section {
    min-height: 0;
    height: 100%;
  }
  .info section {
    overflow: hidden;
    min-height: 50px;
    height: 50px;
    border-bottom: 1px solid #bdcccc;
    transition: all .3s ease-in-out;
  }
  .info section .content {
    overflow-y: visible;
    padding: 0 20px;
    height: 0;
    opacity: 0;
    transition: padding .3s ease-out, opacity .2s ease-out, height .1s linear .1s;
  }
  .info section.open {
    min-height: 100%;
    height: 100%;
    border-bottom: none;
  }
	.info section.open .content {
    overflow-y: visible;
    padding: 20px;
    height: 100%;
    opacity: 1;
  }
  .info section > h2 {
    position: relative;
    pointer-events: auto;
  }
  .info section > h2::after {
    position: absolute;
    top: 50%;
    right: 20px;
    display: block;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    content: '';
    transform: rotate(135deg);
  }
  .info section.open > h2::after {
    margin-top: 0;
    transform: rotate(-45deg);
  }
}


/* hover
------------------------------------ */
/* all */
/* color */
body.pc_view .overview .agenda li a {
  -webkit-transition: all .2s ease-out;
     -moz-transition: all .2s ease-out;
}
body.pc_view .overview .agenda li a:hover {
  background-color: #d1f1ff;
}

/* color */
body.pc_view .info .content li a {
  -webkit-transition: color .2s ease-out;
     -moz-transition: color .2s ease-out;
}
body.pc_view .info .content li a:hover {
  color: #008ae0;
}