@charset "utf-8";
/*schoolトップ*/

/* 全体構造 */
main img{
    width:100%;
    display: block;
}
.webSB{
    font-family: 'Shin Maru Go Bold';
}
.webSM{
    font-family: 'Shin Maru Go Midium';
}
main ruby rt{
    font-size:30%;
}

div.inner::after{
    content: none;
}
main>article h2.noStyle{
    margin: auto;

}
main>article h2.noStyle::after {
    content: none;
}
.clear::after{
    content: '';display: block;
    clear: both;
}

.linkBtn a span{
    background: url(../../common/img/icon_extlink.svg) no-repeat right center;
    background-size: contain;
    padding-right:1.5em;
}
main div.inner .msg.error{
    text-align: center;
    padding:20px 10px;
    font-size: 1.25em;
    font-weight: bold;
    width:100%;
    
}
/* おすすめ、スペシャル用装飾 */
article.decoration{
    position: relative;
    margin:10px 0;
    background:#66af54 url(../img/recommend_bg_pc.png) no-repeat center 40px;
        /* background-size: cover; */

}
article.decoration::before,article.decoration::after{
    content:'';
    display:block;
    position: absolute;
    height:10px;width:100%;
    background: url(../img/recommend_border.png) center top;
}
article.decoration::before{
    top:-10px;
}
article.decoration::after{
    bottom:-10px;
}
.more a span {
    padding-left: 1.2em;
}
.more a span::before{
    background-image:url(../../common/img/icon_moreplus_w.svg);
    background-size: contain;
    background-position: center center;
    width:1.1em;height:1.1em;
    transform: none;

}
.more.close a span::before{
    background-image:url(../../common/img/icon_moreminus_w.svg);

}
/* おすすめ、最近の放送内リンクボタン */
.itemKyouka .pgLinkBtn{

}
.itemKyouka .pgLinkBtn a.cbtn{
    display: inline-block;
    color:#fff;
}
@media screen and (min-width: 768px) {
    div.inner.full{
        max-width:100%
    }
    .linkBtn a{
        font-size:16px;
    }
    .linkBtn a span{
        background-size: 18px;
        background-position: right 2px;
    }
    .more{
        margin:auto;
    }
    .more a{
        width:144px;
        
    }
 
  
   .more a span::before{

       
    
    }
    .itemKyouka .pgLinkBtn a.cbtn{
        font-size:16px;
        padding:12px 30px;
    }
}
@media screen and (max-width: 767px) {
    div.inner.full{
        max-width:100%
    }
    .linkBtn{
        padding:4% 0 10.66%;
    }
    .more a{
        padding-left:2em;
        padding-right:2em;

    }
}


/* mvNavi */
#mvNavi{
    background:#b1daa6;
}
#mvNavi #searchWrap{
    margin:auto;
    border-radius: 30px;
  
}
#mvNavi #searchWrap::after{
    content:'';
    display: block;
    position: absolute;bottom:-40px;
    background:url(../img/mv_searchbtm.png) no-repeat center top;
    background-size: cover;
    height:40px;width:100%;
}
#searchWrap .seachTitle{
    background:#fff;
    border-radius: 30px 30px 0 0;
}
#searchWrap {background: linear-gradient(#6db55b, #5fab4c);}
#searchWrap .fw{
    position: relative;
}
#searchWrap input {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background: none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    box-sizing: content-box;
}
#searchWrap .fw{
    border: 1px solid #c7e8bf;
    background: #fff;
    border-radius: 6px;
}
#searchWrap input[type="text"]{
    box-sizing: border-box;
}
#searchWrap input[type="button"]{
    position: absolute;right:0;top:0;
    background: #66af54 url(../../common/img/icon_searchbtn.svg) no-repeat center center;
    background-size: 60%;
    box-sizing: border-box;
    box-shadow: 0 4px #509c41;
    text-indent: -100px;
    cursor: pointer;
}
#searchWrap .placeHolder{
    display: none;
}
#searchWrap .title{
    color: #fff;
}
#searchWrap .commonSearch .optionMenu {
 width: auto;
 position: static;
}
#searchWrap .commonSearch .optionMenu li > ul.toggleMenu{
    top:auto;
}
/* cat */
/* 動画の種類 */
#searchWrap .cat {
    border-bottom:1px solid #75c465;
}
#searchWrap .cat>div{
    display: inline-block;
    vertical-align: middle;
}
/* cat checkbox*/
#searchWrap .cat input {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background: none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    box-sizing: content-box;
    display:none
}
#searchWrap .cat label {
    position: relative;
    display: block;
    padding: 0 0 0 1.8em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color:#fff;
}
#searchWrap .cat label:before {
    position: absolute;
    content: "";
    display: block;
    top: .05em;
    left: .4em;
    width: .5em;
    height: .65em;
    border-right: 3px solid #ffab51;
    border-bottom: 3px solid #ffab51;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
    z-index: 1;
}
#searchWrap .cat label:after {
    position: absolute;
    content: "";
    display: block;
    top: .05em;
    left: 0;
    width: 1em;
    height: 1em;
    background: #fff;
    border: 2px solid #63ac55;
    border-radius: 4px;
}
#searchWrap .cat input[type=checkbox]:checked+label:before {
    opacity:1
}

/* 教科*/
/* select*/

#searchWrap .gradeWrap .selectMenu {
    /* -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-style: none;
    line-height: 1.1em;
    border-radius: 6px;
    background-image: url(../../common/img/icon_selectdown_w.svg);
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: 90% center;
    background-color: #4d9d3a;
    color: #fff;
    font-weight: bold;
    position: relative;
    width:8em;
    font-size: 14px;
    padding: 12px 3em 12px 12px; */
}
#searchWrap .cat label{
    cursor: pointer;
}
/* 検索ボタン */
#searchWrap .submit .btn a{
    box-sizing: border-box;
    margin:auto;
    display: block;
    text-align: center;
    background: #fff url(../../common/img/icon_searchbtn_g.svg) no-repeat left center;

}
#searchWrap .submit .btn a span::before{
    content: none;
}
/* mvNavi pc*/
@media screen and (min-width: 768px) {

   #mvNavi{
       background:#b1daa6 url(../img/mv_img.jpg) repeat-x center center;
       background-size: 1868px;
       padding-left:0 !important;
       padding-right: 0 !important;
   }
   #mvNavi>section{
        height:456px;
        background: url(../img/mv_decoration.png) no-repeat center center;
        background-size: 2000px;
   }
   #mvNavi>section>.inner{
       padding-top:40px;
       position: relative;
   }
   #mvNavi>section>.inner::before{
    content: '';display: block;
    position: absolute;z-index:0;
    left:0;right: 0;
    margin: auto;
    width:704px;
    height:385px;
    background:url(../img/mv_shadow.png) no-repeat center center;
}
   #searchWrap{
       width:536px;
       height:374px;
       margin-top:40px;
       position: relative;
       /* box-shadow:0px 0px 12px 0 rgba(130,129,127,0.6); */
   }
 
   #searchWrap .seachTitle{
       padding:12px 0 5px;
   }
   #searchWrap .seachTitle img{
        width:69.40%;
        margin:auto;
   }
   #searchWrap .fw{
       width:478px;
       margin:28px auto 20px;
       padding:2px;
       height:48px;

   }
   #searchWrap input[type="text"]{
        padding:0 8px;
        height:46px;
        width:calc(100% - 46px);
     }
    #searchWrap input[type="button"]{
        top:3px;right:3px;
        width:44px;height:42px;
        border-radius:0 4px 4px 0/ 0 4px 4px 0 ;
    }
  
    #searchWrap .gradeWrap {
        width:478px;
        margin:0 auto 20px;
    }
    #searchWrap .gradeWrap>*{
        display: inline-block;
        vertical-align: middle;
        margin-right:4px;

    }
 
    #searchWrap .gradeWrap .optionMenu{
        margin-right:20px;
        width:8em;
    }
    #searchWrap .gradeWrap .optionMenu>li{
        width:100%;
    }
    #searchWrap .cat {
        width:478px;
        margin:0 auto 20px;
        padding-bottom:30px;
        border-bottom:1px solid #75c465;
    }
    #searchWrap .cat>div{
        margin-right:4px;
    }
    #searchWrap .submit .btn a{
        width:145px;
        font-size: 16px;
        background-size:24px;
        background-position: 1.2em center;
        border-radius: 8px;
    }

}




