@charset "UTF-8";
/* breakpoint */
/* ============================================ */
@media (max-width: 1023px) {
  .pc-only {
    display: none !important;
  }
}

.sp-only {
  display: none !important;
}
@media (max-width: 1023px) {
  .sp-only {
    display: inherit !important;
  }
}

.col-15, .col-sm-15, .col-md-15, .col-lg-15 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  width: 100%;
}

@media (min-width: 1023px) and (max-width: 1366px) {
  .col-md-15 {
    width: 20%;
    flex: 0 0 20%;
  }
}
@media (min-width: 1024px) {
  .col-md-15 {
    width: 20%;
    flex: 0 0 20%;
  }
}
.col-15 {
  width: 20%;
  flex: 0 0 20%;
}

/*=====================================================================
ショット、ロング動画トップ
=====================================================================*/
.short-movie, .long-movie {
  width: 100%;
  margin-bottom: 50px;
}
.short-movie .bannerWrap, .long-movie .bannerWrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #333;
  height: 250px;
  margin-bottom: 10px;
  color: #fff;
}
.short-movie .bannerWrap img, .long-movie .bannerWrap img {
  width: 100%;
}
.short-movie .list-wrap, .long-movie .list-wrap {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.short-movie .list-wrap .lists, .long-movie .list-wrap .lists {
  display: flex;
  flex-direction: column;
  justify-content: start;
  margin-bottom: 20px;
  padding-right: 7px;
  padding-left: 7px;
}
.short-movie .list-wrap .lists .tlt, .long-movie .list-wrap .lists .tlt {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: bold;
  margin-bottom: 5px;
  min-height: 50px;
}
.short-movie .list-wrap .lists .thumb-image, .long-movie .list-wrap .lists .thumb-image {
  width: 100%;
}
.short-movie .list-wrap .lists .thumb-image img, .long-movie .list-wrap .lists .thumb-image img {
  width: 100%;
}
.short-movie .list-wrap .lists a, .long-movie .list-wrap .lists a {
  text-decoration: none;
}
.short-movie .list-wrap .lists a:hover, .long-movie .list-wrap .lists a:hover {
  opacity: 0.6;
  transition: 0.3s all;
}

/*=====================================================================
ムービーview
=====================================================================*/
.movieView-wrap {
  display: flex;
}
.movieView-wrap .movie-view {
  width: 100%;
  padding-right: 50px;
  margin-bottom: 50px;
}
.movieView-wrap .movie-view .comment {
  border-top: 1px solid #c6c6c6;
  font-size: 16px;
  padding-top: 15px;
  margin-bottom: 15px;
  word-break: break-all;
}
.movieView-wrap .movie-view .movie-wrap {
  width: 100%;
}
.movieView-wrap .movie-view .movie-wrap h4 {
  font-size: 20px;
  font-weight: bold;
  padding: 10px 0;
}
.movieView-wrap .movie-view .movie-wrap h4.short {
  color: #0066cc;
}
.movieView-wrap .movie-view .movie-wrap h4.long {
  color: #ff8400;
}
.movieView-wrap .movie-view .movie-wrap .videoDetail {
  display: flex;
  align-items: center;
  padding: 10px 0;
  width: 100%;
  margin-top: 10px;
}
.movieView-wrap .movie-view .movie-wrap .videoDetail span {
  font-size: 16px;
  margin-right: 15px;
  background: #fff;
  padding: 5px 15px;
  border: 2px solid #eee;
  border-radius: 10px;
  box-shadow: 0 0 5px #eee;
}
.movieView-wrap .movie-view .movie-wrap .videoDetail span.recommend {
  margin-right: 15px;
}
.movieView-wrap .movie-view .movie-wrap .videoDetail span.recommend::before {
  right: 10px;
  content: "\f164";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 20px;
  color: #0066cc;
  margin-right: 5px;
}
.movieView-wrap .movie-view .movie-wrap .videoDetail span.views::after {
  content: " 閲覧回数";
}
@media (max-width: 1023px) {
  .movieView-wrap .movie-view {
    padding-right: 0;
  }
}
.movieView-wrap .recommend-wrap {
  display: flex;
  flex-direction: column;
}
.movieView-wrap .recommend-wrap .lists {
  margin: 0;
  margin-bottom: 10px;
}
.movieView-wrap .recommend-wrap .lists .thumb-image {
  width: 100%;
  padding: 0;
  padding-right: 5px;
  margin-bottom: 5px;
}
.movieView-wrap .recommend-wrap .lists .thumb-image img {
  width: 100%;
}
.movieView-wrap .recommend-wrap .lists a {
  text-decoration: none;
  display: flex;
}
.movieView-wrap .recommend-wrap .lists a:hover {
  opacity: 0.6;
  transition: 0.3s all;
}
.movieView-wrap .view-list {
  display: flex;
  flex-direction: column;
  padding-right: 50px;
}
.movieView-wrap .view-list .list-title {
  position: relative;
  padding: 0 65px;
  text-align: center;
  width: 100%;
  margin-bottom: 50px;
}
.movieView-wrap .view-list .list-title:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: #c6c6c6;
}
.movieView-wrap .view-list .list-title span {
  position: relative;
  padding: 0 1em;
  background: #f2f2f2;
}
.movieView-wrap .view-list .list-wrap {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.movieView-wrap .view-list .list-wrap .lists {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: 0 5px;
  margin-bottom: 20px;
}
.movieView-wrap .view-list .list-wrap .lists .thumb-image {
  width: 100%;
}
.movieView-wrap .view-list .list-wrap .lists .thumb-image img {
  width: 100%;
}
.movieView-wrap .view-list .list-wrap .lists a {
  text-decoration: none;
}
.movieView-wrap .view-list .list-wrap .lists a:hover {
  opacity: 0.6;
  transition: 0.3s all;
}
@media (max-width: 1023px) {
  .movieView-wrap .view-list {
    padding-right: 0;
    padding: 0 15px;
  }
  .movieView-wrap .view-list .list-title {
    padding: 0 15px;
  }
}

/*=====================================================================
ムービーviewer 対応
=====================================================================*/
.video-js {
  font-size: 10px;
  color: #fff;
}

.vjs-default-skin .vjs-big-play-button {
  font-size: 3em;
  line-height: 1.5em;
  height: 1.5em;
  width: 3em;
  border: 0.06666em solid #fff;
  border-radius: 0.3em;
  left: 0.5em;
  top: 0.5em;
}

.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-menu-button .vjs-menu-content {
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
}

.video-js .vjs-slider {
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
}

.video-js .vjs-volume-level,
.video-js .vjs-play-progress,
.video-js .vjs-slider-bar {
  background: #fff;
}

.video-js .vjs-load-progress {
  background: #bfc7d3;
  background: rgba(115, 133, 159, 0.5);
}

.video-js .vjs-load-progress div {
  background: white;
  background: rgba(115, 133, 159, 0.75);
}

/*=====================================================================
ニュースview
=====================================================================*/
.newsView-wrap {
  display: flex;
  margin-bottom: 30px;
}
.newsView-wrap .news-view {
  background: #fff;
  padding: 20px;
  border: 1px solid #c6c6c6;
  height: 100%;
}
.newsView-wrap .news-view .wrap .subject {
  display: block;
  font-size: 24px;
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
  margin-bottom: 10px;
}
.newsView-wrap .news-view .wrap .videoDetail {
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 10px 0;
  width: 100%;
}
.newsView-wrap .news-view .wrap .videoDetail span {
  font-size: 14px;
  margin-right: 15px;
}
.newsView-wrap .news-view .wrap .videoDetail span.recommend {
  margin-right: 15px;
}
.newsView-wrap .news-view .wrap .videoDetail span.recommend::before {
  right: 10px;
  content: "\f164";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 20px;
  color: #0066cc;
  margin-right: 5px;
}
.newsView-wrap .news-view .wrap .videoDetail span.views::after {
  content: " 閲覧回数";
}
.newsView-wrap .news-view .wrap .contents {
  margin-top: 20px;
}
.newsView-wrap .news-view .wrap .contents .image {
  float: left;
  width: 400px;
  height: 225px;
  margin: 0 15px 15px 0;
}
.newsView-wrap .news-view .wrap .contents .image img {
  width: 100%;
}
.newsView-wrap .news-view .wrap .contents .field {
  margin-bottom: 1em;
  line-height: 1.8em;
  word-break: normal;
  word-wrap: break-word;
}
.newsView-wrap .news-view .wrap .contents .field img {
  max-width: 100%;
}
.newsView-wrap .news-view .btn-return {
  text-align: center;
  font-size: 16px;
  padding: 20px 0;
}
.newsView-wrap .news-view .btn-return a::before {
  right: 0;
  content: "\f060";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  padding-right: 10px;
}
.newsView-wrap .ranking-news {
  padding-left: 30px;
}
.newsView-wrap .ranking-news .lists {
  display: flex;
  position: relative;
  margin-bottom: 20px;
}
.newsView-wrap .ranking-news .lists a {
  text-decoration: none;
}
.newsView-wrap .ranking-news .lists a:hover {
  opacity: 0.6;
  transition: 0.3s all;
}
.newsView-wrap .ranking-news .lists .rankNum {
  flex-shrink: 0;
  width: 100%;
}
.newsView-wrap .ranking-news .lists .rankNum::before {
  right: 10px;
  content: "\f521";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  color: #0066cc;
  margin-right: 5px;
}
.newsView-wrap .ranking-news .lists .rankNum .date {
  float: right;
  font-size: 12px;
  color: #848484;
}
.newsView-wrap .ranking-news .lists .rankBody {
  flex-grow: 1;
}
.newsView-wrap .ranking-news .lists .rankBody .thumb-image {
  width: 100%;
  padding: 0;
}
.newsView-wrap .ranking-news .lists .rankBody .thumb-image img {
  width: 100%;
}
.newsView-wrap .ranking-news .lists .rankBody .comment {
  padding: 0;
  margin-top: 5px;
}
@media (max-width: 1023px) {
  .newsView-wrap .news-view {
    padding: 15px;
  }
  .newsView-wrap .news-view .wrap .subject {
    font-size: 20px;
  }
  .newsView-wrap .news-view .wrap .contents .image {
    width: 100%;
    height: auto;
    margin: 0 15px 15px 0;
  }
  .newsView-wrap .news-view .wrap .contents .field {
    margin-bottom: 1em;
    line-height: 1.8em;
    word-break: normal;
    word-wrap: break-word;
  }
}/*# sourceMappingURL=sub.css.map */