@charset "UTF-8";

/*----------------------------------------------PC用ページ用設定*/
/*-----------------------------------------*/
/*:root 共通の値を設定*/
/*-----------------------------------------*/
:root {
  /*サイトの最大width*/
  --baseWidth: 1100px;
  /*各コンテンツの下マージン*/
  --marginBtm: 0 auto 36px;
  /*要素の下につけるパディング*/
  --pBtm: 0 auto 1em;
  --marginLast: 0 auto 0;
  /*画像をリスト表示するときのパディング*/
  --figupadding: 10px;
  /*各セクションの下につけるマージン*/
  --sectionBtm: 0 auto 36px;
  /*imgBoxの画像につけるパディング*/
  --imgBoxpadding: 10px;
/*キービジュアル下*/
  --marginBtmKV:-28px auto 36px;
  --marginBtm: 0 auto 36px;
}

/*-----------------------------------------*/
/*1.共通設定*/
/*-----------------------------------------*/
/*表示非表示*/
.pc {
  display: block;
}

.sp {
  display: none;
}

/*-----------------------------------------*/
/*2.画像：基本設定*/
/*全サイト共通の設定なので後で統合すること*/
/*-----------------------------------------*/
/*画像*/
img,
svg {
  max-width: 100%;
  height: auto;
}

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

figure img {
  margin: 0 auto 8px;
}

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

/*-----------------------------------------*/
/*画像基本*/
/*-----------------------------------------*/
/*画像ボックス*/
.imgBox {
  width: 600px;
  margin: 0 auto;
  text-align: center;
}

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

/*画像下のマージン（共通）*/
.imgBox img,.imgBox div {
  margin: 0 auto 8px;
}

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

/*画像2点横並び*/
.imgBox.l2 {}

/*画像3点横並び*/
.imgBox.l3 {}

/*-----------------------------------------*/
/*横並びの画像をflexでレイアウト*/
.imgBox.l2 ul,
.imgBox.l3 ul {
  display: flex;
  flex-wrap: wrap;
}

/*2点用*/
.imgBox.l2 ul li {
  width: 50%;
  padding: var(--imgBoxpadding);
}

/*3点用*/
.imgBox.l3 ul li {
  width: 33.333%;
  padding: var(--imgBoxpadding);
}

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

/*H2：下層ページ見出し背景*/
section#cntHeader {
  height: 180px;
  background: url("../../_image/h2_bgPC.png") repeat-x center top/1600px auto;
}

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

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

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


h3[id] {
  display: block;
  padding-top: 6rem;
  margin-top: -6rem;
  content: "";
}


/*赤い下線付き見出し（画像）*/
h3 img {
  height: 20px;
  margin-bottom: 8px;
}

