/* fullscreen */
#fullscreenArea:-webkit-full-screen{ 
  background:#000;
}

#fullscreenArea:-webkit-full-screen .box-contents-numbers,
#fullscreenArea:-webkit-full-screen .share-area,
#fullscreenArea:-webkit-full-screen #infoArea,
#fullscreenArea:-webkit-full-screen #fullscreenRightColumn .nav-tabs,
#fullscreenArea:-webkit-full-screen #fullscreenBtn {
  display: none;
}

#fullscreenArea:-webkit-full-screen #videoBox {
  background: #000;
  background-image:none !important;
}

#fullscreenArea:-webkit-full-screen #chatArea {
  display: block;
  width: 100%;
  background: #fff;
}

#fullscreenArea:-webkit-full-screen #cancelFullscreenBtn,
#fullscreenArea.chatmode:-webkit-full-screen #chatHideBtn,
#fullscreenArea:-webkit-full-screen #chatShowBtn {
  display: inline-block;
}

#fullscreenArea.chatmode:-webkit-full-screen #chatShowBtn {
  display: none;
}

#fullscreenArea:-webkit-full-screen #fullscreenLeftColumn {
  position: absolute;
  top: 50%;
  max-width: 100%;
  transform: translateY(-50%);
  padding: 0;
}

#fullscreenArea:-webkit-full-screen #fullscreenRightColumn {
  position: absolute;
  padding: 0;
}

#fullscreenArea.chatmode:-webkit-full-screen #fullscreenLeftColumn {
  width: 80%;
  transition: width .3s;
}

#fullscreenArea.chatmode:-webkit-full-screen #fullscreenRightColumn {
  width: 20%;
  left: 100%;
  animation: ChatSlideIn .3s forwards;
}

@media screen and (max-width:1280px) {
  #fullscreenArea.chatmode:-webkit-full-screen #fullscreenLeftColumn {
    width: 66.7%;
    transition: width .3s;
  }

  #fullscreenArea.chatmode:-webkit-full-screen #fullscreenRightColumn {
    width: 33.3%;
    left: 100%;
    animation: ChatSlideIn .3s forwards;
  }
}

@media screen and (orientation: portrait){
  #fullscreenArea.chatmode:-webkit-full-screen #fullscreenLeftColumn {
    width: 100vw;
    height: 56.25vw; 
    transform: translateY(0%);
    top: 0;
  }

  #fullscreenArea.chatmode:-webkit-full-screen #fullscreenRightColumn {
    width: 100vw;
    max-width:100vw;
    height: calc(100vh - 56.25vw);
    top: 56.25vw;
  }
}

#fullscreenArea:-webkit-full-screen #fullscreenLeftColumn {
  width:100%;
  transition: width .3s;
}

#fullscreenArea:-webkit-full-screen #fullscreenRightColumn {
  animation: ChatSlideOut .3s forwards;
  right: 0;
}

#fullscreenArea:fullscreen{ 
  background:#000;
}

#fullscreenArea:fullscreen .box-contents-numbers,
#fullscreenArea:fullscreen .share-area,
#fullscreenArea:fullscreen #infoArea,
#fullscreenArea:fullscreen #fullscreenRightColumn .nav-tabs,
#fullscreenArea:fullscreen #fullscreenBtn {
  display: none;
}

#fullscreenArea:fullscreen #videoBox {
  background: #000;
  background-image:none !important;
}

#fullscreenArea:fullscreen #chatArea {
  display: block;
  width: 100%;
  background: #fff;
}

#fullscreenArea:fullscreen #cancelFullscreenBtn,
#fullscreenArea.chatmode:fullscreen #chatHideBtn,
#fullscreenArea:fullscreen #chatShowBtn {
  display: inline-block;
}

#fullscreenArea.chatmode:fullscreen #chatShowBtn {
  display: none;
}

#fullscreenArea:fullscreen #fullscreenLeftColumn {
  position: absolute;
  top: 50%;
  max-width: 100%;
  transform: translateY(-50%);
  padding: 0;
}

#fullscreenArea:fullscreen #fullscreenRightColumn {
  position: absolute;
  padding: 0;
}

#fullscreenArea.chatmode:fullscreen #fullscreenLeftColumn {
  width: 80%;
  transition: width .3s;
}

#fullscreenArea.chatmode:fullscreen #fullscreenRightColumn {
  width: 20%;
  left: 100%;
  animation: ChatSlideIn .3s forwards;
}

@media screen and (max-width:1280px) {
  #fullscreenArea.chatmode:fullscreen #fullscreenLeftColumn {
    width: 66.7%;
    transition: width .3s;
  }

  #fullscreenArea.chatmode:fullscreen #fullscreenRightColumn {
    width: 33.3%;
    left: 100%;
    animation: ChatSlideIn .3s forwards;
  }
}

