@charset "utf-8";




/*
--------------------------------
	basics
--------------------------------
*/


/* ---- reset ---- */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
	margin: 0;
}

body {
	-webkit-text-size-adjust: 100%; /* for iOS, Android */
}

li {
	list-style: none;
}

a {
	-webkit-tap-highlight-color: transparent; /* for iOS, Android */
}

img {
	max-width: 100%;
	height: auto;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th {
	text-align: left;
}


/* ---- font ---- */

html {
	min-width: 1240px;
	font-size: 62.5%;
}

@font-face {
	font-family: "Yu Gothic";
	font-weight: normal;
	src: local("Yu Gothic Medium");
}

@font-face {
	font-family: "Yu Gothic";
	font-weight: bold;
	src: local("Yu Gothic Bold");
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic", "Hiragino kaku Gothic ProN", Meiryo, sans-serif;
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 1;
}

button, input, select, textarea {
	font-family : inherit;
	font-size : 100%;
}


/* ---- basics ---- */

body {
	position: relative;
	min-width: 1240px;
	padding-bottom: 300px;
	background-color: #1c3830;
	background-image: url(../img/bg.jpg);
	background-repeat: repeat-y;
	background-size: 100%;
	color: #a4b4ad;
}

a { text-decoration: none; color: #ffa000; }
a:link { color: #ffac00; }
a:visited { color: #ffac00; }
a:hover { text-decoration: underline; color: #ffac00; }
a:active { text-decoration: underline; color: #ffac00; }

*, *::before, *::after {
	box-sizing: border-box;
}

em, strong {
	font-weight: bold;
	font-style: normal;
}

.clearfix::before, .clearfix::after { content: ""; display: table; }
.clearfix::after { clear: both; }




/*
--------------------------------
	header
--------------------------------
*/


.header {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	min-width: 1240px;
}

.header h1 {
	position: absolute;
	left: 20px;
	top: 30px;
}

.header .site-id {
	position: absolute;
	right: 25px;
	top: 35px;
	z-index: 2;
	width: 308px;
}

.header .release-date {
	position: absolute;
	right: 50px;
	top: 200px;
}




/*
--------------------------------
	body
--------------------------------
*/


/* ---- container ---- */

.body {
	position: relative;
	z-index: 1;
	width: 1180px;
	min-height: 780px;
	margin: 0 auto;
	background-repeat: no-repeat;
}


/* ---- fade-in ---- */

.fade {
	position: relative;
}

.fade > p,
.fade > a {
	position: absolute;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 1.5s;
	transition-timing-function: ease-out;
}

.fade.show-1 > .fade-1,
.fade.show-2 > .fade-2 {
	opacity: 1;
}


/* ---- lightbox ---- */

#modalCover {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(18, 38, 12, .95);
	z-index: 10;
}

#modalContainer {
	display: table;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 11;
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow: visible;
	text-align: center;
	transition: opacity .6s;
}

#modalContents {
	display: table-cell;
	width: 100%;
	height: 100%;
	padding: 70px 20px;
	text-align: center;
	vertical-align: middle;
}

#modalImage {
	display: inline-block;
	position: relative;
}

#modalImage > img {
	max-width: 100%;
	height: auto;
}

#modalPrev {
	display: none;
	position: absolute;
	top: 50%;
	left: 15px;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	background-image: url(../img/btn_prev.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
	opacity: .5;
	transition: opacity .15s;
}

#modalNext {
	display: none;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	background-image: url(../img/btn_next.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
	opacity: .5;
	transition: opacity .15s;
}

#modalClose {
	display: block;
	position: absolute;
	top: -44px;
	right: -44px;
	width: 40px;
	height: 40px;
	background-image: url(../img/btn_zoomout.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
	opacity: .5;
	transition: opacity .15s;
}

#modalPrev:hover,
#modalPrev:active,
#modalNext:hover,
#modalNext:active,
#modalClose:hover,
#modalClose:active {
	opacity: 1;
}