/*赤い下線付き見出し（フォント用）*/
h3 i {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 1.8rem;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*-----------------------------------------*/
/*赤い下線付き見出し(ニュース見出し)*/
h4 {
  background: url("../../_image/cmn_line.svg") no-repeat bottom left/921px auto;
  margin: 0 auto 8px;
  padding: 0 8px 8px;
  font-size: 1.8rem;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*ニュースの日付*/
h4 i {
  display: block;
  padding: 0 0 4px;
  font-size: 1.2rem;
  font-weight: normal;
  opacity: .8;
}

/*ニュースのカテゴリー*/
u.category {
  display: block;
  margin: 0 auto 24px;
  padding: 0 12px;
  font-size: 1.4rem;
  opacity: .8;
}

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



/*-----------------------------------------*/
/*4.テキスト：基本設定*/
/*全サイト共通の設定なので後で統合すること*/
/*-----------------------------------------*/
/*強い強調*/
em {
  font-weight: normal;
  font-style: normal;
}

/*より強い強調*/
strong {
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*強調（太字）*/
b {
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*強調（下線付き）*/
u {
  text-decoration: none;
}

/*引用・補足の説明など*/
blockquote {}

/*注釈など他より小さい文字*/
small {
  display: inline-block;
  font-size: 1.3;
  line-height: 1.6;
  opacity: 0.6;
}

/*タイトル*/
cite {}

/*他と区別*/
i {
  font-style: normal;
}

/*段落*/
p {
  margin: 0 auto 1em;
  text-align: left;
}

/*最後の要素はマージン0に（保留）
p:last-of-type {
  margin: 0 auto;
}*/

/*要素を中央寄せ*/
.center {
  text-align: center;
}

/*要素を中央寄せ*/
.left {
  text-align: left;
}

/*要素を中央寄せ*/
.right {
  text-align: right;
}

/*-----------------------------------------*/
/*5.リンク：基本設定*/
/*-----------------------------------------*/
a:link {
  color: #fcfcfc;
}

a:visited,
a:hover,
a:active {
  color: #fcfcfc;
  opacity: 0.5;
}

/*-----------------------------------------*/
/*Aタグを要素全体に（ニュース・放送情報）*/
ul.newsList li a,
ul.onair li a {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*ホバー*/
ul.newsList li a:hover,
ul.onair.link li:hover {
  background: rgba(255, 255, 255, .8);
  transition: all 0.5s;
}

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

/*テキストリンク*/
a.txtLink {
  display: inline-block;
  margin: 0 auto;
  padding: 0;
  color: #333;
  text-align: center;
  text-decoration: underline;
}

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

/*黒丸背景のボタン*/
a.btnRound {
  position: relative;
  display: block;
  width: 360px;
  background: #333 url("/beyblade-x/_image/cmn_arrow_wh.svg") no-repeat right 12px center/5px auto;
  margin: 0 auto;
  padding: 8px 28px;
  line-height: 1.2;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
}

/*-----------------------------------------*/
/*6.HTML/BODY：設定*/
/*-----------------------------------------*/
/*フォントサイズを10pxに指定フォントの単位はremで*/
html {
  font-size: 62.5%;
  line-height: 1.6;
}

body {
  font-size: 1.5rem;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, Arial, Helvetica, Verdana, sans-serif;
  color: #333;
}

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

/*ヘッダー（溢れた分は非表示）*/
header {
  overflow: hidden;
}

/*-----------------------------------------*/
/*8.<section>設定*/
/*-----------------------------------------*/
/*基本*/
section {
  position: relative;
  margin: 0;
  padding: 0;
  text-align: center;
}

/*基本（X背景付き）*/
section#contents {
  width: 100%;
  background: url("../../_image/bg_contentsPC.png") repeat-y center top/1400px auto;
  /*margin-top: -100px;*/
  /*タカラトミー側の設定をリセット*/
  padding: 0;
  text-align: center;
}

/*トップページ：基本（X背景付き）*/
#index section#contents {
  width: 100%;
  background: url("../../_image/bg_contentsPC.png") repeat-y center top/1400px auto;
  /*margin-top: -100px;*/
}

/*トップページ：ムービー*/
.bnr {
  margin: -24px auto 64px;
}

/*トップページ：ムービー*/
#index section#movie {
  margin: 0 auto 32px;
}
/*トップページ：ニュース*/
#index section#news {
  padding-bottom: 80px;
}

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

}


/*-----------------------------------------*/
/*9.<article>設定*/
/*-----------------------------------------*/
/*基本コンテンツイアウト*/
article {
  width: 960px;
  background: rgba(255, 255, 255, .9);
  margin: 0 auto;
  padding: 80px;
  text-align: left;
}
/*ニュースとムービーのみ下マージン入れる*/
.news article,
.movie article {
  width: var(--baseWidth);
  background: none;
  padding: 80px 0;
}

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

article p.btm {
  padding: 0 8px 0;
  margin-bottom: 0.5em;
  line-height: 1.8;
}

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

/*最新話*/
.topNav li { 
  position: relative;
  display: inline-block;
  width: 440px;
  height: 248px;
  margin: 0 4px;
  text-align: right;
  vertical-align: top;
  font-size: 0;
}



