/* main: style.scss*/
body, html { height: 100%; }

body { /*background:url(../images/common/bg_page-gray.png) repeat 0 0 fixed;*/ }

.disable-hover { pointer-events: none; }

body.noscroll { overflow: hidden; }

.tooltip { background-color: #000; position: absolute; top: 0; left: 0; color: #fff; text-align: center; height: 20px; line-height: 20px; padding: 0 20px; z-index: 99; font-size: 1.2rem; }

.swiper-container { overflow: visible; }

#mkWrapper { position: relative; max-width: 1920px; min-width: 1024px; margin: 0 auto; overflow: hidden; }

#mkWrapper.scroll { overflow-y: scroll; }

.mk_labo-bnr {
  position: relative;
  background: url(../images/common/bnr_n_labo_ov.png) no-repeat;
}
.mk_zelda-bnr{
  position: relative;
  background: url(../images/common/bnr_zelda_ov.png) no-repeat;
}
.mk_bnr img{
  transition: 0.3s;
}
.mk_bnr img:hover {
  opacity: 0;
}
.mk_bnr-balloon{
  position: absolute;
  top: -10px;
  left: -21px;
}

.detailArea {
  position: relative;
    width: 100%;
    min-width: 960px;
    overflow: hidden;
    background: #000;
    font-size: 1.3rem;
    line-height: 100%;
    z-index: 99;
    padding: 30px 0;
}
.detail__wrapper {
  position: relative;
  margin: 0 auto;
  width: 660px;
  height: 168px;
}
.detail__product{
  position: absolute;
  top: 0;
  left: 15px;
  width: 64%;
}
.product_list {
  color: #FFF;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 0.05em;
}
.product_list:after {
  content: "";
  display: block;
  clear:both;
}
.product_list dt{
  position: relative;
  float: left;
  width: 96px;
  padding: 6px 0;
}
.product_list dt:before{
  content: "";
  display: block;
  position: absolute;
  left: -15px;
  width: 6px;
  height: 14px;
  background: #e80002;
}
.product_list dd{
  padding: 6px 0;
}

.detail__btn {
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
}
.btn__download{
  color: #FFF;
  width: 191px;
  height: 31px;
  background: url(../images/common/btn_download_bg.png) no-repeat;
  margin-bottom: 11px;
  transition: 0.3s;
}
.btn__download:hover {
  background: url(../images/common/btn_download_bg_ov.png) no-repeat;
}
.btn__download p a {
  display: block;
  width: 191px;
  height: 31px;
  padding-top: 9px;
  text-align: center;
  color: #FFF;
  text-decoration: none;
}
.btn__download:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 11px;
  left: 15px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid #FFF;
}
.btn__products{
  position: relative;
  color: #FFF;
  width: 161px;
  height: 28px;
  background: url(../images/common/btn_products_bg.png) no-repeat;
  transition: 0.3s;
}
.btn__products:hover {
  background: url(../images/common/btn_products_bg_ov.png) no-repeat;
}
.btn__products p a {
  display: block;
  width: 161px;
  height: 28px;
  padding-top: 9px;
  text-align: center;
  color: #000;
  text-decoration: none;
}
.btn__products:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 15px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid #000;
}
.btn__cero {
  position: absolute;
  bottom: 0;
  right: 0;
  transition: 0.3s;
}
.btn__cero:hover {
  opacity: 0.8;
}


.detail__online {
  position: absolute;
  bottom: 0;
  font-weight:normal;
}
.detail__online img {
  float: left;
  vertical-align: top;
}
.online__text {
  color: #FFF;
  font-size: 12px;
  line-height: 2.6;
  padding-left: 126px;
}
.online__text li {
  padding-bottom: 6px;
}
.online__text li:last-child {
  padding-bottom: 0;
}
.online__text a {
  color: #FFF;
}


#globalFooter { position: relative; width: 100%; min-width: 960px; height: 30px; overflow: hidden; background: #e80002; font-size: 1.3rem; line-height: 100%; z-index: 99; }

#globalFooter a { -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; background: url(../images/common/ic_arrow-x.png) no-repeat 0 50%; padding-left: 12px; display: inline-block; margin: 0 20px 0 10px; color: #fff; line-height: 32px; height: 30px; text-decoration: none; }

#globalFooter a.globalFooterSupport{
  background: rgba(0,0,0,0.4);
  margin-left: 0;
  padding-left: 22px;
  padding-right: 20px;
}

#globalFooter a.globalFooterSupport span{
  background: url(../images/common/ic_arrow-x.png) no-repeat 0 50%;
  padding-left: 12px;
}

#globalFooter a:hover { opacity: 0.7; }

#globalFooter p { background: url(../images/common/img_copyright.png) no-repeat 0 50%; width: 128px; height: 30px; overflow: hidden; position: absolute; top: 0; right: 0; text-indent: 128px; white-space: nowrap; }

#mkContainer { height: 100%; position: relative; }

#globalNavi { -webkit-transition: opacity 0.4s ease 3s; transition: opacity 0.4s ease 3s; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: fixed; top: 50%; right: 20px; z-index: 999; opacity: 0; }

#globalNavi.active { opacity: 1; }

#globalNavi.bk a:before { border: 2px solid #fff; }

#globalNavi.bk a:hover:before { background-color: #fff; }

#globalNavi.bk a.active:before { background-color: #fff; }

#globalNavi li { margin-bottom: 20px; font-size: 1.1rem; }

#globalNavi li.hide { display: none; }

#globalNavi a { -webkit-transition: color 0.2s ease; transition: color 0.2s ease; display: block; position: relative; color: #fff; }

#globalNavi a:before { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; border: 2px solid #000; content: ''; display: block; width: 7px; height: 7px; }

#globalNavi a:hover:before { background-color: #000; }

#globalNavi a:hover .mask { width: 110px; }

#globalNavi a.active:before { background-color: #000; }

#globalNavi .mask { -webkit-transition: width 0.4s ease; transition: width 0.4s ease; overflow: hidden; position: absolute; top: 50%; right: 20px; margin-top: -10px; height: 20px; width: 0; }

#globalNavi span { background-color: #000; display: block; position: absolute; top: 0; right: 6px; height: 20px; line-height: 20px; width: 90px; text-align: center; }

#globalNavi span:after { background: url(../images/common/ic_hukidashi.png) no-repeat 0 0; content: ''; display: block; width: 6px; height: 6px; position: absolute; top: 50%; right: -6px; margin-top: -3px; }

/* section separator ----------------------------------------------------------*/
.separator { position: relative; z-index: 10;}

.separator.bk { background: url(../images/common/bg_page-black.png) repeat 0 0 fixed;}

.separator.wh { background: url(../images/common/bg_page-gray.png) repeat 0 0 fixed;}

.separator.ch { background: url(../images/common/bg_page-illust.jpg) repeat 0 0 fixed;}

.separator.ch2 { background: url(../images/common/bg_page-illust2.jpg) repeat 0 0 fixed;}

.separator .img_line { position: absolute; left: 50%; width: 150%; height: 650px; z-index: 1; }

.separator .img_line.type_left { -webkit-transform: translate(-50%, 0) rotate(-7deg); transform: translate(-50%, 0) rotate(-7deg); }

.separator .img_line.type_right { -webkit-transform: translate(-50%, 0) rotate(7deg); transform: translate(-50%, 0) rotate(7deg); }

.separator .img_line .loop_slide { overflow: hidden; position: relative; z-index: 2; height: 370px; }

.separator .img_line .loop_slide .loopSliderWrap { -webkit-transition: -webkit-transform 30s linear; transition: -webkit-transform 30s linear; transition: transform 30s linear; transition: transform 30s linear, -webkit-transform 30s linear; opacity: 1; position: absolute; top: 0; overflow: hidden; }

.separator .img_line .loop_slide.rl .loopSliderWrap { left: 0; }

.separator .img_line .loop_slide.rl ul { float: left; }

.separator .img_line .loop_slide.lr .loopSliderWrap { right: 0; }

.separator .img_line .loop_slide.lr ul { float: right; }

.separator .img_line .loop_slide ul { overflow: hidden; float: left; }

.separator .img_line .loop_slide li { float: left; overflow: hidden; position: relative; width: 657px; }

.separator .img_line .loop_slide li img { min-width: 100%; }

.separator .scene_chara { position: relative; width: 100%; height: 100%; z-index: 10; max-width: 1280px; margin: 0 auto; }

.separator .scene_chara .sc { position: absolute; }

.separator .content { text-align: center; }

.separator .content .inner { max-width: 1024px; margin: 0 auto; position: relative; }

.separator .chara_set { position: absolute; top: -150px; left: 0; width: 100%; height: 150px; z-index: 1; }

/* character*/
.ld_chara { -webkit-animation: chara_jump 0.5s linear infinite; animation: chara_jump 0.5s linear infinite; position: absolute; bottom: 0; width: 120px; height: 119px; }

.ld_chara:nth-child(odd) { -webkit-animation: chara_jump2 0.5s linear infinite; animation: chara_jump2 0.5s linear infinite; }

.ld_chara a, .ld_chara span { background-image: url(../images/common/img_sfc-chara.png); background-repeat: no-repeat; display: block; width: 100%; height: 100%; }

.chara1 a, .chara1 span { background-position: -120px 0; }

.chara2 a, .chara2 span { background-position: 0 0; }

.chara3 a, .chara3 span { background-position: -360px 0; }

.chara4 a, .chara4 span { background-position: -360px -241px; }

.chara5 a, .chara5 span { background-position: -360px -122px; }

.chara8 a, .chara8 span { background-position: -240px 0; }

.chara9 a, .chara9 span { background-position: -0px -122px; }

.chara10 a, .chara10 span { background-position: -120px -122px; }

.chara11 a, .chara11 span { background-position: -120px -242px; }

.chara12 a, .chara12 span { background-position: 0 -242px; }

.chara13 a, .chara13 span { background-position: -240px -242px; }

.chara22 a, .chara22 span { background-position: -240px -122px; }

.chara23 a, .chara23 span { background-position: -240px -360px; }

.chara24 a, .chara24 span { background-position: 0 -360px; }

.chara25 a, .chara25 span { background-position: -480px 0; }

.chara29 a, .chara29 span { background-position: -120px -362px; }

.chara30 a, .chara30 span { background-position: -480px -362px; }

.chara31 a, .chara31 span { background-position: -360px -362px; }

.chara32 a, .chara32 span { background-position: -480px -242px; }

.chara33 a, .chara33 span { background-position: 0 -481px; }

.chara34 a, .chara34 span { background-position: -240px -482px; }

.chara35 a, .chara35 span { background-position: -480px -122px; }

.chara37 a, .chara37 span { background-position: -480px -482px; }

.chara38 a, .chara38 span { background-position: -360px -482px; }

.chara41 a, .chara41 span { background-position: -120px -482px; }

