@charset "utf-8";

/* LiveActプレーヤーをモーダル内に中央表示させ、背景を黒にする */
.modal-liveact .cri-liveact-player {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  background-color: #000;
}
.modal-liveact .lac-div {
  max-width: 100%;
  max-height: 100%;
}

  /* ----- liveact-video--none ----- */
  .liveact-video--none {
    display: none;
  }

/* 他動画プレーヤーとモーダル上の見た目を揃えるためのスタイル */
@media print, screen and (min-width: 768px) {
  .modal-liveact #cboxClose > span {
    -webkit-transition: background-color .2s ease-out 0s;
    transition: background-color .2s ease-out 0s;
  }

  /* ----- colorbox ----- */
  #colorbox.modal-liveact {
    overflow: visible;
  }
  .modal-liveact #cboxWrapper {
    overflow: visible;
  }
  .modal-liveact #cboxLoadedContent {
    border: none;
  }
  .modal-liveact #cboxClose {
    top: 0;
    right: -70px;
    width: auto;
    height: auto;
    background: none;
    text-indent: -9999em;
    outline: none;
  }
  .modal-liveact #cboxClose > span {
    display: block;
    position: relative;
    width: 70px;
    height: 70px;
    background-color: #ff0000;
  }
  .modal-liveact #cboxClose > span::before,
  .modal-liveact #cboxClose > span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    width: 26px;
    height: 2px;
    margin: -1px 0 0 -13px;
    background-color: #fff;
    content: "";
  }
  .modal-liveact #cboxClose > span::before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .modal-liveact #cboxClose > span::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .modal-liveact #cboxClose > span:hover {
    background-color: #cf0212;
  }
}
@media only screen and (max-width: 767px) {
  /* ----- colorbox ----- */
  #colorbox.modal-liveact {
    overflow: visible;
  }
  .modal-liveact #cboxWrapper {
    overflow: visible;
  }
  .modal-liveact #cboxLoadedContent {
    border: none;
  }
  .modal-liveact #cboxClose {
    top: auto;
    right: 0;
    bottom: -29px;
    width: auto;
    height: auto;
    background: none;
    text-indent: -9999em;
    outline: none;
  }
  .modal-liveact #cboxClose > span {
    display: block;
    position: relative;
    width: 29px;
    height: 29px;
    background-color: #ff0000;
  }
  .modal-liveact #cboxClose > span::before,
  .modal-liveact #cboxClose > span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    width: 12px;
    height: 1px;
    margin: 0 0 0 -6px;
    background-color: #fff;
    content: "";
  }
  .modal-liveact #cboxClose > span::before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .modal-liveact #cboxClose > span::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}