@charset "UTF-8";

/*-----------------------------------------*/
/*黒角R大ボタン*/
a.btnRoundWH {
  position: relative;
  display: block;
  max-width: 300px;
  background: #FFF url("../_image/cmn_arrow_wh.svg") no-repeat right 12px center/5px auto;
  margin: 0 auto;
  padding: 0 32px;
  font-size: 15px;
  line-height: 37px;
  color: #333;
  border-radius: 50px;
  text-align: center;
}

a.btnRoundWH:link {
  color: #333;
}

a.btnRoundWH:visited {
  color: #333;
}


/*ポータル用PC*/
/*----------------------------------------------PC用ページ用設定*/
/*表示非表示*/
.pc {
  display: block;
}

.sp {
  display: none;
}

/*画像*/
img,
svg {
  max-width: 100%;
  height: auto;
}

/*リンク基本*/
a:link {
  color: #fcfcfc;
}

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

/*-----------------------------------------*/
/*基本レイアウト*/
/*-----------------------------------------*/
.beyblade {
  position: relative;
  background: rgb(15, 15, 15);
  background: linear-gradient(320deg, rgba(15, 15, 15, 1) 0%, rgba(25, 25, 25, 1) 90%, rgba(45, 45, 45, 1) 100%);
  font-size: 16px;
  color: #fcfcfc;
  line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, Arial, Helvetica, Verdana, sans-serif;
  text-align: center;
}

/*-----------------------------------------*/
/*トップページ：ヘッダー*/
/*-----------------------------------------*/
header {
  position: absolute;
}

/*-----------------------------------------*/
/*下層ページ：ヘッダー*/
/*-----------------------------------------*/
#lower header {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  z-index: 2;
}

/*-----------------------------------------*/
/*フッター*/
/*-----------------------------------------*/
.beyblade footer {
  padding: 120px 0 24px;
  font-size: 12px;
  text-align: center;
  /*filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));*/
}

.beyblade footer i {
 font-style: normal;
}

/*ナビゲーションバナー（youtube・twitter・コロコロ）*/
ul#footerNav {

  display: flex;
  width: 978px;
  margin: 0px auto 30px;
  flex-wrap: nowrap;

}

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

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

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

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

/*-----------------------------------------*/
/*ポータルサイト誘導バナー*/
.portal {
  display: none;
}

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



/*-----------------------------------------*/
/*h1テキスト*/
/*-----------------------------------------*/
h1 {
  background: linear-gradient(320deg, rgba(15, 15, 15, 1) 0%, rgba(25, 25, 25, 1) 90%, rgba(45, 45, 45, 1) 100%);
  font-size: 14px;
  color: #fcfcfc;
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: center;
}

/*-----------------------------------------*/
/*サイトロゴ（トップページは非表示）*/
/*-----------------------------------------*/
h2 {
  display: none;
}

/*サイトロゴ（下層は表示）*/
#lower h2 {
  display: block;
  padding: 4px 20px;
  margin-top: 4px;
}

/*-----------------------------------------*/
/*見出し*/
/*-----------------------------------------*/
h3 {
  display: inline-block;
  position: relative;
  margin: 0 auto 36px;
}

/*-----------------------------------------*/
/*もっと見る*/
h3 a {
  position: absolute;
  display: inline-block;
  margin: 0 auto;
  padding: 0 4px 2px;
  font-size: 15px;
  bottom: 12px;
  right: -500px;
}

/*下線*/
h3 a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: rgb(162, 255, 31);
  background: linear-gradient(90deg, rgba(162, 255, 31, 1) 0%, rgba(198, 255, 117, 1) 100%);
  bottom: 0;
  left: 0;
}

h3 a:hover {
  opacity: 0.6;
}

/*見出し画像*/
h3 img {
  height: 70px;
  /*filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.8));*/
}

/*-----------------------------------------*/
/*セクションレイアウト*/
/*-----------------------------------------*/
.beyblade section {
  position: relative;
  background: rgb(15, 15, 15);
  background: linear-gradient(320deg, rgba(15, 15, 15, 1) 0%, rgba(25, 25, 25, 1) 90%, rgba(45, 45, 45, 1) 100%);
  /*.forntのpaddingより少し小さく*/
  margin-top: 41.5%;
}