/* animation stop*/
.pause .ld_chara { -webkit-animation-play-state: paused !important; animation-play-state: paused !important; }

/* section separator*/
.separator .chara_set { -webkit-transform: translateX(-47%); transform: translateX(-47%); width: 70%; left: 50%; /* .ld_chara:nth-child(1) {animation-delay:0s !important;}*/ /* .ld_chara:nth-child(2) {animation-delay:4s !important;}*/ /* .ld_chara:nth-child(3) {animation-delay:8s !important;}*/ /* .ld_chara:nth-child(4) {animation-delay:12s !important;}*/ /* .ld_chara:nth-child(5) {animation-delay:16s !important;}*/ /* .ld_chara:nth-child(6) {animation-delay:20s !important;}*/ /* .ld_chara:nth-child(7) {animation-delay:24s !important;}*/ /* .ld_chara:nth-child(8) {animation-delay:28s !important;}*/ }

.separator .chara_set .ld_chara { -webkit-animation: chara_jump 0.5s linear infinite, kart_move 32s linear infinite; animation: chara_jump 0.5s linear infinite, kart_move 32s linear infinite; left: 100%; }

.separator .chara_set .ld_chara:nth-child(odd) { -webkit-animation: chara_jump2 0.5s linear infinite, kart_move 32s linear infinite; animation: chara_jump2 0.5s linear infinite, kart_move 32s linear infinite; }

.separator .chara_set .ld_chara a { position: relative; }

.separator .chara_set .ld_chara a:hover { -webkit-animation: kart_jump 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: kart_jump 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.separator .chara_set .ld_chara:nth-child(1) { -webkit-animation-delay: 0s !important; animation-delay: 0s !important; -webkit-animation-duration: 0.5s, 20s; animation-duration: 0.5s, 20s; }

.separator .chara_set .ld_chara:nth-child(2) { -webkit-animation-delay: 2s !important; animation-delay: 2s !important; -webkit-animation-duration: 0.5s, 32s; animation-duration: 0.5s, 32s; }

.separator .chara_set .ld_chara:nth-child(3) { -webkit-animation-delay: 10s !important; animation-delay: 10s !important; -webkit-animation-duration: 0.5s, 22s; animation-duration: 0.5s, 22s; }

.separator .chara_set .ld_chara:nth-child(4) { -webkit-animation-delay: 12s !important; animation-delay: 12s !important; -webkit-animation-duration: 0.5s, 24s; animation-duration: 0.5s, 24s; }

.separator .chara_set .ld_chara:nth-child(5) { -webkit-animation-delay: 20s !important; animation-delay: 20s !important; -webkit-animation-duration: 0.5s, 16s; animation-duration: 0.5s, 16s; }

.separator .chara_set .ld_chara:nth-child(6) { -webkit-animation-delay: 5s !important; animation-delay: 5s !important; -webkit-animation-duration: 0.5s, 26s; animation-duration: 0.5s, 26s; }

.separator .chara_set .ld_chara:nth-child(7) { -webkit-animation-delay: 24s !important; animation-delay: 24s !important; -webkit-animation-duration: 0.5s, 30s; animation-duration: 0.5s, 30s; }

.separator .chara_set .ld_chara:nth-child(8) { -webkit-animation-delay: 18s !important; animation-delay: 18s !important; -webkit-animation-duration: 0.5s, 18s; animation-duration: 0.5s, 18s; }

.separator .type_right .chara_set { -webkit-transform: translateX(-54%) scaleX(-1); transform: translateX(-54%) scaleX(-1); }

.separator .type_right .chara_set .ld_chara { right: 100%; }

/* main: style.scss*/
#mkWrapper { /* mkMainVisual ----------------------------------------------------------*/ }

#mkWrapper #mkMainVisual { min-height: 660px; height: 100vh; min-height: 866px; position: relative; overflow: hidden; z-index: 10; /* animation*/ }

#mkWrapper #mkMainVisual.deactive #mvInner { /*transform:translateY(100vh);*/ top: 100vh; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/*#mkWrapper #mkMainVisual #mvInner { -webkit-transition: top 1.4s cubic-bezier(0.86, 0, 0.07, 1); transition: top 1.4s cubic-bezier(0.86, 0, 0.07, 1); background: url(../images/mv/bg_mv.jpg) no-repeat 50% 50% fixed; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; min-height: 660px; height: 100%; overflow: hidden; }
*/
/*背景 : 表示速度変更*/
#mkWrapper #mkMainVisual #mvInner {-webkit-transition: top 0s cubic-bezier(0.86, 0, 0.07, 1); transition: top 0s cubic-bezier(0.86, 0, 0.07, 1); background: url(../images/mv/bg_mv.jpg) no-repeat 50% 50% fixed; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; min-height: 886px; height: 100%; overflow: hidden;}


/*imgをbackground:cover
#mkWrapper #mkMainVisual #mvInner .background {
  position: relative;
  height: 150vh;
}
#mkWrapper #mkMainVisual #mvInner .background img {
  position: fixed;
  bottom: 0px;
  left: 0;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-width: inherit;
}*/


/*befor .mv_parts  真下スクロール案内・ゲームソフトロゴ・ゲーム機ロゴ・左下パッケージ紹介・右下いつでもどこでもマリオカート
#mkWrapper #mkMainVisual #mvInner .mv_parts { -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: opacity 0.6s ease, -webkit-transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.6s ease; transition: transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.6s ease, -webkit-transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 0; }
表示速度変更*/
#mkWrapper #mkMainVisual #mvInner .mv_parts { -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: opacity 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: transform 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.4s ease; transition: transform 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 0; }

#mkWrapper #mkMainVisual #mvInner .switch_logo { position: absolute; top: 0; right: 0; z-index: 99; width: 100px;}

#mkWrapper #mkMainVisual #mvInner .switch_logo img { width: 100%; height: auto;}

#mkWrapper #mkMainVisual #mvInner .mk_logo { position: absolute; top: 50%; margin: -266px 0 0 30px; z-index: 10; }

#mkWrapper #mkMainVisual #mvInner .mk_package { position: fixed; bottom: 30px; margin-left: 35px; z-index: 10; }

#mkWrapper #mkMainVisual #mvInner .mk_package { position: absolute; bottom: 28%; margin-left: 112px; z-index: 10; }

#mkWrapper #mkMainVisual #mvInner .mk_package .img { display: inline-block; }

#mkWrapper #mkMainVisual #mvInner .mk_package .img a { -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; display: block; margin-top: 10px; }

#mkWrapper #mkMainVisual #mvInner .mk_package .img a:hover { opacity: 0.8; }

#mkWrapper #mkMainVisual #mvInner .mk_package .img img { display: block; }

#mkWrapper #mkMainVisual #mvInner .mk_package .mk_other { display: block; margin-bottom: 16px; position: relative;}

#mkWrapper #mkMainVisual #mvInner .mk_package .mk_movie { display: inline-block; margin-bottom: 0; }

#mkWrapper #mkMainVisual #mvInner .mk_package .mk_movie a { display: block; position: relative;}

#mkWrapper #mkMainVisual #mvInner .mk_package .mk_movie a:after { -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; background: url(../images/common/ic_play.png) no-repeat 0 0; content: ''; display: block; width: 32px; height: 32px; position: absolute; top: 70px; left: 50%; margin-left: -16px; }

#mkWrapper #mkMainVisual #mvInner .mk_package .mk_movie a:hover:after { -webkit-transform: scale(1.2); transform: scale(1.2); }

#mkWrapper #mkMainVisual #mvInner .mk_package .mk_amiibo { text-align: center; }

#mkWrapper #mkMainVisual #mvInner .mk_package .mk_amiibo a { -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; }

#mkWrapper #mkMainVisual #mvInner .mk_package .mk_amiibo a:hover { opacity: 0.8; }

#mkWrapper #mkMainVisual #mvInner .mk_package .cero { text-indent: -9999px; display: block; width: 37px; height: 48px; position: absolute; top: 50px; left: 78px; }

#mkWrapper #mkMainVisual #mvInner .mk_package .img .update { position: absolute; top: 113px;
  left: 134px;  }

#mkWrapper #mkMainVisual #mvInner .mk_package .img .update img { display: inline-block; }

#mkWrapper #mkMainVisual #mvInner .mk_package .img .guidebook { position: absolute; top: 113px;
  left: 285px; }

#mkWrapper #mkMainVisual #mvInner .mk_package .img .guidebook img { display: inline-block; }

#mkWrapper #mkMainVisual #mvInner .mk_package .img .playmode { position: absolute; top: 113px;
  left: 396px; }

#mkWrapper #mkMainVisual #mvInner .mk_package .img .playmode img { display: inline-block; }

#mkWrapper #mkMainVisual #mvInner .ic_scroll { -webkit-transform: translateX(-50%); transform: translateX(-50%); position: fixed; bottom: 30px; left: 50%; margin-left: -28px; z-index: 10; }

#mkWrapper #mkMainVisual #mvInner .ic_scroll .img { -webkit-animation: scroll 0.6s ease infinite alternate; animation: scroll 0.6s ease infinite alternate; margin-top: 8px; }

#mkWrapper #mkMainVisual #mvInner .mk_about { position: absolute; top: calc(100vh - 190px); right: 0; z-index: 10; width: 195px; height: 155px; }

#mkWrapper #mkMainVisual #mvInner .mk_about a { position: fixed; }

#mkWrapper #mkMainVisual #mvInner .mk_about img { position: absolute; top: 0; left: 0; }

#mkWrapper #mkMainVisual #mvInner .mk_about .txt { -webkit-animation: blink 1s ease infinite alternate; animation: blink 1s ease infinite alternate; -webkit-transform-origin: 70% 50%; transform-origin: 70% 50%; z-index: 10; }

#mkWrapper #mkMainVisual .obj { position: fixed; }

#mkWrapper #mkMainVisual .obj .target_wrap { -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: opacity 0.6s ease, -webkit-transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.6s ease; transition: transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.6s ease, -webkit-transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 0; display: block; }

#mkWrapper #mkMainVisual .obj img { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; }

#mkWrapper #mkMainVisual .obj.obj1 { -webkit-transform: translate(0, -47%); transform: translate(0, -47%); top: 50%; left: 54%; z-index: 6; }

#mkWrapper #mkMainVisual .obj.obj1 .target_wrap { -webkit-transform: scale(0.7) translate(-50px, -50px); transform: scale(0.7) translate(-50px, -50px); }

#mkWrapper #mkMainVisual .obj.obj2 { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); top: 50%; left: 66%; z-index: 5; }

#mkWrapper #mkMainVisual .obj.obj2 .target_wrap { -webkit-transform: scale(0.7) translate(-50px, -50px); transform: scale(0.7) translate(-50px, -50px); }

#mkWrapper #mkMainVisual .obj.obj3 { -webkit-transform: translate(0, -21%); transform: translate(0, -21%); top: 50%; left: 47%; z-index: 4; }

