/* story
##################################### */

#story .btn_hover{
    width: 240px;
    box-sizing: border-box;
}
#story .m_font_gp{
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
}
.list_story {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.list_story li{
    position: relative;
}
.list_story li .number{
    position: absolute;
    z-index: 10;
}
.list_story li .number:before{
    content: '';
    background: url(../img/story/ico_nobg.png) no-repeat;
    background-size: cover;
    position: absolute;
    z-index: -1;
}
.list_story a,  .prev_inner a{
    color: #0096ff;
    text-decoration: none;
    -webkit-transition: color .3s ease-out;
    -o-transition: color .3s ease-out;
    transition: color .3s ease-out;
}

a .thum {
    position: relative;
    display: block;
    overflow: hidden;
}

a .thum span {
    position: relative;
    display: block;
    padding: 2px;
    background: #fff;
}

a .thum span:before, a .thum span:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    background: #ff149b;
    -webkit-transition: width .3s ease-out, height .3s ease-out;
    -o-transition: width .3s ease-out, height .3s ease-out;
    transition: width .3s ease-out, height .3s ease-out;
}

a .thum span:before {
    top: 0;
    left: 0;
}

a .thum span:after {
    bottom: 0;
    right: 0;
}

.list_story a img, .prev_inner a img{
    position: relative;
    width: 100%;
    z-index: 1;
}

/*.list_story a:hover {
    color: #ed6d00;
}

.list_story a:hover .thum {
    border-color: #ed6d00;
}*/

a:hover .thum span:before, a:hover .thum span:after {
    width: 100%;
    height: 100%;
}