#modalLoader,
#modalLoader:before,
#modalLoader:after {
	width: 2.5em;
	height: 2.5em;
	border-radius: 50%;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: loader 1.8s infinite ease-in-out;
	animation: loader 1.8s infinite ease-in-out;
}

#modalLoader {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	color: #33412d;
	font-size: 6px;
	text-indent: -9999px;
	-webkit-transform: translate(-50%, -50%, 0);
	transform: translate(-50%, -50%, 0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

#modalLoader:before {
	left: -3.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

#modalLoader:after {
	left: 3.5em;
}

#modalLoader:before,
#modalLoader:after {
	content: "";
	position: absolute;
	top: 0;
}

@-webkit-keyframes loader {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
}

@keyframes loader {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
}




/*
--------------------------------
	footer
--------------------------------
*/


/* ---- container ---- */

.footer {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	width: 100%;
	height: 322px;
	margin-top: -22px;
}

.footer .container {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 100%;
	height: 322px;
	padding-top: 45px;
	background-image: url(../img/bg_footer.png);
	background-repeat: repeat-x;
}

.footer .inner {
	position: relative;
	width: 1180px;
	margin: 0 auto;
}

.footer.fixed {
	position: fixed;
	bottom: -210px;
	margin-top: 0;
}


/* ---- global navigation ---- */

.footer nav {
	height: 77px;
	background-image: url(../img/nav/line.png);
	background-repeat: repeat-x;
	background-position: 0 100%;
}

.footer nav ul {
	margin-left: 10px;
}

.footer nav ul::after {
	content: "";
	display: table;
	clear: both;
}

.footer nav li {
	position: relative;
	float: left;
	margin-right: 48px;
}

.footer nav li a,
.footer nav li span {
	display: block;
	height: 50px;
	overflow: hidden;
}

.footer nav li a img {
	margin-top: 0;
}

.footer nav li a:hover img,
.footer nav li a.current img {
	margin-top: -50px;
}

.footer nav li span img {
	margin-top: -100px;
}

.footer nav li:nth-child(1) a { width: 86px; }

.footer nav li:nth-child(2) a { width: 167px; }

.footer nav li:nth-child(3) a { width: 150px; }

.footer nav li:nth-child(4) a { width: 143px; }

.footer nav li:nth-child(5) a,
.footer nav li:nth-child(5) span { width: 148px; }

.footer nav li:nth-child(6) { margin-right: 0; }
.footer nav li:nth-child(6) a { width: 226px; }

.footer nav li.new::before {
	content: "";
	display: block;
	position: absolute;
	left: -30px;
	top: -32px;
	width: 61px;
	height: 56px;
	background-image: url(../img/new.png);
	background-repeat: no-repeat;
}


/* ---- spec ---- */

.footer .spec {
	height: 56px;
	margin-top: 20px;
	padding: 2px 50px 0 0;
	background-image: url(../img/cero.png);
	background-repeat: no-repeat;
	background-position: 100% 0;
	font-size: 1.4rem;
	line-height: 1.7;
}


/* ---- links ---- */

.footer .links {
	height: 50px;
	margin-top: 18px;
	line-height: 0;
	overflow: hidden;
}

.footer .banners {
	float: left;
	width: 600px;
	padding-top: 1px;
	overflow: hidden;
}

.footer .banners li {
	float: left;
	width: 181px;
	margin-right: 19px;
}

.footer .share {
	position: relative;
	float: left;
	width: 152px;
	height: 50px;
	background-image: url(../img/bg_share.png);
	background-repeat: no-repeat;
}

.footer .share li {
	position: absolute;
	top: 8px;
	width: 34px;
	height: 34px;
}

.footer .share li:first-child { left: 62px; }
.footer .share li:last-child { left: 106px; }


/* ---- copyright ---- */

.footer .copyright {
	margin-top: 15px;
	color: #606c66;
	font-size: 1.1rem;
}