#mkWrapper #mkMainVisual .obj.obj3 .target_wrap { -webkit-transform: scale(0.7) translate(50px, -50px); transform: scale(0.7) translate(50px, -50px); }

#mkWrapper #mkMainVisual .obj.obj4 { -webkit-transform: translate(-100%, -100%); transform: translate(-100%, -100%); top: 27%; left: 50%; z-index: 3; }

#mkWrapper #mkMainVisual .obj.obj4 .target_wrap { -webkit-transform: scale(0.7) translate(50px, 50px); transform: scale(0.7) translate(50px, 50px); }

#mkWrapper #mkMainVisual .obj.obj5 { width: 100%; height: 100%; top: 0; left: 0; }

#mkWrapper #mkMainVisual .obj.obj5 .target_wrap { background: url(../images/mv/img_chara-other2.png) no-repeat 48% 46%; top: 0; left: 0; z-index: 3; width: 100%; height: 100%; display: block; }

#mkWrapper #mkMainVisual .obj.obj6 { top: 9%; left: 8%; z-index: 3; }

#mkWrapper #mkMainVisual .obj.obj6 .target_wrap { -webkit-transform: scale(0.7) translate(50px, 50px); transform: scale(0.7) translate(50px, 50px); }

#mkWrapper #mkMainVisual.action .obj .target_wrap { -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); opacity: 1; }
/*before2 速度案２
#mkWrapper #mkMainVisual.action .obj.obj1 .target_wrap { -webkit-transition-delay: 1.6s; transition-delay: 1.6s; }

#mkWrapper #mkMainVisual.action .obj.obj2 .target_wrap { -webkit-transition-delay: 2.2s; transition-delay: 2.2s; }

#mkWrapper #mkMainVisual.action .obj.obj3 .target_wrap { -webkit-transition-delay: 2.3s; transition-delay: 2.3s; }

#mkWrapper #mkMainVisual.action .obj.obj4 .target_wrap { -webkit-transition-delay: 2.4s; transition-delay: 2.4s; }

#mkWrapper #mkMainVisual.action .obj.obj5 .target_wrap { -webkit-transition-delay: 2.5s; transition-delay: 2.5s; }

#mkWrapper #mkMainVisual.action .obj.obj6 .target_wrap { -webkit-transition-delay: 2.6s; transition-delay: 2.6s; }

#mkWrapper #mkMainVisual.action #mvInner .mv_parts { -webkit-transition-delay: 3s; transition-delay: 3s; opacity: 1; }
*/

#mkWrapper #mkMainVisual.action .obj.obj1 .target_wrap { -webkit-transition-delay: 1s; transition-delay: 1s; }

#mkWrapper #mkMainVisual.action .obj.obj2 .target_wrap { -webkit-transition-delay: 1.6s; transition-delay: 1.6s; }

#mkWrapper #mkMainVisual.action .obj.obj3 .target_wrap { -webkit-transition-delay: 1.7s; transition-delay: 1.7s; }

#mkWrapper #mkMainVisual.action .obj.obj4 .target_wrap { -webkit-transition-delay: 1.8s; transition-delay: 1.8s; }

#mkWrapper #mkMainVisual.action .obj.obj5 .target_wrap { -webkit-transition-delay: 1.9s; transition-delay: 1.9s; }

#mkWrapper #mkMainVisual.action .obj.obj6 .target_wrap { -webkit-transition-delay: 2s; transition-delay: 2s; }

#mkWrapper #mkMainVisual.action #mvInner .mv_parts { -webkit-transition-delay: 2.4s; transition-delay: 2.4s; opacity: 1; }

/*#mkWrapper #mkMainVisual.action .obj.obj1 .target_wrap { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }

#mkWrapper #mkMainVisual.action .obj.obj2 .target_wrap { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; }

#mkWrapper #mkMainVisual.action .obj.obj3 .target_wrap { -webkit-transition-delay: 1.0s; transition-delay: 1.0s; }

#mkWrapper #mkMainVisual.action .obj.obj4 .target_wrap { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; }

#mkWrapper #mkMainVisual.action .obj.obj5 .target_wrap { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; }

#mkWrapper #mkMainVisual.action .obj.obj6 .target_wrap { -webkit-transition-delay: 1.3s; transition-delay: 1.3s; }

#mkWrapper #mkMainVisual.action #mvInner .mv_parts { -webkit-transition-delay: 1.7s; transition-delay: 1.7s; opacity: 1; }*/

/* main: style.scss*/
/* about ----------------------------------------------------------*/
#about { background-color: #fff; }

#about .img_line { margin-top: -9%; }

#about .scene_chara { height: 730px; }

#about .scene_chara .sc1 { top: 160px; left: 50%; margin-left: -633px; z-index: 10; }

#about .scene_chara .sc2 { top: 0; left: 50%; margin-left: -139px; }

#about .content { padding-bottom: 300px; }

/* main: style.scss*/
/* character ----------------------------------------------------------*/
#character .img_line { margin-top: -9%; }

#character .scene_chara { height: 445px; margin-bottom: 50px; }

#character .scene_chara .sc1 { top: -130px; right: -360px; }

#character .scene_chara .sc1:before { -webkit-animation: rotation 30s linear infinite; animation: rotation 30s linear infinite; background: url(../images/scene/img_link-cup.png) no-repeat 0 0; content: ''; display: block; width: 462px; height: 462px; position: absolute; top: 110px; left: 430px; z-index: -1; }

#character .scene_chara .sc1.pause:before { -webkit-animation-play-state: paused !important; animation-play-state: paused !important; }

#character .content { padding: 50px 0 300px 0; position: relative; z-index: 10; }

#character .content h2 { margin-bottom: 70px; text-align: left; }

#character .content .label { position: absolute; top: -75px; right: 0; }

#character .content #charaList { margin-right: -20px; }

#character .content #charaList li { margin: 0 10px 20px 10px; float: left; position: relative; }

#character .content #charaList li a { background-image: url(../images/character/img_chara-sprite.png); background-repeat: no-repeat; display: block; width: 128px; height: 128px; position: relative; text-indent: -9999px; }

#character .content #charaList li a:after { -webkit-transition: opacity 0s; transition: opacity 0s; background-image: url(../images/common/bg_cursor_1.png), url(../images/common/bg_cursor_2.png), url(../images/common/bg_cursor_3.png), url(../images/common/bg_cursor_4.png); background-repeat: no-repeat; background-position: 0 0, 100% 0, 0 100%, 100% 100%; content: ''; display: block; width: 148px; height: 148px; position: absolute; top: -10px; left: -10px; opacity: 0; }

#character .content #charaList li a:hover:after { -webkit-animation: cursor 0.3s ease infinite alternate; animation: cursor 0.3s ease infinite alternate; opacity: 1; }

#character .content #charaList li.chara01 a { background-position: 0 0; }

#character .content #charaList li.chara02 a { background-position: -128px 0; }

#character .content #charaList li.chara03 a { background-position: -256px 0; }

#character .content #charaList li.chara04 a { background-position: -384px 0; }

#character .content #charaList li.chara05 a { background-position: -512px 0; }

#character .content #charaList li.chara06 a { background-position: -640px 0; }

#character .content #charaList li.chara07 a { background-position: -768px 0; }

#character .content #charaList li.chara08 a { background-position: 0 -128px; }

#character .content #charaList li.chara09 a { background-position: -128px -128px; }

#character .content #charaList li.chara10 a { background-position: -256px -128px; }

#character .content #charaList li.chara11 a { background-position: -384px -128px; }

#character .content #charaList li.chara12 a { background-position: -512px -128px; }

#character .content #charaList li.chara13 a { background-position: -640px -128px; }

#character .content #charaList li.chara14 a { background-position: -768px -128px; }

#character .content #charaList li.chara15 a { background-position: 0 -256px; }

#character .content #charaList li.chara16 a { background-position: -128px -256px; }

#character .content #charaList li.chara17 a { background-position: -256px -256px; }

#character .content #charaList li.chara18 a { background-position: -384px -256px; }

#character .content #charaList li.chara19 a { background-position: -512px -256px; }

#character .content #charaList li.chara20 a { background-position: -640px -256px; }

#character .content #charaList li.chara21 a { background-position: -768px -256px; }

#character .content #charaList li.chara22 a { background-position: 0 -384px; }

#character .content #charaList li.chara23 a { background-position: -128px -384px; }

#character .content #charaList li.chara24 a { background-position: -256px -384px; }

#character .content #charaList li.chara25 a { background-position: -384px -384px; }

#character .content #charaList li.chara26 a { background-position: -512px -384px; }

#character .content #charaList li.chara27 a { background-position: -640px -384px; }

#character .content #charaList li.chara28 a { background-position: -768px -384px; }

#character .content #charaList li.chara29 a { background-position: 0 -512px; }

#character .content #charaList li.chara30 a { background-position: -128px -512px; }

#character .content #charaList li.chara31 a { background-position: -256px -512px; }

#character .content #charaList li.chara32 a { background-position: -384px -512px; }

#character .content #charaList li.chara33 a { background-position: -512px -512px; }

#character .content #charaList li.chara34 a { background-position: -640px -512px; }

#character .content #charaList li.chara35 a { background-position: -768px -512px; }

#character .content #charaList li.chara36 a { background-position: 0 -640px; }

#character .content #charaList li.chara37 a { background-position: -128px -640px; }

#character .content #charaList li.chara38 a { background-position: -256px -640px; }

#character .content #charaList li.chara39 a { background-position: -384px -640px; }

#character .content #charaList li.chara40 a { background-position: -512px -640px; }

#character .content #charaList li.chara41 a { background-position: -640px -640px; }

#character .content #charaList li.chara42 a { background-position: -768px -640px; }

#character .content #charaList li.new:before { -webkit-animation: newicon 1s ease infinite alternate; animation: newicon 1s ease infinite alternate; background: url(../images/common/ic_new2.png) no-repeat 0 0; content: ''; display: block; width: 51px; height: 48px; position: absolute; top: -20px; left: -20px; z-index: 10; }

/* main: style.scss*/
#mkWrapper { /* course ----------------------------------------------------------*/ }

#mkWrapper #course .img_line { margin-top: -9%; }

#mkWrapper #course .scene_chara { height: 480px; margin-bottom: 20px; }

#mkWrapper #course .scene_chara .sc1 { top: -70px; right: 50%; }

#mkWrapper #course .scene_chara .sc1:before { -webkit-animation: rotation 30s linear infinite; animation: rotation 30s linear infinite; background: url(../images/scene/img_shizue-cup.png) no-repeat 0 0; content: ''; display: block; width: 462px; height: 462px; position: absolute; top: 65px; left: -120px; z-index: -1; }

#mkWrapper #course .scene_chara .sc1.pause:before { -webkit-animation-play-state: paused !important; animation-play-state: paused !important; }

#mkWrapper #course .content { padding: 50px 0 450px 0; }

