/* 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;font-size: 100%;vertical-align: baseline;background: transparent}
body {overflow: hidden; cursor: default;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block}
nav ul {list-style: none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none}
a {margin: 0;padding: 0;font-size: 100%;vertical-align: baseline;background: transparent}
ins {background-color: #ff9;color: #000;text-decoration: none}
mark {background-color: #ff9;color: #000;font-style: italic;font-weight: bold}
del {text-decoration: line-through}
abbr[title], dfn[title] {border-bottom: 1px dotted;cursor: help}
table {border-collapse: collapse;border-spacing: 0}
hr {display: block;height: 1px;border: 0;border-top: 1px solid #cccccc;margin: 1em 0;padding: 0}
input, select {vertical-align: middle}
*/
/* end reset */

/* Page styles */
*, *::after, *::before {box-sizing: border-box}
div, span, ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, article, section, p, a, img, table, td, th, blockquote, input, textarea, select, option, time {line-height: 1.15;color: #01245a;font-weight: 600;font-style: normal;font-family: 'Prozima Nova', 'Arial', sans-serif;background: transparent;word-wrap: break-word;overflow-wrap: break-word}
html, body {height: 100%;min-height: 100%; width: 100%;}
body {background: #fff;position: relative;}
p {margin: 1em 0;line-height: 1.15}
ul {list-style: none}
a {color: #fd8204 !important;text-decoration: underline;outline: none}
a:visited, a:active {color: #fd8204 !important}
a:hover {color: #6acdb1 !important}
em {font-style: normal;color: red;font-weight: bold}
del {text-decoration-color: red}
div, span, ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, article, section, p, a, img, table, td, th, blockquote, input, textarea, select, option, time {font-size: 12px}
/* Page styles end */

/* Header styles */
.headerWrap {max-width: 1980px;}
header {width: 100%;height: 39px;border-bottom: 1px solid #eee;margin: 0 auto;padding: 0;position: sticky;z-index: 999;background: #fff; top: 0;}
header div {margin: 0 auto}
header div:after::after {content:".";display:block;height:0px;clear:both;line-height:0;visibility:hidden}
header div h1 {float: left;width: 78px;height: 26px;padding-top: 7px;padding-left: 5px;background: none}
header div ul {float: right;height: 25px;padding-top: 7px;padding-right: 5px}
header div ul li {width: 25px;height: 25px;float: right;margin-left: 3px}
/* Header style end */

/*Flags*/
.noFlag {display:none;}
#selected-country{margin-bottom:15px;cursor:pointer}
#country-navigation-wrapper{width:50px;position:absolute;top:25px;right:15px;vertical-align:top;z-index:103}
#country-navigation-wrapper img{border:#FFF 1px solid;width:calc(100% - 2px)}
#country-nav{position:relative;overflow:hidden}
#country-nav div{position:relative;width:100%;margin-left:100%;margin-bottom:15px}
.privacyCertified {cursor: pointer;}
@media screen and (max-width: 400px) {
	#country-navigation-wrapper {top: 15px;}
}

/* pre-loader */
#preload {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99999;background: #FFF}
#puyoWrapper {width: 7.3%;height: 16vw;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -100%);}
#puyo {width: 100%;height: auto;position: relative;z-index: 10;animation: jump 1s infinite;}
#puyo img {width: 100%;height: 100%}
#puyoShadow {width: 54%;height: 2vw;position: absolute;z-index: 0;bottom: 25px;left: 50%;transform: translateX(-50%);background: rgba(20, 20, 20, .1);box-shadow: 0px -20px 20px 25px rgba(20,20,20,.1);border-radius: 30px / 40px;animation: shrink 1s infinite;}
@keyframes jump {
    0% {top:0;}
    45% {top:53%;height:46.7%;}
    55% {top:60%;height:40%;}
    65% {top:53%;height:46.7%;}
    95% {top: 0;}
    100% {top: 0;}
}
@keyframes shrink {
    0% {bottom:1vw;width:54%;height:2vw;background:rgba(20, 20, 20, .1);box-shadow:0px -10px 1vw 1.5vw rgba(20,20,20,.1);border-radius:2vw;}
    50% {bottom:1.5vw;width:14.3%;height:0.5vw;background:rgba(20, 20, 20, .3);box-shadow:0px 0 0.5vw 2vw rgba(20,20,20,.3);border-radius:1vw;}
    100% {bottom:1vw;width:54%;height:2vw;background:rgba(20, 20, 20, .1);box-shadow:0px -10px 1vw 1.5vw rgba(20,20,20,.1);border-radius:2vw;}
}
.loading {position: absolute;top: calc(50% + 150px);left: 50%;transform: translate(-50%, -50%);color: #000;font: 700 normal 4vw/1.5 'Proxima Nova', sans-serif;}
/* end preloader */


/*  ++++++ I commented out original code below and replaced it with things that made it not collapse, left the original just in case there was a reason for certain things.  ++++++++ */

/*#common-contents {position: relative;width: 100%;max-width:1980px;margin: 0 auto;z-index: 1000;overflow: hidden}*/
/*#contents-main {width: 100%;height:90vh;padding: 0;margin: 0 0 -.2px;border: 0;background: url("../image/backgrounds/contents-main.png") bottom center repeat-x;position: relative}*/
/*#contents-main .textBounce {transform: translateX(-50%) rotate(-10deg);display: block;left: 50%;width:100%;position: absolute;opacity: 0;text-align:center;z-index:20}*/
/*#contents-main #console{width:80%;position:absolute;left:50%;bottom:6vh;display:block;text-align:center;transform:translateX(-50%)}*/
/*#contents-main .textBounce span {display: inline-block;-webkit-transform: skewX(-20deg);-o-transform: skewX(-20deg);-moz-transform: skewX(-20deg);transform: skewX(-20deg);text-shadow: #01245a -2px -2px, #01245a 0 -2px, #01245a -2px 0, #01245a 1px 1px, #01245a 2px 2px, #01245a 3px 3px, #01245a 4px 4px, #01245a 5px 5px, #01245a 6px 6px;color: #FFF;position: relative;min-width: 1vw;font-family: 'Proxima Nova', sans-serif;font-weight: 900;font-size: 4vw;text-align: center;opacity: 0}*/

/* Content */
#common-bg {width: 100%;height: 100%;min-height: 100%;position: fixed;top: 0;z-index: 100;background: url("../img/backgrounds/bg_pc.jpg") center top no-repeat;background-size: cover;}

/* Content Hero section */
#common-contents {position: relative;width: 100%;margin: 0 auto;z-index: 998;}
#contents-main {width: 100%;margin: 0 auto; padding: 0;border: 0;background: url("../img/backgrounds/contents-main.png") bottom center repeat-x;position: relative}
#contents-main .innerWrapper {max-width: 1980px;margin: 0 auto;position: relative;}
#contents-main h1 {padding: 7% 0 0;text-align: center;z-index: 100;position: relative;padding-bottom: 2vw}
#contents-main h1 img {opacity: 0}
#contents-main h1 img.active {animation-name: rotate01;animation-duration: .65s;animation-timing-function: cubic-bezier(0, 0, 0.58, 1);opacity: 1}
#contents-main .textBounce span {
	display: inline-block;
	-webkit-transform: skewX(-20deg);
	-o-transform: skewX(-20deg);
	-moz-transform: skewX(-20deg);
	transform: skewX(-20deg);
	text-shadow: #01245a -2px -2px, #01245a 0 -2px, #01245a -2px 0, #01245a 1px 1px, #01245a 2px 2px, #01245a 3px 3px, #01245a 4px 4px, #01245a 5px 5px, #01245a 6px 6px;
	color: #FFF;
	position: relative;
	min-width: 1vw;
/*
	font-family: 'Proxima Nova', sans-serif;
	font-weight: 900;
*/
	font-size: 4vw;
	text-align: center;
	opacity: 0;
	font-family: 'canada-type-gibson', sans-serif;
	font-weight: 600;
	font-style: normal;
}
#contents-main .textBounce {
    transform: translateX(-50%) rotate(-10deg);
    display: block;
    left: 50%;
    width: 100%;
    position: relative;
    opacity: 0;
    text-align: center;
    z-index: 20;
}
#contents-main #console {
    width: 80%;
    display: block;
    text-align: center;
    margin: 2% auto 0;
    padding-bottom: 3%;
}
#buyNowText {
    width: 90%;
    display: block;
    text-align: center;
    margin: 9% auto 0;
    text-shadow: #01245a -2px -2px, #01245a 0 -2px, #01245a -2px 0, #01245a 1px 1px, #01245a 2px 2px, #01245a 3px 3px, #01245a 4px 4px, #01245a 5px 5px, #01245a 6px 6px;
    color: #FFF;
    font-size: 12vw;
}
#console a:hover {
	box-shadow: none;
}
#contents-main #console a{display:inline-block;width:17%;margin-right:3%}
#contents-main #console a:last-child{margin-right:0}
#contents-main #console a div img{width:100%;height:auto}
.modesCallout {
	font-size: 9vw;
	margin-bottom: 10px;
    text-shadow: 0px 0px 5px #01245a, 0px 0px 10px #01245a, 0px 0px 18px #01245a, 2px 2px #01245a, -2px -2px #01245a, 0px 2px #01245a, 2px 0px #01245a;
	text-align: center;
	color: white;
    font-weight: 600;
}
.trailerImage { 
	width: 90%; 
	max-width: 350px; 
	display: block; 
	margin: 35px auto 0;
	z-index: 102;
	text-align: center;
}
.trailerImage img {
	width: 100%;
	cursor: pointer;
}
.trailerImage p {
	color: white;
	font-size: 25px;
	margin-bottom: 10px;
	text-shadow: 0px 0px 5px #01245a, 0px 0px 10px #01245a, 0px 0px 18px #01245a;
}
@media screen and (min-width: 640px) {
	.trailerImage {margin-top: 40px;}
	#buyNowText {
		font-size: 8vw;
	}
	.modesCallout {
		font-size: 40px;
	}
}
@media screen and (min-width: 930px) {
	.trailerImage {
		position: absolute;
		right: 4%;
		top: 425px;
		margin-top: 0;
		width: 25%;
	}
	.trailerImage p {
		margin: 0 auto;
	}
	.modesCallout {
		position: absolute;
		left: 4%;
		top: 425px;
		margin-top: 15px;
	}
	#buyNowText {
		font-size: 5vw;
		margin-top: 12%;
	}
	#console a:hover {
		box-shadow: 0px 0px 15px yellow, 0px 0px 20px yellow;
	}
}
@media screen and (min-width: 1500px) {
	#buyNowText {
		font-size: 75px;
		margin-top: 6%;
	}
}
/* Content Hero section end */