/* mvNavi pc large*/
@media screen and (min-width:1400px) {
    #mvNavi>section{
        background-size:2000px;
    }


}

/* mvNavi sp*/
@media screen and (max-width: 767px) {
    #mvNavi>section{
        padding:5.33% 0 8%;
    }
     #mvNavi>section>.inner{
       padding:0 0 85.91% 0;
       width:92%;

   }
   #mvNavi #searchWrap{
       /* margin:5.33% auto 5.33%; */
       width:100%;
       position: absolute;top:0;
       height:100%;
       border-radius: 20px;

   }
   #mvNavi #searchWrap::after{
       bottom:-8vw;
       height:8vw;
   }
   #searchWrap .commonSearch .optionMenu{
        width:33.33%;
        margin-right: 1em;
   }
   #searchWrap .commonSearch .optionMenu *{
       font-size:3.73vw;
   }
   #searchWrap .commonSearch .optionMenu:last-child{
    margin-right: 0;
   }
   #searchWrap .commonSearch .optionMenu > li {
    width:100%;
   }
   #searchWrap .commonSearch .optionMenu > li strong span{
       display: block;
        padding:4px 10px 4px 0;
        font-weight: bold ;
   }
   #searchWrap .commonSearch .optionMenu li > ul.toggleMenu{
        top:auto;
        left:0;right:0;margin:15px auto 0;
    }
    #searchWrap .commonSearch .optionMenu li.subject > ul.toggleMenu:before{
        left:26%;
    }
    #searchWrap .commonSearch .optionMenu li.grade > ul.toggleMenu:before{
        left:83%;
    }
   #searchWrap .seachTitle{
       border-radius: 20px 20px 0 0;
     padding:2.89% 0 5px;
    }
    #searchWrap .seachTitle img{
        width:69.40%;
        margin:auto;
    }
    #searchWrap .fw{
        width:91.3%;
        margin:5.79% auto 4.34%;
        /* padding:2px;
        height:48px; */

    }
    #searchWrap input[type="text"]{
        padding:3.34% ;
        font-size:3.73vw;
        width:85%;
        
    }
    #searchWrap input[type="button"]{
        top:3px;right:3px;
        width:14.28%;height:80%;
        border-radius:0 4px 4px 0/ 0 4px 4px 0 ;
        background-size: 50%;
    }

    #searchWrap .gradeWrap {
        font-size:3.73vw;
        width:91.3%;
        margin:0 auto 5.79%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    
    #searchWrap .gradeWrap .selectMenu{
        width:26.6vw;
        font-size:3.73vw;
        padding:0.75em 0.5em;
    }
    #searchWrap .cat {
        font-size:3.73vw;
        width:91.3%;
        margin:0 auto 4.76%;
        padding-bottom:6.34%;
        border-bottom:1px solid #75c465;
    }
    #searchWrap .cat>div{
        margin-right:4px;
    }
    #searchWrap .submit .btn a{
        padding:1.2em ;
        width:43.47%;
        background-size: 12%;
        background-position: 2.2em center;
    }

}


/* 人気のキーワード */
/* keywordsNavi */
#keywordsNavi{background:#eef7ec;position: relative;}
#keywordsNavi::before{
    content:'';
    width:32px;height:32px;
    background:#eef7ec;
    position: absolute;left:0;right: 0;
    margin:auto;
    transform: rotate(45deg);
    top:-15px;
}
#keywordsNavi .title{
    font-weight: bold;
    color:#66af54;
}
#keywordsNavi ul{
    display: flex;
    flex-wrap: wrap;
    font-weight: bold;
}
#keywordsNavi ul li{
    border:1px solid #d4ebcf;
    background: #fff;
    border-radius: 4px;

}
#keywordsNavi ul li a{
    display: block;
    color:#616161;
    
}
/* keywordsNavi pc*/
@media screen and (min-width: 768px) {

    #keywordsNavi .title{
        padding-top:2.92%;
        font-size: 20px;
        margin-bottom:12px;
    }
    #keywordsNavi ul{
        padding-bottom:2.92%;
    }
    #keywordsNavi ul li{
        margin:0 6px 12px 0;
    }
    #keywordsNavi ul li a{
        padding:6px 10px;
    }
}
/* keywordsNavi sp*/
@media screen and (max-width: 767px) {
    #keywordsNavi::before{
        width:20px;height:20px;
        top:-6px;
    }
    #keywordsNavi .inner{
        width:92%;
        margin:auto;
       
    }
    #keywordsNavi .title{
        padding-top:6.66%;
        font-size: 4.26vw;
        margin-bottom:2.92%;
    }
    #keywordsNavi ul{
        font-size: 3.73vw;
        padding-bottom:2.92%;
    }
    #keywordsNavi ul li{
        margin:0 1.06% 2.63% 0;
    }
    #keywordsNavi ul li a{
        padding:6px 10px;
    }
}

/* おしらせ */
/* infomation */

#information .title{
    color:#66af54;
}
#information .content{
    background: #f9f9f9;
    border:1px solid #e6e6e6;

    /* overflow-y: scroll;
    box-sizing: border-box; */
}
#information .content .scrollWrap dl{
    border-bottom:2px dotted #d0d0d0;
    line-height: 1.6;
    transition: max-height 1s;
    max-height: 1000px;
}
#information .content .scrollWrap dt{
    color:#66af54;
    font-weight: bold;
}
#information .content .scrollWrap dl.hide{
    /* display: none; */
    overflow: hidden;
    max-height: 0;
    height: 0;
    padding:0;
    border-style: none;
}

#information .content .scrollWrap .bangumi{
    background: #a8a8a8;
    color: #fff;
    border-radius: 3px;
    padding:2px 0.5em;
    margin-right: 0.5em;
}
#information .more{
    text-align: center;
    display: none;
}
#information .more.show{
    display:block;
}
/* infomation pc*/
@media screen and (min-width: 768px) {
    #information .inner{
        width:100%;
        padding:3.906% 0;
    }
    #information .title{
        font-size: 20px;
        margin:0 0 12px 0;

    }
    #information .content{
        padding-bottom:2.92%;
    }
    #information .content .scrollWrap{
        width:93.79%;
        margin:auto;
    }
    #information .content .scrollWrap dl{
        padding:1.96% 0;
        clear: both;
    }
    #information .content .scrollWrap dt{
        width:110px;
        float: left;
    }
    #information .content .scrollWrap dd{
        padding-left:110px;
    }
    #information .more{
        margin-top:2.92%;
    }
}
/* infomation sp*/
@media screen and (max-width: 767px) {
    #information .inner{
        padding:5.33% 0;
        width:92%;
    }
    #information .title{
        font-size: 4.26vw;
        margin-bottom:3.76%;
    }
    #information .content{
        padding-bottom:4.34%;
    }
    #information .content .scrollWrap{
        font-size:3.46vw;
        width:91.3%;
        margin:auto;
    }
    #information .content .scrollWrap dt{
        margin-bottom: 4px;
    }
    #information .content .scrollWrap dl{
        padding:3.47% 0;
    }
    #information .more{
        margin-top:5.33%;
    }
}

/* バナーL */
/* otherBanner */
#otherBanner{
    background: #f1f1f1;
}
#otherBanner .inner{
    display: flex;
    flex-wrap: wrap;
}
#otherBanner .inner>div{width: 100%;}
#otherBanner .banner{
    display: inline-block;
}
#otherBanner a{
    display: block;
}
/* otherBanner pc*/
@media screen and (min-width: 768px) {
    #otherBanner .inner{
        padding:40px 0 20px 0;

    }

    #otherBanner .banner{
        width:23.4375%;
        margin: 0 1.95% 1.95% 0;
    }
    #otherBanner .banner:nth-child(4n){
        margin-right: 0;
    }
    #otherBanner .bannerL{
        width:100%;
        margin: 0 0 1.95% 0;
    }
}
/* otherBanner sp*/
@media screen and (max-width: 767px) {
    #otherBanner .inner{
        padding:2.66% 0;
        width:83.2%;
        margin:auto;

    }

    #otherBanner .banner{
        width:45.99%;
        margin:3.2% 8.01% 3.2% 0;
    }
    #otherBanner .banner:nth-child(2n){
        margin-right: 0;
    }
    #otherBanner .bannerL{
        width:100;
        margin:3.2% 0 3.2% 0;
    }
}


