@charset "utf-8";

@import "layout.css";

body {
	background: url(../img/common/bg.png) top center;
	overflow-x: hidden;
}

/*-------------------------------------------------------------------------
	Title
/*-----------------------------------------------------------------------*/

#title {
	background-color: #ff821e;
	position: relative;
}

	#title h1 {
    width: 100%;
	}
  #title h1 img {
    min-height:603px;
    width: 100%;
    background: url(../img/index/title/bg_main.png) no-repeat center;
    background-size: cover;
  }
	#title #logo-3ds {
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 1;
	}

/*------------------------------------------------------------
  sec00
------------------------------------------------------------*/

#sec00 {
    padding-bottom: 40px;
    border-top: solid 7px #ff6400;
    background: url(../img/index/sec00/bg.png) center 110px;
    position: relative;
}

    #sec00 h2 {
        margin-top: -146px;
        text-align: center;
    }

.wrap_moviebtn {
  text-align: center;
  position: relative;
}
        #sec00 .btn_sleep {
          margin-left: -13px;
        }
        #sec00 .btn_trial {
          display: inline-block;
          margin-right: 10px;
        }
          #sec00 .btn_trial a {
            padding-top: 5px;
          }
        #sec00 .btn {
          width: 174px;
          margin-right: 13px;
          display: inline-block;
        }
            #sec00 .btn:last-child {
              margin-right: 0;
            }
            #sec00 .btn .new {
              position: absolute;
              top: -11px;
              right: -11px;
            }
        #sec00 a {
            display: inline-block;
            vertical-align: top;
            position: relative;
            z-index: 1;
        }
            #sec00 a.cboxElement {
                margin: 22px auto 0;
            }
        #sec00 .btn.last {
          width: 235px;
          margin-top: 0;
          position: absolute;
          top: 143px;
          right: -30px;
        }
.movie_deco01 {
  position: absolute;
    top: 40px;
    left: -11px;
}
.movie_deco02 {
  position: absolute;
    top: -25px;
    right: -50px;
}

.wrap_bnrbtn {
  margin-top: 37px;
  position: relative;
  height: 148px;
  text-align: center;
}

/*-------------------------------------------------------------------------
  soft-detail
/*-----------------------------------------------------------------------*/

#soft-detail {
  height: 190px;
  position: relative;
  background: url(../img/index/soft_detail/bg_ptn.png) repeat-x center 20px #fff;
}
  #soft-detail > .wrap > p {
    position: absolute;
    z-index: 2;
  }
      #soft-detail .pkg {
          width: 221px;
          top: -17px;
          left: 117px;
      }
      #soft-detail .icon {
          width: 89px;
          top: 17px;
          left: 357px;
      }
      #soft-detail .cero {
          width: 39px;
          top: 108px;
          left: 356px;
      }
      #soft-detail .amiibo {
          width: 33px;
          top: 107px;
          left: 399px;
      }
  #soft-detail .txt01 {
    width: 375px;
    top: 24px;
    left: 460px;
  }
  #soft-detail .txt02 {
    width: 375px;
    top: 102px;
    left: 460px;
  }
  #soft-detail .btn {
    width: 180px;
    top: 102px;
    left: 546px;
  }
  #soft-detail .update {
    width: 161px;
  	top: 158px;
  	left: 460px;
  }
  #soft-detail .update a:hover {
  	opacity: 0.75;
  }
  #soft-detail .result {
    width: 244px;
    top: -43px;
    right: -17px;
  }
    #soft-detail .result span {
      position: absolute;
      bottom: 73px;
      right: 45px;
      width: 14px;
      height: 21px;
      margin-left: -12px;
      -webkit-animation: sdb 2s infinite;
      animation: sdb 2s infinite;
      box-sizing: border-box;
    }
  @-webkit-keyframes sdb {
    0% {
      -webkit-transform: rotate(0deg) translate(0, 0);
    }
    20% {
      -webkit-transform: rotate(0deg) translate(10px, 0);
    }
    40% {
      -webkit-transform: rotate(0deg) translate(0, 0);
    }
  }
  @keyframes sdb {
    0% {
      transform: rotate(0deg) translate(0, 0);
    }
    20% {
      transform: rotate(0deg) translate(10px, 0);
    }
    40% {
      transform: rotate(0deg) translate(0, 0);
    }
  }
  #soft-detail .lowson {
    width: 298px;
    top: 22px;
    right: -32px;
  }


/*-------------------------------------------------------------------------
	Sec01
/*-----------------------------------------------------------------------*/

