@charset "utf-8";

/*mainContents*/
main{overflow: hidden;}
#mainContents{
     position: relative;
}
#mainContents::after{
     content: '';display: block;
     position: absolute;
     bottom:0;left:-50%;
     width:200%;height: 8px;
     background: #f1f1f1;
}
#movieChapter .chapterTitle{
     background-color: #66af54;
     color: #fff;
     font-weight: bold;
     position: relative;
}
#movieChapter .chapterTitle a{
     color: #fff;font-size: 14px;
     height:1.4em;
     position: absolute;
     right:1em;
     top:0;bottom:0;
     margin:auto;
     background: url(../../common/img/icon_link_w.svg) no-repeat left center;
     background-size: 12px;
     padding-left:1.4em;
}

.chapterItem .inner{
     background:#f1f1f1 ;
     border:2px solid #e0e0e0 ;
     border-radius: 8px;
     box-sizing: border-box;
}
.chapterItem.active .inner{
     background:#eef7ec ;
     border:2px solid #c7e8bf ;
}

.chapterItem .scene{
     background: #fff;
     border-radius: 6px;
     box-sizing: border-box;
     
}
.chapterItem .scene .thumb{
     display: inline-block;
     vertical-align: top;
}
.chapterItem .scene .thumb img{
     width: 100%;
}
.chapterItem .scene .cpTitle{
     display: inline-block;
     vertical-align: top;
     font-weight: bold;
}
.chapterItem .scene .cpTitle span{
     display: block;
     color:#66af54;
}
.chapterItem .viewBtn{
     display: inline-block;
     color: #66af54;
     font-weight: bold;
     position: relative;
     padding-left:1.5em;
     line-height: 1;
}
.chapterItem .summary .viewBtn::before{
     content: '';
     display: block;   position: absolute;left:0;top:0;bottom:0;margin:auto;
     background-image:url(/school/common/img/icon_viewopen.svg);
     background-repeat: no-repeat ;
     background-position: left top;
     background-size: contain;
}
.chapterItem .summary.open .viewBtn::before{
     background-image:url(/school/common/img/icon_viewclose.svg);

}
.chapterItem .summary p{
     height:0;
     overflow: hidden;
}
.chapterItem .summary.open p{
     height:auto;
}
#movieDetail .onair{
     color:#66af54;
}
#movieDetail .title{
    font-weight: bold;
}
#movieKeyword span{
     display: inline-block;
     border:1px solid #d4ebcf;
     border-radius: 4px;
     padding:0.2em 0.5em;
     margin-right:6px;
}
#movieKeyword span a{
     color: inherit;
    
}
#movieShare .bdWrap{
     box-sizing: border-box;
     border-radius: 20px;
     border:6px solid #f1f1f1;
}
#movieShare .bdWrap .linkBtn a{
     display: block;
     background-repeat: no-repeat;
     background-position: left top;
     text-indent: -500%;
     overflow: hidden;

}
.noVideo img{
	width:100%;
}
#linkBtn{
     background-color: #eef7ec;
}
@media screen and (min-width: 768px) {
     #mainContents{
          padding-bottom: 20px;
     }
     #programContents{
          padding: 60px 10px 30px;
     }
     section.movie{
          padding-bottom: 3.96%;
     }
     .movieWrap{
          width:100%;
          position: relative;
          display: flex;
          flex-wrap: wrap;
          min-height:600px;
          align-content :flex-start;
     }
     /* .movieWrap::after{
          position: absolute;
          display: block;
          content:"";
          right:0;top:0;
          width: 1px;height:100%;min-height:600px;
     } */
     #moviePlayer{
          width:57.617%;
          order: 0;
          /* flex-basis: 57.617%;  */
     }

     #movieChapter{
          order: 1;
          width:42.38%;   
     }
     #movieChapter .chapterWrap{
          overflow-y: scroll;
          position: relative;
          height:89.87%;
          -webkit-overflow-scrolling: auto;
     }
     #movieChapter .chapterWrap .chapterWrapScroll{
          position: absolute;
          left:0;top:0;
          width:100%;
          
     }
     .chapterTitle{
          padding:10px 14px;
          font-size: 16px;
     }

     .chapterItem{
          margin-top:2.3%;
     }
     .chapterItem .inner{
          width:95.4%;
          margin:0 auto;
          padding:2.764% 2.764% 0;
     }
     .chapterItem .scene{
          padding:10px;
          margin-bottom: 3.78%;
          cursor: pointer;
     }
     .chapterItem .scene .thumb{
          width:34.59%;
          margin-right: 2.3%;
     }
     .chapterItem .scene .cpTitle{
          width:61.4%;
     }
     .chapterItem .summary{
          padding:0 2.3%;
     }
     .chapterItem .summary.open p{
          padding-bottom: 3.78%;
     }
     .chapterItem .viewBtn{
          cursor: pointer;
          margin-bottom: 3.78%;

     }
     .chapterItem .viewBtn::before{
          width:16px;height: 16px;
     }
     #movieDetail{
          order: 3;
          /* width:74.21%; */
          width:calc(100% - 270px);
          padding-top:2.92%;
          position: relative;
     }

     #movieDetail .onair{
          font-size: 14px;
          margin-bottom:1.953%;
     }
     #movieDetail .title{
          font-size: 26px;
          margin-bottom:2.34%;
     }
     #movieDetail .summary{
          font-size: 14px;
          margin-bottom:2.34%;
     }
     #movieDetail .summaryLink{
          margin-bottom:2.34%;

     }
     #movieKeyword {
          /* width: 74.21%; */
          width:calc(100% - 270px);
          order: 4;
     }
     #movieShare{
          order: 3;
          /* width: 22.07%; */
          width:226px;
          margin:2.92% 0 0 3.5%;
          position: relative;
          
     }
 
     #movieShare .bdWrap{
          padding:13.2% 9.2% 13.2%;
          position: absolute;
     }
     #movieShare .bdWrap::before{
          display: block;
          content: '';
          position: absolute;
          background: #fff;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 18px;
          height: 18px;
          border-bottom: 6px solid transparent;
          border-right: 6px solid transparent;
          border-top: 6px solid #f1f1f1;
          border-left: 6px solid #f1f1f1;
          margin-left: -15px;
          transform: rotate(-45deg);
     }
     #movieShare .bdWrap .linkBtn a{
          background-image: url(../img/btn_snscopy_pc.png);
          background-size: contain;
          width:100%;
          height:51px;
     }
     #linkBtn{
          margin-top: 26px;
          padding:20px 0 24px 0;
     }
     #linkBtn a.cbtn{
          font-size: 16px;
          padding:0.8em 1.8em;


     }
    
}

