.fit {width:100%;height:100%;}
.fitW {width:100%;}
.fitH {height:100%;}
.sp {
	display:none;
}
.pc {
	display:block;
}
body {
	width:100%;
	height:100%;
	background:#FFF;
}
#wrapper {
	width: 100%;
	position: relative;
	height:auto !important; /*IE6対策*/
	height: 100%; /*IE6対策*/
	min-height: 100%;
	margin:0 auto;
	font-family: 'M PLUS 1p', sans-serif;
	font-size:24px;
	font-weight: 600;
	line-height:1.7em;
}
#contents-wrapper {
	padding-bottom:260px;
}
/*------------------------------------------------------------------------------
								MAIN AREA
------------------------------------------------------------------------------*/
.main-area {
	position: relative;
	width: 100%;
	padding:0;
	height: 100vh;
	min-height: 50vw;
	max-height: 64vw;
	box-sizing: border-box;
	overflow: hidden;
}
.main-area .obi {
	width: 82.25%;
	height: 150%;
	position: absolute;
	top: -25%;
	left: 8.791666666666667vw;
	transform: rotate(-15deg);
}
.main-area .obi li {
	width: 16.66666666666666%;
	height: 100%;
	float: left;
	position: relative;
}
.main-area .obi li span {
	position: absolute;
	width: 100%;
	height: 100%;
}
.main-area .obi li span.top {
	transform-origin: top left;
}
.main-area .obi li span.bottom {
	transform-origin: bottom left;
}
.main-area .obi li.obi1 span {
	background: #f53934;
}
.main-area .obi li.obi2 span {
	background: #4f80ff;
}
.main-area .obi li.obi3 span {
	background: #40b573;
}
.main-area .obi li.obi4 span {
	background: #8e438f;
}
.main-area .obi li.obi5 span {
	background: #ffe542;
}
.main-area .obi li.obi6 span {
	background: #f6a4c4;
}
.main-area .main-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: url("../../img/top/main-bg-pc.jpg") no-repeat center center / cover;
}
.main-area .photo {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	overflow: hidden;
}
.main-area .photo li {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	text-indent: -99999px;
}
.main-area .photo li.photo1 {background: url("../../img/top/main-photo1-pc.png") no-repeat center center / cover;}
.main-area .photo li.photo2 {background: url("../../img/top/main-photo2-pc.png") no-repeat center center / cover;}
.main-area .photo li.photo3 {background: url("../../img/top/main-photo3-pc.png") no-repeat center center / cover;}
.main-area .photo li.photo4 {background: url("../../img/top/main-photo4-pc.png") no-repeat center center / cover;}
.main-area .photo li.photo5 {background: url("../../img/top/main-photo5-pc.png") no-repeat center center / cover;}
.main-area .photo li.photo6 {background: url("../../img/top/main-photo6-pc.png") no-repeat center center / cover;}
.main-area .logo {
	position: absolute;
	width: 45.8333333333333vw;
	height: 18.6vw;
	top: 80%;
	left: 50%;
	background: url("../../img/top/main-logo2.png") no-repeat center center / contain;
	text-indent: -99999px;
	margin-top: -20.7vw;
	margin-left: -0.7vw;
}
.main-area .subtitle {
	position: absolute;
	width: 33.333333333333333vw;
	height: 6.25vw;
	top: 80%;
	left: 50%;
	background: url("../../img/top/main-subtitle2.png") no-repeat center center / contain;
	text-indent: -99999px;
	margin-top: -3.5vw;
	margin-left: 4.45vw;
}
.main-area .copy1 {
	position: absolute;
	width: 64.166666666666667vw;
	height: 5.833333333333333vw;
	bottom: 1vw;
	left: 50%;
	background: url("../../img/top/main-copy1-pc.png") no-repeat center center / contain;
	text-indent: -99999px;
	margin-left: -32.083333333333335vw;
}
.main-area .copy2 {
	position: absolute;
	width: 6.25vw;
	height: 20.833333333333333vw;
	top: 9vw;
	left: 1vw;
	background: url("../../img/top/main-copy2-pc.png") no-repeat center center / contain;
	text-indent: -99999px;
}
.main-area .day {
	position: absolute;
	width: 13.75vw;
	height: 6.666666666666667vw;
	top: 1vw;
	left: 1vw;
	background: url("../../img/top/main-day.png") no-repeat center center / contain;
	text-indent: -99999px;
}
/*------------------------------------------------------------------------------
								ANIMATION
------------------------------------------------------------------------------*/
.obiOut {
	transform: scale(1.0,0.0);
}
.obiIn {
	-webkit-transition: all 0.8s cubic-bezier(0.76, 0, 0.24, 1);
	transition:         all 0.8s cubic-bezier(0.76, 0, 0.24, 1);
	transform: scale(1.0,1.0);
}
.photoOut {
	transform: translate(18vw, 63vw) rotate(0deg) scale(1.0);
}
.photoIn {
	-webkit-transition: all 0.8s cubic-bezier(0.76, 0, 0.24, 1);
	transition:         all 0.8s cubic-bezier(0.76, 0, 0.24, 1);
	transform: translate(0px, 0px) rotate(0deg) scale(1.0);
}
.mainBgAlphaOut {
	opacity: 0.0;
}
.mainBgAlphaIn {
	-webkit-transition: all 2.0s cubic-bezier(0.5, 1, 0.89, 1);
	transition:         all 2.0s cubic-bezier(0.5, 1, 0.89, 1);
	opacity: 1.0;
}
.scaleUpLogoOut {
	transform: scale(0.0,0.0);
	opacity: 1.0;
}
.scaleUpLogoIn {
	-webkit-transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition:         all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
	transform: scale(1.0,1.0);
	opacity: 1.0;
}