/* detaile
==================================== */
.box_story .ttl_elem {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/*.box_story .img img {
    width: 100%;
}

.box_story .img .img_large {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 2%;
    border: 2px solid #eee;
}

.box_story .img .img_large div {
    padding-top: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}

.box_story .img ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.box_story .img ul li {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid #eee;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: border-color .3s ease-out;
    -o-transition: border-color .3s ease-out;
    transition: border-color .3s ease-out;
}

.box_story .img ul li:hover, .box_story .img ul li.is-active {
    border-color: #ed6d00;
}

.box_story .img ul li:hover img, .box_story .img ul li.is-active img {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.box_story .img ul img {
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    -o-transition: transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}
*/
/*.box_story .ttl {
    background: #073190;
    color: #fff;
}
*/
.box_story .ep_ttl{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.box_story .ep_ttl h3{
    position: relative;
}
.box_story .no {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    /*overflow: hidden;
    z-index: 1;*/
}
.box_story .thum_movie img{
    width: 100%;
}
/*.box_story .no:before, .box_story .no:after {
    content: '';
    position: relative;
    background: #fff;
    z-index: -1;
}*/

/*.box_story .no:before {
    -webkit-transform: skewX(-45deg) translateX(50%);
    -ms-transform: skewX(-45deg) translateX(50%);
    transform: skewX(-45deg) translateX(50%);
}

.box_story .no:after {
    -webkit-transform: skewX(-45deg) translateX(-50%);
    -ms-transform: skewX(-45deg) translateX(-50%);
    transform: skewX(-45deg) translateX(-50%);
}*/

.box_story .no span {
    display: block;
    text-align: center;
    /*background: #fff;
    white-space: nowrap;
    overflow: hidden;*/
}
.preview .prev_inner{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.preview .order{
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 10;
}
.preview .order:before{
    content: '';
    background: url(../img/story/ico_nobg.png) 100% no-repeat;
    background-size: cover;
    position: absolute;
    z-index: -1;
}
.preview .order:after{
    content: '';
    width: 100%;
    height: auto;
    position: absolute;
    margin: auto;
    box-sizing: border-box; 
}

#pager{
    text-align: center;
    overflow: hidden;
}
#pager .prev_btn, #pager .next_btn{
    width: 240px;
    min-height: 1px;
}
/*.box_story .detail {
    background: #eee;
}*/

/*.box_story .detail .box_line.blue {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.box_story .box_txt {
    margin: 0 auto;
}*/
/* detaile 00&11
==================================== */
/*#ep00 .thum_movie:not(:first-child){
    display: none;    
}*/


/* story pc
===================================== */
@media screen and (min-width: 1280px) {
    /*#story .story_index{
        height: 100vh!important;
    }*/
}
@media screen and (min-width: 769px) {
    #story .story_index{
        padding-bottom: 50px;
        /*height: 60vw;*/
    }
    #story .btn_prev:after, #side_story .btn_next:after{
        top: 10px;
    }
     #story #main_inner > .detail:last-child .box_line {
    padding-bottom: 130px;
    }
  /*.list_story {
    padding: 0 72px;
  }*/
    .list_story li {
        width: 285px;
    }
    .list_story li:not(:nth-child(3n)) {
        margin-right: 70px;
    }
    .list_story li:nth-child(n+4) {
        margin-top: 50px;
    }
    /*.list_story .ttl {
    margin-top: 15px;
    line-height: 1.3;
    }*/
    .list_story li .number{
        top: -3px;
        left: -15px;
    }
    .list_story li .number:before{
        width: 76px;
        height: 69px;
        top: -16px;
        left: -26px;
    }
    
 /* detaile pc
    ==================================== */
    .box_story .ttl_elem {
      margin-bottom: 24px;
    }
    .box_story .img {
      width: 960px;
      margin: 0 auto;
      padding-bottom: 80px;
    }
    .box_story .img .img_large {
      margin-bottom: 14px;
    }
    .box_story .img ul li {
      width: 160px;
    }
    .box_story .img ul li:not(:last-child) {
      margin-right: 8px;
    }
    /*.box_story .ttl {
      font-size: 28px;
      font-size: 2.8rem;
      line-height: 43px;
      font-weight: normal;
    }
    .box_story .ttl .box_center {
      padding: 40px 0;
    }
    .box_story .ttl h3 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
    }*/
    .box_story .no {
      /*margin-right: 18px;*/
        font-size: 30px;
        font-size: 3.0rem;
        line-height: 1.5;
        /*padding-top: 50%;
        line-height: 43px;
        font-weight: normal;*/
    }
    .box_story .ep_ttl h3:after{
        content: '';
        position: absolute;
        border-right: 1px solid #333;
        top: 0;
        right: -50px;
        width: 100%;
        height: 100%;
    }
    .box_story .txt{
        padding-left: 120px;
        width: 79%;
    }
    
    .preview {
        margin-bottom: 70px!important;
    }
    .preview .order{
        font-size: 32px;
        font-size: 3.2rem;
    }
    .preview .order:before{
        width: 132px;
        height: 120px;
        top: -20%;
        left: -60px;
    }
    .preview .prev_inner a{
        width: 47.5%;
    }
    .preview .prev_inner a:nth-child(even){
        margin-left: 5%;
    }
    .preview .prev_inner a:nth-child(n+3){
        margin-top: 7%;
    }
    .preview .order{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }
    .preview .order:after{
        left: 7px;
        bottom: -14px;
        border: 13px solid transparent;
        border-left: 20px solid #0096ff; 
    }
    a:hover .order:after{
        border-left: 20px solid #ff149b;
    }
    /*.box_story .no:before, .box_story .no:after {
        padding-left: 43px;
    }*/
    /*.box_story .no span {
        padding: 0 8px;
    }*/
    /*.box_story .box_txt {
        width: 800px;
    }
    .box_story .txt {
        padding-top: 40px;
        margin-bottom: 80px;
    }*/
    /*.box_story .staff {
        margin-bottom: 66px;
    }
    .box_story .staff ul {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 500px;
        margin: 0 auto;
    }
    .box_story .staff li {
        margin: 0 20px 14px;
    }*/

    /*.box_story .thum_movie .thum:before, .box_story .thum_movie .thum:after {
        background-size: 92px !important;
    }*/
    .box_story #pager {
        width: 1100px;
        margin: 0 auto;
    }
    .box_story #pager .prev_btn{
        float: left;
    }
    .box_story #pager .list_btn{
        display: inline-block;
    }
    .box_story #pager .next_btn{
        float: right;
    }

    /* detaile pc 00&11
    ==================================== */
    #ep00 .preview .prev_inner a{
        width: 100%;
    }        
}