/*最新話*/
.topNav li div{
  clip-path: polygon(0% 0%, 90% 0, 100% 15%, 100% 100%, 0% 100%);
}
/*最新話ムービー*/
.topNav li:last-child div{
  clip-path: polygon(0 15%, 10% 0, 100% 0, 100% 100%, 0% 100%);
}

.topNav li h2{
  position: absolute;
  margin: 0;
  top:-50px;
  right: 40px;
  text-align: right;

}

.topNav li:last-child h2 {
  top:-50px;
  left: 40px;
  text-align: left;
}







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

/*-----------------------------------------------------------*/
/*1124からSP用まで*/
@media all and (min-width: 1600px) and (max-width: 1650px) {
  /*---------------------------------------------------------*/
  #keyvisual {
    height: 1176px;
  }
  /*------------------------------------------------end@media*/
}

/*-----------------------------------------------------------*/
/*1124からSP用まで*/
@media all and (min-width: 1550px) and (max-width: 1600px) {
  /*---------------------------------------------------------*/
  #keyvisual {
    height: 1160px;
  }
  /*------------------------------------------------end@media*/
}
@media all and (min-width: 1500px) and (max-width: 1550px) {
  /*---------------------------------------------------------*/
  #keyvisual {
    height: 1130px;
  }
  /*------------------------------------------------end@media*/
}
@media all and (min-width: 1450px) and (max-width: 1500px) {
  /*---------------------------------------------------------*/
  #keyvisual {
    height: 1142px;
  }
  /*------------------------------------------------end@media*/
}
@media all and (min-width: 1400px) and (max-width: 1450px) {
  /*---------------------------------------------------------*/
  #keyvisual {
    height: 1142px;
  }
  /*------------------------------------------------end@media*/
}
@media all and (min-width: 1350px) and (max-width: 1400px) {
  /*---------------------------------------------------------*/
  #keyvisual {
    height: 1160px;
  }
  /*------------------------------------------------end@media*/
}
@media all and (min-width: 667px) and (max-width: 1350px) {
  /*---------------------------------------------------------*/
  #keyvisual {
    height: 1160px;

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


/*キービジュアル背景*/
#keyvisual main {
  position: absolute;
  top: 30px;
  width: 100%;
  height: 1200px;
  background-image: url("../../_image/bg_keyvisual_2.webp");
  background-image: image-set(url("../../_image/bg_keyvisual_2.webp") 1x, url("../../_image/bg_keyvisual_2@2x.webp") 2x);
  background-image: -webkit-image-set(url("../../_image/bg_keyvisual_2.webp") 1x, url("../../_image/bg_keyvisual_2@2x.webp") 2x);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  z-index: 1;
}
#keyvisual main.light {
  position: absolute;
  top: 30px;
  height: 1200px;
  background-image: url("../../_image/bg_keyvisual_2B.webp");
  background-image: image-set(url("../../_image/bg_keyvisual_2B.webp") 1x, url("../../_image/bg_keyvisual_2B@2x.webp") 2x);
  background-image: -webkit-image-set(url("../../_image/bg_keyvisual_2B.webp") 1x, url("../../_image/bg_keyvisual_2B@2x.webp") 2x);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  z-index: 2;
}

/*グラデ背景白*/
.white {
  position: relative;
  height: 1200px;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, .5) 10%, rgba(255, 255, 255, 0) 15%);
  z-index: 1;
}


/*-----------------------------------------*/
/*Xを見せてやる。*/
.kv_catch2 {
  position: absolute;
  width: 140px;
  top:110px;
  left: 50%;
  margin-left: 330px;
  z-index: 10;
}
  /*-----------------------------------------*/
/*キャラクター配置*/
.kv_chara {
  position: absolute;
  width: 100%;
  min-width: 1468px;
  height: auto;
  top: 30px;
  left: 50%;
  transform: translateY(0%) translateX(-50%);
  -webkit-transform: translateY(0%) translateX(-50%);
  z-index: 3;
}

.kv_chara img{
}







  /*-----------------------------------------*/