#mkWrapper #course .content h2 { text-align: left; margin: 0 0 70px 0; }

#mkWrapper #course .content .label { position: absolute; top: -35px; right: 0; }

#mkWrapper #course .content #courseList { margin-bottom: 90px; }

#mkWrapper #course .content #courseList dl { margin-bottom: 30px; /* &:nth-child(odd) {*/ /*   margin-left:105px;*/ /* }*/ }

#mkWrapper #course .content #courseList dl:last-child { margin-bottom: 0; }

#mkWrapper #course .content #courseList dl.cup01 dt { background-position: 0 0; }

#mkWrapper #course .content #courseList dl.cup02 dt { background-position: -106px 0; }

#mkWrapper #course .content #courseList dl.cup03 dt { background-position: -212px 0; }

#mkWrapper #course .content #courseList dl.cup04 dt { background-position: -318px 0; }

#mkWrapper #course .content #courseList dl.cup05 dt { background-position: 0 -123px; }

#mkWrapper #course .content #courseList dl.cup06 dt { background-position: -106px -123px; }

#mkWrapper #course .content #courseList dl.cup07 dt { background-position: -212px -123px; }

#mkWrapper #course .content #courseList dl.cup08 dt { background-position: -318px -123px; }

#mkWrapper #course .content #courseList dl.cup09 dt { background-position: 0 -246px; }

#mkWrapper #course .content #courseList dl.cup10 dt { background-position: -106px -246px; }

#mkWrapper #course .content #courseList dl.cup11 dt { background-position: -212px -246px; }

#mkWrapper #course .content #courseList dl.cup12 dt { background-position: -318px -246px; }

#mkWrapper #course .content #courseList dt { width: 106px; height: 123px; text-indent: -9999px; background-image: url(../images/course/img_cup-sprite.png); background-repeat: no-repeat; position: relative; }

#mkWrapper #course .content #courseList dt.new:before { -webkit-animation: newicon 1s ease infinite alternate; animation: newicon 1s ease infinite alternate; background: url(../images/course/ic_new.png) no-repeat 0 0; content: ''; display: block; width: 63px; height: 60px; position: absolute; top: 0; left: -75px; }

#mkWrapper #course .content #courseList dd { margin: -123px 0 0 126px; overflow: hidden; }

#mkWrapper #course .content #courseList dd .loopSliderWrap { -webkit-transition-timing-function: linear; transition-timing-function: linear; }

#mkWrapper #course .content #courseList dd a { display: block; padding-right: 10px; }

#mkWrapper #course .content #courseList dd ul { float: left; width: 1024px; }

#mkWrapper #course .content #courseList dd ul li { float: left; }

#mkWrapper #course .content #courseOption { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

#mkWrapper #course .content #courseOption dt { margin-bottom: 25px; }

#mkWrapper #course .content #courseOption dd { position: relative; }

#mkWrapper #course .content #courseOption dd img { box-shadow: 0 0 4px black; border-radius: 5px; }

#mkWrapper #course .content #courseOption dd .notice { box-shadow: none; border-radius: 0; position: absolute; top: 30px; right: -20px; z-index: 10; }

/* main: style.scss*/
#mkWrapper { /* item ----------------------------------------------------------*/ }

#mkWrapper #item .img_line { margin-top: -9%; }

#mkWrapper #item .scene_chara { height: 480px; margin-bottom: 50px; }

#mkWrapper #item .scene_chara .sc1 { bottom: 0; left: 50%; margin-left: 50px; }

#mkWrapper #item .scene_chara .sc1:before { -webkit-animation: rotation 30s linear infinite; animation: rotation 30s linear infinite; background: url(../images/scene/img_baby-rosetta-cup.png) no-repeat 0 0; content: ''; display: block; width: 460px; height: 460px; position: absolute; top: 8px; right: -180px; z-index: -1; }

#mkWrapper #item .scene_chara .sc1.pause:before { -webkit-animation-play-state: paused !important; animation-play-state: paused !important; }

#mkWrapper #item .content { padding: 50px 0 300px 0; }

#mkWrapper #item .content h2 { text-align: left; margin-bottom: 100px; }

#mkWrapper #item .content .label { position: absolute; top: -55px; right: 0; }

#mkWrapper #item .content #itemList { margin: 0 -20px 70px 0; }

#mkWrapper #item .content #itemList li { margin: 0 10px 20px 10px; float: left; position: relative; }

#mkWrapper #item .content #itemList li a { background-image: url(../images/item/img_item-sprite.png); background-repeat: no-repeat; display: block; width: 152px; height: 152px; position: relative; text-indent: -9999px; }

#mkWrapper #item .content #itemList li a:after { -webkit-transition: opacity 0s; transition: opacity 0s; background-image: url(../images/common/bg_cursor_1.png), url(../images/common/bg_cursor_2.png), url(../images/common/bg_cursor_3.png), url(../images/common/bg_cursor_4.png); background-repeat: no-repeat; background-position: 0 0, 100% 0, 0 100%, 100% 100%; content: ''; display: block; width: 172px; height: 172px; position: absolute; top: -10px; left: -10px; opacity: 0; }

#mkWrapper #item .content #itemList li a:hover:after { -webkit-animation: cursor 0.3s ease infinite alternate; animation: cursor 0.3s ease infinite alternate; opacity: 1; }

#mkWrapper #item .content #itemList li.item01 a { background-position: 0 0; }

#mkWrapper #item .content #itemList li.item02 a { background-position: -152px 0; }

#mkWrapper #item .content #itemList li.item03 a { background-position: -304px 0; }

#mkWrapper #item .content #itemList li.item04 a { background-position: -456px 0; }

#mkWrapper #item .content #itemList li.item05 a { background-position: -608px 0; }

#mkWrapper #item .content #itemList li.item06 a { background-position: -760px 0; }

#mkWrapper #item .content #itemList li.item07 a { background-position: 0 -152px; }

#mkWrapper #item .content #itemList li.item08 a { background-position: -152px -152px; }

#mkWrapper #item .content #itemList li.item09 a { background-position: -304px -152px; }

#mkWrapper #item .content #itemList li.item10 a { background-position: -456px -152px; }

#mkWrapper #item .content #itemList li.item11 a { background-position: -608px -152px; }

#mkWrapper #item .content #itemList li.item12 a { background-position: -760px -152px; }

#mkWrapper #item .content #itemList li.item13 a { background-position: 0 -304px; }

#mkWrapper #item .content #itemList li.item14 a { background-position: -152px -304px; }

#mkWrapper #item .content #itemList li.item15 a { background-position: -304px -304px; }

#mkWrapper #item .content #itemList li.item16 a { background-position: -456px -304px; }

#mkWrapper #item .content #itemList li.item17 a { background-position: -608px -304px; }

#mkWrapper #item .content #itemList li.item18 a { background-position: -760px -304px; }

#mkWrapper #item .content #itemList li.item19 a { background-position: 0 -456px; }

#mkWrapper #item .content #itemList li.item20 a { background-position: -152px -456px; }

#mkWrapper #item .content #itemList li.item21 a { background-position: -304px -456px; }

#mkWrapper #item .content #itemList li.item22 a { background-position: -456px -456px; }

#mkWrapper #item .content #itemList li.item23 a { background-position: -608px -456px; }

#mkWrapper #item .content #itemList li.new:before { -webkit-animation: newicon 1s ease infinite alternate; animation: newicon 1s ease infinite alternate; background: url(../images/common/ic_new2.png) no-repeat 0 0; content: ''; display: block; width: 51px; height: 48px; position: absolute; top: -20px; left: -20px; z-index: 10; }

#mkWrapper #item .content #itemList li.item24 { background: url(../images/item/img_item-sprite.png) no-repeat -760px -456px; position: relative; width: 152px; height: 152px; }

#mkWrapper #item .content #itemList li.item24 span { display: block; position: absolute; bottom: -60px; left: 0; text-align: center; width: 100%; }

#mkWrapper #item .content #itemDouble { width: 508px; margin: 0 auto; text-align: center; }

#mkWrapper #item .content #itemDouble h3 { margin-bottom: 40px; }

#mkWrapper #item .content #itemDouble .img { position: relative; }

#mkWrapper #item .content #itemDouble .img .img2 { position: absolute; top: 0; left: -190px; z-index: 10; }

#mkWrapper #item .content #itemDouble .img .img3 { position: absolute; top: 50%; right: -260px; margin-top: -39px; z-index: 10; }

/* main: style.scss*/
/* battle ----------------------------------------------------------*/
#battle .img_line { margin-top: -9%; }

#battle .scene_chara { height: 450px; margin-bottom: 25px; }

#battle .scene_chara .sc1 { bottom: 0; left: 25px; z-index: 10; }

#battle .scene_chara .sc1:before { -webkit-animation: rotation 30s linear infinite; animation: rotation 30s linear infinite; background: url(../images/scene/img_baby-mario-cup.png) no-repeat 0 0; content: ''; display: block; width: 460px; height: 460px; position: absolute; top: -45px; left: -190px; z-index: -1; }

#battle .scene_chara .sc1.pause:before { -webkit-animation-play-state: paused !important; animation-play-state: paused !important; }

#battle .scene_chara .sc2 { left: 416px; bottom: 75px; }

#battle .content { padding-top: 50px; }

#battle .content h2 { margin-bottom: 65px; text-align: left; }

#battle .content .label { position: absolute; top: -35px; right: 0; }

#battle .content #battleMode { margin-bottom: 60px; position: relative; }

#battle .content #battleMode .control_btn { /*transform:translateY(-50%);*/ position: absolute; top: 215px; width: 55px; height: 108px; z-index: 99; }

#battle .content #battleMode .control_btn:before { content: ''; display: block; width: 100%; height: 63px; }

#battle .content #battleMode #btnBattlePrev { left: 20px; }

#battle .content #battleMode #btnBattlePrev:before { background: url(../images/battle/btn_prev.png) no-repeat 50% 0; }

#battle .content #battleMode #btnBattleNext { right: 20px; }

#battle .content #battleMode #btnBattleNext:before { background: url(../images/battle/btn_next.png) no-repeat 50% 0; }

#battle .content #battleMode #battleModeList { position: relative; width: 100%; }

#battle .content #battleMode #battleModeList #battleModeListInner { margin-bottom: 40px; }

#battle .content #battleMode #battleModeList #battleModeListInner .swiper-slide { width: 860px; }

#battle .content #battleMode #battleModeList #battleModeListInner .swiper-slide img { width: 100%; }

#battle .content #battleMode #battleModeList #battleModeListInner .swiper-slide .movie { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform: scale(0.9); transform: scale(0.9); position: relative; }

#battle .content #battleMode #battleModeList #battleModeListInner .swiper-slide .movie:after { background: url(../images/common/ic_play2.png) no-repeat 0 0; content: ''; display: block; width: 90px; height: 90px; position: absolute; top: 50%; left: 50%; margin: -45px 0 0 -45px; z-index: 2; }