#sec01 {
    padding: 0 0 60px;
    background: url(../img/index/sec01/bg_ptn01.png) center;
    position: relative;
}
    #sec01 .illust {
        margin: auto;
        position: absolute;
        bottom: -126px;
        right: -258px;
        z-index: 0;
    }
    #sec01 .deco01 {
        position: absolute;
        top: -520px;
        left: -226px;
    }
    #sec01 .deco02 {
        position: absolute;
        top: 102px;
        left: -317px;
    }
    #sec01 .illust01 {
        position: absolute;
        top: -64px;
        right: -228px;
        z-index: 1;
    }
	#sec01 .bg_ptn02 {
		width: 100%;
		height: 386px;
		content: " ";
		background: url(../img/index/sec01/bg_ptn02.png) repeat-x center -130px;
		display: block;
		position: absolute;
		top: 0;
		z-index: 0;
	}
    #sec01 h2,
    #sec01 .txt {
        position: relative;
        z-index: 1;
    }
    #sec01 h2 {
        padding-top: 56px;
    }
    #sec01 .txt {
        margin-top: 23px;
    }

/*------------------------------------------------------------
  sec02
------------------------------------------------------------*/

#sec02 {
  padding-bottom: 100px;
  background: url(../img/index/sec02/bg.png) no-repeat center top;
  background-size: cover;
}
  #sec02 .ttl {
    position: relative;
    z-index: 0
  }
    #sec02 .ttl .bg {
      margin-top: -130px;
      width: 100%;
    }
    #sec02 .ttl .bg img {
      min-height: 215px;
      width: 100%;
      background: url(../img/index/sec02/ttl/bg_ttl.png) no-repeat center;
      background-size: cover;
    }
    #sec02 .ttl h2 {
      width: 57%;
      position: absolute;
      top: 134px;
      right: 320px;
    }
    #sec02 .txt {
      margin-top: 27px;
      text-align: center;
      position: relative;
      z-index: 2;
    }
    #sec02 .btn {
      margin-top: 40px;
      text-align: center;
      position: relative;
      z-index: 2;
    }


/*------------------------------------------------------------
  sec03
------------------------------------------------------------*/

#sec03 {
  position: relative;
  z-index: 1;
}
    #sec03 .bg {
      margin-top: -260px;
      width: 100%;
    }
    #sec03 .bg img {
      min-height: 1030px;
      width: 100%;
      background: url(../img/index/sec03/bg.png) no-repeat center;
      background-size: cover;
    }
    #sec03 .txt01 {
      position: absolute;
      top: 33%;
      left: 4%;
    }
    #sec03 .txt02 {
      text-align: center;
      position: absolute;
      top: 64%;
      left: 0;
      right: 0;
    }
    #sec03 .btn {
      text-align: center;
      position: absolute;
      bottom: 13%;
      left: 0;
      right: 0;
    }
      #sec02 .btn a,
      #sec03 .btn a {
        position: relative;
      }
        #sec02 .btn span,
        #sec03 .btn span {
          width: 44px;
          height: 52px;
          background: url(../img/index/arrow_off.png) no-repeat center;
          position: absolute;
          bottom: 8px;
          right: 20px;
          margin-left: -12px;
          -webkit-animation: btn-arrow 2s infinite;
          animation: btn-arrow 2s infinite;
        }
      @-webkit-keyframes btn-arrow {
        0% {
          -webkit-transform: rotate(0deg) translate(0, 0);
        }
        20% {
          -webkit-transform: rotate(0deg) translate(10px, 0);
        }
        40% {
          -webkit-transform: rotate(0deg) translate(0, 0);
        }
      }
      @keyframes btn-arrow {
        0% {
          transform: rotate(0deg) translate(0, 0);
          background: url(../img/index/arrow_on.png) no-repeat center;
        }
        20% {
          transform: rotate(0deg) translate(10px, 0);
        }
        40% {
          transform: rotate(0deg) translate(0, 0);

        }
      }



/*------------------------------------------------------------
  sec04
------------------------------------------------------------*/

#sec04 {
  margin-top: 0;
  padding-bottom: 90px;
  background: url(../img/index/sec04/bg.png) no-repeat center top,
  url(../img/index/sec04/bg_ptn.png) center top
              ;
  background-size: cover, auto;
  position: relative;
  z-index: 0;
}
  #sec04 h2 {
    margin-left: -124px;
  }
    #sec04 .bg {
      margin-top: -260px;
      width: 100%;
    }
    #sec04 .bg img {
      min-height: 943px;
      width: 100%;
      background: url(../img/index/sec04/bg.png) no-repeat center bottom;
      background-size: cover;
    }
    #sec04 .txt01,
    #sec04 .txt02 {
      width: 49%;
      display: inline-block;
      vertical-align: top;
    }
    #sec04 .txt02 {
      text-align: right;
    }
    #sec04 .btn {
      margin-top: 40px;
      text-align: center;
    }


/*------------------------------------------------------------
  sec05
------------------------------------------------------------*/

