@charset "utf-8";

@import "layout.css";



@media screen and (max-width: 480px) {
}
@media screen and (max-width: 320px) {
}

#sp {
	position: relative;
	width: 100%;
	overflow: hidden;
}

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

#title {
	position: relative;
	background-color: #ffeb00;
	z-index: 1;
}
	#title #logo_3ds {
		width: 36%;
		position: absolute;
		top: 1%;
		right: 2%;
	}

	#title .btn_copy {
		position: absolute;
		bottom: -16%;
	}

	#title ul li{
		float: left;
		width: 50%;
	}
    #title .top-movie {
        display: flex;
    }
        #title .top-movie .bg {
            width: 28.125%;
            height: 28.125%;
        }
        #title .top-movie a {
            width: 56.25%;
            height: auto;
        }
	#title .top-movie a::before{
		background-image: none;
	}
	#title .w50 {
		width: 50%;
		}
	#title .float-left{
		float: left;
	}
	#title .float-right{
		float: right;
	}
/*-------------------------------------------------------------------------
	soft_detail
/*-----------------------------------------------------------------------*/

#sec01 {
	background-size: 50%;
/* 	padding: 18% 0 4rem; */
	position: relative;
	z-index: 0;
}
#sec01:before {
	content: "";
	height: 19%;
	width: 100%;
	background-size: 4% auto;
	position: absolute;
	top: 0;
	z-index: -1;
}
	#sec01 #soft_detail {
		padding: 2% 3.9%;
		background-size: 100% auto;
		overflow: hidden;
		background: url(../img/index/sec01/bg_ptn01.png) repeat-x center bottom;
		background-size: cover;
	}
	#sec01 #soft_detail p {
		display: block;
	}
	#sec01 #soft_detail .col01 {
		width: 42%;
		float: left;
	}
	#sec01 #soft_detail #pkg {
		float: left;
		width: 60%;
	}
	#sec01 #soft_detail .icon {
		float: right;
		width: 36%;
	}
	#sec01 #soft_detail #cero {
		float: left;
		width: 17%;
		position: relative;
		margin-left: 4%;
	}
	#sec01 #soft_detail #amiibo {
		float: right;
		width: 19%;
		position: relative;

	}
	#sec01 #soft_detail .txt01 {
		width: 58%;
		float: right;
		padding:1% 0 0 2%;
	}
	#sec01 #soft_detail .txt02 {
		width: 58%;
		float: right;
		padding: 3% 0 3% 2%;
	}
	#sec01 #soft_detail .banner{
		margin-top: 3%;
		z-index: 3;
	}
	#sec01 #soft_detail .banner02{
		margin-bottom: 2%;
		margin-top: 3%;
		z-index: 3;
	}
	#sec01 #soft_detail .update{
		margin-bottom: 0;
		margin-top: -1.5%;
		z-index: 4;
		text-align: right;
	}
	#sec01 #soft_detail .update img{
		width: 55%;
	}
	#sec01 .cloud{
		margin-top: -7%;
		width: 13%;
		position: absolute;
	}

	#sec01 .movie01,
	#sec02 .movie02 {
		width: 68%;
		margin: 0 auto;
		position: relative;
		border: solid 5px #000;
	}
		#sec01 .movie01 .box,
		#sec02 .movie02 .box {
			position:relative;
			width:100%;
			padding-top:56.25%;
		}
			#sec01 .movie01 .box iframe,
			#sec02 .movie02 .box iframe {
				position:absolute;
				top:0;
				right:0;
				width:100%;
				height:100%;
			}
	#sec01 .movie01 {
		margin-top: 2%;
		border: solid 5px #000;
	}
		#sec01 .movie01 .new {
			width: 18%;
			position: absolute;
			top: -12%;
			right: -7%;
			z-index: 2;
		}
	#sec02 .movie02 {
		border: solid 5px #fff;
		border-radius: 8px;
	}
	#sec01 .txt_movie {
		padding-top: 2%;
	}
	#sec01 .txt03 {
		margin-top: 6%;
	}
	#sec01 .btn_detail {
		margin-top: 6%;
	}


	#sec01 .twitter {
		width: 90%;
		margin: 7% auto 0;
		background: url(../img/index/sec01/twitter/bg_ptn.png) repeat-x center 140% #fff;
		background-size: 4%;
		border: solid 3px #55acee;
		border-radius: 8px;
		position: relative;
	}
		#sec01 .twitter .chara {
			width: 30%;
			position: absolute;
			right: -4%;
			top: 20%;
		}
		#sec01 .twitter .txt {
			width: 76%;
			padding: 5% 7% 0;
			right: -2%;
			top: -14%;
		}
		#sec01 .twitter .btn {
			margin-top: 6%;
			padding: 2% 7% 5%;
		}