.fromBottomOut {
	transform: translate(0,15px);
	opacity: 0.0;
}
.fromBottomIn {
	-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	transform: translate(0,0);
	opacity: 1.0;
}
.scaleUpOut1 {
	transform: translate(0px, 0px) rotate(0deg) scale(0.75);
	opacity: 0.0;
}
.scaleUpIn1 {
	-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);
	transform: translate(0px, 0px) rotate(0deg) scale(1.0);
	opacity: 1.0;
}
.scaleUpOut {
	transform: translate(0px, 0px) rotate(0deg) scale(0.4);
	opacity: 0.0;
}
.scaleUpIn {
	-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);
	transform: translate(0px, 0px) rotate(0deg) scale(1.0);
	opacity: 1.0;
}
.fromDownOut {
	transform: translate(0px, 50px) rotate(0deg) scale(1.0);
	opacity: 0.0;
}
.fromDownIn {
	-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);
	transform: translate(0px, 0px) rotate(0deg) scale(1.0);
	opacity: 1.0;
}
.alphaOut {
	opacity: 0.0;
}
.alphaIn {
	-webkit-transition: all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	opacity: 1.0;
}
.fix {
	-webkit-transition: none;
	transition:         none;
	opacity: 1.0;
}
/*------------------------------------------------------------------------------
								MIDDLE
------------------------------------------------------------------------------*/
#middle-area {
	width: 100%;
}
#middle-area .billing {
	background: url("../../img/middle/middle-billing.gif") no-repeat center center / contain;
	padding-top: 240px;
}
#middle-area .billing h3,#middle-area .billing p {
	text-indent: -99999px;
	line-height: 0px;
}
#middle-area .sns-link {
	width: 100%;
	position: relative;
	max-width: 1000px;
	box-sizing: border-box;
	padding: 0 20px;
	margin: 0 auto;
	font-size:0;
	line-height: 0px;
}
#middle-area .sns-link li {
	width: 32%;
	margin: 0 0.6666%;
	display: inline-block;
	font-size:0;
}
#middle-area .sns-share {
	width: 100%;
	position: relative;
	max-width: 240px;
	margin: 0 auto;
	font-size:0;
}
#middle-area .sns-share li {
	width: 26.666%;
	margin: 0 3.333%;
	display: inline-block;
	font-size:0;
}
#middle-area .series-btn {
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
}
#middle-area .bnr-area {
	width: 100%;
	position: relative;
	margin: 0 auto;
	font-size:0;
}
#middle-area .bnr-area li {
	display: inline-block;
	font-size:0;
}
#middle-area .bnr-area.bnr2 {
	max-width: 600px;
}
#middle-area .bnr-area.bnr3 {
	max-width: 900px;
}
#middle-area .bnr-area.bnr4 {
	max-width: 1200px;
}
#middle-area .bnr-area.bnr2 li {
	width: 48%;
	margin: 0 1%;
}
#middle-area .bnr-area.bnr3 li {
	width: 32.333%;
	margin: 0 0.5%;
}
#middle-area .bnr-area.bnr4 li {
	width: 24%;
	margin: 0 0.5%;
}
/*------------------------------------------------------------------------------
								TRAILER
------------------------------------------------------------------------------*/
#movie-area {
	background:#1e1e1e;
}
#movie-area h2 {
	background: url("../../img/title/trailer.png") no-repeat center center / contain;
	text-indent: -99999px;
	font-size: 0px;
	line-height: 0px;
	padding-top: 90px;
}
#trailer-area {
	width:100%;
	margin:0px auto 0px;
}
#trailer-area .prArea {  
	margin: 0 auto 0 auto;
	color: #000;
	font-size: 16px;
	line-height: 1.6em;
	width:100%;
	box-sizing: border-box;
	max-width: 1320px;
	padding:0 40px;
}
#trailer-area .video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin:0;
	background:#000000;
}
#trailer-area .video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#trailer-area  ul {
	margin: 0.8% auto 0 auto;
	position:relative;
	width: 100%;
	overflow: hidden;
}
#trailer-area ul li {
	margin:0 0.5% 0.5% 0;
	float:left;
	height:50px;
	padding:0;
	position: relative;
	width: 49.5%;
}
#trailer-area ul li:nth-child(2n) {
	margin:0 0% 0.5% 0;
}
#trailer-area  ul li div {
	background:#c40018;
	width: 100%;
	height: 100%;
}
#trailer-area  ul li div a {
	width:100%;
	height:100%;
	position:absolute;
	font-size:17px;
	text-align:center;
	color: #FFFFFF;
	font-weight:700;
	box-sizing:border-box;
    line-height: 50px;
	text-decoration: none;
}
/*------------------------------------------------------------------------------
								INTRO
------------------------------------------------------------------------------*/
#intro-area h2 {
	background: url("../../img/title/intro.png") no-repeat center center / contain;
	text-indent: -99999px;
	font-size: 0px;
	line-height: 0px;
	padding-top: 90px;
}
#intro-area .intro {
	width: 100%;
	max-width: 1280px;
	padding: 0 40px;
	box-sizing: border-box;
	margin: 0 auto;
}
#intro-area .intro-box {
	width: 100%;
}
#intro-area .intro-main {
	position: relative;
	padding-top: 121.7%;
}
#intro-area .intro-atari {
	position: absolute;
	width: 100%;
	padding-top: 121.7%;
	top: 0px;
	left: 0px;
	background: url("../../img/intro/atari-intro.jpg") no-repeat center top / cover;
	opacity: 0.5;
}
#intro-area .intro-main .hikari {
	width: 71.7%;
	padding-top: 72.5%;
	height: 0px;
	position: absolute;
	top: 17%;
	left: 14.3%;
	background: url("../../img/intro/intro-hikari.gif") no-repeat center top / cover;
}
#intro-area .intro-main .bg1 {
	width: 100%;
	padding-top: 36.3%;
	height: 0px;
	position: absolute;
	top: 0px;
	left: 0px;
	background: url("../../img/intro/intro-bg1b.png") no-repeat center top / cover;
}
#intro-area .intro-main .bg2 {
	width: 100%;
	padding-top: 44.3%;
	height: 0px;
	position: absolute;
	top: 28.5%;
	left: 0px;
	background: url("../../img/intro/intro-bg2.png") no-repeat center top / cover;
}
#intro-area .intro-main .bg3 {
	width: 100%;
	padding-top: 34.8%;
	height: 0px;
	position: absolute;
	top: 62.6%;
	left: 0px;
	background: url("../../img/intro/intro-bg3b.png") no-repeat center top / cover;
}
#intro-area .intro-main .name1 {
	width: 11.7%;
	padding-top: 13.3%;
	height: 0px;
	position: absolute;
	top: 14.65%;
	left: 11.65%;
	background: url("../../img/intro/intro-name1.gif") no-repeat center top / cover;
	text-indent: -99999px;
}
#intro-area .intro-main .name2 {
	width: 11.7%;
	padding-top: 13.3%;
	height: 0px;
	position: absolute;
	top: 6.05%;
	right: 4.6%;
	background: url("../../img/intro/intro-name2.gif") no-repeat center top / cover;
	text-indent: -99999px;
}
#intro-area .intro-main .name3 {
	width: 15%;
	padding-top: 13.3%;
	height: 0px;
	position: absolute;
	top: 54.7%;
	left: 3%;
	background: url("../../img/intro/intro-name3.gif") no-repeat center top / cover;
	text-indent: -99999px;
}
#intro-area .intro-main .name4 {
	width: 8.3%;
	padding-top: 13.3%;
	height: 0px;
	position: absolute;
	top: 49.3%;
	right: 2.55%;
	background: url("../../img/intro/intro-name4.gif") no-repeat center top / cover;
	text-indent: -99999px;
}
#intro-area .intro-main .name5 {
	width: 16.7%;
	padding-top: 13.3%;
	height: 0px;
	position: absolute;
	top: 76.55%;
	left: 32.85%;
	background: url("../../img/intro/intro-name5.gif") no-repeat center top / cover;
	text-indent: -99999px;
}
#intro-area .intro-main .name6 {
	width: 11.7%;
	padding-top: 13.3%;
	height: 0px;
	position: absolute;
	top: 78.5%;
	right: 8.35%;
	background: url("../../img/intro/intro-name6.gif") no-repeat center top / cover;
	text-indent: -99999px;
}
#intro-area .intro-main .copy1 {
	width: 75.8%;
	padding-top: 20%;
	height: 0px;
	position: absolute;
	top: 25.25%;
	left: 15%;
	background: url("../../img/intro/intro-copy1.png") no-repeat center top / cover;
	text-indent: -99999px;
}
#intro-area .intro-main .copy2 {
	width: 26.7%;
	padding-top: 14.2%;
	height: 0px;
	position: absolute;
	top: 41.2%;
	left: 36.7%;
	background: url("../../img/intro/intro-copy2.png") no-repeat center top / cover;
	text-indent: -99999px;
}
#intro-area .intro-main .copy3 {
	width: 37.5%;
	padding-top: 20.8%;
	height: 0px;
	position: absolute;
	top: 53.35%;
	left: 31.45%;
	background: url("../../img/intro/intro-copy3.png") no-repeat center top / cover;
	text-indent: -99999px;
}
#intro-area .intro-main .copy4 {
	width: 91.7%;
	padding-top: 16.7%;
	height: 0px;
	position: absolute;
	top: 85.9%;
	left: 4.4%;
	background: url("../../img/intro/intro-copy4.png") no-repeat center top / cover;
	text-indent: -99999px;
}
#intro-area .intro-main .fuki {
	width: 8.3%;
	padding-top: 5.8%;
	height: 0px;
	position: absolute;
	top: 45.2%;
	left: 27.2%;
	background: url("../../img/intro/intro-fuki.gif") no-repeat center top / cover;
	text-indent: -99999px;
}
#intro-area .intro-foot {
	position: relative;
	padding-top: 6.7%;
	background: url("../../img/intro/intro-bg4.jpg") no-repeat center top / cover;
}
#intro-area p {
	text-align: justify;
}
/*------------------------------------------------------------------------------
								SP
------------------------------------------------------------------------------*/
@media screen and (max-width: 1000px) {
.sp {
	display:block;
}
.pc {
	display:none;
}
body {
	width:100%;
	height:auto;
	background:#FFF;
}
#wrapper {
	width: 100%;
	position: relative;
	margin:0 auto;
	min-width:740px;
	max-width:1000px;
	font-family: 'M PLUS 1p', sans-serif;
	font-size:3.2vw;
	line-height:1.7em;
	overflow:auto;
}
#contents-wrapper {
	padding-bottom:34vw;
}
/*------------------------------------------------------------------------------
								MAIN AREA
------------------------------------------------------------------------------*/
.main-area {
	height: 100vh;
	min-height: 160vw;
	max-height: 169.2vw;
}
.main-area .obi {
	width: 133.5%;
	height: 150%;
	position: absolute;
	top: -25%;
	left: -11.5vw;
	transform: rotate(-45deg);
}
.main-area .obi li {
	width: 16.66666666666666%;
	height: 100%;
	float: left;
	position: relative;
}