#battle .content #battleMode #battleModeList #battleModeListInner .swiper-slide .movie iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }

#battle .content #battleMode #battleModeList #battleModeListInner .swiper-slide-active .movie { -webkit-transform: scale(1); transform: scale(1); }

#battle .content #battleMode #battleModeList #battleTxt { height: 190px; position: relative; }

#battle .content #battleMode #battleModeList #battleTxt dl { -webkit-transition: all 0.6s ease; transition: all 0.6s ease; -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; position: absolute; top: 0; width: 100%; }

#battle .content #battleMode #battleModeList #battleTxt dl.active { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }

#battle .content #battleMode #battleModeList #battleTxt dt { margin-bottom: 25px; }

#battle .content #battleMode #battleModeList #battleTxt dd { background-color: rgba(255, 255, 255, 0.9); border: 1px solid #e8e8e8; border-radius: 5px; padding: 30px 10px; font-size: 1.4rem; font-weight: bold; }

#battle #battleStage h3 { text-align: center; margin-bottom: 30px; }

#battle #battleStage p { margin-bottom: 40px; }

#battle #battleStage #stageWrap { width: 100%; /* ul {*/ /*   width:9999px;*/ /*   height:450px;*/ /*   overflow:visible;*/ /* }*/ }

#battle #battleStage #stageWrap .img_line { left: 0; margin-top: 0; position: relative; height: 450px; }

#battle #battleStage #stageWrap .img_line .loop_slide { height: 450px; }

#battle #battleStage #stageWrap ul { height: 450px; }

#battle #battleStage #stageWrap li { -webkit-transition: width 0.4s ease-in-out, z-index 0.4s step-end; transition: width 0.4s ease-in-out, z-index 0.4s step-end; float: left; width: 400px; height: 450px; overflow: visible; z-index: 1; }

#battle #battleStage #stageWrap li:hover { -webkit-transition: width 0.4s ease-in-out, z-index 0.4s step-start; transition: width 0.4s ease-in-out, z-index 0.4s step-start; z-index: 10; width: 600px !important; }

#battle #battleStage #stageWrap li:hover span { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; width: 600px; }

#battle #battleStage #stageWrap li span { -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; -webkit-transform: skew(-10deg) translateX(-50%); transform: skew(-10deg) translateX(-50%); -webkit-transform-origin: 0 0; transform-origin: 0 0; display: block; position: absolute; top: 0; left: 50%; height: 450px; width: 400px; overflow: hidden; }

#battle #battleStage #stageWrap li span img { -webkit-transform: skew(10deg) translateX(-50%); transform: skew(10deg) translateX(-50%); position: absolute; top: 0; left: 50%; }

/* main: style.scss*/
/* overlay ----------------------------------------------------------*/
#mkOverlayBG { /*background:url(../images/common/bg_overlay.png) repeat 0 0;*/ background-color: rgba(0, 0, 0, 0.8); content: ''; display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999; display: none; }

#mkOverlayBG.white { background: url(../images/common/bg_page-gray.png) repeat 0 0; background-color: white; }

#mkOverlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; min-width: 1024px; z-index: 999999; overflow: auto; /*display:none;*/ }

#mkOverlay.hide { opacity: 0; visibility: hidden; }

#mkOverlay .mask { -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: width 0.4s ease, height 0.4s ease; transition: width 0.4s ease, height 0.4s ease; width: 0; height: 100%; position: relative; top: 50%; margin: 0 auto; overflow: hidden; }

#mkOverlay .mask.open { width: 100%; }

#mkOverlay .mask.close { height: 0; }

#mkOverlay .control_btn { position: absolute; top: 50%; width: 60px; height: 60px; margin-top: -40px; z-index: 99; }

#mkOverlay .control_btn a { background-color: #ff0a64; background-repeat: no-repeat; display: block; border-radius: 100%; position: relative; width: 100%; height: 100%; text-indent: -9999px; }

#mkOverlay .control_btn a:hover { -webkit-animation: bounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: bounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

#mkOverlay .control_btn a img { position: absolute; top: 50%; left: 50%; margin: -13px 0 0 -9px; }

#mkOverlay .control_btn.btn_prev a { background-image: url(../images/common/btn_prev.png); background-position: 19px 16px; }

#mkOverlay .control_btn.btn_next a { background-image: url(../images/common/btn_next.png); background-position: 23px 16px; }

#mkOverlay #btnOvClose { position: absolute; top: 30px; right: 30px; width: 60px; height: 60px; z-index: 100; }

#mkOverlay #btnOvClose a { background: url(../images/common/btn_close.png) no-repeat 17px 17px; background-color: #ff0a64; display: block; border-radius: 100%; position: relative; width: 100%; height: 100%; text-indent: -9999px; }

#mkOverlay #btnOvClose a:hover { -webkit-animation: bounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: bounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

#mkOverlay #ovContainer { position: relative; z-index: 10; overflow: hidden; /* deluxe ----------------------------------------------------------*/ /* movie ----------------------------------------------------------*/ /* course ----------------------------------------------------------*/ /* character ----------------------------------------------------------*/ /* item ----------------------------------------------------------*/ }

#mkOverlay #ovContainer #deluxe { width: 1024px; margin: 0 auto; display: none; }

#mkOverlay #ovContainer #deluxe .inner { padding: 100px 0 50px 0; }

#mkOverlay #ovContainer #deluxe .inner h2 { margin: 0 0 35px 0; text-align: center; position: relative; }

#mkOverlay #ovContainer #deluxe .inner h2:before { background: url(../images/deluxe/img_mario.png) no-repeat 0 0; content: ''; display: block; width: 300px; height: 250px; position: absolute; top: -71px; left: -65px; }

#mkOverlay #ovContainer #deluxe .inner .frame { background: url(../images/deluxe/img_frame.png) no-repeat 0 0; margin: 0 auto 70px auto; width: 969px; height: 482px; position: relative; }

#mkOverlay #ovContainer #deluxe .inner .frame .frame_inner { position: absolute; top: 9px; left: 209px; width: 750px; height: 422px; }

#mkOverlay #ovContainer #deluxe .inner .frame .frame_inner li { float: left; width: 50%; }

#mkOverlay #ovContainer #deluxe .inner .frame .frame_inner li img { width: 100%; max-width: 100%; border: 1px solid #000; }

#mkOverlay #ovContainer #deluxe .inner .frame .img { position: absolute; bottom: -75px; right: -65px; }

#mkOverlay #ovContainer #deluxe .inner .style { margin-bottom: 60px; }

#mkOverlay #ovContainer #deluxe .inner .style h3 { margin-bottom: 60px; text-align: center; }

#mkOverlay #ovContainer #deluxe .inner .style .mode { margin-bottom: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

#mkOverlay #ovContainer #deluxe .inner .style .mode .cell .img { margin-bottom: 20px; }

#mkOverlay #ovContainer #deluxe .inner .style .mode .cell .img img { width: 100%; }

#mkOverlay #ovContainer #deluxe .inner .connect { margin-bottom: 100px; }

#mkOverlay #ovContainer #deluxe .inner .connect dt { margin-bottom: 20px; }

#mkOverlay #ovContainer #deluxe .inner .connect dd { text-align: center; }

#mkOverlay #ovContainer #deluxe .inner .joycon { text-align: left; position: relative; margin-bottom: 125px; }

#mkOverlay #ovContainer #deluxe .inner .joycon h4 { margin-bottom: 20px; }

#mkOverlay #ovContainer #deluxe .inner .joycon dl { position: relative; z-index: 2; }

#mkOverlay #ovContainer #deluxe .inner .joycon dl dt { margin-bottom: 25px; }

#mkOverlay #ovContainer #deluxe .inner .joycon .item { position: absolute; top: -15px; left: 50%; margin-left: -40px; width: 70%; }

#mkOverlay #ovContainer #deluxe .inner .joycon .item img { max-width: 100%; }

#mkOverlay #ovContainer #deluxe .inner .joycon .item .obj1 { float: left; margin-right: 10px; }

#mkOverlay #ovContainer #deluxe .inner .joycon .item .obj2 { float: left; }

#mkOverlay #ovContainer #deluxe .inner .btn_close { text-align: center; }

#mkOverlay #ovContainer #deluxe .inner .btn_close a { display: block; }

#mkOverlay #ovContainer #deluxe .inner .btn_close a:hover .img { -webkit-animation: bounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: bounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

#mkOverlay #ovContainer #deluxe .inner .btn_close .img { background: url(../images/common/btn_close.png) no-repeat 50% 50%; background-color: #ff0a64; border-radius: 100%; position: relative; width: 60px; height: 60px; display: inline-block; vertical-align: middle; text-indent: -9999px; }

#mkOverlay #ovContainer #deluxe .inner .btn_close .txt { display: inline-block; vertical-align: middle; margin-left: 14px; }

#mkOverlay #ovContainer #movieModal { background: url(../images/movie/bg_movie.png) no-repeat 100% 100%, url(../images/movie/logo.png) no-repeat 50% 50%; position: relative; width: 100%; height: 100vh; min-height: 700px; }

#mkOverlay #ovContainer #movieModal #movieContainer { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; }

#mkOverlay #ovContainer #movieModal #movieContainer #mainMovie { width: 920px; height: 520px; margin-bottom: 20px; }

#mkOverlay #ovContainer #movieModal #movieContainer #movThumb { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

#mkOverlay #ovContainer #movieModal #movieContainer #movThumb li { margin: 0 16px; }

#mkOverlay #ovContainer #movieModal #movieContainer #movThumb li a { display: block; color: #fff; text-decoration: none; position: relative; }

#mkOverlay #ovContainer #movieModal #movieContainer #movThumb li a:after { -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; background: url(../images/common/ic_play.png) no-repeat 0 0; content: ''; display: block; width: 32px; height: 32px; position: absolute; top: 20px; left: 50%; margin-left: -16px; }

#mkOverlay #ovContainer #movieModal #movieContainer #movThumb li a:hover:after { -webkit-transform: scale(1.2); transform: scale(1.2); }

#mkOverlay #ovContainer #movieModal #movieContainer #movThumb li img { display: inline-block; margin-bottom: 10px; }

#mkOverlay #ovContainer #movieModal #movieContainer #movThumb li span { display: block; line-height: 150%; }

#mkOverlay #ovContainer #courseModal { background: url(../images/course/bg_course.png) no-repeat 0 0; position: relative; width: 100%; height: 100vh; min-height: 700px; }

#mkOverlay #ovContainer #courseModal .btn_prev { left: 50%; margin-left: -512px; margin-top: -110px; }

#mkOverlay #ovContainer #courseModal .btn_next { right: 50%; margin-right: -512px; margin-top: -110px; }

