@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;600&display=swap');

/*==================================

 is2nd

==================================*/

/* ---------------------------------
 ストーリー
--------------------------------- */
#story{
  margin-top: 16%;
  position: relative;
  z-index: 20;
}
#story::before{
  content: '';
  background-image: url(../images/common/bg_item_02.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 0;
  padding-top: 43.2%;
  position: absolute;
  top:-2%;
  right: 0;
  z-index: -1;
}
#story .teaser-block-title{
  background-image: url(../images/top/tit_story.png);
  width: 100%;
  padding-top: 14.2666%;
}
#story .teaser-block-inner{
  margin: 10% auto;
}

/* 各話タイトル */
#story .story_item_header{
  font-size: 1.4rem;
}
#story .story_item_header span{
  font-size: 4rem;
  padding-right: 16px;
}
#story .story_item_header p {
  line-height: 1;
  padding-bottom: 16px;
  border-bottom:1px solid #fff;
  font-weight: 200;
  font-size: 1.4rem;
}

/* 動画 */
.teaser-contents #story .movie-player{
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  margin: 8% auto 0;
}
.teaser-contents #story .movie-player iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 各話あらすじ */
#story .story_item_text{
  margin: 8% 0;
}
#story .story_item_img{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;  
  margin: 0 -12px; 
}
#story .story_img {
  width: 50%;
  padding: 0 12px;
  margin: 0 0 8%;
  font-size: 0;
}

/* 登場人物バナー */
#story .bnr_character_list{
  width: 80%;
  margin: 0 auto;
  padding: 0 0 8%;
}  

/* 配信エリア */
#story .story_channel{
  border-top:1px solid #fff;
}
#story .story_channel .story_channel_headding{
  background-image: url(../images/story/story_channel_headding.png);
  width: 100%;
  margin: 8% auto;
  padding-top: 4.2%;
  position: relative;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-size: 0;
  text-indent: -9999px;
  white-space: nowrap;
}
#story .story_channel .story_channel_list{
  width: 80%;
  margin: 0 auto;
}
#story .story_channel .story_channel_item-hulu{
  width: 100%;
  margin: 10px 0;
}
#story .story_channel .story_channel_item-hulu img{
  width: 100%;
}

/* バックナンバー */
#backnumber{
  margin-top: 16%;
  position: relative;
  z-index: 10;
}
#backnumber::after{
  content: '';
  background-image: url(../images/common/bg_item_03.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 0;
  padding-top: 47.73%;
  position: absolute;
  top:-26.5%;
  right: 0;
  z-index: -1;
}
#backnumber .teaser-block-title{
  background-image: url(../images/story/tit_backnumber.png);
  width: 100%;
  padding-top: 13.2%;
}
#backnumber .teaser-block-inner{
  margin: 10% auto 0;
}
#backnumber .backnumber_list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#backnumber .backnumber_list .backnumber_item{
  width: 47.5%;
  margin-bottom: 5%;
}
#backnumber .backnumber_list .backnumber_item:last-child,
#backnumber .backnumber_list .backnumber_item:nth-last-child(2){
  margin-bottom: 0;
}
#backnumber .backnumber_list .backnumber_item .story_thumb{
  font-size: 0;
  margin-bottom: 10px;
}
#backnumber .backnumber_list .backnumber_item .story_num{
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0;
}
#backnumber .backnumber_list .backnumber_item .story_num span{
  font-size: 2em;
  padding-right: 10px;
}
/* ---------------------------------
 PC
--------------------------------- */
@media screen and (min-width: 993px){

  #story{
    margin-top: 100px;
  }
  #story::before{
    top: -70px;
  }
  #story .teaser-block-title{
    padding-top: 86px;
  }
  #story .teaser-block-inner{
    margin: 60px 0;
  }

  /* 動画 */
  .teaser-contents #story .movie-player{
    margin: 40px auto 0;
  }

  /* 各話あらすじ */
  #story .story_item_header span{
    font-size: 6rem;
  }
  #story .story_item_text{
    margin: 30px 0 40px;
  }
  #story .story_item_img{ 
    margin: 0 -12px; 
  }
  #story .story_img{
    margin: 0 0 60px;
  }

  /* 登場人物バナー */
  #story .bnr_character_list{
    padding: 0 0 40px;
  }  

  /* 配信エリア */
  #story .story_channel .story_channel_headding{
    margin: 40px auto;
    padding-top: 20px;
  }
  #story .story_channel .story_channel_list{
  }
  
  /* バックナンバー */
  #backnumber{
    margin-top: 100px;
  }
  #backnumber .teaser-block-inner{
    margin: 60px 0 0;
  }
  #backnumber .teaser-block-title{
    padding-top: 78px;
  }
  #backnumber .backnumber_list .backnumber_item{
    margin-bottom: 40px;
  }
  #backnumber .backnumber_list .backnumber_item .story_num{
    font-size: 12px;
  }
}
/* ---------------------------------
 SP用（tabはPCに合わせる場合）
--------------------------------- */
@media screen and (max-width : 600px){

    /* 各話あらすじ */
    #story .story_item_img{
      display: block;
      margin: 0 0 10%;
    }
    #story .story_img {
      display: block;
      width: 100%;
      padding: 0;
      margin: 5% 0;
    }

    /* 登場人物バナー */    
    #story .bnr_character_list{
      width: 100%;
    }

    /* 配信エリア */
    #story .story_channel .story_channel_list{
      width: 100%;
    }
}
@media screen and (max-width: 992px) {
}