section.clip,
section.kyozai{
     border-top:2px dotted #e5e5e5 !important;
}

@media screen and (max-width: 767px) {
     #mainContents{
          padding-bottom: 5.33%;
     }
     section.clip,
     section.kyozai{
          padding-bottom: 8%;
     }
     #programContents{
          padding: 8% 0 5.33%;
     }
     .movieWrap{
          width:92%;
          margin: auto;
          position: relative;
          display: flex;
          flex-wrap: wrap;
     }
     #moviePlayer{
          order:0;
          width:100%;
          margin-bottom:5.33%;
     }
     #movieChapter{
          order:2;
          margin-bottom: 3.478%;
     }
     #movieDetail{
          order:1;
          margin-bottom:5.33%;
     }
     #movieDetail .onair{
          font-size: 3.73vw;
          margin-bottom:1.953%;
     }
     #movieDetail .title{
          font-size: 4.26vw;
          margin-bottom:2.34%;
     }
     #movieDetail .summary{
          font-size: 3.73vw;
          margin-bottom:2.34%;
     }
     #movieDetail .summaryLink{
          margin-bottom:2.34%;

     }

     .chapterTitle{
          font-size:4.26vw ;
          padding:3.2% 5.33%;
     }
     .chapterTitle a{
          display: none;
     }
     .chapterItem:first-child{
          margin-top:2.3%;
     }
     .chapterItem .inner{
          margin:2.3% 0;
          padding:3.478% 3.478% 0;
     }
     .chapterItem .scene {
          padding:3.1%;
          margin-bottom: 3.478%;
     }
     .chapterItem .scene .thumb{
          width:19.84%;
          margin-right: 2.17%;
     }
     .chapterItem .scene .cpTitle{
          width:71.3%;
          font-size: 3.73vw;
          line-height: 1.4;
     }
     .chapterItem .scene .cpTitle span{
          font-size: 3.2vw;
         
     }
     .chapterItem .summary{
          font-size: 3.73vw;
          padding: 0 1.2%;

     }
     .chapterItem .summary.open p{
          padding-bottom: 3.478%;
     }
     .chapterItem .viewBtn{
          margin-bottom: 3.478%;
          padding-left:1.5em;
     }
     .chapterItem .viewBtn::before{
          width:1.2em;height: 1.2em;
     }
     #movieKeyword {
          order: 3;
          font-size: 3.73vw;
          margin-bottom: 5.33%;
          font-weight: bold;
     }
     #movieKeyword span{
          margin:8px 8px 0 0;
     }
     #movieShare{
          order: 4;
          width: 100%;
          position: relative;
          margin-bottom: 5.33%;
          text-align: center;
          
     }
     #movieShare .bdWrap{
          border-radius: 12px;
          padding:4.34% 0;
          font-size: 4.26vw;
     }
     #movieShare .bdWrap .nhksns-guide{
          margin-bottom: 0;
          line-height: 1.5;
     }
     #movieShare .bdWrap .nhksns-icon-s img {
          width: 32px;
          vertical-align: middle;
      }
     #movieShare .bdWrap .linkBtn a{
          background-image: url(../img/btn_snscopy_sp.png);
          background-size: contain;
          width:75.78%;
          height:12vw;
          margin:auto;
     }
     #linkBtn{
          padding:20px 0 24px 0;
          width: 92%;
          margin: auto;
     }
     #linkBtn a.cbtn{
          font-size: 3.73vw;
          padding:0.8em 1.8em;


     }
}


