@charset "UTF-8";

/*------------------------------------------------------------
	reset
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
  display: block;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
body {
  font-family: HelveticaNeue,Helvetica Neue,Helvetica,Arial,Roboto,"Droid Sans",Hiragino Kaku Gothic ProN,"メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
}
input,
textarea {
  font-family: HelveticaNeue,Helvetica Neue,Helvetica,Arial,Roboto,"Droid Sans",Hiragino Kaku Gothic ProN,"メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  line-height: 1.6;
}
a {
  outline: none;
}
a:link, a:visited {
  text-decoration: none;
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}
a img, img {
  border-style:none;
}
img{
  vertical-align: bottom;
}

/*------------------------------------------------------------
	common
------------------------------------------------------------*/
body {
  min-width: 960px;
  background: #000;
}
.main-container {
  line-height: 0;
  width: 100%;
  position: relative;
}

.c-btn{
  position: relative;
  display: block;
}
.c-btn .c-btn__hover{
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.c-btn .c-btn__label{
  position: absolute;
  left: 0;
  top: 0;
}
.no-touchevents .c-btn .c-btn__hover{
  opacity: 0;
   -webkit-transition: opacity .4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: opacity .4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.no-touchevents .c-btn:hover .c-btn__hover{
  opacity: 1;
}

/* ==========================================================================
   utility
   ======================================================================= */
.none {
  display: none;
}
.hidden {
  visibility: hidden;
}
.no-js .hidden {
  visibility: visible;
}
.u-cf:after {
  content: "";
  display: block;
  clear: both;
}

/* 画像置換 */
.u-ir {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
  display: block;
}

/*------------------------------------------------------------
	common
------------------------------------------------------------*/
.switch-logo {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
}

s{
  width: 100%;
}
.pageheader__body{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.pageheader__body::before{
  content: "";
  display: block;
  padding-top: 17.1875%;
}

.main-container--page{
  padding-top: 25px;
}

.pageheader__logo{
  position: absolute;
  left: 5px;
  top: 10px;
}

.main-container--page .switch-logo img{
  -webkit-backface-visibility: hidden;
}

@media all and (min-width: 1280px){
  .main-container--page{
    padding-top: 0;
  }
}


/*------------------------------------------------------------
  gnav
------------------------------------------------------------*/
.gnav{
  width: 100%;
  height: 65px;
  background: url(../img/common/gnav_bg.png) 50% 0 no-repeat;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-top: 7px;
  
  position: relative;
  min-width: 960px;
  position: relative;
  z-index: 2
}
.page-news + .gnav{
  margin-top: -65px;
}

.gnav__pagetop{
  position: absolute;
  right: 6px;
  top: -46px;
}

.gnav__wrapper{
  width: 100%;
  overflow: hidden;
}
.gnav__body{
  width: 960px;
  height: 44px;
  margin: 0 auto;
  position: relative;
}

.gnav__item,
.gnav__item-sub{
  position: absolute;
}

.gnav__item--story{
  left: 163px;
  top: 0;
}

.gnav__item--world{
  left: 290px;
  top: 0;
}

.gnav__item--tuning{
  left: 417px;
  top: 0;
}

.gnav__item--characters{
  left: 544px;
  top: 0;
}

.gnav__item--battle{
  left: 674px;
  top: 0;
}

.gnav__item a{
  display: block;
  width: 127px;
  height: 44px;
  position: relative;
  z-index: 2;
}

.gnav__item--story::before{
  content: "";
  width: 216px;
  height: 44px;
  background: url(../img/common/gnav_story_hover.png) 0 0 no-repeat;
  position: absolute;
  left: -41px;
  top: 0;
  opacity: 0;
}
.gnav__item--world::before,
.gnav__item--tuning::before,
.gnav__item--characters::before{
  content: "";
  width: 236px;
  height: 44px;
  background: url(../img/common/gnav_hover_wide.png) 0 0 no-repeat;
  position: absolute;
  left: -59px;
  top: 0;
  opacity: 0;
}

.gnav__item--battle::before{
  content: "";
  width: 216px;
  height: 44px;
  background: url(../img/common/gnav_battle_hover.png) 0 0 no-repeat;
  position: absolute;
  right: -32px;
  top: 0;
  opacity: 0;
}

.gnav__item-sub--products a::before{
  content: "";
  width: 182px;
  height: 44px;
  background: url(../img/common/gnav_products_hover.png) 0 0 no-repeat;
  position: absolute;
  left: 0;
  top: 0;
}
.gnav__item-sub--top a::before{
  content: "";
  width: 182px;
  height: 44px;
  background: url(../img/common/gnav_top_hover.png) 0 0 no-repeat;
  position: absolute;
  right: 0;
  top: 0;
}

.gnav__item--tuning a{
  width: 128px;
}
.gnav__item--characters a{
  width: 130px;
}

.gnav__item .gnav__label,
.gnav__item .gnav__label--ov{
  display: block;
  width: 44px;
  height: 44px;
  position: absolute;
  left: 0;
  top: 0;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.gnav__item--story .gnav__label{background-image: url(../img/common/gnav_story_label.png);}
.gnav__item--world .gnav__label{background-image: url(../img/common/gnav_world_label.png);}
.gnav__item--tuning .gnav__label{background-image: url(../img/common/gnav_tuning_label.png);}
.gnav__item--characters .gnav__label{background-image: url(../img/common/gnav_characters_label.png);}
.gnav__item--battle .gnav__label{background-image: url(../img/common/gnav_battle_label.png);}
.gnav__item--characters .gnav__label{background-image: url(../img/common/gnav_characters_label.png);}
.gnav__item-sub--products .gnav__label{background-image: url(../img/common/gnav_products_label.png);}
.gnav__item-sub--top .gnav__label{background-image: url(../img/common/gnav_top_label.png);}

.gnav__item--story .gnav__label--ov{background-image: url(../img/common/gnav_story_label_ov.png);}
.gnav__item--world .gnav__label--ov{background-image: url(../img/common/gnav_world_label_ov.png);}
.gnav__item--tuning .gnav__label--ov{background-image: url(../img/common/gnav_tuning_label_ov.png);}
.gnav__item--characters .gnav__label--ov{background-image: url(../img/common/gnav_characters_label_ov.png);}
.gnav__item--battle .gnav__label--ov{background-image: url(../img/common/gnav_battle_label_ov.png);}
.gnav__item--characters .gnav__label--ov{background-image: url(../img/common/gnav_characters_label_ov.png);}
.gnav__item-sub--products .gnav__label--ov{background-image: url(../img/common/gnav_products_label_ov.png);}
.gnav__item-sub--top .gnav__label--ov{background-image: url(../img/common/gnav_top_label_ov.png);}

.gnav__item--story .gnav__label,
.gnav__item--story .gnav__label--ov{
  left: 40px;
}
.gnav__item--world .gnav__label,
.gnav__item--world .gnav__label--ov{
  left: 41px;
}
.gnav__item--tuning .gnav__label,
.gnav__item--tuning .gnav__label--ov{
  left: 41px;
}
.gnav__item--characters .gnav__label,
.gnav__item--characters .gnav__label--ov{
  left: 43px;
}
.gnav__item--battle .gnav__label,
.gnav__item--battle .gnav__label--ov{
  left: 43px;
}

.gnav__item-sub--products{
  right: 0;
  top: 0;
}
.gnav__item-sub--products a{
  display: block;
  width: 137px;
  height: 44px;
  position: relative;
}
.gnav__item-sub--products .gnav__label,
.gnav__item-sub--products .gnav__label--ov{
  display: block;
  width: 98px;
  height: 44px;
  position: absolute;
  left: 36px;
  top: 0;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.gnav__item-sub--top{
  left: 0;
  top: 0;
}
.gnav__item-sub--top a{
  display: block;
  width: 133px;
  height: 44px;
  position: relative;
}
.gnav__item-sub--top .gnav__label,
.gnav__item-sub--top .gnav__label--ov{
  display: block;
  width: 79px;
  height: 44px;
  position: absolute;
  left: 28px;
  top: 0;
  background-position: 0 0;
  background-repeat: no-repeat;
}

@media all and (min-width: 1280px){
  .gnav{
    background: url(../img/common/gnav_bg_wide.png) 50% 0 no-repeat;
  }
  .gnav__body{
    width: 1280px;
  }
  .gnav__item--story{
    left: 237px;
  }

  .gnav__item--world{
    left: 403px;
  }

  .gnav__item--tuning{
    left: 569px;
  }

  .gnav__item--characters{
    left: 735px;
  }

  .gnav__item--battle{
    left: 901px;
  }

  .gnav__item-sub--products{
    right: -45px;;
  }

  .gnav__item a{
    width: 166px;
  }

  .gnav__item-sub--products a{
    width: 202px;
  }
  .gnav__item-sub--products a::before {
    width: 202px;
    background: url(../img/common/gnav_products_hover_wide.png) 0 0 no-repeat;
  }
  .gnav__item-sub--top a{
    width: 157px;
  }
  .gnav__item-sub--top a::before {
    width: 202px;
    background: url(../img/common/gnav_top_hover_wide.png) 0 0 no-repeat;
  }

  .gnav__item--story .gnav__label,
  .gnav__item--story .gnav__label--ov{
    left: 61px;
  }
  .gnav__item--world .gnav__label,
  .gnav__item--world .gnav__label--ov{
    left: 61px;
  }
  .gnav__item--tuning .gnav__label,
  .gnav__item--tuning .gnav__label--ov{
    left: 61px;
  }
  .gnav__item--characters .gnav__label,
  .gnav__item--characters .gnav__label--ov{
    left: 61px;
  }
  .gnav__item--battle .gnav__label,
  .gnav__item--battle .gnav__label--ov{
    left: 61px;
  }
  .gnav__item-sub--products .gnav__label,
  .gnav__item-sub--products .gnav__label--ov{
    left: 31px;
  }
  .gnav__item-sub--top .gnav__label,
  .gnav__item-sub--top .gnav__label--ov{
    left: 49px;
  }

  .gnav__item--story::before,
  .gnav__item--world::before,
  .gnav__item--tuning::before,
  .gnav__item--characters::before,
  .gnav__item--battle::before{
    width: 236px;
    background: url(../img/common/gnav_hover_wide.png) 0 0 no-repeat;
    left: -36px;
  }
  .gnav__item--battle::before{
    right: auto;
    left: -36px;
  }
}

.gnav__item a .gnav__label--ov,
.gnav__item-sub a .gnav__label--ov{
  opacity: 0;
}
.gnav__item--story a::before{
  opacity: 0;
}
.no-touchevents .gnav__item a .gnav__label--ov,
.no-touchevents .gnav__item-sub a .gnav__label--ov{
  opacity: 0;
  -webkit-transition: opacity .4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: opacity .4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.no-touchevents .gnav__item:not(.is-current) a:hover .gnav__label--ov,
.no-touchevents .gnav__item-sub:not(.is-current) a:hover .gnav__label--ov{
  opacity: 1;
}

.no-touchevents .gnav__item a .gnav__label,
.no-touchevents .gnav__item-sub a .gnav__label{
  opacity: 1;
  -webkit-transition: opacity .3s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
  transition: opacity .3s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
}
.no-touchevents .gnav__item:not(.is-current) a:hover .gnav__label,
.no-touchevents .gnav__item-sub:not(.is-current) a:hover .gnav__label{
  opacity: 0;
}

.gnav__item-sub--products a::before,
.gnav__item-sub--top a::before{
  opacity: 0;
}
.no-touchevents .gnav__item-sub--products a::before,
.no-touchevents .gnav__item-sub--top a::before{
  opacity: 0;
   -webkit-transition: opacity .4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: opacity .4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.no-touchevents .gnav__item-sub--products a:hover::before,
.no-touchevents .gnav__item-sub--top a:hover::before{
  opacity: 1;
}

.no-touchevents .gnav__item::before{
  opacity: 0;
   -webkit-transition: opacity .4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: opacity .4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.no-touchevents .gnav__item.is-active::before{
  opacity: 1;
}

.gnav__item.is-current a .gnav__label--ov,
.gnav__item-sub.is-current a .gnav__label--ov{
  opacity: 1!important;
}
.gnav__item.is-current a .gnav__label,
.gnav__item-sub.is-current a .gnav__label{
  opacity: 0!important;
}
.gnav__item.is-current::before,
.gnav__item-sub--products.is-current::before,
.gnav__item-sub--top.is-current::before{
  opacity: 1!important;
}


/*------------------------------------------------------------
  footer
------------------------------------------------------------*/
.footer {
  width: 100%;
  height: 44px;
  position: relative;
  background: #000;
  z-index: 2
}
.footer__body{
  max-width: 1280px;
  margin: 0 auto;
}
.footer__body:after{
  clear: both;
}
.footer img{
  vertical-align: bottom;
}
.footer-left{
  float: left;
  font-size: 0;
}
.footer-left p{
  display: inline-block;
  vertical-align: middle;
}
.footer__btn-support{
  margin-left: 6px;
  margin-right: 0;
}
.footer__btn-nintendo{
  margin-left: 15px;
  margin-right: 7px;
}
.footer__btn-hardware{
  margin-right: 7px;
}

.footer__btn-support a{
  display: block;
  background: #114d3c;
}
.no-touchevents .footer__btn-support a {
  background-color: #114d3c;
  -webkit-transition: background-color .4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: background-color .4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.no-touchevents .footer__btn-support a:hover {
  background-color: #219978;
}

.no-touchevents .footer__btn-nintendo a,
.no-touchevents .footer__btn-hardware a,
.no-touchevents .footer__btn-software a,
.no-touchevents .footer__btn-tw a,
.no-touchevents .footer__btn-fb a {
  opacity: 1;
  -webkit-transition: opacity .25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: opacity .25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.no-touchevents .footer__btn-nintendo a:hover,
.no-touchevents .footer__btn-hardware a:hover,
.no-touchevents .footer__btn-software a:hover,
.no-touchevents .footer__btn-tw a:hover,
.no-touchevents .footer__btn-fb a:hover {
  opacity: .7;

}


.footer__btn-fb{
  margin-right: 10px;
}
.footer__btn-tw{
  margin-right: 10px;
}
.footer__copyright{
  margin-right: 5px;
}

.footer-right{
  float: right;
  text-align: right;
  font-size: 0;
}
.footer-right p{
  display: inline-block;
  vertical-align: middle;
}

@media all and (min-width: 1280px){
  .footer__btn-support{
    margin-right: 7px;
  }
  .footer__btn-nintendo{
    margin-right: 15px;
  }
  .footer__btn-hardware{
    margin-right: 14px;
  }
  .footer__copyright{
  margin-right: 8px;
}
}


/*------------------------------------------------------------
  page news
------------------------------------------------------------*/




.page-news{
  margin-top: -120px;
  background: url(../img/common/bottom_news_bg.png) 50% 120px no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
}
.page-news__header{
  width: 100%;
  background: rgba(0,0,0,.8);
}
.page-news-title{
  width: 960px;
  margin: 0 auto;
}

.page-news__body{
  width: 100%;
  min-height: 276px;
  margin-top: -42px;
  padding-bottom: 106px;
}

.page-news__list{
  width: 960px;
  margin: 0 auto;
  margin-bottom: 25px;
}

.page-news__btn{
  width: 210px;
  margin: 20px auto 0 auto;
}


.page-news__list{
  width: 850px;
  margin: 0 auto;
}

@media all and (min-width: 1280px){
  .page-news__list{
    width: 1140px;
  }
}
.page-news__list::after{
  content: '';
  display: block;
  clear: both;
}

.page-news__list .news-slide__item{
  width: 270px;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}
.page-news__list .news-slide__item:nth-child(3n){
  margin-right: 0;
}
.page-news__list .news-slide__item:nth-child(3n + 1){
  clear: left;
}
.page-news__list .news-slide__item:nth-child(4n){
  display: none;
}
@media all and (min-width: 1280px){
  .page-news__list .news-slide__item:nth-child(3n){
    margin-right: 20px;
  }
  .page-news__list .news-slide__item:nth-child(4n){
    margin-right: 0;
    display: block;
  }
  .page-news__list .news-slide__item:nth-child(3n + 1){
    clear: none;
  }
  .page-news__list .news-slide__item:nth-child(4n + 1){
    clear: left;
  }
}

/*------------------------------------------------------------
  news card
------------------------------------------------------------*/
/*.news-slide__item{
  width: 270px;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}
.news-slide__item:nth-child(4n){
  margin-right: 0;
}
.news-slide__item:nth-child(4n + 1){
  clear: left;
}*/

.swiper-container {
  width: 100%;
  /*height: 425px;*/
  min-height: 565px;
}

.swiper-slide{
  width: 270px;
}

.is-hide{
  display: none;
}

.swiper-slide{
  /*width: 270px;*/
}

.news-post-header{
  width: 270px;
  height: 23px;
  background: url(../img/common/news_item_header.png) 0 0 no-repeat;
  position: relative;
  z-index: 2;
}

.news-post__category{
  width: 146px;
  height: 22px;
}
.cat_CHARACTERS .news-post__category{
  background: url(../img/common/news_ico_characters.png) 0 0 no-repeat;
}
.cat_BATTLE .news-post__category{
  background: url(../img/common/news_ico_battle.png) 0 0 no-repeat;
}
.cat_WORLD .news-post__category{
  background: url(../img/common/news_ico_world.png) 0 0 no-repeat;
}
.cat_INFO .news-post__category{
  background: url(../img/common/news_ico_info.png) 0 0 no-repeat;
}
.cat_SYSTEM .news-post__category{
  background: url(../img/common/news_ico_info.png) 0 0 no-repeat;
}
.cat_DLC .news-post__category{
  background: url(../img/common/news_ico_dlc.png) 0 0 no-repeat;
}


.news-post__date{
  color: #FFF;
  font-size: 12px;
  font-weight: bold;
  font-family: Helvetica Neue, Helvetica,Arial, sans-serif;
  font-style: italic;
  position: absolute;
  left: 150px;
  top: 14px;
  letter-spacing: 0.07em;
}
.news-post{
  width: 230px;
  padding: 20px;
  background: rgba(0,0,0,0.75) url(../img/common/news_item_bottom.png) 0 100% no-repeat;
  margin-top: -1px;
}

.news-post__text{
  color: #FFF;
  font-size: 12px;
  line-height: 1.5;
}
.news-post__url a{
  color: #37ffc8;
  font-size: 12px;
  line-height: 1.5;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  display: block;
}

.news-post__url + .news-post__media,
.news-post__text + .news-post__media,
.news-post__url + a,
.news-post__text + a{
  margin-top: 10px;
  display: block;
  position: relative;
}
.news-post__media a{
  display: block;
  position: relative;
}


.news-post__url + a,
.news-post__text + a,
.news-post__media a{
  opacity: 1;
  -ms-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.no-touchevents .news-post__url + a:hover,
.no-touchevents .news-post__text + a:hover,
.no-touchevents .news-post__media a:hover{
  opacity: 0.75;
}


.js-news-video-modal::before,
.news-post__media .js-modal-movie::before{
  content: '';
  display: block;
  width: 57px;
  height: 49px;
  background: url(../img/common/movie_icon.png) 0 0 no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}


.news-post__media{
  width: 230px;
  margin: auto;
}
.news-post__media img{
  width: 100%;
  height: auto;
  vertical-align: bottom;
}


.has-2-img::after,
.has-3-img::after,
.has-4-img::after{
  content: "";
  display: block;
  clear: both;
}
.has-2-img .media-item{
  width: calc((100% - 1px) / 2);
  float: left;
  padding-top: 50%;
  -webkit-background-size: cover;
          background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.has-2-img .media-item.media-item--02{
  float: right;
}
.has-3-img{
  overflow: hidden;
}
.has-3-img .media-item--01{
  width: calc(((100% - 1px) / 3) * 2);
  float: left;
  padding-top: 50%;
  -webkit-background-size: cover;
          background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.has-3-img .media-item-right{
  float: right;
  width: calc((100% - 1px) / 3);
}
.has-3-img .media-item--02{
  padding-top: 75%;
  -webkit-background-size: cover;
          background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.has-3-img .media-item--03{
  padding-top: calc(75% - 1px);
  margin-top: 1px;
  -webkit-background-size: cover;
          background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.has-4-img .media-item{
  width: calc((100% - 1px) / 2);
  float: left;
  padding-top: 50%;
  -webkit-background-size: cover;
          background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.has-4-img .media-item.media-item--02,
.has-4-img .media-item.media-item--04{
  float: right;
}
.has-4-img .media-item.media-item--03,
.has-4-img .media-item.media-item--04{
  margin-top: 1px;
}




/*------------------------------------------------------------
  movie modal
------------------------------------------------------------*/
#movie-modal,
#news-movie-modal,
#news-slide-modal,
#diagram-modal,
#movie-slide-modal {
  z-index: 11000;
  background-color: transparent;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}


/*------------------------------------------------------------
  movie modal
------------------------------------------------------------*/
#movie-modal,
#news-movie-modal,
#news-slide-modal,
#diagram-modal,
#movie-slide-modal {
  position: fixed;
}
@media screen and (min-aspect-ratio: 16/7) {
  #modal,
  #news-movie-modal {
    height: 700px;
  }
}
.modal_bg,
.news-movie-modal_bg,
.news-slide-modal_bg,
.diagram-modal_bg,
.movie-slide-modal_bg {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(0,0,0,.9);
  text-indent: -9999px;
}
.modal_window,
.news-movie-modal_window{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;
  height: 675px;
  margin: -338px 0 0 -600px;
}

.diagram-modal_window{
  position: absolute;
  top: 100px;
  left: 50%;
  width: 1056px;
  height: 947px;
  margin: 0 0 0 -480px;
}

.news-slide-modal_window{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;
  height: 675px;
  margin: -338px 0 0 -600px;
}

.movie-slide-modal_window{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 500px;
  margin: -250px 0 0 0;
}

@media screen and (max-width: 1578px) {
  .modal_window,
  .news-movie-modal_window,
  .news-slide-modal_window {
    width: 76%;
    height: 0;
    max-width: 1200px;
    padding-top: 42.75%;
    margin: -21.375% 0 0 -38%;
  }
  .movie-slide-modal_window{
    width: 100%;
    margin: -21.375% 0 0 0;
  }
}

.modal_btn_close,
.news-movie-modal_btn_close,
.news-slide-modal_btn_close,
.movie-slide-modal_btn_close,
.diagram-modal_btn_close {
  display: block;
  position: absolute;
  top: -52px;
  right: 0;
  width: 38px;
  height: 39px;
  overflow: hidden;
}
.movie-slide-modal_btn_close{
  right: 15px;
}
.showmovie .modal_btn_close,
.showmovie .news-movie-modal_btn_close,
.showmovie .news-slide-modal_btn_close {
  right: 15px;
}
@media screen and (min-aspect-ratio: 16/11) {
  .showmovie .modal_btn_close,
  .showmovie .news-movie-modal_btn_close,
  .showmovie .news-slide-modal_btn_close {
    right: 0;
  }
}
@media screen and (min-aspect-ratio: 16/9) {
  .modal_btn_close,
  .showmovie .modal_btn_close,
  .news-movie-modal_btn_close,
  .showmovie .news-movie-modal_btn_close,
  .news-slide-modal_btn_close,
  .showmovie .news-slide-modal_btn_close {
    top: 0;
    right: -60px;
    z-index: 100;
  }
  .is-ua-wiiu .modal_btn_close,
  .is-ua-wiiu .news-movie-modal_btn_close,
  .is-ua-wiiu .news-slide-modal_btn_close {
    top: -80px;
  }
}
.modal_btn_close a,
.news-movie-modal_btn_close a,
.news-slide-modal_btn_close a,
.movie-slide-modal_btn_close a,
.diagram-modal_btn_close a {
  display: block;
  height: 100%;
  background: url(../img/common/modal_btn_close.png) 0 0 no-repeat;
  text-indent: -9999px;
  outline: none;
}
.modal_btn_close a,
.news-movie-modal_btn_close a,
.news-slide-modal_btn_close a,
.movie-slide-modal_btn_close a,
.diagram-modal_btn_close a{
  display: block;
}

.modal_contents,
.news-movie-modal_contents{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.showmovie .modal_contents,
.showmovie .news-movie-modal_contents {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
@media screen and (min-aspect-ratio: 16/11) {
  .showmovie .modal_contents,
  .showmovie .news-movie-modal_contents{
    height: 100%;
    padding-top: 0;
  }
  .is-ua-wiiu .modal_contents,
  .is-ua-wiiu .news-movie-modal_contents {
    padding-top: 0;
    height: 340px;
    width: 600px;
    margin: -80px 0 0 -300px;
    top: 0;
    left: 50%;
  }
}
.modal_contents img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.modal_contents iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.news-movie-modal_contents .movieplayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 56.25%;
}

.news-movie-modal_contents video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.news-slide-body,
.movie-slide-body{
  width: 100%;
}
.diagram-body{
  padding-bottom: 80px;
}

.news-slide-modal_contents .news-slide-body-item {
  width: 100%;
  height: auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -webkit-background-size: contain;
          background-size: contain;
}
.news-slide-modal_contents .news-slide-body-item::before{
  content: "";
  display: block;
  padding-top: 56.25%;
}

.news-slide-modal_contents {
  text-align: center;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.movie-slide-modal_contents{
  position: relative;
  width: 100%;
}
.movie-slide-slideytplayer{
  position: absolute;
  width: 750px;
  height: 422px;
  top: 0;
  left: 50%;
  margin-left: -375px;
}
.movie-slide-slideytplayer iframe{
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  top: 32px;
  left: 0;
}


.modal_contents.loading:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.news-slide-body{
  opacity: 0;
}

.open_modal body{
  overflow: hidden;
}
.open_modal #movie-modal,
.open_modal #news-movie-modal,
.open_modal #news-slide-modal,
.open_modal #diagram-modal,
.open_modal #movie-slide-modal{
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

/*------------------------------------------------------------
  slide
------------------------------------------------------------*/

.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 173px;
  left: 50%;
  display: block;
  width: 70px;
  height: 70px;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
  z-index: 10;
}

.slick-prev {
  margin-left: -449px;
}
.slick-next {
  margin-left: 378px;
}

.slick-prev:before, .slick-next:before {
  content: "";
  display: block;
  width: 70px;
  height: 70px;
}

.slick-prev:before {
  background: url(../img/common/slide_btn_prev.png) 50% 50% no-repeat;
}

.slick-next:before {
  background: url(../img/common/slide_btn_next.png) 50% 50% no-repeat;
}

.news-slide-modal_contents .slick-prev,
.news-slide-modal_contents .slick-next{
    top: 50%;
    margin-top:-35px;
}
.news-slide-modal_contents .slick-prev{
    margin-left: 0;
    left: -70px;
}
.news-slide-modal_contents .slick-next
{
    margin-left: 0;
    left: auto;
    right: -70px;
}