.main-area .main-bg {
	background: url("../../img/top/main-bg-sp.jpg") no-repeat center center / cover;
}
.main-area .photo li.photo1 {background: url("../../img/top/main-photo1-sp.png") no-repeat center center / cover;}
.main-area .photo li.photo2 {background: url("../../img/top/main-photo2-sp.png") no-repeat center center / cover;}
.main-area .photo li.photo3 {background: url("../../img/top/main-photo3-sp.png") no-repeat center center / cover;}
.main-area .photo li.photo4 {background: url("../../img/top/main-photo4-sp.png") no-repeat center center / cover;}
.main-area .photo li.photo5 {background: url("../../img/top/main-photo5-sp.png") no-repeat center center / cover;}
.main-area .photo li.photo6 {background: url("../../img/top/main-photo6-sp.png") no-repeat center center / cover;}
.main-area .logo {
	width: 68vw;
	height: 65vw;
	top: 50%;
	margin-top: -12.5vw;
	margin-left: -20vw;
}
.main-area .subtitle {
	position: absolute;
	width: 49vw;
	height: 10vw;
	top: 50%;
	margin-top: 31.2vw;
	margin-left: -12vw;
}
.main-area .copy1 {
	width: 96vw;
	height: 10vw;
	bottom: 1.5vw;
	background: url("../../img/top/main-copy1-sp.png") no-repeat center center / contain;
	margin-left: -48vw;
}
.main-area .copy2 {
	width: 13vw;
	height: 47vw;
	top: 4vw;
	left: 4vw;
	background: url("../../img/top/main-copy2-sp.png") no-repeat center center / contain;
}
.main-area .day {
	width: 22vw;
	height: 10vw;
	top: auto;
	bottom: 7vw;
	left: 1vw;
}
/*------------------------------------------------------------------------------
								ANIMATION
------------------------------------------------------------------------------*/
.obiOut {
	transform: scale(1.0,0.0);
}
.obiIn {
	-webkit-transition: all 1.2s cubic-bezier(0.76, 0, 0.24, 1);
	transition:         all 1.2s cubic-bezier(0.76, 0, 0.24, 1);
	transform: scale(1.0,1.0);
}
.photoOut {
	transform: translate(94vw, 94vw) rotate(0deg) scale(1.0);
}
.photoIn {
	-webkit-transition: all 0.8s cubic-bezier(0.76, 0, 0.24, 1);
	transition:         all 0.8s cubic-bezier(0.76, 0, 0.24, 1);
	transform: translate(0px, 0px) rotate(0deg) scale(1.0);
}
/*------------------------------------------------------------------------------
								MIDDLE
------------------------------------------------------------------------------*/
#middle-area .billing {
	padding-top: 26vw;
}
#middle-area .sns-link {
	box-sizing: border-box;
	padding: 0 20px;
	font-size:0;
	line-height: 0px;
}
#middle-area .sns-link li {
	width: 32.666666%;
	margin: 0 0.333333%;
}
#middle-area .sns-share {
	box-sizing: border-box;
	max-width: 30vw;
}
#middle-area .series-btn {
	max-width: 36vw;
	margin: 0 auto;
}
#middle-area .bnr-area {
	box-sizing: border-box;
	padding: 0 20px;
}
#middle-area .bnr-area.bnr2 {
	max-width: 80%;
}
#middle-area .bnr-area.bnr3 {
	max-width: 80%;
}
#middle-area .bnr-area.bnr4 {
	max-width: 80%;
}
#middle-area .bnr-area.bnr2 li {
	width: 48%;
	margin: 1% 1%;
}
#middle-area .bnr-area.bnr3 li {
	width: 48%;
	margin: 1% 1%;
}
#middle-area .bnr-area.bnr4 li {
	width: 48%;
	margin: 1% 1%;
}
/*------------------------------------------------------------------------------
								TRAILER
------------------------------------------------------------------------------*/
#movie-area h2 {
	padding-top: 10vw;
}
#trailer-area .prArea { 
	width:100%;
	padding:0 30px;
}
/*------------------------------------------------------------------------------
								INTRO
------------------------------------------------------------------------------*/
#intro-area h2 {
	padding-top: 10vw;
}
#intro-area .intro {
	padding: 0 0;
}
#intro-area p {
	box-sizing: border-box;
	padding: 0 30px;
}

}