#mkOverlay #ovContainer #courseModal #courseModalList { -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; top: 50%; left: 0; width: 100%; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalListInner { -webkit-transform: translateX(-50%); transform: translateX(-50%); position: relative; left: 50%; width: 4000px; margin-bottom: 100px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalListInner li { width: 860px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalListInner .stage.swiper-slide-active .img { -webkit-transform: scale(1); transform: scale(1); }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalListInner .stage .img { -webkit-transition: -webkit-transform 0.6s ease; transition: -webkit-transform 0.6s ease; transition: transform 0.6s ease; transition: transform 0.6s ease, -webkit-transform 0.6s ease; -webkit-transform: scale(0.8); transform: scale(0.8); background: url(../images/movie/logo.png) no-repeat 50% 50% rgba(0, 0, 0, 0.5); position: relative; margin-bottom: 20px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalListInner .stage .img:before { background: url(../images/common/ic_play2.png) no-repeat 0 0; content: ''; display: block; width: 90px; height: 90px; position: absolute; top: 50%; left: 50%; margin: -45px 0 0 -45px; z-index: 25; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalListInner .stage .img img { width: 100%; display: block; position: relative; z-index: 20; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalListInner .stage .img.hide:before { display: none; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalListInner .stage .img.hide img { opacity: 0; visibility: hidden; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalListInner .stage .img iframe { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalListInner .stage .name { text-align: center; color: #fff; font-size: 2.4rem; font-weight: bold; line-height: 100%; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup { text-align: center; width: 1024px; position: absolute; bottom: 0; left: 50%; margin-left: -512px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul li { width: 76px; height: 76px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul a { background-image: url(../images/course/img_cup-sprite_off.png); background-repeat: no-repeat; display: block; position: relative; width: 100%; height: 100%; text-indent: -9999px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul a:after { -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; background-image: url(../images/course/img_cup-sprite.png); background-repeat: no-repeat; background-size: 306px auto; content: ''; display: block; width: 76px; height: 76px; position: absolute; top: 0; left: 0; opacity: 0; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul a:hover:after, #mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul a.active:after { opacity: 1; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup1 a { background-position: 0 0; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup2 a { background-position: -76px 0; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup3 a { background-position: -152px 0; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup4 a { background-position: -228px 0; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup5 a { background-position: 0 -76px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup6 a { background-position: -76px -76px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup7 a { background-position: -152px -76px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup8 a { background-position: -228px -76px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup9 a { background-position: 0 -152px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup10 a { background-position: -76px -152px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup11 a { background-position: -152px -152px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup12 a { background-position: -228px -152px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup1 a:after { background-position: 0 0; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup2 a:after { background-position: -76px 0; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup3 a:after { background-position: -153px 0; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup4 a:after { background-position: -230px 0; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup5 a:after { background-position: 0 -89px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup6 a:after { background-position: -76px -89px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup7 a:after { background-position: -153px -89px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup8 a:after { background-position: -230px -89px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup9 a:after { background-position: 0 -177px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup10 a:after { background-position: -76px -177px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup11 a:after { background-position: -153px -177px; }

#mkOverlay #ovContainer #courseModal #courseModalList #courseModalCup ul .cup12 a:after { background-position: -230px -177px; }

#mkOverlay #ovContainer #characterModal { position: relative; width: 100%; height: 100vh; min-height: 700px; }

#mkOverlay #ovContainer #characterModal .control_btn { margin-top: -100px; }

#mkOverlay #ovContainer #characterModal .btn_prev { left: 50%; margin-left: -512px; }

#mkOverlay #ovContainer #characterModal .btn_next { right: 50%; margin-right: -512px; }

#mkOverlay #ovContainer #characterModal #characterModalList { -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; top: 50%; left: 0; width: 100%; }

#mkOverlay #ovContainer #characterModal #characterModalList #characterModalListInner { -webkit-transform: translateX(-50%); transform: translateX(-50%); position: relative; left: 50%; width: 4000px; }

#mkOverlay #ovContainer #characterModal #characterModalList #characterModalListInner li { width: 860px; position: relative; }

#mkOverlay #ovContainer #characterModal #characterModalList #characterModalListInner .chara .img { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform: scale(0.9); transform: scale(0.9); position: relative; margin-bottom: 25px; }

#mkOverlay #ovContainer #characterModal #characterModalList #characterModalListInner .chara .img img { width: 100%; }

#mkOverlay #ovContainer #characterModal #characterModalList #characterModalListInner .chara .img .yt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#mkOverlay #ovContainer #characterModal #characterModalList #characterModalListInner .chara .img .yt iframe { width: 100%; height: 100%; }

#mkOverlay #ovContainer #characterModal #characterModalList #characterModalListInner .chara .info { -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; position: relative; height: 135px; width: 100%; opacity: 0; }

#mkOverlay #ovContainer #characterModal #characterModalList #characterModalListInner .chara .info .movie { background: url(../images/movie/logo.png) no-repeat 50% 50% rgba(0, 0, 0, 0.5); background-size: 100px auto; position: absolute; bottom: -20px; right: 0; width: 260px; height: 145px; }

#mkOverlay #ovContainer #characterModal #characterModalList #characterModalListInner .chara .info .movie .yt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#mkOverlay #ovContainer #characterModal #characterModalList #characterModalListInner .chara .info .movie .yt iframe { width: 100%; height: 100%; }

#mkOverlay #ovContainer #characterModal #characterModalList #characterModalListInner .chara .info .name { position: absolute; bottom: 0; left: 0; }

#mkOverlay #ovContainer #characterModal #characterModalList #characterModalListInner .chara .info .name.new:before { -webkit-animation: newicon 1s ease infinite alternate; animation: newicon 1s ease infinite alternate; background: url(../images/common/ic_new2.png) no-repeat 0 0; content: ''; display: block; width: 51px; height: 48px; position: absolute; top: -20px; left: -20px; z-index: 10; }

#mkOverlay #ovContainer #characterModal #characterModalList #characterModalListInner .chara.swiper-slide-active .img { -webkit-transform: scale(1); transform: scale(1); }

#mkOverlay #ovContainer #characterModal #characterModalList #characterModalListInner .chara.swiper-slide-active .info { opacity: 1; }

#mkOverlay #ovContainer #itemModal { position: relative; width: 100%; height: 100vh; min-height: 700px; }

#mkOverlay #ovContainer #itemModal .btn_prev { left: 50%; margin-left: -512px; }

#mkOverlay #ovContainer #itemModal .btn_next { right: 50%; margin-right: -512px; }

#mkOverlay #ovContainer #itemModal #itemModalList { -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; top: 50%; left: 0; width: 100%; }

#mkOverlay #ovContainer #itemModal #itemModalList #itemModalListInner { -webkit-transform: translateX(-50%); transform: translateX(-50%); position: relative; left: 50%; width: 4000px; }

#mkOverlay #ovContainer #itemModal #itemModalList #itemModalListInner li { width: 600px; position: relative; }

#mkOverlay #ovContainer #itemModal #itemModalList #itemModalListInner li.swiper-slide-active .img { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }

#mkOverlay #ovContainer #itemModal #itemModalList #itemModalListInner li.swiper-slide-active .txt, #mkOverlay #ovContainer #itemModal #itemModalList #itemModalListInner li.swiper-slide-active .name { opacity: 1; }

#mkOverlay #ovContainer #itemModal #itemModalList #itemModalListInner li .img { -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease; transition: opacity 0.6s ease, -webkit-transform 0.6s ease; transition: transform 0.6s ease, opacity 0.6s ease; transition: transform 0.6s ease, opacity 0.6s ease, -webkit-transform 0.6s ease; -webkit-transform: scale(0.8); transform: scale(0.8); position: relative; margin-bottom: 20px; text-align: center; opacity: 0.3; z-index: 10; }

#mkOverlay #ovContainer #itemModal #itemModalList #itemModalListInner li .name { -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; text-align: center; font-size: 2.4rem; color: #fff; font-weight: bold; margin-bottom: 15px; opacity: 0; }

#mkOverlay #ovContainer #itemModal #itemModalList #itemModalListInner li .txt { -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; background-color: #000; color: #fff; text-align: center; padding: 22px 0; border-radius: 5px; font-size: 1.4rem; opacity: 0; line-height: 150%; position: relative; }

#mkOverlay #ovContainer #itemModal #itemModalList #itemModalListInner li .txt.new:before { -webkit-animation: newicon 1s ease infinite alternate; animation: newicon 1s ease infinite alternate; background: url(../images/common/ic_new2.png) no-repeat 0 0; content: ''; display: block; width: 51px; height: 48px; position: absolute; top: -40px; left: -20px; z-index: 10; }

#mkOverlay #ovContainer #itemModal #itemModalList #itemModalListInner li.mov .img { position: absolute; top: 300px; right: -10px; }

#mkOverlay #ovContainer #itemModal #itemModalList #itemModalListInner li.mov .img img { width: 150px; }

#mkOverlay #ovContainer #itemModal #itemModalList #itemModalListInner li.mov .yt { background: url(../images/movie/logo.png) no-repeat 50% 50% #000; position: relative; margin: 50px 0; height: 340px; }

#mkOverlay #ovContainer #itemModal #itemModalList #itemModalListInner li.mov .yt iframe { width: 100%; height: 100%; }




/* main: style.scss*/
/* keyframes ----------------------------------------------------------*/
@-webkit-keyframes kart_move { 0% { left: 100%;
    bottom: 0; }
  99% { left: -100%;
    bottom: 0; }
  99.1% { left: -100%;
    bottom: -100%; }
  99.2% { left: 100%;
    bottom: -100%; }
  100% { left: 100%;
    bottom: 0; } }

@keyframes kart_move { 0% { left: 100%;
    bottom: 0; }
  99% { left: -100%;
    bottom: 0; }
  99.1% { left: -100%;
    bottom: -100%; }
  99.2% { left: 100%;
    bottom: -100%; }
  100% { left: 100%;
    bottom: 0; } }