/*ロゴ*/
.kv_logo {
  opacity: 0;
  position: absolute;
  width: 100%;
  min-width: 1468px;
  height: auto;
  top: 30px;
  left: 50%;
  transform: translateY(0%) translateX(-50%);
  -webkit-transform: translateY(0%) translateX(-50%);
  z-index: 4;
}
  /*-----------------------------------------*/
/*放送開始日*/
.kv_date {
  opacity: 0;
  position: absolute;
  width: 862px;
  top: 230px;
  left: 50%;
  transform: translateY(0%) translateX(-50%);
  -webkit-transform: translateY(0%) translateX(-50%);
  z-index: 4;
}







/*-----------------------------------------*/
/*11.イントロダクション*/
/*-----------------------------------------*/
.introduction {
  overflow: hidden;
  position: relative;
  max-width: var(--baseWidth);
  margin: var(--marginBtm);
  display: flex;
  align-items: center;
}

/*紹介文*/
.introduction p {
  position: relative;
  max-width:390px;
  margin: 0;
  line-height: 2.4;
  letter-spacing: 0.2em;
}
/*紹介文*/
.introduction .inner.ex {
  position: relative;
  max-width:710px;
  margin: 0;
}

/*-----------------------------------------*/
/*ex
/*-----------------------------------------*/
/*イントロダクション背景*/
.ex .intro_bg {
  position: relative;
  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;
  z-index: 7;
}

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

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




/*-----------------------------------------*/
/*11.トップページ ムービー*/
/*-----------------------------------------*/
/*エリア*/
.sliderArea {
  overflow: hidden;
}

/*スライダーエリアの幅*/
.sliderWide {
  max-width: 100%;
}

/*-----------------------------------------*/
/*スライダーの矢印*/
.sliderWide .slick-arrow {
  opacity: 0.5;
  transition-duration: 0.3s;
  /*スライダーより上に配置*/
  z-index: 5;
}

/*スライダーの矢印：オンマウス*/
.sliderWide:hover .slick-arrow {
  opacity: 1;
}

/*-----------------------------------------*/
/*スライダー個別レイアウト*/
.slider {
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
}

/*スライダー個別（中央）*/
.slider .slick-list {
  overflow: visible;
}

/*スライダー全体*/
.slider .slick-track {}

/*スライダー個別*/
.slider .slick-slide {
  padding: 0 40px;
  opacity: .5;
  transition-duration: 0.3s;
}

/*現在表示されているスライド*/
.slider .slick-slide.slick-current {
  opacity: 1;
}

/*リンクがある場合*/
.slider .slick-slide a {
  display: block;
}

/*リンクがある場合:ホバー*/
.slider .slick-slide a:hover {
  display: block;
  opacity: .7;
}

/*画像がある場合*/
.slider img {
  height: auto;
  width: 100%;
}

.slick-prev,
.slick-next {
  z-index: 1;
}

/*-----------------------------------------*/
/*ページネーション設定（今回は非表示）*/
.slick-dots {
  bottom: -30px;
}

/*-----------------------------------------*/
/*戻る矢印*/
.prevTop {
  position: absolute;
  width: 20px;
  top: 50%;
  left: 2px;
  margin-top: -20px;
  opacity: .6;
  cursor: pointer;
}

/*次へ矢印*/
.nextTop {
  position: absolute;
  width: 20px;
  top: 50%;
  right: 2px;
  margin-top: -20px;
  opacity: .6;
  cursor: pointer;

}

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

/*-----------------------------------------*/
/*1.ニュース*/
/*-----------------------------------------*/
ul.newsList {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: var(--baseWidth);
  margin: var(--marginBtm);
}

/*レイアウト*/
ul.newsList li {
  position: relative;
  width: 33.333%;
  background: #FFF;
  margin: 0;
  padding: 0;
}

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

/*-----------------------------------------*/
/*ニュース設定（トップページのみ）*/
#index ul.newsList {
  /*公開時はセンター*/
  /*ニュースが増えたら左寄せに変更*/
  justify-content: center;
}

/*-----------------------------------------*/
/*トップページは基本非表示*/
#index ul.newsList li {
  display: none;
}