/* teacher */
#teacher{
    background: #fff !important;
}
#teacher::before{
    left:0;right:0;margin:auto;
    background-image: url(../img/teacher_icon_l.svg);
    background-size: cover;
    width:165px;height:50px;
    
}


/* teacher pc*/
@media screen and (min-width: 768px) {
    #teacher{
        padding: 20px 20px 70px 20px;
        margin-bottom: 70px;
        box-sizing: border-box;
        
    }
    #teacher::after{
        border-width: 20px !important;

    }
    #teacher::before{
        top:12px;

    }
    
}
/* teacher sp*/
@media screen and (max-width: 767px) {
    #teacher{
        border-width: 1.866vw !important;
        padding:1.866vw 1.866vw 2.66% ;
        margin-bottom: 9.33%;
        box-sizing: border-box;
    }
    #teacher::after{
        border-width: 1.866vw !important;

    }
    #teacher::before{
        width:22%;
        background-size: contain;
        top:0;
        margin-top:1.2%;
    }
}

/* teacher teacherGuide */
#teacherGuide{
    background: #f1f1f1;
}
#teacherGuide .inner{
    display: flex;
    justify-content: space-between;
}
#teacherGuide .inner>div{
    position: relative;
    background: #66af54;
    box-shadow: 0 6px #509c41;
    font-family: 'Shin Maru Go Bold';

}
#teacherGuide .inner>div a{
    display: block;
    width:100%;
    height: 100%;
    color:#fff;
    text-align: center;
}
#teacherGuide .inner>div.clipRika{
    background:#eb8c38 ;
    box-shadow: 0 6px #da7c31;
}
#teacherGuide .inner>div.clipSyakai{
    background:#3ea66f ;
    box-shadow: 0 6px #3d9667;
}

#teacherGuide .inner>div .grade{
    background-color: #fff;
    border-radius: 12px;
}
#teacherGuide div.clipRika .grade{
    color:#eb8c38 ;
}
#teacherGuide div.clipSyakai .grade{
    color:#3ea66f ;
}

/* teacher teacherGuide pc*/
@media screen and (min-width: 768px) {
    #teacherGuide .inner{
        padding:72px 0 50px 0;
        width:96%;
    }
    #teacherGuide .inner>div{
        width:23.53%;
        border-radius: 10px;
    }
    #teacherGuide .inner>div::after{
        padding-bottom: 60.58%;
    }
    #teacherGuide .inner>div .title{
        font-size:14px;
    }
    #teacherGuide .inner>div .title strong{
        font-size:20px;
    }
    #teacherGuide .inner>div .icon{
        width:26.55%;
        margin:15.76% auto 0;
        padding-bottom: 4px;
    }
    #teacherGuide div.clipRika .title,
    #teacherGuide div.clipSyakai .title{
        width:64.73%;
        margin:auto;
        padding:6.63% 0 0 0;
    }
    #teacherGuide div.clipRika .title img,
    #teacherGuide div.clipSyakai .title img{
        width:97.43%;
        margin: auto;

    }
    #teacherGuide .inner>div .grade{
        padding:2px 0;
        margin:2.07% auto 4.14%;
    }
    #teacherGuide .explan{
        padding-bottom:6.63%;

    }
}

/* teacher teacherGuide sp*/
@media screen and (max-width: 767px) {

    #teacherGuide .inner{
        width:87.5%;margin:auto;
        padding:8.66% 0 0 0;
        flex-wrap: wrap;
    }
    

    #teacherGuide .inner>div a{
        position: absolute;left:0;top:0;

    }
    #teacherGuide .inner>div{
        width:47.61%;
        border-radius: 10px;
        margin-bottom:5.71%;
    }
    #teacherGuide .inner>div::after{
        display: block;content: '';
        width:100%;
        padding-bottom: 65.33%;
    }
    #teacherGuide .inner>div .title{
        font-size:2.93vw;
    }
    #teacherGuide .inner>div .title strong{
        font-size:4.26vw;
    }
    #teacherGuide .inner>div .icon{
        width:34.66%;
        margin:12.66% auto 0;
        padding-bottom: 3.33%;
    }
    #teacherGuide div.clipRika .title,
    #teacherGuide div.clipSyakai .title{
        width:80%;
        margin:auto;
        padding:6.63% 0 0 0;
    }
    #teacherGuide div.clipRika .title img,
    #teacherGuide div.clipSyakai .title img{
        width:87.5%;
        margin: auto;
    }
    #teacherGuide .inner>div .grade{
        padding:2px 0;
        margin:4.16% auto;
        font-size:2.66vw ;
    }
    #teacherGuide .inner>div .explan{
        font-size: 2.4vw;
    }
}

/* 授業活用・実践例 */
/* teacher teacherExample */

/*teacher 幅例外*/
/*1024+borderwidth (20px *2) で考慮*/
@media screen and (min-width: 1064px) {
    #teacherGuide .inner{
        width:100%;
    }
    #teacherExample>.inner{
        width:100%;
       
    }
    /* #teacherExample .slider-navi.next{
        margin-right: -6%;
    }
    #teacherExample .slider-navi.prev{
        margin-left: -6%;
    }  */
    #teacherBanner .inner{
        width:100%;
       
    }  
 
}

#teacherExample h2{
    background: url(../img/icon_note.svg) no-repeat left center;
}
#teacherExample .example {
    position: relative;
}
#teacherExample .example .slider{
white-space: nowrap;
}
#teacherExample .example .slick-track{
    display: flex;
    align-items:stretch;
}
#teacherExample .example .slick-track .slick-slide{
    height:auto;
}
#teacherExample .example .item{
    white-space: normal;
}
#teacherExample .example .item .content a{
    display: block;
    color:inherit;
}

#teacherExample .info dt{
    background-color: #66af54;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-style: italic;
}
#teacherExample .info dd{
    background-color: #eef7ec;
    font-weight: bold;
}
#teacherExample .item{
    border:6px solid #f1f1f1;
}
#teacherExample .item .kyouka{
}
#teacherExample .item .iconKyouka{
    vertical-align: middle;

}
#teacherExample .item .grade{
    color: #a8a8a8;
    
}
#teacherExample .item .person .name span{
    display: block;
    font-weight: bold;
}
#teacherExample .item .detail .type{
    border-left:7px solid #66af54;
    color:#66af54;
    padding-left:7px;
    font-weight: bold;
}
#teacherExample .item .detail .title{
    font-weight: bold;
}
#teacherExample .item .detail .title span{
    display: block;
    font-size: 0.84em;
    line-height: 1.2;
}
#teacherExample .item .movie{
    background:#f5f5f5;
    border-style: none;
}
#teacherExample .item .movie a{
    display: block;
    color:inherit;
}
#teacherExample .item .movie .thumb{
    position: relative;
    padding-bottom: 0;
    border-style: none;
}
#teacherExample .item .movie .thumb img{
    position: relative;
}

/* teacher teacherExample pc*/