/* Content Wrapper */
#common-contents>div.contentsWrapper {background: url("../img/backgrounds/contentsWrapper.png") center top repeat;position: relative;z-index:1}
#common-contents>div.contentsWrapper div.contentsWrapper {margin: 0 auto;position: relative}
#common-contents>div.contentsWrapper div.contentsWrapper>div {position: relative}
#common-contents>div.contentsWrapper div.contentsWrapper>div>* {position: relative}
/* Content Wrapper end */

/* Newsletter section */
/*As this is a new section, it is heavily commented to make it easier to update for various sites*/
.newsletterBG {width: 100%; height: auto;}
.newsletterBG {background: url("../img/ingamebackgrounds/constelations_blue.jpg") center top no-repeat;background-size: cover;}
/*This controls the actual wrap around the newsletter area. This controls the width of that wrapper as well*/
.newsletterBG .innerWrapper {
	display: block;
	position: relative;
	width: 90%;
	max-width: 450px;
	margin: 0 auto;
	padding: 30px 0;
}
.newsletterHeader {
	text-align: center;
	background: rgba(255,255,255,.65);
}
/*Main title "NEWSLETTER" */
.newsletterHeader h2 {
	font-style: italic;
	font-weight: 800;
	font-family: futura-pt, san-serif;
	font-size: 35px;
	padding-top: 30px;
}
/*Smaller header text Sign up...*/
.newsletterHeader h3 {
	font-style: normal;
	font-weight: 300;
	font-family: open-sans, san-serif;
	font-size: 20px;
}
/*_signup is the form itself, the .newsletter class above refers to the section that sits above the actual form*/
#mc_embed_signup {
	background: rgba(255,255,255,.65);
}
/*This ccontrols the little mail icon and input for email address, allows them to sit next to eachother and fill the gap caused by inline-block*/
.mc-field-group .fa.fa-envelope, #mc_embed_signup .mc-field-group input {
	display: inline-block;
	margin-right: -5px;
}
/*This controls the mail icon*/
.mc-field-group .fa.fa-envelope {
	font-size: 1.5em;
    padding: 15px;
    color: #FFF;
    background-color: #01245a;
    width: 55px;
    height: 55px;
}
/*This controls the input field where you type in the email address*/
#mc_embed_signup .mc-field-group input {
	background: #FFF;
    height: 55px;
    width: 80%;
    vertical-align: top;
    font-size: 18px;
    border: 1px solid #01245a;
	border-radius: initial;
	font-weight: 400;
}
/*This controls the label elements, this is the area that has the check boxes and small text about what they are checking for. The
class .privacyNewsletter refers to the span around privacy policy text which gets linked to the privacy policy*/
#mc_embed_signup .mc-field-group label, .privacyNewsletter {
    display: block!important;
    margin-bottom: 3px;
    font-size: 11px;
}
/*style the privacy Policy text*/
a.privacyNewsletter {
	color: red!important;
	display: inline!important;
}
/*controls the sign button. In this case I have the hover state being the same. */
#mc_embed_signup .button, #mc_embed_signup .button:hover {
	background-color: #01245a;
	border-radius: initial;
	margin: 0 auto;
	height: auto;
	padding: 10px 22px;
}
#mc_embed_signup .button:disabled {
	opacity: .7
}
#mc_embed_signup .clear {
    clear: both;
    text-align: center;
}
/*Controls the error message that comes up if you don't fill in the email address after clicking into it.*/
#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
    margin: 4px 0 1em 0;
    padding: 5px 10px;
    background-color: transparent;
	color: red;
}
/*Controls the positioning and width of the email address input box and the text next to the checkboxes*/
#mc_embed_signup .mc-field-group.input-group ul li {
    width: 75%;
    margin-left: 17%;
	margin-top: 15px;
}
/* removes the base check box */
.myCheckbox input {
	display:none!important;
}
/* This is for the custom checkbox itself. */
.myCheckbox span {
	border: 2px solid #01245a;
    display: inline-block;
    font-size: 25px;
    height: 30px;
    width: 30px;
    padding: 0;
    float: left;
    vertical-align: middle;
    border-radius: 4px;
	position: relative;
    top: -4px;
    margin: 4px 13px 0 -45px;
	cursor: pointer;
}
/* This is the check mark within the custom checkbox */
.myCheckbox input:checked + span {	
	left: 10.75px;
    top: 0;
    width: 10px;
    height: 19px;
    border: solid #01245a;
    border-width: 0 4px 4px 0;
    transform: rotate(45deg);	
}
/* This is the box around the checkmark when checked. The original empty checkbox gets replaced by just the checkmark so we need to add this in to make
the box still exists. This is why it is a pseudo class */
.myCheckbox input:checked + span:before {	
    content: "";
    position: absolute;
    z-index: -1;
    width: 30px;
    height: 30px;
    top: -4px;
    left: -9px;
    border: 2px solid #01245a;
    border-radius: 4px;
    transform: rotate(-45deg);
}
/*controls the success message */
#mc_embed_signup div.response {
    margin: 0 auto;
    padding: 1em 0 .5em 0;
    font-weight: bold;
    top: -1.5em;
    z-index: 1;
    width: 95%;
    font-size: 11px;
    color: darkgreen!important;
}
/*controls the success message (specifically the color) */
@media screen and (min-width: 400px) {
/*	controls where the checkbox/small text sits */
	#mc_embed_signup .mc-field-group.input-group ul li {
		margin-left: 14%;
	}
