@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap");


/*---------------------------------------------------
2021/05/06追記　youtubeモーダル表示
----------------------------------------------------*/
.collabInner .eventSec .eventChannel li {
    width: 480px;
    position: relative;
}
.collabInner .eventSec{
	height: 330px;
}

.blocker,.modal {
  box-sizing:border-box
}
.blocker {
  position:fixed;
  top:0;
  right:0;
  bottom:0;left:0;
  width:100%;
  height:100%;
  overflow:auto;
  z-index:10000;
  padding:20px;
  background-color:#000;
  background-color:rgba(0,0,0,.75);
  text-align:center
}
.blocker:before {
  content:"";
  display:inline-block;
  height:100%;
  vertical-align:middle;
  margin-right:-.05em
 }
.blocker.behind {
  background-color:transparent
}
.modal {
  display:none;
  vertical-align:middle;
  position:relative;
  z-index:10000;
  max-width:1000px;
  width:90%;
  background:#242424;
  padding:15px;
  -webkit-box-shadow:0 0 10px #000;
  -moz-box-shadow:0 0 10px #000;
  -o-box-shadow:0 0 10px #000;
  -ms-box-shadow:0 0 10px #000;
  box-shadow:0 0 10px #000;
  text-align:left;
	height: auto;
	overflow: visible;
}
.modal-spinner {
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
  padding:10px;
  border-radius:5px;
  background-color:#111;
  height:20px
  }
.modal-spinner>div {
  border-radius:100px;
  background-color:#fff;
  height:20px;
  width:2px;
  margin:0 1px;
  display:inline-block;
  -webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;
  animation:sk-stretchdelay 1.2s infinite ease-in-out
}
.modal-spinner .rect2 {
  -webkit-animation-delay:-1.1s;
  animation-delay:-1.1s
}
.modal-spinner .rect3 {
  -webkit-animation-delay:-1s;
  animation-delay:-1s
}
.modal-spinner .rect4 {
  -webkit-animation-delay:-.9s;
  animation-delay:-.9s
 }
@-webkit-keyframes sk-stretchdelay {
  0%,100%,40%{-webkit-transform:scaleY(.5)}
  20%{-webkit-transform:scaleY(1)}}
@keyframes sk-stretchdelay{
  0%,100%,40%{transform:scaleY(.5);
  -webkit-transform:scaleY(.5)}
  20%{transform:scaleY(1);
  -webkit-transform:scaleY(1)
	}
}
.vdo-body {
  max-width: 100%;
  height: auto;
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
}
.collabInner .eventSec .eventChannel li .movieWrap>div {
  padding-top: 0;
  width: 100%;
}
.collabInner .eventSec .eventChannel li .movieWrap>div iframe {
width: 100%;
    height: 320px;
    border: 1px #888 solid;
}
.modal iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.collabInner .eventSec .eventChannel li a.modal-open {
  width: 90%;
  height: 100%;
  position: absolute;
  margin-top: 0px;
  top: 0;
  left: 5%;
  z-index: 6;
}
.collabInner .eventSec .eventChannel li a.modal-open:before {
 content: none;
}
.collabInner .eventSec .eventChannel li a.modal-open:after {
 content: none;
}
div.modal a.close-modal {
  background-color: #000;
  border: 2px solid #242424;
  border-radius: 50%;
  display: block;
  width: 26px;
  height: 26px;
  padding: 10px;
  overflow: hidden;
  position: absolute;
  top: -13px;
  right: -13px;
	box-sizing: unset;
}
div.modal a.close-modal:hover {
  background-color: #424242;
}
div.modal a.close-modal::before,
div.modal a.close-modal::after {
  background-color: #999;
  content: '';
  display: block;
  width: 2px;
  height: 24px;
  margin-left: -1px;
  position: absolute;
  left: 50%;
}
div.modal a.close-modal::before {
  transform: rotate(-45deg);
}
div.modal a.close-modal::after {
  transform: rotate(45deg);
}
@media screen and (max-width: 479px) {
.collabInner .eventSec .eventChannel li a.modal-open {
    display: none;
  }
  .collabInner .eventSec .eventChannel li .movieWrap>div iframe {
    width: 100%;
    height: 220px;
}.collabInner .eventSec .eventChannel li {
    width: 100vw;
    position: relative;
}
.collabInner .eventSec {
    height: 60vw;
}
.collabInner .eventSec .eventChannel li .movieWrap>div {
    padding-top: 0;
    width: 95vw;
}
.vdo-body {
    max-width: 100%;
    height: auto;
    padding-bottom: 56.25%;
    position: relative;
    overflow: hidden;
    text-align: center;
}
}