@media screen and (min-width: 768px) {
    #teacherExample>.inner{
        width:92%;
        margin:auto;
    }
    #teacherExample>.inner .title{
        padding:5.85% 0 2.92%;
    }
    #teacherExample h2{
        text-align: center;
        margin-bottom: 0;
        background-size: 26px;
        width: 360px;
        font-size: 34px;
        background-size: 34px;
    }
    #teacherExample .info dl{
        display: table;
        min-height: 80px;
        width:100%;
        margin-bottom:2.929%;
        border-radius: 5px;
        overflow: hidden;
    }
    #teacherExample .info dt,#teacherExample .info dd{
        display: table-cell;
        vertical-align: middle;
    }
    #teacherExample .info dt{
        width:124px;
        font-size: 17px;
    }
    #teacherExample .info dd p{
        padding:1em;
        font-size: 20px;
    }


    #teacherExample .example{
        padding-bottom: 5.85%;
    }
    #teacherExample .slider-navi.next{
        margin-right: -4%;
    }
    #teacherExample .slider-navi.prev{
        margin-left: -4%;
    } 
 
    #teacherExample .item{
        width:calc(490/1024 *100%);
        /* display: inline-block; */
        /* padding:calc(26/1024 *100%) 0; */
        /* margin-right: 1.953%; */
        margin: 0 0.78125%;

    }
    #teacherExample .item:nth-child(2n){
        /* margin-right:0; */
    }
    #teacherExample .item .itemTitle{
        width:calc(438/490 *100%);
        margin: 4.08% auto ;
    }
    #teacherExample .item .itemTitle.sukurepo{
        /* width:26%;
        margin: 2.04% 0 2.04% 4.89%; */

    }

    #teacherExample .item .content{
        width:calc(438/490 *100%);
        margin:auto;
        padding-bottom: calc(30/490*100%);
    }
    #teacherExample .item .thumb{
        width:calc(210/438*100%);
        float: left;
    }
    #teacherExample .item .detail{
        width:calc(216/438*100%);
        float: right;
    }
    #teacherExample .item .iconKyouka{
        width:56px;height:20px;
        vertical-align: middle;
        margin-right: 4px;
    }
    #teacherExample .item .detail .grade{
        vertical-align: middle;
        font-size: 13px;
        line-height: 1.2;
        display: inline-block;
    }
    #teacherExample .item .detail .grade.block{
        display:block;
        margin-top:8px;
    }
    #teacherExample .item .detail .title{
        font-size:18px;
    }
    #teacherExample .item .summary{
        clear: both;
        padding-top:4.38%;
        display: -webkit-box;
        -webkit-box-orient: vertical; 
        -webkit-line-clamp: 3; 
        overflow: hidden; 
    }
    #teacherExample .item .person{
        padding-top:10px;

    }
    #teacherExample .item .person .thumb{
        /* width:calc(60/438*100%); */
        width:60px;
    }
    #teacherExample .item .person .name{
        float: right;
        width:calc(100% - 70px);
        /* width:calc(370/438*100%); */
    }
    #teacherExample .item .person .name.noImg{
        float: none;
        width:100%;
        /* width:calc(370/438*100%); */
    }
    #teacherExample .item .person .name span{
        font-size: 1.2em;
    }
    #teacherExample .item .movie{
        width:calc(456/490*100%);
        margin:0 auto 4.08%;
        padding:calc(20/456*100%) 0;
    }

    #teacherExample .item .movie .thumb{
        width:calc(211/456*100%);
        margin-left:calc(20/456*100%);
    }
    #teacherExample .item .movie .detail{
        width:calc(180/456*100%);
        margin-right:calc(20/456*100%);
    }
}

/* teacher teacherExample sp*/
@media screen and (max-width: 767px) {
    #teacherExample>.inner .title{
        padding:8% 0 5.33%;
    }
    #teacherExample h2{
        text-align: center;
        margin-bottom: 0;
        width:64.26%;
        background-size: 8.62%;
        text-align: right;

    }
    #teacherExample .info dl{
      
        width:calc(630/720*100%);
        margin:0 auto 5.33%;
        border-radius: 8px;
        overflow: hidden;
    }
 
    #teacherExample .info dt{
        font-size: 3.6vw;
        padding:0.5em 0;
      
    }
    #teacherExample .info dd p{
        padding:1em;
        font-size: 4.26vw;

    }
    #teacherExample .example{
        width:calc(630/720*100%);
        margin:0 auto 8.69%;
        /* overflow: hidden; */
    }
    #teacherExample .example .slider{
        /* overflow: hidden; */
    }
  
    #teacherExample .slider-navi {
        width:5.33vw;
    }
    #teacherExample .slider-navi.next{
        margin-right:-3.5%;

    }
    #teacherExample .slider-navi.prev{
        margin-left:-3.5%;

    }
    #teacherExample .item{
        /* width:calc(560/630*100%); */
        /* width:calc(630/630*100%); */

        /* display: inline-block; */
        font-size:3.466vw;
        margin:0 4.66vw;
    }

    #teacherExample .item .itemTitle{
        width:calc(480/540 *100%);
        margin:4.58% auto ;
    }
    #teacherExample .item .content{
        width:calc(480/540 *100%);
        margin:auto;
        padding: 0 0 calc(30/480*100%);
    }

    #teacherExample .item .detail{
        margin:4.58% 0;
    }
    #teacherExample .item .kyouka{
        /* border-bottom:2px dotted #cccccc; */
        padding-bottom:3.73%;
    }
    #teacherExample .item .iconKyouka{
        width: 21.11%;
        margin-right:4.16%;
        /* background-position: center left; */
    }
    #teacherExample .item .grade{
        font-size: 3.2vw;

    }
    #teacherExample .item .grade.block{
        display:block;
        margin-top:8px;
    }
    #teacherExample .item .detail .title{
        padding:0;
        font-size:4.26vw;
    }
    #teacherExample .item .summary{
        display: none;
        margin-bottom:3.73%;
    }
    #teacherExample .item .person{
    }
    #teacherExample .item .person .thumb{
        float: left;
        width:calc(60/480*100%);
    }
    #teacherExample .item .person .name{
        float: right;
        width:calc(410/480*100%);
    }
    #teacherExample .item .person .name.noImg{
        float: none;
    }
    #teacherExample .item .movie{
        width:calc(480/540*100%);
        margin:0 auto 5.35%;
        padding:calc(30/540*100%) 0;
    }

    #teacherExample .item .movie .thumb{
        display: none;
        width:calc(430/480*100%);
        margin:0 auto 5.33%;
    }
    #teacherExample .item .movie .detail{
        width:calc(430/480*100%);
        margin:auto;

    }
    #teacherExample .item .movie .detail .type{
        margin-bottom: 2.33%;
    }
    #teacherExample .item .movie .detail .title{
       padding-top:0;

    }
}

/* バナーエリア */
/* teacher teacherBanner */
#teacherBanner .inner{
    display: flex;
    flex-wrap: wrap;
}
#teacherBanner .inner .item span{
    display: block;
    font-weight: bold;
}

/* teacher teacherBanner pc*/
@media screen and (min-width: 768px) {
    #teacherBanner .inner {
        width:92%;
        margin:auto;
    }
    #teacherBanner .inner .item{
        width:23.4375%;
        margin: 0 1.95% 1.95% 0;
    }
    #teacherBanner .inner .item a{
        display: block;
    }
    #teacherBanner .inner .item:nth-child(4n){
        margin-right: 0;
    }
    #teacherBanner .inner .item span{
        font-size: 16px;
        padding:8px 0;
    }
}

/* teacher teacherBanner sp*/
@media screen and (max-width: 767px) {
    #teacherBanner .inner{
        width:90.02%;
        
    }
    #teacherBanner .inner .item{
        width:47.69%;
        margin: 0 4.61% 4.61% 0;
        font-size:3.2vw ;
    }
    #teacherBanner .inner .item:nth-child(2n){
        margin-right: 0;
    }
    #teacherBanner .inner .item span{
        font-size: 4vw;
        padding:0.5em 0;
    }
    #teacherBanner .inner .item p{
        font-size: 3.46vw;

    }

}

/* recommend */
/* NHK for Schoolからのおすすめ！ */
#recommend {
    width: 100%;
}
#recommend h2::after{
    border-style: none;
  
}
#recommend .inner .slick-list{
    overflow: visible;
}
#recommendBanner {
    background: #7fc86d;
    overflow: hidden;
}
#recommendBanner .inner{
    overflow: visible;
   
    max-width: 100%;
}
#recommendBanner .inner::after{
    display: block;content: '';
}
#recommendBanner .inner .slider{
    white-space: nowrap;
    position: absolute;
    width:100%;left:0;top:0;
  
}

#recommendBanner .item{
    border:10px solid #fff;
    box-sizing: border-box;
    display: inline-block;
    background: #fff;

}
#recommendBanner .item a{
    display: block;
}
#recommendBanner .item.slick-slide{
    opacity: 0.3 ;
    transition: opacity 0.3s;

}

#recommendBanner .item.slick-slide.active{
    opacity: 1 !important;
}
#recommendPickup .inner{
   
}
#recommendPickup .slider{
    /* width:100%; */
    /* white-space: nowrap;
    overflow: hidden; */
}
#recommendPickup .item{
    display: inline-block;
    white-space: normal; 
    vertical-align: top;
}
#recommendPickup .item .itemKyouka{
    border-style: none;
    position: relative;
}
#recommendPickup .item .itemKyouka::after{
    content: '';
    display: block;
    position: absolute;
    width:100%;height:100%;
    background:#fafafa;
    z-index:0;

}
#recommendPickup .item .itemKyouka .thumb{
    border-style: none;

}
#recommendPickup .item .themeTitle{
    background: #cff6c3;font-weight: bold;
    color:#66af54;
    text-align: center;
    position: relative;
}
#recommendPickup .item .themeTitle::before{
    content:'';display: block;
    position: absolute;
}
#recommendPickup .item .themeTitle::after{
    content:'';display: block;
    position: absolute;
    bottom:-8px;left:0;right:0;margin:auto;
    width: 0;
    height: 0;
    border-top: 10px solid #cff6c3;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}

