@charset "UTF-8";

/*visumo*/
/*ptn1　縦長かつ目次のないパターン*/
/* .hacobune-univideo {
  width: 30%;
  margin: 20px auto 50px;
} */

.hacobune-dialog-mask {
  z-index: 999999!important;
}

/* .hacobune-video-item-main {
  width: 136%!important;
} */

.hacobune-video-item-side {
  width: 94%!important;
  padding:  50px 0 20px 170px!important;
}

.hacobune-video-item-video-player-container {
  padding-top: 70px!important;
  vertical-align: top!important;
}

/* .hacobune-video-item-description .hacobune-video-item-timeline-container:before {
  content: "時間を押すと指定箇所が再生されます";
  display: block;
  margin-bottom: 20px;
} */
/*サムネイルの余白*/
.hacobune-readmore {
  margin-bottom: -10px!important;
}
/*サムネイルの余白*/
.hacobune-app-container {
  padding: 0!important;
}
/*サムネイルの余白*/
.hacobune-unit-video-outline {
  padding: 0!important;
}

@media (max-width: 720px) {
  /* .hacobune-univideo {
    width: 100%;
  } */

  .hacobune-video-item-main {
    width: 100%!important;
  }

  .hacobune-video-item-side {
    width: 100%!important;
    padding: 0 0 0 0!important;
  }

  .hacobune-video-item-root {
    height: 65vh!important;
  }

  /* .hacobune-video-item-main {
    height: 40vh!important;
  } */

  .hacobune-unit-video {
    margin: 0!important;
  }
}


/*縦長ver　　　*/
.hacobune-univideo {
  width: 30%;
  margin: 20px auto 50px;
}

.hacobune-dialog-wrapper {
  width: 600px!important;
}

.hacobune-video-item-root {
  grid-template-columns: 100% 50%!important;
}

/*再生ボタンの位置*/
.hacobune-unit-video-thumbnail-icon {
  width: 80px!important;
  height: auto!important;
  margin-top: -40px!important;
  margin-left: -40px!important;
}

@media (max-width: 720px) {
  .hacobune-univideo {
    width: 80%;
  }

  /* .hacobune-video-js.hacobune-vjs-fill {
    height: 150%!important;
  } */
  /*再生ボタンの位置*/
  .hacobune-unit-video-thumbnail-icon {
    width: 50px!important;
    margin-top: -25px !important;
    margin-left: -25px !important;
  }
}
/*　　　縦長ver*/


.visumo-thumbnail-button {
  cursor: pointer!important;
  transition: all 0.3s ease!important;
  border: none!important;
  border-radius: 8px!important;
  overflow: hidden!important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1)!important;
}

.visumo-thumbnail-button:hover {
  transform: translateY(-3px)!important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2)!important;
}

.visumo-thumbnail-button:active {
  transform: translateY(1px)!important;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1)!important;
}

@media (max-width: 720px) {

    /*目次設定がないとき、モーダル下側要素非表示*/
    .hacobune-dialog-content .hacobune-video-item-root:has(.hacobune-video-item-timeline-container:empty) {
        grid-template-rows: 0 auto 0 35px;
    }

}

@media (min-width: 721px) {

    .hacobune-dialog-content .hacobune-video-item-root {
        grid-template-rows: 50px 1fr 35px;
    }

    .hacobune-video-item-footer {
        position: absolute;
        bottom: 0;
        right: 36px;
    }

}