@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&;800;900&family=IBM+Plex+Sans:wght@700&display=swap');
.pcOnly{
	display: block;
}
.spOnly{
	display: none;
}
div#wrapper{
	width:100%;
	margin: 0 auto;
	padding:0;
	zoom: 1;
	overflow: hidden;
}
body > div#wrapper{     height:auto; }

.Header-site .cb-social li{
  margin-left: 10px; }

.Header-site #twitter-widget-0{
  height: 26px !important; }

.Header-site .fb_iframe_widget{
  top: -0px; }

#contents{
	border-top: none;
	padding: 43px 0 0;
}

#mario a{
 -webkit-transition: all .3s;
 transition: all .3s;
 text-decoration: none;
 color: #003E81;
}
#mario a:hover{
  opacity:0.5;
  filter: alpha(opacity=50);
	text-decoration: none;
}
*{ zoom: 1 }
#mario{
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 font-weight: 700;
 margin: 0;
 padding: 43px 0 0;
 width: 100%;
 color: #000000;
	letter-spacing: 1px;
	/* font-feature-settings: "palt"; */
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


#mario .mainBg{
 margin: 0 auto;
 padding: 0;
 width: 100%;
 /*height: calc(100vh - 43px);*/
 height: 1374px;
 text-align: center;
 position: relative;
 background-image: url(../images/mainBg.jpg);
 background-position: center top;
 background-size: 2583px auto;
 background-repeat: no-repeat;
 overflow: hidden;
}
#mario .mainBg .main1{
 width: 57%;
 height: auto;
 position: absolute;
 top: -0.5vw;
 left: 40%;
 z-index: 9;
	opacity: 0;
}
#mario .mainBg .main1{
	animation-name: main1;
	animation-duration: 0.4s; /*アニメーション時間*/
	animation-timing-function: ease; /*アニメーションさせるイージング*/
	animation-delay: 1s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
#mario .mainBg .main2{
 width: 26%;
 height: auto;
 position: absolute;
 top: 1vw;
 right: 71%;
 z-index: 8;
	opacity: 0;
}
#mario .mainBg .main2{
	animation-name: main2;
	animation-duration: 0.5s; /*アニメーション時間*/
	animation-timing-function: ease; /*アニメーションさせるイージング*/
	animation-delay: 1.5s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
#mario .mainBg .main3{
 width: 15%;
 height: auto;
 position: absolute;
 top: 40vw;
 right: 75%;
 z-index: 7;
	opacity: 0;
}
#mario .mainBg .main3{
	animation-name: main3;
	animation-duration: 0.5s; /*アニメーション時間*/
	animation-timing-function: ease; /*アニメーションさせるイージング*/
	animation-delay: 1.7s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
#mario .mainBg .main4{
 display: none;
}
#mario .mainBg .logo{
 width: 36%;
 height: auto;
 position: absolute;
 top: 15vw;
 right: 48%;
 z-index: 10;
	opacity: 0;
}
#mario .mainBg .logo{
	animation-name: logo;
	animation-duration: 0.3s; /*アニメーション時間*/
	animation-timing-function: ease; /*アニメーションさせるイージング*/
	animation-delay: 2s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: both; /*アニメーション後のスタイルをどうするか*/
}
#mario .mainBg .logo img{
 width: 100%;
 height: auto;
}
#mario .mainBg .logo span{
 padding: 70px 0 0 1%;
 width: 100%;
 font-size: 1.6vw;
 text-align: left;
 font-weight: 900;
 color: #fff;
 display: block;
}
#mario .mainBg .logo div{
 padding: 0 0 0 1%;
 width: 100%;
 font-size: 2.4vw;
 text-align: left;
 font-weight: 900;
 color: #fff;
}
#mario .mainBg .grade{
 margin: auto;
 width: 100%;
 man-width: 1920px;
 height: auto;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
}
#mario .mainBg .grade img{
 width: 100%;
 height: auto;
}
#mario .mainBg .navBox{
 margin: 0 auto;
 width: 1400px;
 height: 240px;
 text-align: center;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 2;
}
#mario .mainBg .navBox span{
 font-size: 12px;
 text-align: left;
 font-weight: 400;
 position: absolute;
 top: -60px;
 right: 30px;
}
#mario .mainBg .navBox .nav{
 width: 453px;
 height: 175px;
 display: inline-block;
 text-align: center;
 position: relative;
}
#mario .mainBg .navBox .nav img{
 width: auto;
 margin: auto;
 height: 90%;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 1;
}
#mario .mainBg .navBox .nav .ic{
 width: auto;
 width: 130px;
 height: auto;
 position: absolute;
 left: -22px;
 right: auto;
 top: 0;
 bottom: 0;
 z-index: 2;
}
#mario .mainBg .navBox .nav:last-child .ic{
 left: -10px;
}
#mario .mainBg .navBox .nav p{
 padding: 62px 0 0;
 width: 100%;
 font-size: 34px;
 line-height: 40px;
 text-align: center;
 font-weight: 900;
 color: #fff;
 position: absolute;
 top: 0;
 z-index: 3;
}
#mario .mainBg .navBox .nav:nth-of-type(1) p{
 padding: 42px 0 0;
}
#mario .mainBg .navBox .nav a{
 width: 100%;
 height: 100%;
 display: block;
 background-image: url(../images/bt.png);
 background-position: center top;
 background-size: 100% auto;
 background-repeat: no-repeat;
}
#mario .mainBg .navBox .nav a:hover{
  opacity:1;
  filter: alpha(opacity=100);
}
#mario .mainBg .navBox .nav:hover{
	animation-name: bounceMenu;
	animation-duration: .25s; /*アニメーション時間*/
	animation-timing-function: ease; /*アニメーションさせるイージング*/
	animation-delay: 0s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: both; /*アニメーション後のスタイルをどうするか*/
}

#mario #bike{
 width: 100%;
}
#mario #bike .tBox{
 padding: 0;
 width: 100%;
 height: 550px;
 background-image: url(../images/bg_bk.jpg);
 background-position: left top;
 background-size: 74.5px auto;
 background-repeat: repeat;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
.tBox .tireScroll{
  position: relative;
  display: -webkit-flex;
  display: flex;
  width: 100vw;
  height: 62px;
  overflow: hidden;
}
.tBox .tireScroll img{
  width: auto;
  height: 100%;
  will-change: transform;
}
.tBox .tireScroll img:first-child{
  -webkit-animation: loop 50s -25s linear infinite;
  animation: loop 50s -25s linear infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
.tBox .tireScroll img + img{
  -webkit-animation: loop2 50s  linear infinite;
  animation: loop2 50s linear infinite;
}
#mario #bike .tBox .icn{
 margin: 60px auto 20px;
 width: 102px;
}
#mario #bike .tBox .icn img{
 width: 100%;
 height: auto;
}
#mario #bike .tBox h2{
 margin: 0 auto;
 width: 1205px;
}
#mario #bike .tBox h2 img{
 width: 100%;
 height: auto;
}
#mario #bike .tBox p{
 margin: 0 auto;
 padding: 50px 0 0;
 width: 100%;
 font-size: 20px;
 line-height: 200%;
 text-align: center;
 font-weight: 900;
 color: #fff;
}
#mario #bike .bikeBox{
 margin: 0;
 padding: 0;
 width: 100% !important;
 text-align: center;
 background-image: url(../images/bg3.jpg);
 background-position: left top;
 background-size: 302px auto;
 background-repeat: repeat;
 display: block;
}
#mario #bike .bikeBox ul{
 margin: 0 auto;
 width: 1316px;
 position: relative;
}
#mario #bike .bikeBox li{
 float: left;
 margin: 0;
 padding: 0;
 width: 329px;
}
#mario #bike .bikeBox li a{
 width: 100%;
 height: 100%;
 display: block;
 cursor: pointer;
 transition: .3s;
 position: relative;
}
#mario #bike .bikeBox li a:hover{
  opacity:1;
  filter: alpha(opacity=100);
}
#mario #bike .bikeBox li img{
 width: 100%;
 height: auto;
 transition: .3s;
}
#mario #bike .bikeBox li a:after{
 content: '';
 margin: auto;
 width: 338px;
 height: 911px;
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 filter: alpha(opacity=0);
 z-index: 20;
 background-image: url(../images/bikeHover.png);
 background-position: left top;
 background-size: 100% 100%;
 background-repeat: no-repeat;
 transition: .3s;
}
#mario #bike .bikeBox li a:hover:after{
  opacity:1;
  filter: alpha(opacity=100);
  -webkit-animation: cursor 0.3s ease infinite alternate; animation: cursor 0.3s ease infinite alternate; opacity: 1;
}