.footer .hpgames {
	position: absolute;
	right: 0;
	bottom: -9px;
	width: 146px;
}

.footer .marv {
	position: absolute;
	right: 170px;
	bottom: 0;
	width: 120px;
}


/* ---- pagetop button ---- */

.pagetop {
	display: block;
	position: absolute;
	right: 30px;
	top: -28px;
	z-index: 1;
	width: 70px;
	height: 60px;
	transition: top .15s;
}

.pagetop:hover {
	top: -36px;
}




/*
--------------------------------
	top page
--------------------------------
*/


/* ---- body ---- */

.toppage .body {
	width: auto;
	height: 780px;
	background-image: url(../../img/bg_5.jpg);
	background-position: 50% 50%;
	background-size: cover;
}

.toppage .body .switch {
	position: absolute;
	left: 30px;
	top: 30px;
	z-index: 1;
	width: 100px;
}

.toppage .body .text-1 {
	position: absolute;
	right: 5%;
	top: 100px;
	z-index: 1;
	width: 180px;
}

.toppage .body .inner {
	position: absolute;
	left: 25%;
	top: 0;
	z-index: 1;
	width: 570px;
	height: 780px;
	transform: translateX(-50%);
}

.toppage .body h1 {
	position: absolute;
	left: 0;
	top: 92px;
	width: 570px;
}

.toppage .body .text-2 {
	position: absolute;
	left: 0;
	top: 281px;
	width: 570px;
	text-align: center;
}

.toppage .body .onsale {
	position: absolute;
	left: -15px;
	top: 374px;
	width: 288px;
	height: 62px;
	overflow: hidden;
}
.toppage .body .bnr {
    position: absolute;
    left: 11px;
    top: 446px;
    width: 535px;
    height: 110px;
    overflow: hidden;    
}

.toppage .body .rtcp {
	position: absolute;
	left: 290px;
	top: 378px;
	width: 288px;
	height: 62px;
	overflow: hidden;
}

.toppage .body .rtcp:hover img{
opacity: 0.7;
}

.toppage .body .onsale:hover img {
	margin-top: -62px;
}


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

.toppage .news {
	position: absolute;
	left: 85px;
	bottom: 0;
	width: 400px;
	height: 212px;
	background-image: url(../../img/bg_news.png);
	background-repeat: no-repeat;
}