.itemList .title{
     border-style: none;
}


@media screen and (min-width: 768px) {
     section.clip .inner,section.kyozai .inner{
          padding-bottom:2.92%;
     }
     .slider{
          /* width:88.86%; */
          margin:auto;
     }
     .slider .itemList,
     .slider .itemMaterial{
          width: 23.475%;
          /* margin:  0 0.7625% ; */
          margin:  0 4px ;

          box-sizing: border-box;
          display: inline-block;
     }
     .slider .slider-navi.next{
          margin-right:0;
      }
      .slider .slider-navi.prev{
          margin-left:0;
      }
      .slider .slider-navi.slick-disabled{
          visibility: hidden;
      }
}

@media screen and (min-width: 1160px) {
     .slider .slider-navi.next{
         margin-right:-5%;
     }
     .slider .slider-navi.prev{
         margin-left:-5%;
     }
     .slider .slider-navi.slick-disabled{
          visibility: visible;
      }
    
 }
@media screen and (max-width: 767px) {
   section.clip .inner,section.kyozai .inner{
        width:92%;margin:auto;
   }
   .slider{
     display: flex;
     flex-wrap: wrap;
     margin-bottom:2.66%;
   }
   section.clip .itemList,section.kyozai .itemMaterial{
     width: 47.82%;
     margin-right: 4.34%;
     box-sizing: border-box;
   }
   section.clip .itemList:nth-child(even),section.kyozai .itemMaterial:nth-child(even){
     margin-right: 0;
   }
   section.clip .itemList.hide{
        display:none;
   }
   .moreBtn{
        border:2px solid #c7e8bf;border-radius:6px;
        width:60%;margin:auto;
     }
   .moreBtn a{
        display: block;line-height:1;font-size:3.73vw;font-weight:bold;text-align:center;padding:1em 0 1em 1em;
        background:url(../img/icon_more.svg) no-repeat 28% center;
        background-size: 7%;
     }
     .moreBtn.hide{
          display: none;
     }
}


/*clip box */

.box{
     margin: auto;padding:0;    
}
.box section.movie{
     padding-bottom: 0;
}
.box #mainContents::after,.clip #mainContents::after,.general #mainContents::after{
     background: none;height: 0;
}

#movieChapter.clipDetail .chapterWrap{
     height: 100%;
}

.clipDetail .text{
     background: #fff;
}
.clipDetail .title{
     margin:0;
}

@media screen and (min-width: 768px) {
     .clipDetail{
          background: #f1f1f1;
     }
     .clipDetail .title{
          background-color: #66af54;
          color: #fff;
          font-weight: bold;
          font-size: 16px;
     }
     .clipDetail .title::before{
          width: 0;
          border-style: none;
          background:none;
     }

     .clipDetail .nerai,
     .clipDetail .naiyo{
          width: 95.4%;
          margin: 2.3% auto 2.3%;
          border-radius: 10px;
          overflow: hidden;
     }
     .clipDetail .nerai>div,
     .clipDetail .naiyo>div{
          padding:3.47% 4.05%;
     }

}

@media screen and (max-width: 767px) {
     .clipDetail .naiyo{
          margin-top:5.33%;
     }
     .clipDetail .text{
          padding:3.2% 0;
          font-size: 3.73vw;
     }
}