/* recommend pc*/


@media screen and (min-width: 768px) {
    #recommend {
        padding-left:0;
		padding-right:0;
    }
    #recommend h2{
        width:592px;
        margin:auto;
        padding:80px 0;
    }
    #recommend .slider .slider-navi.next{
        margin-right:0;
    }
    #recommend .slider .slider-navi.prev{
        margin-left:0;
    }
    #recommend .slider .slider-navi.slick-disabled{
        visibility: hidden;
    }
    #recommendBanner .inner{
        width:100%;
        max-width:1024px;
    }
    #recommendBanner .inner::after{
        padding-bottom: 36.13%;
    }
    #recommendBanner .inner .slider{
        margin-top:3.906%;
        /* margin-left:-25%; */
    }
    #recommendBanner .item{
        width:48.828%;
        border-width: 10px;
        margin: 0 10px;
        /* max-height:290px ; */

    }
    #recommendPickup{
    }
    #recommendPickup .slider{
        padding:4.88% 0;
    }
 
    #recommendPickup .inner .slick-list{
        overflow: hidden;
    }
    #recommendPickup .item{
        width:31.38%;
        margin:0 0.97%;
        padding-top:20px;
    }
    #recommendPickup .item .themeTitle{
        font-size: 18px;
        border-radius: 6px;
        padding:10px 0;
        margin-bottom:5.6%;
    }
    #recommendPickup .item .themeTitle::before{
        width:63.39%;height:150%;
        left:0;top:0;right:0;
        margin:-6.3% auto 0;
        background:url(../img/recommend_pickup_pc.png) no-repeat center top;
        background-size: contain;
    }
    #recommendPickup .item .itemKyouka .kyouka{
        margin-bottom:3.31%;

    }
    #recommendPickup .item .itemKyouka .pgTitle{
        padding-bottom:1.33%;

    }
    #recommendPickup .item .itemKyouka .title{
        padding-bottom:12px;
    }
    #recommendPickup .item .itemKyouka .pgLinkBtn{
        width: 86.666%;
        margin: auto;
        padding-bottom: 16px;
    }
}
@media screen and (min-width: 1160px) {
    #recommend .slider .slider-navi.next{
        
        margin-right:-5%;
    }
    #recommend .slider .slider-navi.prev{
        margin-left:-5%;
    }
    #recommend .slider .slider-navi.slick-disabled{
        visibility: visible;
    }
}
/* recommend sp*/
@media screen and (max-width: 767px) {
    #recommend h2{
        width:82.66%;
        margin:auto;
        padding:8% 0;
    }
    #recommend .slider .slider-navi{
        width:5.33vw; height:5.33vw;
    }
    #recommend .slider .slider-navi.next{
        margin-right:-15%;
    }
    #recommend .slider .slider-navi.prev{
        margin-left:-15%;
    }
    #recommendBanner .inner{
        width:66.44%;
        /* padding:0 16.66%; */
        /* overflow: hidden; */
    }
    #recommendBanner .inner::after{
        padding-bottom: 72%;
    }
    #recommendBanner .inner .slider{
        margin-top:8%;
    }
    #recommendBanner .item{
        box-sizing: border-box;
         /* width:66.44%; */
        border-width: 1.33vw;
        margin:0 1.33vw;
    }
    #recommendPickup{
        overflow: hidden;
        width:100%;
    }
    #recommendPickup .inner{
        width:93.33%;
        margin:0;
        overflow: visible;
        /* padding-left:2.666%; */

    }
    #recommendPickup .slider{
        padding:8% 0;
    }
    #recommendPickup .inner .slick-track{
         overflow-y: hidden;
        /*overflow-x: visible; */

    }
    #recommendPickup .slider-navi{
        display: none !important;
    }
    #recommendPickup .item{
        width:47.57%;
        margin-left:1.333%;
        padding-top:2%;

    }
 
    #recommendPickup .item .themeTitle{
        font-size: 3.46vw;
        padding:6.06% 0 2.66%;
        border-radius: 8px;
        margin-bottom:6.06% ;
    }
    #recommendPickup .item .themeTitle::before{
        width:75.75%;height:100%;
        left:0;right:0;top:0;margin: -7% auto 0;
        background:url(../img/recommend_pickup_sp.png) no-repeat center top;
        background-size: contain;
    }
    /* #recommendPickup .item .itemKyouka .icon{
        width: 27.58%;
    } */
    #recommendPickup .item .itemKyouka .detail{
        width:87.87%;
    }
    #recommendPickup .item .itemKyouka .title{
        /* padding-bottom:12px; */
    }
    #recommendPickup .item .itemKyouka .pgLinkBtn{
        width:87.87%;
        margin: auto;
        position: relative;
        z-index: 1;
        padding-top: 2%;
        text-align: center;
        /* padding-bottom: 16px; */
    }
    #recommendPickup .item .itemKyouka .pgLinkBtn a.cbtn{
        display: block;
        font-size: 3.2vw;
    }
}

/* newsEasy */

#newsEasy h2{
    display: inline-block;
    background: url(../../common/img/icon_eye.svg) no-repeat left center;
}
#newsEasy .inner{
   
}

#newsEasy .item {
    font-weight: bold;
    display: block;
}
#newsEasy .item .date{
    color:#66af54;
}
#newsEasy .item .summary{
    color: #4b4b4b;
}
#newsEasy .item .thumb img{
    height:auto;
}
/* newsEasy pc*/
@media screen and (min-width: 768px) {
    #newsEasy section{
        padding-bottom: 80px;
    }
    #newsEasy h2{
        margin:80px auto 20px;
        width:610px;
        background-size: 80px;
        padding-left:86px;
        box-sizing: border-box;
        font-size: 34px;
    }
    #newsEasy .logo{
        margin:0 auto 30px ;
        width:276px;
    }
    #newsEasy .inner{
        border-top:2px dotted #d0d0d0;
        display: flex;
        flex-wrap: nowrap;
        padding:30px 0 0 0;
        margin-bottom: 40px;
        
    }
    #newsEasy .item{
        width:32.03%;
        margin-right: 1.953%;
        background:#f7f7f7;
        border-left:1px solid #e6e6e6;
        border-right:1px solid #e6e6e6;
        border-bottom:1px solid #e6e6e6;
    }
    #newsEasy .item:nth-child(3n){
        margin-right: 0;
    }
    #newsEasy .item .detail{
        

    }
    #newsEasy .item .date{
        padding:18px 0 0 18px;
    }
    #newsEasy .item .summary{
        font-size:18px ;
        padding:18px;
    }
    #newsEasy .linkBtn a{
        width:370px;
    }

}

/* newsEasy sp*/
@media screen and (max-width: 767px) {
    #newsEasy h2{
        font-size: 7.6vw;
        margin:9.33% auto 3.2%;
        text-indent: 2em;
        background-size:20%;
        background-position:17% 14% ;
    }
    #newsEasy .logo{
        margin:0 auto 8% ;
        width:49.33%;
    }
    #newsEasy .inner{
        width: 92%;
        margin:auto;
       
    }
    #newsEasy .item{
        border-top:2px dotted #d0d0d0;
        padding:4% 0;
    }
    #newsEasy .item::after{
        content: '';display: block;
        
        clear: both;
    }
    #newsEasy .item .thumb{
        float: left;
        width:30.43%;
    }
    #newsEasy .item .detail{
        float: right;
        width:65.21%;
    }
    #newsEasy .item .date{
        font-size: 3.2vw;
        margin-bottom: 4%;
    }
    #newsEasy .item .summary{
        font-size: 4.53vw;
    }
  
   
}


/* onair */
/* 最近の放送 */

#onair{
    background-color:#eef7ec;
    background-image: url(../img/onair_bg.svg);
    background-repeat: no-repeat;
}

#onair section .itemWrap .itemKyouka{
    border-style: none;
}
#onair section .itemWrap .itemKyouka .thumb{
    border-style: none;

}
#onair section .itemWrap .itemKyouka .summary{
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2; 
    overflow: hidden; 
}

