.tume200{margin-top:-200px!important;}
.tume300{margin-top:-300px!important;}
.tume400{margin-top:-400px!important;}
.tume450{margin-top:-350px!important;}
.tume600{margin-top:-600px!important;}
.tume700{margin-top:-700px!important;}
.tume1000{margin-top:-1000px!important;}

#sub_nav ul {
width:300px;
display: flex;flex-wrap: nowrap;
position: absolute;
bottom:7px;
left:-450px;right: 0px;margin:0 auto;
}
#sub_nav ul a {
padding: 5px;
background: #333;
border: solid thin #ccc;
text-decoration: none;
color: #CCC;
text-align: center;
font-size: 12px;
display: block;
}
    #sub_nav ul a:hover {
        background: #646464;
        color: #fff
    }
.language_button{width:110px;font-family: 'Josefin Sans', sans-serif;font-size:15px; line-height:1.6em;color:#FFF;text-align: center;padding-top:4px;}

#lower.beyblade section {
background: #000;
}
#wrapper {background: #000;padding-bottom:20px;
}

       #history section#gen1, section#gen2, section#gen3, section#gen4 {display:none;}
       #history ruby rt{font-size:9px;}
       #history .slider{width:100%; display:flex;flex-wrap:wrap;position: relative;z-index:99;}
       #history .slider div{width:33.33%;background:#e4e4e4;}

[data-ruby] {
    position: relative;
}
[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -2.5em;
    left: -0.5em;
letter-spacing: -0.1em;
    font-size: 0.5em;white-space: nowrap;
}

.slick-img, .floatLeft {
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  width: 100%;
}
.slick-img img, .floatLeft img {
  height: auto;
  transition: transform .4s ease;/* ゆっくり変化させる */
  width: 100%;
}
.slick-img:hover img, .floatLeft:hover img {
  transform: scale(1.2);/* 拡大 */
}

 #history .movie-wrap {
width: 800px;
height: 450px;
padding-top: 0;
margin: auto;
}

 #history p.midashi{display:inline-block;border:1px solid #000;padding:0 0.5em;margin:20px 0 0 20px;color:#000;}
 #history .youtube{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
 #history .youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}
    /*ページローダー*/
 #history #loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 10000000000;
}
 #history #loader {
  display: none;
  position: fixed;
  top: 47%;
  left: 50%;
  width: 104px;
  height: 104px;
  margin-top: -52px;
  margin-left: -52px;
  text-align: center;
  color: #000;
  z-index: 10000000001;
}


 #history nav#nav{width:100%;background:rgba(30,30,30,0.8);opacity: 0;position: fixed;}
 #history nav#nav #navInner{width:735px;margin:0 auto;display:flex;flex-wrap:nowrap;}
 #history nav#nav.fixed{position: fixed;bottom:0px;
z-index:10; animation-name: fadein;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;}
      @keyframes fadein {
  0% {
     opacity: 0;
  }
  100% {
     opacity: 1;
  }
}

        #history .leadImg{display: flex;justify-content: center;}
       #history .leadImg p{font-size:18px;text-align: center;color:#FFF;display:inline-block;  border:1px solid #bf3426;padding:7px 15px;}
        #history #gen2 .leadImg p{border:1px solid #00a5f1;}
        #history #gen3 .leadImg p{border:1px solid #fbe74c;}
        #history #gen4 .leadImg p{border:1px solid #86bc42;}
      
     #history .fadeInPict {
      margin: 0px auto;
    }
     #history .floatLeft{width:33.33%; float:left;margin-right:20px;}
     #history section.since1 {
      background: #999;
    }

     #history section.since2 {
      background: #ccc;
    }

     #history .nav-open {
      color: #bf3426;
      position: relative;
      width: 100%;
      display: block;
    padding-top:333px;
    background-image: url(../img/lead_gen1.jpg), url(../img/bg_lead1.jpg);
	background-position: center top, center top;
	background-repeat: no-repeat, repeat-x;
    }
    #history #gen2Lead.nav-open {
      color: #0184c0;
    padding-top:333px;
    background-image: url(../img/lead_gen2.jpg), url(../img/bg_lead2.jpg);
	background-position: center top, center top;
	background-repeat: no-repeat, repeat-x;
    }
    #history #gen3Lead.nav-open {
      color: #fbe74c;
    padding-top:333px;
    background-image: url(../img/lead_gen3.jpg), url(../img/bg_lead3.jpg);
	background-position: center top, center top;
	background-repeat: no-repeat, repeat-x;
    }

    #history #gen4Lead.nav-open {
      color: #86bc42;
    padding-top:333px;
    background-image: url(../img/lead_gen4.jpg), url(../img/bg_lead4.jpg);
	background-position: center top, center top;
	background-repeat: no-repeat, repeat-x;
    }
 #history .nav-open p{position: absolute;left:0;right:0;margin:0 auto; bottom:15px;display:block;text-align:center;}

    #history div#header1 {
      width: 100%;
      height: 620px !important;
      min-width: 1100px;
      position: relative;
      justify-content: center;
      overflow: hidden;
      align-items: center;
    }

     #history div#header1 .inner {
      width: 1100px;
      margin: 0 auto;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
    }

