@charset "UTF-8";

@media screen and (max-width: 667px) {

  /*アニメサイト用SP*/
  /*-----------------------------------------------SP用ページ用設定*/

  .slick-dots li button:before {
    font-family: 'slick';
    font-size: 2.5rem;

    position: absolute;
    top: 0;
    left: 0;

    width: 30px;
    height: 30px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


  :root {
    /*キービジュアルの下マージン*/
    --marginBtmKV: -30px auto 36px;
    /*各コンテンツの下マージン*/
    --marginBtm: 0 auto 36px;
  }

  /*表示非表示*/
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  /*-----------------------------------------*/
  /*画像基本*/
  /*-----------------------------------------*/
  /*画像基本600px*/
  figure {
    width: 90%;
    margin: 0 auto;
  }

  figure img {
    margin: 0 auto 8px;
  }

  /*キャプション*/
  figure i {
    font-size: 1.4rem;
    line-height: 1.4;
  }

  /*-----------------------------------------*/
  /*画像ボックス*/
  .imgBox {
    width: 90%;
    margin: 0 auto 1.6em;
    text-align: center;
  }

  /*画像大サイズ*/
  .imgBox.ls {
    width: 100%;
  }

  /*画像2点横並び*/
  .imgBox.l2 {
    width: 100%;
  }

  /*画像3点横並び*/
  .imgBox.l3 {
    width: 100%;
  }

  /*2点用*/
  .imgBox.l2 ul li {
    width: 50%;
    padding: 5px;
  }

  /*3点用*/
  .imgBox.l3 ul li {
    width: 50%;
    padding: 5px;
  }

  /*-----------------------------------------*/
  /*3.<H>タグ:設定*/
  /*-----------------------------------------*/
  /*H2:基本*/
  h2 {
    margin: 0 auto 8px;
  }

  /*H2：下層ページ見出し背景*/
  section#cntHeader {
    height: 0;
    background: url("../../_image/h2_bgSP.png") repeat center top/100% auto;
    padding-bottom: calc(100% * 160/800);
  }

  /*H2：下層ページ見出し*/
  section#cntHeader h2 {
    padding-top: 32px;
  }

  /*画像を高さで揃える*/
  section#cntHeader h2 img,
  h2 img {
    height: 34px;
  }

  /*-----------------------------------------*/
  /*下線付き見出し*/
  h3 {
    background: url("../../_image/cmn_line.svg") no-repeat bottom left/921px auto;
    margin: 12px auto;
    padding: 0 8px;
    text-align: left;
  }

  /*赤い下線付き見出し（画像）*/
  h3 img {
    height: 14px;
  }

  /*赤い下線付き見出し（フォント用）*/
  h3 i {
    font-size: 1.5rem;
  }

  /*-----------------------------------------*/
  /*赤い下線付き見出し(ニュース見出し)*/
  h4 {
    font-size: 1.5rem;
  }

  /*ニュースの日付*/
  h4 i {
    font-size: 1.2rem;
  }

  /*-----------------------------------------*/
  /*小見出し（画像）*/
  h5 {
    padding: 8px;
  }

  h5 img {
    height: 14px;
  }

  /*-----------------------------------------*/
  /*5.リンク：基本設定*/
  /*-----------------------------------------*/

/*-----------------------------------------*/
/*ボタンリンク*/
a.btnLink {
  display: block;
  width: 90%;
  background: #e13234;
  margin: 0 auto;
  padding: 10px;
  color: #FFF;
  text-align: center;
}


  /*ニューストップに戻る*/
  p.backLink {
    margin-top: 28px;
  }

  /*-----------------------------------------*/
  /*6.HTML/BODY：設定*/
  /*-----------------------------------------*/
  body {
    font-size: 1.4rem;
  }

  /*-----------------------------------------*/
  /*7.基本レイアウト*/
  /*-----------------------------------------*/
  /*アニメ公式用の識別クラス*/
  .anime {
    overflow: hidden;
  }

  /*-----------------------------------------*/
  /*8.<section>設定*/
  /*-----------------------------------------*/
  /*基本（X背景付き）*/
  section#contents {
    background: url("../../_image/bg_contentsSP.png") repeat center top/100% auto;
    margin-top: 0;
  }


  /*トップページ：基本（X背景付き）*/
#index section#contents {
  margin-top: 0;
}

  /*トップページ：ムービー*/
  #index section#movie {
    margin: 0 auto 48px;
    background: url("../../_image/bg_contentsSP.png") repeat center top/100% auto;

  }

  /*トップページ：ムービー*/