@media screen and (min-width: 768px) {
    #onair{
        background-position: 50% 50px;
    }
    #onair section{
        padding-bottom: 80px;
    }
    #onair h2{
        padding-top:60px;
        font-size: 34px;
    }
    #onair section .itemWrap{
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        /* align-items: flex-start;
        align-content : flex-start; */
    }
    /*#onair section .itemWrap::after{
        content:'';display: block;
        clear: both;
    }
     #onair section .itemWrap .itemKyouka{
        width:23.53%;
        margin:0 1.95% 1.95% 50.976% ;
        float:left;
    }
    #onair .itemKyouka .detail .kyouka {
     margin-bottom:10px;
    }
    #onair .itemKyouka .detail .grade {
        padding:10px;

    }
    #onair section .itemWrap .itemKyouka:first-child{
        width: 49.023%;
        height:100%;
        position: absolute;
        margin:0;
        
    }
    #onair section .itemWrap .itemKyouka:nth-child(3),
    #onair section .itemWrap .itemKyouka:nth-child(5){
        margin:0;

    }
    #onair section .itemWrap .itemKyouka:nth-child(4){
        margin-bottom:0;

    }
    #onair section .itemWrap .itemKyouka:first-child .detail{
        padding-top:10px;
    }
    #onair section .itemWrap .itemKyouka:first-child .pgTitle{
        padding-bottom:1.8%;
    }
    #onair section .itemWrap .itemKyouka:first-child .title{
        padding-bottom:3.833%;
    }
    #onair section .itemWrap .itemKyouka:first-child .summary{
        font-size: 16px;
    } */

 
    #onair .itemKyouka .detail .kyouka {
        margin-bottom:10px;
    }
    #onair .itemKyouka .detail .grade {
        padding:10px;

    }
    #onair section .itemWrap .itemKyouka{
        width: 49.023%;margin:0;
        padding-bottom:2.7%;
    }

    #onair section .itemWrap .itemKyouka:nth-child(2){
        margin-left:1.95%;
    }
    #onair section .itemWrap .itemKyouka .detail{
        width:88.84%;
        padding-top:10px;
    }
    #onair section .itemWrap .itemKyouka .pgTitle{
        padding-bottom:1.8%;
    }
    #onair section .itemWrap .itemKyouka .title{
        padding-bottom:3.18%;
    }
    #onair section .itemWrap .itemKyouka .summary{
        font-size: 16px;
    }

    #onair .itemWrap .itemKyouka .detail{
        padding-bottom:3.98%;
    }
    #onair .itemWrap .itemKyouka .pgLinkBtn{
        width:88.84%;
        margin: auto;
    }

    #onair .linkBtn{
        padding-top:40px;
    }
}
@media screen and (max-width: 767px) {
    #onair {
        background-size: 92%;
        background-position: center 10.66vw;
    }
    #onair section>.inner{
        width:92%;
        margin:auto;
    }
    #onair h2{
        padding-top: 10.66%;
    }

    #onair section .itemWrap .itemKyouka{
        margin-right: 4.34%;
    }
    #onair section .itemWrap .itemKyouka{
        width: 100%;
        margin-right: 0;
    }
    /* #onair section .itemWrap .itemKyouka:nth-child(2n+1){
        margin-right: 0;
    } */

    #onair section .itemWrap .itemKyouka .detail{
        width:91.3%;
        padding-bottom:3%;
    }
    #onair section .itemWrap .itemKyouka .thumb .time{
        width:12.12%;
        padding-top:9%;
    }
    #onair section .itemWrap .itemKyouka .thumb .cat{
        width:12.26%;
    }
    #onair section .itemWrap .itemKyouka .kyouka {
        margin-bottom: 3%;
        padding: 3% 0;
    }
    #onair section .itemWrap .itemKyouka .icon{
        vertical-align: middle;
        margin-right:3.17%;

    }
    #onair section .itemWrap .itemKyouka .grade{
        display: inline-block;
        vertical-align: middle;

    }
    #onair section .itemWrap .itemKyouka .pgTitle{
        /* padding-bottom:1.8%; */
    }
    #onair section .itemWrap .itemKyouka .title{
        /* padding-top:3.833%; */
                padding-bottom:1.8%;

    }
    #onair section .itemWrap .itemKyouka .summary{
        font-size: 3.46vw;
    }
    
    #onair .itemWrap .itemKyouka .pgLinkBtn{
        width:91.3%;
        margin: auto;
    }

    #onair .itemWrap .itemKyouka .pgLinkBtn a.cbtn{
        font-size: 3.2vw;
    }
}

/* special */
/* スペシャルコンテンツ */
#special h2{
    color:#fff;

}
#special .banner a{
    display: block;
}
#special .inner {
    display: flex;
    flex-wrap: wrap;
}
#special .more a{
    box-sizing: border-box;

}
#special .more a span{
    padding-left:1em;
}
#special .more a span::before{
    transform: rotate(270deg);
    width:1em;height:1em;
    background-size: 70%;

}

@media screen and (min-width: 768px) {
    #special{
        padding-left:0;
		padding-right:0;
    }

    #special section{
        padding-bottom: 60px;
    }
    #special h2{
        font-size: 34px;
        padding-top:60px;
    }
    #special .inner{
        padding:40px 0 20px 0;
        margin:auto;
    }
    #special .banner{
        width:23.4375%;
        margin: 0 1.95% 1.95% 0;
    }
    #special .banner:nth-child(4n){
        margin-right: 0;
    }
     #special .more{
        margin:auto;
    }
    #special .more a{
        width:176px;
        font-size: 16px;
    } 

}
@media screen and (min-width: 1024px) {
    #special .inner{
        padding-left:0;
		padding-right:0;
    }
}
@media screen and (max-width: 767px) {
    #special section{
        padding-bottom: 10.66%;
    }
    #special h2{
        padding-top:8%;
    }
    #special .inner{
        padding:2.66% 0 8%;
        width:92%;
        margin:auto;

    }
    #special .banner{
        width:47.82%;
        margin:4.34% 4.34% 0 0;
    }
    #special .banner:nth-child(2n){
        margin-right: 0;
    }
    /* #special .more{
        width:176px;
    }
    #special .more a{
        font-size: 3.2vw;
        padding:0.8em 2em 0.8em 2em;
    } */
    #special .more a span::before{
        width:1em;height:1em;
        background-size: 80%;
    }
}