.mt01 img{
	margin-top: -1px;
}

/*-------------------------------------------------------------------------
    slider
/*-----------------------------------------------------------------------*/
.background-red{
	background: #f03c28;
}
#slide {
	background: url(../img/index/sec01/slide/slider_bg.jpg) bottom no-repeat;
	background-size: cover;

}
    #slide {
        width: 100%;
        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: 180px;
                    overflow: hidden;
                    margin-bottom: 10px;
                }

/*-------------------------------------------------------------------------
	footerNavi
/*-----------------------------------------------------------------------*/
.footer_navi ul{
	width: 100%;
	overflow: hidden;
	position: relative;
	top: -1px;
	margin-bottom: -1px;
}
.footer_navi ul li{
	display: table-cell
}

.chick_to_timeline{
	position: fixed;
	z-index: 1;
	bottom: 0;
	right: 0;
	width: 32%;
}
/*-------------------------------------------------------------------------
	Sec02
/*-----------------------------------------------------------------------*/

#sec02 {
	background-image: url(../img/index/sec02/bg.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
}
	#sec02 h2 {
		width: 60%;
		margin: 0 auto;
		padding-top: 20%;
	}
	#sec02 .txt,
	#sec02 .date {
		margin-top: 6%;
	}
		#sec02 #copy {
			margin-top: 10%;
			position: relative;
		}
			#sec02 #copy .movie02 {
				margin-top: 4%;
			}
			#sec02 #copy .chara {
				width: 12%;
				position: absolute;
				top: 30%;
				left: 2%;
			}
			#sec02 #copy .badge {
				width: 24%;
				position: absolute;
				top: 24%;
				right: 8%;
			}
		#sec02 .yt01 {
			margin-top: 15%;
		}

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

	#sec03 .bnr {
		margin: 3rem auto 0;
	}

/*-------------------------------------------------------------------------
	ColorBox
/*-----------------------------------------------------------------------*/

#cboxContent {
    margin: 70px 0 0;
    background: none;
}

#cboxClose {
    position: absolute;
    top: -60px;
    right: 0px;
    display: block;
    background: url(../../../files/img/common/icon/icon_close.png) no-repeat top center;
    width: 46px;
    height: 46px;
    text-indent: -9999px;
}
#inline_content01 {
    width: 320px;
    height: 240px;
}
.inline_content {
    display: none;
}

#cboxClose.close {
    display: block;
    z-index: 100;
}
#cboxCurrent {
    display: none !important;
}

/*------------------------------------------------------------
  news
------------------------------------------------------------*/
.news{
  width: 100%;
  overflow: hidden;
  background: url(../img/index/sec01/twitter/bg_ptn.jpg);
  background-size: cover;
  padding-bottom: 2rem;
}

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

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

.swiper-container {
  width: 100%;
  /*height: 425px;*/
  /*min-height: 40rem;*/
  padding-bottom: 1rem;
}

.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/sec01/news/bg_ptn.png) repeat-x center top;
  background-size: 4rem;
  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: 13px;
  font-weight: bold;
  line-height: 1.5;
}
.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-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;
}

.swiper-button-next,
.swiper-button-prev {
    width: 3.2rem;
    height: 4rem;
    -moz-background-size: 2.4rem auto;
    -webkit-background-size: 2.4rem auto;
    background-size: 2.4rem auto;
}

.js-news-video-modal a::before,
.js-modal-movie a::before{
  content: '';
  display: block;
  width: 50px;
  height: 51px;
  background-image: url(../../../files/img/common/icon/play.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}


.footer-txt-link{
	position: relative;
}
.footer-txt-link a{
	display: block;
	width: 100%;
	position: absolute;
	left: 0;
	top: 8px;
	text-align: center;
}
.footer-txt-link a::before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 13px;
  height: 13px;
  background-position: 50% 50%;
  background-image: url(../img/index/footer/footer_softwear_ico.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.footer-txt-link a span{
	font-size: 14px;
	font-weight: bold;
	display: inline-block;
	vertical-align: middle;
}

/* ----------------------------
   eshop バナー
---------------------------- */
.bnr-eshop-sale{
  width: 100%;
  background: url(../img/index/bnr_eshop_bg.png);
  -webkit-background-size: 20px;
          background-size: 20px;
  position: relative;
  z-index: 10;
}
.bnr-eshop-sale::before{
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #FFF;
  left: 0;
  bottom: -2px;
  position: absolute;
}
.bnr-eshop-sale a,
.bnr-eshop-sale span{
  display: block;
  max-width: 375px;
  margin: 0 auto;
}
.bnr-eshop-sale a img,
.bnr-eshop-sale span img{
  max-width: 375px;
  width: 100%;
  height: auto;
}