/* story sp
===================================== */
@media screen and (max-width: 768px) {
    #story .btn_prev:after, #side_story .btn_next:after{
        top: 15px;
    }
    #story #main_inner > .detail:last-child .box_line {
    padding-bottom: 30px;
    }
    /*.list_story {
    padding: 0 7.33945%;
}*/
    .list_story li {
        width: 45.84946%;
    }
    .list_story li:not(:nth-child(even)) {
        margin-right: 8.30108%;
    }
    .list_story li:nth-child(n+3) {
        margin-top: 24px;
    }
    .list_story .ttl {
        margin-top: 8px;
        line-height: 1.5;
    }
    .list_story li .number{
        top: -9px;
        left: -6px;
        font-size: 13px;
        font-size: 1.3rem;
    }
    .list_story li .number:before{
        width: 47px;
        height: 42px;
        top: -7px;
        left: -15px;
    }
 /* detaile sp
    ==================================== */
  /*.box_story .ttl_elem {
    margin-bottom: 20px;
  }
  .box_story .img {
    padding: 0 7.33945% 50px;
  }
  .box_story .img .img_large {
    margin-bottom: 3.6%;
  }
  .box_story .img ul li {
    width: 48.2%;
  }
  .box_story .img ul li:not(:nth-child(even)) {
    margin-right: 3.6%;
  }
  .box_story .img ul li:nth-child(n+3) {
    margin-top: 3.6%;
  }*/
  /*.box_story .ttl {
    font-size: 22px;
    font-size: 2.2rem;
    line-height: 32px;
    font-weight: normal;
    text-align: center;
  }
  .box_story .ttl .box_center {
    padding: 24px 0;
  }*/
    .preview {
        margin-bottom: 50px!important;
    }
    .box_story .ep_ttl h3{
        margin: 0 auto;
    }
    .box_story .ep_ttl h3:after{
        content: '';
        position: absolute;
        right: 0;
        bottom: -15px;
        border-bottom: 1px solid #333;
        width: 100%;
    }
    .box_story .no {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-bottom: 6px;
        font-size: 28px;
        font-size: 2.8rem;
        line-height: 32px;
        font-weight: normal;
    }
    .thum_movie{
        overflow: unset;
    }
    .prev_inner a:not(:first-child){
        margin-top: 10vw;
    }
  /*.box_story .no:before, .box_story .no:after {
    padding-left: 32px;
  }*/
  /*.box_story .no span {
    padding: 0 8px;
  }*/
  /*.box_story .box_txt {
    padding: 0 7.33945%;
  }*/
    .box_story .txt {
        padding-top: 40px;
        margin-bottom: 10px;
    }
    .preview .order{
        font-size: 25px;
        font-size: 2.5rem;
        top: 5px;
        left: 11%;
    }
    .preview .order:before{
        width: 110px;
        height: 100px;
        top: -25%;
        left: -50px
    }
    .preview .order:after{
        left: 6px;
        bottom: -10px;
        border: 10px solid transparent;
        border-left: 15px solid #0096ff; 
    }
    a:hover .order:after{
        border-left: 15px solid #ff149b;
    }
  /*.box_story .staff {
    margin-bottom: 30px;
  }
  .box_story .staff ul {
    padding: 0 5.73477%;
  }
  .box_story .staff li {
    margin: 0 30px 10px 0;
  }*/
    .box_story #pager {
        width: 90%;
        margin: 0 auto;
    }
    #pager .prev_btn, #pager .list_btn, #pager .next_btn{
        margin: 0 auto;
    }
    #pager .prev_btn, #pager .list_btn{
        margin-bottom: 3vw;
    }
  /* detaile sp 00&11
  ==================================== */
}