@-webkit-keyframes kart_jump { 0% { -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% { -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  100% { -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes kart_jump { 0% { -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% { -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  100% { -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes rotation { 0% { -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes rotation { 0% { -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

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

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

@-webkit-keyframes newicon { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  25% { -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  50% { -webkit-transform: scale(1);
    transform: scale(1); }
  100% { -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes newicon { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  25% { -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  50% { -webkit-transform: scale(1);
    transform: scale(1); }
  100% { -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes bounce { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  50% { -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  100% { -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes bounce { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  50% { -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  100% { -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes blink { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  25% { -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  50% { -webkit-transform: scale(1);
    transform: scale(1); }
  100% { -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes blink { 0% { -webkit-transform: scale(1);
    transform: scale(1); }
  25% { -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  50% { -webkit-transform: scale(1);
    transform: scale(1); }
  100% { -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes scroll { 0% { -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% { -webkit-transform: translateY(10px);
    transform: translateY(10px); } }

@keyframes scroll { 0% { -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% { -webkit-transform: translateY(10px);
    transform: translateY(10px); } }

/* animation ----------------------------------------------------------*/
#about .scene_chara .sc1 { -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s; transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s; -webkit-transform: translate(-100px, 30px); transform: translate(-100px, 30px); opacity: 0; }

#about .scene_chara .sc2 { -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; -webkit-transform: translate(200px, 100px); transform: translate(200px, 100px); opacity: 0; }

#about .scene_chara.action .sc1, #about .scene_chara.action .sc2 { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; }

#about .content p { -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; -webkit-transform: translate(-50px, 10px); transform: translate(-50px, 10px); opacity: 0; }

#about .content p.action { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; }

#character .scene_chara .sc1 { -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate(100px, -30px); transform: translate(100px, -30px); opacity: 0; }

#character .scene_chara .sc1:before { -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s; transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s; opacity: 0; }

#character .scene_chara.action .sc1 { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; }

#character .scene_chara.action .sc1:before { opacity: 1; }

#character #charaList li { -webkit-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transform: scale(0.5) rotate(25deg); transform: scale(0.5) rotate(25deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; opacity: 0; }

#character #charaList li:nth-child(1) { -webkit-transition-delay: 0s; transition-delay: 0s; }

#character #charaList li:nth-child(2) { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; }

#character #charaList li:nth-child(3) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }

#character #charaList li:nth-child(4) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; }

#character #charaList li:nth-child(5) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }

#character #charaList li:nth-child(6) { -webkit-transition-delay: 0.25s; transition-delay: 0.25s; }

#character #charaList li:nth-child(7) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }

#character #charaList li:nth-child(8) { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; }

#character #charaList li:nth-child(9) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }

#character #charaList li:nth-child(10) { -webkit-transition-delay: 0.45s; transition-delay: 0.45s; }

#character #charaList li:nth-child(11) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }

#character #charaList li:nth-child(12) { -webkit-transition-delay: 0.55s; transition-delay: 0.55s; }

#character #charaList li:nth-child(13) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }

#character #charaList li:nth-child(14) { -webkit-transition-delay: 0.65s; transition-delay: 0.65s; }

#character #charaList li:nth-child(15) { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; }

#character #charaList li:nth-child(16) { -webkit-transition-delay: 0.75s; transition-delay: 0.75s; }

#character #charaList li:nth-child(17) { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; }

#character #charaList li:nth-child(18) { -webkit-transition-delay: 0.85s; transition-delay: 0.85s; }

#character #charaList li:nth-child(19) { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; }

#character #charaList li:nth-child(20) { -webkit-transition-delay: 0.95s; transition-delay: 0.95s; }

#character #charaList li:nth-child(21) { -webkit-transition-delay: 1s; transition-delay: 1s; }

#character #charaList li:nth-child(22) { -webkit-transition-delay: 1.05s; transition-delay: 1.05s; }

#character #charaList li:nth-child(23) { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; }

#character #charaList li:nth-child(24) { -webkit-transition-delay: 1.15s; transition-delay: 1.15s; }

#character #charaList li:nth-child(25) { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; }

#character #charaList li:nth-child(26) { -webkit-transition-delay: 1.25s; transition-delay: 1.25s; }

#character #charaList li:nth-child(27) { -webkit-transition-delay: 1.3s; transition-delay: 1.3s; }

#character #charaList li:nth-child(28) { -webkit-transition-delay: 1.35s; transition-delay: 1.35s; }

#character #charaList li:nth-child(29) { -webkit-transition-delay: 1.4s; transition-delay: 1.4s; }

#character #charaList li:nth-child(30) { -webkit-transition-delay: 1.45s; transition-delay: 1.45s; }

#character #charaList li:nth-child(31) { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; }

#character #charaList li:nth-child(32) { -webkit-transition-delay: 1.55s; transition-delay: 1.55s; }

#character #charaList li:nth-child(33) { -webkit-transition-delay: 1.6s; transition-delay: 1.6s; }

#character #charaList li:nth-child(34) { -webkit-transition-delay: 1.65s; transition-delay: 1.65s; }

#character #charaList li:nth-child(35) { -webkit-transition-delay: 1.7s; transition-delay: 1.7s; }

#character #charaList li:nth-child(36) { -webkit-transition-delay: 1.75s; transition-delay: 1.75s; }

#character #charaList li:nth-child(37) { -webkit-transition-delay: 1.8s; transition-delay: 1.8s; }

#character #charaList li:nth-child(38) { -webkit-transition-delay: 1.85s; transition-delay: 1.85s; }

#character #charaList li:nth-child(39) { -webkit-transition-delay: 1.9s; transition-delay: 1.9s; }

#character #charaList li:nth-child(40) { -webkit-transition-delay: 1.95s; transition-delay: 1.95s; }

#character #charaList li:nth-child(41) { -webkit-transition-delay: 2s; transition-delay: 2s; }

#character #charaList li:nth-child(42) { -webkit-transition-delay: 2.05s; transition-delay: 2.05s; }

#character #charaList.action li { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; }

#course .scene_chara .sc1 { -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate(-100px, -30px); transform: translate(-100px, -30px); opacity: 0; }

#course .scene_chara .sc1:before { -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s; transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s; opacity: 0; }

#course .scene_chara.action .sc1 { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; }

#course .scene_chara.action .sc1:before { opacity: 1; }

#course #courseList dt { -webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: scale(0.5) rotate(25deg); transform: scale(0.5) rotate(25deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; opacity: 0; }

#course #courseList dd { -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; width: 0; }

#course #courseList dl.action dt { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; }

#course #courseList dl.action dd { width: 100%; }

#course #courseOption { -webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translateY(60px); transform: translateY(60px); opacity: 0; }

#course #courseOption.action { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }

#item .scene_chara .sc1 { -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate(100px, 50px); transform: translate(100px, 50px); opacity: 0; }

#item .scene_chara .sc1:before { -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s; transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s; opacity: 0; }

#item .scene_chara.action .sc1 { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; }

#item .scene_chara.action .sc1:before { opacity: 1; }

#item #itemList li { -webkit-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transform: scale(0.5) rotate(25deg); transform: scale(0.5) rotate(25deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; opacity: 0; }

#item #itemList li:nth-child(1) { -webkit-transition-delay: 0s; transition-delay: 0s; }

#item #itemList li:nth-child(2) { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; }

#item #itemList li:nth-child(3) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }

#item #itemList li:nth-child(4) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; }

#item #itemList li:nth-child(5) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }

#item #itemList li:nth-child(6) { -webkit-transition-delay: 0.25s; transition-delay: 0.25s; }

#item #itemList li:nth-child(7) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }

#item #itemList li:nth-child(8) { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; }

#item #itemList li:nth-child(9) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }

#item #itemList li:nth-child(10) { -webkit-transition-delay: 0.45s; transition-delay: 0.45s; }

#item #itemList li:nth-child(11) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }

#item #itemList li:nth-child(12) { -webkit-transition-delay: 0.55s; transition-delay: 0.55s; }

#item #itemList li:nth-child(13) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }

#item #itemList li:nth-child(14) { -webkit-transition-delay: 0.65s; transition-delay: 0.65s; }

#item #itemList li:nth-child(15) { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; }

#item #itemList li:nth-child(16) { -webkit-transition-delay: 0.75s; transition-delay: 0.75s; }

#item #itemList li:nth-child(17) { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; }

#item #itemList li:nth-child(18) { -webkit-transition-delay: 0.85s; transition-delay: 0.85s; }

#item #itemList li:nth-child(19) { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; }

#item #itemList li:nth-child(20) { -webkit-transition-delay: 0.95s; transition-delay: 0.95s; }

#item #itemList li:nth-child(21) { -webkit-transition-delay: 1s; transition-delay: 1s; }

#item #itemList li:nth-child(22) { -webkit-transition-delay: 1.05s; transition-delay: 1.05s; }

#item #itemList li:nth-child(23) { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; }

#item #itemList li:nth-child(24) { -webkit-transition-delay: 1.15s; transition-delay: 1.15s; }

#item #itemList.action li { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; }

#item #itemDouble { -webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translateY(60px); transform: translateY(60px); opacity: 0; }

#item #itemDouble.action { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }

#battle .scene_chara .sc1 { -webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s; -webkit-transform: translate(100px, -50px); transform: translate(100px, -50px); opacity: 0; }

#battle .scene_chara .sc1:before { -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s; transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s; opacity: 0; }

#battle .scene_chara .sc2 { -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8s; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8s; -webkit-transform: translate(100px, 100px); transform: translate(100px, 100px); opacity: 0; }

#battle .scene_chara.action .sc1, #battle .scene_chara.action .sc2 { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; }

#battle .scene_chara.action .sc1:before { opacity: 1; }

#battle #battleMode { -webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); top: 50px; opacity: 0; }

#battle #battleMode.action { top: 0; opacity: 1; }

#battle #battleStage h3, #battle #battleStage p { -webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate(0, 30px); transform: translate(0, 30px); opacity: 0; }

#battle #battleStage.action h3, #battle #battleStage.action p { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; }


/* add 20170713 */
@media screen and (min-width: 641px){
	#ncommon-purchase.is-right-top {
	  top: 50px!important;
	}
}

@supports (-ms-ime-align:auto) {
.separator.bk { background: url(../images/common/bg_page-black.png) repeat 0 0 ;}
.separator.wh { background: url(../images/common/bg_page-gray.png) repeat 0 0 ;}
.separator.ch { background: url(../images/common/bg_page-illust.jpg) repeat 0 0 ;}
.separator.ch2 { background: url(../images/common/bg_page-illust2.jpg) repeat 0 0 ;}
}
@media all and (-ms-high-contrast:none) {
.separator.bk { background: url(../images/common/bg_page-black.png) repeat 0 0 ;}
.separator.wh { background: url(../images/common/bg_page-gray.png) repeat 0 0 ;}
.separator.ch { background: url(../images/common/bg_page-illust.jpg) repeat 0 0 ;}
.separator.ch2 { background: url(../images/common/bg_page-illust2.jpg) repeat 0 0 ;}
}

/*IE11*/
@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, .separator.bk { background: url(../images/common/bg_page-black.png) repeat 0 0 ;}
*::-ms-backdrop, .separator.wh { background: url(../images/common/bg_page-gray.png) repeat 0 0 ;}
*::-ms-backdrop, .separator.ch { background: url(../images/common/bg_page-illust.jpg) repeat 0 0 ;}
*::-ms-backdrop, .separator.ch2 { background: url(../images/common/bg_page-illust2.jpg) repeat 0 0 ;}
}

/*EDGE*/
_:-ms-lang(x), _::-webkit-meter-bar, .separator.bk { background: url(../images/common/bg_page-black.png) repeat 0 0 ;}
_:-ms-lang(x), _::-webkit-meter-bar, .separator.wh { background: url(../images/common/bg_page-gray.png) repeat 0 0 ;}
_:-ms-lang(x), _::-webkit-meter-bar, .separator.ch { background: url(../images/common/bg_page-illust.jpg) repeat 0 0 ;}
_:-ms-lang(x), _::-webkit-meter-bar, .separator.ch2 { background: url(../images/common/bg_page-illust2.jpg) repeat 0 0 ;}

#character{
  padding-top: 180px;
}

#course{
  padding-top: 150px;
}
#mkWrapper #course .content{
  padding-bottom: 280px;
}

#battle{
  padding-bottom: 127px;
  padding-top: 150px;
}

/* ゼルダbotw */
#zelda.section{

  background-color: #000;
  background-image: url(../images/zelda/bg.png);
  background-attachment: fixed;
  padding-bottom: 230px;
}
#zelda .hero_block{
  overflow: hidden;
}
#zelda .hero{
  position: relative;
  background-image: url(../images/zelda/hero.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 57.97%;
}
#zelda .section_bg{
  position: absolute;
  top: -838px;
  width: 100%;
  background-image: url(../images/zelda/title_bg.png);
  height: 1000px;
  -webkit-transform: skewY(-5deg);
  transform: skewY(-5deg);
}
#zelda .hero_title{
  position: absolute;
  top: 21px;
  left: 2%;
  right: 0;
  margin: auto;
  text-align: center;
}
#zelda .hero_schedule{
  position: absolute;
  top: 142px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

#zelda .hero_text_block{
  position: relative;
  height: 172px;
}
#zelda .movie_btn{
  position: absolute;
  top: -222px;
  left: calc(50% + 272px);
  z-index: 10;
}
#zelda .movie_btn a{
  display: block;
  position: relative;
}
#zelda .movie_btn a:after{
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  background: url(../images/common/ic_play.png) no-repeat 0 0;
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 70px;
  left: 50%;
  margin-left: -16px;
}
#zelda .movie_btn a:hover::after{
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
#zelda .hero_text{
  position: absolute;
  top: -48px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
#zelda .text_bg{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 1000px;

}
#zelda .text_bg::before{
  content: "";
  display: block;
  height: 100%;
  transform-origin: top left;

}
#zelda .hero_btn{
  position: absolute;
  top: 97px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  transition: 0.3s;
}
#zelda .hero_btn:hover {
  opacity: 0.7;
}
#zelda .contents{
  position: relative;
  padding-top: 122px;
}
#zelda .contents_h{
  position: absolute;
  width: 1920px;
  top: 0;
  left: 50%;
  margin-left: -960px;
}
#zelda .contents_photo{
  text-align: center;
  margin-bottom: 19px;
}
#zelda .contents_btn{
  padding-top: 14px;
  text-align: center;
  transition: 0.3s;
}
#zelda .contents_btn:hover {
  opacity: 0.7;
}


/* ----------------------------
   SALE BANNER
---------------------------- */
.bnr-eshop-sale{
  position: relative;
  width: 100%;
  background:#ff8201 url(../images/sale/bnr_eshop_bg.png);
  z-index: 100;
}
.bnr-eshop-sale::before{
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #FFF;
  left: 0;
  bottom: 0;
  position: absolute;
}
.bnr-eshop-sale a {
    display: block;
    max-width: 960px;
    margin: 0 auto;
    width: 70%;
}
.bnr-eshop-sale a img {
  max-width: 960px;
  width: 100%;
  height: auto;
}
.no-touchevents .bnr-eshop-sale a{
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.no-touchevents .bnr-eshop-sale a:hover{
  opacity: 0.85;
}
#mkWrapper #mkMainVisual #mvInner .switch_logo{
  z-index: 101;
}
#mkWrapper #mkMainVisual .obj.obj1 {
  -webkit-transform: translate(0, -37%);
  transform: translate(0, -37%);
}
#mkWrapper #mkMainVisual .obj.obj2 {
  -webkit-transform: translate(0, -90%);
  transform: translate(0, -90%);
}
#mkWrapper #mkMainVisual .obj.obj3 {
  -webkit-transform: translate(0, -11%);
  transform: translate(0, -11%);
}
#mkWrapper #mkMainVisual .obj.obj6{
    top:10%;
}
/* end SALE BANNER */

/*------catalog-ticket------*/
.catalog-ticket {
  position: absolute;
  bottom: 46px;
  left: 0;
}
.catalog-ticket p a {
  display: inline-block;
  position: relative;
  padding: 10px 16px 10px 84px;
  border-radius: 2px;
  background: #fff;
  color: #000000;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
}
.catalog-ticket p a:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  margin: auto;
  background: url("../images/common/catalog_ticket.png") no-repeat;
  background-size: contain;
  width: 70px;
  height: 48px;
  opacity: 1;
  transition: 0.3s;
}
.catalog-ticket p a:hover {
  color: #777;
}
.catalog-ticket p a:hover:before {
  opacity: 0.8;
}

/* -------------------------------------
	2022/02/10 コース追加パス
------------------------------------- */

/*------トップページ------*/

/* メインビジュアルのバナー */
#mkWrapper #mkMainVisual #mvInner .mk_package {
  bottom: 34%;
  margin-left: 102px;
}
#mkWrapper #mkMainVisual #mvInner .mk_package .mk_bnr a {
  display: block;
  position: relative;
  background-color: #ffffff;
  transform: translate3d(0, 0, 0);
}
#mkWrapper #mkMainVisual #mvInner .mk_package .mk_bnr.is-new a:before {
  content: "";
  width: 54px;
  height: 54px;
  position: absolute;
  z-index: 1;
  top: -24px;
  right: -24px;
  background: url(../images/common/ic_new3.png) center no-repeat;
  transition: 0.3s;
}
#mkWrapper #mkMainVisual #mvInner .mk_package .mk_bnr img {
  transform: translate3d(0, 0, 0);
}
#mkWrapper #mkMainVisual #mvInner .mk_package .mk_coursepack-bnr a,
#mkWrapper #mkMainVisual #mvInner .mk_package .mk_coursepack-bnr img {
  border-radius: 5px;
}
#mkWrapper #mkMainVisual #mvInner .mk_package .mk_bnr.is-new a:hover:before {
  filter: brightness(1.08);
}
#mkWrapper #mkMainVisual #mvInner .mk_package .mk_bnr a:hover img {
  opacity: 0.85;
}
#mkWrapper #mkMainVisual #mvInner .mk_package .mk_bnr img {
  transition: 0.3s;
}
#mkWrapper #mkMainVisual #mvInner .mk_package .mk_other:last-child {
  margin-bottom: 0;
}