/*キービジュアルの動画があるため
トップページは背景色と背景画像を分ける*/
.beyblade section .inner {
  position: relative;
  background: url("../../_image/bg_section.svg") no-repeat center top/4020px auto;
}

/*下層ページはsection背景画像を入れる*/
#lower.beyblade section {
  min-height: 100vh;
  background: url("../../_image/bg_section.svg") no-repeat center top/4020px auto;
  margin: 0;
}

/*-----------------------------------------*/
/*各コンテンツレイアウト*/
/*-----------------------------------------*/
article {
  position: relative;
  text-align: center;
  padding-top: 120px;
}

/*-----------------------------------------*/
/*関連サイト誘導バナー設定*/
article.bnr ul {
  position: relative;
  display: flex;
  justify-content: center;
  max-width: 1024px;
  margin: 80px auto 0;
  z-index: 3;
}

article.bnr ul li {
  margin: 0 12px;
  background: #FFF;
  color: #333;
  text-align: center;
}

/*-----------------------------------------*/
/*キービジュアルエリア*/
/*-----------------------------------------*/
main {
  overflow: hidden;
  position: fixed;
  display: block;
  width: 100%;
  height: 80vh;
  /*TTヘッダー70px+h1テキスト28px*/
  top: 98px;
  left: 0;
}

/*-----------------------------------------*/
/*レイアウトボックス*/
.box {
  position: relative;
}

/*videoタグが全面になるように配置*/
#mv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*videoタグ*/
#mv video {
  width: 100%;
  height: 100%;
}

/*動画の高さ*/
.front {
  padding-top: 42%;
}

/*-----------------------------------------*/
/*動画にかかるドット*/
main .bg_dot {
  position: absolute;
  width: 100%;
  height: 80vh;
  background: url("../../_image/bg_dot.png")repeat center top/25% auto;
  mix-blend-mode: multiply;
  top: 0;
  left: 0;
  opacity: 0.6;
  z-index: 3;
}

/*ムービーの上に配置するロゴ*/
main .mv_logo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 30%;
  height: auto;
  z-index: 4;
  opacity: 0.8;
}

/*-----------------------------------------*/
/*メッセージ(ベイブレードはスポーツへ)*/
/*-----------------------------------------*/
.message {
  position: relative;
  width: 936px;
  margin: 0 auto;
}

/*画像*/
.message picture {
  position: absolute;
  width: 900px;
  top: 0px;
  right: -167px;
  opacity: 0;
}

/*テキスト（ベイブレードはスポーツへ）*/
.message .portal_image_txt {
  position: absolute;
  width: 480px;
   height: 140px;
   background: url("../../_image/portal_image_txt.svg") no-repeat left top;
  margin: 0 auto;
  top: 138px;
  left: -60px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  z-index: 3;
  opacity: 0;
}

/*背景ロゴ*/
.message .cmn_logo {
  position: absolute;
  width: 500px;
  height: 72px;
  margin: 0 auto;
  top: 618px;
  right: 266px;
  z-index: 1;
  opacity: 0;
}

/*-----------------------------------------*/
/*リード*/
/*-----------------------------------------*/
.message_read {
  position: relative;
  width: 936px;
  margin: 0 auto 48px;
  padding-top: 440px;
  text-align: left;
}

.message_read picture {
 opacity: 0;
}

/*リード文を１行ずつ表示*/
.message_read i {
  position: relative;
  display: block;
  width: 100%;
  height: 42px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  margin-left: -80px;
  opacity: 0;
}