#mario #bike .bikeBox ul .nin{
 font-size: 12px;
 text-align: left;
 font-weight: 400;
 position: absolute;
 bottom: 10px;
 right: -90px;
}
#mario #bike .bBox{
 width: 100%;
 height: 140px;
 background-image: url(../images/bg_bk.jpg);
 background-position: left top;
 background-size: 74.5px auto;
 background-repeat: repeat;
}

#mario #bicycle{
 width: 100%;
}
#mario #bicycle .tBox{
 padding: 0;
 width: 100%;
 height: 550px;
 background-image: url(../images/bg_red.jpg);
 background-position: left top;
 background-size: 74.5px auto;
 background-repeat: repeat;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#mario #bicycle .tBox .icn{
 margin: 60px auto 20px;
 width: 102px;
}
#mario #bicycle .tBox .icn img{
 width: 100%;
 height: auto;
}
#mario #bicycle .tBox h2{
 margin: 0 auto;
 width: 502px;
}
#mario #bicycle .tBox h2 img{
 width: 100%;
 height: auto;
}
#mario #bicycle .tBox p{
 margin: 0 auto;
 padding: 50px 0 0;
 width: 100%;
 font-size: 20px;
 line-height: 200%;
 text-align: center;
 font-weight: 900;
 color: #fff;
}
#mario #bicycle .bicycleBox{
 margin: 0;
 padding: 0;
 width: 100% !important;
 text-align: center;
 background-image: url(../images/bg3.jpg);
 background-position: left top;
 background-size: 302px auto;
 background-repeat: repeat;
 display: block;
}
#mario #bicycle .bicycleBox .inner{
 margin: 0 auto;
 width: 1317px;
 position: relative;
}
#mario #bicycle .bicycleBox .inner img{
 width: 100%;
 height: auto;
}
#mario #bicycle .bicycleBox .inner .bBt{
 float: left;
 width: 50%;
}
#mario #bicycle .bicycleBox .inner .bBt a{
 width: 100%;
 height: 100%;
 display: block;
 cursor: pointer;
 transition: .3s;
 position: relative;
}
#mario #bicycle .bicycleBox .inner .bBt a:hover{
  opacity:1;
  filter: alpha(opacity=100);
}
#mario #bicycle .bicycleBox .inner .bBt img{
 width: 100%;
 height: auto;
 transition: .3s;
}
#mario #bicycle .bicycleBox .inner .bBt a:after{
 content: '';
 margin: auto;
 width: 102%;
 height: 102%;
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 filter: alpha(opacity=0);
 z-index: 20;
 background-image: url(../images/bicycleHover.png);
 background-position: left top;
 background-size: 100% 100%;
 background-repeat: no-repeat;
 transition: .3s;
}
#mario #bicycle .bicycleBox .inner .bBt a:hover:after{
  opacity:1;
  filter: alpha(opacity=100);
  -webkit-animation: cursor2 0.3s ease infinite alternate; animation: cursor2 0.3s ease infinite alternate; opacity: 1;
}

#mario #bicycle .bicycleBox .inner .nin{
 font-size: 12px;
 text-align: left;
 font-weight: 400;
 position: absolute;
 bottom: 10px;
 right: -90px;
}
#mario #bicycle .bBox{
 width: 100%;
 height: 140px;
 background-image: url(../images/bg_red.jpg);
 background-position: left top;
 background-size: 74.5px auto;
 background-repeat: repeat;
}
#mario #bicycle .caution{
 padding: 55px 0 0;
 width: 100%;
 height: 150px;
 background-image: url(../images/bg4.jpg);
 background-position: center top;
 background-size: cover;
 background-repeat: no-repeat;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#mario #bicycle .caution img{
 margin: 0 auto;
 width: 813px;
 height: auto;
}

#mario #parts{
 padding: 0;
 width: 100%;
 background-image: url(../images/bg_green.jpg);
 background-position: left top;
 background-size: 122px auto;
 background-repeat: repeat;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#parts .bg6Scroll{
  position: relative;
  display: -webkit-flex;
  display: flex;
  width: 100vw;
  height: 35px;
  overflow: hidden;
}
#parts .bg6Scroll img{
  width: auto;
  height: 100%;
  will-change: transform;
}
#parts .bg6Scroll img:first-child{
  -webkit-animation: loopP 50s -25s linear infinite;
  animation: loopP 50s -25s linear infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
#parts .bg6Scroll img + img{
  -webkit-animation: loopP2 50s  linear infinite;
  animation: loopP2 50s linear infinite;
}
#mario #parts .icn{
 margin: 63px auto 20px;
 width: 102px;
}
#mario #parts .icn img{
 width: 100%;
 height: auto;
}
#mario .icn img{
 width: 100%;
 height: auto;
	animation-name: icn;
	animation-duration: 2s; /*アニメーション時間*/
	animation-timing-function: ease; /*アニメーションさせるイージング*/
	animation-delay: 0s; /*アニメーション開始させる時間*/
	animation-iteration-count: infinite; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: none; /*アニメーション後のスタイルをどうするか*/
}
@keyframes icn{
  0% {
    transform: scale(1); }
  10% {
    transform: scale(1.2); }
  20% {
    transform: scale(1); }
  30% {
    transform: scale(1.2); }
  40% {
    transform: scale(1); }
  100% {
    transform: scale(1); }
}
#mario #parts h2{
 margin: 0 auto;
 width: 253px;
}
#mario #parts h2 img{
 width: 100%;
 height: auto;
}
#mario #parts .partsBox{
 margin: 0 auto;
 padding: 106px 0 0;
 width: 848px !important;
 position: relative;
}
#mario #parts .partsBox li{
 float: left;
 margin: 0 0 110px;
 width: 400px;
}
#mario #parts .partsBox li:nth-child(2n){
 float: right;
}
#mario #parts .partsBox li:nth-child(3),
#mario #parts .partsBox li:nth-child(4){
 margin: 0 0 80px;
}
#mario #parts .partsBox li img{
 width: 100%;
 height: auto;
 position: relative;
 transition: .3s;
}
#mario #parts .partsBox li p{
 margin: auto;
 padding: 0;
 width: 100%;
 font-size: 28px;
 line-height: 100%;
 text-align: center;
 font-weight: 900;
 color: #fff;
 position: absolute;
 bottom: 38px;
 z-index: 2;
 transition: .3s;
}
#mario #parts .partsBox li a{
 width: 100%;
 height: 100%;
 display: block;
 cursor: pointer;
 position: relative;
 transition: .3s;
}
#mario #parts .partsBox li a:after{
 content: '';
 margin: auto;
 width: 100%;
 height: 95.5%;
 display: block;
 position: absolute;
 top: 25px;
 left: 0;
 opacity: 0;
 filter: alpha(opacity=0);
 z-index: 20;
 background-image: url(../images/partsHover.png);
 background-position: left top;
 background-size: 100% 100%;
 background-repeat: no-repeat;
 transition: .3s;
}
#mario #parts .partsBox li a:hover:after{
  opacity:1;
  filter: alpha(opacity=100);
  -webkit-animation: cursor3 0.3s ease infinite alternate; animation: cursor3 0.3s ease infinite alternate; opacity: 1;
}
#mario #parts .partsBox li a:hover{
  opacity:1;
  filter: alpha(opacity=100);
}
#mario #parts .partsBox li .coin{
 margin: auto;
 width: 76px;
 height: auto;
 position: absolute;
 top: -76px;
 left: 0;
 right: 0;
 z-index: 3;
 opacity:0;
}
#mario #parts .partsBox li a:hover .coin{
	animation-name: coin;
	animation-duration: 2s; /*アニメーション時間*/
	animation-timing-function: ease; /*アニメーションさせるイージング*/
	animation-delay: 0s; /*アニメーション開始させる時間*/
	animation-iteration-count: infinite; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: both; /*アニメーション後のスタイルをどうするか*/
}