/* フッターのバナー */
.detailArea .detailBanner {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.detailArea .detailBanner--large {
  margin-bottom: 24px;
}
.detailArea .detailBanner__item + .detailBanner__item {
  margin-left: 16px;
}
.detailArea .detailBanner__item--zelda .detailBanner__link {
  background: url(../images/common/bnr_zelda_ov.png) no-repeat;
}
.detailArea .detailBanner__item--labo .detailBanner__link {
  background: url(../images/common/bnr_n_labo_ov.png) no-repeat;
}
.detailArea .detailBanner--large .detailBanner__link {
  border-radius: 10px;
  background: #fff;
}
.detailArea .detailBanner__link {
  display: block;
}
.detailArea .detailBanner__link img {
  transition: 0.3s;
}
.detailArea .detailBanner__link:hover img {
  opacity: 0;
}
.detailArea .detailBanner--large .detailBanner__link:hover img {
  opacity: 0.85;
}

/*------コースページ------*/

#mkWrapper #course .content #courseBanner {
  position: relative;
  margin-top: -5px;
  margin-bottom: 90px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: translateY(60px);
  opacity: 0;
}
#mkWrapper #course .content #courseBanner.action {
  transform: translateY(0);
  opacity: 1;
}
#mkWrapper #course .content #courseBanner .courseBanner__heading {
  width: 728px;
  margin: 0 auto;
}
#mkWrapper #course .content #courseBanner .courseBanner__badge {
  position: absolute;
  width: 90px;
  top: 22px;
  left: calc(50% + 383px);
}
#mkWrapper #course .content #courseBanner .courseBanner__image {
  margin-top: 43px;
}
#mkWrapper #course .content #courseBanner .courseBanner__image a {
  display: block;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 6px;
  transform: translate3d(0, 0, 0);
}
#mkWrapper #course .content #courseBanner .courseBanner__image a:hover img {
  opacity: 0.85;
}
#mkWrapper #course .content #courseBanner .courseBanner__image img {
  transition: 0.3s;
}

/* -------------------------------------
	2022/02/10 ゴールドポイントキャンペーン
------------------------------------- */
.mkGoldPointBanner {
  position: relative;
  z-index: 20;
}
.mkGoldPointBanner__link {
  display: block;
  background-color: #e60012;
}
.mkGoldPointBanner__link:hover img {
  transform: scale(1.05);
}
.mkGoldPointBanner__link img {
  width: 960px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

/* -------------------------------------
	2022/02/10 モーダルのプレイヤー
------------------------------------- */
#playerModal {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 800px;
}
#playerModal * {
  box-sizing: border-box;
}
#playerModal .playerModalContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#playerModal .playerModalContent {
  width: 860px;
}
#playerModal .playerModalFrame {
  width: 100%;
  height: 484px;
  background-color: #000;
}
#playerModal .playerModalFrame iframe {
  width: 100%;
  height: 100%;
}
#playerModal .playerModalNav {
  width: 100%;
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
#playerModal .playerModalNav__item {
  width: 210px;
}
#playerModal .playerModalNav__item:nth-child(n+2) {
  margin-left: 20px;
}
#playerModal .playerModalNav__button {
  width: 100%;
  display: block;
  position: relative;
  background: none;
  appearance: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}
#playerModal .playerModalNav__button:hover .playerModalNav__thumb:before {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.36s cubic-bezier(0.25, 1, 0.5, 1);
}
#playerModal .playerModalNav__button.is-active .playerModalNav__thumb {
  border-color: #db0755;
}
#playerModal .playerModalNav__button.is-active .playerModalNav__caption {
  color: #db0755;
}
#playerModal .playerModalNav__button.is-new:before {
  content: "";
  width: 54px;
  height: 54px;
  position: absolute;
  z-index: 1;
  top: -24px;
  right: -24px;
  background: url(../images/common/ic_new3.png) center no-repeat;
  background-size: contain;
  transition: 0.3s;
}
#playerModal .playerModalNav__thumb {
  width: 100%;
  position: relative;
  display: block;
  border: 2px solid #fff;
  transition: border-color 0.2s;
}
#playerModal .playerModalNav__thumb:before {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: url(../images/common/ic_play.png) no-repeat 0 0;
  opacity: 0;
  transform: scale(1.2);
  transition: opacity 0.2s ease, transform 0s 0.2s;
}
#playerModal .playerModalNav__thumb img {
  display: block;
  width: 100%;
  height: auto;
}
#playerModal .playerModalNav__caption {
  display: block;
  margin-top: 7px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
  text-align: center;
  transition: color 0.2s;
}