.message_read i:nth-of-type(1) {
  background: url("../../_image/message_read01.svg") no-repeat left top;
} 
.message_read i:nth-of-type(2){
  background: url("../../_image/message_read02.svg") no-repeat left top;
} 
.message_read i:nth-of-type(3) {
  background: url("../../_image/message_read03.svg") no-repeat left top;
} 
.message_read i:nth-of-type(4) {
  background: url("../../_image/message_read04.svg") no-repeat left top;
  margin-bottom: 36px;
} 
.message_read i:nth-of-type(5) {
  background: url("../../_image/message_read05.svg") no-repeat left top;
} 
.message_read i:nth-of-type(6) {
  background: url("../../_image/message_read06.svg") no-repeat left top;
} 
.message_read i:nth-of-type(7) {
  background: url("../../_image/message_read07.svg") no-repeat left top;

} 
.message_read i:nth-of-type(8) {
  background: url("../../_image/message_read08.svg") no-repeat left top;

} 
.message_read i:nth-of-type(9) {
  background: url("../../_image/message_read09.svg") no-repeat left top;
  margin-bottom: 36px;
} 
.message_read i:nth-of-type(10) {
  background: url("../../_image/message_read10.svg") no-repeat left top;
} 
.message_read i:nth-of-type(11) {
  background: url("../../_image/message_read11.svg") no-repeat left top;
} 
.message_read i:nth-of-type(12) {
  background: url("../../_image/message_read12.svg") no-repeat left top;
  margin-bottom: 36px;
} 
.message_read i:nth-of-type(13) {
  position: relative;
  display: block;
  width: 100%;
  height: 42px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  opacity: 0;
  background: url("../../_image/message_read13.svg") no-repeat left top;
} 

/*バナー*/
.bnr_beyblade-x_product {
  text-align: center;
  opacity: 0;
}

/*-----------------------------------------*/
/*白1pxラインボタン*/
/*-----------------------------------------*/
a.btnBuy {
  position: relative;
  display: block;
  width: 636px;
  background: #111;
  margin: 67px auto 0;
  padding: 0;
  font-size: 15px;
  color:  rgba(255,255,255,1);
  line-height: 52px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.2);
  transform: skew(-20deg,0deg);
}

a.btnBuy div{
  position: relative;
  display: block;
  width: 636px;
  background: url("../../beyblade-x/_image/cmn_arrow_wh.svg") no-repeat right 18px center/6px auto;
  padding: 0 48px;

  line-height: 52px;
  transform: skew(20deg,0deg);
}

a.btnBuy div i{
display: inline-block;
  font-style: normal;
}



/*-----------------------------------------*/
/* 下層ニュース設定*/
/*-----------------------------------------*/
/*ニュースナビゲーション*/
#lower article.news ul.newsNav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 50px auto 40px;
}

article.news ul.newsNav li {
  position: relative;
  margin: 0 12px;
  padding: 0 8px 4px;
  color: #fcfcfc;

  text-align: center;
}

article.news ul.newsNav li::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background: rgb(162, 255, 31);
  background: linear-gradient(90deg, rgba(162, 255, 31, 1) 0%, rgba(198, 255, 117, 1) 100%);
  bottom: 0;
  left: 0;
}


.line5 {
  text-align: center;
  font-size: 0;
}
.line5 li{
  display: inline-block;
  width: 33.333%;
  text-align: center;
  font-size: 0;
  padding: 4px;
} 


/*-----------------------------------------*/
/*ニュース詳細*/
article.news .newsBox {
  width: 1024px;
  margin: 0 auto;
  background: #FFF;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.1));

}

/*コンテンツレイアウト*/
article.news .newsBox .inner {
  width: 920px;
  margin: 0 auto;
  padding: 60px 0;
  background: none;
  background-color: #FFF;
}

/*-----------------------------------------*/
/*ニュース詳細のタイトル*/
h4 {
  position: relative;
  margin: 0 auto 8px;
  padding: 0 12px 14px;
  font-size: 22px;
  line-height: 1.4;
  font-weight: normal;
  color: #333;
  text-align: left;
}

h4 i {
  display: block;
  padding: 0.5vw 0 0;
  font-size: 0.8vw;
  color: #bcbcbc;
  font-style: normal;
}

h4::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  background-image: url("../../beyblade-x/_image/h3_line.png");
    background-image: image-set(url("../../beyblade-x/_image/h3_line.png") 1x, url("../../beyblade-x/_image/h3_line@2x.png") 2x);
    background-image: -webkit-image-set(url("../../beyblade-x/_image/h3_line.png") 1x, url("../../beyblade-x/_image/h3_line@2x.png") 2x);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 1024px auto;  bottom: 0;
  left: 0;
}















/*カテゴリー*/
article.news .newsBox .inner i.cat {
  display: block;
  width: 940px;
  margin: 0 auto;
  padding: 0 12px;
  text-align: left;
  color: #bcbcbc;
  font-style: normal;
  font-size: 14px;
}

/*本文テキスト*/
article.news .newsBox .inner p {
  margin: 0 auto;
  padding: 24px 12px 24px;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  text-align: left;
}