#mario #parts .partsBox .nin{
 font-size: 12px;
 text-align: left;
 font-weight: 400;
 position: absolute;
 bottom: 85px;
 right: -90px;
 color: #fff;
}
#mario #fBox{
 padding: 52px 0 34px;
 width: 100%;
 background-image: url(../images/bg5.jpg);
 background-position: center center;
 background-size: cover;
 background-repeat: no-repeat;
 position: relative;
}
#mario #fBox .att{
 margin: auto;
 width: 100%;
 max-width: 1304px;
 font-size: 12px;
 line-height: 100%;
 text-align: right;
 font-weight: 900;
 position: absolute;
 top: 20px;
 left: 0;
 right: 0;
}
#mario #fBox .box{
 margin: 0 auto 30px;
 width: 100%;
 text-align: center;
}
#mario #fBox .box img{
 margin: 0 auto;
 width: 82px;
 height: auto;
}
#mario #fBox .box img{
	animation-name: icnImg;
	animation-duration: 2s; /*アニメーション時間*/
	animation-timing-function: ease; /*アニメーションさせるイージング*/
	animation-delay: 0s; /*アニメーション開始させる時間*/
	animation-iteration-count: infinite; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: none; /*アニメーション後のスタイルをどうするか*/
}
#mario #fBox .box .kakko{
 margin: 0 auto;
 padding: 20px 0 0;
 width: 666px;
 height: 84px;
 font-size: 32px;
 line-height: 100%;
 text-align: center;
 font-weight: 900;
 color: #3188E8;
 background-image: url(../images/kakkoL.png),url(../images/kakkoR.png);
 background-position: left top,right top;
 background-size: auto 100%,auto 100%;
 background-repeat: no-repeat,no-repeat;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#mario #fBox .box p{
 margin: 0 auto;
 padding: 20px 0 0;
 width: 100%;
 font-size: 24px;
 line-height: 180%;
 text-align: center;
 font-weight: 400;
}



#mario .modal_box{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
    /*max-width: 1052px;*/
    width: 45%;
    /*max-height: 930px;*/
    height: 41vw;
    margin: auto;
    padding: 0;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#mario .modal_box .modal_close{
 width: 1.9vw;
 height: 1.9vw;
 background-image: url(../images/close.png);
 background-position: center center;
 background-size: 100% auto;
 background-repeat: no-repeat;
 position: fixed;
 top: 3vw;
 right: 3vw;
 cursor: pointer;
 z-index: 1001;
}
#mario .modal_box .modal_close:hover{
  opacity:0.5;
  filter: alpha(opacity=50);
}
#mario .modal_box .inner{
 /*transform: scale(0.8);*/
 z-index: 1002;
 margin: 0;
 padding: 0.7vw 0;
 width: 100%;
 height: calc(100% - 0.2vw);
 background: #fff;
 border-radius: 10px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
	-webkit-filter:drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.3));
  -moz-filter:drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.3));
  -ms-filter:drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.3));
  filter:drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.3));
 position: relative;
 background-position: left bottom 1vw,left bottom 3vw;
 background-size: 0.9vw auto,3vw auto;
 background-repeat: repeat-x,no-repeat;
}
#mario .modal_box.red .inner{
 background-image: url(../images/line_r.jpg),url(../images/text_red.png);
}
#mario .modal_box.blue .inner{
 background-image: url(../images/line_b.jpg),url(../images/text_blue.png);
}
#mario .modal_box.green .inner{
 background-image: url(../images/line_g.jpg),url(../images/text_green.png);
}
#mario .modal_box.pink .inner{
 background-image: url(../images/line_p.jpg),url(../images/text_pink.png);
}
#mario .modal_box.white .inner{
 background-image: url(../images/line_w.jpg),url(../images/text_white.png);
}
#mario .modal_box .inner .lineBtm{
 display: none;
}
#mario .modal_box .inner .line{
 margin: 0;
 padding: 0;
 width: 100%;
 height: 3vw;
 text-align: left;
 background-position: left bottom 0.7vw;
 background-size: 0.9vw auto;
 background-repeat: repeat-x;
 position: relative;
}
#mario .modal_box.red .inner .line{
 background-image: url(../images/line_r.jpg);
}
#mario .modal_box.blue .inner .line{
 background-image: url(../images/line_b.jpg);
}
#mario .modal_box.green .inner .line{
 background-image: url(../images/line_g.jpg);
}
#mario .modal_box.pink .inner .line{
 background-image: url(../images/line_p.jpg);
}
#mario .modal_box.white .inner .line{
 background-image: url(../images/line_w.jpg);
 background-position: left bottom 0.5vw;;
}
#mario .modal_box .inner .line img{
 margin: 0.6vw 0 0 2.25vw;
 width: auto;
 height: 2.4vw;
}
#mario .modal_box .inner .line p{
  margin: auto;
  padding: 0;
  width: 74.5%;
  font-size: 0.7vw;
  text-align: left;
  font-weight: 900;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
#mario .modal_box .inner ul{
 margin: 1vw auto;
 padding: 0;
 width: 52%;
 height: 20vw;
 position: relative;
}
#mario .modal_box .inner li{
 margin: 0;
 padding: 0;
 width: 100%;
 height: auto;
}
#mario .modal_box .inner li img{
 width: 100%;
 height: auto;
}
#mario .modal_box .inner li div{
 padding: 0.3vw 0 0.4vw;
 width: 100%;
 font-size: 0.9vw;
 line-height: 100%;
 text-align: center;
 font-weight: 900;
 border-bottom: 2px dashed #000;
}
#mario .modal_box .inner li p{
  margin: 0;
  padding: 0.25vw 0 0;
  width: 100%;
  font-size: 0.625vw;
  line-height: 140%;
  text-align: center;
  font-weight: 400;
}
#mario .modal_box .inner ul .slick-arrow{
 z-index: 100;
 position: absolute;
 top: 50%;
}
#mario .modal_box .inner ul .slick-next{
  margin: auto;
  padding: 0;
  width: 1.5vw;
  height: 1.5vw;
  background-image: url(../images/arrowR.png);
  background-size: 0.8vw auto;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  right: -20%;
  top: 0;
  bottom: 0;
  display: none;
  transition: .3s;
}
#mario .modal_box .inner ul .slick-prev{
 margin: auto;
 padding: 0;
  width: 1.5vw;
  height: 1.5vw;
 position: absolute;
 left: -20%;
 top: 0;
 bottom: 0;
 background-image: url(../images/arrowL.png);
 background-size: 0.8vw auto;
 background-position: center center;
 background-repeat: no-repeat;
 display: none;
 transition: .3s;
}
#mario .modal_box .inner ul .slick-next:hover,
#mario .modal_box .inner ul .slick-prev:hover{
  opacity:0.5;
  filter: alpha(opacity=50);
}
#mario .modal_box .inner .iBox{
 margin: 0 auto;
 width: 71%;
 position: relative;
}
#mario .modal_box .inner .iBox .mario{
 width: 9.8vw;
 height: auto;
 position: absolute;
 top: -5.2vw;
 right: -5.2vw;
 z-index: 2;
}
#mario .modal_box .inner .iBox .kino{
 width: 7.4vw;
 height: auto;
 position: absolute;
 top: -6vw;
 right: -3.8vw;
 z-index: 2;
}
#mario .modal_box .inner .iBox .yoshi{
 width: 8.5vw;
 height: auto;
 position: absolute;
 top: -3vw;
 right: -5vw;
 z-index: 2;
}
#mario .modal_box .inner .iBox .peach{
 width: 9.8vw;
 height: auto;
 position: absolute;
 top: -5.8vw;
 right: -6.48vw;
 z-index: 2;
}
#mario .modal_box .inner .iBox .mario2{
 width: 11vw;
 height: auto;
 position: absolute;
 top: -5.6vw;
 right: -6.2vw;
 z-index: 0;
}
#mario .modal_box .inner .iBox h3{
 margin: 0 auto 0;
 width: 97%;
 font-size: 1vw;
 line-height: 100%;
 text-align: left;
 font-weight: 900;
}
#mario .modal_box .inner .iBox h3 img{
 margin: 0 1vw 0.5vw 0;
 width: 3.8vw;
 height: auto;
 vertical-align: middle;
}
#mario .modal_box .inner .iBox .spec,
#mario .modal_box .inner .iBox .pri{
 float: left;
 width: 47%;
}
#mario .modal_box .inner .iBox .pri{
 float: right;
 position: relative;
 z-index: 1;
}
#mario .modal_box .inner .iBox .spec h4,
#mario .modal_box .inner .iBox .pri h4{
 width: 100%;
}
#mario .modal_box .inner .iBox .spec h4 img,
#mario .modal_box .inner .iBox .pri h4 img{
 width: 100%;
 height: auto;
}
#mario .modal_box .inner .iBox .spec ul{
 margin: 0 auto;
 padding: 0;
 width: 96%;
 height: auto;
}
#mario .modal_box .inner .iBox .spec ul li{
 padding: 0.3vw 4px 0.3vw;
 width: 100%;
 height: auto;
 font-size: 0.62vw;
 line-height: 100%;
 text-align: left;
 font-weight: 900;
 border-bottom: 1px solid #000;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#mario .modal_box .inner .iBox .spec ul li .pcOnly{
 display: inline;
}
#mario .modal_box .inner .iBox .spec ul li:last-child{
 border-bottom: none;
}
#mario .modal_box .inner .iBox .pri p{
 padding: 0;
 margin: 0.3vw 0 0.3vw;
 width: 100%;
 font-size: 0.62vw;
 line-height: 100%;
 text-align: left;
 font-weight: 900;
}
#mario .modal_box .inner .iBox .pri .price{
 padding: 0;
 width: 100%;
 font-size: 1.4vw;
 line-height: 100%;
 text-align: left;
 font-weight: 900;
 font-feature-settings: "palt";
 white-space: nowrap;
}
#mario .modal_box .inner .iBox .pri .price strong{
 font-family: 'Roboto', sans-serif;
 font-size: 1.6vw;
 font-weight: 900;
}
#mario .modal_box .inner .iBox .pri .price span{
 font-size: 0.8vw;
 font-weight: 900;
}
#mario .modal_box .inner .iBox .pri .price span span{
 font-family: 'Roboto', sans-serif;
 display: inline;
}
#mario .modal_box .inner .iBox .pri .mBt{
 margin: 0.3vw 0 0;
 padding: 0;
 width: 100%;
 height: auto;
 display: block;
 position: relative;
 float: none;
}
#mario .modal_box .inner .iBox .pri .mBt a{
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 display: block;
 position: relative;
}
#mario .modal_box .inner .iBox .pri .mBt img{
 margin: 0;
 padding: 0;
 width: 100%;
 height: auto;
 position: absolute;
 top: 0;
 left: 0;
}
#mario .modal_box .inner .iBox .pri .mBt div{
 margin: 0;
 padding: 0.65vw 0 0;
 width: 100%;
 font-size: 0.8vw;
 line-height: 100%;
 text-align: center;
 font-weight: 900;
 color: #fff;
 position: absolute;
 top: 0;
 z-index: 2;
}
.modal_bg{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	display: none;
	width: 100%;
	height: 120%;
	background-color: rgba(0,0,0,0.7);
}