p.attention{width:310px;text-align: center;font-size:11px;color:#666;margin:20px auto;background:#FFF;padding:3px 6px;}

 #history dl#branding{width:900px;margin:60px auto;}

 #history dl#branding dt{width:60%;float:left;color:#d6d6d6;}
 #history dl#branding dt img{margin:20px 0;}
 #history dl#branding dt p{margin:15px 0;font-size:21px; line-height:2.2em;letter-spacing: 0.1em}
#history dl#branding dt.en p{font-size:17px;line-height:2em; }
 #history dl#branding dd{margin-left:64%;width:36%;}
 #history dl#branding dd img{width:100%;margin:10px 0;}

/*-----------------------------------------------SP用ページ用設定*/
@media screen and (max-width: 667px) {
p.attention{font-size:2.6vw;text-align: center;color:#999;width:84%;}
#sub_nav ul {
width:auto;
display: flex;flex-wrap: nowrap;justify-content: right;
position: absolute;z-index:5;
bottom:5px;
left:auto;right: 5px;margin:0 auto;
}
#sub_nav ul a {
padding: 5px;
background: #333;
border: solid thin #ccc;
text-decoration: none;
color: #CCC;
text-align: center;
font-size: 12px;
display: block;
}
    #sub_nav ul a:hover {
        background: #646464;
        color: #fff
    }
.language_button{width:auto;font-family: 'Josefin Sans', sans-serif;font-size:12px; line-height:1.6em;color:#FFF;text-align: center;padding:6px 10px 0;}
    
   #history P{line-height: 1.5em;}
    
 #history .spmgtop{margin-top:0.3em;}
    
.tume200{margin-top:0!important;}
.tume300{margin-top:0px!important;}
.tume400{margin-top:0px!important;}
.tume450{margin-top:0px!important;}
.tume600{margin-top:0px!important;}
.tume700{margin-top:0px!important;}
.tume1000{margin-top:0px!important;}
    
    .tume100,.tume400,.tume450{margin-top:0px!important;}
    
           #history .leadImg{width:100% ; margin:0 ;}
           #history .leadImg p{width:96%;font-size:3.5vw; text-align: center;color:#FFF;display:inline-block;  border:1px solid #bf3426;padding:7px 15px;}
    
    #history nav#nav{width:100%;background:rgba(30,30,30,0.8);opacity: 0;position: fixed;display:flex;justify-content: center;flex-wrap:nowrap;}
#history nav#nav #navInner {
    width: 100%;
    margin: 0 auto;

    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 13%;
}
     #history nav#nav #navLogo img{display:none;}
#history nav#nav #navLogo {
    width: 100%;
    height: auto;
    background: url(../img/nav_title.webp) left 1% top no-repeat;
    background-size: 42% auto;
    padding-top: 14%;
    position: absolute;
    z-index: 1;
    bottom: 0%;
}
    
     #history nav#nav a{width:25%;}
        #history nav#nav #sub_nav a{width:auto;}
     #history nav#nav a img{width:100%;}
     #history nav#nav.fixed{position: fixed;right:0;left:0;margin:0 auto; top:auto;bottom:0;  -webkit-transform: translateY(0%); /* Safari用 */
  transform: translateY(0%);z-index:10;}

   #history div#header1 {
      width: 100%;
      height: 410px !important;
      min-width: 100%;
      position: relative;
      justify-content: center;
      overflow: hidden;
      align-items: center;
    }

     #history div#header1 .inner {
      width: 100%;background:url(../img/top1_sp.webp) center top no-repeat;
        background-size:100% auto;
        padding-top:100%;
      margin: 0 auto;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
     #history div#header1 .inner img{display:none;}
    #history .floatLeft{float:left;margin-right:20px;}
    #history .fadeInPict {
      margin: 0px auto 15px;
    }
      
 #history dl#branding{width:90%;margin:40px auto;}

 #history dl#branding dt{width:100%;float:none;color:#FFF;}
 #history dl#branding dt img{width:80%;margin:30px 10%;}
 #history dl#branding dt p{margin:15px 0;font-size:3.5vw; line-height:1.5em;letter-spacing: 0.1em}
 #history dl#branding dd{width:70%;margin:0 15%;}
 #history dl#branding dd img{width:100%;}
    
    
 #history .nav-open {
    color: #bf3426;
    position: relative;
    width: 100%;
    display: block;
    padding-top: 53.5%;
    background-image: url(../img/lead_gen1.jpg), url(../img/bg_lead1.jpg);
    background-position: center top, center top;
    background-repeat: no-repeat, repeat-x;
    background-size: 100% auto;
}   
     #history #gen2Lead.nav-open {
    padding-top: 53.5%;
    }
     #history #gen3Lead.nav-open {
    padding-top: 53.5%;
    }

     #history #gen4Lead.nav-open {
    padding-top: 53.5%;
    }
    
 #history .nav-open p{position: absolute;left:0;right:0;margin:0 auto; font-size:3vw;bottom:17px;display:block;text-align:center;}

}


/* オーバーレイ 初期状態 */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
/* オーバーレイ 表示アニメーション */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: .8;
}
/* オーバーレイ 非表示アニメーション */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* コンテンツ 初期状態 */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
/* コンテンツ 表示アニメーション */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* コンテンツ 非表示アニメーション */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}