#sec05 {
  padding: 30px 0 28px;
  background: url(../img/index/sec05/bg_ptn.png) center top #fff;
  box-shadow: 0 10px 18px -3px rgba(0,0,0,0.09) inset, 0 -10px 18px -3px rgba(0,0,0,0.09) inset;
  position: relative;
}
  #sec05 h2 {
    margin-left: 96px;
  }
    #sec05 .bnr {
      margin-left: 96px;
      margin-top: 18px;
    }
      #sec05 ul.bnr {
        width: 768px;
        margin-top: 10px;
        padding-bottom: 22px;
        background: url(../img/index/sec05/dot.png) no-repeat center bottom;
      }
      #sec05 ul.bnr::after{
        content: "";
        display: block;
        clear: both;
      }
        #sec05 ul.bnr li {
          display: inline-block;
        }
        #sec05 ul.bnr li:nth-child(2) {
          float: right;
        }
        #sec05 p.txtlink{
          margin-top: 24px;
          text-align: center;
        }
        #sec05 p.txtlink a::before{
          content: "";
          display: inline-block;
          vertical-align: middle;
          width: 15px;
          height: 15px;
          background: url(../img/index/sec05/ico_txtlink.png) no-repeat center center;
        }
        #sec05 p.txtlink a span{
          content: "";
          display: inline-block;
          vertical-align: middle;
          font-size: 14px;
          font-weight: bold;
        }
        #sec05 p.txtlink a:hover{
          color: #ff0082;
        }

/*------------------------------------------------------------
  btn_news
------------------------------------------------------------*/

#btn_news {
  width: 305px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 3;
}
#btn_news.fixed-bottom {
    position: fixed;
    right:0;
    bottom:0;
}


/*------------------------------------------------------------
  news
------------------------------------------------------------*/
.news{
    width: 100%;
    padding-bottom: 19px;
    background: url(../img/index/news/bg_ptn01.png) center;
    border-top: solid 7px #ff6400;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.news-header{
  width: 960px;
  margin: 0 auto 18px;
  position: relative;
}
.news-header__ttl {
  text-align: center;
}

.news__body{
  width: 100%;
  /*min-height: 495px;*/
}

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

.swiper-slide{
  padding-bottom: 40px;
}

.news-post-header{
  height: 23px;
  position: relative;
  z-index: 2;
}

.news-post__date{
  padding: 0px 22px;
  background-color: #3caaff;
  border-radius: 7px 7px 0 0;
  color: #fff;
  font-size: 17px;
  font-weight: bold;
  font-family: Helvetica Neue, Helvetica,Arial, sans-serif;
  position: absolute;
  left: 18px;
  top: 0;
  letter-spacing: 0.07em;
}
.news-post{
  width: 90%;
  padding: 20px;
  margin-top: -1px;
  background: url(../img/index/news/bg_ptn.png) repeat-x center top;
  border: solid 5px rgb(60, 170, 255);
  border-radius: 15px;
  background-color: rgb(255, 255, 255);
  box-shadow: 7px 7px 0px 0px rgba(0, 0, 0, 0.3);
}

.news-post__text{
  color: #000;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.75;
  letter-spacing: 0;
}
.news-post__url a{
  color: #3caaff;
  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 .btn {
    width: 960px;
    margin: 0 auto;
    text-align: center;
}

.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;
}

.news-post__media{
  /* width: 270px; */
  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;
}
.js-news-video-modal a::before,
.js-modal-movie a::before{
  content: '';
  display: block;
  width: 50px;
  height: 51px;
  background: url(../img/common/icon/play.png) 0 0 no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}


@media screen and (min-width: 1300px) {

    #select ul {
        width: 1235px;
    }
        #select ul li:nth-child(3n) {
            margin: 25px 25px 0 0;
        }
        #select ul li:nth-child(4n) {
            margin: 25px 0 0;
        }
}



/*-------------------------------------------------------------------------
    slider
/*-----------------------------------------------------------------------*/
#slide {
    margin-top: 10px;
}
    #slide {
        width: 100%;
        height: 401px;
        overflow: hidden;
    }
    #slide .area {}
        #slide .area > .slide {
            position: relative;
            z-index: 2;
        }
            #slide .area > .slide li {
                float: left;
            }
                #slide .area > .slide li img {
                    width: auto;
                    height: 401px;
                    overflow: hidden;
                }



/*-------------------------------------------------------------------------
	ClorBox
/*-----------------------------------------------------------------------*/

#cboxContent {
    margin: 70px 10px 0;
    background: #000;
}
#cboxClose {
    position: absolute;
    top: -60px;
    right: 0px;
    display: block;
    background: url(../img/common/icon/icon_close.png) no-repeat top center;
    width: 46px;
    height: 46px;
    text-indent: -9999px;
}
#inline_content01 {
}
.inline_content {
    display: none;
}
#cboxClose.close {
    display: block;
    z-index: 100;
}
#cboxCurrent {
    display: none !important;
}

/*-------------------------------------------------------------------------
	You Tube
/*-----------------------------------------------------------------------*/

.buttonBar {
	display: none;
}

/* ----------------------------
   eshop バナー
---------------------------- */
.bnr-eshop-sale{
 width: 100%;
 background: url(../img/index/bnr_eshop_bg.png);
 position: relative;
 z-index: 10;
}
.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;
}