#pagetop{
	width: 60px;
	height: 60px;
	position: fixed;
	right: 60px;
	bottom: 60px;
	cursor: pointer;
	z-index: 101;
}
#pagetop img{
	width: 100%;
	height: auto;
}


footer ul.cb-btns{
  width: 829px;
  margin: 0 auto;
  font-size: 0;
  margin-bottom: 40px;
}
footer ul.cb-btns li.cb-btn{
 display: inline-block;
 width: 400px;
 background-color: #fff;
}
footer ul.cb-btns li.cb-btn:first-child{
  margin-right: 29px;
}
footer ul.cb-btns li.cb-btn a{
 padding: 0;
 width: 100%;
 height: 50px;
 display: block;
 position: relative;
 cursor: pointer;
 transition: .3s;
 background-image: url(../images/existing_img/arrow.png);
 background-position: right 15px center;
 background-size: 8px auto;
 background-repeat: no-repeat;
}
footer ul.cb-btns li.cb-btn a:hover{
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)";
 filter: alpha(opacity=50);
 opacity: 0.5;
 text-decoration: none;
}
footer ul.cb-btns li.cb-btn a img{
 margin: 0 20px 6px 0;
 width: auto;
 height: 35px;
 display: inline-block;
}
footer ul.cb-btns li.cb-btn:nth-child(2) a img{
 width: auto;
 height: 35px;
}
footer ul.cb-btns li.cb-btn a span{
 width: auto;
 font-size: 20px;
 text-align: center;
 font-weight: bold;
 color: #003E81;
 line-height: 50px;
 position: static;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

@keyframes main1{
  from, to {
    animation-timing-function: cubic-bezier(.69,-0.01,.31,1.02)
  }
  from {
 top: -15.5vw;
 left: 60%;
	opacity: 0;
	transform: scale(0.7);
  }
  to {
 top: -0.5vw;
 left: 40%;
	opacity: 1;
	transform: scale(1);
  }
}

@keyframes main2{
	0% {
 top: -6vw;
 right: 40%;
	opacity: 0;
	transform: scale(0.7);
	}
	100% {
 top: 1vw;
 right: 71%;
	opacity: 1;
	transform: scale(1);
	}
}

@keyframes main3{
	0% {
 top: 32vw;
 right: 55%;
	opacity: 0;
	transform: scale(0.7);
	}
	100% {
 top: 40vw;
 right: 75%;
	opacity: 1;
	transform: scale(1);
	}
}

@keyframes logo{
	0% {
	opacity: 0;
	transform: scale(0.9);
	}
	100% {
	opacity: 1;
	transform: scale(1);
	}
}

@keyframes bounceMenu{
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  from {
    transform: translate3d(0, 0, 0);
  }
  60% {
    transform: translate3d(0, -10px, 0);
  }
  75% {
    transform: translate3d(0, 8px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes loop{
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes loop{
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@-webkit-keyframes loop2{
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}
@keyframes loop2{
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

@-webkit-keyframes cursor { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  100% { -webkit-transform: scale(1.2,1.07);
    transform: scale(1.2,1.07); } }

@keyframes cursor { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  100% { -webkit-transform: scale(1.2,1.07);
    transform: scale(1.2,1.07); } }

@-webkit-keyframes cursor2 { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  100% { -webkit-transform: scale(1.06,1.2);
    transform: scale(1.06,1.2); } }

@keyframes cursor2 { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  100% { -webkit-transform: scale(1.06,1.2);
    transform: scale(1.06,1.2); } }

@-webkit-keyframes loopP{
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes loopP{
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@-webkit-keyframes loopP2{
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}
@keyframes loopP2{
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

@-webkit-keyframes cursor3 { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  100% { -webkit-transform: scale(1.1,1.11);
    transform: scale(1.1,1.11); } }

@keyframes cursor3 { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  100% { -webkit-transform: scale(1.1,1.11);
    transform: scale(1.1,1.11); } }

@keyframes coin{
  0% {
    transform: scale(1); }
  10% {
    transform: scale(1.2); }
  20% {
    transform: scale(1); }
  30% {
    transform: scale(1.2); }
  40% {
    transform: scale(1); }
  100% {
    transform: scale(1); }
}

@keyframes icnImg{
  0% {
    transform: scale(1); }
  10% {
    transform: scale(1.2); }
  20% {
    transform: scale(1); }
  30% {
    transform: scale(1.2); }
  40% {
    transform: scale(1); }
  100% {
    transform: scale(1); }
}




/*** IEのみ ***/
@media all and (-ms-high-contrast: none){




}



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



}




@media screen and (max-width:760px){
.pcOnly{
		display: none;
}
.spOnly{
	display: block;
}

  .Header-site .cb-social{
    margin-top: 4px; }
  .Header-site .cb-social li:first-child{
   margin-top: -2px;
    margin-right: 0; }
  .Header-site #twitter-widget-0{
    height: 21px !important; }

#navi-open{
 position: absolute;
 right: 0;
 top: 40px;
 height: 52px;
 width: 40px;
 background-color: #fff;
 box-sizing: border-box;
 text-align: center;
 z-index: 99;
 display: block;
}
  #navi-open:hover{
    cursor: pointer; }

.menu-trigger, #nav-open .btn, #nav-open-sp .btn, #nav-close .btn, .menu-trigger span{
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: all .4s;
  transition: all .4s;
  box-sizing: border-box;
  line-height: 1; }

.menu-trigger{
	position: relative;
	width: 60%;
	height: 39px;
	margin: 0 auto;
	margin-top: 7px;
	margin-bottom: 4px;
		}
  .menu-trigger span{
	margin: 0 auto !important;
	padding: 0;
	width: 100%;
	height: 2px;
	background-color: #003e81;
}
  .menu-trigger span:nth-child(2){
	margin: -5px auto 0 !important;
		}
    .menu-trigger span:last-child{
	margin: -9px auto 0 !important;
      margin-bottom: 0; }

#header_nav{
  width: 100%;
  background-color: #003d80;
  font-size: 100%; }
  #header_nav .inner-link{
    display: none;
    position: absolute;
    z-index: 10;
    top: 42px;
    background: #003d80;
    width: 100%; }
  #header_nav li{
    border-bottom: 1px solid #fff;
    font-size: 140%; }
    #header_nav li a{
	color: #fff;
	padding: 4%;
	display: block;
	text-decoration: none;
	transition: .3s;
}
#header_nav li a:hover{
  opacity:0.5;
  filter: alpha(opacity=50);
}

#mario{
	margin: -1px 0 0;
	padding: 0;
	width: 100%;
}