/*-----------------------------------------*/
/*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.4rem;
  line-height: 1.4;
}

/*日付*/
ul.newsList i {
  display: block;
  padding: 8px 4px 4px;
  font-size: 1.2rem;
  opacity: .8;
  text-align: left;
}
.newsColumn strong {
  font-size: 1.8rem;
  color: #FFF;
  background: #000;
  padding: 4px 4px 3px;

}

.newsColumn em {
  color: #e13234;
}




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

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

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

ul.staff li:nth-of-type(2) {
  line-height: 1;
}

/*最後の下線は非表示*/
ul.staff li:last-child,
ul.staff.cast li:last-child {
  border: none;
}

/*-----------------------------------------*/
/*キャストレイアウト*/
ul.staff li a {
  color: #333;
}

ul.staff li a:visited,
ul.staff li a:hover,
ul.staff li a:active {
  color: #333;
  opacity: 0.5;
}

/*-----------------------------------------*/
/*スタッフ＆キャスト+ポップアップ共通*/
/*-----------------------------------------*/
/*役職*/
.create i {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 1.8rem;
}

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

/*コメントアイコン*/
.create em::after {
  content: "";
  display: inline-block;
  width: 92px;
  height: 24px;
  background-image: url(../../_image/cmn_comment2.svg);
  background-repeat: no-repeat;
  background-size: auto 21px;
  vertical-align: middle;
  margin-left: 12px;
}

/*-----------------------------------------*/
/*ポップアップ*/
/*-----------------------------------------*/
/*magnificを上書き*/
.mfp-bg {
  z-index: 1042;
  background: #FFF;
  opacity: 0.95;
  animation: fadeIn .2s ease-in 0s 1 normal;
}

/*コメントポップアップレイアウト*/
.popup {
  position: relative;
  width: 840px;
  margin: 0 auto;
  background: #f4f4f4 url("../../_image/bg_popup.png") no-repeat center top/100%;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
  border: 1px solid rgba(0, 0, 0, 0.05);
}

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

/*閉じるボタン*/
.popup button.mfp-close {
  position: absolute;
  width: 24px;
  height: 24px;
  background: #f4f4f4 url("../../_image/cmn_popClose.svg") no-repeat center top/100%;
  top: 10px;
  right: 10px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

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

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

/*写真*/
.popup dl dt {
  width: 40%;
}

/*テキスト*/
.popup dl dd {
  width: 60%;
  padding: 24px;
}

/*声優名*/
.popup dl dd em {
  display: inline-block;
  padding-bottom: 16px;
  font-size: 2.8rem;
  line-height: 1.5;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/*-----------------------------------------*/
/*5.配信情報*/
/*-----------------------------------------*/
/*バナー*/
.onairBnr {
  position: relative;
  width: 838px;
  margin: -42px 0 56px -19px;
}

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

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

/*最後の下線は非表示*/
ul.onair li:last-child {
  border: none;
}

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

/*チャンネル名*/
ul.onair li dl dt {
  width: 20%;
}

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

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

/*-----------------------------------------*/
/*６.ムービー*/
/*-----------------------------------------*/
.movie .imgBox.l3 {
  width:1112px;
}

.movie .imgBox.l3 li {
  padding: 0 16px 24px;
  width: 33.333%;
}

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

/*-----------------------------------------*/
/*7.ミュージック*/
/*-----------------------------------------*/
.music .imgBox {
  width: 600px;
  margin: 2em auto 2em;
  text-align: center;
}
/*ワンオクの動画のみ
.music .imgBox:nth-of-type(2) {
  width: 600px;
  margin: 2em auto 6em;
  text-align: center;
}*/
/*曲名・詳細*/
.music cite {
  display: block;
  margin: 4px 0 12px;
}
/*画像の高さを固定*/
.music cite img {
  height: 26px;
  margin: 4px;
}

/*コメントテキスト*/
.music p {
  line-height: 1.8;
}

/*コメントテキスト*/
.music .musicNav {
  display: flex;
  justify-content: center;
  padding:56px 0 0;
}


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

.music .musicNav li:first-child {
  border-radius: 24px 0 0 24px;
 
}
.music .musicNav li:last-child {
  border-radius: 0 24px 24px 0  ;

 
}


/*-----------------------------------------*/
/*オンマウス・アクティブ*/
.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 1px;
    padding: 8px 100px;
    /*アニメーションで変化*/
    transition: background-color .3s;
}


.music .musicNav li a {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  color: #FFF;
}



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

.anime #fNav ul {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  margin: 0 auto -12px;
  padding: 0;
}