.bnr {
  margin:0 auto 32px;
  width: 80%;

}



  /*トップページ：ニュース*/
#index section#news {
  padding-bottom: 18px;
}

.character section#contents {
  padding-bottom: 18px;

}


  /*-----------------------------------------*/
  /*9.<article>設定*/
  /*-----------------------------------------*/
  /*基本コンテンツレイアウト*/
  article {
    width: 94%;
    background: rgba(255, 255, 255, .9);
    padding: 16px 8px;
  }

  /*ニュースとムービーのみ下マージン入れる*/
.news article,
.movie article {
  width: 94%;
  background: none;
  padding: 16px 0;
}

  article p {
    padding: 0 8px 1em;
    line-height: 1.8;
  }

/*-----------------------------------------*/
/*9-2.トップページの最新話のナビゲーション*/
/*-----------------------------------------*/
.topNav {
  text-align: center;
  width: 100%;
  margin: 0 auto 48px;
}
.topNav li{
  width: 48%;
  margin: 0 0.5%;
  height: auto;
}

.topNav li h2{
  position: absolute;
  margin: 0;
  top:-32%;
  right: 20px;
  text-align: right;

}

.topNav li:last-child h2 {
  top:-32%;
  left: 20px;
  text-align: left;
}

.topNav li:last-child h2 img {
  height: 32px;
 }



  /*-----------------------------------------*/
  /*10.キービジュアル*/
  /*-----------------------------------------*/
  #keyvisual {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 80vh;
    margin: var(--marginBtmKV);
  }


  @media screen and (max-width: 375px) {
    #keyvisual {
    /*768 px未満で表示させたいcssを記述する部分 */
    height: 96vh;
     }
   }

  /*キービジュアル背景*/
  #keyvisual main {
    position: absolute;
    background-image: url("../../_image/bg_keyvisual_2SP.webp");
  background-image: image-set(url("../../_image/bg_keyvisual_2SP.webp") 1x, url("../../_image/bg_keyvisual_2SP.webp") 2x);
  background-image: -webkit-image-set(url("../../_image/bg_keyvisual_2SP.webp") 1x, url("../../_image/bg_keyvisual_2SP.webp") 2x);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    width: 100%;
    height: 86vh;
    padding-top: calc(100% * 1200/800);
  }

  #keyvisual main.light {
    position: absolute;
    top: 30px;
    height: 86vh;
    background-image: url("../../_image/bg_keyvisual_2BSP.png");
    background-image: image-set(url("../../_image/bg_keyvisual_2BSP.png") 1x, url("../../_image/bg_keyvisual_2BSP@2x.png") 2x);
    background-image: -webkit-image-set(url("../../_image/bg_keyvisual_2BSP.png") 1x, url("../../_image/bg_keyvisual_2BSP@2x.png") 2x);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    z-index: 2;
  }

  /*グラデ背景白*/
  .white {
    display: none;
  }

  /*-----------------------------------------*/
  /*見えないもの*/
  .kv_catch2 {
    position: absolute;
    width: 24%;
    height: auto;
    top: 5%;
    left: 5%;
    margin-left: 0;
    z-index: 10;
  }


  /*-----------------------------------------*/
  /*キャラクター配置*/
  .kv_chara {
    position: absolute;
    width: 120%;
    min-width: 100%;
    height: auto;
    top: 4%;
    left: 0;
    margin-left: 0;
    transform: translateY(0%) translateX(-10%);
  -webkit-transform: translateY(0%) translateX(-10%);
    z-index: 7;
  }

  .kv_chara img{
    max-width: 100%;
  }
  

  /*-----------------------------------------*/
  /*ロゴ*/
  .kv_logo {
    width: 100%;
    min-width: 100%;
    top: auto;
bottom: -5%;
    left: 50%;
    transform: translateY(0%) translateX(-50%);
    -webkit-transform: translateY(0%) translateX(-50%);
    z-index: 9;
  }

  /*-----------------------------------------*/
  /*放送開始日*/
  .kv_date {
    position: absolute;
    width: 80%;
    top: 92%;
    left: 50%;
    transform: translateY(0%) translateX(-50%);
    -webkit-transform: translateY(0%) translateX(-50%);
    z-index: 10;
  }

  /*-----------------------------------------*/
  /*11.イントロダクション*/
  /*-----------------------------------------*/
  .introduction {
    position: relative;
    max-width: 100%;
    height: auto;
    margin: var(--marginBtm);
    text-align: left;
    flex-wrap: wrap;
  }

  /*紹介文*/
  .introduction p {
    position: relative;
    display: block;
    width: 90%;
    margin: 0 auto;
    font-size: 1.3rem;
    line-height: 1.8;
    letter-spacing: 0.1em;
  }

  /*-----------------------------------------*/
  /*スマホのみ大枠使用*/
  .introduction .inner {
    position: relative;
    max-width:90%;
    margin: 0 auto 0;
  }

  /*-----------------------------------------*/
  /*.ex*/
  /*-----------------------------------------*/
  /*イントロダクション背景*/
  .ex .intro_bg {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    right: 0;
    z-index: 1;
  }

  /*イントロダクションエクス*/
  .ex .intro_ekusu {
    position: absolute;

    top: 0;
    right: 0;
    z-index: 5;
  }

  /*イントロダクションバード*/
  .ex .intro_bird {
    position: absolute;

    top: 0;
    right: 0;
    z-index: 4;
  }

  /*イントロダクションマルチ*/
  .ex .intro_multi {
    position: absolute;
  
    top: 0;
    right: 0;
    z-index: 3;
  }

    /*イントロダクションテンカ*/
    .ex .intro_tenka {
      position: absolute;

      top: 0;
      right: 0;
      z-index: 2;
    }

  /*-----------------------------------------*/
  /*イントロダクションエクスベイ*/
  .ex .intro_ekusubey {
    position: absolute;
  
    top: 0;
      right: 0;
    z-index: 6;
  }

  /*イントロダクションバードベイ*/
  .ex .intro_birdbey {
    position: absolute;
   
    top: 0;
    right: 0;
    left: 0;
    z-index: 6;
  }

  /*イントロダクションマルチベイ*/
  .ex .intro_multibey {
    position: absolute;

    top: 0;
    right: 0;
    z-index: 7;
  }

    /*イントロダクションテンカベイ*/
    .ex .intro_tenkabey {
      position: absolute;
     
      top: 0;
      right: 0;
    
      z-index: 6;
    }


  /*-----------------------------------------*/
  /*11.トップページ ムービー*/
  /*-----------------------------------------*/
  /*スライダー個別*/
  .slider .slick-slide {
    padding: 0 24px;
    opacity: .5;
    transition-duration: 0.3s;
  }


  /*-----------------------------------------*/
  /*下層ページの設定*/
  /*-----------------------------------------*/

  /*-----------------------------------------*/
  /*1.ニュース*/
  /*-----------------------------------------*/
  /*ニュース設定*/
  ul.newsList {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    max-width: 90%;
    margin: var(--marginBtm);
  }

  /*レイアウト*/
  ul.newsList li {
    position: relative;
    width: 48%;
    background: #FFF;
    margin: 0 1%;
    padding: 0;
    color: #333;
    text-align: left;
  }