#mario .mainBg{
 margin: 42px 0 0;
 padding: 0;
 width: 100%;
 /*height: calc(100vh - 42px);
 height: calc(var(--vh, 1vh) * 100 - 42px);
 min-height: calc(100vh - 42px);
 min-height: calc(var(--vh, 1vh) * 100 - 42px);*/
 height: 195vw;
 text-align: center;
 position: relative;
 background-image: url(../images/mainBgSp.jpg);
 background-position: center top;
 background-size: 110% auto;
 background-repeat: no-repeat;
 overflow: hidden;
}
#mario .mainBg .main1{
 width: 96%;
 height: auto;
 position: absolute;
 top: 28vw;
 left: auto;
 right: -5%;
 z-index: 9;
 transform: rotate(-15deg);
	opacity: 0;
}
#mario .mainBg .main1{
	animation-name: main1s;
	animation-duration: 0.4s; /*アニメーション時間*/
	animation-timing-function: ease; /*アニメーションさせるイージング*/
	animation-delay: 1s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
#mario .mainBg .main2{
 width: 30%;
 height: auto;
 position: absolute;
 top: 36vw;
 left: auto;
 right: -11%;
 z-index: 8;
	opacity: 0;
}
#mario .mainBg .main2{
	animation-name: main2s;
	animation-duration: 0.5s; /*アニメーション時間*/
	animation-timing-function: ease; /*アニメーションさせるイージング*/
	animation-delay: 1.5s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
#mario .mainBg .main3{
 width: 15%;
 height: auto;
 position: absolute;
 bottom: auto;
 top: 50vw;
 right: auto;
 left: 8%;
 z-index: 7;
	opacity: 0;
}
#mario .mainBg .main3{
	animation-name: main3s;
	animation-duration: 0.5s; /*アニメーション時間*/
	animation-timing-function: ease; /*アニメーションさせるイージング*/
	animation-delay: 1.7s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
#mario .mainBg .main4{
 display: block;
 width: 25%;
 height: auto;
 position: absolute;
 bottom: auto;
 top: 75vw;
 left: -7%;
 z-index: 7;
	opacity: 0;
}
#mario .mainBg .main4{
	animation-name: main4s;
	animation-duration: 0.5s; /*アニメーション時間*/
	animation-timing-function: ease; /*アニメーションさせるイージング*/
	animation-delay: 1.8s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
#mario .mainBg .logo{
 margin: auto;
 width: 84%;
 height: auto;
 position: absolute;
 top: 8vw;
 left: 0;
 right: 0;
 z-index: 10;
	opacity: 0;
}
#mario .mainBg .logo{
	animation-name: logos;
	animation-duration: 0.3s; /*アニメーション時間*/
	animation-timing-function: ease; /*アニメーションさせるイージング*/
	animation-delay: 2.1s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: both; /*アニメーション後のスタイルをどうするか*/
}
#mario .mainBg .logo img{
 width: 100%;
 height: auto;
}
#mario .mainBg .logo span{
 padding: 3vw 0 0 1%;
 width: 100%;
 font-size: 4.6vw;
 text-align: center;
 font-weight: 900;
 color: #fff;
 font-feature-settings: "palt";
 display: block;
	-webkit-filter:drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
  -moz-filter:drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
  -ms-filter:drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
  filter:drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
}
#mario .mainBg .logo div{
 margin: -1.5vw 0 0 -2%;
 padding: 0 0 0 2%;
 width: 104%;
 font-size: 6.6vw;
 text-align: center;
 font-weight: 900;
 color: #fff;
 font-feature-settings: "palt";
	-webkit-filter:drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
  -moz-filter:drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
  -ms-filter:drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
  filter:drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
}
#mario .mainBg .grade{
 margin: auto;
 width: 100%;
 man-width: 100%;
 height: auto;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
}
#mario .mainBg .grade img{
 width: 100%;
 height: auto;
}
#mario .mainBg .navBox{
 margin: 0 auto;
 padding: 0 0 4vw;
 width: 84%;
 height: auto;
 text-align: center;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 10;
}
#mario .mainBg .navBox span{
 font-size: 2.2vw;
 text-align: left;
 font-weight: 400;
 position: absolute;
 top: -5vw;
 right: 4vw;
}
#mario .mainBg .navBox .nav{
 margin: 0 0 1.5vw;
 width: 100%;
 height: 19vw;
 display: block;
 text-align: center;
 position: relative;
}
#mario .mainBg .navBox .nav img{
 margin: auto;
 width: auto;
 height: 80%;
 position: absolute;
 top: 0;
 bottom: 0;
 left: auto;
 right: 9%;
 z-index: 1;
}
#mario .mainBg .navBox .nav:last-child img{
 height: 70%;
}
#mario .mainBg .navBox .nav .ic{
 width: auto;
 width: 26%;
 height: auto;
 position: absolute;
 left: 7%;
 right: auto;
 top: -5vw;
 bottom: auto;
 z-index: 2;
}
#mario .mainBg .navBox .nav:last-child .ic{
 height: auto;
 left: 7%;
}
#mario .mainBg .navBox .nav p{
 padding: 6.2vw 0 0;
 width: 100%;
 font-size: 4.4vw;
 line-height: 120%;
 text-align: center;
 font-weight: 900;
 color: #fff;
 position: absolute;
 top: 0;
 z-index: 3;
}
#mario .mainBg .navBox .nav:nth-of-type(1) p{
 padding: 3.6vw 0 0;
}
#mario .mainBg .navBox .nav a{
 width: 100%;
 height: 100%;
 display: block;
 background-image: url(../images/btSp.png);
 background-position: center top;
 background-size: 100% 100%;
 background-repeat: no-repeat;
}
#mario .mainBg .navBox .nav:hover{
	animation-name: bounceMenus;
	animation-duration: .25s; /*アニメーション時間*/
	animation-timing-function: ease; /*アニメーションさせるイージング*/
	animation-delay: 0s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: both; /*アニメーション後のスタイルをどうするか*/
}

#mario #bike{
 width: 100%;
}
#mario #bike .tBox{
 padding: 5vw 0 6vw;
 width: 100%;
 height: auto;
 background-image: url(../images/bg_bk.jpg);
 background-position: left top;
 background-size: 10vw auto;
 background-repeat: repeat;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
.tBox .tireScroll{
  position: relative;
  display: -webkit-flex;
  display: flex;
  width: 100vw;
  height: 5vw;
  overflow: hidden;
}
.tBox .tireScroll img{
  width: auto;
  height: 100%;
  will-change: transform;
}
.tBox .tireScroll img:first-child{
  -webkit-animation: loops 50s -25s linear infinite;
  animation: loops 50s -25s linear infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
.tBox .tireScroll img + img{
  -webkit-animation: loop2s 50s  linear infinite;
  animation: loop2s 50s linear infinite;
}
#mario #bike .tBox .icn{
 margin: 2vw auto 2vw;
 width: 22%;
}
#mario #bike .tBox .icn img{
 width: 100%;
 height: auto;
}

