/* page-video */


/* visual */
.page-video .page-header .wrap::after{background-image:url('/images/img_visual_video.svg')}


/* tab */
.toggletab{padding:0 0 10px}
.slide-toggles .slide-item.current{background-color:var(--color-brown); color:#FFF; box-shadow:none}
@media(min-width:768px){
  .toggletab{padding:12px 0 0}
}

/*----------------------------------------------------
list
----------------------------------------------------*/
.list-video{flex-direction:row; row-gap:24px; margin-left:-8px; margin-right:-8px}
.list-video .list-item{flex:0 0 100%; padding:0 8px}

.list-video .list-item{width:100%}
.list-video .thum-img{padding-bottom:60%}
.list-video .info{margin-top:8px}
.lists .post-title{font-size:16px}
.list-video .playtime{position:absolute; font-size:11px; padding:3px 5px; bottom:10px; right:10px; color:#FFF; border-radius:6px; background:rgba(0, 0, 0, 0.8); z-index:10}

@media(min-width:768px){
  .list-video{margin-left:-12px; margin-right:-12px; row-gap:8px}
  .list-video .list-item{flex:0 0 50%; padding:12px}
  .list-video .info{margin-top:16px}
}
@media(min-width:1070px){
  .list-video{margin-left:-20px; margin-right:-20px; row-gap:32px}
  .list-video .list-item{flex:0 0 33.333%; padding:0 20px}
  .lists .post-title{font-size:18px}
  .list-video .playtime{font-size:12px}
}


/*----------------------------------------------------
view
----------------------------------------------------*/
.post-video{padding:10px 0}
.post-video .wrap{max-width:var(--width-lg); padding:0}
.video-area{margin:0 auto; overflow:hidden; background-color:#333}

@media(min-width:1070px){
  .post-video .wrap{padding:0 30px}
  .video-area{ border-radius:12px}
}