/*トップページは初回のみ4列で表示*/
#index ul.newsList li {
  position: relative;
  width: 48%;
  background: #FFF;
  margin: 0 1%;
  padding: 0;
}


  /*-----------------------------------------*/
  /*PC版は最初の3件のみ表示【li:nth-child(-n+X)】最初からX番目まで*/
  /*SP版は最初の4件を表示*/
  #index ul.newsList li:nth-child(-n+4) {
    display: block;
  }

  /*-----------------------------------------*/
  /*ニュース見出しテキスト*/
  ul.newsList p {
    display: block;
    padding: 0 4px;
    font-size: 1.3rem;
    line-height: 1.4;
  }

  ul.newsList i {
    display: block;
    padding: 8px 4px 4px;
    font-size: 1.2rem;
    opacity: .8;
    text-align: left;
  }

  /*-----------------------------------------*/
  /*2.エピソード（10月から放送開始）*/
  /*-----------------------------------------*/
  /*-----------------------------------------*/
  /*3.キャラクター（/character/style.cssに記述）*/
  /*-----------------------------------------*/

  /*-----------------------------------------*/
  /*4.スタッフ＆キャスト*/
  /*-----------------------------------------*/
  /*スタッフレイアウト*/
  ul.staff {
    display: flex;
    flex-wrap: wrap;
    padding: 0 8px 28px;
  }

  ul.staff li {
    width: 100%;
    margin-bottom: 6px;
    padding: 6px 4px 8px;
    font-size: 1.6rem;
    line-height: 1.4;
    border-bottom: 1px solid #CCC;
  }

  /*-----------------------------------------*/
  /*キャストレイアウト*/
  ul.staff.cast li {
    border-bottom: 1px solid #CCC;
  }

  /*-----------------------------------------*/
  /*スタッフ＆キャスト+ポップアップ共通*/
  /*-----------------------------------------*/
  /*役職*/
  .create i {
    font-size: 1.5rem;
  }

  /*名前のフォントサイズ*/
  .create em {
    font-size: 1.6rem;
  }


  /*-----------------------------------------*/
  /*ポップアップ*/
  /*-----------------------------------------*/
  /*コメントポップアップレイアウト*/
  .popup {
    width: 100%;
    margin: 0 auto;
    background: #f4f4f4 url("../../_image/bg_popup.png") no-repeat center top/100%;
  }

  /*上下のパーツの背景画像*/
  .popup .inner {
    position: relative;
    width: 100%;
    padding: 24px 12px 0;
    background-image: url("../../_image/bg_popup_top.svg"), url("../../_image/bg_popup_btm.svg");
    background-repeat: no-repeat;
    background-position: top left, bottom right;
    background-size: 300px auto, 300px auto;
  }

  /*閉じるボタン*/
  .popup button.mfp-close {
    position: absolute;
    width: 24px;
    height: 24px;
    background: #f4f4f4 url("../../_image/cmn_popClose.svg") no-repeat center top/100%;
    top: 12px;
    right: 12px;
    z-index: 12;
  }

  .popup .inner .create em {
    display: block;
    padding-bottom: 12px;
    font-size: 1.6rem;
  }

  /*-----------------------------------------*/
  /*写真とテキストレイアウト*/
  .popup dl {
    display: flex;
    flex-wrap: wrap;
  }

  /*写真*/
  .popup dl dt {
    width: 80%;
    margin: 0 auto;
  }

  /*テキスト*/
  .popup dl dd {
    width: 100%;
    padding: 12px 0 36px;
  }

  /*声優名*/
  .popup dl dd em {

    font-size: 2.4rem;
  }

  /*テキスト*/
  .popup dl dd p {
    font-size: 1.4rem;
    line-height: 1.6;
  }

  /*-----------------------------------------*/
  /*5.配信情報*/
  /*-----------------------------------------*/
  /*バナー*/
  .onairBnr {
    position: relative;
    width: 100%;
    margin: 0 auto 28px;
  }

  /*配信情報レイアウト*/
  ul.onair {
    padding: 0 8px 14px;
  }

  /*リストに下線*/
  ul.onair li {
    position: relative;
    padding: 0 8px 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #CCCF;
  }

  /*-----------------------------------------*/
  /*テキストレイアウト*/
  ul.onair li dl {
    display: flex;
    flex-wrap: wrap;
  }

  /*チャンネル名*/
  ul.onair li dl dt {
    width: 100%;
    font-size: 1.5rem;
  }

  /*日付と時間*/
  ul.onair li dl dd {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  /*日付*/
  ul.onair li dl dd i {
    display: inline-block;
    width: 200px;
  }

  /*-----------------------------------------*/
  /*６.ムービー*/
  /*-----------------------------------------*/
  .movie .imgBox.l3 {
    width: 100%;
    margin: 24px auto 0;
  }

  .movie .imgBox.l3 li {
    width: 50%;
    padding: 0 2px 24px;
  }

  .movie .imgBox.l3 li i {
    display: inline-block;
    padding: 8px;
  }

  /*-----------------------------------------*/
  /*7.ミュージック*/
  /*-----------------------------------------*/
  .music .imgBox {
    width: 90%;
    margin: 2em auto 2em;
    text-align: center;
  }
  /*ワンオクの動画のみ
.music .imgBox:nth-of-type(2) {
  width: 90%;
  margin: 2em auto 6em;
  text-align: center;
}*/

  .music cite {
    display: block;
    margin: 4px 0 12px;
    line-height: 1;
  }

  .music cite img:first-child {
    height: 26px;
    margin: 4px;
  }

  .music cite img {
    height: 20px;
    margin: 4px;
  }



/*-----------------------------------------*/
/*5分割*/
.music .musicNav {
  width: 90%;
  margin: 0 auto;
}
.music .musicNav li {
  position: relative;
  display: block;
  background: #8e8e8e url("../_image/cmn_arrow_bk.svg") no-repeat right 12px top 19px/6px auto;
  width: 49.5%;
  margin: 0 0.25% 24px;
  padding: 8px 0;
  font-size: 14px;
  /*アニメーションで変化*/
  transition: background-color .3s;
  cursor: pointer;
}



/*-----------------------------------------*/
/*オンマウス・アクティブ*/
.music .musicNav li:hover,
.music .musicNav li.active {
  position: relative;
    display: block;
    background: #333 url("../_image/cmn_arrow_bk.svg") no-repeat right 12px top 18px/6px auto;
    margin: 0 0.5% 24px;
    padding: 8px 0;
    /*アニメーションで変化*/
    transition: background-color .3s;
}



  /*-----------------------------------------*/
  /*フッター（MENUサイト内ナビゲーション）*/
  /*-----------------------------------------*/
  /*サイト内ナビゲーション*/
  .anime #fNav {
    position: relative;
    width: 100%;
    height: auto;
    background: url("../../_image/bg_footerNavSP.png") repeat-x center top/100% auto;
    padding: 16px 4px;
  }

  .anime #fNav ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto 0;
    padding: 0;
  }

  .anime #fNav ul li {
    width: 50%;
    margin: 0 auto;
    padding: 0 4px 4px;
  }

  /*-----------------------------------------*/
  /*フッター（各サイトへのリンク集）*/
  /*-----------------------------------------*/
  /*各サイトへのリンク集*/
  .anime #footerLink {
    position: relative;
    background: #000;
    padding: 30px 0 0;
    text-align: left;
    /*filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));*/
    z-index: 1;
  }

  /*各サイトへのリンク集ロゴ*/
  .anime #footerLink .footerLink_logo {
    width: 94%;
    margin: 0 auto;
    padding: 0 0 18px;
  }

  /*各サイトへのリンク集ロゴサイズ*/
  .anime #footerLink .footerLink_logo img {
    width: 160px;
  }

  /*-----------------------------------------*/
  /*レイアウト*/
  .anime .footerLink {
    width: 94%;
    margin: 0 auto;
    text-align: center;
  }

  .anime .footerLink li {
    display: inline-block;
    padding: 0 12px 24px;
  }

  /*-----------------------------------------*/
  /*個別アニメ公式サイト*/
  /*リストの幅*/
  .anime .footerLink li:nth-of-type(1) {
    width: 49%;
  }

  /*見出し*/
  .anime .footerLink li:nth-of-type(1) dl dt {
    width: 100%;
  }

  /*各リンクテキスト*/
  .anime .footerLink li:nth-of-type(1) dl dd {
    width: 100%;
  }

  /*-----------------------------------------*/
  /*個別製品情報サイト*/
  /*リストの幅*/
  .anime .footerLink li:nth-of-type(2) {
    width: 49%;
  }

  /*見出し*/
  .anime .footerLink li:nth-of-type(2) dl dt {
    width: 100%;
  }

  /*各リンクテキスト*/
  .anime .footerLink li:nth-of-type(2) dl dd {
    width: 100%;
  }

  /*-----------------------------------------*/
  /*個別ベイブレードポータル*/
  /*リストの幅*/
  .anime .footerLink li:nth-of-type(3) {
    width: 100%;
  }

  /*見出し*/
  .anime .footerLink li:nth-of-type(3) dl dt {
    width: 100%;
  }

  /*各リンクテキスト*/
  .anime .footerLink li:nth-of-type(3) dl dd {
    width: 100%;
  }

  /*-----------------------------------------*/
  /*各サイトテキストリンクのレイアウト*/
  .anime .footerLink dl {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.2rem;
    text-align: left;
  }

  .anime .footerLink dl dt {
    line-height: 1.4;
    padding-bottom: 12px;
  }

  /*見出しのリンクは下線付き*/
  .anime .footerLink dl dt a {
    text-decoration: underline;
    font-size: 1.2rem;
  }

  /*-----------------------------------------*/
  /*今後全ページ共通に変更予定*/
  /*-----------------------------------------*/
  .anime footer {
    padding: 30px 0 24px;
    font-size: 1.0rem;
    line-height: 1.6;
    color: #fcfcfc;
    text-align: center;
    /*filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));*/
  }

  /*-----------------------------------------*/
  /*外部リンクナビゲーション（youtube・twitter・コロコロ）*/
  ul#footerNav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 94%;
    margin: 0px auto 30px;
  }

  ul#footerNav li {
    width: 50%;
    margin: 2px -1%;
  }

  /*-----------------------------------------*/
  /*5.その他共通*/
  /*-----------------------------------------*/
  /*ページトップに戻る*/
  #page-top {
    position: fixed;
    width: 64px;
    height: 64px;
    bottom: 20px;
    right: -4px;
    z-index: 97;
    opacity: .8;
  }

  /*-----------------------------------------*/
  /*YOUTUBEレスポンシブ*/
  .mov {
    width: 90%;
    margin: 0 auto;
  }

  /*end media----------------------------------*/
}