.anime #fNav ul li {
  width: 400px;
  margin: 0 auto;
  padding: 0 6px 12px;
}

/*-----------------------------------------*/
/*フッター（各サイトへのリンク集）*/
/*-----------------------------------------*/
/*各サイトへのリンク集*/
.anime #footerLink {
  position: relative;
  background: #000;
  padding: 60px 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: 920px;
  margin: 0 auto;
  padding: 0 0 36px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.anime .footerLink dl dt {
  line-height: 1.4;
}

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

/*ホバーで下線を消去*/
.anime .footerLink dl dt a:hover {
  text-decoration: none;
}

/*各リンクテキスト*/
.anime .footerLink dl dd a {
  display: block;
  padding: 0 0 8px;
}

/*-----------------------------------------*/
/*今後全ページ共通に変更予定*/
/*-----------------------------------------*/
footer {
  position: relative;
  background: #000;
  padding: 60px 0 24px;
  font-size: 12px;
  color: #fcfcfc;
  text-align: center;
  /*filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));*/
  z-index: 1;
}

/*-----------------------------------------*/
/*アニメサイトでは<i>　©ＴＯＭＹ</i>を非表示*/
.anime footer i {
  display: none;
}

/*-----------------------------------------*/
/*外部リンクナビゲーション（youtube・twitter・コロコロ）*/
ul#footerNav {
  display: flex;
  width: 978px;
  margin: 0px auto 36px;
  flex-wrap: nowrap;
}

ul#footerNav li {
  margin: 0 -0.5%;
}

/*-----------------------------------------*/
/*フッターバナー（関連サイトにリンク）*/

ul#footerBnr {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  max-width: 972px;
  margin: 0 auto 32px;
}



ul#footerBnr li {
  width: 33.333%;
  margin: 0 4px;
}

/*アニメサイトではアニメのバナーを非表示*/
.anime ul#footerBnr li:nth-of-type(3) {
  display: none;
}

/*-----------------------------------------*/
/*特定商取引（商品情報以外は非表示）*/
.sct {display: none;}

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

/*ページトップに戻る ドロップシャドウ*/
#page-top img {
  /*filter: drop-shadow(0px 0px 5px rgba(15, 82, 109, 0.4));*/
}

/*-----------------------------------------*/
/*5.CSSアニメーション*/
/*-----------------------------------------*/
/*要素を徐々に表示*/
/*サイト全体*/
body {
  animation: fadeIn .8s ease-in 0s 1 normal;
}

/*コメントポップアップ背景*/
.popup {
  animation: fadeIn .2s ease-out 0s 1 forwards;
}

/*コメントポップアップ：オープン時*/
.mfp-ready {
  animation: fadeIn_scale .4s ease-out 0s 1 normal;
}

/*コメントポップアップ：クローズ時*/
.mfp-removing {
  animation: fadeOut .4s ease-out 0s 1 forwards;
}

/*-----------------------------------------*/
/*5.CSSアニメーション設定*/
/*-----------------------------------------*/
/*サイト全体・コメントポップアップ背景*/
@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

/*コメントポップアップ：オープン時*/
@keyframes fadeIn_scale {
  0% {
    opacity: 0;
    scale: 0.9;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}

/*コメントポップアップ：クローズ時*/
@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/*-----------------------------------------*/
/*YOUTUBEレスポンシブ*/
.mov {
  position: relative;
  width: 880px;
  margin: 0 auto;
  padding: 0;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  box-sizing: border-box;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}