/*本文テキスト 強調*/
article.news .newsBox .inner p strong {
  display: block;
  color: #71bb0a;
  text-align: left;
}

/*リンクボタン*/
a.linkBtn {
  display: block;
  width: 60%;
  margin: 12px auto 12px;
  padding: 12px 0 11px;
  font-size: 15px;
  line-height: 1.8;
  background: rgb(162, 255, 31);
  background: linear-gradient(90deg, rgba(162, 255, 31, 1) 0%, rgba(198, 255, 117, 1) 100%);

  color: #333;
  text-align: center;
}

/*戻るリンク*/
a.linkTxt {
  display: block;
  margin: 0 auto;
  padding: 36px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  text-align: center;
  text-decoration: underline;
}


/*-----------------------------------------*/
/*ニュース設定*/
article.news ul.newsList {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  max-width: 1158px;
  margin: 0 auto;
  padding: 0;
}

/*レイアウト*/
article.news ul.newsList li {
  border: 1px solid rgba(0, 0, 0, 0.8);
  position: relative;
  width: 362px;
  background: #FFF;
  margin: 0 12px 36px;
  padding-bottom: 24px;
  color: #333;
  text-align: left;
}

/* 下層ニュース設定*/
#lower article.news ul.newsList {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 1240px;
  margin: 0 auto;
}

#lower article.news ul.newsList li {
  position: relative;
  width: 22%;
  margin: 0 12px 36px;
  padding-bottom: 24px;
  background: #FFF;
  color: #333;
  text-align: left;
}

/*Aタグを要素全体に*/
article.news ul.newsList li a {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

article.news ul.newsList li:hover {
  opacity: 0.5;
}


article.news ul.newsList p {
  display: block;
  padding: 0 12px;
  font-size: 15px;
  line-height: 1.4;
}

article.news ul.newsList i {
  display: block;
  padding: 4px 12px 0;
  font-size: 14px;
  color: #bcbcbc;
  font-style: normal;
}




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

.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;
}

/*画像にドロップシャドウ*/
.beyblade .column img {
  filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.8));
}

/*-----------------------------------------*/
/*mixup専用*/
.container {
  /*text-align: justify;*/
}

.container .mix,
.container .gap {
  display: inline-block;
  width: 49%;
}

#container .mix {
  display: none;
}


  /*-----------------------------------------*/
  /*動画*/
  /*-----------------------------------------*/
.movie-content-wrap {
  position: relative;
  width: 60%;
  margin: 0 auto;
  padding-top: 36.25%;
}

.movie-content-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mfp-content {
  width: 80%;
  max-width: 0 auto;
  padding-top: 44px;
}

.mfp-fade01.mfp-bg {
  opacity: 0;
  transition: all 0.2s ease-out;
}

.mfp-fade01.mfp-bg.mfp-ready {
  opacity: 0.7;
}

.mfp-fade01.mfp-bg.mfp-removing {
  opacity: 0;
}

.mfp-fade01.mfp-wrap .mfp-content {
  opacity: 0;
  transition: all 0.2s ease-out;
}

.mfp-fade01.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}

.mfp-fade01.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

/**/
ruby[data-ruby] {
  position: relative;
}


ruby[data-ruby]::before {
  content: attr(data-ruby);
  position: absolute;
  left: -2em;
  top: -1.6em;
  right: -2em;
  text-align: center;
  font-size: .6em;
}



/*-----------------------------------------*/
/*スライダー（動画に変更になったため凍結）*/
/*-----------------------------------------*/
.swiper-slide {
  position: relative;
  height: 80vh;
}

.swiper-slide a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 36px 36px 0 36px;
  z-index: 3;
}

/*キービジュアル背景画像を設定*/
.kv1:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  background: url("../../_image/KeyVisual01.png") no-repeat center/cover;
  transition: all .5s ease-out;
  /*変化の時間*/
}

/*キービジュアル背景画像を設定*/
.kv2:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  background: url("../../_image/KeyVisual02.png") no-repeat center/cover;
  transition: all .5s ease-out;
  /*変化の時間*/
}

/*-----------------------------------------*/
/*ライン*/
.line {
  position: relative;
  width: 100%;
  height: 14px;
  background: url("../../_image/cmn_line.png") no-repeat right top/auto 14px;
  margin-top: -4px;
  z-index: 2;
}