#mario #bike .tBox h2{
 margin: 0 auto;
 width: 85%;
}
#mario #bike .tBox h2 img{
 width: 100%;
 height: auto;
}
#mario #bike .tBox p{
 margin: 0 auto;
 padding: 4vw 0 0;
 width: 100%;
 font-size: 3.6vw;
 line-height: 190%;
 text-align: center;
 font-weight: 900;
 color: #fff;
}
#mario #bike .bikeBox{
 margin: 0;
 padding: 0;
 width: 100% !important;
 text-align: center;
 background-image: none;
 display: block;
	-webkit-filter:drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  -moz-filter:drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  -ms-filter:drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  filter:drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
}
#mario #bike .bikeBox ul{
 margin: 0 auto;
 width: 100%;
 position: relative;
}
#mario #bike .bikeBox li{
 float: none;
 margin: 0;
 padding: 0;
 width: 100%;
}
#mario #bike .bikeBox li a{
 width: 100%;
 height: 100%;
 display: block;
 cursor: pointer;
 transition: .3s;
 position: relative;
}
#mario #bike .bikeBox li img{
 width: 100%;
 height: auto;
}
#mario #bike .bikeBox li a:after{
 content: '';
 margin: auto;
 width: 102%;
 height: 100%;
 display: block;
 position: absolute;
 top: 1%;
 left: 1%;
 opacity: 0;
 filter: alpha(opacity=0);
 z-index: 20;
 background-image: url(../images/bikeHoverSp.png);
 background-position: left top;
 background-size: 100% 100%;
 background-repeat: no-repeat;
 transition: .3s;
}
#mario #bike .bikeBox li a:hover:after{
  opacity:1;
  filter: alpha(opacity=100);
  -webkit-animation: cursors 0.3s ease infinite alternate; animation: cursors 0.3s ease infinite alternate; opacity: 1;
}

#mario #bike .bikeBox ul .nin{
 font-size: 2.2vw;
 text-align: left;
 font-weight: 400;
 color: #fff;
 position: absolute;
 bottom: -5vw;
 right: 2%;
}
#mario #bike .bBox{
 width: 100%;
 height: 10vw;
 background-image: url(../images/bg_bk.jpg);
 background-position: left top;
 background-size: 10vw auto;
 background-repeat: repeat;
}

#mario #bicycle{
 width: 100%;
}
#mario #bicycle .tBox{
 padding: 5vw 0 6vw;
 width: 100%;
 height: auto;
 background-image: url(../images/bg_red.jpg);
 background-position: left top;
 background-size: 10vw auto;
 background-repeat: repeat;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#mario #bicycle .tBox .icn{
 margin: 2vw auto 2vw;
 width: 22%;
}
#mario #bicycle .tBox .icn img{
 width: 100%;
 height: auto;
}
#mario #bicycle .tBox h2{
 margin: 0 auto;
 width: 62%;
}
#mario #bicycle .tBox h2 img{
 width: 100%;
 height: auto;
}
#mario #bicycle .tBox p{
 margin: 0 auto;
 padding: 4vw 0 0;
 width: 100%;
 font-size: 3.6vw;
 line-height: 190%;
 text-align: center;
 font-weight: 900;
 color: #fff;
}
#mario #bicycle .bicycleBox{
 margin: 0;
 padding: 0;
 width: 100% !important;
 text-align: center;
 background-image: none;
 display: block;
	-webkit-filter:drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  -moz-filter:drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  -ms-filter:drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  filter:drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
}
#mario #bicycle .bicycleBox .inner{
 margin: 0 auto;
 width: 100%;
 position: relative;
}
#mario #bicycle .bicycleBox .inner img{
 width: 100%;
 height: auto;
}
#mario #bicycle .bicycleBox .inner .bBt{
 float: left;
 width: 50%;
}
#mario #bicycle .bicycleBox .inner .bBt a{
 width: 100%;
 height: 100%;
 display: block;
 cursor: pointer;
 transition: .3s;
 position: relative;
}
#mario #bicycle .bicycleBox .inner .bBt img{
 width: 100%;
 height: auto;
}
#mario #bicycle .bicycleBox .inner .bBt a:after{
 content: '';
 margin: auto;
 width: 105%;
 height: 100%;
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 filter: alpha(opacity=0);
 z-index: 20;
 background-image: url(../images/bicycleHoverSp.png);
 background-position: left top;
 background-size: 100% 100%;
 background-repeat: no-repeat;
 transition: .3s;
}
#mario #bicycle .bicycleBox .inner .bBt a:hover:after{
  opacity:1;
  filter: alpha(opacity=100);
  -webkit-animation: cursor2s 0.3s ease infinite alternate; animation: cursor2s 0.3s ease infinite alternate; opacity: 1;
}

#mario #bicycle .bicycleBox .inner .nin{
 font-size: 2.2vw;
 text-align: left;
 font-weight: 400;
 color: #fff;
 position: absolute;
 bottom: -5vw;
 right: 2%;
}
#mario #bicycle .bBox{
 width: 100%;
 height: 10vw;
 background-image: url(../images/bg_red.jpg);
 background-position: left top;
 background-size: 10vw auto;
 background-repeat: repeat;
}
#mario #bicycle .caution{
 padding: 5.5vw 0 5.7vw;
 width: 100%;
 height: auto;
 background-image: url(../images/bg4Sp.jpg);
 background-position: center top;
 background-size: cover;
 background-repeat: no-repeat;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#mario #bicycle .caution img{
 margin: 0 auto;
 width: 65%;
 height: auto;
}

#mario #parts{
 padding: 5vw 0 0;
 width: 100%;
 background-image: url(../images/bg_green.jpg);
 background-position: left top;
 background-size: 10vw auto;
 background-repeat: repeat;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#parts .bg6Scroll{
  position: relative;
  display: -webkit-flex;
  display: flex;
  width: 100vw;
  height: 5vw;
  overflow: hidden;
}
#parts .bg6Scroll img{
  width: auto;
  height: 100%;
  will-change: transform;
}
#parts .bg6Scroll img:first-child{
  -webkit-animation: loopPs 50s -25s linear infinite;
  animation: loopPs 50s -25s linear infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
#parts .bg6Scroll img + img{
  -webkit-animation: loopP2s 50s  linear infinite;
  animation: loopP2s 50s linear infinite;
}
#mario #parts .icn{
 margin: 1vw auto 2vw;
 width: 22%;
}
#mario #parts .icn img{
 width: 100%;
 height: auto;
}
#mario #parts h2{
 margin: 0 auto;
 width: 28%;
}
#mario #parts h2 img{
 width: 100%;
 height: auto;
}
#mario #parts .partsBox{
 margin: 0 auto;
 padding: 4vw 0 10vw;
 width: 86% !important;
 position: relative;
}
#mario #parts .partsBox li{
 float: none;
 margin: 0 0 1vw;
 width: 100%;
}
#mario #parts .partsBox li:nth-child(2n){
 float: none;
}
#mario #parts .partsBox li:nth-child(3),
#mario #parts .partsBox li:nth-child(4){
 margin: 0 0 1vw;
}
#mario #parts .partsBox li img{
 width: 100%;
 height: auto;
 position: relative;
 transition: .3s;
}
#mario #parts .partsBox li p{
 margin: auto;
 padding: 0;
 width: 100%;
 font-size: 5vw;
 line-height: 100%;
 text-align: center;
 font-weight: 900;
 color: #fff;
 position: absolute;
 bottom: 6.4vw;
 z-index: 2;
 transition: .3s;
}
#mario #parts .partsBox li a{
 width: 100%;
 height: 100%;
 display: block;
 cursor: pointer;
 position: relative;
 transition: .3s;
}
#mario #parts .partsBox li a:after{
 content: '';
 margin: auto;
 width: 100%;
 height: 94%;
 display: block;
 position: absolute;
 top: 6vw;
 left: 0;
 opacity: 0;
 filter: alpha(opacity=0);
 z-index: 20;
 background-image: url(../images/partsHover.png);
 background-position: left top;
 background-size: 100% 100%;
 background-repeat: no-repeat;
 transition: .3s;
}
#mario #parts .partsBox li a:hover:after{
  opacity:1;
  filter: alpha(opacity=100);
  -webkit-animation: cursor3s 0.3s ease infinite alternate; animation: cursor3s 0.3s ease infinite alternate; opacity: 1;
}
#mario #parts .partsBox li a:hover{
  opacity:1;
  filter: alpha(opacity=100);
}
#mario #parts .partsBox li a:hover{
  opacity:1;
  filter: alpha(opacity=100);
}
#mario #parts .partsBox li .coin{
 display: none;
}
#mario #parts .partsBox li a:hover .coin{
 display: none;
}
#mario #parts .partsBox .nin{
 font-size: 2.2vw;
 text-align: left;
 font-weight: 400;
 color: #fff;
 position: absolute;
 bottom: 5vw;
 right: -5%;
}