@media screen and (orientation: portrait){
  #fullscreenArea.chatmode:fullscreen #fullscreenLeftColumn {
    width: 100vw;
    height: 56.25vw; 
    transform: translateY(0%);
    top: 0;
  }

  #fullscreenArea.chatmode:fullscreen #fullscreenRightColumn {
    width: 100vw;
    max-width:100vw;
    height: calc(100vh - 56.25vw);
    top: 56.25vw;
  }
}

#fullscreenArea:fullscreen #fullscreenLeftColumn {
  width:100%;
  transition: width .3s;
}

#fullscreenArea:fullscreen #fullscreenRightColumn {
  animation: ChatSlideOut .3s forwards;
  right: 0;
}

@keyframes ChatSlideIn {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes ChatSlideOut {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* not fullscreen */
#fullscreenArea #cancelFullscreenBtn,
#fullscreenArea #chatHideBtn,
#fullscreenArea #chatShowBtn {
  display: none;
}

.box-contentsInfo-section + .box-contentsInfo-section{
	border-top:1px solid #cccccc;
  padding: 10px 0;
}

.nav-link{
  padding: 3px;
  font-size: 14px;
}

/* 設定ボタンエリア */

.touch-hit-area {
  position: absolute;
  z-index: 99;
}

#hitAreaLeft {
  left: 0;
  width: 30%;
  height: 60%;
  top: 20%;
}

#hitAreaRight {
  left: 98%;
  width: 2%;
  height: 80%;
  top:0%;
}

#hitAreaTop {
  top: 0%;
  width: 40%;
  left: 60%;
  height: 30%;
}

#fullscreenControl{
  width: 100%;
  height: 0;
  z-index: 2147483647;
  transition: 1s;
  position: absolute;
  bottom: 120px;
  right: 0;
  display:none;
}

.movieWrap #fullscreenControl.active{
  display: inline-block;
}

/* ボタン */
.box-contents-numbers{
  position: relative;
}

#fullscreenControl .btn-container{
  position: absolute;
  right: -10px;
  transform: translateX(-50%);
  top: 0;
  display: none;
  transition: 1.0s;
}

#fullscreenControl.active .btn-container{
  display: block;
  transition: 2.0s;
}

#fullscreenControl .btn{
  margin-left: 10px;
}

#fullscreenBtnAnother.btn{
  margin-left: 10px;
  border: none;
  padding: 0;
}

#fullscreenBtnAnother.btn .btn-withTxt,
#fullscreenBtnAnother.btn .btn-tooltip{
  background: #efefef;
  color: #333;
  border-radius: 20px;
}

#fullscreenBtnAnother{
  position: absolute;
  right: 0px;
  top: 0px;
}

#fullscreenControl svg{
  fill: #fff;
}

#fullscreenBtnAnother svg{
  fill: rgb(51,51,51);
}

#fullscreenBtnAnother .btn-withTxt{
  display: flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
}

#fullscreenControl .reverse{
  transform: scale(-1, 1)
}

/* ボタンホバー時吹き出し */

.btn-tooltip{
  position: relative;
  cursor: pointer;
  display: inline-block;
  background: rgba(51,51,51,0.8);
  padding: 4px 4px;
  border-radius: 20px;
  line-height: 1px;
}

.btn-popup{
  display: none;
  position: absolute;
  padding: 5px;
  font-size: 12px;
  line-height: 1.6em;
  color: #fff;
  border-radius: 5px;
  background: #333;
  width: 110px;
}

#fullscreenBtn .btn-popup,
#fullscreenBtnAnother .btn-popup{
  width: 80px;
}

.btn-popup:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 6px solid transparent;
  border-top: 6px solid #333;
  margin-left: -6px;
}

.btn-tooltip:hover .btn-popup{
  display: inline-block;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
}

#fullscreenBtnAnother .btn-tooltip:hover .btn-popup{
  display: inline-block;
  top: -37px;
  left: 50%;
  transform: translateX(-50%);
}

/* 動画情報エリア */
#infoArea {
  padding: 10px 15px;
}

#infoArea h4.btn-toggle{
  margin-bottom: 0;
}

#infoArea .purchase-info-area .btn-toggle{
  border: 1px solid #acacac;
}

#infoArea .accordion-box{
  background: none;
  border: 1px solid #ddd;
}

/* チャットエリア */
#fullscreenArea:-webkit-full-screen #fullscreenRightColumn,
#fullscreenArea:-webkit-full-screen #fullscreenRightColumn iframe {
  height: 100vh;
  background-color: #FFF;
}

#fullscreenArea:fullscreen #fullscreenRightColumn,
#fullscreenArea:fullscreen #fullscreenRightColumn iframe {
  height: 100vh;
  background-color: #FFF;
}

#fullscreenControl{
  opacity: 1!important;
}