/* よく見みられている動画 */
/* ranking */
#ranking{
    padding:80px 0;
    background-image: url(../img/ranking_bg.svg);
    background-repeat: no-repeat;
}
#ranking h2{
  
}
#ranking .more{
    margin:auto;
}
#ranking .more a.disabled{
    opacity: 0.5;
    cursor: default;
}
#rankingTable{

}
#rankingTable td{
    vertical-align: top;
}
#rankingTable .itemKyouka{
    border: none;
    background: none;
}
#rankingTable .itemKyouka .thumb{
    border-style: none;

}
#rankingTable .itemKyouka .title{
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2; 
    overflow: hidden;
    padding-bottom:0;
}
#rankingTable .itemKyouka .thumb::before{
    content:'';display: block;position: absolute;left:0;top:0; z-index:1;
    background-repeat: no-repeat;
    background-position: left top;
    margin:2px ;
    background-size: contain;
    width:17.25%;height:50%;
}
#rankingTable .rank1 .itemKyouka .thumb::before{
    background-image:url(../img/icon_rank1.png) ;
}
#rankingTable .rank2 .itemKyouka .thumb::before{
    background-image:url(../img/icon_rank2.png) ;
}
#rankingTable .rank3 .itemKyouka .thumb::before{
    background-image:url(../img/icon_rank3.png) ;
}
#rankingTable td .itemKyouka .detail{
    width:100%;
}
#rankingTable td .itemKyouka .detail .kyouka{
    margin-bottom:4.16%;
    border-bottom:2px dotted rgba(0,0,0,0.1);
}
#rankingTable tr.hide{
    display: none;
}
@media screen and (min-width: 768px) {
    #ranking{
        background-position: 56% 74px;
    }
    #ranking h2{
        font-size: 34px;

    }
   
    #ranking .slider-navi.next{
        
        margin-right:0;
    }
    #ranking .slider-navi.prev{
        margin-left:0;
    }
    #ranking .slider-navi.slick-disabled{
        visibility: hidden;
    }
    .tableWrap{
        width:100%;
        overflow-x: hidden;
        margin-bottom:3.90%;
    }
    /* (1+教科数) * /(100/表示数4)  */
    #rankingTable,#rankingHead{
        width:425%;
        transition: margin 0.5s;
        
    }
    /* (100/教科数) */
    #rankingTable td,#rankingHead th{
        width:5.88%;
    }
    #rankingTable td .itemKyouka .detail {
        padding-bottom:8.33%;
    }
    #ranking table tr>*.all{
        background: #eef7ec;
    }
    #ranking table tr>*.rika{
        background: #fff3d7;
    }
    #ranking table tr>*.syakai{
        background: #ddf5e8;
    }
    #ranking table tr>*.kokugo{
        background: #f8e6e7;
    }
    #ranking table tr>*.sansuu{
        background: #edf9ff;
    }
    #ranking table tr>*.seikatsu{
        background: #ffebe8;
    }
    #ranking table tr>*.doutoku{
        background: #f5edda;
    }
    #ranking table tr>*.ongaku{
        background: #f6ebd9;
    }
    #ranking table tr>*.taiiku{
        background: #f3effa;
    }
    #ranking table tr>*.zukou{
        background: #fdfbe3;
    }
    #ranking table tr>*.gijutsu{
        background: #f1fbff;
    }
    #ranking table tr>*.katei{
        background: #fff1f7;
    }
    #ranking table tr>*.sougou{
        background: #ecefff;
    }
    
    #ranking table tr>*.eigo{
        background: #f5e7fa;
    }
    #ranking table tr>*.tokkatsu{
        background: #e8fdfa;
    }
    #ranking table tr>*.tokushi{
        background: #ffe7ff;
    }
    #ranking table tr>*.other{
        background: #f1f1f1;
    }

    #rankingHead thead th .bg{
        margin:auto;
        text-align: center;
        color: #fff;
        position: relative;

    }
    #rankingHead thead .bg::after{
        content:'';display: block;
        position: absolute;left:0;right:0;margin:auto;
        border-top: 8px solid transparent;
        border-left: 8px solid transparent;
        border-bottom-width: 8px;
        border-bottom-style: solid;
        border-right-width: 8px;
        border-right-style: solid;
        bottom:-6px;

        width:0;height:0;
        transform: rotate(45deg);
    }
    #rankingHead thead .all .bg{
        background: #fff;
        box-sizing: border-box;
        border:3px solid #66af54;
        color: #66af54;
    }

    #rankingHead thead .all .bg::after{
        background:#fff;
        width:12px;height:12px;
        border-top:3px solid #fff;
        border-left:3px solid #fff;

        border-bottom-color: #66af54;
        border-bottom-width: 3px;
        border-right-color: #66af54;
        border-right-width: 3px;
        bottom:-9px;

    }
    #rankingHead thead .rika .bg{
        background: #eb8c38;
    }
    #rankingHead thead .rika .bg::after{
        border-bottom-color: #eb8c38;
        border-right-color: #eb8c38;
    }
    #rankingHead thead .syakai .bg{
        background: #3ea66f;
    }
    #rankingHead thead .syakai .bg::after{
        border-bottom-color: #3ea66f;
        border-right-color: #3ea66f;
    }
    #rankingHead thead .kokugo .bg{
        background: #e54d58;
    }
    #rankingHead thead .kokugo .bg::after{
        border-bottom-color: #e54d58;
        border-right-color: #e54d58;
    }
    #rankingHead thead .sansuu .bg{
        background: #42a0d1;
    }
    #rankingHead thead .sansuu .bg::after{
        border-bottom-color: #42a0d1;
        border-right-color: #42a0d1;
    }
    #rankingHead thead .seikatsu .bg{
        background: #f66955;
    }
    #rankingHead thead .seikatsu .bg::after{
        border-bottom-color: #f66955;
        border-right-color: #f66955;
    }
    #rankingHead thead .doutoku .bg{
        background: #e0a721;
    }
    #rankingHead thead .doutoku .bg::after{
        border-bottom-color: #e0a721;
        border-right-color: #e0a721;
    }
    #rankingHead thead .ongaku .bg{
        background: #b8893a;
    }
    #rankingHead thead .ongaku .bg::after{
        border-bottom-color: #b8893a;
        border-right-color: #b8893a;
    }
    #rankingHead thead .taiiku .bg{
        background: #8b61d8;
    }
    #rankingHead thead .taiiku .bg::after{
        border-bottom-color: #8b61d8;
        border-right-color: #8b61d8;
    }
    #rankingHead thead .zukou .bg{
        background: #afa63c;
    }
    #rankingHead thead .zukou .bg::after{
        border-bottom-color: #afa63c;
        border-right-color: #afa63c;
    }
    #rankingHead thead .gijutsu .bg{
        background: #5da5c5;
    }
    #rankingHead thead .gijutsu .bg::after{
        border-bottom-color: #5da5c5;
        border-right-color: #5da5c5;
    }
    #rankingHead thead .katei .bg{
        background: #e15192;
    }
    #rankingHead thead .katei .bg::after{
        border-bottom-color: #e15192;
        border-right-color: #e15192;
    }
    #rankingHead thead .sougou .bg{
        background: #5e75db;
    }
    #rankingHead thead .sougou .bg::after{
        border-bottom-color: #5e75db;
        border-right-color: #5e75db;
    }
    #rankingHead thead .eigo .bg{
        background: #b03cda;
    }
    #rankingHead thead .eigo .bg::after{
        border-bottom-color: #b03cda;
        border-right-color: #b03cda;
    }
    #rankingHead thead .tokkatsu .bg{
        background: #3ab4a4;
    }
    #rankingHead thead .tokkatsu .bg::after{
        border-bottom-color: #3ab4a4;
        border-right-color: #3ab4a4;
    }
    #rankingHead thead .tokushi .bg{
        background: #ce43d0;
    }
    #rankingHead thead .tokushi .bg::after{
        border-bottom-color: #ce43d0;
        border-right-color: #ce43d0;
    }
    #rankingHead thead .other .bg{
        background: #7b7b7b;
    }
    #rankingHead thead .other .bg::after{
        border-bottom-color: #7b7b7b;
        border-right-color: #7b7b7b;
    }
    #rankingHead thead th .icon{
        display: inline-block;
        vertical-align: middle;
    }
    #rankingHead thead th span{
        display: inline-block;
        vertical-align: middle;
    }
    #rankingHead thead th{
        padding: 15px 0;
    }
    #rankingHead thead th .bg{
        margin:auto;
        width:80.84%;
        text-align: center;
        border-radius: 4px;
        padding:5px 0;
        font-size: 18px;
    }
    #rankingHead thead th .icon{
        width:17.06%;
        vertical-align: middle;
        margin-right:4px;
    }

    #rankingTable td .itemKyouka{
        width:80.84%;
        margin: 0 auto 0;
    }

    
}
@media screen and (min-width: 1160px) {
    #ranking .slider-navi.next{
        margin-right:-6%;

        
    }
    #ranking .slider-navi.prev{
        margin-left:-6%;
    }
    #ranking .slider-navi.slick-disabled{
        visibility: visible;
    }
}
@media screen and (max-width: 767px) {
    #ranking{
        padding:8% 0;
        background-size: 92%;
        background-position: center 11.2vw;
    }
    #ranking h2{
        text-shadow:4px 4px 0 #fff ;
    }
    .tableWrap{

        margin-bottom:5.33%;
    }
    #ranking .head {
        background: #dbdbdb;
        padding-top:2.66%;
        overflow-x: auto;
        overflow-y: hidden;
        position: relative;
        width:100vw;
        margin-bottom:8%;
        -webkit-overflow-scrolling: touch;

    }
    .head #rankingHead{
        margin-left:0 !important;
    }
    .head #rankingHead thead {
        display: block;

    }
    .head #rankingHead thead tr::after{
        content: '';
        display: block;
        width:100%;
        height:0;
        position: absolute;left:0;bottom:0;
        border-bottom-width: 7px;
        border-bottom-style: solid;
        border-bottom-color:#999;

    }
    .head #rankingHead.all thead tr::after{
        border-bottom-color:#66af54;
    }
    .head #rankingHead.rika thead tr::after{
        border-bottom-color:#eb8c38;
    }
    .head #rankingHead.syakai thead tr::after{
        border-bottom-color:#3ea66f;
    }
    .head #rankingHead.kokugo thead tr::after{
        border-bottom-color:#e54d58;
    }
    .head #rankingHead.sansuu thead tr::after{
        border-bottom-color:#42a0d1;
    }
    .head #rankingHead.seikatsu thead tr::after{
        border-bottom-color:#f66955;
    }
    .head #rankingHead.doutoku thead tr::after{
        border-bottom-color:#e0a721;
    }
    .head #rankingHead.ongaku thead tr::after{
        border-bottom-color:#b8893a;
    }
    .head #rankingHead.taiiku thead tr::after{
        border-bottom-color:#8b61d8;
    }
    .head #rankingHead.zukou thead tr::after{
        border-bottom-color:#afa63c;
    }
    .head #rankingHead.gijutsu thead tr::after{
        border-bottom-color:#5da5c5;
    }
    .head #rankingHead.katei thead tr::after{
        border-bottom-color:#e15192;
    }
    .head #rankingHead.sougou thead tr::after{
        border-bottom-color:#5e75db;
    }
    .head #rankingHead.eigo thead tr::after{
        border-bottom-color:#b03cda;
    }
    .head #rankingHead.tokkatsu thead tr::after{
        border-bottom-color:#3ab4a4;
    }
    .head #rankingHead.tokushi thead tr::after{
        border-bottom-color:#ce43d0;
    }
    .head #rankingHead.other thead tr::after{
        border-bottom-color:#7b7b7b;
    }
   
    .head th#hd_all.active{
        color:#66af54;
    }
    .head th#hd_rika.active{
        color:#eb8c38;
    }
    .head th#hd_syakai.active{
        color:#3ea66f;
    }
    .head th#hd_kokugo.active{
        color:#e54d58;
    }
    .head th#hd_sansuu.active{
        color:#42a0d1;
    }
    .head th#hd_seikatsu.active{
        color:#f66955;
    }
    .head th#hd_doutoku.active{
        color:#e0a721;
    }
    .head th#hd_ongaku.active{
        color:#b8893a;
    }
    .head th#hd_taiiku.active{
        color:#8b61d8;
    }
    .head th#hd_zukou.active{
        color:#afa63c;
    }
    .head th#hd_gijutsu.active{
        color:#5da5c5;
    }
    .head th#hd_katei.active{
        color:#e15192;
    }
    .head th#hd_sougou.active{
        color:#5e75db;
    }
    .head th#hd_eigo.active{
        color:#b03cda;
    }
    .head th#hd_tokkatsu.active{
        color:#3ab4a4;
    }
    .head th#hd_tokushi.active{
        color:#ce43d0;
    }
    .head th#hd_other.active{
        color:#7b7b7b;
    }

    #rankingHead thead tr{
        white-space: nowrap;
        display: block;
        position: relative;
    }

    #rankingHead thead .icon{
        display: none;
        
    }
    
    #rankingHead thead th{
        display: inline-block;
        width:22.8vw;
        text-align: center;
        font-size:4.26vw ;
        background:#eaeaea;
        border-radius: 8px 8px 0 0;
        margin-left:1.33vw;
        padding:0.7em 0 1em;
        color:#a9a9a9;
    }

    #rankingHead thead th.active{
        background:#fff;
        position: relative;
        z-index:1;
        color: inherit;

    }
    #rankingHead thead th.active::after{
        content:'';display: block;
        position: absolute;
        left:0;bottom: -10px;
        width:100%;height:10px;
        border-bottom:10px solid #fff;
        z-index: 2;

    }
    #ranking .body {
        background: #dbdbdb;
        overflow-x: scroll;
        overflow-y: hidden;
        position: relative;
        width:100vw;
        overflow-scrolling: auto;


    }
    #ranking .body.mov {
        overflow-x: scroll;
    }
    #ranking .body.noSc {
        overflow-x: hidden;

    }
   
    #ranking .slider-navi{
        display: none;
    }
    #rankingTable{
        width:1700%;
        background-color: #fff;
        margin-left:0 !important;

    }
    #rankingTable tbody{
        overflow-x: auto;
    }

 

    #rankingTable td{
        width:5.88%;
        
    }
    #rankingTable td .itemKyouka{
        width:92%;
        margin: 0 auto 0;
        padding-bottom:5.79%;
    }
    #rankingTable td .itemKyouka a{
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: space-between;
    }
    #rankingTable td .itemKyouka .thumb{
        width:47.82%;
        padding-bottom: 26.81%;
    }
    #rankingTable td .itemKyouka .detail{
        width:47.82%;
        margin:0;


    }
    #rankingTable td .itemKyouka .detail .kyouka{
        padding:0 0 4.16%;
    }
    #rankingTable td .itemKyouka .detail .kyouka .icon{
        width:13.5vw;
        height:4.8vw;
    }
    #rankingTable .itemKyouka .thumb::before{
        width:22.42%;
    }
}

