@charset "UTF-8";

/*ポータル用スマホ*/
/*-----------------------------------------------SP用ページ用設定*/
@media screen and (max-width: 667px) {

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

  .sp {
    display: block;
  }

  body {
    background: rgb(15, 15, 15);
  }

  /*-----------------------------------------*/
  /*基本レイアウト*/
  /*-----------------------------------------*/
  .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;
    text-align: center;
    overflow: hidden;
  }

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

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

  /*下層ページ：ヘッダー下ライン*/
  #lower header::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    background: rgb(162, 255, 31);
    background: linear-gradient(90deg, rgba(162, 255, 31, 1) 0%, rgba(198, 255, 117, 1) 100%);
    bottom: 0;
  }

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

ul#footerNav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: 0px auto 30px;
  }
  ul#footerNav li {
    width: 46%;
    margin: 2px 10%;
  }
  ul#footerNav li.brank {
    width: 50%;
    margin: 2px -1.5%;
  }



  ul#footerNav li.brank:nth-of-type(4),
  ul#footerNav li.brank:nth-of-type(5) {
    width: 50%;
    margin: 2px -1.7%;
  }

    ul#footerNav li.brank:nth-of-type(2),
  ul#footerNav li.brank:nth-of-type(4) {
text-align: right;
  }
      ul#footerNav li.brank:nth-of-type(3),
  ul#footerNav li.brank:nth-of-type(5) {
    width: 50%;
    margin: 2px -1.7%;
    text-align: left;
  }


  /*-----------------------------------------*/
  /*h1テキスト*/
  /*-----------------------------------------*/
  h1 {
    position: relative;
    font-size: 12px;
    color: #fcfcfc;
    line-height: 2;
    letter-spacing: 0.1em;
    text-align: center;
    z-index: 20;
  }

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

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

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

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

  /*下線*/
  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: 55px;
  }


  /*-----------------------------------------*/
  /*セクションレイアウト*/
  /*-----------------------------------------*/
  .beyblade section {
    /*.forntのpaddingより少し小さく*/
    margin-top: 100vh;
  }

  /*キービジュアルの動画があるため
トップページは背景色と背景画像を分ける*/
  .beyblade section .inner {
    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%);
  }

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

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

  article.bnr ul li {
    width: 100%;
    margin: 0 0 24px;
    background: #111;
    color: #333;
    text-align: center;
  }



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


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

  /*videoタグが全面になるように配置*/
  #mv {
    position: absolute;
    top: 0;
    left: 50%;
    width: 240%;
    height: 100vh;
    background: rgb(0, 0, 0);
    margin-left: -120%;
  }

  /*videoタグ*/
  #mv video {
    position: absolute;
    top: 0;
    left: 50%;
    width: 240%;
    height: 100vh;
    background: rgb(0, 0, 0);
    margin-left: -120%;
  }

  /*動画の高さ*/
  .front {
    position: relative;
    width: 100%;
    padding-top: 80vh;
    /* 360/640*100 */
  }


  /*-----------------------------------------*/
  /*動画にかかるドット*/
  main .bg_dot {
    position: absolute;
    width: 100%;
    height: 100vh;
    background: url("../../_image/bg_dot.png")repeat center top/80% 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: 80%;
    height: auto;
    z-index: 4;
    opacity: 0.8;
  }



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

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

  /*テキスト（ベイブレードはスポーツへ）*/
  .message .portal_image_txt {
    border: 1px s solid saddlebrown;
    position: absolute;
    width: 50%;
    height: auto;
    background: url("../../_image/portal_image_txt.svg") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 70/800);
    top: 138px;
    left: -50px;
    z-index: 3;
    opacity: 0;
  }

  /*背景ロゴ*/
  .message .cmn_logo {
    position: absolute;
    width: 70%;
    height: auto;
    margin: 0 auto;
    top: 418px;
    right: 120px;
    z-index: 1;
    opacity: 0;
  }



  /*-----------------------------------------*/
  /*リード*/
  /*-----------------------------------------*/
  .message_read {
    position: relative;
    width: 100%;
    margin: 0 auto 24px;
    padding: 0 0 0 0;
    padding-top: 64%;
    z-index: 2;
  }

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

  .message_read i:nth-of-type(1) {
    background: url("../../_image/message_read01.svg") no-repeat left top/auto 13px;
  }

  .message_read i:nth-of-type(2) {
    background: url("../../_image/message_read02.svg") no-repeat left top/auto 13px;
  }

  .message_read i:nth-of-type(3) {
    background: url("../../_image/message_read03.svg") no-repeat left top/auto 13px;

  }

  .message_read i:nth-of-type(4) {
    background: url("../../_image/message_read04.svg") no-repeat left top/auto 13px;
    margin-bottom: 24px;
  }

  .message_read i:nth-of-type(5) {
    background: url("../../_image/message_read05.svg") no-repeat left top/auto 13px;
  }

  .message_read i:nth-of-type(6) {
    background: url("../../_image/message_read06.svg") no-repeat left top/auto 13px;
  }

  .message_read i:nth-of-type(7) {
    background: url("../../_image/message_read07.svg") no-repeat left top/auto 13px;

  }

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

  }

  .message_read i:nth-of-type(9) {
    background: url("../../_image/message_read09.svg") no-repeat left top/auto 13px;
    margin-bottom: 24px;
  }

  .message_read i:nth-of-type(10) {
    background: url("../../_image/message_read10.svg") no-repeat left top/auto 13px;
  }

  .message_read i:nth-of-type(11) {
    background: url("../../_image/message_read11.svg") no-repeat left top/auto 13px;
  }

  .message_read i:nth-of-type(12) {
    background: url("../../_image/message_read12.svg") no-repeat left top/auto 13px;
    margin-bottom: 24px;
  }

  .message_read i:nth-of-type(13) {
    position: relative;
    display: block;
    width: 90%;
    height: 32px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    opacity: 0;
    background: url("../../_image/message_read13.svg") no-repeat left top/auto 16px;
  }

  .message_read picture { 
    display: block;
    margin: 16px 0 32px;
    width: 62%;
  }
  

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


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

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

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








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

  article.news ul.newsNav li {
    position: relative;
    margin: 0 6px 12px;
    padding: 0 8px 4px;
    font-size: 13px;
    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;
  }

  /*-----------------------------------------*/
  /*ニュース詳細*/
  article.news .newsBox {
    width: 96%;
    margin: 0 auto;
    background: #FFF;
  }

  /*コンテンツレイアウト*/
  article.news .newsBox .inner {
    width: 92%;
    margin: 0 auto;
    padding: 30px 0;
  }

  /*-----------------------------------------*/
  /*ニュース見出し*/
  h4 {
    position: relative;
    margin: 0 auto 8px;
    padding: 0 12px 12px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: normal;
    color: #333;
    text-align: left;

  }

  /*日付*/
  h4 i {
    display: block;
    padding: 0 0 4px;
    font-size: 14px;
    color: #bcbcbc;
    font-style: normal;
  }

  /*下線*/
  h4::after {
    content: "";
    position: absolute;
    width: 100%;
  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.png") 2x);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 6px;
    bottom: 0;
    left: 0;
  }


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

  }

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

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

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

  /*戻るリンク*/
  a.linkTxt {
    display: block;
    margin: 0 auto;
    padding: 36px 0 0;
    font-size: 14px;
    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: 100%;
    margin: 0 auto;
  }

  /*レイアウト*/
  article.news ul.newsList li {
    position: relative;
    width: 46%;
    background: #FFF;
    margin: 0 2% 24px;
    padding-bottom: 24px;
    color: #333;
    text-align: left;
  }

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

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

  ul.newsList li img {
    width: 100%;
    max-width: auto;
  }



  /*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: 14px;
    line-height: 1.4;
  }

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

  /*-----------------------------------------*/
  /*YOUTUBEレスポンシブ*/

  .mov {
    width: 90%;
    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));
  }


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

  /*-----------------------------------------*/
  /*mixup専用*/
  .container .mix,
  .container .gap {
    display: inline-block;
    width: 49%;
  }

  #container .mix {
    display: none;
  }


  /*-----------------------------------------*/
  /*動画*/
  /*-----------------------------------------*/
  .movie-content-wrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-top: 56.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]::before {
    content: attr(data-ruby);
    position: absolute;
    left: -2em;
    top: -1.1em;
    right: -2em;
    text-align: center;
    font-size: .6em;
  }



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