#mario #fBox{
 padding: 12vw 0 3vw;
 width: 100%;
 background-image: url(../images/bg5Sp.jpg);
 background-position: center center;
 background-size: cover;
 background-repeat: no-repeat;
 position: relative;
}
#mario #fBox .att{
 margin: auto;
 width: 100%;
 max-width: 100%;
 font-size: 2.2vw;
 line-height: 100%;
 text-align: center;
 font-weight: 900;
 position: absolute;
 top: 4vw;
 left: 0;
 right: 0;
}
#mario #fBox .box{
 margin: 0 auto 6vw;
 width: 100%;
 text-align: center;
}
#mario #fBox .box img{
 margin: 0 auto;
 width: 20%;
 height: auto;
}
#mario #fBox .box .kakko{
 margin: 1vw auto 0;
 padding: 1vw 0 3vw;
 width: 90%;
 height: auto;
 font-size: 5vw;
 line-height: 120%;
 text-align: center;
 font-weight: 900;
 color: #3188E8;
 background-image: url(../images/kakkoL.png),url(../images/kakkoR.png);
 background-position: left top,right top;
 background-size: auto 100%,auto 100%;
 background-repeat: no-repeat,no-repeat;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#mario #fBox .box p{
 margin: 0 auto;
 padding: 4vw 0 0;
 width: 100%;
 font-size: 3.8vw;
 line-height: 160%;
 text-align: center;
 font-weight: 400;
}




#mario .modal_box{
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 1000;
 display: none;
 max-width: 100%;
 width: 100%;
 max-height: 90%;
 height: 90%;
 margin: auto;
 padding: 0;
 text-align: center;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#mario .modal_box .modal_close{
 width: 6vw;
 height: 6vw;
 background-image: url(../images/close.png);
 background-position: center center;
 background-size: 100% auto;
 background-repeat: no-repeat;
 position: fixed;
 top: 4vw;
 right: 6vw;
 cursor: pointer;
 z-index: 1001;
}
#mario .modal_box .modal_close:hover{
  opacity:0.5;
  filter: alpha(opacity=50);
}
#mario .modal_box .inner{
 transform: scale(0.88);
 margin: 0;
 padding: 2vw 0 0;
 width: 100%;
 height: 100%;
 background: #fff;
 border-radius: 6px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.3));
 -moz-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.3));
 -ms-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.3));
 filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.3));
 position: relative;
 background-position: left bottom 2vw,left bottom 6vw;
 background-size: 2.5vw auto,12% auto;
 background-repeat: repeat-x,no-repeat;
 overflow-y: auto;
}
#mario .modal_box.red .inner{
 background-image: none,url(../images/text_red.png);
}
#mario .modal_box.blue .inner{
 background-image: none,url(../images/text_blue.png);
}
#mario .modal_box.green .inner{
 background-image: none,url(../images/text_green.png);
}
#mario .modal_box.pink .inner{
 background-image: none,url(../images/text_pink.png);
}
#mario .modal_box.white .inner{
 background-image: none,url(../images/text_white.png);
}
#mario .modal_box .inner .lineBtm{
 margin: 20vw 0 2vw;
 padding: 0;
 width: 100%;
 height: 2.5vw;
 background-position: left bottom;
 background-size: 2.5vw auto;
 background-repeat: repeat-x;
 display: block;
}
#mario .modal_box.red .inner .lineBtm{
 background-image: url(../images/line_r.jpg);
}
#mario .modal_box.blue .inner .lineBtm{
 background-image: url(../images/line_b.jpg);
}
#mario .modal_box.green .inner .lineBtm{
 background-image: url(../images/line_g.jpg);
}
#mario .modal_box.pink .inner .lineBtm{
 background-image: url(../images/line_p.jpg);
}
#mario .modal_box.white .inner .lineBtm{
 background-image: url(../images/line_w.jpg);
}
#mario .modal_box .inner .line{
 margin: 0;
 padding: 0;
 width: 100%;
 height: 10vw;
 text-align: left;
 background-position: left bottom 4vw;
 background-size: 2.5vw auto;
 background-repeat: repeat-x;
 position: relative;
}
#mario .modal_box.red .inner .line{
 background-image: url(../images/line_r.jpg);
}
#mario .modal_box.blue .inner .line{
 background-image: url(../images/line_b.jpg);
}
#mario .modal_box.green .inner .line{
 background-image: url(../images/line_g.jpg);
}
#mario .modal_box.pink .inner .line{
 background-image: url(../images/line_p.jpg);
}
#mario .modal_box.white .inner .line{
 background-image: url(../images/line_w.jpg);
 background-position: left bottom 18px;
}
#mario .modal_box .inner .line img{
 margin: 1vw 0 0 4%;
 width: auto;
 height: 8vw;
}
#mario .modal_box .inner .line p{
 margin: auto;
 padding: 0;
 width: 90%;
 font-size: 2.6vw;
 text-align: center;
 font-weight: 900;
 position: absolute;
 top: -1.5vw;
 left: 0;
 right: 0;
}
#mario .modal_box .inner ul{
 margin: 1vw auto 2vw;
 padding: 0;
 width: 70%;
 height: auto;
 position: relative;
 z-index: -1;
}
#mario .modal_box .inner li{
 margin: 0;
 padding: 0;
 width: 100%;
 height: 63vw;
}
#mario .modal_box .inner li img{
 margin: 0;
 padding: 0;
 width: 100%;
 height: auto;
}
#mario .modal_box .inner li div{
 padding: 9px 0 9px;
 width: 100%;
 font-size: 20px;
 line-height: 100%;
 text-align: center;
 font-weight: 900;
 border-bottom: 2px dashed #000;
}
#mario .modal_box .inner li p{
 margin: 0;
 padding: 7px 0 0;
 width: 100%;
 font-size: 14.4px;
 line-height: 140%;
 text-align: center;
 font-weight: 400;
}
#mario .modal_box .inner ul .slick-arrow{
 z-index: 100;
 position: absolute;
 top: 50%;
}
#mario .modal_box .inner ul .slick-next{
 margin: auto;
 padding: 0;
 width: 10vw;
 height: 10vw;
 background-image: url(../images/arrowR.png);
 background-size: 3vw auto;
 background-position: center center;
 background-repeat: no-repeat;
 position: absolute;
 right: -20%;
 top: 0;
 bottom: 0;
 display: none;
 transition: .3s;
}
#mario .modal_box .inner ul .slick-prev{
 margin: auto;
 padding: 0;
 width: 10vw;
 height: 10vw;
 position: absolute;
 left: -20%;
 top: 0;
 bottom: 0;
 background-image: url(../images/arrowL.png);
 background-size: 3vw auto;
 background-position: center center;
 background-repeat: no-repeat;
 display: none;
 transition: .3s;
}
#mario .modal_box .inner ul .slick-next:hover,
#mario .modal_box .inner ul .slick-prev:hover{
  opacity:0.5;
  filter: alpha(opacity=50);
}
#mario .modal_box .inner .iBox{
 margin: 0 auto 10vw;
 width: 78%;
 position: relative;
}
#mario .modal_box .inner .iBox .mario{
 width: 35%;
 height: auto;
 position: absolute;
 top: -3vw;
 right: -10%;
 z-index: 2;
}
#mario .modal_box .inner .iBox .kino{
 width: 28%;
 height: auto;
 position: absolute;
 top: -9vw;
 right: -10%;
 z-index: 2;
}
#mario .modal_box .inner .iBox .yoshi{
 width: 30%;
 height: auto;
 position: absolute;
 top: -4vw;
 right: -11%;
 z-index: 2;
}
#mario .modal_box .inner .iBox .peach{
 width: 35%;
 height: auto;
 position: absolute;
 top: -8vw;
 right: -14%;
 z-index: 2;
}
#mario .modal_box .inner .iBox .mario2{
 width: 40%;
 height: auto;
 position: absolute;
 top: -8vw;
 right: -14%;
 z-index: -1;
}
#mario .modal_box .inner .iBox h3{
 margin: 0 auto 1vw;
 width: 90%;
 font-size: 4vw;
 line-height: 110%;
 text-align: left;
 font-weight: 900;
}
#mario .modal_box .inner .iBox h3 img{
 margin: 1vw 5% 0 0;
 width: 15%;
 height: auto;
 vertical-align: middle;
 float: left;
}
#mario .modal_box .inner .iBox .spec,
#mario .modal_box .inner .iBox .pri{
 float: none;
 width: 100%;
}
#mario .modal_box .inner .iBox .spec{
 margin: 0 0 3vw;
}
#mario .modal_box .inner .iBox .pri{
 float: none;
 text-align: center;
 position: relative;
 z-index: 2;
}
#mario .modal_box .inner .iBox .spec h4,
#mario .modal_box .inner .iBox .pri h4{
 width: 100%;
}
#mario .modal_box .inner .iBox .spec h4 img,
#mario .modal_box .inner .iBox .pri h4 img{
 width: 100%;
 height: auto;
}
#mario .modal_box .inner .iBox .spec ul{
 margin: 0 auto;
 padding: 0;
 width: 95%;
}
#mario .modal_box .inner .iBox .spec ul li{
 padding: 1.3vw 2% 1.2vw;
 width: 100%;
 font-size: 3.4vw;
 line-height: 100%;
 text-align: left;
 font-weight: 400;
 border-bottom: 1px solid #000;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#mario .modal_box .inner .iBox .spec ul li .pcOnly{
 display: none;
}
#mario .modal_box .inner .iBox .spec ul li.spOnly{
 padding: 1.3vw 2% 1.2vw 26%;
}
#mario .modal_box .inner .iBox .spec ul li:last-child{
 border-bottom: none;
}
#mario .modal_box .inner .iBox .pri p{
 margin: 1.5vw auto 1vw;
 padding: 0;
 width: 80%;
 font-size: 3vw;
 line-height: 100%;
 text-align: left;
 font-weight: 400;
}
#mario .modal_box .inner .iBox .pri .price{
 margin: 0 auto;
 padding: 0;
 width: 80%;
 font-size: 6vw;
 line-height: 100%;
 text-align: left;
 font-weight: 900;
 font-feature-settings: "palt";
 white-space: nowrap;
}
#mario .modal_box .inner .iBox .pri .price strong{
 font-family: 'Roboto', sans-serif;
 font-size: 7vw;
 font-weight: 900;
}
#mario .modal_box .inner .iBox .pri .price span{
 font-size: 3vw;
 font-weight: 900;
}
#mario .modal_box .inner .iBox .pri .price span span{
 font-family: 'Roboto', sans-serif;
 display: inline;
}
#mario .modal_box .inner .iBox .pri .mBt{
 margin: 3vw 0 0;
 padding: 0;
 width: 100%;
 height: auto;
 display: block;
 position: relative;
 float: none;
}
#mario .modal_box .inner .iBox .pri .mBt a{
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 display: block;
 position: relative;
}
#mario .modal_box .inner .iBox .pri .mBt img{
 margin: 0;
 padding: 0;
 width: 100%;
 height: auto;
 position: absolute;
 top: 0;
 left: 0;
}
#mario .modal_box .inner .iBox .pri .mBt div{
 margin: 0;
 padding: 2.8vw 0 0;
 width: 100%;
 font-size: 4vw;
 line-height: 100%;
 text-align: center;
 font-weight: 900;
 color: #fff;
 position: absolute;
 top: 0;
 z-index: 2;
}
.modal_bg{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	display: none;
	width: 100%;
	height: 120%;
	background-color: rgba(0,0,0,0.7);
}