/* アプリケーション紹介 */
/* appGuide */
#appGuide{
    background:none;
    border-bottom: 4px solid #f4f4f4;
}
#appGuide::after{
    content: none;
}
#appGuide h2::after{
    content: none;
}
#appGuide .banner a{
    display: block;
}
@media screen and (min-width: 768px) {
    #appGuide{
        padding-left:0;
        padding-right:0;
    }
    #appGuide h2{
        width:514px;
        margin:auto;
        padding:74px 0 40px 0;
        
    }

    #appGuide section>.inner{
        margin: auto;
        display: flex;
        justify-content: space-between;
        padding-bottom:80px;
        padding-left:10px;
        padding-right:10px;
    }

    #appGuide .banner{
        width:49.02%;
    }
}
@media screen and (max-width: 767px) {
    #appGuide h2{
        margin: auto;
        width:92%;
        padding:7.2% 0;
    }
    #appGuide section>.inner{
        margin: auto;
        width:92%;
        padding-bottom:7.2%;
    }
    #appGuide .banner{
       margin-bottom:5.33%;
    }
    #appGuide .banner:last-child{
        margin-bottom:0;
     }
}

/* 下部バナー郡 */
/* smallBanner */
#smallBanner{
    background: #f1f1f1;
}
#smallBanner section .inner{
    display: flex;
    flex-wrap: wrap;
}
#smallBanner .banner a{
    display: block;
}

@media screen and (min-width: 768px) {
    #smallBanner section .inner{
        max-width:710px;
        padding:40px 0;
    }
    #smallBanner .banner{
        width:23.94%;
        margin:0 1.4% 1.4% 0;
    }
    #smallBanner .banner:nth-child(4n){
        margin-right:0;
    }
}
@media screen and (max-width: 767px) {
    #smallBanner section .inner{
        width:92%;
        padding:4% 0;
    }
    #smallBanner .banner{
        width:30.43%;
        margin:0 4.34% 4.34% 0;
    }
    #smallBanner .banner:nth-child(3n){
        margin-right:0;
    }
}


.breakBanner{

}
.breakBanner .bd p{
    color: #65b054;
    font-weight: bold;
    font-style :italic;

}
@media screen and (min-width: 768px) {
    .breakBanner .inner{
        padding:3.9% 0;
        display: flex;
        align-items: center;
        justify-content: center;

    }
    .breakBanner .bd{
        border:3px solid #e8e8e8;
        width:21.48%;
        min-width: 190px;
        border-radius: 14px;
        text-align: center;
        padding:1.95% 0;
        margin-right:3.9%;
        position: relative;
    }
    .breakBanner .bd::after{
        display: block;
        content: '';
        position: absolute;
        background: #fff;
        right:0;top:0;bottom:0;margin:auto;
        width:18px;
        height:18px;
        border-top: 3px solid transparent;
        border-left: 3px solid transparent;
        border-bottom: 3px solid #e8e8e8;
        border-right: 3px solid #e8e8e8;
        margin-right:-12px;
        transform: rotate(-45deg);
    }
    .breakBanner .bd p{
        font-size: 16px;
        margin-bottom:6.36%;
    }
    .breakBanner .bd a{
        box-sizing: border-box;
        padding:6px 2em;
        width:79%;
    }
    .breakBanner .img{
        width:49.41%;

    }
}

@media screen and (max-width: 767px) {
    .breakBanner {
        padding:6.13% 0;
    }
    .breakBanner .inner{
        border:4px solid #e8e8e8;
        width:80%;
        padding:5.33% 0;
        border-radius: 16px;
    }
    .breakBanner .bd p{
        text-align: center;
        font-size:3.73vw;
        margin-bottom:4%;
    }

    .breakBanner .bd .btn{
        width:35%;
        position: absolute;
        right: 0;bottom: 0;
        margin:0 5% 8% 0;
    }
    .breakBanner .bd a{
        box-sizing: border-box;
        width:100%;
        padding:4.27% 14.28%;
    }
    .breakBanner .img{
        width:48.33%;
        margin-left:6.66%;
    }
}