.toppage .news .prev {
	position: absolute;
	right: 90px;
	top: 35px;
	width: 37px;
	height: 45px;
	background-image: url(../../img/btn_news_up.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

.toppage .news .next {
	position: absolute;
	right: 40px;
	top: 35px;
	width: 37px;
	height: 45px;
	background-image: url(../../img/btn_news_down.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

.toppage .news .prev:hover,
.toppage .news .next:hover {
	background-position: 0 -50px;
}

.toppage .news .prev.disabled,
.toppage .news .next.disabled {
	background-position: 0 -100px;
	cursor: default;
}

.toppage .news .prev span,
.toppage .news .next span {
	display: none;
}

.toppage .news ul {
	position: absolute;
	left: 50px;
	top: 98px;
	width: 300px;
	height: 114px;
	overflow: hidden;
}

.toppage .news li {
	display: none;
	font-size: 1.4rem;
	line-height: 1.8;
	transform: translateZ(0);
}

.toppage .news li:first-child {
	display: block;
}

.toppage .news li .date {
	font-weight: bold;
}


/* ---- share buttons ---- */

.toppage .body .share {
	position: absolute;
	right: 30px;
	top: 30px;
	z-index: 1;
	width: 110px;
	height: 48px;
	overflow: hidden;
}

.toppage .body .share li {
	width: 48px;
	height: 48px;
}

.toppage .body .share li:first-child {
	float: left;
}

.toppage .body .share li:last-child {
	float: right;
}


/* ---- main visual x-fader ---- */

.yumi {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	width: 100%;
	height: 780px;
	background-image: url(../../img/bg_2.jpg);
	background-position: 50% 50%;
	background-size: cover;
	opacity: 0;
	/*transition: opacity 2s ease-in-out;*/
}

.yumi.show {
	opacity: 1;
}

.asuka {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	width: 100%;
	height: 780px;
	background-image: url(../../img/bg_1.jpg);
	background-position: 50% 50%;
	background-size: cover;
	opacity: 0;
	/*transition: opacity 2s ease-in-out;*/
}

.asuka.show {
	opacity: 1;
}


.murasaki {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	width: 100%;
	height: 780px;
	background-image: url(../../img/bg_3.jpg);
	background-position: 50% 50%;
	background-size: cover;
	opacity: 0;
	/*transition: opacity 2s ease-in-out;*/
}

.murasaki.show {
	opacity: 1;
}

.ryona {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	width: 100%;
	height: 780px;
	background-image: url(../../img/bg_4.jpg);
	background-position: 50% 50%;
	background-size: cover;
	opacity: 0;
	/*transition: opacity 2s ease-in-out;*/
}

.ryona.show {
	opacity: 1;
}




/*
--------------------------------
	story
--------------------------------
*/


/* ---- container ---- */

.story .body {
	height: 4200px;
	padding-top: 170px;
}


/* ---- body ---- */

.story .fade:nth-child(1) {
	height: 560px;
}

.story .fade:nth-child(2) {
	height: 620px;
}

.story .fade:nth-child(3) {
	height: 678px;
	margin-top: 4px;
}

.story .fade:nth-child(4) {
	height: 678px;
	margin-top: 4px;
}


.story .fade:nth-child(5) {
	height: 678px;
	margin-top: 4px;
}

.story .fade:nth-child(6) {
	height: 678px;
	margin-top: 40px;
}
.story .fade:nth-child(4) .img-0{
	
	left:-85px;
}
.story .fade:nth-child(5) .img-0{
	
	left:80px;
}

.story .fade:nth-child(6) .img-0{

	left:-195px;
}
.story .txt-0 { left: 96px; top: 33px; transition-delay: 1.8s; }
.story .txt-1 { left: 153px; top: 75px; transition-delay: 1s; }
.story .txt-2 { left: 125px; top: 195px; transition-delay: 1.15s; }
.story .txt-3 { left: 198px; top: 308px; transition-delay: 1.3s; }
.story .txt-4 { left: 125px; top: 466px; transition-delay: 1.45s; }
.story .img-1 { left: 704px; top: 8px; transition-delay: 2.4s; }
.story .img-2 { left: 538px; top: 171px; transition-delay: 2.7s; }
.story .img-3 { left: 688px; top: 348px; transition-delay: 3s; }

.story .txt-5 { left: 338px; top: 5px; transition-delay: 1s; }
.story .txt-6 { left: 384px; top: 212px; transition-delay: 1.15s; }
.story .txt-7 { left: 438px; top: 355px; transition-delay: 1.3s; }
.story .img-0 { left: 0; top: 0; transition-delay: 0; }
.story .img-4 { left: 776px; top: 102px; transition-delay: 0; }
.story .img-5 { left: 798px; top: 308px; transition-delay: .3s; }

.story .txt-8 { left: 288px; top: 0; transition-delay: 1s; }
.story .txt-9 { left: 462px; top: 238px; transition-delay: 1.15s; }
.story .txt-10 { left: 438px; top: 380px; transition-delay: 1.3s; }
.story .img-8 { left: 0; top: 0; transition-delay: 0; }
.story .img-6 { left: 48px; top: 146px; transition-delay: 0; }
.story .img-7 { left: 68px; top: 348px; transition-delay: .3s; }

.story .txt-11 { left: 338px; top: 0; transition-delay: 1s; }
.story .txt-12 { left: 484px; top: 219px; transition-delay: 1.15s; }
.story .txt-13 { left: 504px; top: 342px; transition-delay: 1.3s; }
.story .img-8 { left: 0; top: 0; transition-delay: 0; }
.story .img-6 { left: 48px; top: 146px; transition-delay: 0; }
.story .img-7 { left: 68px; top: 348px; transition-delay: .3s; }


.story .txt-14 { left: 338px; top: 0; transition-delay: 1s; }
.story .txt-15 { left: 454px; top: 239px; transition-delay: 1.15s; }
.story .txt-16 { left: 454px; top: 379px; transition-delay: 1.3s; }



.story .btn-1 {
	left: 720px;
	bottom: 0;
	width: 346px;
	height: 79px;
	overflow: hidden;
	transition-delay: 1s;
}
.story .btn-1:hover img,.story .btn-2:hover img,.story .btn-3:hover img {
	margin-top: -80px;
}
.story .btn-2 {
	position: absolute;
	left: 720px;
	bottom: 25px;
	width: 346px;
	height: 79px;
	overflow: hidden;
	transition-delay: 1s;
}

.story .btn-3 {
	position: absolute;
	left: 720px;
	bottom: 25px;
	width: 346px;
	height: 79px;
	overflow: hidden;
	transition-delay: 1s;
}



/*
--------------------------------
	system
--------------------------------
*/


/* ---- container ---- */

.system .body {
	height: 7062px;
	padding-top: 210px;
	background-image: url(../../system/img/bg.png);
	background-position: 5px 820px;
}


/* ---- page anchor ---- */

.system .page-anchor {
	position: relative;
	width: 916px;
	margin: 0 auto 41px;
	/*overflow: hidden;*/
	height: 91px;
}

.system .page-anchor li {
	float: left;
	width: 296px;
	margin-right: 14px;
}

.system .page-anchor li:last-child {
	margin-right: 0;
}

.system .page-anchor li a {
	display: block;
	height: 79px;
	overflow: hidden;
}

.system .page-anchor li a img {
	display: block;
	margin-top: 0;
}

.system .page-anchor li a:hover img {
	margin-top: -80px;
}


/* ---- body ---- */

.system .section-1 {
	height: 450px;
}

.system .section-2 {
	height: 750px;
	margin-top: 17px;
}

.system .section-3 {
	height: 435px;
	margin-top: -33px;
}

.system .section-4 {
	height: 790px;
	margin-top: 130px;
}

.system .section-5 {
	height: 820px;
	margin-top: 0;
}

.system .section-6 {
	height: 1700px;
	margin-top: 0;
}

.system .section-7 {
	height: 545px;
	margin-top: 137px;
}

.system .section-8 {
	height: 545px;
	margin-top: 112px;
}

.system .section-9 {
	height: 150px;
	margin-top: 73px;
}

.system .txt-1 { left: 65px; top: 0px; transition-delay: 0s; }
.system .txt-2 { left: 152px; top: 188px; transition-delay: 1s; }
.system .txt-3 { left: 140px; top: 328px; transition-delay: 1.2s; }
.system .img-1 { left: 656px; top: 92px; transition-delay: .5s; }

.system .txt-4 { left: 282px; top: 2px; transition-delay: 0s; }
.system .txt-5 { left: 505px; top: 148px; transition-delay: .3s; }
.system .txt-6 { left: 508px; top: 210px; transition-delay: .45s; }
.system .txt-7 { left: 548px; top: 544px; transition-delay: .6s; }
.system .txt-8 { left: 170px; top: 650px; transition-delay: .75s; }
.system .img-2 { left: 24px; top: 118px; transition-delay: 0s; }
.system .img-3 { left: 188px; top: 432px; transition-delay: .3s; }
.system .img-4 { left: 478px; top: 345px; transition-delay: .4s; }
.system .img-5 { left: 800px; top: 315px; transition-delay: .5s; }

.system .txt-9 { left: 60px; top: 58px; transition-delay: 0s; }
.system .txt-10 { left: 92px; top: 288px; transition-delay: .3s; }
.system .img-6 { left: 660px; top: 2px; transition-delay: 0s; }
.system .img-7 { left: 672px; top: 248px; transition-delay: .3s; }

.system .txt-11 { left: 265px; top: 0; transition-delay: 0s; }
.system .txt-12 { left: 380px; top: 164px; transition-delay: .3s; }
.system .txt-13 { left: 842px; top: 33px; transition-delay: 1s; }
.system .txt-14 { left: 302px; top: 305px; transition-delay: .5s; }
.system .txt-15 { left: 54px; top: 380px; transition-delay: .7s; }
.system .txt-16 { left: 558px; top: 700px; transition-delay: .8s; }
.system .img-8 { left: 52px; top: 462px; transition-delay: 0s; }
.system .img-9 { left: 582px; top: 385px; transition-delay: .2s; }

.system .txt-17 { left: 340px; top: 0; transition-delay: 0s; }
.system .txt-18 { left: 630px; top: 78px; transition-delay: .6s; }
.system .txt-19 { left: 80px; top: 376px; transition-delay: .8s; }
.system .txt-20 { left: 160px; top: 760px; transition-delay: 1s; }
.system .img-10 { left: 100px; top: 75px; transition-delay: 0s; }
.system .img-11 { left: 658px; top: 150px; transition-delay: .2s; }
.system .img-12 { left: 100px; top: 454px; transition-delay: .8s; }
.system .img-13 { left: 414px; top: 510px; transition-delay: 1s; }
.system .img-14 { left: 742px; top: 458px; transition-delay: 1.2s; }

.system .txt-21 { left: 426px; top: 0; transition-delay: 0s; }
.system .txt-22 { left: 260px; top: 60px; transition-delay: .6s; }
.system .txt-23 { left: 83px; top: 400px; transition-delay: 1s; }
.system .txt-24 { left: 606px; top: 436px; transition-delay: 1.1s; }
.system .txt-25 { left: 98px; top: 815px; transition-delay: 1.2s; }
.system .txt-26 { left: 660px; top: 834px; transition-delay: 1.3s; }
.system .txt-26-1 { left: 156px; top: 1230px; transition-delay: 1.5s; }
.system .txt-26-2 { left: 660px; top: 1224px; transition-delay: 1.7s; }
.system .txt-26-2-1 { left: 240px; top: 1754px; transition-delay: 1.7s; opacity: 1; text-align: center; font-size: 0.9em; line-height: 1.5em;}
.system .txt-26-3 { left: 334px; top: 1647px; transition-delay: 1.9s; }
.system .img-15 { left: 40px; top: 108px; transition-delay: 0s; }
.system .img-16 { left: 600px; top: 148px; transition-delay: .2s; }
.system .img-17 { left: 90px; top: 518px; transition-delay: .4s; }
.system .img-18 { left: 638px; top: 542px; transition-delay: .6s; }
.system .img-18-1 { left: 90px; top: 936px; transition-delay: .8s; }
.system .img-18-2 { left: 638px; top: 936px; transition-delay: 1.0s; }
.system .img-18-3 { left: 293px; top: 1351px; transition-delay: 1.2s; }

.system .txt-27 { left: 390px; top: 0; transition-delay: 0s; }
.system .txt-28 { left: 340px; top: 146px; transition-delay: .4s; }
.system .img-19 { left: 50px; top: 180px; transition-delay: 0s; }
.system .img-20 { left: 604px; top: 244px; transition-delay: .2s; }

.system .txt-29 { left: 334px; top: 0; transition-delay: 0s; }
.system .txt-30 { left: 60px; top: 150px; transition-delay: .4s; }
.system .txt-31 { left: 590px; top: 470px; transition-delay: .6s; }
.system .img-21 { left: 64px; top: 232px; transition-delay: 0s; }
.system .img-22 { left: 592px; top: 154px; transition-delay: .2s; }

.system .txt-32 { left: 270px; top: 102px; transition-delay: 0s; }
.system .txt-33 { left: 524px; top: 0; transition-delay: .6s; }




/*
--------------------------------
	movie
--------------------------------
*/


/* ---- container ---- */

.movie .body {
	padding: 128px 0 100px;
	background-image: url(../../movie/img/bg.png);
	background-position: 0 198px;
}


/* ---- body ---- */

.movie h2 {
	margin-top: 80px;
	text-align: center;
}

.movie .body > iframe {
	margin: 36px 0 0 174px;
}


/* ---- campaign ---- */

.movie h2 + p {
	display: none;
}

.movie .body dl.campaign-body {
	width: 780px;
	margin: 10px auto 0;
	line-height: 1.6;
}

.movie .body dl.campaign-body dt {
	padding-top: 30px;
	color: #d6d175;
	font-size: 2.4rem;
	font-weight: bold;
}

.movie .body dl.campaign-body dd {
	padding: 10px 0 0 50px;
	color: #c5d1cc;
	font-size: 2rem;
}

.movie .body .notice {
	width: 780px;
	margin: 40px auto 0;
	padding: 20px 30px;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, .2);
}

.movie .body .notice h3 {
	font-size: 2.1rem;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}

.movie .body .notice dl {
	display: none;
	padding: 10px 0;
	line-height: 1.8;
}

.movie .body .notice dl dt {
	font-size: 1.5rem;
	font-weight: bold;
}

.movie .body .notice dl dd + dt {
	padding-top: 20px;
}

.movie .body .notice dl dd {
	padding-top: 8px;
	font-size: 1.3rem;
}

.movie .body .notice dl li {
	margin-left: 1.2em;
	text-indent: -1.2em;
}

.movie .body .notice dl li span {
	padding-right: .2em;
	color: #d6d175;
	font-family: sans-serif;
}

.movie .body .line {
	padding-top: 60px;
	text-align: center;
}




/*
--------------------------------
	product
--------------------------------
*/


/* ---- container ---- */

.product .body {
	padding: 260px 0 80px;
}


/* ---- page anchor ---- */

.product .page-anchor {
	position: relative;
	width: 1180px;
	margin: 0 auto -15px;
	height: 80px;
	/*overflow: hidden;*/
}

.product .page-anchor li {
	float: left;
	width: 366px;
	margin-right: 14px;
}

.product .page-anchor li:last-child {
	margin-right: 0;
}

.product .page-anchor li a {
	display: block;
	height: 80px;
	overflow: hidden;
}

.product .page-anchor li a img {
	display: block;
	margin-top: 0;
}

.product .page-anchor li a:hover img {
	margin-top: -82px;
}


/* ---- body ---- */

.product .body .inner {
	padding: 140px 0 160px;
	background-image: url(../../product/img/bg_1.png), url(../../product/img/bg_2.png);
	background-repeat: no-repeat, no-repeat;
	background-position: 0 0, 0 100%;
}

.product .body .inner table {
	width: 720px;
	margin-left: 230px;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.4;
}

.product .body .inner th {
	width: 200px;
	padding-top: 16px;
}

.product .body .inner td {
	width: 520px;
	padding-top: 16px;
}


/* ---- dlc ---- */

.product .body h2 {
	margin-top: 20px;
	text-align: center;
}

.product .body h3 {
	margin-top: 60px;
	text-align: center;
}

.product .dlc-item {
	position: relative;
	width: 1000px;
	min-height: 480px;
	margin: 30px auto 0;
	padding: 40px 40px 108px 60px;
	background-image: url(../../product/img/bg_3.png);
	background-repeat: no-repeat;
}

.product .dlc-item.new::before {
	    content: "";
    display: block;
    position: absolute;
    left: -30px;
    top: -32px;
    width: 61px;
    height: 56px;
    background-image: url(../img/new.png);
    background-repeat: no-repeat;
}

.product .dlc-item h4 {
	color: #e4a0a0;
	font-size: 3.6rem;
	font-weight: bold;
}

.product .dlc-item table {
	margin: 20px 0 0 460px;
	font-size: 1.6rem;
	line-height: 1.6;
}

.product .dlc-item table th {
	padding: 10px 30px 0 0;
	color: #d6d175;
	white-space: nowrap;
}

.product .dlc-item table td {
	padding: 10px 0 0 0;
	color: #c5d1cc;
}

.product .dlc-item table td div {
	margin: 5px 0;
	padding: 8px;
	border: 1px solid #496d61;
	border-radius: 4px;
	background-color: rgba(255, 255, 255, .05);
	font-size: 1.3rem;
	line-height: 1.4;
}

.product .dlc-item table td div span {
	display: inline-block;
}

.product .dlc-item .img {
	position: absolute;
	left: 52px;
	top: 128px;
	width: 400px;
}

.product .dlc-item ul {
	position: absolute;
	left: 40px;
	bottom: 0;
	width: 920px;
	height: 87px;
	padding: 10px 0 0 10px;
	background-image: url(../../product/img/bg_4.png);
	background-repeat: no-repeat;
	overflow: hidden;
}

.product .dlc-item ul li {
	position: relative;
	float: left;
	width: 120px;
	height: 67px;
	margin-right: 10px;
	overflow: hidden;
	cursor: pointer;
}

.product .dlc-item ul li.current::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 120px;
	height: 67px;
	border: 3px solid #e6eeea;
}

.product .body .line {
	margin-top: 60px;
	text-align: center;
}

/*
--------------------------------
	special
--------------------------------
*/


/* ---- container ---- */

.special .body {
	padding: 128px 0 100px;
	background-image: url(../../special/img/bg.png);
	background-position: 0 198px;
}


/* ---- body ---- */

.special h2 {
	margin-top: 80px;
	text-align: center;
}

.special .body > iframe {
	margin: 36px 0 0 174px;
}


/* ---- campaign ---- */

.special h2 + p {
	display: none;
}

.special .body dl.campaign-body {
	width: 780px;
	margin: 10px auto 0;
	line-height: 1.6;
}

.special .body dl.campaign-body dt {
	padding-top: 30px;
	color: #d6d175;
	font-size: 2.4rem;
	font-weight: bold;
}

.special .body dl.campaign-body dd {
	padding: 10px 0 0 50px;
	color: #c5d1cc;
	font-size: 2rem;
}

.special .body .notice {
	width: 780px;
	margin: 40px auto 0;
	padding: 20px 30px;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, .2);
}

.special .body .notice h3 {
	font-size: 2.1rem;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}

.special .body .notice dl {
	display: none;
	padding: 10px 0;
	line-height: 1.8;
}

.special .body .notice dl dt {
	font-size: 1.5rem;
	font-weight: bold;
}

.special .body .notice dl dd + dt {
	padding-top: 20px;
}

.special .body .notice dl dd {
	padding-top: 8px;
	font-size: 1.3rem;
}

.special .body .notice dl li {
	margin-left: 1.2em;
	text-indent: -1.2em;
}

.special .body .notice dl li span {
	padding-right: .2em;
	color: #d6d175;
	font-family: sans-serif;
}

.special .body .line {
	padding-top: 60px;
	text-align: center;
}
.s_txt{
	font-size: 0.65em;
}


.fade .new::before {
	content: "";
	display: block;
	position: absolute;
	left: -30px;
	top: -32px;
	width: 61px;
	height: 56px;
	background-image: url(../img/new.png);
	background-repeat: no-repeat;
}

.page-anchor .new::before {
	content: "";
	display: block;
	position: absolute;
	left: -30px;
	top: -32px;
	width: 61px;
	height: 56px;
	background-image: url(../img/new.png);
	background-repeat: no-repeat;
}