#pagetop{
	width: 60px;
	height: 60px;
	position: fixed;
	right: 20px;
	bottom: 20px;
	cursor: pointer;
}
#pagetop img{
	width: 100%;
	height: auto;
}
  footer ul.cb-btns{
    width: auto;
    margin: 0 20px;
    font-size: 0;
    margin-bottom: 20px;
  }
  footer ul.cb-btns li.cb-btn{
    display: block;
    width: auto;
    margin-bottom: 10px;
  }
  footer ul.cb-btns li.cb-btn:first-child{
    margin-right: 0;
  }
  footer ul.cb-btns li.cb-btn a{
 padding: 4vw 0;
 height: auto;
 text-align: left;
 display: block;
 position: relative;
 background-color: #ffffff;
 overflow: hidden;
 background-image: url(../images/existing_img/arrow.png);
 background-position: right 5% center;
 background-size: 2.7vw auto;
 background-repeat: no-repeat;
  }
footer ul.cb-btns li.cb-btn a img{
 margin: auto;
 width: 5vw;
 height: auto;
 display: inline-block;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 7.3%;
}
footer ul.cb-btns li.cb-btn:nth-child(2) a img{
 width: 10vw;
 height: auto;
 left: 5%;
}
  footer ul.cb-btns li.cb-btn a span{
 margin: 0 0 0 25%;
 font-size: 4.5vw;
 color: #003E81;
 line-height: 100%;
 text-align: left;
 position: static;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }

}

@keyframes main1s{
  from, to {
    animation-timing-function: cubic-bezier(.69,-0.01,.31,1.02)
  }
  from {
 top: 14vw;
 left: auto;
 right: -25%;
	opacity: 0;
	transform: scale(0.7);
  }
  to {
 top: 28vw;
 left: auto;
 right: -5%;
	opacity: 1;
	transform: scale(1);
  }
}

@keyframes main2s{
	0% {
 top: 26vw;
 left: auto;
 right: -31%;
	opacity: 0;
	transform: scale(0.7);
	}
	100% {
 top: 36vw;
 left: auto;
 right: -11%;
	opacity: 1;
	transform: scale(1);
	}
}

@keyframes main3s{
	0% {
 top: 40vw;
 right: auto;
 left: 38%;
	opacity: 0;
	transform: scale(0.7);
	}
	100% {
 top: 50vw;
 right: auto;
 left: 8%;
	opacity: 1;
	transform: scale(1);
	}
}

@keyframes main4s{
	0% {
 top: 65vw;
 left: 27%;
	opacity: 0;
	transform: scale(0.7);
	}
	100% {
 top: 75vw;
 left: -7%;
	opacity: 1;
	transform: scale(1);
	}
}

@keyframes logos{
	0% {
	opacity: 0;
	transform: scale(0.9);
	}
	100% {
	opacity: 1;
	transform: scale(1);
	}
}

@keyframes bounceMenus{
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  from {
    transform: translate3d(0, 0, 0);
  }
  60% {
    transform: translate3d(0, -5px, 0);
  }
  75% {
    transform: translate3d(0, 4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes loops{
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes loops{
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@-webkit-keyframes loop2s{
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}
@keyframes loop2s{
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

@-webkit-keyframes cursors { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  100% { -webkit-transform: scale(1.1,1.07);
    transform: scale(1.1,1.07); } }

@keyframes cursors { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  100% { -webkit-transform: scale(1.1,1.07);
    transform: scale(1.1,1.07); } }

@-webkit-keyframes cursor2s { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  100% { -webkit-transform: scale(1.06,1.17);
    transform: scale(1.06,1.17); } }

@keyframes cursor2s { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  100% { -webkit-transform: scale(1.06,1.17);
    transform: scale(1.06,1.17); } }

@-webkit-keyframes loopPs{
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes loopPs{
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@-webkit-keyframes loopP2s{
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}
@keyframes loopP2s{
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

@-webkit-keyframes cursor3s { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  100% { -webkit-transform: scale(1.1,1.11);
    transform: scale(1.1,1.11); } }

@keyframes cursor3s { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  100% { -webkit-transform: scale(1.1,1.11);
    transform: scale(1.1,1.11); } }
    


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



}



@media screen and (max-width:768px) and (orientation: landscape){


}

.fadein,
.fadein2,
.fadein3,
.fadein4,
.fadein5,
.fadein6{
	opacity:0;
}
.fadeup {
	opacity:0;
	transition: .8s;
	transform: translate(0,20px); 
	-webkit-transform: translate(0,20px);
}
.fadeup2 {
	opacity:0;
	transition: .8s;
	transform: translate(0,40px); 
	-webkit-transform: translate(0,40px);
}
.fadeup3 {
	opacity:0;
	transition: .8s;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px);
}
.fadeup4 {
	opacity:0;
	transition: .8s;
	transform: translate(0,80px); 
	-webkit-transform: translate(0,80px);
}
.up {
	opacity:1;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}
/* other
---------------------------------------------------------*/
.clearfix:after{  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
}  
  
.clearfix{ display: inline-table; }  
  
/* Hides from IE-mac \*/  
* html .clearfix{ height: 1%; }  

.clearfix{ display: block; }  
/* End hide from IE-mac */