.fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#next_video_btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 10;
}

.btn-next-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.2;
    color: #fff;
    background-color: #000;
    height: 33px;
    width: 33px;
    line-height: 33px;
    border-radius: 50%;
    padding: 0 0 0 2px;
    text-align: center;
}

.btn-next-play:hover {
    opacity: 0.7;
}

.next-post-link {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
}


#sub-user-subscribe .form-box{
  border: 1px solid #dddddd;
}
.sidebar-offcanvas-menu {
  background-color: #dddee0;
  border-radius: 50%;
}
.navbar-toggler {
  padding: 10px;
}
ul.remark {
  list-style-type: none;
  margin-left: 5px;
  padding-left: 19px;
}

ul.remark li:before {
  content: '※';
  margin-left: -18px;
  margin-right: 5px;
}
@media (min-width: 992px) {
.navbar-expand-xl .navbar-brand .navbar-brand-item {
  
}
.sub-menu a.list-group-item{ border:none;}
.video-player{
  max-width: 800px;
}
}
@media (min-width: 1200px) {
  .navbar-expand-xl .navbar-brand .navbar-brand-item {
    
  }
  .sub-menu a.list-group-item{ border:none;}
  .video-player{
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
.video-player{
max-width: 1400px;
}
}
/* Side Menu */
.bg-side-menu{ background-color: #333030; }
.bg-side-menu .list-group  .list-group-item {
color: #fff;
margin-bottom: 10px;
padding-right: 1rem !important;
padding-left: 1rem !important;
border-radius: 0.325rem;
}
.bg-side-menu .list-group .list-group-item:hover {
color: #fff;
background-color: #3f4040; 
}
.bg-side-menu .list-group .list-group-item.active {
color: #3f4040;
background-color: #f4f5f9; 
}
.bg-side-menu .collapse-list .list-group-item[aria-expanded=true]{
color:#3f4040;
}
.bg-side-menu .collapse-list .list-group-item[aria-expanded=true]:hover{
color:#f4f5f9;
}
.bg-side-menu .collapse-list .nav .nav-link {
  color: #f4f5f9;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.sub-menu a.list-group-item{ font-size: smaller;}
.mv-thumbnail{ max-width: 100px;}
.mv-thumbnail a{
position: relative;
display: block;
}
.seek-bar{
height: 2px;
position: absolute;
left: 0;
bottom: 0px;
border:solid 1px transparent;background: red;
}
.video-player{margin: 0 auto;}
.course-item-video{background: #000; padding: 0; margin-bottom: 3rem;}

.bg-account-menu{
background-color: #2b2b2b !important;
}
.bg-account-menu .list-group-item {
color: #fff;
margin-bottom: 10px;
padding-right: 1rem !important;
padding-left: 1rem !important;
border-radius: 0.325rem;
}
.bg-account-menu .list-group-item:not(.bg-danger-soft-hover):hover, .bg-account-menu .list-group-item:not(.bg-danger-soft-hover).active {
color: #24292d !important;
background-color: #fff !important;
}
.btn-playlists{
background-color: #2b2b2b;
color:#ffffff;
}
.navbar-brand {
font-size:1.2em;
font-weight: bold;
}
/* Btn */
.btn-purchase{
  background-color: #0cbc87;
  color:#ffffff;
}
.btn-purchase:hover{
  background-color: #0cbc87;
  color:#ffffff;
  font-weight: bold;
}
/* Category Menu */
.category-nav-wrapper {
    position: relative;
}

.category-nav-wrapper .nav-scroll-btn {
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    z-index: 10;
    cursor: pointer;
    transition: background 0.2s;
}

.category-nav-wrapper .nav-scroll-btn:hover {
    background: rgba(255, 255, 255, 0.5);
}

.category-nav-wrapper .nav-scroll-left {
    left: 0;
}

.category-nav-wrapper .nav-scroll-right {
    right: 0;
}

.category-nav-wrapper .nav-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}

.category-nav-wrapper .nav-pills::-webkit-scrollbar {
    display: none;
}

.category-nav-wrapper .nav-item {
    flex: 0 0 auto;
}

.category-nav-wrapper .nav-link {
    margin-bottom: 0 !important;
}

.category-nav-wrapper .nav-pills.dragging {
    cursor: grabbing;
}

.category-nav-wrapper .nav-scroll-btn {
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    z-index: 10;
    cursor: pointer;
    transition: opacity 0.3s;
    opacity: 0;
    /* 初期は非表示 */
    background: linear-gradient(to left, white 50%, transparent);
}

.category-nav-wrapper .nav-scroll-left {
    left: 0;
    background: linear-gradient(to right, white 30%, transparent);
}

.category-nav-wrapper .nav-scroll-right {
    right: 0;
    background: linear-gradient(to left, white 30%, transparent);
}