/*	controls width of both the email input box and the text next to checkbox*/
	#mc_embed_signup .mc-field-group input, #mc_embed_signup .mc-field-group.input-group ul li {
		width: 85%;
	}
}
@media screen and (min-width: 500px) {
	/*	controls where the checkbox/small text sits */
	#mc_embed_signup .mc-field-group.input-group ul li {
		margin-left: 11%;
	}
	/*	controls width of both the email input box and the text next to checkbox*/
	#mc_embed_signup .mc-field-group input, #mc_embed_signup .mc-field-group.input-group ul li {
		width: 88%;
	}
}
/* Newsletter section end */


/* Content end */

/* Footer styles - updated the styles, more simplified than previous version */
footer {background-color: #FFF; width: 100%; text-align: center;}
footer img {display: inline-block; margin: 0 auto; text-align: center;}
.ratings {padding: 20px 0;text-align: center;}
.ratings img {height: 72px;}
.consoleLogos {width:100%;padding: 20px 0;margin-bottom: 15px; background-color: #000;text-align: center;}
.consoleLogos img:not(:last-child) {margin-right: 10px;}
.consoleLogos img {margin: 10px auto;max-height: 40px;}
.copy p {font-size: 12px;text-align: center; padding-bottom: 20px;width: 90%;max-width: 800px;margin: 0 auto;}
.pslegalLogo {
	height: 14px;
}
.ps4legalLogo {
	height: 10px;
}
/* Footer style end */

/* animation classes */
.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both}
@-webkit-keyframes bounceInDown {
from, 60%, 75%, 90%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000)}
0% {opacity:0;-webkit-transform:translate3d(521px, -3000px, 0) skewX(-20deg);transform:translate3d(521px, -3000px, 0) skewX(-20deg)}
60% {opacity:1;-webkit-transform:translate3d(0, 25px, 0) skewX(-20deg);transform:translate3d(0, 25px, 0) skewX(-20deg)}
75% {-webkit-transform:translate3d(0, -10px, 0) skewX(-20deg);transform:translate3d(0, -10px, 0) skewX(-20deg)}
90% {-webkit-transform:translate3d(0, 5px, 0) skewX(-20deg);transform:translate3d(0, 5px, 0) skewX(-20deg)}
to {-webkit-transform:translate3d(0, 0, 0) skewX(-20deg);transform:translate3d(0, 0, 0) skewX(-20deg);opacity:1}
}
@keyframes bounceInDown {
from, 60%, 75%, 90%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000)}
0% {opacity:0;-webkit-transform:translate3d(521px, -3000px, 0) skewX(-20deg);transform:translate3d(521px, -3000px, 0) skewX(-20deg)}
60% {opacity:1;-webkit-transform:translate3d(0, 25px, 0) skewX(-20deg);transform:translate3d(0, 25px, 0) skewX(-20deg)}
75% {-webkit-transform:translate3d(0, -10px, 0) skewX(-20deg);transform:translate3d(0, -10px, 0) skewX(-20deg)}
90% {-webkit-transform:translate3d(0, 5px, 0) skewX(-20deg);transform:translate3d(0, 5px, 0) skewX(-20deg)}
to {-webkit-transform:translate3d(0, 0, 0) skewX(-20deg);transform:translate3d(0, 0, 0) skewX(-20deg);opacity:1}
}
.bounceInDown {-webkit-animation-name: bounceInDown;animation-name: bounceInDown}
@keyframes rightSpring {
 0% {left:0}
 50% {left:-30px}
 100% {left:0}
}
@keyframes leftSpring {
 0% {left:0}
 50% {left:30px}
 100% {left:0}
}
@keyframes horizontal01 {
 0% {transform:translateX(-5px)}
 100% {transform:translateX(0px)}
}
@keyframes vertical01 {
 0% {transform:translateY(-20px)}
 100% {transform:translateY(0px)}
}
@keyframes fadeIn {
 0% {opacity:0}
 100% {opacity:1}
}
@keyframes jump01 {
 0% {transform:translateY(400px);opacity:0}
 20% {opacity:1}
 80% {transform:translateY(-20px)}
 100% {transform:translateY(0px)}
}
@keyframes jump02 {
 0% {transform:translateY(200px);opacity:0}
 20% {opacity:1}
 80% {transform:translateY(-10px)}
 100% {transform:translateY(0px)}
}
@keyframes rotate01 {
 0% {transform:rotate(360deg) scale(0.1, 0.1);opacity:0}
 20% {opacity:1}
 80% {transform:rotate(-3deg) scale(1.05, 1.05)}
 100% {transform:rotate(0deg) scale(1, 1)}
}
@keyframes rotate02 {
 0% {transform:rotate(-45deg) scale(0.1, 0.1);opacity:0}
 20% {opacity:1}
 80% {transform:rotate(3deg) scale(1.05, 1.05)}
 100% {transform:rotate(0deg) scale(1, 1)}
}
@keyframes rotate03 {
 0% {transform:rotate(0deg)}
 100% {transform:rotate(360deg)}
}
@keyframes rotateMinus {
 0% {transform:rotate(360deg) scale(0.1, 0.1);opacity:0}
 20% {opacity:1}
 80% {transform:rotate(-10deg) scale(1.05, 1.05)}
 100% {transform:rotate(-5deg) scale(1, 1)}
}
@keyframes rotatePlus {
 0% {transform:rotate(-360deg) scale(0.1, 0.1);opacity:0}
 20% {opacity:1}
 80% {transform:rotate(10deg) scale(1.05, 1.05)}
 100% {transform:rotate(5deg) scale(1, 1)}
}
@keyframes slideLeft {
 0% {transform:translateX(800px);opacity:0}
 20% {opacity:1}
 80% {transform:translateX(-20px)}
 100% {transform:translateX(0px)}
}
@keyframes slideRight {
 0% {transform:translateX(-800px);opacity:0}
 20% {opacity:1}
 80% {transform:translateX(20px)}
 100% {transform:translateX(0px)}
}
@media screen and (min-width:2000px) {
	#contents-main .textBounce span {
		font-size: 90px;
	}	
}
@media screen and (max-width:930px) and (orientation:portrait){
    #puyoWrapper {width: 20%;height: 44vw}
    .loading {font-size: 6vw}
    #contents-main .textBounce span {font-size: 8vw;min-width: 2vw}
    @keyframes shrink {
        0% {bottom:1vw;width:54%;height:4vw;background:rgba(20, 20, 20, .1);box-shadow:0px -10px 4vw 1.5vw rgba(20,20,20,.1);border-radius:6vw;}
        50% {bottom:1.5vw;width:14.3%;height:2vw;background:rgba(20, 20, 20, .3);box-shadow:0px 0 2vw 2vw rgba(20,20,20,.3);border-radius:4vw;}
        100% {bottom:1vw;width:54%;height:4vw;background:rgba(20, 20, 20, .1);box-shadow:0px -10px 4vw 1.5vw rgba(20,20,20,.1);border-radius:6vw;}
    }
    #contents-main #console{width:60%}
    #contents-main #console a{width:45%;padding-bottom:20px}
    #contents-main #console a:nth-child(odd){margin-right:4%}
    #contents-main #console a:nth-child(even){margin-right:0}
}
@media screen and (max-width:1100px) and (orientation:landscape){
/*    #contents-main{height:100vw}*/
    #puyoWrapper {width: 20%;height: 44vw}
    .loading {font-size: 6vw}
    #contents-main .textBounce span {font-size: 4.5vw;min-width: 2vw}
    @keyframes shrink {
        0% {bottom:1vw;width:54%;height:4vw;background:rgba(20, 20, 20, .1);box-shadow:0px -10px 4vw 1.5vw rgba(20,20,20,.1);border-radius:6vw;}
        50% {bottom:1.5vw;width:14.3%;height:2vw;background:rgba(20, 20, 20, .3);box-shadow:0px 0 2vw 2vw rgba(20,20,20,.3);border-radius:4vw;}
        100% {bottom:1vw;width:54%;height:4vw;background:rgba(20, 20, 20, .1);box-shadow:0px -10px 4vw 1.5vw rgba(20,20,20,.1);border-radius:6vw;}
    }
    #contents-main #console{width:60%}
    #contents-main #console a{width:45%;padding-bottom:20px}
    #contents-main #console a:nth-child(odd){margin-right:4%}
    #contents-main #console a:nth-child(even){margin-right:0}
}
@media screen and (max-width: 800px){
    #contents-main .textBounce span {font-size: 10vw;}
    #contents-main h1 img{width:80%;height:auto}
    #common-bg{background-image: url("../img/backgrounds/bg_sp.jpg");}
    #contents-main h1{padding-top:10vw;padding-bottom:8vw}
}
@media screen and (max-width: 800px) and (orientation:landscape) {
/*    #contents-main{height:90vw;min-height:800px}*/
    #contents-main .textBounce span {font-size: 6vw;}
    #contents-main h1 img{width:80%;height:auto}
    #common-bg{background-image: url("../img/backgrounds/bg_sp.jpg");}
    #contents-main h1{padding-top:10vw;padding-bottom:8vw}
}
@media screen and (max-width:675px){
    #contents-main #console{width:80%}
	#contents-main #console{margin: 10% auto 0;}
}
@media screen and (max-width:600px) and (orientation:landscape){
    #contents-main{min-height:750px}	
}
@media screen and (max-width:550px){
    #contents-main h1{padding-top:25vw;padding-bottom:10vw}
    #contents-main #console{width:90%;}
}
@media screen and (max-width:460px){
    #contents-main h1{padding-top:10vw;padding-bottom:8vw}
    #contents-main #console a{width:55%;margin:0}
	#contents-main #console a:nth-child(odd) { margin-right: 0;}
}
@media screen and (max-width:460px) and (orientation:portrait){
/*    #contents-main{min-height:600px}*/
}
/* SYSTEM START*/
.systemBanner {
	text-align: center;
	position: relative;
	width: 300px;
	height: 83px;
	margin: 0 auto;
	opacity: 0;
}
.systemBanner img {
	width: 100%
}
.systemBanner p {
    width: 100%;
    text-shadow: -1px -1px 1px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038;
    color: white;
    font-size: 22px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-3deg);
    margin: 0;
}
.systemBanner h1 {
	position: absolute;
    top: -5px;
    right: -5px;
    font-size: 17px;
    transform: rotate(15deg);
    background-color: #FFF;
    padding: 5px 14px;
    border: 3px solid darkred;
    border-radius: 4px;
    color: darkred;
}
.green .systemBanner p {
	text-shadow: -1px -1px 1px #125033, 2px 2px 3px #125033, 2px 2px 3px #125033, 2px 2px 3px #125033, 2px 2px 3px #8a0038, 2px 2px 3px #125033, 2px 2px 3px #125033, 2px 2px 3px #125033, 2px 2px 3px #125033, 2px 2px 3px #8a0038, 2px 2px 3px #125033, 2px 2px 3px #125033;
}
.systemText {
	text-shadow: -1px -1px 1px #FFF, 1px 1px 1px #FFF, -1px 1px 1px #FFF, 1px -1px 1px #FFF, -1px -1px 1px #FFF, 1px 1px 1px #FFF, -1px 1px 1px #FFF, 1px -1px 1px #FFF, -1px -1px 1px #FFF, 1px 1px 1px #FFF, -1px 1px 1px #FFF, 1px -1px 1px #FFF;
	font-size: 16px;
	width: 95%;
	margin: 0 auto;
	transform: rotate(-3deg);
}
.pink, .green {
	max-width: 450px;
	margin: 0 auto;
	position: relative;
	opacity: 0;
}
.imgAnimate, .textAnimate {
	opacity: 0;
	position: relative;
}
.pink > img, .green > img, .imgAnimate img {
	width: 80%;
	max-width: 400px;
	transform: rotate(-3deg);
	margin: 5% auto;
	text-align: center;
	display: block;
}
.pink .imgAnimate a:last-child img, .green .imgAnimate a:first-of-type img {
	margin-right: 6%;
}
.pink .imgAnimate a:first-of-type img, .green .imgAnimate a:last-child img {
	margin-left: 6%;	
}
.pink .imgAnimate img {
	border: 5px solid #8a0038;
}
.green .imgAnimate img {
	border: 5px solid #036b0f;
}
.pink > img {
	border: 2px solid #8a0038;
}
.green > img {
	border: 2px solid #036b0f;
}
@media screen and (min-width: 640px) {
	.pink, .green {
		max-width: 600px;
		width: 600px;
		height: 750px;
	}
	.pink {
		background: url(../img/system/pink_bubble.png) 0 0 no-repeat;
		background-size: 100%;
	}
	.green {
		background: url(../img/system/green_bubble.png) 0 0 no-repeat;
		background-size: 100%;
	}
	.green:last-child {
		height: 740px;
	}
	.systemBanner {
		width: 400px;
		height: 108px;
	}
	.systemBanner p {
		font-size: 28px;
	}
	.systemText {
		width: 70%;
	}
	.pink .imgAnimate a:last-child img, .green .imgAnimate a:first-of-type img {
		margin-right: 0;
	}
	.pink .imgAnimate a:first-of-type img, .green .imgAnimate a:last-child img {
		margin-left: 0;	
	}
}
@media screen and (min-width: 768px) {
	.pink {

		float: left;
	}
	.green {

		float: right;
	}
	#characters {
		clear: both;
	}
	#system {
		max-width: 90%;
		margin: 0 auto;
	}
}
@media screen and (min-width: 1024px) {
	.green {
		margin-top: -50px;
	}	
	.systemBanner h1 {
		top: -5px;
		right: -15px;
		font-size: 25px;
		transform: rotate(30deg);
		padding: 5px 20px;
	}
}
@media screen and (min-width: 1250px) {
	#system {
		max-width: 1250px;
	}
	.green {
		margin-top: 0;
	}
	#system div.green:nth-child(2) {
		margin-top: 300px;
		margin-bottom: 50px;
	} 
	#system div:nth-child(3) {
		position: relative;
   		right: 6%;
		margin-bottom: 65px;
	} 
	#system div:nth-child(4) {
		position: relative;
   		right: 4%;
	}
}
/* SYSTEM END*/
/*CHARACTERS START*/
#characters {
	background-color: #FFF;
	border-top: 7px solid #575757;
	border-bottom: 7px solid #575757;
	text-align: center;
}
.characterBanner {
	text-align: center;
	position: relative;
	width: 300px;
	height: 65px;
	margin: 25px auto;
	background: url('../img/character/characters_banner.png') center top no-repeat;
	background-size: 100%;	
}
.characterBanner img {
	width: 100%;
}
.characterBanner p {
	text-shadow: -1px -1px 1px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038, 2px 2px 3px #8a0038;
    color: white;
    font-size: 30px;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
	margin: 0;
	
}
.group1, .group2, .group3, .group4, .group5 {
	width: 100%;
	margin-bottom: 3px;
}
.group5 {
	text-align: center;
}
.char {
	width: 19%;
	position: relative;
	display: inline-block;
}
.char img {
	width: 100%;
}
.char .border {
	display:none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.active .border, .char:hover .border {
	display: inline;	
}
.charImgGroup {
	position: relative;
	width: 95%;
	margin: 0 auto;
}
.charBG {
	width: 80%;
    padding-top: 50px;
    position: relative;
    right: 10%;
}
.charTextGroup {
	position: relative;
	width: 70%;
    left: 5px;
	text-align: left;
	margin-bottom: 3%;
}
.charTextGroup p {
	margin: 3% auto;
	text-align: left;
}
.charDescription {
	font-size: 14px;
}
.feverText {
	text-shadow: -1px -1px 1px red, 1px 1px 1px red, -1px 1px 1px red, 1px -1px 1px red; 
	color: white;
	font-size: 18px;
}
.feverImg {
	max-height: 20px;
}
.name {
	text-shadow: -1px -1px 1px #00405b, 2px 2px 3px #00405b, 2px 2px 3px #00405b, 2px 2px 3px #00405b, 2px 2px 3px #00405b, 2px 2px 3px #00405b, 2px 2px 3px #00405b, 2px 2px 3px #00405b, 2px 2px 3px #00405b, 2px 2px 3px #00405b, 2px 2px 3px #00405b, 2px 2px 3px #00405b; 
	color: white;
	font-size: 25px;
	position: absolute;
	bottom: 25%;
	left: 3%;
}
.charImg {
	position: absolute;
	right: -30px;
	width: 100%;
	height: auto;
}
@media screen and (min-width: 500px) {
	.charDescription {
		font-size: 16px;
	}
	.feverText {
		font-size: 20px;
	}
	.feverImg {
		max-height: 25px;
	}
}
@media screen and (min-width: 640px) {
	.group1 {
		margin-left: 3%;
	}
	.group2 {
		margin-left: 2%;
	}
	.group3 {
		margin-left: 1%;
	}
	.charImgGroup {
		top: 20px;
	}
	#characters .left, #characters .right {
		display: inline-block;
		vertical-align: bottom;
		margin: 0 auto 3%;
	}
	#characters .left {
		width: 55%;
		max-width: 564px;
	}
	#characters .right {
		width: 44%;
		max-width: 450px;
	}
	.charDescription {
		font-size: 12px;
	}
	.feverText {
		font-size: 18px;
	}
	.feverImg {
		max-height: 20px;
	}
	.charBG {
		width: 77%;
		padding-top: 0;
		right: 14%;
	}
	.name {
		bottom: 29%;
	}
	.charImg {
		top: -20%;
	}
}
@media screen and (min-width: 768px) {
	.name {
		bottom: 30%;
	}
	.charBG {
		width: 79%;
	}
}
@media screen and (min-width: 1024px) {
	.name {
		bottom: 27%;
	}
	.charImgGroup {
		top: 32px;
	}
	.charDescription {
		font-size: 16px;
	}
	.feverText {
		font-size: 20px;
	}
	.feverImg {
		max-height: 25px;
	}
}
#scrollup {
	position: fixed;
    right: 2%;
    bottom: 2%;
    width: 50px;
    z-index: 998;
	cursor: pointer;
	display: none;
}

.hiddenChars {
	opacity: 0;
	width: 0;
}

.ppt2Logo {
	width: 50%;
    position: absolute;
    right: 75px;
    top: 11px;
    max-width: 200px;
    z-index: 103;
}
.ppt2LogoFooter {
	margin: 10px auto;
    width: 90%;
    max-width: 400px;
}
.ppt2LogoLi {
	width: 120px;
    float: left;
    margin-top: 8px;
}